Socket
Socket
Sign inDemoInstall

@duetds/components

Package Overview
Dependencies
Maintainers
2
Versions
593
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.24 to 0.0.1-alpha.25

6

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

@@ -107,7 +107,7 @@ "use strict";

if (this.url) {
return (duet_core_js_1.h("a", { href: this.url, class: classes, 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 }, duet_core_js_1.h("slot", null)));
return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("a", { href: this.url, class: classes, 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 }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (duet_core_js_1.h("button", { type: type, class: classes, "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 }, duet_core_js_1.h("slot", null)));
return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("button", { type: type, class: classes, "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 }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
}

@@ -210,3 +210,3 @@ };

Object.defineProperty(DuetButton, "style", {
get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
enumerable: true,

@@ -213,0 +213,0 @@ configurable: true

6

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

@@ -107,7 +107,7 @@ "use strict";

if (this.url) {
return (duet_core_js_1.h("a", { href: this.url, class: classes, 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 }, duet_core_js_1.h("slot", null)));
return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("a", { href: this.url, class: classes, 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 }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (duet_core_js_1.h("button", { type: type, class: classes, "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 }, duet_core_js_1.h("slot", null)));
return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("button", { type: type, class: classes, "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 }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
}

@@ -210,3 +210,3 @@ };

Object.defineProperty(DuetButton, "style", {
get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button + .duet-spinner.sc-duet-button {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
enumerable: true,

@@ -213,0 +213,0 @@ configurable: true

12

lib/collection/components/duet-button/duet-button.js

@@ -103,9 +103,13 @@ import { applyThemeClasses } from "../../utils/applyThemeClasses";

if (this.url) {
return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
}

@@ -112,0 +116,0 @@ }

14

lib/duet/duet-button.entry.js

@@ -105,9 +105,13 @@ const h = window.Duet.h;

if (this.url) {
return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
}

@@ -189,5 +193,5 @@ }

}]; }
static get style() { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
static get style() { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
}
export { DuetButton };

6

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

@@ -105,7 +105,7 @@ Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {

if (this.url) {
return (h("a", { href: this.url, class: classes, 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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, 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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
}

@@ -208,3 +208,3 @@ };

Object.defineProperty(DuetButton, "style", {
get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
enumerable: true,

@@ -211,0 +211,0 @@ configurable: true

14

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

@@ -105,9 +105,13 @@ const h = window.Duet.h;

if (this.url) {
return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
}

@@ -189,5 +193,5 @@ }

}]; }
static get style() { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
static get style() { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button + .duet-spinner.sc-duet-button {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
}
export { DuetButton };

6

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

@@ -105,7 +105,7 @@ Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {

if (this.url) {
return (h("a", { href: this.url, class: classes, 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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, 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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
}

@@ -208,3 +208,3 @@ };

Object.defineProperty(DuetButton, "style", {
get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button + .duet-spinner.sc-duet-button {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
enumerable: true,

@@ -211,0 +211,0 @@ configurable: true

14

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

@@ -105,9 +105,13 @@ import { h } from '../duet.core.js';

if (this.url) {
return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
}

@@ -189,5 +193,5 @@ }

}]; }
static get style() { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
static get style() { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
}
export { DuetButton };

14

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

@@ -105,9 +105,13 @@ import { h } from '../duet.core.js';

if (this.url) {
return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)));
return (h("div", { class: "duet-button-container" },
h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
h("slot", null)),
h("div", { class: "duet-spinner" })));
}

@@ -189,5 +193,5 @@ }

}]; }
static get style() { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
static get style() { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button + .duet-spinner.sc-duet-button {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }
}
export { DuetButton };

6

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

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

if (this.url) {
return (h("a", { href: this.url, class: classes, 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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, 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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
}

@@ -208,3 +208,3 @@ };

Object.defineProperty(DuetButton, "style", {
get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
enumerable: true,

@@ -211,0 +211,0 @@ configurable: true

6

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

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

if (this.url) {
return (h("a", { href: this.url, class: classes, 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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, 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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
// If URL prop doesn’t exist, render a regular button.
}
else {
return (h("button", { type: type, class: classes, "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 }, h("slot", null)));
return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "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 }, h("slot", null)), h("div", { class: "duet-spinner" })));
}

@@ -208,3 +208,3 @@ };

Object.defineProperty(DuetButton, "style", {
get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\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 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-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n background: #e6e6e6 !important;\n color: #757575 !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button + .duet-spinner.sc-duet-button {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 200;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; },
enumerable: true,

@@ -211,0 +211,0 @@ configurable: true

7

lib/esm/index.js

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

export * from './es5/index.js';
"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"));

8

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

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

"duet:start": "stencil build --dev --es5 --docs --watch --serve",
"duet:test": "stencil test --spec --e2e",
"duet:test.watch": "stencil test --spec --e2e --watchAll",
"duet:test": "stencil test --spec --e2e --es5",
"duet:test.watch": "stencil test --spec --e2e --es5 --watchAll",
"duet:onchange": "onchange \"./src/components/**/*\" -- npm-run-all copy:build",

@@ -43,3 +43,3 @@ "copy:fonts": "copyfiles --flat node_modules/@duetds/fonts/lib/* src/assets/fonts",

},
"gitHead": "3ef4060eaa017bbf67f8560dd37da7d9ad13c707",
"gitHead": "d71e928439f7db5f6b6f86948567c6cc05db62b5",
"devDependencies": {

@@ -46,0 +46,0 @@ "@duetds/fonts": "^1.0.7",

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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