xv-webcomponents 2.0.0-beta.2 → 2.0.0-beta.28

package/dist/collection/components/xv-table/xv-table.model.js

@@ -0,0 +1,10 @@
+export const XV_TABLE_TAG = 'xv-table';
+export const XV_TABLE_ROW_TAG = 'xv-table-row';
+export const XV_TABLE_CELL_TAG = 'xv-table-cell';
+export const XV_TABLE_LAYOUT_VERSION = 1;
+/** The floor a resize drag may not cross, when the column names no minWidth. */
+export const XV_TABLE_MIN_COLUMN_WIDTH = 64;
+/** Per visible column, the width below which the table scrolls instead of squeezing. */
+export const XV_TABLE_SCROLL_COLUMN_WIDTH = 120;
+export const XV_TABLE_CONTROL_WIDTH = 48;
+export const XV_TABLE_DEFAULT_PAGE_SIZES = [10, 20, 30, 40, 50, 100];

package/dist/collection/components/xv-table/xv-table.utils.js

@@ -0,0 +1,243 @@
+import { XV_SORT_DIR } from "../../types/enum";
+import { XV_TABLE_DEFAULT_PAGE_SIZES, XV_TABLE_LAYOUT_VERSION, XV_TABLE_MIN_COLUMN_WIDTH, XV_TABLE_SCROLL_COLUMN_WIDTH, } from "./xv-table.model";
+const ORDER_BY = /^(asc|desc)\((.+)\)$/;
+/** Array and object props accept their JSON string form so they stay settable from plain markup. */
+export const parseProp = (value, fallback) => {
+    if (typeof value !== 'string')
+        return value !== null && value !== void 0 ? value : fallback;
+    if (!value.trim())
+        return fallback;
+    try {
+        return JSON.parse(value);
+    }
+    catch (_a) {
+        return fallback;
+    }
+};
+export const parsePageSizes = (value) => {
+    const parsed = typeof value === 'string' && value.includes(',')
+        ? value.split(',').map(part => Number(part.trim()))
+        : parseProp(value, XV_TABLE_DEFAULT_PAGE_SIZES);
+    const sizes = (parsed || []).filter(size => Number.isFinite(size) && size > 0);
+    return sizes.length ? sizes : XV_TABLE_DEFAULT_PAGE_SIZES;
+};
+export const parseSortBy = (value) => {
+    if (!value)
+        return null;
+    if (typeof value !== 'string') {
+        return value.name ? { name: value.name, direction: value.direction || XV_SORT_DIR.ASC } : null;
+    }
+    const match = ORDER_BY.exec(value.trim());
+    if (!match)
+        return null;
+    return { name: match[2], direction: match[1] };
+};
+/** The `asc(field)` shape ListStateService already speaks, so an Angular binding needs no adapter. */
+export const formatSortBy = (sort) => sort ? `${sort.direction}(${sort.name})` : '';
+export const nextSortDirection = (current) => current === XV_SORT_DIR.ASC ? XV_SORT_DIR.DESC : XV_SORT_DIR.ASC;
+export const sortName = (column) => column.sortName || column.id;
+export const cellValue = (row, column) => {
+    if (typeof column.value === 'function')
+        return column.value(row);
+    const key = column.value || column.id;
+    return row === null || row === void 0 ? void 0 : row[key];
+};
+const isEmpty = (value) => value === null || value === undefined || value === '';
+// Only a date-shaped string is read as a date: an article number must not sort as a year.
+const DATE_LIKE = /^\d{4}-\d{2}-\d{2}([T ]|$)|^\d{1,2}[./-]\d{1,2}[./-]\d{2,4}$/;
+const toComparable = (value) => {
+    if (value instanceof Date)
+        return value.getTime();
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return value;
+    const text = String(value);
+    const asDate = DATE_LIKE.test(text.trim()) ? Date.parse(text) : NaN;
+    return Number.isNaN(asDate) ? text : asDate;
+};
+/** Empty values sort last in both directions — a blank cell is not "smallest", it is missing. */
+export const compareValues = (a, b, locale) => {
+    if (isEmpty(a) && isEmpty(b))
+        return 0;
+    if (isEmpty(a))
+        return 1;
+    if (isEmpty(b))
+        return -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    const left = toComparable(a);
+    const right = toComparable(b);
+    if (typeof left === 'string' || typeof right === 'string') {
+        return String(left).localeCompare(String(right), locale, { numeric: true, sensitivity: 'base' });
+    }
+    return Number(left) - Number(right);
+};
+export const sortRows = (rows, column, direction, locale) => {
+    if (!column || direction === XV_SORT_DIR.NONE)
+        return rows;
+    const factor = direction === XV_SORT_DIR.DESC ? -1 : 1;
+    // Read each cell once rather than four times per comparison.
+    const decorated = rows.map(row => ({ row, key: cellValue(row, column) }));
+    decorated.sort((a, b) => {
+        const result = compareValues(a.key, b.key, locale);
+        // Empty always trails, so it must not be flipped by a descending sort.
+        if (isEmpty(a.key) !== isEmpty(b.key))
+            return result;
+        return result * factor;
+    });
+    return decorated.map(item => item.row);
+};
+export const totalPages = (total, pageSize) => Math.ceil((total || 0) / (pageSize || 10)) || 1;
+export const clampPage = (page, pages) => Math.min(Math.max(page || 1, 1), Math.max(pages, 1));
+export const pageSlice = (rows, page, pageSize) => {
+    const size = pageSize || 10;
+    const start = (clampPage(page, totalPages(rows.length, size)) - 1) * size;
+    return rows.slice(start, start + size);
+};
+export const visibleColumns = (columns) => columns.filter(column => !column.hidden);
+export const hideableColumns = (columns) => columns.filter(column => column.hideable);
+/** A column may narrow a table-level switch, never widen it. */
+export const columnAllows = (column, table, key) => { var _a; return table && ((_a = column[key]) !== null && _a !== void 0 ? _a : true); };
+export const clampWidth = (width, column) => {
+    const min = column.minWidth || XV_TABLE_MIN_COLUMN_WIDTH;
+    const max = column.maxWidth || Number.MAX_SAFE_INTEGER;
+    return Math.round(Math.min(Math.max(width, min), max));
+};
+/**
+ * What the rigid parts of the table actually need. A pixel column needs its width; a percentage
+ * column squeezes by definition and asks for nothing; a column that named no width gets the
+ * scroll-width guess. Guessing for all of them made a table of narrow columns scroll for nothing.
+ */
+export const tableMinWidth = (columns, minWidth, controls = 0) => {
+    if (minWidth)
+        return minWidth + controls;
+    const declared = visibleColumns(columns).reduce((total, column) => {
+        if (typeof column.width === 'number')
+            return total + column.width;
+        return column.width ? total : total + XV_TABLE_SCROLL_COLUMN_WIDTH;
+    }, 0);
+    return declared + controls;
+};
+/**
+ * The grid track list. Resize rewrites this one string on the host, which is a single DOM write
+ * per pointermove — a colgroup would need one per `<col>`. One track per control column: a grip
+ * and a checkbox are separate cells, so they need separate tracks.
+ */
+export const buildColumnTracks = (columns, leading = [], trailing = []) => {
+    const shown = visibleColumns(columns);
+    // `table-layout: fixed`, which is what these tables were written against: while some column left
+    // its width open, a declared width is exact and the open ones take what is left. Once every
+    // column has named a width, the widths also become proportions and the table scales up to fit —
+    // but never below what was declared, so a narrow column keeps the room its content needs.
+    const proportional = shown.length > 0 && shown.every(column => !!column.width);
+    return [
+        ...leading.map(width => `${width}px`),
+        // No space inside minmax(): the track list is indexed as an array during a resize drag.
+        ...shown.map(column => {
+            if (!column.width)
+                return `minmax(${column.minWidth || XV_TABLE_MIN_COLUMN_WIDTH}px,1fr)`;
+            if (typeof column.width === 'number') {
+                return proportional
+                    ? `minmax(${column.width}px,${column.width}fr)`
+                    : `${column.width}px`;
+            }
+            // A percentage keeps its exact share of the table and squeezes with it, never forcing a scroll.
+            const percent = /^([0-9.]+)%$/.test(column.width);
+            return percent ? `minmax(0,${column.width})` : column.width;
+        }),
+        ...trailing.map(width => `${width}px`),
+    ];
+};
+export const buildColumnTemplate = (columns, leading = [], trailing = []) => buildColumnTracks(columns, leading, trailing).join(' ');
+export const moveItem = (items, from, to) => {
+    const next = [...items];
+    next.splice(to, 0, next.splice(from, 1)[0]);
+    return next;
+};
+/** Hidden columns keep their absolute slot while the visible ones move around them. */
+export const mergeVisibleOrder = (columns, ordered) => {
+    const queue = [...ordered];
+    return columns.map(column => (column.hidden ? column : queue.shift() || column));
+};
+/**
+ * Only the deviations from the declared columns are stored. An untouched column follows the code,
+ * so a later default still reaches everyone who once dragged a column edge.
+ */
+export const diffLayout = (columns, declared) => {
+    const defaults = new Map(declared.map(column => [column.id, column]));
+    const order = columns.map(column => column.id);
+    const widths = {};
+    const hidden = {};
+    columns.forEach(column => {
+        const base = defaults.get(column.id);
+        // Only a resize writes a width, and a resize always writes pixels: a declared `25%` is not a
+        // deviation, and storing it would freeze the layout the next time the code changes.
+        if (typeof column.width === 'number' && column.width !== (base === null || base === void 0 ? void 0 : base.width)) {
+            widths[column.id] = column.width;
+        }
+        if (!!column.hidden !== !!(base === null || base === void 0 ? void 0 : base.hidden))
+            hidden[column.id] = !!column.hidden;
+    });
+    return {
+        v: XV_TABLE_LAYOUT_VERSION,
+        order: order.join() === declared.map(column => column.id).join() ? [] : order,
+        widths,
+        hidden,
+    };
+};
+export const isLayoutChanged = (layout) => !!layout && (!!layout.order.length || !!Object.keys(layout.widths).length || !!Object.keys(layout.hidden).length);
+/** Merges onto clones, so a stored width never writes back into the page's declared preset. */
+export const applyLayout = (declared, layout) => {
+    const clones = declared.map(column => (Object.assign({}, column)));
+    if (!layout || layout.v !== XV_TABLE_LAYOUT_VERSION)
+        return clones;
+    const byId = new Map(clones.map(column => [column.id, column]));
+    const ordered = layout.order.map(id => byId.get(id)).filter(Boolean);
+    clones.forEach((column, index) => {
+        if (!ordered.includes(column))
+            ordered.splice(Math.min(index, ordered.length), 0, column);
+    });
+    ordered.forEach(column => {
+        const width = layout.widths[column.id];
+        if (width)
+            column.width = width;
+        const hidden = layout.hidden[column.id];
+        if (hidden !== undefined && column.hideable)
+            column.hidden = hidden;
+    });
+    return ordered;
+};
+export const formatCell = (value, column, locale) => {
+    if (isEmpty(value))
+        return '';
+    switch (column.format) {
+        case 'number':
+            return new Intl.NumberFormat(locale).format(Number(value));
+        case 'currency':
+            return new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency: column.formatArg || 'EUR',
+            }).format(Number(value));
+        case 'date': {
+            const date = value instanceof Date ? value : new Date(String(value));
+            return Number.isNaN(date.getTime()) ? String(value) : new Intl.DateTimeFormat(locale).format(date);
+        }
+        case 'period': {
+            const [start, end] = Array.isArray(value) ? value : [];
+            const part = (input, options) => {
+                if (isEmpty(input))
+                    return '';
+                const date = input instanceof Date ? input : new Date(String(input));
+                return Number.isNaN(date.getTime()) ? '' : new Intl.DateTimeFormat(locale, options).format(date);
+            };
+            // A missing end leaves no dangling separator, and the year is only spelled once.
+            return [
+                part(start, { day: '2-digit', month: '2-digit' }),
+                part(end, { day: '2-digit', month: '2-digit', year: '2-digit' }),
+            ].filter(Boolean).join(' - ');
+        }
+        case 'list':
+            return Array.isArray(value) ? value.join(column.formatArg || ', ') : String(value);
+        default:
+            return String(value);
+    }
+};

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js

@@ -6,7 +6,7 @@ export class XvTab {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '8dcdf7d006b2e187067bf598828007175d15cae8', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+        return (h(Host, { key: '7147f87058327e099ad257d3821447dac8e3affb', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
     }
     static get is() { return "xv-tab-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-tag/xv-tag.js

@@ -13,7 +13,7 @@ export class XvTag {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: 'cd0cab01aba5ad627de9cc282c57032b83280c92', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '094a98000cf24d32d8fc47821f0aa704ab61419e', class: "xv-tag_content", part: "details-content" }, h("slot", { key: 'c19eeb245989563c381268b0ffdaf6d228c9bc04' })), this.closeable && (h("button", { key: '38df038e4ec7ebcf387ba1008f7bb3e66fe93cfa', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: '138d2cd5c76589ffd98054c7af17905921725aab', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'd3fe0db007cf464d64a63ed907c60dc0fd61c19c', class: "xv-tag_content", part: "details-content" }, h("slot", { key: 'caaebab8bce651040ac5c3291ffa2668b04cac56' })), this.closeable && (h("button", { key: 'ab6790f6b80906dcf28aee7fc739e375ae774df4', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
     static get is() { return "xv-tag-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.js

@@ -242,12 +242,12 @@ export class XvTagCombobox {
         const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
         const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: '5b78581d7d76f3f8548a8879831c1774b0f6e3ba', class: "xv-combobox", part: "root", size: this.size }, this.label && h("label", { key: 'd2d7249c6b2c65018ab203ce71b72df3e19aa2d8', class: "label" }, this.label), h("div", { key: '5d5782acb42a47e6b61151eeb3a2b20bb440b335', class: {
+        return (h(Host, { key: '5351ddba9ec53411d14582d3e4c013000f560540', class: "xv-combobox", part: "root", size: this.size }, this.label && h("label", { key: '9072c85cbd926b16e08827dacccd4d7f0a86d411', class: "label" }, this.label), h("div", { key: 'd63f9438b385fc05b53f29be87d5e1cf77a02f88', class: {
                 'control': true,
                 'control--disabled': this.disabled,
                 'control--error': !!this.error,
                 'control--readonly': !!this.readonly,
-            }, onClick: () => this.blockClick() }, h("div", { key: 'bcebbb940ffacac018068926ff3f714d60848d31', class: "control-chips", role: "list" }, this.selected.map((s, i) => (h("xv-tag-v2", { role: "listitem", part: "chip", "data-value": s.value, size: this.COMPARE_TAG_SIZE[this.size], disabled: this.disabled, bg: (s === null || s === void 0 ? void 0 : s.bg) || 'var(--layer-accent-01, #F7F7F7)', color: (s === null || s === void 0 ? void 0 : s.color) || 'var(--text-primary, #333)', closeable: !this.readonly, onCloseClick: ({ detail }) => this.removeTag(i, detail) }, s.label))), h("input", { key: '231998800b3984fc5d8f98e3b387c856aefe2c3f', ref: (el) => (this.inputEl = el), class: "control-input", readonly: this.readonly, placeholder: this.selected.length ? '' : this.placeholder, value: this.inputValue, onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeyDown(e), onFocus: () => { this.onOpen(); this.recomputeFiltered(); }, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": ariaOwns, "aria-activedescendant": activedesc, disabled: this.disabled })), this.loading && (h("span", { key: '06553869f491586642f501cb5fcfc14e2ba6f1f4', class: "control-loader", part: "loader", "aria-hidden": "true" }, h("xv-loader-v2", { key: 'db81d3335f20e26a0049508340da8cb3f59c24d9', size: "sm", variant: "horizontal" })))), message && (h("p", { key: '912315e151754bf4f8c63fbec64f3433bdbfac9d', class: { message: true, [message.level]: true } }, message.text)), suggestionsVisible && (h("ul", { key: 'c68bdb4c63e330440a038be034c1edefee84015c', id: `${this.uid}-listbox`, class: "suggestions", role: "listbox", part: "listbox" }, this.filtered.map((opt, idx) => (h("li", { id: this.optionId(idx), class: { 'suggestions-opt': true, 'suggestions-opt--highlight': idx === this.highlighted }, role: "option", "aria-selected": idx === this.highlighted, onMouseEnter: () => this.onOptionMouseEnter(idx), onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectOption(opt) }, h("div", { class: "suggestions-opt-content" }, opt.bg ? h("span", { class: "suggestions-opt-content--color", style: { background: opt.bg } }) : null, h("span", { class: "suggestions-opt-content--label" }, this.highlightLabel(opt.label).map((seg, i) => typeof seg === 'string' ? h("span", { key: i }, seg) : h("strong", { key: i }, seg.match)))))))))));
+            }, onClick: () => this.blockClick() }, h("div", { key: 'e303fef8789d9f1df8a9febe667f8fa0d72f4aaa', class: "control-chips", role: "list" }, this.selected.map((s, i) => (h("xv-tag-v2", { role: "listitem", part: "chip", "data-value": s.value, size: this.COMPARE_TAG_SIZE[this.size], disabled: this.disabled, bg: (s === null || s === void 0 ? void 0 : s.bg) || 'var(--layer-accent-01, #F7F7F7)', color: (s === null || s === void 0 ? void 0 : s.color) || 'var(--text-primary, #333)', closeable: !this.readonly, onCloseClick: ({ detail }) => this.removeTag(i, detail) }, s.label))), h("input", { key: '08ec28c65696a36238aa4f2c7f9ba2a89c34e31c', ref: (el) => (this.inputEl = el), class: "control-input", readonly: this.readonly, placeholder: this.selected.length ? '' : this.placeholder, value: this.inputValue, onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeyDown(e), onFocus: () => { this.onOpen(); this.recomputeFiltered(); }, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": ariaOwns, "aria-activedescendant": activedesc, disabled: this.disabled })), this.loading && (h("span", { key: '434666b2391399635cfe9c18320e4e10c0b67abf', class: "control-loader", part: "loader", "aria-hidden": "true" }, h("xv-loader-v2", { key: '66ffdb3f446ee255495d05c9a456a868b208c52a', size: "sm", variant: "horizontal" })))), message && (h("p", { key: '47f10c7a1e7a0eb5f9cfef0a303a667278833673', class: { message: true, [message.level]: true } }, message.text)), suggestionsVisible && (h("ul", { key: 'cba3064999cd0fa1159bb1a5b0967633de6d2e6f', id: `${this.uid}-listbox`, class: "suggestions", role: "listbox", part: "listbox" }, this.filtered.map((opt, idx) => (h("li", { id: this.optionId(idx), class: { 'suggestions-opt': true, 'suggestions-opt--highlight': idx === this.highlighted }, role: "option", "aria-selected": idx === this.highlighted, onMouseEnter: () => this.onOptionMouseEnter(idx), onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectOption(opt) }, h("div", { class: "suggestions-opt-content" }, opt.bg ? h("span", { class: "suggestions-opt-content--color", style: { background: opt.bg } }) : null, h("span", { class: "suggestions-opt-content--label" }, this.highlightLabel(opt.label).map((seg, i) => typeof seg === 'string' ? h("span", { key: i }, seg) : h("strong", { key: i }, seg.match)))))))))));
     }
     static get is() { return "xv-tag-combobox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-text-input/xv-text-input.js

@@ -30,13 +30,13 @@ export class XvTextInput {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: 'bb73bf066f367a9062cebeb186bce1310929d6ac', class: { disabled: !!this.disabled } }, h("label", { key: 'c6051d9ecac23444845e61345631aede0c5a14c2', class: "control" }, this.label && h("span", { key: '921f096a485031eeb34b3385200270a29f1d61d1', class: "control_label" }, this.label), h("div", { key: '2e8a94946100504e6a5d820f4a2c67c03557fe1f', class: {
+        return (h(Host, { key: '9aec75a885d16f416708047095897ac987b9e1ec', class: { disabled: !!this.disabled } }, h("label", { key: '4d6934a4208df6e858277366e7a74da9ec7c0ed3', class: "control" }, this.label && h("span", { key: '57c1974e09512b744aecc18dacfe7cae0bac6921', class: "control_label" }, this.label), h("div", { key: '5b0dd4d878da6e8bfc05a0f704954081e9b8058d', class: {
                 'control_input': true,
                 readonly: !!this.readonly,
                 [this.size]: true,
                 error: !!this.error,
                 warning: !!this.warning,
-            } }, h("input", { key: '2f458206c2ba1960611e57e14167d2d40b34c433', autocomplete: this.autocomplete, type: (this.type === 'password' && this.isPasswordVisible && 'text') || this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: '1028060cff07974a58f87e6ee097e0f7eeaf00ee', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '478195557f75714c67a98020229c4c1591ab015e', size: SIZE_VAR.XS }), this.clearable && this.value && !this.loading && !this.disabled && !this.readonly && (h("button", { key: '4019006c7b199a3f2014d36284d20e1a17d122ae', type: "button", class: "status-icon clear", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, this.type === 'password' && (h("button", { key: 'b3405a4b94e72b0e577c36448cae2afdea3e6b7a', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, h("svg", { key: '39cbc33366ff94fc0893f3ccff1716b862d232bd', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", width: 16, height: 16 }, this.isPasswordVisible ? (h("path", { fill: "currentColor", d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z" })) : (h("path", { fill: "currentColor", d: "M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" })))))))), message && (h("p", { key: '13bdeb70bde027cd09a66645298efe8b0d98b9a6', class: { message: true, [message.level]: true } }, message.text))));
+            } }, h("input", { key: '0a5d8923bbcf54a551618557037a96b2e3c2166f', autocomplete: this.autocomplete, type: (this.type === 'password' && this.isPasswordVisible && 'text') || this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: 'a627fa606172a1e8d198b8dc8daadc280d39cfa2', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: 'e2e9bb121daf4aedc173909545b80961db442002', size: SIZE_VAR.XS }), this.clearable && this.value && !this.loading && !this.disabled && !this.readonly && (h("button", { key: '45e514e856569d54bb4c98a8ac78a0aedc70ce37', type: "button", class: "status-icon clear", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, this.type === 'password' && (h("button", { key: 'f7ae4b875d4a515e79fa1699d0fe3d4aa8b27586', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, h("svg", { key: '08bf622486f686fba2309004145c4c340faf8cd0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", width: 16, height: 16 }, this.isPasswordVisible ? (h("path", { fill: "currentColor", d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z" })) : (h("path", { fill: "currentColor", d: "M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" })))))))), message && (h("p", { key: '2c1d43925fd56c86e47dfd88c4644b030639f81e', class: { message: true, [message.level]: true } }, message.text))));
     }
     static get is() { return "xv-text-input-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-textarea/xv-textarea.js

@@ -22,12 +22,12 @@ export class XvTextarea {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: '658e393a65602e686906bd2ad9eca9efd0d185fc', class: { disabled: !!this.disabled } }, h("label", { key: '93ad9edea381b99bcb7bcf1f692db00800776bf3', class: "control" }, (this.label || this.max) && (h("p", { key: 'fa5d19c60d4d528fe1fb7e7d5505d9927e69b1ec', class: "control_label" }, h("span", { key: '4bf48eb50474b3b74417a5ad3c01d09f6b485034' }, this.label, this.info && h("xv-tooltip-v2", { key: 'd7f1d420fbb2fa18d598b83e75a5218e4de1bfd4', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: '5053f5fa4902e4079d6163db7c13ff659bb656e5', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: '52762934c658eb768e494963ece43228dfa5926e', class: {
+        return (h(Host, { key: '8f8a6e5f1886e21e52ffc3e006c4d43b1de420eb', class: { disabled: !!this.disabled } }, h("label", { key: '2097cfb9d893772a0aa1e2aa3aeadd5484ebb48e', class: "control" }, (this.label || this.max) && (h("p", { key: '4a5ce1d5ad1d62ba1ab1249b2f15504eafc727af', class: "control_label" }, h("span", { key: 'f8344446dcf38978181473292c6a748d394538f6' }, this.label, this.info && h("xv-tooltip-v2", { key: 'bf23e43f1b7f0ea94ba9cb376c4893ea413ec5df', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: '7b377f47c6b426428fbaee01746415032b75d0b5', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: 'b7e1937e704f7493544443d159e7b3c1783a1e45', class: {
                 'control_input': true,
                 readonly: !!this.readonly,
                 error: !!this.error,
                 warning: this.warning !== undefined,
-            } }, h("textarea", { key: '7b2e78e20deaf989e72df9ff44a78d3111b775ac', class: { 'no-resize': !!this.noResize }, name: this.name, rows: this.rows, value: this.value, maxLength: this.max, disabled: this.disabled, readOnly: this.readonly, placeholder: this.placeholder, onInput: this.onInput }), h("div", { key: '9cea8ecb9db775ce6aaa7573a140d5d308ff0d30', class: "control_input__icons" }, this._renderIcon()))), message && (h("p", { key: '7ddc85f57fca259024f1060ec85265f5c661e4e8', class: { message: true, [message.level]: true } }, message.text))));
+            } }, h("textarea", { key: '4c09ca41ec313fca1f2df3e4e941d342d6121b6a', class: { 'no-resize': !!this.noResize }, name: this.name, rows: this.rows, value: this.value, maxLength: this.max, disabled: this.disabled, readOnly: this.readonly, placeholder: this.placeholder, onInput: this.onInput }), h("div", { key: '68dcba186158bf977193f908cf2a129452ba904e', class: "control_input__icons" }, this._renderIcon()))), message && (h("p", { key: '150534971f182c93c131fee2b00eae5cc78e7c30', class: { message: true, [message.level]: true } }, message.text))));
     }
     _renderIcon() {
         if (this.loading)

package/dist/collection/components/xv-tile/xv-tile.js

@@ -29,7 +29,7 @@ export class XvTile {
         this.checked = !this.checked;
     }
     render() {
-        return (h(Host, { key: 'a2c476c09c531b51f71f991e1880b2a47204491a', class: "xv-tile--host" }, h("label", { key: '3e2a54ab149f6043179bb7d1cc9e37496482cde4', class: {
+        return (h(Host, { key: '7a4262c881da376efbba73e6ecdeef845caefa0e', class: "xv-tile--host" }, h("label", { key: '9e3fcc2f59463c39d61352e84f89c6905b8b6754', class: {
                 [this.el.className]: !!this.el.className,
                 'xv-tile': true,
                 [`xv-tile--variant-${this.variant}`]: !!this.variant,
@@ -37,7 +37,7 @@ export class XvTile {
                 'xv-tile--disabled': !!this.disabled,
                 'selected': !!this.checked,
                 'xv-tile--error': !!this.error,
-            } }, h("div", { key: 'fc25a98acbca605f9dc1184d60303e8114e2e43b', class: "xv-tile_content" }, this.label && h("p", { key: '0f466d3aa936261cdc54a0b7492b5f5737b2a778', class: "xv-tile_content__title" }, this.label), h("slot", { key: '8e6c17221070c8c5bde4049b55943155ba2e7c17' })), this.variant === 'selectable' && (h("div", { key: '98a511f78a1dfbbcc65e971a0dad71510a6830c5', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: '0bcfa73c1f2fb1b2d6d2740258cde9483dbdcd87', class: "xv-tile_footer" }, h("button", { key: 'e6a2b02d5b4596596ba216c300c954fbb08268ee', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '700535d5440bb57fd31382a2c0d0803f7cbdf239', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '3888e0d07a757ef7e9f8d9a16ca04c9cce814b06', name: "expandable" })))));
+            } }, h("div", { key: 'aacc76f7706cef6b3f7dc642e07f0aa0ed641368', class: "xv-tile_content" }, this.label && h("p", { key: 'c52856112766b1047581570dadd3ca3daa09e191', class: "xv-tile_content__title" }, this.label), h("slot", { key: 'c23faffc735f62a7007ad6ab25caad10278543d8' })), this.variant === 'selectable' && (h("div", { key: 'c9005b66ccb8feea162b43079762f7e2f8a7c5cf', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: '08d6633d4a19ea03c761d18b20f164ae23002479', class: "xv-tile_footer" }, h("button", { key: 'ff242c00e2dadf564d146a02ac944d1bee7c7ec7', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '27350c54f82cf8c78e49c04fc2b2b4fb0e4bbb96', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '85f9a007a422ca5e7c06239d771cc8ede86a4e21', name: "expandable" })))));
     }
     static get is() { return "xv-tile"; }
     static get originalStyleUrls() {

package/dist/collection/components/xv-toggle/xv-toggle.js

@@ -15,7 +15,7 @@ export class XvToggle {
         };
     }
     render() {
-        return (h(Host, { key: '37a5b9544456493cc34c79b2b7f5b00e23e287c2', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && h("span", { key: '0a25845f45dafed5e868dc09443c45d566dc9c3f', class: "label" }, this.label), h("label", { key: '5d1da814a7de2b5965d51fe2eb1f17cfa30f6a0d', class: "control" }, h("slot", { key: 'c739617e825bf2ed051175cbeb5eb83d1fc298f3', name: "before" }), h("div", { key: '32bd77c1ca5f8e58892cf41d9004f3f38a63bb10', class: "control_input" }, h("input", { key: '9447c95ba00b07b288f650ac169f816607d624b9', type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, onChange: this.onChange }), h("span", { key: 'ce5ae18fa782dda6a28e45e297cc9e04ace9c7cd', class: "toggle" })), h("slot", { key: 'e4005eee0f127a0a1a59c1930aae06fac534ae77', name: "after" }))));
+        return (h(Host, { key: '752b686c9e361b4ca0a0ad48d61072a2c819373c', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && h("span", { key: 'c99e7d648d7886db04fbfaf16bedf40b982f6b72', class: "label" }, this.label), h("label", { key: 'ff15e59d5b7ace403030f997d8b1ddf3640f0bf6', class: "control" }, h("slot", { key: 'bea4d7593d2c7caca6b69e5cc219c1b8dbb55d09', name: "before" }), h("div", { key: '7ad81dc90a00339c8653605cfeb5468377be366b', class: "control_input" }, h("input", { key: 'ffbcaac266859de781476ba06e9e56069fd11ad4', type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, onChange: this.onChange }), h("span", { key: 'd0b1915cd7ab776eb3b573802f5ee73ec417edde', class: "toggle" })), h("slot", { key: '4de504f5a68a747e097fed0260fe55b4dd93de57', name: "after" }))));
     }
     static get is() { return "xv-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js

@@ -67,7 +67,7 @@ export class XvToggleTip {
     }
     ;
     render() {
-        return (h(Host, { key: 'fd081052d0ce9e3c3505e99914eb765e2c708144', class: "xv-toggle-tip" }, h("div", { key: '7820225106348327e96a5620a64e2c13c15e7129', class: { 'trigger': true, 'trigger--block': this.block }, role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, h("slot", { key: 'daa48bf90a6b283a361414047b9f5cc194d6969c', name: "trigger" }, h("svg", { key: '37abc5de519c6b48bff301a48ddc11edffc23008', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '120b7659351f0dacc52c818803dc735fe4e4dfc8', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))), h("div", { key: 'edc6f66c90815a764e884bbb3adea6687a9148a8', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '592926c0f4c6534bfcf5d01b6ca6b4bfe63f1337', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: 'e91dc73a6c6acf68173a05a932615fcf3e3dfe27', class: "popover-content" }, h("slot", { key: 'afaac527e6f4853075417b598795a37322612888', name: "header" }), h("slot", { key: 'cc047953642b7c4b686c1f7af1a0647cf84e6001', name: "body" }), h("slot", { key: 'b4b8a501b0fc655fb2151726121ab5b882af0ce7', name: "footer" })))));
+        return (h(Host, { key: '355065995790b620e5ed8b5d561b2898f787ac15', class: "xv-toggle-tip" }, h("div", { key: 'ff20f44061ee280105d53176e5c508e0845df871', class: { 'trigger': true, 'trigger--block': this.block }, role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, h("slot", { key: 'd407db9a0df2a9f90b628ed79d6c648eed2c2c70', name: "trigger" }, h("svg", { key: 'f82ed966ca4436d8dde8bf5c2b992466f541224f', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '6f5187fbf1560ebd7a3f2e529d3fdd15fa80fea0', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))), h("div", { key: '76fc29909a52ce4701d71e3509c4ebe8d1d32ee2', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: 'afabe0c85104f8c5e204677b53f5815f314a5039', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: 'f274e790046bcf6edc8123b2b0bcda895931772c', class: "popover-content" }, h("slot", { key: '8f28653ab605ae2eee5c7027532b024e914a8c13', name: "header" }), h("slot", { key: '1c26b3cb17db7fc9256fd42f7dcddb51eb182db5', name: "body" }), h("slot", { key: '3b537a669336579f2285784f469d4425d0f1cc31', name: "footer" })))));
     }
     disconnectedCallback() {
         this.destroyPopper();

package/dist/collection/components/xv-tooltip/xv-tooltip.js

@@ -38,11 +38,11 @@ export class XvTooltip {
         this.destroyTooltip();
     }
     render() {
-        return (h(Host, { key: 'a435539ec69538a238bd35c6d4867c18da9a7a40', role: "tooltip", class: {
+        return (h(Host, { key: 'a6853dc450f6d063a702a1791297963f1530c003', role: "tooltip", class: {
                 'xv-tooltip-wrapper': true,
                 [`xv-tooltip-wrapper__block`]: !!this.block,
                 [`xv-tooltip-wrapper__dashed`]: !!this.dashed,
-            } }, h("slot", { key: 'd766446f98777a9e680867a372ed4df0843b77b0' }, h("svg", { key: '9b2c7d9ed60fb6b4b82c034feef022468df3bf5c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '526be5c67ca24171376da19d7dd1c1f7c09d8edc', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+            } }, h("slot", { key: 'db5ea6da812b85930e8c74dc2ceaf59f8e6197b1' }, h("svg", { key: '7ac24beb22b912f77ec3535309019833f28fd375', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'b86e5339a9af99e6011fceea6d8b77e89dcd0e19', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
     }
     static get is() { return "xv-tooltip-v2"; }
     static get originalStyleUrls() {

package/dist/collection/utils/table-layout.js

@@ -0,0 +1,130 @@
+const DB_NAME = 'xv-webcomponents';
+const DB_VERSION = 1;
+const STORE = 'table-layouts';
+const MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
+const READ_TIMEOUT_MS = 1500;
+let connection = null;
+let pruned = false;
+const layoutId = (owner, storageKey) => `${owner || 'anonymous'}:${storageKey}`;
+const request = (req) => new Promise((resolve, reject) => {
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+});
+/**
+ * Our own database on purpose. XvMarketplaceNG's origin already carries a Dexie database, and Dexie
+ * multiplies its version by ten — sharing a name loses the version race and kills the feature (MAR-15943).
+ */
+const openDb = () => {
+    if (connection)
+        return connection;
+    connection = new Promise(resolve => {
+        if (typeof indexedDB === 'undefined')
+            return resolve(null);
+        let req;
+        try {
+            req = indexedDB.open(DB_NAME, DB_VERSION);
+        }
+        catch (_a) {
+            return resolve(null);
+        }
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (db.objectStoreNames.contains(STORE))
+                return;
+            const store = db.createObjectStore(STORE, { keyPath: 'id' });
+            store.createIndex('owner', 'owner');
+            store.createIndex('updatedAt', 'updatedAt');
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => resolve(null);
+        req.onblocked = () => resolve(null);
+    });
+    return connection;
+};
+const store = async (mode) => {
+    const db = await openDb();
+    if (!db)
+        return null;
+    try {
+        return db.transaction(STORE, mode).objectStore(STORE);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+/** A cold database must not hold the first paint hostage — past this, the declared columns win. */
+const withTimeout = (promise, fallback, ms = READ_TIMEOUT_MS) => Promise.race([promise, new Promise(resolve => setTimeout(() => resolve(fallback), ms))]);
+export const readLayout = async (owner, storageKey) => {
+    if (!storageKey)
+        return null;
+    const read = (async () => {
+        var _a;
+        try {
+            const objectStore = await store('readonly');
+            if (!objectStore)
+                return null;
+            const record = await request(objectStore.get(layoutId(owner, storageKey)));
+            return (_a = record === null || record === void 0 ? void 0 : record.layout) !== null && _a !== void 0 ? _a : null;
+        }
+        catch (_b) {
+            return null;
+        }
+    })();
+    const layout = await withTimeout(read, null);
+    void pruneLayouts();
+    return layout;
+};
+export const writeLayout = async (owner, storageKey, layout) => {
+    if (!storageKey)
+        return;
+    try {
+        const objectStore = await store('readwrite');
+        if (!objectStore)
+            return;
+        const record = {
+            id: layoutId(owner, storageKey),
+            owner: owner || 'anonymous',
+            storageKey,
+            layout,
+            updatedAt: Date.now(),
+        };
+        await request(objectStore.put(record));
+    }
+    catch (_a) {
+        // Private mode and a full quota both degrade to "this table does not remember".
+    }
+};
+export const deleteLayout = async (owner, storageKey) => {
+    if (!storageKey)
+        return;
+    try {
+        const objectStore = await store('readwrite');
+        if (!objectStore)
+            return;
+        await request(objectStore.delete(layoutId(owner, storageKey)));
+    }
+    catch (_a) {
+        // See writeLayout.
+    }
+};
+export const pruneLayouts = async () => {
+    if (pruned)
+        return;
+    pruned = true;
+    try {
+        const objectStore = await store('readwrite');
+        if (!objectStore)
+            return;
+        const range = IDBKeyRange.upperBound(Date.now() - MAX_AGE_MS);
+        const stale = await request(objectStore.index('updatedAt').getAll(range));
+        stale.forEach(record => objectStore.delete(record.id));
+    }
+    catch (_a) {
+        // See writeLayout.
+    }
+};
+/** Test seam: drops the cached connection and the once-per-run prune guard. */
+export const resetLayoutStore = () => {
+    connection = null;
+    pruned = false;
+};

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,b as setNonce,d as setPlatformOptions,e as setTagTransformer,t as transformTag}from"./p-BNP2Lw34.js";function o(t,e,o){return(t||"")+(e?" "+e:"")+(o?" "+o:"")}const n=t=>{const{error:e,warning:o,helper:r}=t;return"string"==typeof e&&e?{level:"error",text:e}:"string"==typeof o&&o?{level:"warning",text:o}:"string"==typeof r&&r?{level:"helper",text:r}:null};function a(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,(t=>(+t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>+t/4).toString(16)))}const i=(t,e,o)=>Array.prototype.forEach.call(t,e,o),c=(t,e=500)=>{let o;return function(...r){clearTimeout(o),o=setTimeout((()=>{t.apply(this,r)}),e)}},l=(t,e,o)=>"string"==typeof o?(!t.hasAttribute(e)&&t.setAttribute(e,o),t):(o?!t.hasAttribute(e)&&t.setAttribute(e,""):t.hasAttribute(e)&&t.removeAttribute(e),t),u=()=>{try{const t=localStorage.getItem("metaNav");return t?JSON.parse(t):{}}catch(t){return console.warn("Could not parse metaNav from localStorage:",t),{}}},v=()=>{var t;return window.__xvWhitelabelOverride||(()=>{var t;if("undefined"==typeof document)return;const e="ApplicationContext=";return null===(t=document.cookie.split(";").map((t=>t.trim())).find((t=>t.startsWith(e))))||void 0===t?void 0:t.slice(19)})()||(null===(t=u())||void 0===t?void 0:t.WhitelabelName)||void 0},p=(t="")=>{var e;return`${null!==(e={"sitefinity-qa.crossvertise.com":"https://qa.crossvertise.com","www.crossvertise.com":"https://market.crossvertise.com","sitefinity-staging.crossvertise.com":"https://staging.crossvertise.com",localhost:"https://qa.crossvertise.com"}[window.location.hostname])&&void 0!==e?e:window.location.origin}${t}`},m=async(t,e)=>{const o=e||{},{awaitWl:r,raw:s}=o,n=function(t,e){var o={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(o[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(t);s<r.length;s++)e.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(t,r[s])&&(o[r[s]]=t[r[s]])}return o}(o,["awaitWl","raw"]),a=r?await((t=2e3,e=100)=>{const o=v();return o?Promise.resolve(o):new Promise((o=>{const r=Date.now(),s=()=>{const n=v();return n?o(n):Date.now()-r>=t?o("Xv"):void setTimeout(s,e)};s()}))})():v()||"Xv",i=/^https?:\/\//i.test(t)?t:`${p()}/${t.replace(/^\//,"")}`,c=Object.assign(Object.assign({},s?{}:{"Content-Type":"application/json","Application-Context":a}),null==n?void 0:n.headers);return fetch(i,Object.assign(Object.assign({},n),{headers:c})).then((t=>{var e;if(!t.ok)throw Error(`${t.status} ${t.statusText}`);return(null!==(e=t.headers.get("Content-Type"))&&void 0!==e?e:"").includes("application/json")?t.json():t.text()}))},f={get:(t,e)=>m(t,Object.assign(Object.assign({},e),{method:"GET"})),post:(t,e,o)=>m(t,Object.assign(Object.assign({},o),{method:"POST",body:void 0!==e?JSON.stringify(e):void 0})),put:(t,e,o)=>m(t,Object.assign(Object.assign({},o),{method:"PUT",body:void 0!==e?JSON.stringify(e):void 0})),patch:(t,e,o)=>m(t,Object.assign(Object.assign({},o),{method:"PATCH",body:void 0!==e?JSON.stringify(e):void 0})),delete:(t,e)=>m(t,Object.assign(Object.assign({},e),{method:"DELETE"}))};export{u as a,f as b,v as c,c as d,i as f,o as format,p as g,n as r,l as s,a as u}
+export{g as getAssetPath,r as render,s as setAssetPath,b as setNonce,d as setPlatformOptions,e as setTagTransformer,t as transformTag}from"./p-CspyoLL9.js";function o(t,e,o){return(t||"")+(e?" "+e:"")+(o?" "+o:"")}const n=t=>{const{error:e,warning:o,helper:r}=t;return"string"==typeof e&&e?{level:"error",text:e}:"string"==typeof o&&o?{level:"warning",text:o}:"string"==typeof r&&r?{level:"helper",text:r}:null};function a(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,(t=>(+t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>+t/4).toString(16)))}const i=(t,e,o)=>Array.prototype.forEach.call(t,e,o),c=(t,e=500)=>{let o;return function(...r){clearTimeout(o),o=setTimeout((()=>{t.apply(this,r)}),e)}},l=(t,e,o)=>"string"==typeof o?(!t.hasAttribute(e)&&t.setAttribute(e,o),t):(o?!t.hasAttribute(e)&&t.setAttribute(e,""):t.hasAttribute(e)&&t.removeAttribute(e),t),u=()=>{try{const t=localStorage.getItem("metaNav");return t?JSON.parse(t):{}}catch(t){return console.warn("Could not parse metaNav from localStorage:",t),{}}},v=()=>{var t;return window.__xvWhitelabelOverride||(()=>{var t;if("undefined"==typeof document)return;const e="ApplicationContext=";return null===(t=document.cookie.split(";").map((t=>t.trim())).find((t=>t.startsWith(e))))||void 0===t?void 0:t.slice(19)})()||(null===(t=u())||void 0===t?void 0:t.WhitelabelName)||void 0},p=(t="")=>{var e;return`${null!==(e={"sitefinity-qa.crossvertise.com":"https://qa.crossvertise.com","www.crossvertise.com":"https://market.crossvertise.com","sitefinity-staging.crossvertise.com":"https://staging.crossvertise.com",localhost:"https://qa.crossvertise.com"}[window.location.hostname])&&void 0!==e?e:window.location.origin}${t}`},m=async(t,e)=>{const o=e||{},{awaitWl:r,raw:s}=o,n=function(t,e){var o={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(o[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(t);s<r.length;s++)e.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(t,r[s])&&(o[r[s]]=t[r[s]])}return o}(o,["awaitWl","raw"]),a=r?await((t=2e3,e=100)=>{const o=v();return o?Promise.resolve(o):new Promise((o=>{const r=Date.now(),s=()=>{const n=v();return n?o(n):Date.now()-r>=t?o("Xv"):void setTimeout(s,e)};s()}))})():v()||"Xv",i=/^https?:\/\//i.test(t)?t:`${p()}/${t.replace(/^\//,"")}`,c=Object.assign(Object.assign({},s?{}:{"Content-Type":"application/json","Application-Context":a}),null==n?void 0:n.headers);return fetch(i,Object.assign(Object.assign({},n),{headers:c})).then((t=>{var e;if(!t.ok)throw Error(`${t.status} ${t.statusText}`);return(null!==(e=t.headers.get("Content-Type"))&&void 0!==e?e:"").includes("application/json")?t.json():t.text()}))},f={get:(t,e)=>m(t,Object.assign(Object.assign({},e),{method:"GET"})),post:(t,e,o)=>m(t,Object.assign(Object.assign({},o),{method:"POST",body:void 0!==e?JSON.stringify(e):void 0})),put:(t,e,o)=>m(t,Object.assign(Object.assign({},o),{method:"PUT",body:void 0!==e?JSON.stringify(e):void 0})),patch:(t,e,o)=>m(t,Object.assign(Object.assign({},o),{method:"PATCH",body:void 0!==e?JSON.stringify(e):void 0})),delete:(t,e)=>m(t,Object.assign(Object.assign({},e),{method:"DELETE"}))};export{u as a,f as b,v as c,c as d,i as f,o as format,p as g,n as r,l as s,a as u}

package/dist/components/p-B0kwaJ8n.js

@@ -0,0 +1 @@
+import{p as t,H as e,h as o,a,t as i}from"./p-CspyoLL9.js";import{X as r}from"./p-HjYAjHna.js";import{d as s}from"./p-DFtMwE-h.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.columnId="",this.align="start",this.overflow="ellipsis",this.clampLines=2,this.tooltip="",this.width="",this.header=!1,this.sortable=!1,this.sortDirection="",this.hideable=!1,this.resizable=!1,this.reorderable=!1,this.reorderLabel="Drag to reorder"}get ariaSort(){return this.header&&this.sortable?this.sortDirection===r.ASC?"ascending":this.sortDirection===r.DESC?"descending":"none":null}render(){const t=o("div",{key:"eefd1609b456cdcc9e802c27e524613b64a9ce39",class:"content",part:"content",style:"clamp"===this.overflow?{"--xv-table-cell-clamp":`${this.clampLines}`}:void 0},o("slot",{key:"a00460b7e2fbf775c7607af68b078a4fcff70c11"}));return o(a,{key:"54976b9c9740d576bb4a81a15af65aa79a2f0888",role:this.header?"columnheader":"cell",part:"cell","aria-sort":this.ariaSort,tabindex:this.header&&this.sortable?0:null},this.header&&this.reorderable&&o("span",{key:"f443393d1ea62a0c94bfa59b77c377bf5fc04a66",class:"grip",part:"grip","aria-label":this.reorderLabel}),this.tooltip?o("xv-tooltip-v2",{part:"tooltip",dashed:!0,position:"top-start",message:this.tooltip},t):t,this.header&&this.sortable&&o("span",{key:"c26fa895c0a9a17cbe6c33c68f9e14b05781554e",class:"sort","aria-hidden":"true"}),this.header&&this.resizable&&o("span",{key:"37fa59799c363ed83f2dd0052b3203aa3bf01a6c",class:"resize",part:"resize","aria-hidden":"true"}))}get el(){return this}static get style(){return":host{--xv-table-cell-padding-x:var(--xv-table-padding-x, var(--spacing-05));--xv-table-cell-padding-y:var(--xv-table-padding-y, var(--spacing-03));--xv-table-cell-clamp:2;display:flex;align-items:center;box-sizing:border-box;min-width:0;padding-block:var(--xv-table-cell-padding-y);padding-inline:min(var(--xv-table-cell-padding-x), 25%);color:var(--text-primary);font-family:var(--ff-body);font-size:var(--fz-md);line-height:18px;letter-spacing:0.16px}:host([align=center]){justify-content:center;text-align:center}:host([align=end]){justify-content:flex-end;text-align:right}.content{min-width:0;max-width:100%}[part=tooltip]{min-width:0;max-width:100%}:host([overflow=ellipsis]) .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([overflow=ellipsis]) .content ::slotted(*){min-width:0;max-width:100%}:host([overflow=clamp]) .content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--xv-table-cell-clamp);overflow:hidden}:host([overflow=clamp]) .content ::slotted(*){display:inline}:host([overflow=wrap]) .content{overflow:visible;white-space:normal}:host([header]){position:relative;gap:var(--spacing-02);font-weight:600}:host([header]) .content{flex:1}:host([header][align=end]) .sort{order:-1}:host([header][sortable]){cursor:pointer}:host([header][sortable]):hover{background:var(--layer-accent-hover-01)}:host([header][sortable]):focus-visible{outline:2px solid var(--focus);outline-offset:0}:host([header][sortable]):focus-visible{outline-offset:-2px}:host([header][sort-direction=asc]),:host([header][sort-direction=desc]){background:var(--layer-accent-active-01)}.sort{flex:none;width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;opacity:0;transform:rotate(45deg) translate(-2px, -2px)}:host([header][sortable]:hover) .sort{opacity:0.5}:host([header][sort-direction=asc]) .sort,:host([header][sort-direction=desc]) .sort{opacity:1}:host([header][sort-direction=asc]) .sort{transform:rotate(-135deg) translate(-2px, -2px)}.grip{position:absolute;top:50%;left:4px;transform:translateY(-50%);width:8px;height:14px;opacity:0;cursor:grab;background-image:radial-gradient(currentColor 1px, transparent 1px);background-size:4px 4px}:host([header]:hover) .grip{opacity:0.5}:host(.drag-over){box-shadow:inset 2px 0 0 0 var(--interactive-01)}.resize{position:absolute;top:0;right:0;z-index:1;width:6px;height:100%;cursor:col-resize;touch-action:none}.resize:hover,.resize:active{background:var(--interactive-01)}:host([hidden]){display:none}"}},[257,"xv-table-cell",{columnId:[513,"column-id"],align:[513],overflow:[513],clampLines:[2,"clamp-lines"],tooltip:[1],width:[1],header:[516],sortable:[516],sortDirection:[513,"sort-direction"],hideable:[516],resizable:[516],reorderable:[516],reorderLabel:[1,"reorder-label"]}]);function n(){"undefined"!=typeof customElements&&["xv-table-cell","xv-tooltip-v2"].forEach((t=>{switch(t){case"xv-table-cell":customElements.get(i(t))||customElements.define(i(t),l);break;case"xv-tooltip-v2":customElements.get(i(t))||s()}}))}n();export{l as X,n as d}