@duetds/components
Advanced tools
@duetds/components - npm Package Compare versions
Comparing version 0.0.1-alpha.22 to 0.0.1-alpha.23
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var duet_core_js_1 = require("../duet.core.js"); | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| function commonjsRequire() { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports(x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace(n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames() { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) | ||
| continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } | ||
| else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } | ||
| else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } | ||
| else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } | ||
| else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| var chunk_e639420f_js_1 = require("./chunk-e639420f.js"); | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -103,3 +40,40 @@ function DuetButton() { | ||
| } | ||
| DuetButton.prototype.handleClick = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleBlur = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleFocus = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| }; | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| DuetButton.prototype.componentDidLoad = function () { | ||
| var _this = this; | ||
| // When component loads, check if global Turva theme exists. | ||
| chunk_e639420f_js_1.a(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(function () { | ||
| chunk_e639420f_js_1.a(_this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| }; | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| DuetButton.prototype.componentDidUnload = function () { | ||
| this.mutationObserver.disconnect(); | ||
| }; | ||
| /** | ||
| * render() function | ||
@@ -109,12 +83,16 @@ * Always the last one in the class. | ||
| DuetButton.prototype.render = function () { | ||
| var _this = this; | ||
| // Set constants for button type and classes used. | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classnames("duet-button", "" + this.variation, { | ||
| var classes = chunk_e639420f_js_1.b("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| } | ||
@@ -127,2 +105,7 @@ }; | ||
| }); | ||
| Object.defineProperty(DuetButton, "encapsulation", { | ||
| get: function () { return "shadow"; }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "properties", { | ||
@@ -151,2 +134,5 @@ get: function () { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -185,4 +171,29 @@ "type": Boolean, | ||
| }); | ||
| Object.defineProperty(DuetButton, "events", { | ||
| get: function () { | ||
| return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "style", { | ||
| get: function () { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| enumerable: true, | ||
@@ -189,0 +200,0 @@ configurable: true |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var duet_core_js_1 = require("../duet.core.js"); | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| function commonjsRequire() { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports(x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace(n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames() { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) | ||
| continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } | ||
| else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } | ||
| else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } | ||
| else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } | ||
| else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| var chunk_e639420f_js_1 = require("./chunk-e639420f.js"); | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -103,3 +40,40 @@ function DuetButton() { | ||
| } | ||
| DuetButton.prototype.handleClick = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleBlur = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleFocus = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| }; | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| DuetButton.prototype.componentDidLoad = function () { | ||
| var _this = this; | ||
| // When component loads, check if global Turva theme exists. | ||
| chunk_e639420f_js_1.a(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(function () { | ||
| chunk_e639420f_js_1.a(_this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| }; | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| DuetButton.prototype.componentDidUnload = function () { | ||
| this.mutationObserver.disconnect(); | ||
| }; | ||
| /** | ||
| * render() function | ||
@@ -109,12 +83,16 @@ * Always the last one in the class. | ||
| DuetButton.prototype.render = function () { | ||
| var _this = this; | ||
| // Set constants for button type and classes used. | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classnames("duet-button", "" + this.variation, { | ||
| var classes = chunk_e639420f_js_1.b("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null))); | ||
| } | ||
@@ -127,2 +105,7 @@ }; | ||
| }); | ||
| Object.defineProperty(DuetButton, "encapsulation", { | ||
| get: function () { return "shadow"; }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "properties", { | ||
@@ -151,2 +134,5 @@ get: function () { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -185,4 +171,29 @@ "type": Boolean, | ||
| }); | ||
| Object.defineProperty(DuetButton, "events", { | ||
| get: function () { | ||
| return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "style", { | ||
| get: function () { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| enumerable: true, | ||
@@ -189,0 +200,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], ["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]]]]; | ||
| 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]]; |
@@ -76,3 +76,174 @@ { | ||
| } | ||
| ] | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "events": [ | ||
| { | ||
| "event": "onBlur" | ||
| }, | ||
| { | ||
| "event": "onClick" | ||
| }, | ||
| { | ||
| "event": "onFocus" | ||
| } | ||
| ], | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-input", | ||
| "dependencies": [], | ||
| "componentClass": "DuetInput", | ||
| "componentPath": "components/duet-input/duet-input.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-input/duet-input.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "accessibleActiveDescendant", | ||
| "type": "String", | ||
| "attr": "accessible-active-descendant" | ||
| }, | ||
| { | ||
| "name": "accessibleAutocomplete", | ||
| "type": "String", | ||
| "attr": "accessible-autocomplete" | ||
| }, | ||
| { | ||
| "name": "accessibleControls", | ||
| "type": "String", | ||
| "attr": "accessible-controls" | ||
| }, | ||
| { | ||
| "name": "accessibleOwns", | ||
| "type": "String", | ||
| "attr": "accessible-owns" | ||
| }, | ||
| { | ||
| "name": "autoComplete", | ||
| "type": "String", | ||
| "attr": "auto-complete" | ||
| }, | ||
| { | ||
| "name": "autofocus", | ||
| "type": "Boolean", | ||
| "attr": "autofocus" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
| "type": "Boolean", | ||
| "attr": "disabled" | ||
| }, | ||
| { | ||
| "name": "expand", | ||
| "type": "Boolean", | ||
| "attr": "expand" | ||
| }, | ||
| { | ||
| "name": "helpText", | ||
| "type": "String", | ||
| "attr": "help-text" | ||
| }, | ||
| { | ||
| "name": "identifier", | ||
| "type": "String", | ||
| "attr": "identifier" | ||
| }, | ||
| { | ||
| "name": "inputPrefix", | ||
| "type": "String", | ||
| "attr": "input-prefix" | ||
| }, | ||
| { | ||
| "name": "inputSuffix", | ||
| "type": "String", | ||
| "attr": "input-suffix" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "type": "String", | ||
| "attr": "label" | ||
| }, | ||
| { | ||
| "name": "labelHidden", | ||
| "type": "Boolean", | ||
| "attr": "label-hidden" | ||
| }, | ||
| { | ||
| "name": "maxLength", | ||
| "type": "Number", | ||
| "attr": "max-length" | ||
| }, | ||
| { | ||
| "name": "minLength", | ||
| "type": "Number", | ||
| "attr": "min-length" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "type": "String", | ||
| "attr": "name" | ||
| }, | ||
| { | ||
| "name": "pattern", | ||
| "type": "String", | ||
| "attr": "pattern" | ||
| }, | ||
| { | ||
| "name": "placeholder", | ||
| "type": "String", | ||
| "attr": "placeholder" | ||
| }, | ||
| { | ||
| "name": "role", | ||
| "type": "String", | ||
| "attr": "role" | ||
| }, | ||
| { | ||
| "name": "spellCheck", | ||
| "type": "Boolean", | ||
| "attr": "spell-check" | ||
| }, | ||
| { | ||
| "name": "theme", | ||
| "type": "String", | ||
| "attr": "theme" | ||
| }, | ||
| { | ||
| "name": "type", | ||
| "type": "String", | ||
| "attr": "type" | ||
| }, | ||
| { | ||
| "name": "value", | ||
| "type": "String", | ||
| "mutable": true, | ||
| "attr": "value" | ||
| }, | ||
| { | ||
| "name": "variation", | ||
| "type": "String", | ||
| "attr": "variation" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "events": [ | ||
| { | ||
| "event": "onBlur" | ||
| }, | ||
| { | ||
| "event": "onFocus" | ||
| }, | ||
| { | ||
| "event": "onInput" | ||
| } | ||
| ], | ||
| "shadow": true | ||
| } | ||
@@ -79,0 +250,0 @@ ], |
@@ -0,1 +1,2 @@ | ||
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
| import classNames from "classnames"; | ||
@@ -37,3 +38,39 @@ export class DuetButton { | ||
| } | ||
| handleClick(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| } | ||
| handleBlur(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| } | ||
| handleFocus(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| } | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| componentDidLoad() { | ||
| // When component loads, check if global Turva theme exists. | ||
| applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(() => { | ||
| applyThemeClasses(this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| } | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| componentDidUnload() { | ||
| this.mutationObserver.disconnect(); | ||
| } | ||
| /** | ||
| * render() function | ||
@@ -43,2 +80,3 @@ * Always the last one in the class. | ||
| render() { | ||
| // Set constants for button type and classes used. | ||
| const type = this.submit ? "submit" : "button"; | ||
@@ -49,8 +87,10 @@ const classes = classNames("duet-button", `${this.variation}`, { | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier }, | ||
| h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier }, | ||
| h("slot", null))); | ||
@@ -60,2 +100,3 @@ } | ||
| static get is() { return "duet-button"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
@@ -82,2 +123,5 @@ "accessibleControls": { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -112,3 +156,22 @@ "type": Boolean, | ||
| }; } | ||
| static get events() { return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; } | ||
| static get style() { return "/**style-placeholder:duet-button:**/"; } | ||
| } |
@@ -134,2 +134,2 @@ | ||
| })(window, document, "Duet","duet",0,"duet.core.js","duet.core.pf.js","hydrated","duet-button",HTMLElement.prototype); | ||
| })(window, document, "Duet","duet",0,"duet.core.js","duet.core.pf.js","hydrated","duet-button,duet-input",HTMLElement.prototype); |
| const h = window.Duet.h; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| function commonjsRequire () { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports (x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace (n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames () { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| class DuetButton { | ||
@@ -111,3 +40,39 @@ constructor() { | ||
| } | ||
| handleClick(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| } | ||
| handleBlur(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| } | ||
| handleFocus(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| } | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| componentDidLoad() { | ||
| // When component loads, check if global Turva theme exists. | ||
| applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(() => { | ||
| applyThemeClasses(this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| } | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| componentDidUnload() { | ||
| this.mutationObserver.disconnect(); | ||
| } | ||
| /** | ||
| * render() function | ||
@@ -117,13 +82,16 @@ * Always the last one in the class. | ||
| render() { | ||
| // Set constants for button type and classes used. | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classnames("duet-button", `${this.variation}`, { | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier }, | ||
| h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier }, | ||
| h("slot", null))); | ||
@@ -133,2 +101,3 @@ } | ||
| static get is() { return "duet-button"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
@@ -155,2 +124,5 @@ "accessibleControls": { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -185,5 +157,24 @@ "type": Boolean, | ||
| }; } | ||
| static get style() { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| static get events() { return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; } | ||
| static get style() { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| } | ||
| export { DuetButton }; |
@@ -1,67 +0,3 @@ | ||
| Duet.loadBundle('duet-button', ['exports'], function (exports) { | ||
| Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) { | ||
| var h = window.Duet.h; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| function commonjsRequire() { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports(x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace(n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames() { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) | ||
| continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } | ||
| else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } | ||
| else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } | ||
| else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } | ||
| else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -102,3 +38,40 @@ function DuetButton() { | ||
| } | ||
| DuetButton.prototype.handleClick = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleBlur = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleFocus = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| }; | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| DuetButton.prototype.componentDidLoad = function () { | ||
| var _this = this; | ||
| // When component loads, check if global Turva theme exists. | ||
| __chunk_1.applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(function () { | ||
| __chunk_1.applyThemeClasses(_this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| }; | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| DuetButton.prototype.componentDidUnload = function () { | ||
| this.mutationObserver.disconnect(); | ||
| }; | ||
| /** | ||
| * render() function | ||
@@ -108,12 +81,16 @@ * Always the last one in the class. | ||
| DuetButton.prototype.render = function () { | ||
| var _this = this; | ||
| // Set constants for button type and classes used. | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classnames("duet-button", "" + this.variation, { | ||
| var classes = __chunk_1.classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, h("slot", null))); | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| } | ||
@@ -126,2 +103,7 @@ }; | ||
| }); | ||
| Object.defineProperty(DuetButton, "encapsulation", { | ||
| get: function () { return "shadow"; }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "properties", { | ||
@@ -150,2 +132,5 @@ get: function () { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -184,4 +169,29 @@ "type": Boolean, | ||
| }); | ||
| Object.defineProperty(DuetButton, "events", { | ||
| get: function () { | ||
| return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "style", { | ||
| get: function () { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| enumerable: true, | ||
@@ -188,0 +198,0 @@ configurable: true |
| const h = window.Duet.h; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| function commonjsRequire () { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports (x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace (n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames () { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| class DuetButton { | ||
@@ -111,3 +40,39 @@ constructor() { | ||
| } | ||
| handleClick(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| } | ||
| handleBlur(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| } | ||
| handleFocus(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| } | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| componentDidLoad() { | ||
| // When component loads, check if global Turva theme exists. | ||
| applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(() => { | ||
| applyThemeClasses(this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| } | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| componentDidUnload() { | ||
| this.mutationObserver.disconnect(); | ||
| } | ||
| /** | ||
| * render() function | ||
@@ -117,13 +82,16 @@ * Always the last one in the class. | ||
| render() { | ||
| // Set constants for button type and classes used. | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classnames("duet-button", `${this.variation}`, { | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier }, | ||
| h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier }, | ||
| h("slot", null))); | ||
@@ -133,2 +101,3 @@ } | ||
| static get is() { return "duet-button"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
@@ -155,2 +124,5 @@ "accessibleControls": { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -185,5 +157,24 @@ "type": Boolean, | ||
| }; } | ||
| static get style() { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| static get events() { return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; } | ||
| static get style() { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| } | ||
| export { DuetButton }; |
@@ -1,67 +0,3 @@ | ||
| Duet.loadBundle('duet-button', ['exports'], function (exports) { | ||
| Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) { | ||
| var h = window.Duet.h; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| function commonjsRequire() { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports(x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace(n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames() { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) | ||
| continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } | ||
| else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } | ||
| else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } | ||
| else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } | ||
| else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -102,3 +38,40 @@ function DuetButton() { | ||
| } | ||
| DuetButton.prototype.handleClick = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleBlur = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleFocus = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| }; | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| DuetButton.prototype.componentDidLoad = function () { | ||
| var _this = this; | ||
| // When component loads, check if global Turva theme exists. | ||
| __chunk_1.applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(function () { | ||
| __chunk_1.applyThemeClasses(_this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| }; | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| DuetButton.prototype.componentDidUnload = function () { | ||
| this.mutationObserver.disconnect(); | ||
| }; | ||
| /** | ||
| * render() function | ||
@@ -108,12 +81,16 @@ * Always the last one in the class. | ||
| DuetButton.prototype.render = function () { | ||
| var _this = this; | ||
| // Set constants for button type and classes used. | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classnames("duet-button", "" + this.variation, { | ||
| var classes = __chunk_1.classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, h("slot", null))); | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| } | ||
@@ -126,2 +103,7 @@ }; | ||
| }); | ||
| Object.defineProperty(DuetButton, "encapsulation", { | ||
| get: function () { return "shadow"; }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "properties", { | ||
@@ -150,2 +132,5 @@ get: function () { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -184,4 +169,29 @@ "type": Boolean, | ||
| }); | ||
| Object.defineProperty(DuetButton, "events", { | ||
| get: function () { | ||
| return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "style", { | ||
| get: function () { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| enumerable: true, | ||
@@ -188,0 +198,0 @@ configurable: true |
| import { h } from '../duet.core.js'; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| function commonjsRequire () { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports (x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace (n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames () { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| class DuetButton { | ||
@@ -111,3 +40,39 @@ constructor() { | ||
| } | ||
| handleClick(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| } | ||
| handleBlur(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| } | ||
| handleFocus(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| } | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| componentDidLoad() { | ||
| // When component loads, check if global Turva theme exists. | ||
| applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(() => { | ||
| applyThemeClasses(this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| } | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| componentDidUnload() { | ||
| this.mutationObserver.disconnect(); | ||
| } | ||
| /** | ||
| * render() function | ||
@@ -117,13 +82,16 @@ * Always the last one in the class. | ||
| render() { | ||
| // Set constants for button type and classes used. | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classnames("duet-button", `${this.variation}`, { | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier }, | ||
| h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier }, | ||
| h("slot", null))); | ||
@@ -133,2 +101,3 @@ } | ||
| static get is() { return "duet-button"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
@@ -155,2 +124,5 @@ "accessibleControls": { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -185,5 +157,24 @@ "type": Boolean, | ||
| }; } | ||
| static get style() { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| static get events() { return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; } | ||
| static get style() { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| } | ||
| export { DuetButton }; |
| import { h } from '../duet.core.js'; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| function commonjsRequire () { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports (x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace (n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames () { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| class DuetButton { | ||
@@ -111,3 +40,39 @@ constructor() { | ||
| } | ||
| handleClick(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| } | ||
| handleBlur(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| } | ||
| handleFocus(ev) { | ||
| const send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| } | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| componentDidLoad() { | ||
| // When component loads, check if global Turva theme exists. | ||
| applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(() => { | ||
| applyThemeClasses(this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| } | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| componentDidUnload() { | ||
| this.mutationObserver.disconnect(); | ||
| } | ||
| /** | ||
| * render() function | ||
@@ -117,13 +82,16 @@ * Always the last one in the class. | ||
| render() { | ||
| // Set constants for button type and classes used. | ||
| const type = this.submit ? "submit" : "button"; | ||
| const classes = classnames("duet-button", `${this.variation}`, { | ||
| const classes = classNames("duet-button", `${this.variation}`, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier }, | ||
| h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier }, | ||
| h("slot", null))); | ||
@@ -133,2 +101,3 @@ } | ||
| static get is() { return "duet-button"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
@@ -155,2 +124,5 @@ "accessibleControls": { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -185,5 +157,24 @@ "type": Boolean, | ||
| }; } | ||
| static get style() { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| static get events() { return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; } | ||
| static get style() { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| } | ||
| export { DuetButton }; |
| // 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],["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]]]] | ||
| 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]] |
| import { h } from '../duet.core.js'; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| function commonjsRequire() { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports(x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace(n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames() { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) | ||
| continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } | ||
| else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } | ||
| else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } | ||
| else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } | ||
| else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -101,3 +38,40 @@ function DuetButton() { | ||
| } | ||
| DuetButton.prototype.handleClick = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleBlur = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleFocus = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| }; | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| DuetButton.prototype.componentDidLoad = function () { | ||
| var _this = this; | ||
| // When component loads, check if global Turva theme exists. | ||
| applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(function () { | ||
| applyThemeClasses(_this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| }; | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| DuetButton.prototype.componentDidUnload = function () { | ||
| this.mutationObserver.disconnect(); | ||
| }; | ||
| /** | ||
| * render() function | ||
@@ -107,12 +81,16 @@ * Always the last one in the class. | ||
| DuetButton.prototype.render = function () { | ||
| var _this = this; | ||
| // Set constants for button type and classes used. | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classnames("duet-button", "" + this.variation, { | ||
| var classes = classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, h("slot", null))); | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| } | ||
@@ -125,2 +103,7 @@ }; | ||
| }); | ||
| Object.defineProperty(DuetButton, "encapsulation", { | ||
| get: function () { return "shadow"; }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "properties", { | ||
@@ -149,2 +132,5 @@ get: function () { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -183,4 +169,29 @@ "type": Boolean, | ||
| }); | ||
| Object.defineProperty(DuetButton, "events", { | ||
| get: function () { | ||
| return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "style", { | ||
| get: function () { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| get: function () { return ":host {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\n}\n.duet-button.expand {\n width: 100%;\n}\n.duet-button.default {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\n}\n.duet-button.secondary {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| enumerable: true, | ||
@@ -187,0 +198,0 @@ configurable: true |
| import { h } from '../duet.core.js'; | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| function commonjsRequire() { | ||
| throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs'); | ||
| } | ||
| function unwrapExports(x) { | ||
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x; | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| function getCjsExportFromNamespace(n) { | ||
| return n && n.default || n; | ||
| } | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| /* global define */ | ||
| (function () { | ||
| 'use strict'; | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames() { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) | ||
| continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } | ||
| else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } | ||
| else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ('object' !== 'undefined' && module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } | ||
| else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
| // register as 'classnames', consistent with npm package name | ||
| undefined('classnames', [], function () { | ||
| return classNames; | ||
| }); | ||
| } | ||
| else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| var DuetButton = /** @class */ (function () { | ||
@@ -101,3 +38,40 @@ function DuetButton() { | ||
| } | ||
| DuetButton.prototype.handleClick = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onClick.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleBlur = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onBlur.emit(send); | ||
| }; | ||
| DuetButton.prototype.handleFocus = function (ev) { | ||
| var send = ev.target ? ev.target : null; | ||
| this.onFocus.emit(send); | ||
| }; | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| DuetButton.prototype.componentDidLoad = function () { | ||
| var _this = this; | ||
| // When component loads, check if global Turva theme exists. | ||
| applyThemeClasses(this.element); | ||
| // Create mutation observer and apply needed theme classes | ||
| // inside Shadow DOM when necessary. | ||
| this.mutationObserver = new MutationObserver(function () { | ||
| applyThemeClasses(_this.element); | ||
| }); | ||
| // Observe for className changes in <html> element. | ||
| this.mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["class"], | ||
| subtree: false, | ||
| }); | ||
| }; | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| DuetButton.prototype.componentDidUnload = function () { | ||
| this.mutationObserver.disconnect(); | ||
| }; | ||
| /** | ||
| * render() function | ||
@@ -107,12 +81,16 @@ * Always the last one in the class. | ||
| DuetButton.prototype.render = function () { | ||
| var _this = this; | ||
| // Set constants for button type and classes used. | ||
| var type = this.submit ? "submit" : "button"; | ||
| var classes = classnames("duet-button", "" + this.variation, { | ||
| var classes = classNames("duet-button", "" + this.variation, { | ||
| expand: this.expand, | ||
| "duet-theme-turva": this.theme === "turva", | ||
| }); | ||
| // If URL prop exists render an anchor instead of a button. | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, id: this.identifier }, h("slot", null))); | ||
| return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null))); | ||
| } | ||
@@ -125,2 +103,7 @@ }; | ||
| }); | ||
| Object.defineProperty(DuetButton, "encapsulation", { | ||
| get: function () { return "shadow"; }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "properties", { | ||
@@ -149,2 +132,5 @@ get: function () { | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
@@ -183,4 +169,29 @@ "type": Boolean, | ||
| }); | ||
| Object.defineProperty(DuetButton, "events", { | ||
| get: function () { | ||
| return [{ | ||
| "name": "onClick", | ||
| "method": "onClick", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onBlur", | ||
| "method": "onBlur", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "onFocus", | ||
| "method": "onFocus", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(DuetButton, "style", { | ||
| get: function () { return ".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 -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\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 vertical-align: top;\n max-width: 100%;\n position: relative;\n display: inline-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, .duet-button.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled] {\n cursor: not-allowed;\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, .duet-button.default.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary {\n color: white;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled] {\n background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n background: #757575;\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, .duet-button.secondary:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n background: #c60c30;\n}\n.duet-button.loading[disabled] {\n opacity: 0.75;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n color: #111111;\n}\n.duet-button.negative:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n background: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled] {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| get: function () { return ".sc-duet-button-h {\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n padding: 16px 28px 17px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n -webkit-transition: none;\n transition: none;\n opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n width: 100%;\n}\n.duet-button.default.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n box-shadow: inset 0 0 0 2px #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n color: white;\n background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n -webkit-box-shadow: inset 0 0 0 2px #00294d;\n box-shadow: inset 0 0 0 2px #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n box-shadow: inset 0 0 0 2px #c60c30;\n color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: #e1e3e6;\n color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n background: #e6e6e6;\n color: #757575;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n background: #0077b3;\n color: white;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border-top: 2px solid rgba(255, 255, 255, 0.2);\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n border-left: 2px solid white;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n color: #00294d;\n background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n -webkit-box-shadow: inset 0 0 0 2px white;\n box-shadow: inset 0 0 0 2px white;\n background: transparent;\n color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n color: #00294d;\n background: white;\n opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n color: white;\n background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n color: white;\n background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n -webkit-box-shadow: none;\n box-shadow: none;\n overflow: visible;\n border-radius: 0;\n min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n transform: rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n transform: rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; }, | ||
| enumerable: true, | ||
@@ -187,0 +198,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],["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]]]] | ||
| 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]] |
@@ -99,2 +99,14 @@ /* tslint:disable */ | ||
| /** | ||
| * Callback when focus leaves button. | ||
| */ | ||
| 'onOnBlur'?: (event: CustomEvent<string>) => void; | ||
| /** | ||
| * Callback for when the button is clicked. | ||
| */ | ||
| 'onOnClick'?: (event: CustomEvent<string>) => void; | ||
| /** | ||
| * Callback when button becomes focussed. | ||
| */ | ||
| 'onOnFocus'?: (event: CustomEvent<string>) => void; | ||
| /** | ||
| * Allows the button to submit a form. | ||
@@ -116,2 +128,219 @@ */ | ||
| } | ||
| interface DuetInput { | ||
| /** | ||
| * Indicates the id of a related component’s visually focused element to the input | ||
| */ | ||
| 'accessibleActiveDescendant': string; | ||
| /** | ||
| * Indicates what kind of user input completion suggestions are provided | ||
| */ | ||
| 'accessibleAutocomplete': string; | ||
| /** | ||
| * Use this prop to add an aria-controls attribute to the button. Use the attribute to indicate the id of a component controlled by the input. | ||
| */ | ||
| 'accessibleControls': string; | ||
| /** | ||
| * Indicates the id of a component owned by the input | ||
| */ | ||
| 'accessibleOwns': string; | ||
| /** | ||
| * Enable or disable automatic completion by the browser | ||
| */ | ||
| 'autoComplete': string; | ||
| /** | ||
| * Automatically focus the input. | ||
| */ | ||
| 'autofocus': boolean; | ||
| /** | ||
| * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. | ||
| */ | ||
| 'disabled': boolean; | ||
| /** | ||
| * Expands the input to fill 100% of the container width. | ||
| */ | ||
| 'expand': boolean; | ||
| /** | ||
| * Additional hint text to display. | ||
| */ | ||
| 'helpText': string; | ||
| /** | ||
| * Adds a unique identifier for the button. | ||
| */ | ||
| 'identifier': string; | ||
| /** | ||
| * Text to display before value. | ||
| */ | ||
| 'inputPrefix': string; | ||
| /** | ||
| * Text to display after value. | ||
| */ | ||
| 'inputSuffix': string; | ||
| /** | ||
| * Label for the input. | ||
| */ | ||
| 'label': string; | ||
| /** | ||
| * Visually hide the label, but still show it to screen readers. | ||
| */ | ||
| 'labelHidden': boolean; | ||
| /** | ||
| * Maximum character length for an input. | ||
| */ | ||
| 'maxLength': number; | ||
| /** | ||
| * Minimum character length for an input. | ||
| */ | ||
| 'minLength': number; | ||
| /** | ||
| * Name of the input. | ||
| */ | ||
| 'name': string; | ||
| /** | ||
| * A regular expression to check the value against | ||
| */ | ||
| 'pattern': string; | ||
| /** | ||
| * Hint text to display | ||
| */ | ||
| 'placeholder': string; | ||
| /** | ||
| * Defines a specific role attribute for the input | ||
| */ | ||
| 'role': string; | ||
| /** | ||
| * Indicate whether value should have spelling checked | ||
| */ | ||
| 'spellCheck': boolean; | ||
| /** | ||
| * Theme of the input. Can be one of: default, turva. | ||
| */ | ||
| 'theme': string; | ||
| /** | ||
| * Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time. | ||
| */ | ||
| 'type': string; | ||
| /** | ||
| * Value of the input. | ||
| */ | ||
| 'value': string; | ||
| /** | ||
| * Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain. | ||
| */ | ||
| 'variation': string; | ||
| } | ||
| interface DuetInputAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * Indicates the id of a related component’s visually focused element to the input | ||
| */ | ||
| 'accessibleActiveDescendant'?: string; | ||
| /** | ||
| * Indicates what kind of user input completion suggestions are provided | ||
| */ | ||
| 'accessibleAutocomplete'?: string; | ||
| /** | ||
| * Use this prop to add an aria-controls attribute to the button. Use the attribute to indicate the id of a component controlled by the input. | ||
| */ | ||
| 'accessibleControls'?: string; | ||
| /** | ||
| * Indicates the id of a component owned by the input | ||
| */ | ||
| 'accessibleOwns'?: string; | ||
| /** | ||
| * Enable or disable automatic completion by the browser | ||
| */ | ||
| 'autoComplete'?: string; | ||
| /** | ||
| * Automatically focus the input. | ||
| */ | ||
| 'autofocus'?: boolean; | ||
| /** | ||
| * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. | ||
| */ | ||
| 'disabled'?: boolean; | ||
| /** | ||
| * Expands the input to fill 100% of the container width. | ||
| */ | ||
| 'expand'?: boolean; | ||
| /** | ||
| * Additional hint text to display. | ||
| */ | ||
| 'helpText'?: string; | ||
| /** | ||
| * Adds a unique identifier for the button. | ||
| */ | ||
| 'identifier'?: string; | ||
| /** | ||
| * Text to display before value. | ||
| */ | ||
| 'inputPrefix'?: string; | ||
| /** | ||
| * Text to display after value. | ||
| */ | ||
| 'inputSuffix'?: string; | ||
| /** | ||
| * Label for the input. | ||
| */ | ||
| 'label'?: string; | ||
| /** | ||
| * Visually hide the label, but still show it to screen readers. | ||
| */ | ||
| 'labelHidden'?: boolean; | ||
| /** | ||
| * Maximum character length for an input. | ||
| */ | ||
| 'maxLength'?: number; | ||
| /** | ||
| * Minimum character length for an input. | ||
| */ | ||
| 'minLength'?: number; | ||
| /** | ||
| * Name of the input. | ||
| */ | ||
| 'name'?: string; | ||
| /** | ||
| * Callback when focus leaves input. | ||
| */ | ||
| 'onOnBlur'?: (event: CustomEvent<string>) => void; | ||
| /** | ||
| * Callback when input becomes focussed. | ||
| */ | ||
| 'onOnFocus'?: (event: CustomEvent<string>) => void; | ||
| /** | ||
| * Callback when value is changed. | ||
| */ | ||
| 'onOnInput'?: (event: CustomEvent<string>) => void; | ||
| /** | ||
| * A regular expression to check the value against | ||
| */ | ||
| 'pattern'?: string; | ||
| /** | ||
| * Hint text to display | ||
| */ | ||
| 'placeholder'?: string; | ||
| /** | ||
| * Defines a specific role attribute for the input | ||
| */ | ||
| 'role'?: string; | ||
| /** | ||
| * Indicate whether value should have spelling checked | ||
| */ | ||
| 'spellCheck'?: boolean; | ||
| /** | ||
| * Theme of the input. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| /** | ||
| * Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time. | ||
| */ | ||
| 'type'?: string; | ||
| /** | ||
| * Value of the input. | ||
| */ | ||
| 'value'?: string; | ||
| /** | ||
| * Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain. | ||
| */ | ||
| 'variation'?: string; | ||
| } | ||
| } | ||
@@ -122,2 +351,3 @@ | ||
| 'DuetButton': Components.DuetButton; | ||
| 'DuetInput': Components.DuetInput; | ||
| } | ||
@@ -127,2 +357,3 @@ | ||
| 'duet-button': Components.DuetButtonAttributes; | ||
| 'duet-input': Components.DuetInputAttributes; | ||
| } | ||
@@ -137,4 +368,11 @@ | ||
| interface HTMLDuetInputElement extends Components.DuetInput, HTMLStencilElement {} | ||
| var HTMLDuetInputElement: { | ||
| prototype: HTMLDuetInputElement; | ||
| new (): HTMLDuetInputElement; | ||
| }; | ||
| interface HTMLElementTagNameMap { | ||
| 'duet-button': HTMLDuetButtonElement | ||
| 'duet-input': HTMLDuetInputElement | ||
| } | ||
@@ -144,2 +382,3 @@ | ||
| 'duet-button': HTMLDuetButtonElement; | ||
| 'duet-input': HTMLDuetInputElement; | ||
| } | ||
@@ -146,0 +385,0 @@ |
| import '../../stencil.core'; | ||
| import { EventEmitter } from "../../stencil.core"; | ||
| export declare class DuetButton { | ||
| element: HTMLElement; | ||
| private mutationObserver; | ||
| /** | ||
@@ -52,2 +55,25 @@ * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. | ||
| /** | ||
| * Callback for when the button is clicked. | ||
| */ | ||
| onClick: EventEmitter<string>; | ||
| /** | ||
| * Callback when focus leaves button. | ||
| */ | ||
| onBlur: EventEmitter<string>; | ||
| /** | ||
| * Callback when button becomes focussed. | ||
| */ | ||
| onFocus: EventEmitter<string>; | ||
| handleClick(ev: any): void; | ||
| handleBlur(ev: any): void; | ||
| handleFocus(ev: any): void; | ||
| /** | ||
| * componentDidLoad() function | ||
| */ | ||
| componentDidLoad(): void; | ||
| /** | ||
| * componentDidUnload() function | ||
| */ | ||
| componentDidUnload(): void; | ||
| /** | ||
| * render() function | ||
@@ -54,0 +80,0 @@ * Always the last one in the class. |
@@ -68,4 +68,135 @@ { | ||
| ] | ||
| }, | ||
| { | ||
| "label": "duet-input", | ||
| "description": "---\ntitle: Input\nname: duet-input\nstatus: prototype\nslot: Input\nintro: Form Inputs are used to allow users to provide text input when the expected input is short. Form Input has a range of options and supports several text formats including numbers. For longer input, use the form Textarea element.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\ntags:\n - docs-components\n---", | ||
| "attributes": [ | ||
| { | ||
| "label": "accessible-active-descendant", | ||
| "description": "Indicates the id of a related component’s visually focused element to the input", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "accessible-autocomplete", | ||
| "description": "Indicates what kind of user input completion suggestions are provided", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "accessible-controls", | ||
| "description": "Use this prop to add an aria-controls attribute to the button. Use the attribute to indicate the id of a component controlled by the input.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "accessible-owns", | ||
| "description": "Indicates the id of a component owned by the input", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "auto-complete", | ||
| "description": "Enable or disable automatic completion by the browser", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "autofocus", | ||
| "description": "Automatically focus the input.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "disabled", | ||
| "description": "Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "expand", | ||
| "description": "Expands the input to fill 100% of the container width.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "help-text", | ||
| "description": "Additional hint text to display.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "identifier", | ||
| "description": "Adds a unique identifier for the button.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "input-prefix", | ||
| "description": "Text to display before value.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "input-suffix", | ||
| "description": "Text to display after value.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "label", | ||
| "description": "Label for the input.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "label-hidden", | ||
| "description": "Visually hide the label, but still show it to screen readers.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "max-length", | ||
| "description": "Maximum character length for an input.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "min-length", | ||
| "description": "Minimum character length for an input.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "name", | ||
| "description": "Name of the input.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "pattern", | ||
| "description": "A regular expression to check the value against", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "placeholder", | ||
| "description": "Hint text to display", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "role", | ||
| "description": "Defines a specific role attribute for the input", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "spell-check", | ||
| "description": "Indicate whether value should have spelling checked", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "theme", | ||
| "description": "Theme of the input. Can be one of: default, turva.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "type", | ||
| "description": "Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "value", | ||
| "description": "Value of the input.", | ||
| "required": false | ||
| }, | ||
| { | ||
| "label": "variation", | ||
| "description": "Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.", | ||
| "required": false | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
| { | ||
| "name": "@duetds/components", | ||
| "version": "0.0.1-alpha.22", | ||
| "version": "0.0.1-alpha.23", | ||
| "description": "This package includes Duet Components and related tools.", | ||
@@ -37,3 +37,3 @@ "author": "Viljami Salminen <ext-viljami.salminen@lahitapiola.fi>", | ||
| }, | ||
| "gitHead": "38b50f40f605ed8bc5d61a72b67b36f608f017e0", | ||
| "gitHead": "fd07b00be45bd0eee5c8e8b0d2d8c37aec57bdc1", | ||
| "devDependencies": { | ||
@@ -40,0 +40,0 @@ "@duetds/fonts": "^1.0.6", |
Sorry, the diff of this file is too big to display
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
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 by10.01%
1875501
- Number of package files
- increased by22.83%
113
- Lines of code
- increased by28.9%
20073
Worsened metrics
- Number of low supply chain risk alerts
- increased by25%
10
No dependency changes