@duetds/components 6.2.4 → 6.2.6

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, 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 { d as debounce } from './js-utils-fa98b8cd.js';
@@ -23,48 +23,61 @@ const DuetPagination = class {
     registerInstance(this, hostRef);
     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",
@@ -103,75 +116,12 @@ const DuetPagination = class {
         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();
@@ -330,28 +280,16 @@ const DuetRangeStepper = class {
     this.duetRangeStepUpdate = createEvent(this, "duetRangeStepUpdate", 7);
     this.leftBn = createID("duetRangeStepper-left");
     this.rightBn = createID("duetRangeStepper-right");
-    /**
-     * Theme of the component.
-     */
+    this.handleClick = (e, direction) => {
+      e.preventDefault();
+      this.stepIndex += direction;
+      this.clampStepIndex();
+      this.handleStepClick(e);
+    };
     this.theme = "";
-    /**
-     * Start value
-     * @default 1
-     */
     this.stepIndex = 1;
-    /**
-     * How big is the step
-     * @default 50
-     */
     this.stepSize = 50;
-    /**
-     * Total of
-     * @default undefined
-     */
     this.total = 1000;
-    /**
-     * Default range stepper labels
-     */
     this.ariaLabelsDefaults = {
       en: {
         next_increment: "Next range increment",
@@ -369,20 +307,8 @@ const DuetRangeStepper = class {
         x_of_y: "{0}–{1} av {2}",
       },
     };
-    /**
-     * Default pagination labels
-     */
     this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
-    /**
-     * Used to indicate which dom element with ID this element controls
-     */
     this.ariaControls = "";
-    this.handleClick = (e, direction) => {
-      e.preventDefault();
-      this.stepIndex += direction;
-      this.clampStepIndex();
-      this.handleStepClick(e);
-    };
   }
   watchStepIndexStateHandler(newValue) {
     if (this.element.shadowRoot.childElementCount > 0) {

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

@@ -1,7 +1,7 @@
 /*!
  * 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';
 import { c as createID } from './create-id-981107da.js';
 import { g as getLocaleString } from './language-utils-bf701d37.js';
@@ -17,42 +17,20 @@ const DuetProgress = class {
      */
     this.progressId = createID("DuetProgress");
     this.progressLabelId = createID("DuetProgressLabel");
-    /**
-     * Aria Details of the component
-     */
+    this.accessibleDescribedBy = undefined;
     this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
     this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Defaults for accessibleLabel
-     */
+    this.accessibleLabel = undefined;
     this.accessibleLabelUploadDefaults = {
       fi: ["lähetys valmis", "lähetys käynnissä"],
       sv: ["Uppladdningen är klar", "Uppladdning pågår"],
       en: ["upload completed", "upload in progress"],
     };
-    /**
-     * Adds accessible label for upload in progress and upload complete states
-     * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
-     */
     this.accessibleLabelUpload = getLocaleString(this.accessibleLabelUploadDefaults);
-    /**
-     * Progress of the bar, a value from 0-100
-     */
     this.progress = 0;
-    /**
-     * Height of progressbar
-     */
+    this.caption = undefined;
     this.height = "10px";
-    /**
-     * Theme of the input.
-     */
     this.theme = "";
   }
   /**

package/lib/esm/duet-radio_2.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 findCheckedOption, w as watchForOptions } from './watch-options-dd55bce8.js';
@@ -18,46 +18,6 @@ const DuetRadio = class {
      * 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 = class {
         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.
@@ -129,49 +111,6 @@ const duetRadioGroupCss = "*.sc-duet-radio-group,*.sc-duet-radio-group::after,*.
 const DuetRadioGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * 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.
      */
@@ -184,6 +123,19 @@ const DuetRadioGroup = class {
       // 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/esm/duet-range-slider.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 colorPrimaryTurva, j as colorGrayTurva, k as colorPrimary, l as colorGray } from './tokens.module-d3321092.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
@@ -28,67 +28,6 @@ const DuetRangeSlider = class {
      * Own Properties
      */
     this.rangeId = createID("DuetRange");
-    /**
-     * 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;
-    /**
-     * Set whether the input is required or not. Please note that this is necessary 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;
-    /**
-     * Makes the 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;
-    /**
-     * Minimum value.
-     */
-    this.min = 0;
-    /**
-     * Label for the range slider.
-     */
-    this.label = "label";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Unit for the range slider.
-     */
-    this.unit = "";
-    /**
-     * Maximum value.
-     */
-    this.max = 100;
-    /**
-     * Step amount.
-     */
-    this.step = 1;
-    /**
-     * Locale used to format the entered value.
-     */
-    this.locale = "fi-FI";
-    /**
-     * Value of the input.
-     */
-    this.value = 0;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the duetChange
-     * event after each keystroke.
-     */
-    this.debounce = 0;
     /**
      * Component event handling.
      */
@@ -117,6 +56,26 @@ const DuetRangeSlider = class {
         });
       }, this.debounce);
     };
+    this.theme = "";
+    this.margin = "auto";
+    this.expand = false;
+    this.identifier = undefined;
+    this.name = undefined;
+    this.required = false;
+    this.disabled = false;
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.min = 0;
+    this.label = "label";
+    this.labelHidden = false;
+    this.unit = "";
+    this.max = 100;
+    this.step = 1;
+    this.locale = "fi-FI";
+    this.value = 0;
+    this.debounce = 0;
   }
   /**
    * Component lifecycle events.

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-adbabdb3.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { g as getLocaleString, a as getLanguage } from './language-utils-bf701d37.js';
 import { c as createID } from './create-id-981107da.js';
@@ -19,10 +19,6 @@ const DuetScrollable = class {
     this.currentIndex = 0;
     this.tabListElement = undefined;
     this.tabListClass = "duet-scrollable-list";
-    this.tablistAtStart = true;
-    this.isTabContentSmallerThanWrapper = false;
-    this.tablistAtEnd = false;
-    this.childrenData = {};
     this.resizeObserver = new ResizeObserver(entries => {
       var _a, _b, _c, _d;
       // otherwise, something is wrong, expecting 1 element only
@@ -33,19 +29,12 @@ const DuetScrollable = class {
         this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
       }
     });
-    /**
-     * Theme of duet-tab-scrollable. When used this will override the color setting and
-     * use "primary" or "primary-turva" as the color depending on which theme
-     * is chosen.
-     */
+    this.tablistAtStart = true;
+    this.isTabContentSmallerThanWrapper = false;
+    this.tablistAtEnd = false;
+    this.childrenData = {};
     this.theme = "";
-    /**
-     * Optional identifier to add to buttons in the tab group
-     */
     this.identifier = "";
-    /**
-     * Selected element
-     */
     this.selected = 0;
   }
   watchPropHandler(newValue) {
@@ -170,15 +159,9 @@ const duetTabCss = ".sc-duet-tab-h{box-sizing:border-box;padding:0;margin:0;back
 const DuetTab = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Defaults for AccessibleLabel
-     * @default null
-     */
+    this.label = undefined;
+    this.selected = undefined;
     this.accessibleDescriptionDefault = null;
-    /**
-     * String for AccessibleLabel
-     * @default null
-     */
     this.accessibleDescription = this.accessibleDescriptionDefault
       ? getLocaleString(this.accessibleDescriptionDefault)
       : null;
@@ -203,70 +186,6 @@ const DuetTabGroup = class {
     this.duetChange = createEvent(this, "duetChange", 3);
     this.duetTabChange = createEvent(this, "duetTabChange", 7);
     this.id = createID("DuetTabGroup");
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.tabs = [];
-    this.selected = 0;
-    /**
-     * Theme of the component.
-     */
-    this.theme = "";
-    /**
-     * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),
-     * if this is a number instead of true it will be used as "amount of items to scroll"
-     */
-    this.scrolls = false;
-    /**
-     * Whether the tab-group collapses to a select dropwdown in minor breakpoints
-     */
-    this.collapses = true;
-    /**
-     * Aria label for the entire tab-group
-     */
-    this.accessibleLabel = undefined;
-    /**
-     * Style variation of the tab group.
-     */
-    this.variation = "default";
-    /**
-     * 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();
-    /**
-     * Defaults for Label
-     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
-     */
-    this.labelDefaults = {
-      fi: "Valitse",
-      en: "Choose",
-      sv: "Välj",
-    };
-    /**
-     * Label for the select element which gets shown on mobile.
-     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
-     */
-    this.label = getLocaleString(this.labelDefaults, this.language);
-    /**
-     * Determines whether the label for the select element shown on mobile is visually hidden.
-     */
-    this.labelHidden = true;
-    /**
-     * Optional identifier to add to buttons in the tab group
-     */
-    this.identifier = this.id;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
-    this.padding = "auto";
     /**
      * Component event handling.
      */
@@ -297,6 +216,24 @@ const DuetTabGroup = class {
       }
       return renderedTabs;
     };
+    this.tabs = [];
+    this.selected = 0;
+    this.theme = "";
+    this.scrolls = false;
+    this.collapses = true;
+    this.accessibleLabel = undefined;
+    this.variation = "default";
+    this.language = getLanguage();
+    this.labelDefaults = {
+      fi: "Valitse",
+      en: "Choose",
+      sv: "Välj",
+    };
+    this.label = getLocaleString(this.labelDefaults, this.language);
+    this.labelHidden = true;
+    this.identifier = this.id;
+    this.margin = "auto";
+    this.padding = "auto";
   }
   /**
    * Component lifecycle events.