@duetds/components 6.8.9 → 6.9.1

package/lib/types/components/duet-upload/duet-upload.d.ts

@@ -54,7 +54,7 @@ export type DuetUploadTableGroupName = {
  * @slot header  - named slot - to place content after description / caption (if caption is on top)
  * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
  * @slot filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
- * @slot footer - named slot - to place content below filefooter
+ * @slot uploadfooter - named slot - to place content below filefooter
  * @slot afterfooter - named slot - to place content below "footer" / caption (if caption is on bottom)
  * @part ${this.identifier}-empty-state : duet-upload-empty-state - named part - can be used to style the empty notification area or hide it completely
  * @part ${this.identifier}-editable-table : duet-upload-editable-table - named part - can be used to style the editable-table
@@ -316,6 +316,23 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * If true the input caption will be placed below file list and footer
    */
   captionOnBottom: boolean;
+  /**
+   * Use show-uploaded-items-header to show single, generic, header for uploaded items
+   */
+  showUploadedItemsHeader: boolean;
+  /**
+   * Property to change single uploaded items header label
+   * @default {
+   *       fi: "Ladattu tiedosto.",
+   *       sv: "Nedladdad fil.",
+   *       en: "Uploaded file.",
+   *      }
+   */
+  uploadedItemsHeaderLabel: DuetLangObject;
+  /**
+   * Use hide-header to hide upload component header and caption (if caption is not on bottom)
+   */
+  hideHeader: boolean;
   /**
    * Emitted when the value has changed.
    */
@@ -380,6 +397,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    */
   groups: DuetUploadTableGroupName[];
   private kick;
+  private categoryLabel;
   watchValidHandler(newValue: boolean, oldValue: boolean): void;
   /**
    * Component lifecycle events.
@@ -427,7 +445,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private listenForActionEvents;
   private verifyValidity;
   private getGroupFromItemData;
-  private getItemHTMLFromItemData;
+  private mapFilesToUploadItems;
   private genHashName;
   private updateValueInMap;
   private updateProgress;
@@ -468,7 +486,6 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * @description This functions return sorted map items byg condition which are:
    */
   private filterMap;
-  private getColumns;
   private getActions;
-  private renderEditableTableGroups;
+  private renderUploadedItems;
 }

package/lib/types/components/duet-upload/upload-item-header.d.ts

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DuetLangObject } from "../../utils/language-utils";
+interface UploadItemHeaderProps {
+  label: DuetLangObject;
+  categoryLabel?: DuetLangObject;
+}
+export declare const UploadItemHeader: FunctionalComponent<UploadItemHeaderProps>;
+export {};

package/lib/types/components/duet-upload/upload-item.d.ts

@@ -1,10 +1,19 @@
 import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
 import { DuetFileListItem } from "./duet-upload";
-type ItemType = "pending" | "inprogress" | "error" | "success";
+import { DuetUploadErrorCode } from "./errorcodes.utils";
+type ItemType = "pending" | "inprogress" | "failure" | "success";
 interface UploadItemProps {
   data: DuetFileListItem;
   type: ItemType;
   showLinks: boolean;
+  actions: any;
+  theme: DuetTheme;
+  label?: DuetLangObject;
+  categoryLabel?: DuetLangObject;
+  errorCodes?: DuetUploadErrorCode[];
+  showCategory?: boolean;
 }
 export declare const UploadItem: FunctionalComponent<UploadItemProps>;
 export {};

package/lib/types/components.d.ts

@@ -1262,9 +1262,14 @@ export namespace Components {
           * Enable or disable the automatic responsive behaviour of the grid component. Setting this option to "true" makes sure that contents are stacked vertically on mobile (575px and under).
          */
         "responsive": boolean;
+        /**
+          * Reverse the order of the grid items when horizontal. Usefull when we want the primary item to be on bottom right on desktop, but on top on mobile and the first for screen readers.
+         */
+        "rowReverse": boolean;
     }
     interface DuetGridItem {
         "breakpoint": DuetGridBreakpoint;
+        "direction": DuetDirection;
         /**
           * Make the grid item fill the remaining available grid space.
          */
@@ -3883,6 +3888,10 @@ export namespace Components {
           * Visually hides the groups labels in the editable table list used to display the list of files
          */
         "hideGroups": boolean;
+        /**
+          * Use hide-header to hide upload component header and caption (if caption is not on bottom)
+         */
+        "hideHeader": boolean;
         /**
           * Adds a unique identifier for the upload component.
          */
@@ -3945,6 +3954,10 @@ export namespace Components {
           * If enabled the editable-table will display links on successfully uploaded items, this requires the server can respond with link URIs in the correct format and that the files are accessible to the user
          */
         "showLinks": boolean;
+        /**
+          * Use show-uploaded-items-header to show single, generic, header for uploaded items
+         */
+        "showUploadedItemsHeader": boolean;
         /**
           * Property to change the aria upload progress text read aloud by screenreaders
           * @default { fi: { inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta", inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä", done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti", doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä", files: "tiedostot", file: "tiedosto", }, sv: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades", done: "Alla {filesTotal} har lagts till", doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades", files: "filer", file: "fil", }, en: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed", done: "All {filesTotal} added successfully", doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors", files: "tiedostoa", file: "tiedosto", }, }
@@ -3970,6 +3983,11 @@ export namespace Components {
           * Method for uploading pending files
          */
         "uploadPending": () => Promise<void>;
+        /**
+          * Property to change single uploaded items header label
+          * @default { fi: "Ladattu tiedosto.", sv: "Nedladdad fil.", en: "Uploaded file.", }
+         */
+        "uploadedItemsHeaderLabel": DuetLangObject;
         /**
           * Endpoint URI that is capable of receiving the files
          */
@@ -5927,6 +5945,10 @@ declare namespace LocalJSX {
           * Enable or disable the automatic responsive behaviour of the grid component. Setting this option to "true" makes sure that contents are stacked vertically on mobile (575px and under).
          */
         "responsive"?: boolean;
+        /**
+          * Reverse the order of the grid items when horizontal. Usefull when we want the primary item to be on bottom right on desktop, but on top on mobile and the first for screen readers.
+         */
+        "rowReverse"?: boolean;
     }
     interface DuetGridItem {
         /**
@@ -8605,6 +8627,10 @@ declare namespace LocalJSX {
           * Visually hides the groups labels in the editable table list used to display the list of files
          */
         "hideGroups"?: boolean;
+        /**
+          * Use hide-header to hide upload component header and caption (if caption is not on bottom)
+         */
+        "hideHeader"?: boolean;
         /**
           * Adds a unique identifier for the upload component.
          */
@@ -8699,6 +8725,10 @@ declare namespace LocalJSX {
           * If enabled the editable-table will display links on successfully uploaded items, this requires the server can respond with link URIs in the correct format and that the files are accessible to the user
          */
         "showLinks"?: boolean;
+        /**
+          * Use show-uploaded-items-header to show single, generic, header for uploaded items
+         */
+        "showUploadedItemsHeader"?: boolean;
         /**
           * Property to change the aria upload progress text read aloud by screenreaders
           * @default { fi: { inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta", inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä", done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti", doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä", files: "tiedostot", file: "tiedosto", }, sv: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades", done: "Alla {filesTotal} har lagts till", doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades", files: "filer", file: "fil", }, en: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed", done: "All {filesTotal} added successfully", doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors", files: "tiedostoa", file: "tiedosto", }, }
@@ -8712,6 +8742,11 @@ declare namespace LocalJSX {
           * Theme of the input.
          */
         "theme"?: DuetTheme;
+        /**
+          * Property to change single uploaded items header label
+          * @default { fi: "Ladattu tiedosto.", sv: "Nedladdad fil.", en: "Uploaded file.", }
+         */
+        "uploadedItemsHeaderLabel"?: DuetLangObject;
         /**
           * Endpoint URI that is capable of receiving the files
          */

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

@@ -21,4 +21,6 @@ export declare const breakpointToToken: {
   "xx-large": string;
   "xxx-large": string;
 };
+export declare const breakpointTokensUpTo: string[];
+export declare const breakpointTokensFrom: string[];
 export type DuetBreakpoints = keyof typeof breakpointToToken;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.8.9",
+  "version": "6.9.1",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -50,9 +50,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "2.0.46",
-    "@duetds/icons": "3.0.46",
-    "@duetds/tokens": "3.0.46",
+    "@duetds/fonts": "2.0.48",
+    "@duetds/icons": "3.0.48",
+    "@duetds/tokens": "3.0.48",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "3.1.0",
     "@stencil/sass": "3.0.0",
@@ -78,5 +78,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "16394b3a5fb75bba193bf690d013b63e77a019ab"
+  "gitHead": "a85e3302211f2c61cc90459b91bd18ccd3ae03ae"
 }

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

@@ -1,243 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-0f07edcd.js';
-import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { f as fieldSorter } from './p-0b3f675e.js';
-import { i as isKeyboardClick } from './p-d8549efe.js';
-import { g as getLocaleString } from './p-6c05e879.js';
-import { h } from './p-152ee893.js';
-import { d as defineCustomElement$6 } from './p-0853da89.js';
-import { d as defineCustomElement$5 } from './p-23e46e22.js';
-import { d as defineCustomElement$4 } from './p-cefc1697.js';
-import { d as defineCustomElement$3 } from './p-2697a4f6.js';
-import { d as defineCustomElement$2 } from './p-7cc3a9b6.js';
-import { d as defineCustomElement$1 } from './p-eabaa24d.js';
-
-//simple functional component that renders the data in the table
-const TableData = ({ data, groupId, alignment }, _children) => {
-  const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
-  if (typeof data === "string") {
-    return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
-  }
-  else {
-    return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
-  }
-};
-
-const duetEditableTableCss = ".sc-duet-editable-table-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-actions-menu.sc-duet-editable-table{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button.sc-duet-editable-table{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon.sc-duet-editable-table .duet-icon.sc-duet-editable-table{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row.sc-duet-editable-table .duet-text-right.sc-duet-editable-table{text-align:right}.duet-editable-table-header.sc-duet-editable-table tr.sc-duet-editable-table .duet-editable-table-header-hidden.sc-duet-editable-table{padding:0 !important;font-size:0;border-bottom:0}";
-
-const DuetEditableTable = /*@__PURE__*/ proxyCustomElement(class extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.duetTableToggle = createEvent(this, "duetTableToggle", 7);
-    this.duetMenuClick = createEvent(this, "duetMenuClick", 7);
-    this.hasHeadSlotFirst = false;
-    this.hasHeadSlotLast = false;
-    this.sortableDefaultLabel = {
-      fi: "Järjestä",
-      en: "Click to sort",
-      sv: "Klicka för att sortera",
-    };
-    this.actionColumnLabel = {
-      en: "Actions for rows",
-      fi: "Toiminnot rivillä",
-      sv: "Åtgärder för rader",
-    };
-    /**
-     * Private methods.
-     */
-    this.toggleColumn = (column, e) => {
-      e.preventDefault();
-      const { sort_order, direction, index, key } = column;
-      this.duetTableToggle.emit({
-        sort_order,
-        index,
-        direction,
-        key,
-        component: "duet-editable-table",
-        originalEvent: e,
-      });
-    };
-    this.handleKeyDown = (column, e) => {
-      if (isKeyboardClick(e)) {
-        this.toggleColumn(column, e);
-      }
-    };
-    this.margin = "auto";
-    this.variation = "striped";
-    this.sticky = false;
-    this.stickyDistance = "with-links";
-    this.breakpoint = "small";
-    this.actions = undefined;
-    this.columns = undefined;
-    this.rows = undefined;
-    this.sortable = false;
-    this.groupId = "";
-    this.theme = "";
-    this.accessibleRole = undefined;
-    this.hideHeadVisually = false;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
-    this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
-  }
-  createLabel(column) {
-    const { sort_order, direction, index, label } = column;
-    const i18nLabel = getLocaleString(label);
-    if (!this.sortable) {
-      return i18nLabel;
-    }
-    const getButtonIcon = () => {
-      // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
-      // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
-      // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
-      if (!!sort_order && direction === 1) {
-        return "action-arrow-down-small";
-      }
-      else if (!!sort_order && direction === -1) {
-        return "action-arrow-up-small";
-      }
-      return "action-subtract-small";
-    };
-    return (h$1("span", { class: "duet-table-label", "data-index": index }, h$1("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
-  }
-  getSortedColumns() {
-    //create a new array from sort instead of mutating original
-    return [...this.columns].sort(fieldSorter(["index"]));
-  }
-  getRowSortOrder() {
-    //create a new array from sort instead of mutating original
-    const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
-    //return only key from objects that have sort_order
-    return fields
-      .filter(column => column.sort_order)
-      .map(column => {
-      // add - in-front of descending direction (required by field-sorter)
-      return column.direction === -1 ? `-${column.key}` : column.key;
-    });
-  }
-  renderTableHeader() {
-    if (!this.columns) {
-      return;
-    }
-    const sortedColumns = this.getSortedColumns();
-    return (h$1("tr", { class: {
-        "duet-table-action-header": !!this.actions,
-      } }, sortedColumns.map(column => {
-      if (column.display !== false) {
-        const label = this.createLabel(column);
-        return label !== "" ? h$1("th", { scope: "col" }, label) : h$1("td", null);
-      }
-    }), this.actions && (h$1("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h$1("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
-  }
-  renderActions(rowItem, index) {
-    // escape early
-    if (!this.actions) {
-      return;
-    }
-    // iterate through actions and add them in the sidebar
-    return (h$1("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
-      return (h$1("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${rowItem.actionDescription || ""} ${getLocaleString(actionItem.label)} ` }));
-    })));
-  }
-  renderTableBody() {
-    const columns = this.getSortedColumns();
-    const rowSortOrder = this.getRowSortOrder();
-    const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
-    // return a tbody with rows for each item in sortedRows
-    return sortedRows.map((row, index) => (h$1("tr", { class: {
-        "duet-table-action-row": !!this.actions,
-        "duet-editable-table-row": true,
-        [`duet-editable-table-row-${this.groupId}`]: true,
-      }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
-      //if we don't have any data for this column, try getting an item instead (for backwards compatibility
-      const value = row[column.key] ? row[column.key] : row.item;
-      if (column.display !== false) {
-        return h$1(TableData, { data: value, groupId: this.groupId });
-      }
-    }), this.actions && this.renderActions(row, index))));
-  }
-  /**
-   * Render Methods
-   */
-  render() {
-    return (h$1(Host, { class: {
-        [`duet-editable-table-${this.variation}`]: true,
-        "duet-editable-table": true,
-        [`duet-editable-table-${this.theme}`]: true,
-        // sticky only valid when in regular table layout
-        "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
-        "duet-editable-table-sortable": this.sortable,
-        "duet-editable-table-actions": !!this.actions,
-        "duet-m-0": this.margin === "none",
-        "duet-theme-turva": this.theme === "turva",
-      } }, h$1("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h$1("table", { role: this.accessibleRole }, h$1("caption", null, h$1("slot", { name: "tcaption" })), h$1("thead", null, this.hasHeadSlotFirst && (h$1("tr", null, h$1("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h$1("tr", null, h$1("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { name: "thead-last" }))))), h$1("tbody", null, this.renderTableBody()), h$1("tfoot", null, h$1("tr", null, h$1("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h$1("slot", { name: "tfoot" }))))))));
-  }
-  get element() { return this; }
-  static get style() { return duetEditableTableCss; }
-}, [6, "duet-editable-table", {
-    "margin": [1],
-    "variation": [1],
-    "sticky": [4],
-    "stickyDistance": [1, "sticky-distance"],
-    "breakpoint": [1],
-    "actions": [1040],
-    "columns": [1040],
-    "rows": [1040],
-    "sortable": [4],
-    "groupId": [1, "group-id"],
-    "theme": [1025],
-    "accessibleRole": [1, "accessible-role"],
-    "hideHeadVisually": [4, "hide-head-visually"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-editable-table", "duet-action-button", "duet-button", "duet-icon", "duet-spinner", "duet-table", "duet-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-editable-table":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetEditableTable);
-      }
-      break;
-    case "duet-action-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "duet-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "duet-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "duet-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "duet-table":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "duet-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { DuetEditableTable as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-4b9ef5dc.js

@@ -1,178 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-0f07edcd.js';
-import { m as media_query_large, a as media_query_medium, b as media_query_small } from './p-c4d8cad0.js';
-import { w as watchForOptions, a as watchForElement } from './p-12721178.js';
-
-const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:row !important}@media (max-width: 22.5em){.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 62em){.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}@media (max-width: 35.9375em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 62em){.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 62em){.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 62em){.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 62em){.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 62em){.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 62em){.duet-grid-align-baseline.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";
-
-function isGridItem(element) {
-  return element.tagName.toLowerCase() === "duet-grid-item";
-}
-const DuetGrid = /*@__PURE__*/ proxyCustomElement(class 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.alignment = "top";
-    this.distribution = "default";
-    this.mobile = "";
-  }
-  /**
-   * 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;
-    });
-  }
-  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",
-        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
-        "duet-grid-align-center": this.alignment === "center",
-        "duet-grid-align-stretch": this.alignment === "stretch",
-        "duet-grid-align-baseline": this.alignment === "baseline",
-        "duet-grid-distribution-left": this.distribution === "left",
-        "duet-grid-distribution-right": this.distribution === "right",
-        "duet-grid-distribution-center": this.distribution === "center",
-        "duet-grid-distribution-between": this.distribution === "space-between",
-        "duet-grid-distribution-around": this.distribution === "space-around",
-        "duet-grid-distribution-evenly": this.distribution === "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",
-      } }));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "responsive": ["updateGridItems"],
-    "breakpoint": ["updateGridItems"]
-  }; }
-  static get style() { return duetGridCss; }
-}, [2, "duet-grid", {
-    "responsive": [4],
-    "breakpoint": [1],
-    "direction": [1],
-    "alignment": [1],
-    "distribution": [1],
-    "mobile": [1],
-    "distributeFormElement": [32]
-  }]);
-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-01006278.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import{h as o}from"./p-cfc2b098.js";const s=o=>{"setFocus"in o?o.setFocus():o.focus()},c=({moveFocusTo:c})=>o("div",{class:"duet-focus-guard","aria-hidden":"true",tabIndex:0,onFocus:()=>s(c)});export{c as F,s as f}