@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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-087d8c5a.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-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { f as fieldSorter } from './p-9e371678.js';
-import { i as isKeyboardClick } from './p-ca700701.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-df2042f8.js';
-import { d as defineCustomElement$6 } from './p-b0925e24.js';
-import { d as defineCustomElement$5 } from './p-4da43fbc.js';
-import { d as defineCustomElement$4 } from './p-41dca9e4.js';
-import { d as defineCustomElement$3 } from './p-22147601.js';
-import { d as defineCustomElement$2 } from './p-02f97b91.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: '3d5bf5011822ef87cfa0e0286c8cf91e8496bae2', 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: 'ec986291dd0b4a8210449af3dd0f233e7ea5951b', 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: '1ae7b6227d4fb16d38ca46fcd3c164ba625cf18d', role: this.accessibleRole }, h$1("caption", { key: 'a78c14e03fad988f4b985eecb07674d90be9dafc' }, h$1("slot", { key: '3ab4a9d8f4f7a6818c4051e811d222bb31731fca', name: "tcaption" })), h$1("thead", { key: 'aca3450e23a6981df8a9bfefc6d4942914900138' }, this.hasHeadSlotFirst && (h$1("tr", { key: '95caf52351b79194f468e5f1b537e27514e3558e' }, h$1("td", { key: '35bea84e7baa12021a122bf6851d3a6b0a0105b3', class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { key: '6969c828d8f6717d2bc16daa2bb4d34225aacdcc', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h$1("tr", { key: '64dc523c0369648863e076499b0ebb18f8f56ff4' }, h$1("td", { key: '64816f523901cd17e0f4481cb86e1596a0a079c3', class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { key: '6d69e2ee753e7dce6d3f47a7e7268cc5c0c10e12', name: "thead-last" }))))), h$1("tbody", { key: 'f5a526b833834a5d3601a479a9be3fd7de341d80' }, this.renderTableBody()), this.hasFootSlot && (h$1("tfoot", { key: '87bb8cfcad29c6033f95205666c0e09ae18f946b' }, h$1("tr", { key: '373cf5a124095988d9917422fd6c63da0bdd11b7' }, h$1("td", { key: 'ac6478d51c42552576d8e4f1708faebbec2d04fb', class: "duet-editable-table-footer-menu", colSpan: 99 }, h$1("slot", { key: 'b1257579708c35c4be3cb8148c63fd9d221ac8b3', 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-1296f851.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-9fa4eb51.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-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-02f97b91.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: '926fcc76b3ab1a4b3487828c7e8c2b2c27d99908' }, h("duet-visually-hidden", { key: 'bae6ad6046effdb6fcd799f7f4402b9b28a338c5', "aria-hidden": "true" }, h("input", { key: 'e7e5106bbb4de343baa858eb76739022df33d5d6', 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;