@duetds/components
Advanced tools
@duetds/components - npm Package Compare versions
Comparing version 0.0.1-alpha.27 to 0.0.1-alpha.28
@@ -5,2 +5,3 @@ "use strict"; | ||
| var chunk_e639420f_js_1 = require("./chunk-e639420f.js"); | ||
| var icons = { "500px": { "title": "500px", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>" }, "ACM": { "title": "ACM", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>" } }; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -40,2 +41,6 @@ function DuetButton() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -102,14 +107,17 @@ /** | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = chunk_e639420f_js_1.b("duet-button", "" + this.variation, { | ||
| var containerClasses = chunk_e639420f_js_1.b("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| var buttonClasses = chunk_e639420f_js_1.b("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon ? duet_core_js_1.h("span", { innerHTML: icons[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (duet_core_js_1.h("div", { class: "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)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon ? duet_core_js_1.h("span", { innerHTML: icons[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| } | ||
@@ -161,2 +169,6 @@ }; | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -213,3 +225,3 @@ "type": String, | ||
| 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 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-theme-turva .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 {\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\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 max-width: 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-theme-turva .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 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.icon {\n padding-left: 52px;\n}\n.duet-button svg {\n fill: currentColor;\n}\n.duet-button span {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.loading span {\n display: none;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\n}"; }, | ||
| enumerable: true, | ||
@@ -216,0 +228,0 @@ configurable: true |
@@ -5,2 +5,3 @@ "use strict"; | ||
| var chunk_e639420f_js_1 = require("./chunk-e639420f.js"); | ||
| var icons = { "500px": { "title": "500px", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>" }, "ACM": { "title": "ACM", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>" } }; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -40,2 +41,6 @@ function DuetButton() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -102,14 +107,17 @@ /** | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = chunk_e639420f_js_1.b("duet-button", "" + this.variation, { | ||
| var containerClasses = chunk_e639420f_js_1.b("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| var buttonClasses = chunk_e639420f_js_1.b("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon ? duet_core_js_1.h("span", { innerHTML: icons[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (duet_core_js_1.h("div", { class: "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)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon ? duet_core_js_1.h("span", { innerHTML: icons[this.icon].svg }) : "", duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : "")); | ||
| } | ||
@@ -161,2 +169,6 @@ }; | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -213,3 +225,3 @@ "type": String, | ||
| 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 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-theme-turva.sc-duet-button .duet-button.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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\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 max-width: 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-theme-turva.sc-duet-button .duet-button.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.icon.sc-duet-button {\n padding-left: 52px;\n}\n.duet-button.sc-duet-button svg.sc-duet-button {\n fill: currentColor;\n}\n.duet-button.sc-duet-button span.sc-duet-button {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading.sc-duet-button span.sc-duet-button {\n display: none;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\n}"; }, | ||
| enumerable: true, | ||
@@ -216,0 +228,0 @@ configurable: true |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| // Duet: Host Data, ES Module/es5 Target | ||
| exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-spinner", "duet-button", 1, [["accessibleLabel", 1, 0, "accessible-label", 2], ["color", 1, 0, 1, 2], ["size", 1, 0, 1, 2]], 1]]; | ||
| exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["icon", 1, 0, 1, 2], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-spinner", "duet-button", 1, [["accessibleLabel", 1, 0, "accessible-label", 2], ["color", 1, 0, 1, 2], ["size", 1, 0, 1, 2]], 1]]; |
@@ -54,2 +54,7 @@ { | ||
| { | ||
| "name": "icon", | ||
| "type": "String", | ||
| "attr": "icon" | ||
| }, | ||
| { | ||
| "name": "identifier", | ||
@@ -56,0 +61,0 @@ "type": "String", |
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
| import classNames from "classnames"; | ||
| import duetIcons from "@duetds/icons"; | ||
| export class DuetButton { | ||
@@ -37,2 +38,6 @@ constructor() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -97,11 +102,15 @@ /** | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| const containerClasses = classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| const buttonClasses = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier }, | ||
| this.icon ? h("span", { innerHTML: duetIcons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -112,4 +121,5 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| else { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("button", { type: type, class: buttonClasses, "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 }, | ||
| this.icon ? h("span", { innerHTML: duetIcons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -153,2 +163,6 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -155,0 +169,0 @@ "type": String, |
@@ -5,2 +5,4 @@ const h = window.Duet.h; | ||
| var icons={"500px":{"title":"500px","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>"},"ACM":{"title":"ACM","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>"}}; | ||
| class DuetButton { | ||
@@ -40,2 +42,6 @@ constructor() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -100,11 +106,15 @@ /** | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| const containerClasses = classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| const buttonClasses = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -115,4 +125,5 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| else { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("button", { type: type, class: buttonClasses, "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 }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -156,2 +167,6 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -197,3 +212,3 @@ "type": String, | ||
| }]; } | ||
| 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-theme-turva .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 {\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\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 max-width: 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-theme-turva .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 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.icon {\n padding-left: 52px;\n}\n.duet-button svg {\n fill: currentColor;\n}\n.duet-button span {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.loading span {\n display: none;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\n}"; } | ||
| } | ||
@@ -200,0 +215,0 @@ |
| Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) { | ||
| var h = window.Duet.h; | ||
| var icons = { "500px": { "title": "500px", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>" }, "ACM": { "title": "ACM", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>" } }; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -37,2 +38,6 @@ function DuetButton() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -99,14 +104,17 @@ /** | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = __chunk_1.classNames("duet-button", "" + this.variation, { | ||
| var containerClasses = __chunk_1.classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| var buttonClasses = __chunk_1.classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| } | ||
@@ -158,2 +166,6 @@ }; | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -210,3 +222,3 @@ "type": String, | ||
| 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 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-theme-turva .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 {\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\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 max-width: 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-theme-turva .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 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.icon {\n padding-left: 52px;\n}\n.duet-button svg {\n fill: currentColor;\n}\n.duet-button span {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.loading span {\n display: none;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\n}"; }, | ||
| enumerable: true, | ||
@@ -213,0 +225,0 @@ configurable: true |
@@ -5,2 +5,4 @@ const h = window.Duet.h; | ||
| var icons={"500px":{"title":"500px","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>"},"ACM":{"title":"ACM","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>"}}; | ||
| class DuetButton { | ||
@@ -40,2 +42,6 @@ constructor() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -100,11 +106,15 @@ /** | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| const containerClasses = classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| const buttonClasses = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -115,4 +125,5 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| else { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("button", { type: type, class: buttonClasses, "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 }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -156,2 +167,6 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -197,3 +212,3 @@ "type": String, | ||
| }]; } | ||
| 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-theme-turva.sc-duet-button .duet-button.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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\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 max-width: 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-theme-turva.sc-duet-button .duet-button.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.icon.sc-duet-button {\n padding-left: 52px;\n}\n.duet-button.sc-duet-button svg.sc-duet-button {\n fill: currentColor;\n}\n.duet-button.sc-duet-button span.sc-duet-button {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading.sc-duet-button span.sc-duet-button {\n display: none;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\n}"; } | ||
| } | ||
@@ -200,0 +215,0 @@ |
| Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) { | ||
| var h = window.Duet.h; | ||
| var icons = { "500px": { "title": "500px", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>" }, "ACM": { "title": "ACM", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>" } }; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -37,2 +38,6 @@ function DuetButton() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -99,14 +104,17 @@ /** | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = __chunk_1.classNames("duet-button", "" + this.variation, { | ||
| var containerClasses = __chunk_1.classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| var buttonClasses = __chunk_1.classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| } | ||
@@ -158,2 +166,6 @@ }; | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -210,3 +222,3 @@ "type": String, | ||
| 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 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-theme-turva.sc-duet-button .duet-button.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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\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 max-width: 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-theme-turva.sc-duet-button .duet-button.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.icon.sc-duet-button {\n padding-left: 52px;\n}\n.duet-button.sc-duet-button svg.sc-duet-button {\n fill: currentColor;\n}\n.duet-button.sc-duet-button span.sc-duet-button {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading.sc-duet-button span.sc-duet-button {\n display: none;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\n}"; }, | ||
| enumerable: true, | ||
@@ -213,0 +225,0 @@ configurable: true |
@@ -5,2 +5,4 @@ import { h } from '../duet.core.js'; | ||
| var icons={"500px":{"title":"500px","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>"},"ACM":{"title":"ACM","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>"}}; | ||
| class DuetButton { | ||
@@ -40,2 +42,6 @@ constructor() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -100,11 +106,15 @@ /** | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| const containerClasses = classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| const buttonClasses = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -115,4 +125,5 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| else { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("button", { type: type, class: buttonClasses, "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 }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -156,2 +167,6 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -197,3 +212,3 @@ "type": String, | ||
| }]; } | ||
| 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-theme-turva .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 {\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\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 max-width: 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-theme-turva .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 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.icon {\n padding-left: 52px;\n}\n.duet-button svg {\n fill: currentColor;\n}\n.duet-button span {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.loading span {\n display: none;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\n}"; } | ||
| } | ||
@@ -200,0 +215,0 @@ |
@@ -5,2 +5,4 @@ import { h } from '../duet.core.js'; | ||
| var icons={"500px":{"title":"500px","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>"},"ACM":{"title":"ACM","hex":"000000","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>"}}; | ||
| class DuetButton { | ||
@@ -40,2 +42,6 @@ constructor() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -100,11 +106,15 @@ /** | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| const containerClasses = classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| const buttonClasses = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -115,4 +125,5 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| else { | ||
| 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 }, | ||
| return (h("div", { class: containerClasses }, | ||
| h("button", { type: type, class: buttonClasses, "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 }, | ||
| this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", | ||
| h("slot", null)), | ||
@@ -156,2 +167,6 @@ this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -197,3 +212,3 @@ "type": String, | ||
| }]; } | ||
| 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-theme-turva.sc-duet-button .duet-button.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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\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 max-width: 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-theme-turva.sc-duet-button .duet-button.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.icon.sc-duet-button {\n padding-left: 52px;\n}\n.duet-button.sc-duet-button svg.sc-duet-button {\n fill: currentColor;\n}\n.duet-button.sc-duet-button span.sc-duet-button {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading.sc-duet-button span.sc-duet-button {\n display: none;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\n}"; } | ||
| } | ||
@@ -200,0 +215,0 @@ |
| // Duet: Host Data, ES Module/es2017 Target | ||
| export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]] | ||
| export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]] |
| import { h } from '../duet.core.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| var icons = { "500px": { "title": "500px", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>" }, "ACM": { "title": "ACM", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>" } }; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -37,2 +38,6 @@ function DuetButton() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -99,14 +104,17 @@ /** | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classNames("duet-button", "" + this.variation, { | ||
| var containerClasses = classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| var buttonClasses = classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| } | ||
@@ -158,2 +166,6 @@ }; | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -210,3 +222,3 @@ "type": String, | ||
| 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 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-theme-turva .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 {\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\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 max-width: 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-theme-turva .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 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button.icon {\n padding-left: 52px;\n}\n.duet-button svg {\n fill: currentColor;\n}\n.duet-button span {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\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-theme-turva .duet-button.default {\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-theme-turva .duet-button.default:hover {\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-theme-turva .duet-button.primary {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\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-theme-turva .duet-button.secondary:hover {\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-theme-turva .duet-button.loading {\n background: #c60c30;\n}\n.duet-button.loading span {\n display: none;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative {\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-theme-turva .duet-button.destructive {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\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-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\n}"; }, | ||
| enumerable: true, | ||
@@ -213,0 +225,0 @@ configurable: true |
| import { h } from '../duet.core.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| var icons = { "500px": { "title": "500px", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>500px icon</title><path d=\"M7.439 9.01A2.994 2.994 0 0 0 4.449 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343c-1.297 0-2.354-1.056-2.354-2.353s1.057-2.353 2.354-2.353S9.792 10.703 9.792 12s-1.056 2.353-2.353 2.353m6.472-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343c-1.298 0-2.353-1.056-2.353-2.353s1.055-2.353 2.353-2.353c1.297 0 2.353 1.056 2.353 2.353s-1.056 2.353-2.353 2.353m-11.612-3.55a2.1 2.1 0 0 0-1.596.423V9.641H3.39c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.396c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.501 1.685c-.635 0-1.19-.408-1.421-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.181-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18m16.646-1.764c-.805.062-1.434.769-1.434 1.61v2.661c0 .154.117.186.293.186s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.729c0 .08-.039.34-.217.581-.135.182-.391.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.559l1.085-1.085c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058l-1.088 1.088-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.091 1.092a.162.162 0 0 0 .114.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.061-.319l-1.094-1.093z\"/></svg>" }, "ACM": { "title": "ACM", "hex": "000000", "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>ACM icon</title><path d=\"M7.435 12.25c-.08.025-.15.072-.202.135-.048.072-.073.158-.07.245 0 .15.038.252.12.308.077.056.194.082.352.082.087 0 .174-.02.264-.06.09-.038.174-.095.245-.165v-.66c-.168.015-.303.03-.405.045-.105.01-.207.034-.305.07zM12 0L0 12l12 12 12-12L12 0zm0 19.357C7.938 19.355 4.645 16.063 4.643 12 4.645 7.938 7.938 4.644 12 4.642c4.063.002 7.355 3.295 7.357 7.358-.002 4.063-3.294 7.355-7.357 7.357zM12 5.377v.002c-3.654 0-6.62 2.966-6.62 6.62s2.966 6.62 6.62 6.62 6.62-2.966 6.62-6.62c0-3.656-2.964-6.62-6.62-6.623zm-2.862 8.246h-.995v-.336l-.182.154c-.142.108-.304.188-.477.233-.082.02-.202.035-.352.035-.262.007-.515-.097-.698-.285-.187-.19-.277-.426-.277-.716 0-.238.046-.427.14-.574.1-.15.24-.27.405-.348.205-.09.423-.152.646-.18.25-.033.516-.06.803-.078v-.017c0-.176-.066-.297-.196-.363-.13-.07-.322-.102-.58-.102-.117 0-.254.02-.41.063-.158.044-.308.1-.458.164H6.42v-.77c.097-.03.256-.062.48-.1.217-.04.438-.06.663-.06.55 0 .95.092 1.2.276.25.183.375.462.375.837v2.168zm3.22-.167c-.07.028-.134.056-.2.086-.074.03-.15.058-.23.08-.094.024-.186.044-.27.06-.084.014-.196.022-.336.022-.263 0-.506-.033-.723-.1-.21-.062-.406-.165-.57-.307-.163-.142-.292-.32-.373-.52-.09-.21-.135-.457-.135-.738-.008-.27.042-.535.146-.78.09-.204.224-.384.392-.53.165-.134.355-.233.56-.29.22-.066.447-.096.675-.096.37 0 .732.087 1.06.255v.854h-.127c-.048-.043-.096-.085-.147-.124-.06-.048-.122-.09-.188-.126-.167-.095-.357-.144-.55-.14-.254 0-.45.086-.59.263-.138.177-.21.414-.21.714 0 .32.075.56.225.715.15.157.347.235.592.235.11 0 .222-.013.33-.042.153-.043.295-.12.415-.225.048-.04.088-.082.123-.11h.13v.843zm4.333.173v-1.597c0-.157 0-.29-.007-.397-.002-.09-.02-.18-.052-.263-.023-.066-.07-.12-.13-.15-.153-.064-.325-.063-.478.002-.086.04-.168.087-.244.14v2.263h-.993v-1.595c0-.156-.003-.286-.01-.396-.003-.09-.02-.18-.05-.264-.027-.066-.076-.12-.136-.15-.06-.033-.145-.048-.25-.048-.083 0-.165.02-.24.056-.078.04-.152.086-.228.136v2.262h-.995V10.44h.993v.356c.144-.125.296-.233.46-.323.148-.08.314-.12.484-.12.182-.004.36.045.514.14.153.1.27.244.34.414.19-.177.37-.314.54-.41.17-.096.34-.145.515-.145.136-.002.27.023.396.075.115.044.22.116.3.21.09.106.16.23.2.364.045.142.066.328.066.553v2.076h-.995z\"/></svg>" } }; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -37,2 +38,6 @@ function DuetButton() { | ||
| this.external = false; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| this.icon = ""; | ||
| } | ||
@@ -99,14 +104,17 @@ /** | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classNames("duet-button", "" + this.variation, { | ||
| var containerClasses = classNames("duet-button-container", { | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| var buttonClasses = classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| disabled: this.disabled, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| icon: this.icon !== "", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| 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)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, this.icon ? h("span", { innerHTML: icons[this.icon].svg }) : "", h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| } | ||
@@ -158,2 +166,6 @@ }; | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "identifier": { | ||
@@ -210,3 +222,3 @@ "type": String, | ||
| 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 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-theme-turva.sc-duet-button .duet-button.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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\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 max-width: 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-theme-turva.sc-duet-button .duet-button.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.icon.sc-duet-button {\n padding-left: 52px;\n}\n.duet-button.sc-duet-button svg.sc-duet-button {\n fill: currentColor;\n}\n.duet-button.sc-duet-button span.sc-duet-button {\n width: 20px;\n height: 20px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: 24px;\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-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button .duet-button.disabled.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-theme-turva.sc-duet-button .duet-button.default.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-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.loading.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading.sc-duet-button span.sc-duet-button {\n display: none;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva.sc-duet-button .duet-button.negative.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-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover {\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-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover {\n color: #940925;\n}"; }, | ||
| enumerable: true, | ||
@@ -213,0 +225,0 @@ configurable: true |
| // Duet: Host Data, ES Module/es5 Target | ||
| export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]] | ||
| export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]] |
@@ -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")); |
@@ -49,2 +49,6 @@ /* tslint:disable */ | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| 'icon': string; | ||
| /** | ||
| * Adds a unique identifier for the button. | ||
@@ -100,2 +104,6 @@ */ | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| 'icon'?: string; | ||
| /** | ||
| * Adds a unique identifier for the button. | ||
@@ -102,0 +110,0 @@ */ |
@@ -51,2 +51,6 @@ import '../../stencil.core'; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| icon: string; | ||
| /** | ||
| * A destination to link to, rendered in the href attribute of a link. | ||
@@ -53,0 +57,0 @@ */ |
@@ -43,2 +43,7 @@ { | ||
| { | ||
| "label": "icon", | ||
| "description": "Icon to display to the left of the button content", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "identifier", | ||
@@ -45,0 +50,0 @@ "description": "Adds a unique identifier for the button.", |
| { | ||
| "name": "@duetds/components", | ||
| "version": "0.0.1-alpha.27", | ||
| "version": "0.0.1-alpha.28", | ||
| "description": "This package includes Duet Components and related tools.", | ||
@@ -42,7 +42,4 @@ "author": "Viljami Salminen <ext-viljami.salminen@lahitapiola.fi>", | ||
| }, | ||
| "gitHead": "aa4526edab82363116521ac8f08da07477c238f4", | ||
| "gitHead": "facfc1a21c9a95726d58ca905a52fa76f937246c", | ||
| "devDependencies": { | ||
| "@duetds/fonts": "^1.0.7", | ||
| "@duetds/icons": "^0.0.1-alpha.19", | ||
| "@duetds/tokens": "^1.1.7", | ||
| "@stencil/core": "^0.18.1", | ||
@@ -64,2 +61,5 @@ "@stencil/sass": "^0.2.1", | ||
| "dependencies": { | ||
| "@duetds/fonts": "^1.0.7", | ||
| "@duetds/icons": "^1.0.0-alpha.0", | ||
| "@duetds/tokens": "^1.1.7", | ||
| "classnames": "^2.2.6", | ||
@@ -66,0 +66,0 @@ "resize-observer-polyfill": "^1.5.1" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.67%
2069212
- Dev dependency count
- decreased by-17.65%
14
- Lines of code
- increased by1.54%
23535
Worsened metrics
- Dependency count
- increased by150%
5
- Number of low supply chain risk alerts
- increased by88.89%
34
Dependency changes
+ Added@duetds/fonts@^1.0.7
+ Added@duetds/icons@^1.0.0-alpha.0
+ Added@duetds/tokens@^1.1.7
+ Added@duetds/fonts@1.4.44(transitive)
+ Added@duetds/icons@1.0.31(transitive)
+ Added@duetds/tokens@1.3.7(transitive)