@duetds/components 9.0.2 → 9.1.1

package/lib/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetInputPadding, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetInputPadding, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetOverflowPadding, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
 import { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 import { DuetLangObject } from "./utils/language-utils";
 import { DuetAlertEvent } from "./components/duet-alert/duet-alert";
@@ -68,7 +68,7 @@ import { UploadActionButtonTitles } from "./components/duet-upload-item/duet-upl
 import { DuetFileListItem, DuetUploadEvent as DuetUploadEvent1 } from "./components/duet-upload/duet-upload";
 import { ItemType, UploadActionButtonTitles as UploadActionButtonTitles1 } from "./components/duet-upload-item/duet-upload-item";
 import { EventEmitter } from "./stencil-public-runtime";
-export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetInputPadding, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetInputPadding, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetOverflowPadding, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
 export { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 export { DuetLangObject } from "./utils/language-utils";
 export { DuetAlertEvent } from "./components/duet-alert/duet-alert";
@@ -1562,6 +1562,7 @@ export namespace Components {
          */
         "minWidth": string;
         "responsive": boolean;
+        "rowReverse": boolean;
         /**
           * Theme of the grid item.
          */
@@ -2971,9 +2972,9 @@ export namespace Components {
          */
         "icon": DuetIconName;
         /**
-          * Layout.
+          * Layout. Values narrow and fluid are deprecated.
          */
-        "layout": "narrow" | "fluid";
+        "layout": "narrow" | "fluid" | "auto";
         /**
           * Theme of the hero area.
          */
@@ -3575,6 +3576,10 @@ export namespace Components {
           * Optional identifier to add to buttons in the tab group
          */
         "identifier": string;
+        /**
+          * Whether to add padding to the scrollable list to account for overflowing elements, such as shadows or outlines.
+         */
+        "padding": DuetOverflowPadding;
         /**
           * Selected element
          */
@@ -9344,9 +9349,9 @@ declare namespace LocalJSX {
          */
         "icon"?: DuetIconName;
         /**
-          * Layout.
+          * Layout. Values narrow and fluid are deprecated.
          */
-        "layout"?: "narrow" | "fluid";
+        "layout"?: "narrow" | "fluid" | "auto";
         /**
           * Theme of the hero area.
          */
@@ -9948,6 +9953,10 @@ declare namespace LocalJSX {
           * Optional identifier to add to buttons in the tab group
          */
         "identifier"?: string;
+        /**
+          * Whether to add padding to the scrollable list to account for overflowing elements, such as shadows or outlines.
+         */
+        "padding"?: DuetOverflowPadding;
         /**
           * Selected element
          */

package/lib/types/utils/body-scroll.d.ts

@@ -0,0 +1,17 @@
+export type BodyScrollOptions = {
+    reserveScrollBarGap?: boolean | undefined;
+    allowTouchMove?: ((el: EventTarget) => boolean) | undefined;
+};
+/**
+ *
+ * @param targetElement HTMLElement
+ * @param options BodyScrollOptions
+ * @returns void
+ */
+export declare const disableBodyScroll: (targetElement: HTMLElement, options?: BodyScrollOptions) => void;
+export declare const clearAllBodyScrollLocks: () => void;
+/**
+ * @param targetElement
+ * @returns void
+ */
+export declare const enableBodyScroll: (targetElement: HTMLElement) => void;

package/lib/types/utils/string-utils.d.ts

@@ -5,3 +5,7 @@ export declare const convertHtmlQuotes: (string: any) => any;
  * Converts the first letter of the string to upper case. Note that with non-latin scrips this may not produce expected results
  */
 export declare const upperCaseFirst: (string: string) => string;
+/**
+ * Escapes characters that have special meaning in regular expressions
+ */
+export declare const regexEscape: (string: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "9.0.2",
+  "version": "9.1.1",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@duetds/fonts": "3.0.51",
-    "@duetds/icons": "4.0.65",
-    "@duetds/tokens": "4.0.67",
+    "@duetds/icons": "4.0.67",
+    "@duetds/tokens": "4.0.69",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.22.2",
@@ -76,5 +76,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "39b2dd3f705517d92df630ba1505e24ad510a889"
+  "gitHead": "c3a7a3cc48aa4624df9691561641978acd350b43"
 }

package/lib/dist-custom-elements/p-31932263.js

@@ -1,77 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-a32bc785.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-
-const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-of-type{padding-left:0}.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
-const DuetGridItemStyle0 = duetGridItemCss;
-
-const DuetGridItem = /*@__PURE__*/ proxyCustomElement(class DuetGridItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.fill = false;
-        this.maxWidth = undefined;
-        this.minWidth = undefined;
-        this.theme = "";
-        this.margin = "auto";
-        this.responsive = false;
-        this.direction = "horizontal";
-        this.breakpoint = "small";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { style: {
-                "min-width": this.minWidth,
-                "max-width": this.maxWidth,
-            }, class: {
-                "duet-m-0": this.margin === "none",
-                "duet-theme-turva": this.theme === "turva",
-                "duet-grid-item": true,
-                "duet-grid-item-fill": this.fill,
-                "duet-grid-item-responsive": this.responsive,
-                "duet-grid-direction-horizontal": this.direction === "horizontal",
-                "duet-grid-direction-vertical": this.direction === "vertical",
-                "duet-grid-item-br-x-small": this.breakpoint === "x-small",
-                "duet-grid-item-br-small": this.breakpoint === "small",
-                "duet-grid-item-br-medium": this.breakpoint === "medium",
-                "duet-grid-item-br-large": this.breakpoint === "large",
-                "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }));
-    }
-    static get style() { return DuetGridItemStyle0; }
-}, [2, "duet-grid-item", {
-        "fill": [4],
-        "maxWidth": [1, "max-width"],
-        "minWidth": [1, "min-width"],
-        "theme": [1025],
-        "margin": [1],
-        "responsive": [4],
-        "direction": [1],
-        "breakpoint": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-grid-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-grid-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetGridItem);
-            }
-            break;
-    } });
-}
-
-export { DuetGridItem as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-fd50fe15.js

@@ -1,192 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-a32bc785.js';
-import { a as media_query_large, m as media_query_medium, b as media_query_small } from './p-d5c03b61.js';
-import { w as watchForOptions, a as watchForElement } from './p-7d8a2628.js';
-
-const duetGridCss = ".sc-duet-grid-h {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.duet-grid-variation-flex.sc-duet-grid-h {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  justify-content: flex-start !important;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n}\n.duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n  flex-direction: row !important;\n}\n.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse.sc-duet-grid-h {\n  flex-direction: row-reverse !important;\n}\n@media (max-width: 22.5em) {\n  .duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n    flex-direction: column !important;\n  }\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-flex.duet-grid-breakpoint-small.sc-duet-grid-h {\n    flex-direction: row !important;\n  }\n  .duet-grid-variation-flex.duet-grid-breakpoint-small.duet-grid-row-reverse.sc-duet-grid-h {\n    flex-direction: row-reverse !important;\n  }\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-flex.duet-grid-breakpoint-medium.sc-duet-grid-h {\n    flex-direction: row !important;\n  }\n  .duet-grid-variation-flex.duet-grid-breakpoint-medium.duet-grid-row-reverse.sc-duet-grid-h {\n    flex-direction: row-reverse !important;\n  }\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-flex.duet-grid-breakpoint-large.sc-duet-grid-h {\n    flex-direction: row !important;\n  }\n  .duet-grid-variation-flex.duet-grid-breakpoint-large.duet-grid-row-reverse.sc-duet-grid-h {\n    flex-direction: row-reverse !important;\n  }\n}\n@media (min-width: 64.0625em) {\n  .duet-grid-variation-flex.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n    flex-direction: row !important;\n  }\n  .duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse.sc-duet-grid-h {\n    flex-direction: row-reverse !important;\n  }\n}\n.duet-grid-variation-flex.duet-grid-wrap.sc-duet-grid-h {\n  flex-wrap: wrap !important;\n}\n.duet-grid-variation-flex.duet-no-stacking.sc-duet-grid-h {\n  flex-direction: row !important;\n}\n.duet-grid-variation-flex.duet-no-stacking.duet-grid-row-reverse.sc-duet-grid-h {\n  flex-direction: row-reverse !important;\n}\n.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n  flex-direction: column !important;\n}\n@media (max-width: 35.9375em) {\n  .duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n    flex-direction: column !important;\n  }\n}\n.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h {\n  flex-direction: column !important;\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h {\n    flex-direction: column !important;\n  }\n}\n.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h {\n  flex-direction: column !important;\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h {\n    flex-direction: column !important;\n  }\n}\n.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h {\n  flex-direction: column !important;\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h {\n    flex-direction: column !important;\n  }\n}\n.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n  flex-direction: column !important;\n}\n@media (min-width: 64.0625em) {\n  .duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n    flex-direction: column !important;\n  }\n}\n.duet-grid-variation-flex.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h {\n  align-items: flex-start !important;\n}\n.duet-grid-variation-flex.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h {\n  align-items: flex-end !important;\n}\n.duet-grid-variation-flex.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h {\n  align-items: center !important;\n}\n.duet-grid-variation-flex.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h {\n  align-items: stretch !important;\n}\n.duet-grid-variation-flex.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h {\n  align-items: baseline !important;\n}\n.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n  align-items: flex-start !important;\n}\n.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n  align-items: flex-end !important;\n}\n.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n  align-items: center !important;\n}\n.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n  align-items: stretch !important;\n}\n.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-small.sc-duet-grid-h {\n  align-items: baseline !important;\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h {\n    align-items: flex-start !important;\n  }\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h {\n    align-items: flex-end !important;\n  }\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h {\n    align-items: center !important;\n  }\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h {\n    align-items: stretch !important;\n  }\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h {\n    align-items: baseline !important;\n  }\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h {\n    align-items: flex-start !important;\n  }\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h {\n    align-items: flex-end !important;\n  }\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h {\n    align-items: center !important;\n  }\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h {\n    align-items: stretch !important;\n  }\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h {\n    align-items: baseline !important;\n  }\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h {\n    align-items: flex-start !important;\n  }\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h {\n    align-items: flex-end !important;\n  }\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h {\n    align-items: center !important;\n  }\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h {\n    align-items: stretch !important;\n  }\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-large.sc-duet-grid-h {\n    align-items: baseline !important;\n  }\n}\n@media (min-width: 64.0625em) {\n  .duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n    align-items: flex-start !important;\n  }\n}\n@media (min-width: 64.0625em) {\n  .duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n    align-items: flex-end !important;\n  }\n}\n@media (min-width: 64.0625em) {\n  .duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n    align-items: center !important;\n  }\n}\n@media (min-width: 64.0625em) {\n  .duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n    align-items: stretch !important;\n  }\n}\n@media (min-width: 64.0625em) {\n  .duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h {\n    align-items: baseline !important;\n  }\n}\n.duet-grid-variation-flex.duet-grid-distribution-left.sc-duet-grid-h {\n  justify-content: flex-start !important;\n}\n.duet-grid-variation-flex.duet-grid-distribution-right.sc-duet-grid-h {\n  justify-content: flex-end !important;\n}\n.duet-grid-variation-flex.duet-grid-distribution-center.sc-duet-grid-h {\n  justify-content: center !important;\n}\n.duet-grid-variation-flex.duet-grid-distribution-between.sc-duet-grid-h {\n  justify-content: space-between !important;\n}\n.duet-grid-variation-flex.duet-grid-distribution-around.sc-duet-grid-h {\n  justify-content: space-around !important;\n}\n.duet-grid-variation-flex.duet-grid-distribution-evenly.sc-duet-grid-h {\n  justify-content: space-evenly !important;\n}\n@media (max-width: 35.9375em) {\n  .duet-grid-variation-flex.duet-grid-mobile-left.sc-duet-grid-h {\n    align-items: flex-start !important;\n    justify-content: flex-start !important;\n    text-align: left !important;\n  }\n}\n@media (max-width: 35.9375em) {\n  .duet-grid-variation-flex.duet-grid-mobile-center.sc-duet-grid-h {\n    align-items: center !important;\n    justify-content: center !important;\n    text-align: center !important;\n  }\n  .duet-grid-variation-flex.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid {\n    text-align: center !important;\n  }\n}\n@media (max-width: 35.9375em) {\n  .duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h {\n    align-items: flex-end !important;\n    justify-content: flex-end !important;\n    text-align: right !important;\n  }\n  .duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid {\n    text-align: right !important;\n  }\n}\n\n.duet-grid-variation-grid.sc-duet-grid-h {\n  display: grid;\n  grid-template-rows: repeat(1, 1fr);\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 16px;\n  align-items: flex-start;\n  justify-content: center;\n  margin: 0 20px;\n  container-type: inline-size;\n}\n@media (min-width: 36em) {\n  .duet-grid-variation-grid.sc-duet-grid-h {\n    gap: 24px;\n    margin: 0 40px;\n  }\n}\n@media (min-width: 48em) {\n  .duet-grid-variation-grid.sc-duet-grid-h {\n    grid-template-columns: repeat(8, 55px);\n    gap: 24px 32px;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 62em) {\n  .duet-grid-variation-grid.sc-duet-grid-h {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    margin: 0 64px;\n  }\n}\n@media (min-width: 76.25em) {\n  .duet-grid-variation-grid.sc-duet-grid-h {\n    grid-template-columns: repeat(12, 55px);\n    gap: 40px;\n    margin: 0 auto;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s > * {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s > * {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s > * {\n    grid-column: 3/span 8;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s > * {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s > * {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s > * {\n    grid-column: 2/span 10;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s > * {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s > * {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s > * {\n    grid-column: 1/span 12;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s > :nth-child(odd) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s > :nth-child(odd) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s > :nth-child(odd) {\n    grid-column: 1/span 8;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s > :nth-child(even) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s > :nth-child(even) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s > :nth-child(even) {\n    grid-column: 9/span 4;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s > :nth-child(odd) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s > :nth-child(odd) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s > :nth-child(odd) {\n    grid-column: 1/span 4;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s > :nth-child(even) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s > :nth-child(even) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s > :nth-child(even) {\n    grid-column: 5/span 8;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s > :nth-child(odd) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s > :nth-child(odd) {\n    grid-column: 1/span 4;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s > :nth-child(odd) {\n    grid-column: 1/span 6;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s > :nth-child(even) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s > :nth-child(even) {\n    grid-column: 5/span 4;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s > :nth-child(even) {\n    grid-column: 7/span 6;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+1) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+1) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+1) {\n    grid-column: 1/span 4;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+2) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+2) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+2) {\n    grid-column: 5/span 4;\n  }\n}\n.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+3) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+3) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s > :nth-child(3n+3) {\n    grid-column: 9/span 4;\n  }\n}\n.duet-grid-variation-grid.duet-grid-template-button-grid.sc-duet-grid-h {\n  grid-template-columns: minmax(0, 1fr);\n  gap: 12px;\n  margin: 0;\n  \n  \n}\n@media (min-width: 36em) {\n  .duet-grid-variation-grid.duet-grid-template-button-grid.sc-duet-grid-h {\n    gap: 16px;\n  }\n}\n@container (min-width: 664px) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-button-grid {\n    \n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n@container (min-width: 1100px) {\n  .sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-button-grid {\n    \n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}";
-const DuetGridStyle0 = duetGridCss;
-
-function isGridItem(element) {
-    return element.tagName.toLowerCase() === "duet-grid-item";
-}
-const DuetGrid = /*@__PURE__*/ proxyCustomElement(class DuetGrid extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_medium.replace(/'/g, "")),
-            window.matchMedia(media_query_small.replace(/'/g, "")),
-        ];
-        this.distributeFormElement = false;
-        this.responsive = false;
-        this.breakpoint = "small";
-        this.direction = "horizontal";
-        this.rowReverse = false;
-        this.alignment = "top";
-        this.distribution = "default";
-        this.mobile = "";
-        this.gridTemplate = null;
-    }
-    /**
-     * Private functions
-     */
-    /**
-     * Returns the element height including margins
-     * @param element - element
-     * @returns {number}
-     */
-    outerHeight(element) {
-        const height = element.offsetHeight, style = window.getComputedStyle(element);
-        return ["top", "bottom"]
-            .map(side => parseInt(style[`margin-${side}`]))
-            .reduce((total, side) => total + side, height);
-    }
-    /**
-     * Component lifecycle events.
-     */
-    async connectedCallback() {
-        const el = this.element;
-        this.distributeFormElement = this.alignment === "form_distribute";
-        this.mutationO = watchForOptions(el, "duet-grid-item", () => {
-            this.updateGridItems();
-        });
-        // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
-        if (this.distributeFormElement) {
-            this.mutation1 = watchForElement(el, "duet-input", () => {
-                this.updateGridItemsWithInputFields();
-            });
-            // listen for potential mediaquery changes and reset layout
-            for (let i = 0; i < this.mql.length; i++) {
-                // addEventListener is not available in Stencil hydrate
-                if (this.mql[i].addEventListener) {
-                    this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-                }
-            }
-        }
-        this.updateGridItems();
-    }
-    disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
-        if (this.mutation1) {
-            this.mutation1.disconnect();
-            this.mutation1 = undefined;
-        }
-        // listen for potential mediaquery changes and reset layout
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-            }
-        }
-    }
-    /**
-     * Local methods
-     */
-    async updateGridItems() {
-        const items = Array.from(this.element.children).filter(isGridItem);
-        items.forEach(item => {
-            item.responsive = this.responsive;
-            item.breakpoint = this.breakpoint;
-            item.direction = this.direction;
-        });
-    }
-    async updateGridItemsWithInputFields() {
-        const items = Array.from(this.element.children).filter(isGridItem);
-        // if layout changes to columns instead of row, remove all padding
-        const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
-        let maxHeight = 0;
-        const sizes = [];
-        items.forEach(item => {
-            const inputErrorDom = item.querySelector("span.duet-input-error");
-            const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
-            sizes.push(height);
-        });
-        maxHeight = Math.max(...sizes);
-        items.forEach(item => {
-            const inputErrorDom = item.querySelector("span.duet-input-error");
-            const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
-            if (height < maxHeight && !hasColumnLayout) {
-                item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
-            }
-            else if (height === maxHeight || hasColumnLayout) {
-                item.setAttribute("style", `padding-bottom: 0px;`);
-            }
-        });
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { class: {
-                "duet-grid": true,
-                "duet-no-stacking": !this.responsive,
-                "duet-grid-align-top": this.alignment === "top", // flex-start
-                "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute", // flex-end
-                "duet-grid-align-center": this.alignment === "center", // center
-                "duet-grid-align-stretch": this.alignment === "stretch", // stretch
-                "duet-grid-align-baseline": this.alignment === "baseline", // baseline
-                "duet-grid-distribution-left": this.distribution === "left", // flex-start
-                "duet-grid-distribution-right": this.distribution === "right", // flex-end
-                "duet-grid-distribution-center": this.distribution === "center", // center
-                "duet-grid-distribution-between": this.distribution === "space-between", // space-between
-                "duet-grid-distribution-around": this.distribution === "space-around", // space-around
-                "duet-grid-distribution-evenly": this.distribution === "space-evenly", // space-evenly
-                "duet-grid-mobile-left": this.mobile === "left",
-                "duet-grid-mobile-center": this.mobile === "center",
-                "duet-grid-mobile-right": this.mobile === "right",
-                "duet-grid-direction-horizontal": this.direction === "horizontal",
-                "duet-grid-direction-vertical": this.direction === "vertical",
-                "duet-grid-breakpoint-x-small": this.breakpoint === "x-small",
-                "duet-grid-breakpoint-small": this.breakpoint === "small",
-                "duet-grid-breakpoint-medium": this.breakpoint === "medium",
-                "duet-grid-breakpoint-large": this.breakpoint === "large",
-                "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
-                "duet-grid-row-reverse": this.rowReverse,
-                [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
-                [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", null)));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "responsive": ["updateGridItems"],
-        "breakpoint": ["updateGridItems"],
-        "direction": ["updateGridItems"]
-    }; }
-    static get style() { return DuetGridStyle0; }
-}, [6, "duet-grid", {
-        "responsive": [4],
-        "breakpoint": [1],
-        "direction": [1],
-        "rowReverse": [4, "row-reverse"],
-        "alignment": [1],
-        "distribution": [1],
-        "mobile": [1],
-        "gridTemplate": [1, "grid-template"],
-        "distributeFormElement": [32]
-    }, undefined, {
-        "responsive": ["updateGridItems"],
-        "breakpoint": ["updateGridItems"],
-        "direction": ["updateGridItems"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-grid"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-grid":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetGrid);
-            }
-            break;
-    } });
-}
-
-export { DuetGrid as D, defineCustomElement as d };

package/lib/duet/p-0319560a.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import{r as e,h as t,H as a,g as i}from"./p-18ada958.js";import{i as o}from"./p-aaa7a7bd.js";import{F as s}from"./p-d283b94b.js";import{a as n,c as l,d,g as c}from"./p-7d6b40d1.js";import{h as r}from"./p-8a7ee339.js";import{g as p}from"./p-1784b1d2.js";import"./p-0e052642.js";import"./p-4a901bfc.js";const b=class{constructor(t){e(this,t),this.exitLangObject={en:"Exit the menu",fi:"Poistu valikosta",sv:"Avsluta menyn"},this.backLangObject={en:"Back to main menu",fi:"Takaisin päävalikkoon",sv:"Tillbaka till huvudmenyn"},this.hasStickyHeaderSlot=!1,this.updateLabel=()=>{const e=this.element.querySelector("[slot='label']");this.label=e},this.toggleMenu=()=>{this.open=!this.open},this.onClick=()=>{this.toggleMenu()},this.onCloseClick=e=>{e.stopPropagation(),"DUET-SLIDEOUT"===this.element.parentElement.tagName&&this.element.parentElement.toggle()},this.label=void 0,this.language=n(),this.theme="",this.active=!1,this.open=!1,this.icon=void 0,this.labelSize="medium",this.backgroundColor="primary-lightest"}componentWillLoad(){o(this),this.updateLabel(),this.hasStickyHeaderSlot=r(this.element,"sticky-header")}connectedCallback(){l(this)}disconnectedCallback(){d(this)}handleOpenChange(e,t){!!e!=!!t&&(this.open&&!t?setTimeout((()=>{Array.from(this.element.parentElement.children).forEach((e=>{e!==this.element&&(e.inert=!0)})),this.closeButton.focus()}),200):!this.open&&t&&setTimeout((()=>{Array.from(this.element.parentElement.children).forEach((e=>{e.inert=!1})),this.openButton.focus()}),200))}async setFocus(e){this.open?setTimeout((()=>{this.closeButton.focus(e)}),200):setTimeout((()=>{this.openButton.focus(e)}),200)}render(){const e={background:p("primary-lightest"===this.backgroundColor&&"turva"===this.theme?"gray-lighter":this.backgroundColor,this.theme)},i=c(this.exitLangObject),o=c(this.backLangObject);return t(a,{key:"22c28c0ab12659f418c97fbf93bbebd68608fb79"},t("div",{key:"34c09abac8c0aee1c1dfd1f2bbac570ed0611b35",class:{"duet-slideout-panel":!0,"duet-theme-turva":"turva"===this.theme,active:this.open}},t("button",{key:"8dcfb92e4eb8610e0a89fdbe3c7675e00a2e8379",ref:e=>this.openButton=e,"aria-haspopup":"menu","aria-controls":"menu","aria-expanded":this.open?"true":"false","aria-current":this.active?"true":"false",id:"button",type:"button",class:{link:!0,active:this.active},onClick:this.onClick,inert:this.open},this.icon&&t("duet-icon",{key:"4944cd788c6d0018243a4cc6b7d9f597ee6d435e",name:this.icon,size:"medium",margin:"none",color:"secondary"}),t("span",{key:"813420fa817e10189a300006605f4f724b2b854e",class:"label"},t("span",{key:"b63f12c4351efa40940bdcac2dea8889cfbf2c82",class:{"label-text":!0,[this.labelSize]:!0}},t("slot",{key:"fb495263ce936ce817e173148e4fcc35f7fa73b8",name:"label"})),t("duet-icon",{key:"c61e62bf194e44656274ff86ceb55aa51fc3cec8",class:"caret",name:"action-arrow-right",margin:"none",size:"x-small",color:"secondary"}))),t("div",{key:"b0b8171895a218075cfc034265abb67c6c12ab4a",class:{dialog:!0,hidden:!this.open},style:e},t(s,{key:"e5fba5ca765f1a531361fddee555cb1811fcdcdb",moveFocusTo:this.closeButton}),t("div",{key:"b5134e29091047b89083c0034c9cea235ca2fe5c",class:{"top-container":!0,"has-sticky-header-slot":this.hasStickyHeaderSlot}},t("div",{key:"9419dbfcc225548ac136e2e0627bc7c17a788fb3",class:"top"},t("button",{key:"4479933ad445c05b72de00c10a54c3336ca89e44",ref:e=>this.closeButton=e,"aria-haspopup":"menu","aria-controls":"menu","aria-expanded":this.open?"true":"false","aria-label":`${o}`,type:"button",class:{back:!0},onClick:this.onClick},t("duet-icon",{key:"627ec8facc8df37e986fd32f83771825ed0fa23a",class:"caret",name:"action-arrow-left",margin:"none",size:"small",color:"secondary"})),t("span",{key:"b597e175c2c2f97b604f04dccdbf5d00b71bcdb1"},this.label.innerHTML),t("button",{key:"fda07c1948d6aabdfbdebd84a5bbe71bbbe37bfa",class:"close",type:"button",onClick:this.onCloseClick,"aria-label":`${i}`},t("duet-icon",{key:"ae152cff044ba959bed507383387374a07c64bf1",name:"navigation-close",size:"small",margin:"none",color:"secondary"}))),t("div",{key:"c6be3120a863c54dccf941033374c9c207d8e4af",class:"sticky-header"},t("slot",{key:"723211cc2c88a3c20a61a96c5a802ee1fbe462c0",name:"sticky-header"}))),t("div",{key:"0f34420d3730ff49bb92f54457ba2db91fc43114",tabindex:"-1",role:"menu",id:"menu","aria-labelledby":"button",class:{items:!0}},t("slot",{key:"8575454b60ae274fe2d4876b3d89fb1b9642afef"})),t(s,{key:"5f96aa2ae4fa9eea21b2dff7ee8151cd3259c291",moveFocusTo:this.closeButton}))))}get element(){return i(this)}static get watchers(){return{open:["handleOpenChange"]}}};b.style='*,*::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;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1.5rem;font-weight:800;line-height:1.25;color:rgb(0, 41, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1.25rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.5rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:"";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(243, 249, 252)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(243, 249, 252);border-bottom:1px solid rgb(225, 227, 230)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:rgb(0, 41, 77)}.duet-slideout-panel.duet-theme-turva .link{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 28, 58)}.duet-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 245, 247)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 28, 58)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(0, 41, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}';export{b as duet_slideout_panel}

package/lib/duet/p-0e232ca3.system.entry.js

@@ -1,4 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,a){function n(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,o){function r(t){try{d(a.next(t))}catch(t){o(t)}}function s(t){try{d(a["throw"](t))}catch(t){o(t)}}function d(t){t.done?i(t.value):n(t.value).then(r,s)}d((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,n,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return d([t,e])}}function d(s){if(a)throw new TypeError("Generator is already executing.");while(r&&(r=0,s[0]&&(i=0)),i)try{if(a=1,n&&(o=s[0]&2?n["return"]:s[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;if(n=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;n=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(s[0]===6&&i.label<o[1]){i.label=o[1];o=s;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(s);break}if(o[2])i.ops.pop();i.trys.pop();continue}s=e.call(t,i)}catch(t){s=[6,t];n=0}finally{a=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
-/*!
- * Built with Duet Design System
- */System.register(["./p-b9d4ed8d.system.js","./p-e216bea4.system.js","./p-e12af479.system.js","./p-34d7dd10.system.js","./p-d5a206c2.system.js","./p-c1445714.system.js","./p-e6b5a1c7.system.js","./p-6ef75455.system.js","./p-c86d6786.system.js"],(function(t){"use strict";var e,i,a,n,o,r,s,d,u,c,b,l,h,p,f,g,m,v,k,x,w,y;return{setters:[function(t){e=t.r;i=t.h;a=t.H;n=t.g;o=t.c},function(t){r=t.i},function(t){s=t.h;d=t.g},function(t){u=t.s;c=t.u;b=t.o;l=t.p;h=t.d;p=t.b;f=t.a;g=t.c},function(t){m=t.g;v=t.c;k=t.d;x=t.a},function(t){w=t.d},function(t){y=t.c},function(){},function(){}],execute:function(){var _='*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button-container{position:relative;flex:0 0 auto;flex-basis:40px;transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button-container.left::after{position:relative;top:-50px;left:20px;z-index:250;display:block;width:30px;height:100%;content:"";background-image:linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button-container.right::after{position:relative;top:-50px;right:15px;z-index:250;display:block;width:30px;height:100%;content:"";background-image:linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button-container--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;height:100%;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--top{align-self:flex-start}:host .duet-scrollable-items .duet-scrollable-button--bottom{align-self:flex-end}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;padding-right:5px;padding-left:5px;margin:0 -5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;scroll-snap-align:center}';var j=_;var z=t("duet_scrollable",function(){function t(t){var i=this;e(this,t);this.currentIndex=0;this.scrollPaneElement=undefined;this.hasCollapseButtonLabelSlot=false;this.resizeObserver=new ResizeObserver((function(t){var e,a,n,o;if((t===null||t===void 0?void 0:t.length)===1){var r=(a=(e=t[0])===null||e===void 0?void 0:e.target)===null||a===void 0?void 0:a.getBoundingClientRect().width;var s=(o=(n=t[0])===null||n===void 0?void 0:n.target)===null||o===void 0?void 0:o.scrollWidth;i.isScrollPaneContentSmallerThanWrapper=s>r+5}}));this.collapsedOnClick=function(){i.collapsed=!i.collapsed};this.scrollPaneAtStart=true;this.isScrollPaneContentSmallerThanWrapper=true;this.scrollPaneAtEnd=false;this.childrenData={};this.theme="";this.identifier="";this.collapsed=false;this.buttons=true;this.buttonAlignment="center";this.center=false;this.selected=0}t.prototype.watchPropHandler=function(t){this.scrollToElement(t,"center")};t.prototype.componentWillLoad=function(){r(this);this.hasCollapseButtonLabelSlot=s(this.element,"collapse-button-label")};t.prototype.componentDidLoad=function(){this.resizeObserver.observe(this.scrollPaneElement);this.updateScrollButtons(this.getScrollPaneElements()[0])};t.prototype.disconnectedCallback=function(){this.resizeObserver.disconnect()};t.prototype.getScrollPaneElements=function(){return d(this.element)};t.prototype.getLastVisibleElement=function(){var t=this;var e=this.getScrollPaneElements().find((function(e){return e.getBoundingClientRect().x+e.getBoundingClientRect().width-t.scrollPaneElement.getBoundingClientRect().x>t.scrollPaneElement.clientWidth}));var i=this.getScrollPaneElements().indexOf(e);if(e.clientWidth>this.scrollPaneElement.clientWidth){return i}return i-1};t.prototype.getFirstVisibleElement=function(){var t=this;var e=this.getScrollPaneElements();var i=e.find((function(e){return e.getBoundingClientRect().x>t.scrollPaneElement.getBoundingClientRect().x}));var a=!i?e.length:e.indexOf(i);var n=Math.max(a-1,0);if(e[n].clientWidth>this.scrollPaneElement.clientWidth){return n}return a};t.prototype.updateScrollButtons=function(t,e){if(t===void 0){t=null}if(e===void 0){e=this.scrollPaneElement}if(!this.buttons){return}if(t&&t.clientWidth>this.scrollPaneElement.clientWidth){var i=this.getScrollPaneElements().indexOf(t);if(i==0){this.scrollPaneAtStart=true}if(i==this.getScrollPaneElements().length-1){this.scrollPaneAtEnd=true}return}if(e.scrollLeft<=0){this.scrollPaneAtStart=true}else if(e.scrollLeft>0){this.scrollPaneAtStart=false}if(e.clientWidth+e.scrollLeft+10>=e.scrollWidth){this.scrollPaneAtEnd=true}else if(e.clientWidth+e.scrollLeft+10<e.scrollWidth){this.scrollPaneAtEnd=false}};t.prototype.scrollToElement=function(t,e){var i=this;if(t===void 0){t=this.currentIndex}var a=this.getScrollPaneElements();if(!a||a.length===0){return}if(t+1>=a.length){t=a.length-1}if(t<0){t=0}var n=a[0].getBoundingClientRect().x;var o=5;var r=function(){if(a[0].getBoundingClientRect().x===n){o--;if(o!==0){window.requestAnimationFrame(r);return}i.updateScrollButtons(a[t])}else{window.requestAnimationFrame(r);n=a[0].getBoundingClientRect().x}};a[t].scrollIntoView({behavior:"smooth",block:"nearest",inline:e});window.requestAnimationFrame(r)};t.prototype.scrollLeft=function(){this.scrollPaneAtEnd=false;var t=this.getFirstVisibleElement();this.scrollToElement(t-1,"center")};t.prototype.scrollRight=function(){this.scrollPaneAtStart=false;var t=this.getLastVisibleElement();this.scrollToElement(t+1,"center")};t.prototype.render=function(){var t,e;var n=this;var o=this.theme==="turva"?"color-primary-darker-turva":"color-primary";var r=this.theme==="turva"?"color-gray-turva":"color-gray";return i(a,{key:"5e613776bc5519bb5706b51a2c7e0eb430a67886",class:{"duet-theme-turva":this.theme==="turva","duet-theme-default":this.theme==="default"}},this.hasCollapseButtonLabelSlot&&i("div",{key:"7642df92bec227d43dde6cdad844a50b8a75fd40",class:{collapse:true,hide:!this.isScrollPaneContentSmallerThanWrapper&&!this.collapsed}},i("duet-button",{key:"2a2b9c955233ce02fba939b7a8366f0381d1c349",variation:"plain",margin:"none","center-text":true,onClick:function(){return n.collapsedOnClick()}},i("slot",{key:"403bb72d92de84245e7d17116848faf8d1ca3996",name:"collapse-button-label"}))),i("div",{key:"4e4628fc421a80139fd71d3a0232159b7d31a53b",class:{"duet-scrollable-items":true,buttons:this.buttons,center:this.center}},i("div",{key:"7391cc68e6fcc4921bc23417a45e9144ba64d406",class:{"duet-scrollable-button-container":true,left:true,"duet-scrollable-button-container--occluded":!this.isScrollPaneContentSmallerThanWrapper}},i("button",{key:"1764f20c98b87d8755d14f8ff9991ede35f50d83",part:"".concat(this.identifier,"-button-left"),"aria-hidden":"true",class:(t={"duet-scrollable-button":true},t["duet-scrollable-button--".concat(this.buttonAlignment)]=true,t["duet-scrollable-button--left"]=true,t),onClick:function(){return n.scrollLeft()},disabled:this.scrollPaneAtStart,tabindex:"-1",hidden:!this.buttons},i("duet-icon",{key:"16edd1294a131c36f59f67179e8b1447d7eed983",color:this.scrollPaneAtStart?r:o,name:"action-arrow-left",size:"small",margin:"none"}))),i("div",{key:"b8c2cbd51498d4f6a2a85a8004396e6b379f8407",class:{"duet-scrollable-list":true,collapsed:this.collapsed},onScroll:function(){return n.updateScrollButtons()},ref:function(t){return n.scrollPaneElement=t}},i("slot",{key:"f1981b1e9fe15b835253820136cbdcc32c193c93"})),i("div",{key:"8be1066f5def1e2891f3fd49bb5db5c9639f6c77",class:{"duet-scrollable-button-container":true,right:true,"duet-scrollable-button-container--occluded":!this.isScrollPaneContentSmallerThanWrapper}},i("button",{key:"7764023d0ef66c068d4731c59d86d44f780b189a",part:"".concat(this.identifier,"-button-right"),"aria-hidden":"true",class:(e={"duet-scrollable-button":true},e["duet-scrollable-button--".concat(this.buttonAlignment)]=true,e["duet-scrollable-button--right"]=true,e),onClick:function(){return n.scrollRight()},disabled:this.scrollPaneAtEnd,tabindex:"-1",hidden:!this.buttons},i("duet-icon",{key:"945e693aa629bac7e39d40ab4c6361a92e2cab32",color:this.scrollPaneAtEnd?r:o,name:"action-arrow-right",size:"small",margin:"none"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{selected:["watchPropHandler"]}},enumerable:false,configurable:true});return t}());z.style=j;var S=".sc-duet-tab-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%}.duet-tab.sc-duet-tab{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:none;width:100%}.duet-tab.selected.sc-duet-tab{display:block}.duet-tab.has-content-id.sc-duet-tab,.duet-tab.has-content-id.selected.sc-duet-tab{display:none}.user-is-tabbing.sc-duet-tab-h .duet-tab.sc-duet-tab:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.sc-duet-tab-h .duet-tab.duet-theme-turva.sc-duet-tab:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";var C=S;var I=t("duet_tab",function(){function t(t){var i=this;e(this,t);this.setupContentElement=function(){if(i.contentId){i.tabpanelElement=document.getElementById(i.contentId);if(i.tabpanelElement){i.tabpanelElement.setAttribute("role","tabpanel");i.tabpanelElement.setAttribute("tabindex","-1");i.tabpanelElement.removeEventListener("focus",i.tabpanelElementFocusListener);i.tabpanelElement.removeEventListener("blur",i.tabpanelElementBlurListener);i.tabpanelElement.addEventListener("focus",i.tabpanelElementFocusListener);i.tabpanelElement.addEventListener("blur",i.tabpanelElementBlurListener);if(i.accessibleDescription){i.tabpanelElement.setAttribute("aria-description",i.accessibleDescription)}if(i.accessibleLabelledBy){i.tabpanelElement.setAttribute("aria-labelledby",i.accessibleLabelledBy)}if(i.selected){i.tabpanelElement.toggleAttribute("hidden",false)}else{i.tabpanelElement.toggleAttribute("hidden",true)}}}};this.tabpanelElementFocusListener=function(){if(i.element.classList.contains("user-is-tabbing")){i.tabpanelElement.style.outline="0";i.tabpanelElement.style.boxShadow=w(i.theme==="turva"?"focus-turva":"focus")}};this.tabpanelElementBlurListener=function(){i.tabpanelElement.style.outline=null;i.tabpanelElement.style.boxShadow=null};this.theme="";this.label=undefined;this.caption=undefined;this.selected=undefined;this.notificationMark=undefined;this.accessibleDescriptionDefault=null;this.accessibleDescription=this.accessibleDescriptionDefault?m(this.accessibleDescriptionDefault):null;this.accessibleLabelledBy=undefined;this.contentId=undefined}t.prototype.componentWillLoad=function(){r(this)};t.prototype.connectedCallback=function(){v(this,{prop:"accessibleDescription",defaults:"accessibleDescriptionDefault"});u(this);this.setupContentElement()};t.prototype.disconnectedCallback=function(){k(this);c(this);if(this.tabpanelElement){this.tabpanelElement.removeAttribute("role");this.tabpanelElement.removeAttribute("tabindex");this.tabpanelElement.removeAttribute("aria-description");this.tabpanelElement.removeAttribute("aria-labelledby");this.tabpanelElement.removeAttribute("hidden");this.tabpanelElement.removeEventListener("focus",this.tabpanelElementFocusListener.bind(this));this.tabpanelElement.removeEventListener("blur",this.tabpanelElementBlurListener.bind(this));this.tabpanelElement=undefined}};t.prototype.setupSelected=function(t,e){if(!!t===!!e){return}this.setupContentElement()};t.prototype.setFocus=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.tabpanelElement.focus(t);return[2]}))}))};t.prototype.render=function(){var t=this;return i("div",{ref:function(e){if(!t.contentId){t.tabpanelElement=e}},role:"tabpanel",class:{"duet-theme-turva":this.theme==="turva","duet-tab":true,selected:this.selected,"has-content-id":!!this.contentId},"aria-description":this.accessibleDescription,"aria-labelledby":this.accessibleLabelledBy,tabindex:"-1"},i("slot",null))};Object.defineProperty(t.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{selected:["setupSelected"]}},enumerable:false,configurable:true});return t}());I.style=C;var U='*,*::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;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:block}}.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom:1px solid rgb(225, 227, 230)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:rgb(228, 228, 230)}.duet-tab-variation-checked .duet-tab-group-tabs{display:flex;gap:4px;padding-right:12px;padding-left:12px;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-variation-checked .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-group-tabs{gap:8px;padding-right:16px;padding-left:16px;overflow:visible}}.duet-tab-plain-scrolling .duet-tab-group-tabs{display:flex;overflow-x:scroll;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-plain-scrolling .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-plain-scrolling .duet-tab-group-tabs{display:block;overflow:auto}}@media (min-width: 36em){duet-select{display:none !important}}.duet-tab-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;overflow:visible;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:600;line-height:1.1;color:rgb(0, 41, 77);text-align:left;text-decoration:none;cursor:pointer;background:rgb(255, 255, 255);border:2px solid rgb(225, 227, 230);border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button.duet-m-0{margin:0 !important}.duet-tab-button.duet-notification-mark-warning::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:"";border-radius:50%;background:rgb(247, 178, 40);box-shadow:0 0 0 1px #dea024}.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-warning::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-tab-button.duet-notification-mark-danger::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:"";border-radius:50%;background:rgb(222, 35, 98);box-shadow:0 0 0 1px #c82058}.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-danger::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-theme-turva .duet-tab-button{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 28, 58);border-color:rgb(228, 228, 230)}.duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:"";border-radius:50%;background:rgb(250, 164, 15);box-shadow:0 0 0 1px #e1940e}.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:"";border-radius:50%;background:rgb(224, 42, 13);box-shadow:0 0 0 1px #ca260c}.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-tab-button.duet-p-0{padding:0 !important}@media (min-width: 36em){.duet-tab-button{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid rgb(225, 227, 230);border-radius:0}}.duet-tab-button:hover{z-index:200;border-color:rgb(144, 149, 153)}.duet-theme-turva .duet-tab-button:hover{border-color:rgb(116, 116, 117)}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:rgb(255, 255, 255);background:rgb(0, 41, 77);border-color:rgb(0, 41, 77);outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:rgb(255, 255, 255);background-color:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.duet-tab-button:focus{z-index:200;outline:0}:host(.user-is-tabbing) .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain .duet-tab-button{display:inline-block;width:auto;padding-right:0;padding-left:0;margin-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain .duet-tab-button+.duet-tab-button{margin-left:36px}.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(0, 119, 179);background:rgb(255, 255, 255);border-bottom:3px solid rgb(0, 119, 179)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(198, 12, 48);border-bottom-color:rgb(198, 12, 48)}.duet-tab-variation-checked .duet-tab-button{position:relative;display:inline-block;flex-basis:0;flex-grow:1;width:200px;min-width:200px;padding:8px 4px;border-color:rgb(207, 210, 212);border-bottom-color:rgb(0, 119, 179);border-radius:4px 4px 0 0;transition:none}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button{border-color:rgb(207, 210, 212);border-bottom-color:rgb(68, 68, 69)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button{min-width:0;padding:16px}}.duet-tab-variation-checked .duet-tab-button.stackable-tab{min-width:0}.duet-tab-variation-checked .duet-tab-button:first-child{margin-left:auto}.duet-tab-variation-checked .duet-tab-button:last-child{margin-right:auto}.duet-tab-variation-checked .duet-tab-button:active{opacity:1;transition:none}.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(0, 119, 179);background:linear-gradient(180deg, rgb(243, 249, 252) 0%, rgb(255, 255, 255) 100%);border-color:rgb(0, 119, 179);border-bottom-color:#fff}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(23, 28, 58);background:linear-gradient(180deg, rgb(245, 245, 247) 0%, rgb(255, 255, 255) 100%);border-color:rgb(68, 68, 69);border-bottom-color:#fff}.duet-tab-variation-checked .duet-tab-button .checked-tab-content{display:flex;flex-direction:row;justify-content:space-between}.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:column;height:100%}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:row}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description{display:flex;flex-direction:column;overflow:hidden;overflow-wrap:break-word}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:center}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:left}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{margin-top:4px;font-size:0.875rem;font-weight:400;color:rgb(101, 119, 135)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{font-size:1rem;text-align:left}}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{color:rgb(68, 68, 69)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(0, 119, 179)}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(68, 68, 69)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:-1;margin-top:8px;margin-bottom:8px}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:1}}.duet-tab-group-content{position:relative;width:100%;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(0, 41, 77);text-align:left}.duet-tab-group-content:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.duet-theme-turva .duet-tab-group-content:focus,.duet-tab-group-content:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-group-content.checked-group-content{padding:28px 0 28px 0}.duet-tab-group-content.checked-group-content::after{position:absolute;top:-2px;left:0;width:100%;height:2px;content:" ";background-color:rgb(0, 119, 179)}.duet-theme-turva .duet-tab-group-content{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 28, 58)}.duet-theme-turva .duet-tab-group-content.checked-group-content::after{background-color:rgb(68, 68, 69)}';var E=U;var A=t("duet_tab_group",function(){function t(t){var a=this;e(this,t);this.duetChange=o(this,"duetChange",3);this.duetTabChange=o(this,"duetTabChange",7);this.duetTabChangeRequested=o(this,"duetTabChangeRequested",7);this.id=y("DuetTabGroup");this.handleKeyDown=function(t){var e;if(h(t)||p(t)){e=t.target.previousElementSibling}else if(f(t)||g(t)){e=t.target.nextElementSibling}if(b(t)&&!l(t)){t.preventDefault();a.element.querySelector("duet-tab[selected]").setFocus()}if(e){t.preventDefault();e.click();e.focus()}};this.onTabSelect=function(t){if(a.tabChangeConfirm){if(t!==a.selected){var e={value:t,component:"duet-tab-group"};a.duetTabChangeRequested.emit(e)}}else{a.openTab(t)}};this.scrollToActive=function(){if(a.variation==="checked"||a.variation==="plain-scrolling"){setTimeout((function(){var t=a.tabsContainer.querySelector(".selected");if(t){t.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})}}),50)}};this.renderTab=function(){var t=a.tabs.map((function(t,e){var n;return i("button",{role:"tab",id:a.getButtonId(e),"aria-selected":t.selected?"true":"false","aria-description":a.getAccessibleDescription(e),tabindex:t.selected?"0":"-1",part:"".concat(a.identifier,"-button ").concat(t.selected?"".concat(a.identifier,"-button--selected"):""),type:"button",class:(n={"duet-p-0":a.padding==="none","duet-tab-button":true,"stackable-tab":a.variation==="checked"&&a.tabs.length<=3,selected:t.selected},n["duet-notification-mark-".concat(t.notificationMark)]=!!t.notificationMark,n),onClick:function(){return a.onTabSelect(e)},onKeyDown:function(t){return a.handleKeyDown(t)}},a.variation==="checked"?i("div",{class:{"checked-tab-content":true,"stackable-checked-tab-content":a.tabs.length<=3}},i("div",{class:{"checked-tab-description":true,"stackable-description":a.tabs.length<=3}},i("p",null,t.label),i("p",{class:{"tab-caption":true,selected:t.selected}},t.caption)),i("div",{class:{"stackable-checkmark":a.tabs.length<=3}},i("duet-checkmark",{theme:a.theme,checked:t.selected,type:"radio","presentation-only":true,center:true}))):t.label)}));if(a.scrolls){return i("duet-scrollable",{selected:a.selected,identifier:a.identifier},t)}return t};this.tabs=[];this.selected=undefined;this.theme="";this.scrolls=false;this.collapses=true;this.accessibleLabel=undefined;this.variation="default";this.language=x();this.labelDefaults={fi:"Valitse",en:"Choose",sv:"Välj"};this.label=m(this.labelDefaults,this.language);this.labelHidden=true;this.identifier=this.id;this.margin="auto";this.padding="auto";this.setTabIndex=true;this.tabChangeConfirm=false}t.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){switch(e.label){case 0:if(typeof MutationObserver!=="undefined"){this.mutationO=new MutationObserver((function(){t.updateTabs()}));this.mutationO.observe(this.element,{attributes:true,attributeFilter:["label"],childList:true,characterData:true,subtree:true})}return[4,this.updateTabs()];case 1:e.sent();u(this);return[2]}}))}))};t.prototype.disconnectedCallback=function(){if(this.mutationO){this.mutationO.disconnect();this.mutationO=undefined}c(this)};t.prototype.componentWillLoad=function(){r(this)};t.prototype.componentDidLoad=function(){this.scrollToActive()};t.prototype.openTab=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){if(t>=this.tabs.length){throw new Error("[duet-tabs] Index ".concat(t," is out of bounds of tabs length"))}this.selected=t;this.tabs.forEach((function(e,i){e.selected=i===t}));this.scrollToActive();e={value:t,component:"duet-tab-group"};this.duetChange.emit(e);this.duetTabChange.emit(e);return[2]}))}))};t.prototype.refresh=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");return[2]}))}))};t.prototype.getTabs=function(){var t=this;var e=Array.from(this.element.querySelectorAll("duet-tab"));var i=e.filter((function(e){return e.closest("duet-tab-group")===t.element}));if(i.length===0){throw new Error("[duet-tabs] Must have at least one tab")}return i};t.prototype.getButtonId=function(t){return"".concat(this.id,"-button-").concat(t)};t.prototype.getTabId=function(t){return"".concat(this.id,"-tab-").concat(t)};t.prototype.getAccessibleDescription=function(t){var e=this.tabs[t].getAttribute("accessible-description")||null;return e};t.prototype.updateTabs=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.selected=undefined;this.tabs=this.getTabs();this.tabs.forEach((function(e,i){e.id=t.getTabId(i);if(e.selected){if(t.selected===undefined){t.selected=i}else{e.selected=false}}}));if(this.selected===undefined){this.selected=0;this.tabs[0].selected=true}return[2]}))}))};t.prototype.render=function(){var t;var e=this;var a=this.variation==="plain-scrolling"?"duet-tab-variation-plain":"duet-tab-variation-".concat(this.variation);var n=this.variation==="checked"||this.variation==="plain-scrolling";return i("div",{key:"a09d023095d80f1984c13102ed5f85594d0c2e54",class:(t={"duet-tab-group":true,"duet-theme-turva":this.theme==="turva"},t[a]=true,t["duet-tab-plain-scrolling"]=this.variation==="plain-scrolling",t["duet-tab-group-scrolls"]=this.scrolls,t["duet-tab-group-collapses"]=this.collapses,t),"aria-label":this.accessibleLabel},!n&&this.tabs.length>3&&this.collapses&&i("duet-select",{key:"6d5a053f2a39b2e5042fa199b50ef6dfcb2e8395",value:this.selected.toString(),expand:true,label:this.label,labelHidden:this.labelHidden,theme:this.theme,onDuetChange:function(t){return e.onTabSelect(Number(t.detail.value))},items:this.tabs.map((function(t,e){return{label:t.label,value:e.toString()}}))}),i("div",{key:"c314e15b44bfec35a9dce7f0b3343adb2560eb1e",role:"tablist",class:{"duet-m-0":this.margin==="none"||this.variation==="checked","duet-tab-group-tabs":true,"duet-tab-group-hidden":this.tabs.length>3&&!n,"duet-tab-group-collapses":this.collapses},ref:function(t){e.tabsContainer=t}},this.renderTab()),i("div",{key:"a05213a66ee2ac2103eeb887312551edde85914c",class:{"duet-tab-group-content":true,"duet-m-0":this.margin==="none","checked-group-content":this.variation==="checked"}},i("slot",{key:"4e1231a85f36bf98be1d5ab1054e031dd2b4b814"})))};Object.defineProperty(t.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});return t}());A.style=E}}}));