@duetds/components 6.10.3 → 6.10.4

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -0,0 +1,299 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { getLocaleString } from "../../utils/language-utils";
+import { getI18nError } from "../duet-upload/errorcodes.utils";
+import { formatBytes } from "../duet-upload/upload.helpers";
+export class DuetUploadItem {
+  constructor() {
+    this.fileUploadingInfo = {
+      fi: "Tiedosto latautuu",
+      sv: "Filen laddas upp",
+      en: "File is uploading",
+    };
+    this.onLinkClick = (event) => {
+      const { url, meta } = this.data;
+      if (!!this.linkClickEvent) {
+        event.preventDefault();
+        this.linkClickEvent.emit({
+          component: "duet-upload",
+          data: { name: this.data.item.name, url, meta },
+        });
+      }
+    };
+    this.theme = "";
+    this.data = undefined;
+    this.type = undefined;
+    this.showLinks = undefined;
+    this.actions = undefined;
+    this.label = undefined;
+    this.categoryLabel = undefined;
+    this.errorCodes = undefined;
+    this.showCategory = undefined;
+    this.linkClickEvent = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async focusActionButton() {
+    if (this.actionButton) {
+      await this.actionButton.setFocus();
+    }
+  }
+  getFileNameLine() {
+    const { item, size, uploaded, url, progress, error } = this.data;
+    const { name } = item;
+    const ContentName = (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
+    const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } }, "(", formatBytes(size), ")"));
+    switch (this.type) {
+      case "inprogress":
+        return (h("span", { class: "duet-upload-item-name", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-visually-hidden", null, h("duet-paragraph", null, getLocaleString(this.fileUploadingInfo))), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+      case "pending":
+        return (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
+      case "failure":
+        return (h("span", { class: "duet-upload-item-error", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, this.errorCodes))));
+      default:
+        return uploaded && url && this.showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, h("duet-link", { onClick: this.onLinkClick, url: url, external: true }, ContentName), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, ContentName, h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText));
+    }
+  }
+  render() {
+    const { uid, meta } = this.data;
+    const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+    const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
+    return (h("div", { class: {
+        "upload-item-row": true,
+      } }, this.showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { class: "item-actions" }, this.actions.map(actionItem => {
+      return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: false, ref: button => (this.actionButton = button) }));
+    }))));
+  }
+  static get is() { return "duet-upload-item"; }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the card. Can be one of: \"default\", \"turva\"."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetFileListItem",
+          "resolved": "{ uid: string; item: File; size: number; meta?: Record<string, any>; uploaded: boolean; error: DuetUploadErrorCode; progress: number; deleted: boolean; valid: boolean; xhr: false | DuetXhrRequest; url: string | false; group?: string; html?: string; status?: number; pending?: boolean; }",
+          "references": {
+            "DuetFileListItem": {
+              "location": "import",
+              "path": "../duet-upload/duet-upload"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ItemType",
+          "resolved": "\"failure\" | \"inprogress\" | \"pending\" | \"success\"",
+          "references": {
+            "ItemType": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload-item/duet-upload-item.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
+      },
+      "showLinks": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-links",
+        "reflect": false
+      },
+      "actions": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "actions",
+        "reflect": false
+      },
+      "label": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject",
+          "resolved": "DuetLangObject",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "categoryLabel": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject",
+          "resolved": "DuetLangObject",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "errorCodes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetUploadErrorCode[]",
+          "resolved": "DuetUploadErrorCode[]",
+          "references": {
+            "DuetUploadErrorCode": {
+              "location": "import",
+              "path": "../duet-upload/errorcodes.utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "showCategory": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-category",
+        "reflect": false
+      },
+      "linkClickEvent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EventEmitter<DuetUploadEvent>",
+          "resolved": "EventEmitter<DuetUploadEvent>",
+          "references": {
+            "EventEmitter": {
+              "location": "import",
+              "path": "@stencil/core"
+            },
+            "DuetUploadEvent": {
+              "location": "import",
+              "path": "../duet-upload/duet-upload"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "focusActionButton": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-0bab8976.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-dbb9df4e.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-c221f8d5.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-80cd62f8.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-9e321809.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-5c48ca92.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-e550208a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getColorByName } from './p-de68431d.js';
-import { d as defineCustomElement$4 } from './p-b0a1fc7a.js';
-import { d as defineCustomElement$3 } from './p-9a39285c.js';
-import { d as defineCustomElement$2 } from './p-bd3f4de1.js';
+import { d as defineCustomElement$4 } from './p-226f50bb.js';
+import { d as defineCustomElement$3 } from './p-171c70e8.js';
+import { d as defineCustomElement$2 } from './p-26a65533.js';
 
 const duetBannerCss = "*,*::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;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height: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-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-e550208a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-9a39285c.js';
+import { d as defineCustomElement$2 } from './p-171c70e8.js';
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}";
 

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-e550208a.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLocaleString } from './p-076452be.js';
-import { d as defineCustomElement$2 } from './p-9a39285c.js';
+import { d as defineCustomElement$2 } from './p-171c70e8.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

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

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

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-e550208a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$3 } from './p-9a39285c.js';
-import { d as defineCustomElement$2 } from './p-bd3f4de1.js';
+import { d as defineCustomElement$3 } from './p-171c70e8.js';
+import { d as defineCustomElement$2 } from './p-26a65533.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;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\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 

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

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

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

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-e550208a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
 import { g as getColorByName } from './p-de68431d.js';
-import { d as defineCustomElement$3 } from './p-9a39285c.js';
-import { d as defineCustomElement$2 } from './p-88a1aa29.js';
+import { d as defineCustomElement$3 } from './p-171c70e8.js';
+import { d as defineCustomElement$2 } from './p-7681059e.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

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

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

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

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

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-e550208a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
-import { d as defineCustomElement$2 } from './p-9a39285c.js';
+import { d as defineCustomElement$2 } from './p-171c70e8.js';
 
-const duetChipCss = "*,*::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;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;padding:8px 16px 9px !important;position:relative;z-index:100;display:block;width:100%;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease, padding 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(23, 28, 58)}.duet-chip-container.duet-theme-turva:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-chip-container.duet-theme-turva:hover button,.duet-chip-container.duet-theme-turva:hover label{color:rgb(23, 28, 58) !important}.duet-chip-container:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-chip-container:hover button,.duet-chip-container:hover label{color:rgb(0, 119, 179) !important}.duet-chip-container:hover.duet-theme-turva button,.duet-chip-container:hover.duet-theme-turva label{color:rgb(198, 12, 48) !important}.duet-chip-container button,.duet-chip-container label{width:100%;height: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:0.875rem;font-weight:600;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container button:hover,.duet-chip-container label:hover{color:rgb(0, 119, 179) !important}.duet-chip-container .duet-chip-icon-container{display:inline-block;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon{padding-left:12px !important}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked{padding-left:12px !important;background:rgb(230, 242, 248);border-color:rgb(230, 242, 248)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container{padding-right:8px}.duet-chip-container.duet-chip-filter-checked duet-icon:not(.check-mark){width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked duet-icon.check-mark{width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-input{display:inline-flex;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-remove-button{padding:8px 12px;margin:-8px 0}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
+const duetChipCss = "*,*::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;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease, padding 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(23, 28, 58)}.duet-chip-container.duet-theme-turva:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-chip-container.duet-theme-turva:hover button,.duet-chip-container.duet-theme-turva:hover label{color:rgb(23, 28, 58) !important}.duet-chip-container:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-chip-container:hover button,.duet-chip-container:hover label{color:rgb(0, 119, 179) !important}.duet-chip-container:hover.duet-theme-turva button,.duet-chip-container:hover.duet-theme-turva label{color:rgb(198, 12, 48) !important}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:7px 16px;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:0.875rem;font-weight:600;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container button:hover,.duet-chip-container label:hover{color:rgb(0, 119, 179) !important}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:8px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container duet-icon:not(.check-mark){width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked{background:rgb(230, 242, 248);border-color:rgb(230, 242, 248)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container{padding-right:8px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container div.duet-chip-popup-disclosure{padding-left:8px}.duet-chip-container div.duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
 
 const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   constructor() {
@@ -20,6 +20,55 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
      * Own Properties.
      */
     this.chipId = createID("DuetChip");
+    this.popupSetUp = () => {
+      const popup = this.element.querySelector("duet-popup-menu");
+      if (popup) {
+        this.popup = popup;
+        popup.controller = this.element;
+        const labelSpan = this.element.querySelector("span");
+        const originalText = labelSpan.textContent;
+        const originalValue = this.value;
+        if (!popup.id) {
+          popup.id = "popup-menu";
+        }
+        popup.addEventListener("duetToggle", (evt) => {
+          this.popupOpen = evt.detail.open;
+        });
+        const clearActive = () => {
+          popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+            item.active = false;
+          });
+        };
+        popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+          item.addEventListener("click", evt => {
+            var _a;
+            const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.innerText;
+            if (!item.active) {
+              clearActive();
+              item.active = true;
+              labelSpan.textContent = item.innerText;
+              this.value = value;
+              this.checked = true;
+            }
+            else {
+              clearActive();
+              labelSpan.textContent = originalText;
+              this.value = originalValue;
+              this.checked = false;
+            }
+            this.emitChange(evt);
+            // A workaround to the difference of event handling between the browers.
+            // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
+            // open the popup again. Firefox does not have this behavior.
+            setTimeout(() => {
+              if (this.popup.isOpen()) {
+                this.popup.hide();
+              }
+            });
+          });
+        });
+      }
+    };
     /**
      * Component event handling.
      */
@@ -41,21 +90,42 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         component: "duet-chip",
       });
     };
-    this.toggleChecked = (ev) => {
-      this.checked = !this.checked;
+    this.emitChange = originalEvent => {
       this.duetChange.emit({
-        originalEvent: ev,
+        originalEvent,
         checked: this.checked,
         value: this.value,
         component: "duet-chip",
       });
     };
-    this.remove = (ev) => {
-      ev.stopPropagation();
-      ev.preventDefault();
+    /**
+     * Change checked state and emit duetChange event.
+     */
+    this.onFilterChange = (evt) => {
+      this.checked = !this.checked;
+      this.emitChange(evt);
+    };
+    /**
+     * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
+     */
+    this.onFilterClick = (evt) => {
+      if (this.popup) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        this.popup.toggle();
+      }
+    };
+    /**
+     * Remove input chip
+     */
+    this.onRemoveClick = (evt) => {
+      evt.stopPropagation();
+      evt.preventDefault();
       this.element.remove();
     };
     this.focus = false;
+    this.popup = undefined;
+    this.popupOpen = undefined;
     this.accessibleLabel = undefined;
     this.variation = "button";
     this.icon = "";
@@ -70,8 +140,10 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.popupSetUp();
   }
   render() {
+    var _a;
     const identifier = this.identifier || this.chipId;
     const classes = {
       "duet-chip-container": true,
@@ -80,12 +152,13 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       "duet-chip-has-icon": !!this.icon,
       "duet-theme-turva": this.theme === "turva",
       "duet-chip-filter-checked": this.variation === "filter" && this.checked,
+      "duet-chip-filter-popup-open": this.popupOpen,
     };
     const focusHandlers = {
       onFocus: this.onFocus,
       onBlur: this.onBlur,
     };
-    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.remove }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onChange: this.toggleChecked }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xx-small", margin: "none", color: "currentColor" }))))))));
   }
   get element() { return this; }
   static get style() { return duetChipCss; }
@@ -95,10 +168,12 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     "icon": [1],
     "theme": [1025],
     "identifier": [1],
-    "value": [1],
+    "value": [1025],
     "name": [1],
     "checked": [1540],
-    "focus": [32]
+    "focus": [32],
+    "popup": [32],
+    "popupOpen": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {