@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/cjs/duet-nav.cjs.entry.js

@@ -3,18 +3,22 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
 
 const duetNavCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host([sticky]){position:relative;z-index:300}.container{position:relative;z-index:400}::slotted(*[slot=mobile]){display:inherit}::slotted(*[slot=desktop]){display:none}@media (min-width: 62em){::slotted(*[slot=mobile]){display:none}::slotted(*[slot=desktop]){display:inherit}}.sticky{position:sticky;top:0}@media (min-width: 62em){.sticky{position:relative;top:unset}}";
-const DuetNavStyle0 = duetNavCss;
 
 const DuetNav = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Makes navigation sticky so it stays on top.
+         * when page is being scrolled. Works only for mobile.
+         */
         this.sticky = false;
     }
     /**
@@ -32,6 +36,6 @@ const DuetNav = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetNav.style = DuetNavStyle0;
+DuetNav.style = duetNavCss;
 
 exports.duet_nav = DuetNav;

package/lib/cjs/duet-notification_2.cjs.entry.js

@@ -3,32 +3,59 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');
-require('./string-utils-7b13c16e.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+var actionArrowDownSmall = require('./action-arrow-down-small-CDsSJFvZ.js');
+require('./string-utils-B35hEUBv.js');
+require('./_commonjsHelpers-4N64IRaP.js');
 
 const duetNotificationCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}:host(:not([highlight])) ::slotted(duet-heading),:host(:not([highlight])) ::slotted(duet-paragraph){opacity:0.7}.duet-notification{display:block;padding:16px;padding-bottom:0;cursor:pointer}:host(:first-of-type) .duet-notification{border-top-left-radius:8px;border-top-right-radius:8px}:host(:last-of-type) .duet-notification{border-bottom:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.duet-notification.duet-theme-turva{color:rgb(23, 28, 58);border-bottom-color:rgb(222, 224, 228)}.duet-notification.duet-notification-highlight{font-weight:600}.duet-notification.duet-notification-highlight.duet-theme-turva{background:rgb(245, 247, 250)}@media (min-width: 62em){.duet-notification:hover{background:rgb(240, 247, 250)}.duet-notification:hover.duet-theme-turva{background:rgb(245, 247, 250)}}.duet-notification a{text-decoration:none}.duet-notification a:focus{outline:0}:host(.user-is-tabbing) .duet-notification:focus-within{z-index:1;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-notification-container{position:relative;display:flex;padding-bottom:16px;border-bottom:1px solid rgb(212, 223, 229)}.duet-notification-badge-container{position:relative;width:16px}.duet-notification-badge{position:absolute;top:6px;left:-2px;width:8px;height:8px;background:rgb(0, 119, 179);border-radius:50%}.duet-theme-turva .duet-notification-badge{background:rgb(198, 12, 48)}.duet-notification-content{flex:1}.duet-notification-date{position:absolute;top:2px;right:0;width:96px;font-size:0.75rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:right;text-transform:uppercase;opacity:0.7}@media (max-width: 35.9375em){.duet-notification-date{width:auto}}.duet-theme-turva .duet-notification-date{color:rgb(113, 118, 132)}@media (min-width: 62em){:host(:not([highlight])) ::slotted(duet-heading),:host(:not([highlight])) ::slotted(duet-paragraph){opacity:1}.duet-notification{padding:16px;border-bottom:1px solid rgb(212, 223, 229)}.duet-notification:hover{background:rgb(228, 241, 247)}.duet-notification.duet-notification-highlight{font-weight:600;background:rgb(240, 247, 250)}.duet-notification-container{padding-bottom:0;border-bottom-style:none}}::slotted(duet-heading){padding-right:80px !important}::slotted(duet-paragraph){margin-bottom:2px !important}";
-const DuetNotificationStyle0 = duetNotificationCss;
 
 const DuetNotification = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The currently active language.
+         * Used for announcing unread notifications to screen readers.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = languageUtils.getLanguage();
+        /**
+         * Property to change accessibleLabelUnread defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelUnread when needed
+         */
         this.accessibleLabelUnreadDefaults = {
             en: "Unread",
             fi: "Lukematon",
             sv: "Oläst",
         };
+        /**
+         * Adds accessible label for tooltip that is shown over unread counter
+         * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" }
+         */
         this.accessibleLabelUnread = languageUtils.getLocaleString(this.accessibleLabelUnreadDefaults, this.language);
+        /**
+         * The url to open on notification click.
+         */
         this.url = "#";
+        /**
+         * The date of the notification.
+         */
         this.date = "";
+        /**
+         * Should the notification be visually highlighted?
+         */
         this.highlight = false;
+        /**
+         * Should the link open in a new window?
+         */
         this.external = false;
+        /**
+         * Theme of the notification.
+         */
         this.theme = "";
     }
     /**
@@ -62,15 +89,58 @@ const DuetNotification = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetNotification.style = DuetNotificationStyle0;
+DuetNotification.style = duetNotificationCss;
 
 const duetNotificationDrawerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-drawer{position:relative}@media (min-width: 62em){.duet-drawer{display:inline-block}}.duet-drawer-toggle{position:relative;display:flex;align-items:center;width:100%;height:48px;padding:0 20px;overflow:hidden;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:48px;color:rgb(8, 42, 77);text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229);border-radius:0;-webkit-appearance:none;appearance:none}@media (min-width: 62em){.duet-drawer-toggle{z-index:200;width:auto;max-width:200px;padding:0 30px 0 12px;overflow:hidden;font-size:0.875rem;line-height:4rem;border:0;border-radius:4px;transition:border 300ms ease}}.duet-theme-turva .duet-drawer-toggle{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);background-color:rgb(255, 255, 255);border-color:rgb(222, 224, 228)}.duet-drawer-toggle:active{opacity:0.75}.duet-drawer-toggle:focus{outline:0}:host(.user-is-tabbing) .duet-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-drawer-toggle:hover{color:rgb(0, 75, 129)}.duet-theme-turva .duet-drawer-toggle:hover{color:rgb(113, 118, 132)}.duet-drawer-toggle::after{display:none !important}@media (min-width: 62em){.duet-drawer-toggle::after{position:absolute;top:auto;bottom:0;left:0;display:block !important;width:100%;height:3px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(3px)}.duet-theme-turva .duet-drawer-toggle::after{background:rgb(198, 12, 48)}}.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{color:rgb(0, 75, 129);border-bottom:1px solid rgb(245, 248, 250);border-radius:0}.duet-theme-turva .duet-drawer-toggle[aria-expanded=true],.duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover{color:rgb(113, 118, 132);border-color:rgb(245, 247, 250)}@media (min-width: 62em){.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{border:0}.duet-drawer-toggle[aria-expanded=true]::after,.duet-drawer-toggle[aria-expanded=true]:hover::after{left:0;width:100%;transform:translateY(0)}}.duet-drawer-icon{position:relative;display:inline-flex;min-width:12px;margin-right:12px;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-drawer-icon{margin-right:8px}}.duet-drawer-label{line-height:1}.duet-drawer-caret{position:absolute;top:50%;right:20px;display:flex;width:10px;height:10px;margin-left:8px;line-height:normal;pointer-events:none;transition:300ms ease;transform:translateY(-50%);transform-origin:50% 50%}@media (min-width: 62em){.duet-drawer-caret{right:16px;width:7px;height:7px}}.duet-drawer-caret duet-icon{width:10px}.duet-drawer-toggle[aria-expanded=true] .duet-drawer-caret{transform:translateY(-50%) rotate(180deg)}.duet-drawer-badge{position:absolute;top:0;right:0;display:inline-block;width:6px;height:6px;background:rgb(247, 178, 40);border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-drawer-badge{background:rgb(247, 178, 40)}.duet-drawer-content{display:none;background-color:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229)}.duet-drawer-content:focus{outline:0}.duet-theme-turva .duet-drawer-content{background-color:rgb(255, 255, 255);border-color:rgb(212, 223, 229)}@media (min-width: 62em){.duet-drawer-content{position:absolute;top:100%;z-index:600;display:block;width:450px;max-height:420px;padding-left:0;overflow-y:auto;visibility:hidden;background-color:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:300ms ease;transform:scale(0.95) translateZ(0) translateY(-10px);transform-origin:50% 0}.duet-theme-turva .duet-drawer-content{background-color:rgb(255, 255, 255)}.duet-drawer-content.duet-drawer-left{right:0}.duet-drawer-content.duet-drawer-right{left:0}}.duet-drawer-content.duet-drawer-open{display:block}@media (min-width: 62em){.duet-drawer-content.duet-drawer-open{visibility:visible;opacity:1;transform:scale(1) translateZ(0) translateY(0)}}";
-const DuetNotificationDrawerStyle0 = duetNotificationDrawerCss;
 
 const ESC_KEY = 27;
 const DuetNotificationDrawer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.isOpen = false;
+        /**
+         * Icon to display to the left of the drawer button.
+         */
+        this.icon = "";
+        /**
+         * Label for the drawer button.
+         */
+        this.label = "Label";
+        /**
+         * The currently active language.
+         * Used to determine the message displayed when there are no notifications.
+         */
+        this.language = languageUtils.getLanguage();
+        /**
+         * Defaults for accessibleLabelNotifications
+         * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
+         */
+        this.accessibleLabelNotificationsDefaults = {
+            en: "No notifications",
+            fi: "Ei ilmoituksia",
+            sv: "Inga notifikationer",
+        };
+        /**
+         * Adds accessible label for tooltip that is shown for notifications
+         * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
+         */
+        this.accessibleLabelNotifications = languageUtils.getLocaleString(this.accessibleLabelNotificationsDefaults);
+        /**
+         * Show a badge that indicates something has changed.
+         */
+        this.badge = false;
+        /**
+         * Theme of the notification drawer.
+         */
+        this.theme = "";
+        /**
+         * Which direction should the drawer open in?
+         */
+        this.direction = "left";
         /**
          * Component event handling.
          */
@@ -87,20 +157,6 @@ const DuetNotificationDrawer = class {
         this.updateNotificationState = () => {
             this.hasNotifications = this.element.children.length > 0;
         };
-        this.isOpen = false;
-        this.hasNotifications = undefined;
-        this.icon = "";
-        this.label = "Label";
-        this.language = languageUtils.getLanguage();
-        this.accessibleLabelNotificationsDefaults = {
-            en: "No notifications",
-            fi: "Ei ilmoituksia",
-            sv: "Inga notifikationer",
-        };
-        this.accessibleLabelNotifications = languageUtils.getLocaleString(this.accessibleLabelNotificationsDefaults);
-        this.badge = false;
-        this.theme = "";
-        this.direction = "left";
     }
     /**
      * Component lifecycle events.
@@ -161,7 +217,7 @@ const DuetNotificationDrawer = class {
         return (index.h("div", { key: '659136cc65a195a1de4228bd580d2368d2244a86', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, index.h("button", { key: 'abe8757b0f4db9939465b4ab6011c8625b5baf76', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (index.h("div", { key: 'a99654516249d53e1a9fd81021998c2e461365a7', class: "duet-drawer-icon" }, index.h("duet-icon", { key: '76b8f2f443ab22637765dfef1db4000215ef5a19', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && index.h("div", { key: '6efbba81b7cf33402531b445e5e297d5e48a4fc6', class: "duet-drawer-badge" }))), index.h("span", { key: '5b9df974799ba860b7d2d964fc22c50d18aa0282', class: "duet-drawer-label" }, this.label), index.h("div", { key: 'ed02df2f85e017956770c841d1882b6a6ae45280', class: "duet-drawer-caret" }, index.h("duet-icon", { key: '646368ab0a187e896f1110e4015a05b3bad71a9d', margin: "none", size: "auto", icon: actionArrowDownSmall.actionArrowDownSmall.svg, color: "currentColor" }))), index.h("div", { key: '0e2cfc291004260d5f02350fd624396768c06b3b', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, index.h("button", { key: 'abe8757b0f4db9939465b4ab6011c8625b5baf76', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (index.h("div", { key: 'a99654516249d53e1a9fd81021998c2e461365a7', class: "duet-drawer-icon" }, index.h("duet-icon", { key: '76b8f2f443ab22637765dfef1db4000215ef5a19', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && index.h("div", { key: '6efbba81b7cf33402531b445e5e297d5e48a4fc6', class: "duet-drawer-badge" }))), index.h("span", { key: '5b9df974799ba860b7d2d964fc22c50d18aa0282', class: "duet-drawer-label" }, this.label), index.h("div", { key: 'ed02df2f85e017956770c841d1882b6a6ae45280', class: "duet-drawer-caret" }, index.h("duet-icon", { key: '646368ab0a187e896f1110e4015a05b3bad71a9d', margin: "none", size: "auto", icon: actionArrowDownSmall.arrowDownIcon.svg, color: "currentColor" }))), index.h("div", { key: '0e2cfc291004260d5f02350fd624396768c06b3b', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",
@@ -170,7 +226,7 @@ const DuetNotificationDrawer = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetNotificationDrawer.style = DuetNotificationDrawerStyle0;
+DuetNotificationDrawer.style = duetNotificationDrawerCss;
 
 exports.duet_notification = DuetNotification;
 exports.duet_notification_drawer = DuetNotificationDrawer;

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -3,19 +3,40 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CdC7dzZ-.js');
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+var slotUtils = require('./slot-utils-DgJchaT4.js');
+require('./string-utils-B35hEUBv.js');
 
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-const slotUtils = require('./slot-utils-acd4cc20.js');
-require('./string-utils-7b13c16e.js');
+var actionAdd;
+var hasRequiredActionAdd;
 
-var actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 24a.75.75 0 0 1-.75-.75v-10.5H.75a.75.75 0 0 1 0-1.5h10.5V.75a.75.75 0 0 1 1.5 0v10.5h10.5a.75.75 0 0 1 0 1.5h-10.5v10.5A.75.75 0 0 1 12 24z\"/></svg>"};
+function requireActionAdd () {
+	if (hasRequiredActionAdd) return actionAdd;
+	hasRequiredActionAdd = 1;
+	actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 24a.75.75 0 0 1-.75-.75v-10.5H.75a.75.75 0 0 1 0-1.5h10.5V.75a.75.75 0 0 1 1.5 0v10.5h10.5a.75.75 0 0 1 0 1.5h-10.5v10.5A.75.75 0 0 1 12 24z\"/></svg>"};
+	return actionAdd;
+}
+
+var actionAddExports = requireActionAdd();
+var addIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionAddExports);
+
+var actionSubtract;
+var hasRequiredActionSubtract;
+
+function requireActionSubtract () {
+	if (hasRequiredActionSubtract) return actionSubtract;
+	hasRequiredActionSubtract = 1;
+	actionSubtract={"title":"action-subtract","tags":"action subtract minus remove delete cancel","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 12.788a.75.75 0 0 1 0-1.5h22.5a.75.75 0 0 1 0 1.5z\"/></svg>"};
+	return actionSubtract;
+}
 
-var actionSubtract={"title":"action-subtract","tags":"action subtract minus remove delete cancel","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 12.788a.75.75 0 0 1 0-1.5h22.5a.75.75 0 0 1 0 1.5z\"/></svg>"};
+var actionSubtractExports = requireActionSubtract();
+var subtractIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionSubtractExports);
 
 /**
  *  function that takes a string value or number and looks for any character resembling a minus,
@@ -75,7 +96,6 @@ const roundTo = (val, multiple) => Math.round(val / multiple) * multiple;
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
 
 const duetNumberInputCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;line-height:1.25;text-align:left;vertical-align:bottom}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}.duet-number-container{position:relative;width:100%}.duet-number-buttons{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;width:96px;height:calc(100% - 2px)}.duet-number-buttons .duet-number-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50%;height:100%;text-align:center;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none}.duet-number-buttons .duet-number-button[aria-disabled=true],.duet-number-buttons .duet-number-button:disabled{pointer-events:none}.duet-number-buttons .duet-number-button[aria-disabled=true] duet-icon,.duet-number-buttons .duet-number-button:disabled duet-icon{opacity:0.4}.duet-number-buttons .duet-number-button:active duet-icon{transform:translateY(1px)}.duet-number-buttons .duet-number-button:focus{outline:0}:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus{z-index:2;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus{box-shadow:0 0 0 2px #171c3a !important}.duet-number-buttons .duet-number-button:first-of-type{border-left:1px solid rgb(181, 198, 208)}.duet-number-buttons .duet-number-button:first-of-type::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%)}.duet-number-buttons .duet-number-button:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.duet-number-buttons .duet-number-button:last-of-type::before{position:absolute;top:20%;left:0;width:1px;height:60%;content:\"\";background:rgb(212, 223, 229)}:host(.duet-theme-turva) .duet-number-buttons .duet-number-button:first-of-type::before{background:linear-gradient(to left, rgba(199, 202, 207, 0.2) 0%, rgba(199, 202, 207, 0.2) 1px, rgba(199, 202, 207, 0.1) 1px, rgba(199, 202, 207, 0) 100%)}:host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before{background:rgb(222, 224, 228)}";
-const DuetNumberInputStyle0 = duetNumberInputCss;
 
 const DuetNumberInput = class {
     constructor(hostRef) {
@@ -86,6 +106,148 @@ const DuetNumberInput = class {
         this.duetFocus = index.createEvent(this, "duetFocus", 7);
         this.inputId = createId.createID("DuetInput");
         this.proxyId = createId.createID("DuetInput");
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = languageUtils.getLanguage();
+        /**
+         * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands
+         * separators would break keyboard input.
+         */
+        this.locale = languageUtils.getLocale(this.language).locale;
+        /**
+         * Unit for the number input.
+         */
+        this.unit = languageUtils.getLocale(this.language).money;
+        /**
+         * Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Defaults for accessibleLive
+         * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+         */
+        this.accessibleLiveDefaults = {
+            fi: "{current} euroa valittuna",
+            en: "{current} euros selected",
+            sv: "{current} euro valt",
+        };
+        /**
+         * Format of message used to announce current amount when switching between amounts.
+         * The string {current} is replaced with the current amount.
+         * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+         */
+        this.accessibleLive = languageUtils.getLocaleString(this.accessibleLiveDefaults, this.language);
+        /**
+         * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead.
+         */
+        this.accessibleLiveEnabled = true;
+        /**
+         * Defaults for accessibleAdd
+         * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+         */
+        this.accessibleAddDefaults = {
+            fi: "Lisää summaan",
+            en: "Add to the amount",
+            sv: "Lägg till beloppet",
+        };
+        /**
+         * Accessible label for the add button that is read for screen reader users.
+         * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+         */
+        this.accessibleAdd = languageUtils.getLocaleString(this.accessibleAddDefaults, this.language);
+        /**
+         * Defaults for accessibleSubtract
+         * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+         */
+        this.accessibleSubtractDefaults = {
+            fi: "Vähennä summasta",
+            en: "Subtract from the amount",
+            sv: "Dra från beloppet",
+        };
+        /**
+         * Accessible label for the subtract button that is read for screen reader users.
+         * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+         */
+        this.accessibleSubtract = languageUtils.getLocaleString(this.accessibleSubtractDefaults, this.language);
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Minimum value.
+         */
+        this.min = 0;
+        /**
+         * Defaults for Label
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.labelDefaults = {
+            fi: "Nimilappu",
+            en: "Label",
+            sv: "Etikett",
+        };
+        /**
+         * Label for the number input.
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Maximum value.
+         */
+        this.max = 1000000;
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * Step amount.
+         */
+        this.step = 5000;
+        /**
+         * Controls whether or not value gets rounded to the nearest
+         * multiple of a step on blur. Set to "false" to disable this behaviour.
+         */
+        this.rounding = true;
+        /**
+         * Makes the number input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is required for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
         /**
          * Component event handling.
          */
@@ -249,58 +411,6 @@ const DuetNumberInput = class {
             this.value = this.localizeValue(newValue);
             this.emitChange(ev);
         };
-        this.language = languageUtils.getLanguage();
-        this.locale = languageUtils.getLocale(this.language).locale;
-        this.unit = languageUtils.getLocale(this.language).money;
-        this.focusedValue = undefined;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleLiveDefaults = {
-            fi: "{current} euroa valittuna",
-            en: "{current} euros selected",
-            sv: "{current} euro valt",
-        };
-        this.accessibleLive = languageUtils.getLocaleString(this.accessibleLiveDefaults, this.language);
-        this.accessibleLiveEnabled = true;
-        this.accessibleAddDefaults = {
-            fi: "Lisää summaan",
-            en: "Add to the amount",
-            sv: "Lägg till beloppet",
-        };
-        this.accessibleAdd = languageUtils.getLocaleString(this.accessibleAddDefaults, this.language);
-        this.accessibleSubtractDefaults = {
-            fi: "Vähennä summasta",
-            en: "Subtract from the amount",
-            sv: "Dra från beloppet",
-        };
-        this.accessibleSubtract = languageUtils.getLocaleString(this.accessibleSubtractDefaults, this.language);
-        this.theme = "";
-        this.margin = "auto";
-        this.expand = false;
-        this.identifier = undefined;
-        this.min = 0;
-        this.labelDefaults = {
-            fi: "Nimilappu",
-            en: "Label",
-            sv: "Etikett",
-        };
-        this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = false;
-        this.max = 1000000;
-        this.name = undefined;
-        this.error = "";
-        this.tooltip = "";
-        this.step = 5000;
-        this.rounding = true;
-        this.role = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.value = undefined;
     }
     /**
      * Component lifecycle events.
@@ -369,10 +479,10 @@ const DuetNumberInput = class {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, index.h("div", { key: 'dff60647793af3de902477ed0ea4cfebe2a0b060', class: "duet-number-container" }, index.h("duet-input", { key: '55a832b70fd619b16560dcc8de2a11da3ae90344', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, index.h("slot", { key: '1e4b7cc87d46de0233457c6e087217b27fb2a6df', name: "tooltip" }), index.h("div", { key: '5a2660b2592fd4a96172bf4ce53d5d810e9479c6', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, index.h("button", { key: 'dddc2edb43610eed98a1db9de1ac006d6f721099', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, index.h("duet-visually-hidden", { key: 'e29c3ce840c8e2d776ed9430ed84f1a0ead9a5a3' }, this.accessibleSubtract, " ", this.step), index.h("duet-icon", { key: 'e5eb7418c9f6711b21e6550bad87f017d97cff6e', icon: actionSubtract.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), index.h("button", { key: '688035f8fcb3f56a36d2d7b13a9d494388eafd39', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, index.h("duet-visually-hidden", { key: '8779e5d09e06ff7f63ff715d45bd72c513c1c1dc' }, this.accessibleAdd, " ", this.step), index.h("duet-icon", { key: 'f6548c254afa31a6346042f11113aad09baefce3', icon: actionAdd.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (index.h("duet-visually-hidden", { key: '4e272274bdb8a1c9cc068e76e846b49647200fd6', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, index.h("div", { key: 'dff60647793af3de902477ed0ea4cfebe2a0b060', class: "duet-number-container" }, index.h("duet-input", { key: '55a832b70fd619b16560dcc8de2a11da3ae90344', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, index.h("slot", { key: '1e4b7cc87d46de0233457c6e087217b27fb2a6df', name: "tooltip" }), index.h("div", { key: '5a2660b2592fd4a96172bf4ce53d5d810e9479c6', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, index.h("button", { key: 'dddc2edb43610eed98a1db9de1ac006d6f721099', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, index.h("duet-visually-hidden", { key: 'e29c3ce840c8e2d776ed9430ed84f1a0ead9a5a3' }, this.accessibleSubtract, " ", this.step), index.h("duet-icon", { key: 'e5eb7418c9f6711b21e6550bad87f017d97cff6e', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), index.h("button", { key: '688035f8fcb3f56a36d2d7b13a9d494388eafd39', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, index.h("duet-visually-hidden", { key: '8779e5d09e06ff7f63ff715d45bd72c513c1c1dc' }, this.accessibleAdd, " ", this.step), index.h("duet-icon", { key: 'f6548c254afa31a6346042f11113aad09baefce3', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (index.h("duet-visually-hidden", { key: '4e272274bdb8a1c9cc068e76e846b49647200fd6', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     get element() { return index.getElement(this); }
 };
-DuetNumberInput.style = DuetNumberInputStyle0;
+DuetNumberInput.style = duetNumberInputCss;
 
 exports.duet_number_input = DuetNumberInput;

package/lib/cjs/duet-overlay.cjs.entry.js

@@ -3,31 +3,52 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
 
 const duetOverlayCss = ".duet-overlay{position:fixed;top:0;left:0;display:block;width:100%;height:100%;visibility:visible;background:rgb(8, 42, 77);opacity:0.3}.duet-overlay.duet-theme-turva{background:rgb(23, 28, 58)}.duet-overlay.keep-stacking-context{position:absolute;top:unset;left:unset;z-index:unset !important}.duet-overlay.modal-overlay{z-index:-1}.duet-overlay.hidden{visibility:hidden;opacity:0}.duet-overlay.dark{opacity:0.85}.duet-overlay.white{background:rgb(255, 255, 255);opacity:0.9}.duet-overlay.white.duet-theme-turva{background:rgb(255, 255, 255)}.duet-overlay.display-x-small{display:none}@media (max-width: 35.9375em){.duet-overlay.display-x-small{display:block}}.duet-overlay.display-x-small.not{display:block}@media (max-width: 35.9375em){.duet-overlay.display-x-small.not{display:none}}.duet-overlay.display-small{display:none}@media (min-width: 36em){.duet-overlay.display-small{display:block}}.duet-overlay.display-small.not{display:block}@media (min-width: 36em){.duet-overlay.display-small.not{display:none}}.duet-overlay.display-medium{display:none}@media (min-width: 48em){.duet-overlay.display-medium{display:block}}.duet-overlay.display-medium.not{display:block}@media (min-width: 48em){.duet-overlay.display-medium.not{display:none}}.duet-overlay.display-large{display:none}@media (min-width: 62em){.duet-overlay.display-large{display:block}}.duet-overlay.display-large.not{display:block}@media (min-width: 62em){.duet-overlay.display-large.not{display:none}}.duet-overlay.transition-slowly{transition:600ms ease}.duet-overlay.transition-quickly{transition:300ms ease}";
-const DuetOverlayStyle0 = duetOverlayCss;
 
 const DuetOverlay = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.getDisplayBreakpoint = () => {
-            if (this.displayDevice.startsWith("not")) {
-                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
-            }
-            return this.displayDevice;
-        };
+        /**
+         * Open
+         */
         this.visible = true;
+        /**
+         * Keep stacking context
+         */
         this.keepStackingContext = false;
+        /**
+         * Modal overlay
+         */
         this.modalOverlay = false;
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Mode
+         */
         this.displayDevice = "all";
+        /**
+         * Transition
+         */
         this.transition = "slowly";
+        /**
+         * Z-index
+         */
         this.zIndex = "400";
+        /**
+         * Variation, dark and white can be used when we want to have text on the overlay
+         */
         this.variation = "default";
+        this.getDisplayBreakpoint = () => {
+            if (this.displayDevice.startsWith("not")) {
+                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
+            }
+            return this.displayDevice;
+        };
     }
     /**
      * Component lifecycle events.
@@ -55,6 +76,6 @@ const DuetOverlay = class {
             } })));
     }
 };
-DuetOverlay.style = DuetOverlayStyle0;
+DuetOverlay.style = duetOverlayCss;
 
 exports.duet_overlay = DuetOverlay;