@duetds/components 6.2.3 → 6.2.5

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-4df60498.js';
 import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
@@ -33,47 +33,6 @@ const DuetFooter = class {
     this.duetItemClick = createEvent$1(this, "duetItemClick", 7);
     this.duetAnalytics = createEvent$1(this, "duetAnalytics", 7);
     this.duetEvent = createEvent$1(this, "duetEvent", 7);
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.processedMainItem = null;
-    this.processedItems = null;
-    this.processedMenu = null;
-    /**
-     * Theme of the navigation.
-     */
-    this.theme = "";
-    /**
-     * Style variation of the footer.
-     */
-    this.variation = "default";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * URL that the logo link points to.
-     */
-    this.logoHref = "/";
-    /**
-     * The currently active language. This setting changes the logo 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();
-    /**
-     * Property to change accessibleLabelExternal defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
-    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    /**
-     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
     /**
      * Component event handling.
      */
@@ -108,6 +67,18 @@ const DuetFooter = class {
         originalEvent: ev,
       });
     };
+    this.processedMainItem = null;
+    this.processedItems = null;
+    this.processedMenu = null;
+    this.theme = "";
+    this.variation = "default";
+    this.margin = "auto";
+    this.logoHref = "/";
+    this.language = getLanguage();
+    this.items = undefined;
+    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
+    this.menu = undefined;
   }
   /**
    * Component lifecycle events.

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-8469ee1a.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-4df60498.js';
 import { m as media_query_large, a as media_query_medium, b as media_query_small } from './tokens-0963dc8b.js';
 import { w as watchForOptions, a as watchForElement } from './watch-options-dd55bce8.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
@@ -20,34 +20,11 @@ const DuetGrid = class {
       window.matchMedia(media_query_small.replace(/'/g, "")),
     ];
     this.distributeFormElement = false;
-    /**
-     * Enable or disable the automatic responsive behaviour of the grid component.
-     * Setting this option to "true" makes sure that contents are stacked vertically
-     * on mobile (575px and under).
-     */
     this.responsive = false;
-    /**
-     * Switch the breakpoint used to trigger the content stacking. These match to
-     * similar media query tokens: $media-query-small and $media-query-medium.
-     */
     this.breakpoint = "small";
-    /**
-     * Direction of the grid items.
-     */
     this.direction = "horizontal";
-    /**
-     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
-     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
-     * so that they align even when displaying errors.
-     */
     this.alignment = "top";
-    /**
-     * Adjusts the horizontal distribution of the grid items.
-     */
     this.distribution = "default";
-    /**
-     * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
-     */
     this.mobile = "";
   }
   /**
@@ -180,29 +157,12 @@ const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;ma
 const DuetGridItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Make the grid item fill the remaining available grid space.
-     */
     this.fill = false;
-    /**
-     * Theme of the grid item.
-     */
+    this.maxWidth = undefined;
+    this.minWidth = undefined;
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * @internal
-     * Enable or disable the automatic responsive behaviour of the grid item.
-     * This property is used internally by Grid, and should not be set by the developer.
-     */
     this.responsive = false;
-    /**
-     * @internal
-     * Switch the breakpoint used to trigger the content stacking.
-     * This property is used internally by Grid, and should not be set by the developer.
-     */
     this.breakpoint = "small";
   }
   /**

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent$1, B as Build, H as Host, F as Fragment, g as getElement } from './index-8469ee1a.js';
+import { h, r as registerInstance, c as createEvent$1, B as Build, H as Host, F as Fragment, g as getElement } from './index-4df60498.js';
 import { f as formSearch } from './form-search-ea8e19ae.js';
 import { m as media_query_large } from './tokens-0963dc8b.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.es6-61b5e9a4.js';
@@ -91,148 +91,6 @@ const DuetHeader = class {
     this.hasLanguageChanged = false;
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
     this.boundMqlFunctions = [];
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.isContactOpen = false;
-    this.isLanguageOpen = false;
-    this.isSessionOpen = false;
-    this.isSlideOutOpen = false;
-    this.isSegmentOpen = false;
-    this.openMenu = null;
-    this.closedActives = null;
-    this.processedItems = null;
-    this.processedLanguageItems = null;
-    this.processedContactItems = null;
-    this.processedSession = null;
-    this.processedSearch = null;
-    this.processedUser = null;
-    this.processedBack = null;
-    this.renderDesktopNav = (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
-    /**
-     * Theme of the header.
-     */
-    this.theme = "";
-    /**
-     * The currently active language. This setting also changes the logo 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();
-    /**
-     * Default strings for accessibleI18nLabels
-     * @default {
-      fi: {
-        skipLabel: "Siirry pääsisältöön",
-        changeLanguage: "Vaihda kieltä",
-        activeLanguage: "Suomi valittuna",
-      },
-      sv: {
-        skipLabel: "Hoppa till huvudinnehåll",
-        changeLanguage: "Ändra Språk",
-        activeLanguage: "Svenska valt",
-      },
-      en: {
-        skipLabel: "Skip to main content",
-        changeLanguage: "Change language",
-        activeLanguage: "English selected",
-      },
-    }
-     */
-    this.accessibleI18nLabelsDefaults = {
-      fi: {
-        skipLabel: "Siirry pääsisältöön",
-        changeLanguage: "Vaihda kieltä",
-        activeLanguage: "Suomi valittuna",
-      },
-      sv: {
-        skipLabel: "Gå till huvudinnehåll",
-        changeLanguage: "Ändra Språk",
-        activeLanguage: "Svenska valt",
-      },
-      en: {
-        skipLabel: "Skip to main content",
-        changeLanguage: "Change language",
-        activeLanguage: "English selected",
-      },
-    };
-    /**
-     * Adds i18n translations of all internally used textStrings
-     * @default {
-      fi: {
-        skipLabel: "Siirry pääsisältöön",
-        changeLanguage: "Vaihda kieltä",
-        activeLanguage: "Suomi valittuna",
-      },
-      sv: {
-        skipLabel: "Hoppa till huvudinnehåll",
-        changeLanguage: "Ändra Språk",
-        activeLanguage: "Svenska valt",
-      },
-      en: {
-        skipLabel: "Skip to main content",
-        changeLanguage: "Change language",
-        activeLanguage: "English selected",
-      },
-    }
-     */
-    this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults);
-    /**
-     * Property to change accessibleLabelExternal defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
-    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    /**
-     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-    /**
-     * Property to change accessibleLabel defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabel when needed
-     */
-    this.accessibleLabelDefaults = {
-      fi: "Valikko",
-      sv: "Meny",
-      en: "Menu",
-    };
-    /**
-     * Accessible label that is shown for screen reader users in the mobile
-     * navigation toggle. Not visible for normal users.
-     * @default {
-      fi: "Valikko",
-      sv: "Meny",
-      en: "Menu",
-    }
-     */
-    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
-    /**
-     * URL that the logo link points to.
-     */
-    this.logoHref = "/";
-    /**
-     * The href of the current page item that is shown as “active”.
-     * Note: not available in multilevel headers.
-     */
-    this.currentHref = "/";
-    /**
-     * The ID of the element where "skip to content" link should take the user.
-     * If empty, the functionality won’t be rendered in the DOM.
-     */
-    this.skipToId = "";
-    /**
-     * Region that is shown next to the logo. If empty, region will be hidden.
-     * Note: not available in multilevel header.
-     */
-    this.region = "";
-    /**
-     * Label of the contact menu. If empty, contact menu will be hidden.
-     * Note: not available in multilevel headers.
-     */
-    this.contact = "";
     this.handleClick = (event) => {
       if (event.data.analyticsId) {
         this.duetAnalytics.emit({
@@ -389,6 +247,61 @@ const DuetHeader = class {
         originalEvent: ev,
       });
     };
+    this.isContactOpen = false;
+    this.isLanguageOpen = false;
+    this.isSessionOpen = false;
+    this.isSlideOutOpen = false;
+    this.isSegmentOpen = false;
+    this.openMenu = null;
+    this.closedActives = null;
+    this.processedItems = null;
+    this.processedLanguageItems = null;
+    this.processedContactItems = null;
+    this.processedSession = null;
+    this.processedSearch = null;
+    this.processedUser = null;
+    this.processedBack = null;
+    this.renderDesktopNav = (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
+    this.theme = "";
+    this.language = getLanguage();
+    this.accessibleI18nLabelsDefaults = {
+      fi: {
+        skipLabel: "Siirry pääsisältöön",
+        changeLanguage: "Vaihda kieltä",
+        activeLanguage: "Suomi valittuna",
+      },
+      sv: {
+        skipLabel: "Gå till huvudinnehåll",
+        changeLanguage: "Ändra Språk",
+        activeLanguage: "Svenska valt",
+      },
+      en: {
+        skipLabel: "Skip to main content",
+        changeLanguage: "Change language",
+        activeLanguage: "English selected",
+      },
+    };
+    this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults);
+    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+    this.accessibleLabelDefaults = {
+      fi: "Valikko",
+      sv: "Meny",
+      en: "Menu",
+    };
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+    this.user = undefined;
+    this.logoHref = "/";
+    this.currentHref = "/";
+    this.skipToId = "";
+    this.items = undefined;
+    this.region = "";
+    this.session = undefined;
+    this.search = undefined;
+    this.back = undefined;
+    this.contact = "";
+    this.contactItems = undefined;
+    this.languageItems = undefined;
   }
   /**
    * Component lifecycle events.
@@ -700,31 +613,11 @@ const DuetLogo = class {
      * Own Properties.
      */
     this.logoId = createID("DuetLogo");
-    /**
-     * Theme of the logo.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Use inverse version of the logo (white logo on dark background).
-     */
     this.inverse = false;
-    /**
-     * Size variation of the logo.
-     */
     this.size = "medium";
-    /**
-     * Where the logo links to.
-     */
     this.href = "/";
-    /**
-     * The language of the logo.
-     * @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();
   }
   /**

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-4df60498.js';
 import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
@@ -16,119 +16,44 @@ const DuetHero = class {
     this.duetClick = createEvent(this, "duetClick", 7);
     this.duetAnalytics = createEvent(this, "duetAnalytics", 7);
     /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
+     * Component event handling.
      */
+    this.handleClick = (ev, data) => {
+      if (data && data.analytics) {
+        this.duetAnalytics.emit({
+          component: "duet-hero",
+          analyticsId: data.analytics,
+        });
+      }
+      this.emitChange(ev, data);
+    };
     this.processedListItems = null;
     this.processedActions = null;
     this.processedBack = null;
-    /**
-     * Theme of the hero area.
-     */
     this.theme = "";
-    /**
-     * @deprecated please use heading slot instead.
-     * The heading of the hero area, rendered in an H1 tag. P.S. you can control
-     * the level of the HTML heading by using “level” prop. If empty, heading
-     * will be hidden.
-     */
     this.heading = "";
-    /**
-     * The headline shown before heading.
-     */
     this.preHeading = "";
-    /**
-     * The level of the heading.
-     */
     this.level = "h1";
-    /**
-     * The description of the hero area, rendered in a P tag. If empty, description
-     * will be hidden.
-     */
     this.description = "";
-    /**
-     * Icon to display to the left of the button content. If empty, icon will be hidden.
-     */
     this.icon = "";
-    /**
-     * Icon size for the button.
-     */
     this.iconSize = "medium";
-    /**
-     * Show icon on the right side of the button content.
-     */
     this.iconRight = false;
-    /**
-     * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
-     */
     this.categoryIcon = "";
-    /**
-     * Icon color to use for the category icon that can be used in gray hero area variation.
-     */
     this.categoryIconColor = "category-pet";
-    /**
-     * Text label shown inside the button. If empty, button will be hidden.
-     */
     this.buttonLabel = "";
-    /**
-     * 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 accessibleLabelExternal
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    /**
-     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
     this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-    /**
-     * URL that the button links to.
-     */
     this.buttonUrl = "#";
-    /**
-     * ID for the button.
-     */
     this.buttonId = "";
-    /**
-     * Centers the text in hero area.
-     */
+    this.buttonData = undefined;
     this.textCenter = false;
-    /**
-     * Forces all items in the header to be leftAligned
-     * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
-     * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
-     * this nullifies textCenter prop
-     */
     this.leftAlign = false;
-    /**
-     * URL of the image shown inside the hero area. The width of the displayed image
-     * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
-     * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
-     * property is left empty, image will be hidden.
-     */
     this.image = "";
-    /**
-     * Style variation of the hero area.
-     */
     this.variation = "default";
-    /**
-     * Component event handling.
-     */
-    this.handleClick = (ev, data) => {
-      if (data && data.analytics) {
-        this.duetAnalytics.emit({
-          component: "duet-hero",
-          analyticsId: data.analytics,
-        });
-      }
-      this.emitChange(ev, data);
-    };
+    this.back = undefined;
+    this.listItems = undefined;
+    this.actions = undefined;
   }
   /**
    * Component lifecycle events.

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { E as Env, r as registerInstance, h, H as Host, g as getElement } from './index-8469ee1a.js';
+import { E as Env, r as registerInstance, h, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { g as getColorByName } from './token-utils-b531747a.js';
 import './tokens.module-d3321092.js';
@@ -81,47 +81,16 @@ const duetIconCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin
 const DuetIcon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Theme of the icon. This setting will be overridden when you set the color
-     * property
-     */
+    this.svgContent = undefined;
     this.theme = "";
-    /**
-     * Icon name from Duet to display.
-     */
+    this.icon = undefined;
+    this.src = undefined;
     this.name = "action-add";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Whether the icon changes its size responsively or not.
-     */
     this.responsive = true;
-    /**
-     * Custom color to be used for the icon, as a design token entered in camelCase
-     * or kebab-case. Example: "color-primary". This property can also be set to
-     * "currentColor" which forces the icon to use the CSS text color of parent
-     * element instead. Useful when you want to control the color in stylesheet
-     * instead.
-     */
     this.color = "";
-    /**
-     * Custom color to be used for a circular background, as a design token entered
-     * in camelCase or kebab-case. Using this option the icon will always be resized
-     * to $size-icon-medium on mobile viewports. Example: "color-primary".
-     */
     this.background = "";
-    /**
-     * Icon size. Entered as one of the icon size design tokens.
-     */
     this.size = "medium";
-    /**
-     * Custom color to be used for a circular border and icon outline, as a design
-     * token entered in camelCase or kebab-case. Using this option the icon will
-     * always be resized to $size-icon-medium on mobile viewports.
-     * Example: "color-primary".
-     */
     this.outline = "";
   }
   /**