@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/dist-custom-elements/duet-divider.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetDivider extends Components.DuetDivider, HTMLElement {}
-export const DuetDivider: {
-    prototype: DuetDivider;
-    new (): DuetDivider;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetDivider$1, d as defineCustomElement$1 } from './p-a3d3c420.js';
-
-const DuetDivider = DuetDivider$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetDivider, defineCustomElement };

package/lib/dist-custom-elements/duet-editable-table.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetEditableTable extends Components.DuetEditableTable, HTMLElement {}
-export const DuetEditableTable: {
-    prototype: DuetEditableTable;
-    new (): DuetEditableTable;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-editable-table.js

@@ -1,258 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { f as fieldSorter } from './p-9e371678.js';
-import { i as isKeyboardClick } from './p-8db11326.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { h } from './p-993aea39.js';
-import { d as defineCustomElement$7 } from './p-c1e56f9a.js';
-import { d as defineCustomElement$6 } from './p-42c1fc90.js';
-import { d as defineCustomElement$5 } from './p-7b6a89e9.js';
-import { d as defineCustomElement$4 } from './p-f8ba399b.js';
-import { d as defineCustomElement$3 } from './p-959f2240.js';
-import { d as defineCustomElement$2 } from './p-4f6ac36d.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 = ":host{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,td.duet-editable-table-actions-menu{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon .duet-icon{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row .duet-text-right{text-align:right}.duet-editable-table-header tr .duet-editable-table-header-hidden{padding:0 !important;font-size:0;border-bottom:0}";
-const DuetEditableTableStyle0 = duetEditableTableCss;
-
-const DuetEditableTable$1 = /*@__PURE__*/ proxyCustomElement(class DuetEditableTable extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetTableToggle = createEvent(this, "duetTableToggle", 7);
-        this.duetMenuClick = createEvent(this, "duetMenuClick", 7);
-        this.hasHeadSlotFirst = false;
-        this.hasHeadSlotLast = false;
-        this.hasFootSlot = 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.language = getLanguage();
-        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']");
-        this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this);
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-    }
-    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": this.sortableDefaultLabel[this.language], 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, this.actionColumnLabel[this.language])))));
-    }
-    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, { key: '05720c6ef38164df71b02c23fb45d3d84808c2ac', 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", { key: '52033d6f9c4e8ca460bacee6e2b8ea93da3b9eb8', 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", { key: '7f0689d1e576d5f0c5324715feaf21ce21c42e97', role: this.accessibleRole }, h$1("caption", { key: '4e18555d5513dde6724a449d12030cc666937367' }, h$1("slot", { key: 'df9bcd3bde75a2669a08eb2ff0c67720750e5450', name: "tcaption" })), h$1("thead", { key: 'efbbe81840f6e9ae9e0cc91fee5653c43181f131' }, this.hasHeadSlotFirst && (h$1("tr", { key: '36d1a860bf16229740501f3b076b02125d1b3d85' }, h$1("td", { key: '24c22fca3cbfef4ab9e2582cf32bf967654b8b43', class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { key: 'a02148a1d13dc8c3147b26da2f5aa84e3b359cdf', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h$1("tr", { key: '7b7ab392f982f5f7ce4caa5e86f7a1062412aad2' }, h$1("td", { key: 'cd739dea8b81f3290bb86d7e977fa83d124fdd03', class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { key: '068a9f86388a25ca00944d8e9ecfbed6cf0e2cfe', name: "thead-last" }))))), h$1("tbody", { key: 'f65077b6dee57c962826c459ddb044d4230753c5' }, this.renderTableBody()), this.hasFootSlot && (h$1("tfoot", { key: 'eceeface4ad0a0bbb15dc188a343291cef04ec72' }, h$1("tr", { key: 'aff41dc81c24e09a03db4742bf6d51c17b8ce937' }, h$1("td", { key: '5d332218393462356c02ca19ff9c3398fbeb89a7', class: "duet-editable-table-footer-menu", colSpan: 99 }, h$1("slot", { key: 'b438187cfa67ef90452783e9522d106ecf9ab9d3', name: "tfoot" })))))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetEditableTableStyle0; }
-}, [1, "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"],
-        "language": [32]
-    }]);
-function defineCustomElement$1() {
-    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$1);
-            }
-            break;
-        case "duet-action-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-table":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetEditableTable = DuetEditableTable$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetEditableTable, defineCustomElement };

package/lib/dist-custom-elements/duet-empty-state.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetEmptyState extends Components.DuetEmptyState, HTMLElement {}
-export const DuetEmptyState: {
-    prototype: DuetEmptyState;
-    new (): DuetEmptyState;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-empty-state.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetEmptyState$1, d as defineCustomElement$1 } from './p-65398a24.js';
-
-const DuetEmptyState = DuetEmptyState$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetEmptyState, defineCustomElement };

package/lib/dist-custom-elements/duet-fieldset.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetFieldset extends Components.DuetFieldset, HTMLElement {}
-export const DuetFieldset: {
-    prototype: DuetFieldset;
-    new (): DuetFieldset;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetFieldset$1, d as defineCustomElement$1 } from './p-63200e87.js';
-
-const DuetFieldset = DuetFieldset$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetFieldset, defineCustomElement };

package/lib/dist-custom-elements/duet-file-chooser.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetFileChooser extends Components.DuetFileChooser, HTMLElement {}
-export const DuetFileChooser: {
-    prototype: DuetFileChooser;
-    new (): DuetFileChooser;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-file-chooser.js

@@ -1,86 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-4f6ac36d.js';
-
-const duetFileChooserCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.container{display:flex;flex-direction:row;gap:8px;align-items:center}.container .label{margin-bottom:8px}";
-const DuetFileChooserStyle0 = duetFileChooserCss;
-
-const DuetUploadItem = /*@__PURE__*/ proxyCustomElement(class DuetUploadItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        this.onChange = (ev) => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.duetChange.emit({
-                originalEvent: ev,
-                data: { files: this.nativeInput.files },
-                component: "duet-file-chooser",
-            });
-        };
-        this.theme = "";
-        this.multiple = false;
-        this.accept = undefined;
-    }
-    /**
-     * Opens file choose dialog.
-     */
-    async open() {
-        var _a;
-        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click();
-    }
-    /**
-     * Returns actually selected files in file chooser.
-     */
-    async getFiles() {
-        return this.nativeInput.files;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    render() {
-        return (h(Host, { key: 'd6f332ceab0e71d4a1d4a31f67d8ebaaa1b2a74e' }, h("duet-visually-hidden", { key: 'd8a1e009bd303b11addfd69cde730a0158e65052', "aria-hidden": "true" }, h("input", { key: 'ed86a42e866d06c423e616b5b2ec3859483874e1', ref: input => {
-                this.nativeInput = input;
-            }, type: "file", class: {
-                "duet-upload": true,
-            }, "aria-hidden": "true", tabIndex: -1, onChange: this.onChange, multiple: this.multiple, accept: this.accept }))));
-    }
-    static get style() { return DuetFileChooserStyle0; }
-}, [1, "duet-file-chooser", {
-        "theme": [1025],
-        "multiple": [4],
-        "accept": [1],
-        "open": [64],
-        "getFiles": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-file-chooser", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-file-chooser":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetUploadItem);
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetFileChooser = DuetUploadItem;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetFileChooser, defineCustomElement };

package/lib/dist-custom-elements/duet-footer.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetFooter extends Components.DuetFooter, HTMLElement {}
-export const DuetFooter: {
-    prototype: DuetFooter;
-    new (): DuetFooter;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;