@duetds/components 10.0.0-alpha.8 → 10.0.0

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-c84c39d8.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-1080a6c7.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-297845c1.js';
-import { d as defineCustomElement$6 } from './p-a2d287b0.js';
-import { d as defineCustomElement$5 } from './p-d07ce35f.js';
-import { d as defineCustomElement$4 } from './p-1a58f15b.js';
-import { d as defineCustomElement$3 } from './p-9f10e30c.js';
-import { d as defineCustomElement$2 } from './p-df9299e6.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: '170a18bded5a1eefa62aabdfe9cbec40ebb9ad51', 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: '2282f3b54102b8fd06bbfb8c1158e54f400a21cc', 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: 'dda2ea49bff29277445de50a779df0434e35d620', role: this.accessibleRole }, h$1("caption", { key: 'bb4633c4947dbfe2c9b8148688d1f03c67d94188' }, h$1("slot", { key: '471406fee4b4173e29abf754212355814f591266', name: "tcaption" })), h$1("thead", { key: 'f907958d599c07d6f220bc3159e8efa0ba85feb5' }, this.hasHeadSlotFirst && (h$1("tr", { key: '32803f29a816f2abe67aa8b2dbfd99fdff7c9e5b' }, h$1("td", { key: '634ee6e9a8b53e9610a7cbd0e5a536bcaf654207', class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { key: '444de221a86d743d36598d71fc3256c0aa16d034', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h$1("tr", { key: 'a2c9f9914ab42a5421daac067472db45f6d680a7' }, h$1("td", { key: '0edd405623af60d014f509636fad5cf2f53f86a5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { key: '84f0e807a4ddf22910655aad0de2dcd7fd93973c', name: "thead-last" }))))), h$1("tbody", { key: '7b4413d38b050b69a0a71bcca7a8200d1f480d43' }, this.renderTableBody()), this.hasFootSlot && (h$1("tfoot", { key: 'a7096789b2fc5615b7a9622df8de361ea486bb69' }, h$1("tr", { key: '52afc13a557588195883a16b10b308b6c1062232' }, h$1("td", { key: 'a231e63b19ed8c96aec86973242e07c07506547d', class: "duet-editable-table-footer-menu", colSpan: 99 }, h$1("slot", { key: '152c200e205eb63fff18df14c4ded8ea67a340d5', 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-e96839f2.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-db1a07f5.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-1080a6c7.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-df9299e6.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: 'fa488300deb51d9bc5eb5bbe2ad484047f82eaee' }, h("duet-visually-hidden", { key: 'b6eaeee61a64ae8c9e872c909f73e1cb3d8b4ac4', "aria-hidden": "true" }, h("input", { key: 'f5107c8dd70020263f0d4f06b4c5b1ff1d4c9936', 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;