@duetds/components 4.30.0 → 4.33.0

package/lib/cjs/duet-editable-table-button_3.cjs.entry.js

@@ -0,0 +1,232 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b724d698.js');
+const languageUtils = require('./language-utils-aa282901.js');
+const themeableComponent = require('./themeable-component-0c1be552.js');
+const tokenUtils = require('./token-utils-63a9c8dc.js');
+const createId = require('./create-id-c3b984b1.js');
+require('./string-utils-267e3dbb.js');
+require('./tokens.module-6b2df1c2.js');
+
+const duetEditableTableButtonCss = "*.sc-duet-editable-table-button,*.sc-duet-editable-table-button::after,*.sc-duet-editable-table-button::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button{display:flex;align-content:space-between;justify-content:center;min-width:32px;max-width:32px;height:100%;min-height:32px;max-height:32px;padding:0;margin:0;cursor:pointer !important;background-color:transparent;border:1px solid;border-radius:50%}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button duet-icon.sc-duet-editable-table-button{align-self:center}";
+
+let DuetEditableTableButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetEditableItemAction = index.createEvent(this, "duetEditableItemAction", 7);
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * action items passed from host component
+     * @internal
+     */
+    this.actions = undefined;
+    /**
+     * uid that gets passed along when the action is emitted
+     * @internal
+     */
+    this.uid = "";
+    /**
+     * group associated with action
+     * @internal
+     */
+    this.group = "";
+    /**
+     * key of the item in the map
+     * @internal
+     */
+    this.keyName = "";
+    this.onMouseEnter = () => {
+      this.isHovering = true;
+    };
+    this.onMouseLeave = () => {
+      this.isHovering = false;
+    };
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  emitActionEvent(ev) {
+    this.duetEditableItemAction.emit({
+      originalEvent: ev,
+      uid: this.uid,
+      group: this.group,
+      action: this.actions.id,
+      keyName: this.keyName,
+      component: "duet-editable-table-item",
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h("button", { style: {
+        "border-color": this.isHovering
+          ? tokenUtils.getColorByName(this.actions.color_hover)
+          : tokenUtils.getColorByName(this.actions.color),
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "menuitem", class: "duet-editable-table-actions-items-button", "aria-label": this.actions.label ? languageUtils.getLocaleString(this.actions.label) : undefined, onClick: ev => this.emitActionEvent(ev) }, index.h("duet-icon", { class: "duet-editable-table-actions-items-icon", size: "x-small", name: this.actions.icon, color: this.isHovering ? this.actions.color_hover : this.actions.color, margin: "none" })));
+  }
+  get el() { return index.getElement(this); }
+};
+DuetEditableTableButton.style = duetEditableTableButtonCss;
+
+const duetFieldsetCss = "*,*::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-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{border:0}legend{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-legend-wrapper{position:relative;display:block;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:600;line-height:1.5;color:#00294d;text-align:left;background:transparent}.duet-theme-turva .duet-legend-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;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:400;line-height:1.25;color:#de2362;border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{color:#e02a0d}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+let DuetFieldset = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.errorId = createId.createID("DuetError");
+    this.labelId = createId.createID("DuetLabel");
+    this.hasTooltip = false;
+    /**
+     * Theme of the fieldset.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    this.checkHasTooltip = () => {
+      this.hasTooltip = !!this.element.querySelector("[slot='tooltip']");
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+    this.checkHasTooltip();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, { class: { "duet-m-0": this.margin === "none" } }, index.h("fieldset", { "aria-labelledby": `${this.labelId} ${this.errorId}`, class: {
+        "duet-fieldset": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, index.h("legend", { id: this.labelId }, index.h("span", null, this.label), this.caption && index.h("span", null, this.caption)), index.h("div", { class: {
+        "duet-legend-wrapper": true,
+        "duet-legend-has-caption": !!this.caption,
+        "duet-legend-has-tooltip": this.hasTooltip,
+        "duet-legend-hidden": this.labelHidden,
+      } }, index.h("div", { class: "duet-fieldset-label" }, index.h("span", { "aria-hidden": "true" }, this.label), index.h("slot", { onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (index.h("div", { class: "duet-fieldset-caption", "aria-hidden": "true" }, index.h("duet-caption", { margin: "none" }, this.caption)))), index.h("slot", null), index.h("span", { class: "duet-fieldset-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && index.h("span", null, this.error)))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetFieldset.style = duetFieldsetCss;
+
+let DuetUploadAriaStatus = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * State() variables
+     */
+    this.statusMessage = null;
+    /**
+     * State() variables
+     */
+    this.statusMessageLabel = null;
+    /**
+     * Adds accessible label that is read aloud
+     */
+    this.accessibleAriaLive = "polite";
+    /**
+     * valid file amount
+     */
+    this.valid = undefined;
+    /**
+     * total files
+     */
+    this.total = undefined;
+    /**
+     * invalid file amount
+     */
+    this.invalid = undefined;
+    /**
+     * valid file amount
+     */
+    this.inprogress = undefined;
+    /**
+     * Component lifecycle events.
+     */
+    this.replacePlaceHolders = (statusString) => {
+      const addFiles = (amount) => {
+        return amount > 1 ? `${amount} ${this.statusMessageLabel.files}` : `${amount} ${this.statusMessageLabel.file}`;
+      };
+      return statusString
+        .replace("{filesUploaded}", addFiles(this.valid))
+        .replace("{filesInProgress}", addFiles(this.inprogress))
+        .replace("{filesTotal}", addFiles(this.total))
+        .replace("{filesWithErrors}", addFiles(this.invalid));
+    };
+    this.getStatusMessage = () => {
+      const { done, inProgress, doneWithErrors, inProgressWithErrors } = this.statusMessageLabel;
+      const hasErrors = this.invalid > 0;
+      const isInProgress = this.inprogress > 0;
+      const isInProgressWithErrors = this.inprogress > 0 && hasErrors;
+      const isDone = this.valid === this.total && !isInProgress && !hasErrors;
+      const isDoneWithErrors = this.valid + this.invalid === this.total && !isInProgress;
+      if (isDone) {
+        this.statusMessage = this.replacePlaceHolders(done);
+        return;
+      }
+      else if (isInProgressWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(inProgressWithErrors);
+        return;
+      }
+      else if (isInProgress) {
+        this.statusMessage = this.replacePlaceHolders(inProgress);
+        return;
+      }
+      else if (isDoneWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(doneWithErrors);
+        return;
+      }
+      return;
+    };
+  }
+  watchHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.getStatusMessage();
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, { role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, index.h("duet-visually-hidden", null, this.statusMessage)));
+  }
+  static get watchers() { return {
+    "valid": ["watchHandler"],
+    "invalid": ["watchHandler"],
+    "inprogress": ["watchHandler"],
+    "total": ["watchHandler"]
+  }; }
+};
+
+exports.duet_editable_table_button = DuetEditableTableButton;
+exports.duet_fieldset = DuetFieldset;
+exports.duet_upload_aria_status = DuetUploadAriaStatus;

package/lib/cjs/{duet-table.cjs.entry.js → duet-editable-table_3.cjs.entry.js}

@@ -5,9 +5,211 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0c949193.js');
-const tokens_module = require('./tokens.module-53b3bd92.js');
+const index = require('./index-b724d698.js');
+const jsUtils = require('./js-utils-33a9dbe3.js');
+const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
+const tokens_module = require('./tokens.module-6b2df1c2.js');
+require('./string-utils-267e3dbb.js');
+
+const duetEditableTableCss = "duet-editable-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-header tr .duet-editable-table-header-hidden{padding:0 !important;font-size:0;border-bottom:0}";
+
+let DuetEditableTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * State() variables
+     * @internal
+     */
+    this.tick = Date.now();
+    /**
+     * Map of items that contain list of things.
+     */
+    this.items = new Map();
+    /**
+     * Array of internationalized defaults for the default groups labels.
+     */
+    this.groupsLabelDefaults = {
+      fi: "Kaikki",
+      en: "All items",
+      sv: "Alla objekt",
+    };
+    /**
+     * Array of internationalized defaults for the default action labels.
+     */
+    this.actionLabelDefaults = {
+      fi: "Toiminnot",
+      en: "Actions",
+      sv: "Handlingar",
+    };
+    /**
+     * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
+     * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
+     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+     */
+    this.groups = [
+      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
+    ];
+    /**
+     * Array of actions that are mapped via the map variable to the various groups defined in group.
+     * @default undefined
+     * @example [{
+                variation: "default",
+                icon: "action-edit-2",
+                id: "edit",
+                map: ["success"],
+                label: {
+                  fi: " Label",
+                  en: " Label",
+                  sv: " Label",
+                }
+              }]
+     */
+    this.actions = undefined;
+    /**
+     * Shows or hides the table labels.
+     */
+    this.hideGroups = false;
+    /**
+     * Exposes the aria role for optimizing accessibility.
+     */
+    this.accessibleRole = undefined;
+    /**
+     * Private methods.
+     */
+    this.kick = jsUtils.debounce(() => {
+      this.tick = Date.now();
+    }, 100); // will trigger re-render
+    this.filterMap = needle => {
+      if (needle === "all") {
+        return Array.from(this.items);
+      }
+      return Array.from(this.items).filter(item => needle === item[1].group);
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    if (typeof this.groups === "string") {
+      this.internalGroupArray = languageUtils.sanitizeString(this.groups);
+    }
+    else {
+      this.internalGroupArray = this.groups;
+    }
+    if (typeof this.actions === "string") {
+      this.internalActionsArray = languageUtils.sanitizeString(this.actions);
+    }
+    else {
+      this.internalActionsArray = this.actions;
+    }
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * Method to force an update of a tabular data array.
+   * when called the method will rerender the entire tabular structure.
+   */
+  async updateTable(passedItems = undefined) {
+    this.items = new Map(passedItems || this.items);
+    this.kick();
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+      } }, this.internalGroupArray.map(group => {
+      const currentGroup = this.filterMap(group.id);
+      if (!currentGroup.length) {
+        return;
+      }
+      return (index.h("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" }, index.h("table", { class: "duet-editable-table", "aria-role": this.accessibleRole }, index.h("thead", { class: "duet-editable-table-header" }, index.h("tr", null, index.h("th", { class: {
+          "duet-editable-table-header-hidden": this.hideGroups,
+        } }, !this.hideGroups ? (languageUtils.getLocaleString(group.label)) : (index.h("duet-visually-hidden", null, languageUtils.getLocaleString(group.label)))), index.h("th", { class: {
+          "duet-editable-table-header-hidden": this.hideGroups,
+        } }, index.h("duet-visually-hidden", null, group.actionLabel
+        ? languageUtils.getLocaleString(group.actionLabel)
+        : languageUtils.getLocaleString(this.actionLabelDefaults))))), index.h("tbody", null, currentGroup.map(dataAsArray => {
+        const [key, value] = dataAsArray;
+        return (index.h("duet-editable-table-item", { keyName: key, data: Object.assign({}, value), groupId: group.id, part: group.id, actions: this.internalActionsArray }));
+      })))));
+    })));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetEditableTable.style = duetEditableTableCss;
+
+//simple functional component that renders the data in the table
+const TableData = ({ data, groupId }, _children) => {
+  if (typeof data === "string") {
+    return index.h("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content` });
+  }
+  else {
+    return (index.h("td", { class: "duet-editable-table-content", part: `${groupId}content` }, data));
+  }
+};
+
+const duetEditableTableItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{display:table-row;height:32px}.duet-editable-table-content,.duet-editable-table-actions{height:32px;padding:12px 0;vertical-align:middle;break-word:break-all;border-bottom:1px solid #e1e3e6}.duet-editable-table-actions-items{display:flex;justify-content:flex-end}.duet-editable-table-actions-items duet-editable-table-button{padding-left:8px}.duet-editable-table .editable-item-small{font-size:0.75rem;font-weight:400}";
+
+let DuetEditableTableItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetEditableItemAction = index.createEvent(this, "duetEditableItemAction", 7);
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * Actions that can be performed on the element
+     */
+    this.actions = undefined;
+    /**
+     * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
+     * @internal
+     */
+    this.groupId = "";
+    /**
+     * Key used to identify item, when running actions
+     */
+    this.keyName = "";
+    /**
+     * Object of data itemsused to render the entire row
+     */
+    this.data = undefined;
+  }
+  watchPropHandler(_newValue, _oldValue) {
+    // console.log("The new value of activated is: ", _newValue)
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, { role: "row" }, index.h(TableData, { data: this.data.item, groupId: this.groupId }), index.h("td", { class: "duet-editable-table-actions" }, index.h("div", { class: "duet-editable-table-actions-items", part: `${this.groupId}actions` }, this.actions.map(result => {
+      const { map = undefined } = result;
+      // if map has been specified, only show the current action if groupID matches the map array
+      if (map && !map.includes(this.groupId)) {
+        return;
+      }
+      return (index.h("duet-editable-table-button", { keyName: this.keyName, group: this.data.group, uid: this.data.uid, actions: result, theme: this.theme }));
+    })))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "data": ["watchPropHandler"]
+  }; }
+};
+DuetEditableTableItem.style = duetEditableTableItemCss;
 
 const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{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;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}.duet-table-flattened table,.duet-table-flattened thead,.duet-table-flattened tbody,.duet-table-flattened tfoot,.duet-table-flattened th,.duet-table-flattened td,.duet-table-flattened tr{display:block}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:#444445}.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:#e4e4e6}.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:#e4e4e6}.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}";
 
@@ -129,4 +331,6 @@ let DuetTable = class {
 };
 DuetTable.style = duetTableCss;
 
+exports.duet_editable_table = DuetEditableTable;
+exports.duet_editable_table_item = DuetEditableTableItem;
 exports.duet_table = DuetTable;

package/lib/cjs/duet-empty-state.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0c949193.js');
+const index = require('./index-b724d698.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 
 const duetEmptyStateCss = "*,*::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%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}.duet-empty-state.duet-theme-turva{color:#171c3a;background:#f5f5f7}";

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

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0c949193.js');
+const index = require('./index-b724d698.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');
-const languageUtils = require('./language-utils-70d6a9a4.js');
-const stringUtils = require('./string-utils-a6de43d8.js');
+const languageUtils = require('./language-utils-aa282901.js');
+const stringUtils = require('./string-utils-267e3dbb.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 
 var actionArrowRight={"title":"action-arrow-right","tags":"action arrow right caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M5.499 24a.752.752 0 0 1-.53-1.281L15.689 12 4.969 1.28c-.142-.141-.22-.33-.22-.53s.078-.389.22-.53c.141-.142.33-.22.53-.22s.389.078.53.22l10.72 10.72a1.5 1.5 0 0 1 .001 2.119L6.029 23.78a.743.743 0 0 1-.53.22z\"/></svg>"};
@@ -75,7 +75,7 @@ let DuetFooter = class {
      * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
      * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
-    this.accessibleLabelExternal = languageUtils.getLocaleString(this.accessibleLabelExternalDefaults);
+    this.accessibleLabelExternal = languageUtils.getLocaleString(this.accessibleLabelExternalDefaults, this.language);
     /**
      * Component event handling.
      */

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0c949193.js');
-const watchOptions = require('./watch-options-3877c082.js');
+const index = require('./index-b724d698.js');
+const watchOptions = require('./watch-options-d88afac0.js');
 const themeableComponent = require('./themeable-component-0c1be552.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}@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: 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-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-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}@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: 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}}";
@@ -17,6 +17,7 @@ function isGridItem(element) {
 let DuetGrid = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.distributeFormElement = false;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
      * Setting this option to "true" makes sure that contents are stacked vertically
@@ -33,7 +34,9 @@ let DuetGrid = class {
      */
     this.direction = "horizontal";
     /**
-     * Adjusts the vertical alignment of the grid items.
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
      */
     this.alignment = "top";
     /**
@@ -45,14 +48,34 @@ let DuetGrid = class {
      */
     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 = watchOptions.watchForOptions(el, "duet-grid-item", () => {
       this.updateGridItems();
     });
+    if (this.distributeFormElement) {
+      this.mutation1 = watchOptions.watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+    }
     this.updateGridItems();
   }
   disconnectedCallback() {
@@ -60,6 +83,10 @@ let DuetGrid = class {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
   }
   /**
    * Local methods
@@ -71,6 +98,27 @@ let DuetGrid = class {
       item.breakpoint = this.breakpoint;
     });
   }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    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) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -80,7 +128,7 @@ let DuetGrid = class {
         "duet-grid": true,
         "duet-no-stacking": !this.responsive,
         "duet-grid-align-top": this.alignment === "top",
-        "duet-grid-align-bottom": this.alignment === "bottom",
+        "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",