@duetds/components 6.2.3 → 6.2.5

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1420909f.js');
+const index = require('./index-d2f05eb8.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
@@ -21,42 +21,20 @@ const DuetProgress = class {
      */
     this.progressId = createId.createID("DuetProgress");
     this.progressLabelId = createId.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 = languageUtils.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/cjs/duet-radio_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1420909f.js');
+const index = require('./index-d2f05eb8.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const watchOptions = require('./watch-options-d88afac0.js');
@@ -22,46 +22,6 @@ const DuetRadio = class {
      * Own Properties.
      */
     this.radioId = createId.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.
      */
@@ -95,6 +55,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.
@@ -133,49 +115,6 @@ const duetRadioGroupCss = "*.sc-duet-radio-group,*.sc-duet-radio-group::after,*.
 const DuetRadioGroup = class {
   constructor(hostRef) {
     index.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.
      */
@@ -188,6 +127,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/cjs/duet-range-slider.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1420909f.js');
+const index = require('./index-d2f05eb8.js');
 const tokens_module = require('./tokens.module-69170ddd.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
@@ -32,67 +32,6 @@ const DuetRangeSlider = class {
      * Own Properties
      */
     this.rangeId = createId.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.
      */
@@ -121,6 +60,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/cjs/duet-scrollable_3.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1420909f.js');
+const index = require('./index-d2f05eb8.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const createId = require('./create-id-c3b984b1.js');
@@ -23,10 +23,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
@@ -37,19 +33,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) {
@@ -174,15 +163,9 @@ const duetTabCss = ".sc-duet-tab-h{box-sizing:border-box;padding:0;margin:0;back
 const DuetTab = class {
   constructor(hostRef) {
     index.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
       ? languageUtils.getLocaleString(this.accessibleDescriptionDefault)
       : null;
@@ -207,70 +190,6 @@ const DuetTabGroup = class {
     this.duetChange = index.createEvent(this, "duetChange", 3);
     this.duetTabChange = index.createEvent(this, "duetTabChange", 7);
     this.id = createId.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 = languageUtils.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 = languageUtils.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.
      */
@@ -301,6 +220,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 = languageUtils.getLanguage();
+    this.labelDefaults = {
+      fi: "Valitse",
+      en: "Choose",
+      sv: "Välj",
+    };
+    this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
+    this.labelHidden = true;
+    this.identifier = this.id;
+    this.margin = "auto";
+    this.padding = "auto";
   }
   /**
    * Component lifecycle events.

package/lib/cjs/duet-section-layout.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1420909f.js');
+const index = require('./index-d2f05eb8.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 
 const duetSectionLayoutCss = "*,*::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;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main{display:block;width:100%}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}";
@@ -13,13 +13,7 @@ const duetSectionLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding
 const DuetSectionLayout = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Align container vertically in the middle when the space allows it.
-     */
     this.middle = false;
   }
   /**

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1420909f.js');
+const index = require('./index-d2f05eb8.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-5cadd058.js');
@@ -40,70 +40,6 @@ const DuetSelect = class {
     this.labelId = createId.createID("DuetLabel");
     this.topCaptionId = createId.createID("DuetCaptionTop");
     this.topCaptionPlaceholderId = createId.createID("DuetCaptionPlaceholderTop");
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.processedItems = null;
-    /**
-     * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
-     */
-    this.variation = "default";
-    /**
-     * 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;
-    /**
-     * Theme of the select.
-     */
-    this.theme = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Hint text to display.
-     */
-    this.placeholder = "";
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * 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;
-    /**
-     * 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;
-    /**
-     * 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.
      */
@@ -131,6 +67,30 @@ const DuetSelect = class {
         component: "duet-select",
       });
     };
+    this.processedItems = null;
+    this.variation = "default";
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.margin = "auto";
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.error = "";
+    this.expand = false;
+    this.value = undefined;
+    this.theme = "";
+    this.labelHidden = false;
+    this.identifier = undefined;
+    this.name = undefined;
+    this.placeholder = "";
+    this.caption = undefined;
+    this.echoPlaceholder = false;
+    this.items = undefined;
+    this.disabled = false;
+    this.required = false;
+    this.label = "label";
+    this.role = undefined;
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   valueChanged() {
     if (this.nativeSelect) {

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1420909f.js');
+const index = require('./index-d2f05eb8.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
@@ -20,22 +20,6 @@ const DuetStep = class {
     this.duetStepClick = index.createEvent(this, "duetStepClick", 7);
     this.buttonId = createId.createID("DuetStepButton");
     this.contentId = createId.createID("DuetStepContent");
-    /**
-     * Theme of the component.
-     */
-    this.theme = "";
-    /**
-     * @internal
-     * Enable/disable rounded top corners (on mobile).
-     * This property is used internally by stepper, and should not be set by the developer.
-     */
-    this.roundedTop = false;
-    /**
-     * @internal
-     * Enable/disable rounded bottom corners (on mobile).
-     * This property is used internally by stepper, and should not be set by the developer.
-     */
-    this.roundedBottom = false;
     this.handleKeyDown = (e) => {
       if (this.isClickDisabled()) {
         return;
@@ -51,6 +35,13 @@ const DuetStep = class {
       }
       this.handleStepClick(e);
     };
+    this.theme = "";
+    this.heading = undefined;
+    this.headingLevel = undefined;
+    this.stepIndex = undefined;
+    this.state = undefined;
+    this.roundedTop = false;
+    this.roundedBottom = false;
   }
   handleStepClick(e) {
     this.duetStepClick.emit({
@@ -125,27 +116,10 @@ const DuetStepper = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.duetStepChange = index.createEvent(this, "duetStepChange", 7);
-    /**
-     * Theme of the component.
-     */
     this.theme = "";
-    /**
-     * Format of message used to announce current step when navigating between steps.
-     * The string {current} is replaced with current the step number.
-     * The string {total} is replaced with the total number of steps.
-     */
     this.accessibleLive = "Lista jossa {total} kohtaa. Olet kohdassa {current}.";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Controls whether navigation back to previous steps is allowed or not.
-     */
     this.backDisabled = false;
-    /**
-     * The index of the current step.
-     */
     this.selected = 0;
   }
   currentStepChanged(nextStep) {