Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@duetds/components

Package Overview
Dependencies
Maintainers
2
Versions
597
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@duetds/components - npm Package Compare versions

Comparing version 0.0.1-alpha.39 to 0.0.1-alpha.40

lib/cjs/es5/build/chunk-2badfa5e.js
lib/duet/chunk-2badfa5e.js
lib/duet/chunk-b11ffd06.es5.js
lib/esm/es2017/build/chunk-2badfa5e.js
lib/esm/es5/build/chunk-2badfa5e.js

106

lib/cjs/es5/build/duet-button.entry.js

@@ -5,3 +5,3 @@ "use strict";

var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var chunk_c3aeb3ca_js_1 = require("./chunk-c3aeb3ca.js");
var chunk_2badfa5e_js_1 = require("./chunk-2badfa5e.js");
var DuetButton = /** @class */ (function () {

@@ -119,7 +119,7 @@ function DuetButton() {

if (this.url) {
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_c3aeb3ca_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_2badfa5e_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_c3aeb3ca_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_2badfa5e_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
}

@@ -296,7 +296,9 @@ };

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -317,3 +319,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -411,46 +413,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;
var DuetSpinner = /** @class */ (function () {

@@ -457,0 +461,0 @@ function DuetSpinner() {

106

lib/cjs/es5/build/duet-button.sc.entry.js

@@ -5,3 +5,3 @@ "use strict";

var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var chunk_c3aeb3ca_js_1 = require("./chunk-c3aeb3ca.js");
var chunk_2badfa5e_js_1 = require("./chunk-2badfa5e.js");
var DuetButton = /** @class */ (function () {

@@ -119,7 +119,7 @@ function DuetButton() {

if (this.url) {
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_c3aeb3ca_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_2badfa5e_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_c3aeb3ca_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon !== "" ? duet_core_js_1.h("span", { innerHTML: chunk_2badfa5e_js_1.a[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
}

@@ -296,7 +296,9 @@ };

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -317,3 +319,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -411,46 +413,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;
var DuetSpinner = /** @class */ (function () {

@@ -457,0 +461,0 @@ function DuetSpinner() {

970

lib/cjs/es5/build/duet-card.entry.js

@@ -5,5 +5,929 @@ "use strict";

var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) {
ctx = null;
}
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle(callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) {
return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function');
};
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
var DuetCard = /** @class */ (function () {
function DuetCard() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -14,12 +938,41 @@ */

/**
* applySizeClasses() function
*/
DuetCard.prototype.applySizeClasses = function (size) {
var small = false;
var medium = false;
var large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
var el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
};
/**
* componentDidLoad() function
*/
DuetCard.prototype.componentDidLoad = function () {
var _this = this;
var _this_1 = this;
// When component loads, check if global Turva theme exists.
chunk_e639420f_js_1.a(this.element);
// Init container queries
this.containerQuery = new index(function (entries) {
for (var _c = 0, entries_1 = entries; _c < entries_1.length; _c++) {
var entry = entries_1[_c];
_this_1.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
chunk_e639420f_js_1.a(_this.element);
chunk_e639420f_js_1.a(_this_1.element);
});

@@ -38,2 +991,3 @@ // Observe for className changes in <html> element.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
};

@@ -49,3 +1003,3 @@ /**

});
return (duet_core_js_1.h("div", { class: cardClasses }, this.title !== "" ? duet_core_js_1.h("h3", null, this.title) : "", duet_core_js_1.h("slot", null)));
return (duet_core_js_1.h("div", { class: cardClasses }, this.cardTitle !== "" ? duet_core_js_1.h("h2", null, this.cardTitle) : "", duet_core_js_1.h("slot", null)));
};

@@ -65,2 +1019,6 @@ Object.defineProperty(DuetCard, "is", {

return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -72,6 +1030,2 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}

@@ -84,3 +1038,3 @@ };

Object.defineProperty(DuetCard, "style", {
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; },
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small {\n padding: 28px;\n}\n.duet-card.duet-cq-large {\n padding: 48px;\n}\n\nh2 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva h2 {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small h2 {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large h2 {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; },
enumerable: true,

@@ -87,0 +1041,0 @@ configurable: true

970

lib/cjs/es5/build/duet-card.sc.entry.js

@@ -5,5 +5,929 @@ "use strict";

var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) {
ctx = null;
}
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle(callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) {
return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function');
};
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
var DuetCard = /** @class */ (function () {
function DuetCard() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -14,12 +938,41 @@ */

/**
* applySizeClasses() function
*/
DuetCard.prototype.applySizeClasses = function (size) {
var small = false;
var medium = false;
var large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
var el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
};
/**
* componentDidLoad() function
*/
DuetCard.prototype.componentDidLoad = function () {
var _this = this;
var _this_1 = this;
// When component loads, check if global Turva theme exists.
chunk_e639420f_js_1.a(this.element);
// Init container queries
this.containerQuery = new index(function (entries) {
for (var _c = 0, entries_1 = entries; _c < entries_1.length; _c++) {
var entry = entries_1[_c];
_this_1.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
chunk_e639420f_js_1.a(_this.element);
chunk_e639420f_js_1.a(_this_1.element);
});

@@ -38,2 +991,3 @@ // Observe for className changes in <html> element.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
};

@@ -49,3 +1003,3 @@ /**

});
return (duet_core_js_1.h("div", { class: cardClasses }, this.title !== "" ? duet_core_js_1.h("h3", null, this.title) : "", duet_core_js_1.h("slot", null)));
return (duet_core_js_1.h("div", { class: cardClasses }, this.cardTitle !== "" ? duet_core_js_1.h("h2", null, this.cardTitle) : "", duet_core_js_1.h("slot", null)));
};

@@ -65,2 +1019,6 @@ Object.defineProperty(DuetCard, "is", {

return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -72,6 +1030,2 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}

@@ -84,3 +1038,3 @@ };

Object.defineProperty(DuetCard, "style", {
get: function () { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; },
get: function () { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva.sc-duet-card {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small.sc-duet-card {\n padding: 28px;\n}\n.duet-card.duet-cq-large.sc-duet-card {\n padding: 48px;\n}\n\nh2.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva.sc-duet-card h2.sc-duet-card {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small.sc-duet-card h2.sc-duet-card {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large.sc-duet-card h2.sc-duet-card {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; },
enumerable: true,

@@ -87,0 +1041,0 @@ configurable: true

4

lib/cjs/es5/build/duet-input.entry.js

@@ -5,3 +5,3 @@ "use strict";

var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var chunk_c3aeb3ca_js_1 = require("./chunk-c3aeb3ca.js");
var chunk_2badfa5e_js_1 = require("./chunk-2badfa5e.js");
var DuetInput = /** @class */ (function () {

@@ -136,3 +136,3 @@ function DuetInput() {

var regex = this.pattern ? this.pattern : regexType;
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), duet_core_js_1.h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (duet_core_js_1.h("div", { class: "duet-input-icon", innerHTML: chunk_c3aeb3ca_js_1.a["form-" + this.type].svg })) : (""), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), duet_core_js_1.h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (duet_core_js_1.h("div", { class: "duet-input-icon", innerHTML: chunk_2badfa5e_js_1.a["form-" + this.type].svg })) : (""), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -139,0 +139,0 @@ Object.defineProperty(DuetInput, "is", {

4

lib/cjs/es5/build/duet-input.sc.entry.js

@@ -5,3 +5,3 @@ "use strict";

var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var chunk_c3aeb3ca_js_1 = require("./chunk-c3aeb3ca.js");
var chunk_2badfa5e_js_1 = require("./chunk-2badfa5e.js");
var DuetInput = /** @class */ (function () {

@@ -136,3 +136,3 @@ function DuetInput() {

var regex = this.pattern ? this.pattern : regexType;
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), duet_core_js_1.h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (duet_core_js_1.h("div", { class: "duet-input-icon", innerHTML: chunk_c3aeb3ca_js_1.a["form-" + this.type].svg })) : (""), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), duet_core_js_1.h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (duet_core_js_1.h("div", { class: "duet-input-icon", innerHTML: chunk_2badfa5e_js_1.a["form-" + this.type].svg })) : (""), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -139,0 +139,0 @@ Object.defineProperty(DuetInput, "is", {

2

lib/cjs/es5/duet.components.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Duet: Host Data, ES Module/es5 Target
exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["icon", 1, 0, 1, 2], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-card", "duet-card", 1, [["element", 64], ["theme", 1, 0, 1, 2], ["title", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["required", 1, 0, 1, 4], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 1, 1, 2]], 1], ["duet-spinner", "duet-button", 1, [["accessibleLabel", 1, 0, "accessible-label", 2], ["color", 1, 0, 1, 2], ["size", 1, 0, 1, 2]], 1]];
exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["icon", 1, 0, 1, 2], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-card", "duet-card", 1, [["cardTitle", 1, 0, "card-title", 2], ["element", 64], ["theme", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["required", 1, 0, 1, 4], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 1, 1, 2]], 1], ["duet-spinner", "duet-button", 1, [["accessibleLabel", 1, 0, "accessible-label", 2], ["color", 1, 0, 1, 2], ["size", 1, 0, 1, 2]], 1]];

8

lib/collection/collection-manifest.json

@@ -114,10 +114,10 @@ {

{
"name": "theme",
"name": "cardTitle",
"type": "String",
"attr": "theme"
"attr": "card-title"
},
{
"name": "title",
"name": "theme",
"type": "String",
"attr": "title"
"attr": "theme"
}

@@ -124,0 +124,0 @@ ],

44

lib/collection/components/duet-card/duet-card.js
import { applyThemeClasses } from "../../utils/applyThemeClasses";
import ResizeObserver from "resize-observer-polyfill";
import classNames from "classnames";

@@ -6,2 +7,6 @@ export class DuetCard {

/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -12,2 +17,23 @@ */

/**
* applySizeClasses() function
*/
applySizeClasses(size) {
let small = false;
let medium = false;
let large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
const el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
}
/**
* componentDidLoad() function

@@ -18,2 +44,9 @@ */

applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new ResizeObserver(entries => {
for (const entry of entries) {
this.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes

@@ -36,2 +69,3 @@ // inside Shadow DOM when necessary.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
}

@@ -48,3 +82,3 @@ /**

return (h("div", { class: cardClasses },
this.title !== "" ? h("h3", null, this.title) : "",
this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "",
h("slot", null)));

@@ -55,2 +89,6 @@ }

static get properties() { return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -62,6 +100,2 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}

@@ -68,0 +102,0 @@ }; }

102

lib/duet/duet-button.entry.js
const h = window.Duet.h;
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -275,7 +275,9 @@ class DuetButton {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -296,3 +298,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -390,46 +392,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;

@@ -436,0 +440,0 @@ class DuetSpinner {

102

lib/duet/duet-button.es5.entry.js

@@ -1,2 +0,2 @@

Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js', './chunk-ac2b915b.js'], function (exports, __chunk_1, __chunk_2) {
Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js', './chunk-b11ffd06.js'], function (exports, __chunk_1, __chunk_2) {
var h = window.Duet.h;

@@ -290,7 +290,9 @@ var DuetButton = /** @class */ (function () {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -311,3 +313,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -405,46 +407,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;
var DuetSpinner = /** @class */ (function () {

@@ -451,0 +455,0 @@ function DuetSpinner() {

102

lib/duet/duet-button.sc.entry.js
const h = window.Duet.h;
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -275,7 +275,9 @@ class DuetButton {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -296,3 +298,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -390,46 +392,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;

@@ -436,0 +440,0 @@ class DuetSpinner {

102

lib/duet/duet-button.sc.es5.entry.js

@@ -1,2 +0,2 @@

Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js', './chunk-ac2b915b.js'], function (exports, __chunk_1, __chunk_2) {
Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js', './chunk-b11ffd06.js'], function (exports, __chunk_1, __chunk_2) {
var h = window.Duet.h;

@@ -290,7 +290,9 @@ var DuetButton = /** @class */ (function () {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -311,3 +313,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -405,46 +407,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;
var DuetSpinner = /** @class */ (function () {

@@ -451,0 +455,0 @@ function DuetSpinner() {

976

lib/duet/duet-card.entry.js

@@ -5,5 +5,940 @@ const h = window.Duet.h;

var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) { ctx = null; }
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle (callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function'); };
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
class DuetCard {
constructor() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -14,2 +949,23 @@ */

/**
* applySizeClasses() function
*/
applySizeClasses(size) {
let small = false;
let medium = false;
let large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
const el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
}
/**
* componentDidLoad() function

@@ -20,2 +976,9 @@ */

applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(entries => {
for (const entry of entries) {
this.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes

@@ -38,2 +1001,3 @@ // inside Shadow DOM when necessary.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
}

@@ -50,3 +1014,3 @@ /**

return (h("div", { class: cardClasses },
this.title !== "" ? h("h3", null, this.title) : "",
this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "",
h("slot", null)));

@@ -57,2 +1021,6 @@ }

static get properties() { return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -64,11 +1032,7 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}
}; }
static get style() { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; }
static get style() { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small {\n padding: 28px;\n}\n.duet-card.duet-cq-large {\n padding: 48px;\n}\n\nh2 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva h2 {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small h2 {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large h2 {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; }
}
export { DuetCard };

970

lib/duet/duet-card.es5.entry.js
Duet.loadBundle('duet-card', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
var h = window.Duet.h;
var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) {
ctx = null;
}
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle(callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) {
return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function');
};
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
var DuetCard = /** @class */ (function () {
function DuetCard() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -11,12 +935,41 @@ */

/**
* applySizeClasses() function
*/
DuetCard.prototype.applySizeClasses = function (size) {
var small = false;
var medium = false;
var large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
var el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
};
/**
* componentDidLoad() function
*/
DuetCard.prototype.componentDidLoad = function () {
var _this = this;
var _this_1 = this;
// When component loads, check if global Turva theme exists.
__chunk_1.applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(function (entries) {
for (var _c = 0, entries_1 = entries; _c < entries_1.length; _c++) {
var entry = entries_1[_c];
_this_1.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
__chunk_1.applyThemeClasses(_this.element);
__chunk_1.applyThemeClasses(_this_1.element);
});

@@ -35,2 +988,3 @@ // Observe for className changes in <html> element.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
};

@@ -46,3 +1000,3 @@ /**

});
return (h("div", { class: cardClasses }, this.title !== "" ? h("h3", null, this.title) : "", h("slot", null)));
return (h("div", { class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null)));
};

@@ -62,2 +1016,6 @@ Object.defineProperty(DuetCard, "is", {

return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -69,6 +1027,2 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}

@@ -81,3 +1035,3 @@ };

Object.defineProperty(DuetCard, "style", {
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; },
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small {\n padding: 28px;\n}\n.duet-card.duet-cq-large {\n padding: 48px;\n}\n\nh2 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva h2 {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small h2 {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large h2 {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; },
enumerable: true,

@@ -84,0 +1038,0 @@ configurable: true

976

lib/duet/duet-card.sc.entry.js

@@ -5,5 +5,940 @@ const h = window.Duet.h;

var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) { ctx = null; }
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle (callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function'); };
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
class DuetCard {
constructor() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -14,2 +949,23 @@ */

/**
* applySizeClasses() function
*/
applySizeClasses(size) {
let small = false;
let medium = false;
let large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
const el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
}
/**
* componentDidLoad() function

@@ -20,2 +976,9 @@ */

applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(entries => {
for (const entry of entries) {
this.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes

@@ -38,2 +1001,3 @@ // inside Shadow DOM when necessary.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
}

@@ -50,3 +1014,3 @@ /**

return (h("div", { class: cardClasses },
this.title !== "" ? h("h3", null, this.title) : "",
this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "",
h("slot", null)));

@@ -57,2 +1021,6 @@ }

static get properties() { return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -64,11 +1032,7 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}
}; }
static get style() { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; }
static get style() { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva.sc-duet-card {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small.sc-duet-card {\n padding: 28px;\n}\n.duet-card.duet-cq-large.sc-duet-card {\n padding: 48px;\n}\n\nh2.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva.sc-duet-card h2.sc-duet-card {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small.sc-duet-card h2.sc-duet-card {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large.sc-duet-card h2.sc-duet-card {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; }
}
export { DuetCard };

970

lib/duet/duet-card.sc.es5.entry.js
Duet.loadBundle('duet-card', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
var h = window.Duet.h;
var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) {
ctx = null;
}
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle(callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) {
return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function');
};
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
var DuetCard = /** @class */ (function () {
function DuetCard() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -11,12 +935,41 @@ */

/**
* applySizeClasses() function
*/
DuetCard.prototype.applySizeClasses = function (size) {
var small = false;
var medium = false;
var large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
var el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
};
/**
* componentDidLoad() function
*/
DuetCard.prototype.componentDidLoad = function () {
var _this = this;
var _this_1 = this;
// When component loads, check if global Turva theme exists.
__chunk_1.applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(function (entries) {
for (var _c = 0, entries_1 = entries; _c < entries_1.length; _c++) {
var entry = entries_1[_c];
_this_1.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
__chunk_1.applyThemeClasses(_this.element);
__chunk_1.applyThemeClasses(_this_1.element);
});

@@ -35,2 +988,3 @@ // Observe for className changes in <html> element.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
};

@@ -46,3 +1000,3 @@ /**

});
return (h("div", { class: cardClasses }, this.title !== "" ? h("h3", null, this.title) : "", h("slot", null)));
return (h("div", { class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null)));
};

@@ -62,2 +1016,6 @@ Object.defineProperty(DuetCard, "is", {

return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -69,6 +1027,2 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}

@@ -81,3 +1035,3 @@ };

Object.defineProperty(DuetCard, "style", {
get: function () { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; },
get: function () { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva.sc-duet-card {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small.sc-duet-card {\n padding: 28px;\n}\n.duet-card.duet-cq-large.sc-duet-card {\n padding: 48px;\n}\n\nh2.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva.sc-duet-card h2.sc-duet-card {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small.sc-duet-card h2.sc-duet-card {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large.sc-duet-card h2.sc-duet-card {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; },
enumerable: true,

@@ -84,0 +1038,0 @@ configurable: true

2

lib/duet/duet-input.entry.js
const h = window.Duet.h;
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -6,0 +6,0 @@ class DuetInput {

2

lib/duet/duet-input.es5.entry.js

@@ -1,2 +0,2 @@

Duet.loadBundle('duet-input', ['exports', './chunk-fdfae928.js', './chunk-ac2b915b.js'], function (exports, __chunk_1, __chunk_2) {
Duet.loadBundle('duet-input', ['exports', './chunk-fdfae928.js', './chunk-b11ffd06.js'], function (exports, __chunk_1, __chunk_2) {
var h = window.Duet.h;

@@ -3,0 +3,0 @@ var DuetInput = /** @class */ (function () {

2

lib/duet/duet-input.sc.entry.js
const h = window.Duet.h;
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -6,0 +6,0 @@ class DuetInput {

2

lib/duet/duet-input.sc.es5.entry.js

@@ -1,2 +0,2 @@

Duet.loadBundle('duet-input', ['exports', './chunk-fdfae928.js', './chunk-ac2b915b.js'], function (exports, __chunk_1, __chunk_2) {
Duet.loadBundle('duet-input', ['exports', './chunk-fdfae928.js', './chunk-b11ffd06.js'], function (exports, __chunk_1, __chunk_2) {
var h = window.Duet.h;

@@ -3,0 +3,0 @@ var DuetInput = /** @class */ (function () {

102

lib/esm/es2017/build/duet-button.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -275,7 +275,9 @@ class DuetButton {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -296,3 +298,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -390,46 +392,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;

@@ -436,0 +440,0 @@ class DuetSpinner {

102

lib/esm/es2017/build/duet-button.sc.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -275,7 +275,9 @@ class DuetButton {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -296,3 +298,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -390,46 +392,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;

@@ -436,0 +440,0 @@ class DuetSpinner {

976

lib/esm/es2017/build/duet-card.entry.js

@@ -5,5 +5,940 @@ import { h } from '../duet.core.js';

var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) { ctx = null; }
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle (callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function'); };
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
class DuetCard {
constructor() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -14,2 +949,23 @@ */

/**
* applySizeClasses() function
*/
applySizeClasses(size) {
let small = false;
let medium = false;
let large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
const el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
}
/**
* componentDidLoad() function

@@ -20,2 +976,9 @@ */

applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(entries => {
for (const entry of entries) {
this.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes

@@ -38,2 +1001,3 @@ // inside Shadow DOM when necessary.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
}

@@ -50,3 +1014,3 @@ /**

return (h("div", { class: cardClasses },
this.title !== "" ? h("h3", null, this.title) : "",
this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "",
h("slot", null)));

@@ -57,2 +1021,6 @@ }

static get properties() { return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -64,11 +1032,7 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}
}; }
static get style() { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; }
static get style() { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small {\n padding: 28px;\n}\n.duet-card.duet-cq-large {\n padding: 48px;\n}\n\nh2 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva h2 {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small h2 {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large h2 {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; }
}
export { DuetCard };

976

lib/esm/es2017/build/duet-card.sc.entry.js

@@ -5,5 +5,940 @@ import { h } from '../duet.core.js';

var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) { ctx = null; }
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle (callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function'); };
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
class DuetCard {
constructor() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -14,2 +949,23 @@ */

/**
* applySizeClasses() function
*/
applySizeClasses(size) {
let small = false;
let medium = false;
let large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
const el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
}
/**
* componentDidLoad() function

@@ -20,2 +976,9 @@ */

applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(entries => {
for (const entry of entries) {
this.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes

@@ -38,2 +1001,3 @@ // inside Shadow DOM when necessary.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
}

@@ -50,3 +1014,3 @@ /**

return (h("div", { class: cardClasses },
this.title !== "" ? h("h3", null, this.title) : "",
this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "",
h("slot", null)));

@@ -57,2 +1021,6 @@ }

static get properties() { return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -64,11 +1032,7 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}
}; }
static get style() { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; }
static get style() { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva.sc-duet-card {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small.sc-duet-card {\n padding: 28px;\n}\n.duet-card.duet-cq-large.sc-duet-card {\n padding: 48px;\n}\n\nh2.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva.sc-duet-card h2.sc-duet-card {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small.sc-duet-card h2.sc-duet-card {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large.sc-duet-card h2.sc-duet-card {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; }
}
export { DuetCard };

2

lib/esm/es2017/build/duet-input.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -6,0 +6,0 @@ class DuetInput {

2

lib/esm/es2017/build/duet-input.sc.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';

@@ -6,0 +6,0 @@ class DuetInput {

2

lib/esm/es2017/duet.components.js
// Duet: Host Data, ES Module/es2017 Target
export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-card","duet-card",1,[["element",64],["theme",1,0,1,2],["title",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["required",1,0,1,4],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,1,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]
export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-card","duet-card",1,[["cardTitle",1,0,"card-title",2],["element",64],["theme",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["required",1,0,1,4],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,1,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]

102

lib/esm/es5/build/duet-button.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';
var DuetButton = /** @class */ (function () {

@@ -291,7 +291,9 @@ function DuetButton() {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -312,3 +314,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -406,46 +408,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;
var DuetSpinner = /** @class */ (function () {

@@ -452,0 +456,0 @@ function DuetSpinner() {

102

lib/esm/es5/build/duet-button.sc.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';
var DuetButton = /** @class */ (function () {

@@ -291,7 +291,9 @@ function DuetButton() {

radiusPill: "20rem",
shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05)",
spaceXxSmall: "4px",

@@ -312,3 +314,3 @@ spaceLarge: "20px",

sizeIconXLarge: "36px",
sizeIconXxSmall: "12px",
sizeIconXxSmall: "10px",
sizeStepSmall: "30px",

@@ -406,46 +408,48 @@ sizeIconLarge: "30px",

var tokens_common_65 = tokens_common.shadowModal;
var tokens_common_66 = tokens_common.shadowDefaultTurva;
var tokens_common_67 = tokens_common.shadowHoverTurva;
var tokens_common_68 = tokens_common.spaceXxSmall;
var tokens_common_69 = tokens_common.spaceLarge;
var tokens_common_70 = tokens_common.spaceXSmall;
var tokens_common_71 = tokens_common.spaceSmall;
var tokens_common_72 = tokens_common.spaceMedium;
var tokens_common_73 = tokens_common.spaceXxLarge;
var tokens_common_74 = tokens_common.spaceXxxxLarge;
var tokens_common_75 = tokens_common.spaceXxxLarge;
var tokens_common_76 = tokens_common.spaceXLarge;
var tokens_common_77 = tokens_common.sizeIconXxLarge;
var tokens_common_78 = tokens_common.sizeStepMedium;
var tokens_common_79 = tokens_common.sizeButtonMinWidth;
var tokens_common_80 = tokens_common.sizeHeader;
var tokens_common_81 = tokens_common.sizeIconXxxLarge;
var tokens_common_82 = tokens_common.sizeIconXLarge;
var tokens_common_83 = tokens_common.sizeIconXxSmall;
var tokens_common_84 = tokens_common.sizeStepSmall;
var tokens_common_85 = tokens_common.sizeIconLarge;
var tokens_common_86 = tokens_common.sizeTappableSquare;
var tokens_common_87 = tokens_common.sizeIconXSmall;
var tokens_common_88 = tokens_common.sizeButtonBorder;
var tokens_common_89 = tokens_common.sizeIconMedium;
var tokens_common_90 = tokens_common.sizeIconSmall;
var tokens_common_91 = tokens_common.opacity75;
var tokens_common_92 = tokens_common.opacity50;
var tokens_common_93 = tokens_common.opacity30;
var tokens_common_94 = tokens_common.zIndexDropdown;
var tokens_common_95 = tokens_common.zIndexSpinner;
var tokens_common_96 = tokens_common.zIndexDefault;
var tokens_common_97 = tokens_common.zIndexToast;
var tokens_common_98 = tokens_common.zIndexPopup;
var tokens_common_99 = tokens_common.zIndexModal;
var tokens_common_100 = tokens_common.zIndexSticky;
var tokens_common_101 = tokens_common.zIndexMasked;
var tokens_common_102 = tokens_common.zIndexDeep;
var tokens_common_103 = tokens_common.zIndexOverlay;
var tokens_common_104 = tokens_common.zIndexMask;
var tokens_common_105 = tokens_common.zIndexHeader;
var tokens_common_106 = tokens_common.lineHeightMedium;
var tokens_common_107 = tokens_common.lineHeightSmall;
var tokens_common_108 = tokens_common.lineHeightXSmall;
var tokens_common_109 = tokens_common.transitionQuickly;
var tokens_common_66 = tokens_common.shadowCard;
var tokens_common_67 = tokens_common.shadowDefaultTurva;
var tokens_common_68 = tokens_common.shadowHoverTurva;
var tokens_common_69 = tokens_common.shadowCardTurva;
var tokens_common_70 = tokens_common.spaceXxSmall;
var tokens_common_71 = tokens_common.spaceLarge;
var tokens_common_72 = tokens_common.spaceXSmall;
var tokens_common_73 = tokens_common.spaceSmall;
var tokens_common_74 = tokens_common.spaceMedium;
var tokens_common_75 = tokens_common.spaceXxLarge;
var tokens_common_76 = tokens_common.spaceXxxxLarge;
var tokens_common_77 = tokens_common.spaceXxxLarge;
var tokens_common_78 = tokens_common.spaceXLarge;
var tokens_common_79 = tokens_common.sizeIconXxLarge;
var tokens_common_80 = tokens_common.sizeStepMedium;
var tokens_common_81 = tokens_common.sizeButtonMinWidth;
var tokens_common_82 = tokens_common.sizeHeader;
var tokens_common_83 = tokens_common.sizeIconXxxLarge;
var tokens_common_84 = tokens_common.sizeIconXLarge;
var tokens_common_85 = tokens_common.sizeIconXxSmall;
var tokens_common_86 = tokens_common.sizeStepSmall;
var tokens_common_87 = tokens_common.sizeIconLarge;
var tokens_common_88 = tokens_common.sizeTappableSquare;
var tokens_common_89 = tokens_common.sizeIconXSmall;
var tokens_common_90 = tokens_common.sizeButtonBorder;
var tokens_common_91 = tokens_common.sizeIconMedium;
var tokens_common_92 = tokens_common.sizeIconSmall;
var tokens_common_93 = tokens_common.opacity75;
var tokens_common_94 = tokens_common.opacity50;
var tokens_common_95 = tokens_common.opacity30;
var tokens_common_96 = tokens_common.zIndexDropdown;
var tokens_common_97 = tokens_common.zIndexSpinner;
var tokens_common_98 = tokens_common.zIndexDefault;
var tokens_common_99 = tokens_common.zIndexToast;
var tokens_common_100 = tokens_common.zIndexPopup;
var tokens_common_101 = tokens_common.zIndexModal;
var tokens_common_102 = tokens_common.zIndexSticky;
var tokens_common_103 = tokens_common.zIndexMasked;
var tokens_common_104 = tokens_common.zIndexDeep;
var tokens_common_105 = tokens_common.zIndexOverlay;
var tokens_common_106 = tokens_common.zIndexMask;
var tokens_common_107 = tokens_common.zIndexHeader;
var tokens_common_108 = tokens_common.lineHeightMedium;
var tokens_common_109 = tokens_common.lineHeightSmall;
var tokens_common_110 = tokens_common.lineHeightXSmall;
var tokens_common_111 = tokens_common.transitionQuickly;
var DuetSpinner = /** @class */ (function () {

@@ -452,0 +456,0 @@ function DuetSpinner() {

970

lib/esm/es5/build/duet-card.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) {
ctx = null;
}
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle(callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) {
return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function');
};
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
var DuetCard = /** @class */ (function () {
function DuetCard() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -11,12 +935,41 @@ */

/**
* applySizeClasses() function
*/
DuetCard.prototype.applySizeClasses = function (size) {
var small = false;
var medium = false;
var large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
var el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
};
/**
* componentDidLoad() function
*/
DuetCard.prototype.componentDidLoad = function () {
var _this = this;
var _this_1 = this;
// When component loads, check if global Turva theme exists.
applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(function (entries) {
for (var _c = 0, entries_1 = entries; _c < entries_1.length; _c++) {
var entry = entries_1[_c];
_this_1.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
applyThemeClasses(_this.element);
applyThemeClasses(_this_1.element);
});

@@ -35,2 +988,3 @@ // Observe for className changes in <html> element.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
};

@@ -46,3 +1000,3 @@ /**

});
return (h("div", { class: cardClasses }, this.title !== "" ? h("h3", null, this.title) : "", h("slot", null)));
return (h("div", { class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null)));
};

@@ -62,2 +1016,6 @@ Object.defineProperty(DuetCard, "is", {

return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -69,6 +1027,2 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}

@@ -81,3 +1035,3 @@ };

Object.defineProperty(DuetCard, "style", {
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; },
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small {\n padding: 28px;\n}\n.duet-card.duet-cq-large {\n padding: 48px;\n}\n\nh2 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva h2 {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small h2 {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large h2 {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; },
enumerable: true,

@@ -84,0 +1038,0 @@ configurable: true

970

lib/esm/es5/build/duet-card.sc.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
var global$1 = (typeof global !== "undefined" ? global :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window : {});
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) {
ctx = null;
}
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1$1 = (function () {
if (typeof global$1 !== 'undefined' && global$1.Math === Math) {
return global$1;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle(callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) {
return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function');
};
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1$1.ResizeObserver !== 'undefined') {
return global$1$1.ResizeObserver;
}
return ResizeObserver;
})();
var DuetCard = /** @class */ (function () {
function DuetCard() {
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* Theme of the card. Can be one of: default, turva.

@@ -11,12 +935,41 @@ */

/**
* applySizeClasses() function
*/
DuetCard.prototype.applySizeClasses = function (size) {
var small = false;
var medium = false;
var large = false;
if (size <= 768) {
small = true;
}
else if (size <= 1023) {
medium = true;
}
else {
large = true;
}
var el = this.element.shadowRoot.lastChild;
el.classList.toggle("duet-cq-small", small);
el.classList.toggle("duet-cq-medium", medium);
el.classList.toggle("duet-cq-large", large);
};
/**
* componentDidLoad() function
*/
DuetCard.prototype.componentDidLoad = function () {
var _this = this;
var _this_1 = this;
// When component loads, check if global Turva theme exists.
applyThemeClasses(this.element);
// Init container queries
this.containerQuery = new index(function (entries) {
for (var _c = 0, entries_1 = entries; _c < entries_1.length; _c++) {
var entry = entries_1[_c];
_this_1.applySizeClasses(entry.contentRect.width);
}
});
this.containerQuery.observe(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
applyThemeClasses(_this.element);
applyThemeClasses(_this_1.element);
});

@@ -35,2 +988,3 @@ // Observe for className changes in <html> element.

this.mutationObserver.disconnect();
this.containerQuery.disconnect();
};

@@ -46,3 +1000,3 @@ /**

});
return (h("div", { class: cardClasses }, this.title !== "" ? h("h3", null, this.title) : "", h("slot", null)));
return (h("div", { class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null)));
};

@@ -62,2 +1016,6 @@ Object.defineProperty(DuetCard, "is", {

return {
"cardTitle": {
"type": String,
"attr": "card-title"
},
"element": {

@@ -69,6 +1027,2 @@ "elementRef": true

"attr": "theme"
},
"title": {
"type": String,
"attr": "title"
}

@@ -81,3 +1035,3 @@ };

Object.defineProperty(DuetCard, "style", {
get: function () { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border: 1px solid red;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}"; },
get: function () { return ".sc-duet-card-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 36px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva.sc-duet-card {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.07), -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n.duet-card.duet-cq-small.sc-duet-card {\n padding: 28px;\n}\n.duet-card.duet-cq-large.sc-duet-card {\n padding: 48px;\n}\n\nh2.sc-duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 36px;\n padding: 21px 36px 22px;\n margin: -36px -36px 36px;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva.sc-duet-card h2.sc-duet-card {\n border-color: #e6e6e6;\n color: #111111;\n}\n.duet-cq-small.sc-duet-card h2.sc-duet-card {\n padding: 16px 28px 17px;\n margin-bottom: 28px;\n margin: -28px -28px 28px;\n}\n.duet-cq-large.sc-duet-card h2.sc-duet-card {\n padding: 29px 48px 30px;\n margin-bottom: 48px;\n font-size: 1.25rem;\n margin: -48px -48px 48px;\n}"; },
enumerable: true,

@@ -84,0 +1038,0 @@ configurable: true

2

lib/esm/es5/build/duet-input.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';
var DuetInput = /** @class */ (function () {

@@ -5,0 +5,0 @@ function DuetInput() {

2

lib/esm/es5/build/duet-input.sc.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as duetIcons } from './chunk-c3aeb3ca.js';
import { a as duetIcons } from './chunk-2badfa5e.js';
var DuetInput = /** @class */ (function () {

@@ -5,0 +5,0 @@ function DuetInput() {

2

lib/esm/es5/duet.components.js
// Duet: Host Data, ES Module/es5 Target
export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-card","duet-card",1,[["element",64],["theme",1,0,1,2],["title",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["required",1,0,1,4],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,1,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]
export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-card","duet-card",1,[["cardTitle",1,0,"card-title",2],["element",64],["theme",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["required",1,0,1,4],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,1,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]

7

lib/esm/index.js

@@ -1,6 +0,1 @@

"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./es5/index.js"));
export * from './es5/index.js';

14

lib/types/components.d.ts

@@ -142,11 +142,15 @@ /* tslint:disable */

/**
* The content for the card title
*/
'cardTitle': string;
/**
* Theme of the card. Can be one of: default, turva.
*/
'theme': string;
}
interface DuetCardAttributes extends StencilHTMLAttributes {
/**
* The content for the card title
*/
'title': string;
}
interface DuetCardAttributes extends StencilHTMLAttributes {
'cardTitle'?: string;
/**

@@ -156,6 +160,2 @@ * Theme of the card. Can be one of: default, turva.

'theme'?: string;
/**
* The content for the card title
*/
'title'?: string;
}

@@ -162,0 +162,0 @@

7

lib/types/components/duet-card/duet-card.d.ts

@@ -5,6 +5,7 @@ import '../../stencil.core';

private mutationObserver;
private containerQuery;
/**
* The content for the card title
*/
title: string;
cardTitle: string;
/**

@@ -15,2 +16,6 @@ * Theme of the card. Can be one of: default, turva.

/**
* applySizeClasses() function
*/
applySizeClasses(size: number): void;
/**
* componentDidLoad() function

@@ -17,0 +22,0 @@ */

10

lib/web-components.json

@@ -76,12 +76,12 @@ {

"label": "duet-card",
"description": "---\ntitle: Card\nname: duet-card\nstatus: prototype\nslot: Card\nreleased: N/A\nintro: Card it is\ndescription: Card\nplatforms: Web only\ntags:\n - docs-components\n---",
"description": "---\ntitle: Card\nname: duet-card\nstatus: prototype\nslot: Card\nreleased: N/A\nintro: Cards are shadowed surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.\ndescription: The optional card-title property gives the Card a level 2 heading. This can help with readability and provide structure to screen reader users.\nplatforms: Web only\ntags:\n - docs-components\n---",
"attributes": [
{
"label": "theme",
"description": "Theme of the card. Can be one of: default, turva.",
"label": "card-title",
"description": "The content for the card title",
"required": false
},
{
"label": "title",
"description": "The content for the card title",
"label": "theme",
"description": "Theme of the card. Can be one of: default, turva.",
"required": false

@@ -88,0 +88,0 @@ }

6

package.json
{
"name": "@duetds/components",
"version": "0.0.1-alpha.39",
"version": "0.0.1-alpha.40",
"description": "This package includes Duet Components and related tools.",

@@ -42,7 +42,7 @@ "author": "Viljami Salminen <ext-viljami.salminen@lahitapiola.fi>",

},
"gitHead": "b64607b9b87b0f88a6ff986a0b199c1ad3f2b5cc",
"gitHead": "8f1c2fdcddc36401f5037ed87681ece9fa2cd6c0",
"devDependencies": {
"@duetds/fonts": "^1.1.0",
"@duetds/icons": "^1.0.3",
"@duetds/tokens": "^1.1.11",
"@duetds/tokens": "^1.1.12",
"@stencil/core": "^0.18.1",

@@ -49,0 +49,0 @@ "@stencil/sass": "^0.2.1",

lib/cjs/es5/build/chunk-c3aeb3ca.js
lib/duet/chunk-ac2b915b.es5.js
lib/duet/chunk-c3aeb3ca.js
lib/esm/es2017/build/chunk-c3aeb3ca.js
lib/esm/es5/build/chunk-c3aeb3ca.js
lib/collection/assets/fonts/LocalTapiola-Regular.eot

Sorry, the diff of this file is not supported yet

lib/collection/assets/fonts/LocalTapiola-Regular.woff

Sorry, the diff of this file is not supported yet

lib/collection/assets/fonts/LocalTapiola-Regular.woff2

Sorry, the diff of this file is not supported yet

lib/collection/assets/fonts/LocalTapiola-Semibold.eot

Sorry, the diff of this file is not supported yet

lib/collection/assets/fonts/LocalTapiola-Semibold.woff

Sorry, the diff of this file is not supported yet

lib/collection/assets/fonts/LocalTapiola-Semibold.woff2

Sorry, the diff of this file is not supported yet

lib/collection/components/duet-card/duet-card.css

Sorry, the diff of this file is not supported yet

lib/collection/components/duet-card/duet-card.scss

Sorry, the diff of this file is not supported yet

lib/duet/duet.core.js

Sorry, the diff of this file is too big to display

lib/duet/duet.core.pf.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc