@duetds/components 6.2.4 → 6.2.6

package/lib/esm/duet-multiselect.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { f as isEscapeKey, o as isTabKey, n as isEnterKey, d as isArrowLeftKey, b as isArrowUpKey, a as isArrowRightKey, c as isArrowDownKey } from './keyboard-utils-88ea1007.js';
@@ -30,64 +30,6 @@ const DuetMultiselect = class {
       fi: "valittu",
       sv: "vald",
     };
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.processedItems = [];
-    this.checkboxesVisible = false;
-    this.activeDescendant = "";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Display the select in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Value of multiselect
-     */
-    this.value = [];
-    /**
-     * Theme of the select.
-     */
-    this.theme = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Adds a unique identifier for the select.
-     */
-    this.identifier = createID("DuetMultiselect");
-    /**
-     * Hint text to display.
-     */
-    this.placeholder = "";
-    /**
-     * Makes the select component disabled. This prevents users from being able
-     * to interact with the select, and conveys its inactive state to assistive
-     * technologies.
-     */
-    this.disabled = false;
-    /**
-     * Label for the select.
-     */
-    this.label = "label";
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
     /**
      * Component event handling.
      */
@@ -159,6 +101,23 @@ const DuetMultiselect = class {
     this.getOptionIdentifier = (key) => {
       return `${this.identifier}-option-${key}`;
     };
+    this.processedItems = [];
+    this.checkboxesVisible = false;
+    this.activeDescendant = "";
+    this.margin = "auto";
+    this.error = "";
+    this.expand = false;
+    this.value = [];
+    this.theme = "";
+    this.labelHidden = false;
+    this.identifier = createID("DuetMultiselect");
+    this.placeholder = "";
+    this.caption = undefined;
+    this.items = undefined;
+    this.disabled = false;
+    this.label = "label";
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   handleFocus(e) {
     const isClickOutside = e.composedPath().every(node => node !== this.element);

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

@@ -1,48 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.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%}";
+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%}nav{max-width:1440px;margin:0 auto}";
 
 const DuetMenuBar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Theme.
-     */
     this.theme = "";
-    this.getToolbarDropdowns = () => this.element.querySelectorAll("duet-toolbar-dropdown");
-    this.getMenuBarMenus = () => this.element.querySelectorAll("duet-menu-bar-menu");
-    this.getActiveMenu = () => this.element.querySelector("duet-menu-bar-menu[active]");
-    this.getActiveTool = () => this.element.querySelector("duet-toolbar-link[active],duet-toolbar-dropdown[active]");
-    this.getMenuBarMenuDropdowns = () => this.element.querySelectorAll("duet-menu-bar-menu-dropdown");
-    this.getMenuBarDropdowns = () => this.element.querySelectorAll("duet-menu-bar-dropdown");
-    this.toggleActiveMenu = (active) => {
-      const activeMenu = this.getActiveMenu();
-      if (activeMenu) {
-        activeMenu.setAttribute("active", active ? "true" : "false");
-      }
-    };
-    this.toggleActiveTool = (active) => {
-      const activeTool = this.getActiveTool();
-      if (activeTool) {
-        activeTool.setAttribute("active", active ? "true" : "false");
-      }
-    };
-    this.close = (elementGetter, elementToKeepOpen) => {
-      elementGetter().forEach(element => {
-        if (elementToKeepOpen) {
-          if (element !== elementToKeepOpen) {
-            element.setAttribute("open", "false");
-          }
-        }
-        else {
-          element.setAttribute("open", "false");
-        }
-      });
-    };
   }
   /**
    * Component lifecycle events.
@@ -50,54 +17,6 @@ const DuetMenuBar = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  handleToolbarDropdownEvent(e) {
-    if (e.detail.data.element) {
-      if (e.detail.data.open) {
-        this.close(this.getMenuBarMenus);
-        this.close(this.getToolbarDropdowns, e.detail.data.element);
-        this.close(this.getMenuBarMenuDropdowns);
-        this.close(this.getMenuBarDropdowns);
-      }
-      this.toggleActiveMenu(true);
-      this.toggleActiveTool(!e.detail.data.open);
-    }
-  }
-  handleMenuEvent(e) {
-    if (e.detail.data.element) {
-      if (e.detail.data.open) {
-        this.close(this.getMenuBarMenus, e.detail.data.element);
-        this.close(this.getToolbarDropdowns);
-        this.close(this.getMenuBarMenuDropdowns);
-        this.close(this.getMenuBarDropdowns);
-      }
-      this.toggleActiveMenu(!e.detail.data.open);
-      this.toggleActiveTool(true);
-    }
-  }
-  handleMenuDropdownEvent(e) {
-    if (e.detail.data.element && e.detail.data.open) {
-      this.close(this.getMenuBarMenuDropdowns, e.detail.data.element);
-      this.close(this.getMenuBarDropdowns);
-    }
-  }
-  handleDropdownEvent(e) {
-    if (e.detail.data.element && e.detail.data.open) {
-      this.close(this.getMenuBarDropdowns, e.detail.data.element);
-      this.close(this.getToolbarDropdowns);
-      this.close(this.getMenuBarMenus);
-      this.close(this.getMenuBarMenuDropdowns);
-    }
-    this.toggleActiveMenu(!e.detail.data.open);
-    this.toggleActiveTool(true);
-  }
-  handleFocus() {
-    this.toggleActiveMenu(true);
-    this.toggleActiveTool(true);
-    this.close(this.getToolbarDropdowns);
-    this.close(this.getMenuBarMenus);
-    this.close(this.getMenuBarMenuDropdowns);
-    this.close(this.getMenuBarDropdowns);
-  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, h, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { a as getLanguage, g as getLocaleString } from './language-utils-bf701d37.js';
 import { a as actionArrowDownSmall } from './action-arrow-down-small-82273dc8.js';
@@ -12,46 +12,17 @@ const duetNotificationCss = "*,*::after,*::before{box-sizing:border-box;padding:
 const DuetNotification = class {
   constructor(hostRef) {
     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 = 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 = 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 = "";
   }
   /**
@@ -85,50 +56,6 @@ const ESC_KEY = 27;
 const DuetNotificationDrawer = class {
   constructor(hostRef) {
     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 = 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 = 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.
      */
@@ -145,6 +72,20 @@ 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 = getLanguage();
+    this.accessibleLabelNotificationsDefaults = {
+      en: "No notifications",
+      fi: "Ei ilmoituksia",
+      sv: "Inga notifikationer",
+    };
+    this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
+    this.badge = false;
+    this.theme = "";
+    this.direction = "left";
   }
   /**
    * Component lifecycle events.

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { a as isArrowRightKey, b as isArrowUpKey, c as isArrowDownKey, d as isArrowLeftKey, e as isBackspaceKey } from './keyboard-utils-88ea1007.js';
@@ -96,147 +96,6 @@ const DuetNumberInput = class {
     this.duetBlur = createEvent(this, "duetBlur", 7);
     this.duetFocus = createEvent(this, "duetFocus", 7);
     this.inputId = 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 = getLanguage();
-    /**
-     * Locale used to format the entered value.
-     */
-    this.locale = getLocale(this.language).locale;
-    /**
-     * Unit for the number input.
-     */
-    this.unit = 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 = 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 = 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 = 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 = 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.
      */
@@ -376,6 +235,58 @@ const DuetNumberInput = class {
       this.value = this.localizeValue(newValue);
       this.emitChange(ev);
     };
+    this.language = getLanguage();
+    this.locale = getLocale(this.language).locale;
+    this.unit = 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 = 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 = getLocaleString(this.accessibleAddDefaults, this.language);
+    this.accessibleSubtractDefaults = {
+      fi: "Vähennä summasta",
+      en: "Subtract from the amount",
+      sv: "Dra från beloppet",
+    };
+    this.accessibleSubtract = 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 = 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.