@duetds/components 6.2.4 → 6.2.6

package/lib/dist-custom-elements/duet-number-input.js

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { j as isArrowRightKey, e as isArrowUpKey, f as isArrowDownKey, h as isArrowLeftKey, k as isBackspaceKey } from './p-d8549efe.js';
 import { a as getLanguage, b as getLocale, g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$7 } from './p-c4165359.js';
-import { d as defineCustomElement$6 } from './p-908c1151.js';
-import { d as defineCustomElement$5 } from './p-3fa8edce.js';
-import { d as defineCustomElement$4 } from './p-f51d88cc.js';
-import { d as defineCustomElement$3 } from './p-8c0cf877.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$7 } from './p-4905133d.js';
+import { d as defineCustomElement$6 } from './p-91098fd5.js';
+import { d as defineCustomElement$5 } from './p-9d08c707.js';
+import { d as defineCustomElement$4 } from './p-f4d2face.js';
+import { d as defineCustomElement$3 } from './p-31b3a82e.js';
+import { d as defineCustomElement$2 } from './p-2d3fc462.js';
 
 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>"};
 
@@ -102,147 +102,6 @@ const DuetNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     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.
      */
@@ -382,6 +241,58 @@ const DuetNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       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.

package/lib/dist-custom-elements/duet-pagination.js

@@ -1,18 +1,18 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { d as debounce } from './p-0b3f675e.js';
 import { l as isArrowKey, m as isNumber, h as isArrowLeftKey, e as isArrowUpKey, j as isArrowRightKey, f as isArrowDownKey } from './p-d8549efe.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$7 } from './p-f674e164.js';
-import { d as defineCustomElement$6 } from './p-b89983b2.js';
-import { d as defineCustomElement$5 } from './p-b4b809ff.js';
-import { d as defineCustomElement$4 } from './p-908c1151.js';
-import { d as defineCustomElement$3 } from './p-862c60cc.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$7 } from './p-076044f7.js';
+import { d as defineCustomElement$6 } from './p-a5f24f49.js';
+import { d as defineCustomElement$5 } from './p-11621a52.js';
+import { d as defineCustomElement$4 } from './p-91098fd5.js';
+import { d as defineCustomElement$3 } from './p-7b1b2eef.js';
+import { d as defineCustomElement$2 } from './p-2d3fc462.js';
 
 const shouldDisplayNavigation = (visibleItems, total, take) => {
   if (visibleItems * 2 > total / take) {
@@ -30,48 +30,61 @@ const DuetPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.__attachShadow();
     this.duetPageChange = createEvent(this, "duetPageChange", 3);
     this.listId = createID("duet-pagination-list");
-    this.numbersStore = "";
     /**
-     * State() variables
-     * @internal
+     * Private methods.
      */
+    // called from the watcher and used to make sure any changed to current also updates the internal section index
+    this.actionChain = async (after, before) => {
+      if (after === 0) {
+        this.current = 1;
+      }
+      else if (before !== after) {
+        const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
+        if (calculatedSectionIndex !== this.internalSectionIndex) {
+          this.internalSectionIndex = calculatedSectionIndex;
+          await this.setFocus();
+        }
+      }
+      return true;
+    };
+    //helper to emit relevant page events
+    this.emitPageEvent = debounce((ev, passedPage) => {
+      const page = Number(passedPage || this.current);
+      this.duetPageChange.emit({
+        component: "duet-pagination",
+        from: page * this.take,
+        to: page * this.take + this.take,
+        current: page,
+        take: this.take,
+        type: "page",
+        originalEvent: ev,
+      });
+    }, 100);
+    // this will return the entered number, or the current page if the user presses enter
+    this.getEnteredNumber = debounce(ev => {
+      this.emitPageEvent(ev, this.numbersStore);
+      this.current = Number(this.numbersStore);
+      this.numbersStore = "";
+      this.duetPageChange.emit({
+        component: "duet-pagination",
+        from: this.current * this.take,
+        to: this.current * this.take + this.take,
+        current: this.current,
+        take: this.take,
+        type: "jump",
+        originalEvent: ev,
+      });
+    }, 500);
+    this.numbersStore = "";
     this.totalPages = 10;
-    /**
-     * State() variables
-     * @internal
-     */
     this.internalSectionIndex = 0;
-    /**
-     * Theme of the pagination.
-     */
     this.theme = "";
-    /**
-     * Characters to use for the jump buttons.
-     */
     this.jumpString = "...";
-    /**
-     * Variation of the paginator (compact and default supported)
-     */
     this.variation = "default";
-    /**
-     * Described By id
-     */
     this.accessibleDescribedBy = undefined;
-    /**
-     * 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;
-    /**
-     * Default pagination labels
-     */
     this.accessibleLabelsDefaults = {
       en: {
         next_page: "Next page",
@@ -110,75 +123,12 @@ const DuetPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
       },
     };
-    /**
-     * Default pagination labels
-     */
     this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
-    /**
-     * The size of the take, when paginating.
-     */
     this.take = 5;
-    /**
-     * Amount of visible page numbers to show
-     */
     this.visibleItems = 5;
-    /**
-     * The total size of the paginating data
-     */
     this.total = 1000;
-    /**
-     * Used to indicate which dom element with ID this element controls
-     */
     this.ariaControls = "";
-    /**
-     * The current page
-     */
     this.current = 1;
-    /**
-     * Private methods.
-     */
-    // called from the watcher and used to make sure any changed to current also updates the internal section index
-    this.actionChain = async (after, before) => {
-      if (after === 0) {
-        this.current = 1;
-      }
-      else if (before !== after) {
-        const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
-        if (calculatedSectionIndex !== this.internalSectionIndex) {
-          this.internalSectionIndex = calculatedSectionIndex;
-          await this.setFocus();
-        }
-      }
-      return true;
-    };
-    //helper to emit relevant page events
-    this.emitPageEvent = debounce((ev, passedPage) => {
-      const page = Number(passedPage || this.current);
-      this.duetPageChange.emit({
-        component: "duet-pagination",
-        from: page * this.take,
-        to: page * this.take + this.take,
-        current: page,
-        take: this.take,
-        type: "page",
-        originalEvent: ev,
-      });
-    }, 100);
-    // this will return the entered number, or the current page if the user presses enter
-    this.getEnteredNumber = debounce(ev => {
-      this.emitPageEvent(ev, this.numbersStore);
-      this.current = Number(this.numbersStore);
-      this.numbersStore = "";
-      this.duetPageChange.emit({
-        component: "duet-pagination",
-        from: this.current * this.take,
-        to: this.current * this.take + this.take,
-        current: this.current,
-        take: this.take,
-        type: "jump",
-        originalEvent: ev,
-      });
-    }, 500);
   }
   watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
     this.calculatePageTake();

package/lib/dist-custom-elements/duet-paragraph.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetParagraph$1, d as defineCustomElement$1 } from './p-2a509b17.js';
+import { D as DuetParagraph$1, d as defineCustomElement$1 } from './p-becb3aa3.js';
 
 const DuetParagraph = DuetParagraph$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-progress.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetProgress$1, d as defineCustomElement$1 } from './p-1302f6e8.js';
+import { D as DuetProgress$1, d as defineCustomElement$1 } from './p-52471a7a.js';
 
 const DuetProgress = DuetProgress$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-radio-group.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
-import { d as defineCustomElement$6 } from './p-c4165359.js';
-import { d as defineCustomElement$5 } from './p-1fef1f90.js';
-import { d as defineCustomElement$4 } from './p-908c1151.js';
-import { d as defineCustomElement$3 } from './p-8c0cf877.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$6 } from './p-4905133d.js';
+import { d as defineCustomElement$5 } from './p-cc5bc0c6.js';
+import { d as defineCustomElement$4 } from './p-91098fd5.js';
+import { d as defineCustomElement$3 } from './p-31b3a82e.js';
+import { d as defineCustomElement$2 } from './p-2d3fc462.js';
 
 const duetRadioGroupCss = "*.sc-duet-radio-group,*.sc-duet-radio-group::after,*.sc-duet-radio-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-radio-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-radio-group-h .duet-radio-group.sc-duet-radio-group{display:block}@media (min-width: 48em){.horizontal.sc-duet-radio-group-h .duet-radio-group.sc-duet-radio-group{display:flex}}.horizontal.sc-duet-radio-group-h .duet-radio-group.duet-no-stacking.sc-duet-radio-group{display:flex}.deut-radio-group.sc-duet-radio-group{width:100%}";
 
@@ -16,49 +16,6 @@ const DuetRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Direction of the radio group.
-     */
-    this.direction = "vertical";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Theme of the radio group.
-     */
-    this.theme = "";
-    /**
-     * Display radio group in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Tooltip to display next to the label of the radio group.
-     */
-    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";
-    /**
-     * Legend displayed for the radio buttons in this group.
-     */
-    this.label = "Label";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Additional caption to show inside the label of the radio group.
-     */
-    this.caption = "";
-    /**
-     * Enable or disable the automatic responsive behaviour of the radio group
-     * component when horizontal setting is used. Setting this option to "true"
-     * makes sure that contents are stacked vertically on mobile.
-     */
-    this.responsive = false;
     /**
      * Component event handling.
      */
@@ -71,6 +28,19 @@ const DuetRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       // this group is a sub-group of another choice group.
       ev.cancelBubble = true;
     };
+    this.direction = "vertical";
+    this.margin = "auto";
+    this.theme = "";
+    this.error = "";
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
+    this.name = undefined;
+    this.label = "Label";
+    this.labelHidden = false;
+    this.caption = "";
+    this.responsive = false;
+    this.value = undefined;
+    this.disabled = undefined;
   }
   /**
    * Component lifecycle events.

package/lib/dist-custom-elements/duet-radio.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 
@@ -18,46 +18,6 @@ const DuetRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
      * Own Properties.
      */
     this.radioId = createID("DuetRadio");
-    /**
-     * Aria 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;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Theme of the radio.
-     */
-    this.theme = "";
-    /**
-     * Makes the radio component disabled. This prevents users from being able to
-     * interact with the radio, 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;
-    /**
-     * Stops the components from emitting events
-     */
-    this.blockEvents = false;
-    /**
-     * Label for the radio.
-     */
-    this.label = "label";
     /**
      * Component event handling.
      */
@@ -91,6 +51,28 @@ const DuetRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         component: "duet-radio",
       });
     };
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.accessibleIndex = undefined;
+    this.margin = "auto";
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.theme = "";
+    this.disabled = false;
+    this.required = false;
+    this.blockEvents = false;
+    this.identifier = undefined;
+    this.label = "label";
+    this.name = undefined;
+    this.role = undefined;
+    this.groupDisabled = undefined;
+    this.groupDirection = undefined;
+    this.groupResponsive = undefined;
+    this.checked = undefined;
+    this.value = undefined;
   }
   /**
    * Component lifecycle events.