@dropi/ui 0.1.18 → 0.1.20

package/dist/collection/components/dropi-steps/dropi-steps.js

@@ -0,0 +1,145 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-steps
+ * Horizontal stepper showing step progress with number/title/description.
+ */
+export class DropiSteps {
+    /** Total number of steps */
+    stepsCount = 3;
+    /** Show step number inside the circle */
+    showNumberOfStep = true;
+    /** Active/current step index (1-based) */
+    currentStep = 1;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels = [];
+    get parsedLabels() {
+        if (typeof this.stepLabels === 'string') {
+            try {
+                return JSON.parse(this.stepLabels);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.stepLabels || [];
+    }
+    stepState(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'focus';
+        return 'pending';
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (h("div", { key: '95573c2ac185f7fc63fa804a03873499ba296e5c', class: "stepper" }, steps.map((step) => {
+            const state = this.stepState(step);
+            const label = labels[step - 1];
+            const isLast = step === this.stepsCount;
+            return (h("div", { class: "stepper__step", key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? h("span", null, step) : null)), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (h("div", { class: "stepper__label" }, label.title && h("span", { class: "stepper__title" }, label.title), label.description && h("span", { class: "stepper__desc" }, label.description)))));
+        })));
+    }
+    static get is() { return "dropi-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-steps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stepsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of steps"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps-count",
+                "defaultValue": "3"
+            },
+            "showNumberOfStep": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show step number inside the circle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-number-of-step",
+                "defaultValue": "true"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active/current step index (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "1"
+            },
+            "stepLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepLabel[] | string",
+                    "resolved": "StepLabel[] | string",
+                    "references": {
+                        "StepLabel": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-steps/dropi-steps.tsx",
+                            "id": "src/components/dropi-steps/dropi-steps.tsx::StepLabel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Labels for each step. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step-labels",
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-switch/dropi-switch.js

@@ -16,7 +16,7 @@ export class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: '790db7283a976472fd3f8de502f73ece29134878', class: "toggle-switch" }, h("input", { key: '7199dcfb1a4f81eb30d7510966d56fd0111d648f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '2c62e927e77e58993ab44f2b4fafefcea556b71e', class: "slider" })));
+        return (h("label", { key: 'f02520c1b71af187ddfb766e4bac4e16482bb5cc', class: "toggle-switch" }, h("input", { key: '13b41ec9b7f69512be6d556f1946a3506d9557a3', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '0bb19ad9767c1e7c5956ef834228a6a2406c225c', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-table/dropi-table.css

@@ -0,0 +1,80 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--Gray-Gray-100, #eceef4);
+  border-radius: var(--Border-2, 8px);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Neutral-White, #fff);
+}
+
+/* Header */
+.table__th {
+  padding: var(--Size-3, 12px) var(--Size-3, 12px);
+  background: var(--Gray-Gray-50, #f7f8fa);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 10px);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  user-select: none;
+}
+.table__th--check { width: 40px; }
+.table__th--sortable { cursor: pointer; }
+.table__th--sortable:hover { background: var(--Gray-Gray-100, #eceef4); }
+
+.table__th-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Body */
+.table__tr {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.table__tr:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.table__tr--selected { background: var(--Primary-Primary-50, #fff5eb); }
+
+.table--striped .table__tr:nth-child(even) { background: var(--Gray-Gray-50, #f7f8fa); }
+.table--striped .table__tr:nth-child(even):hover { background: var(--Gray-Gray-100, #eceef4); }
+
+.table__td {
+  padding: var(--Size-3, 12px);
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  vertical-align: middle;
+}
+.table__td--check { width: 40px; }
+
+.table__td--empty {
+  text-align: center;
+  padding: var(--Size-8, 48px) var(--Size-4, 16px);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+.table__td--empty p { margin: var(--Size-2, 8px) 0 0; }
+
+/* Skeleton */
+.skeleton {
+  height: 14px;
+  background: linear-gradient(90deg, var(--Gray-Gray-100, #eceef4) 25%, var(--Gray-Gray-50, #f7f8fa) 50%, var(--Gray-Gray-100, #eceef4) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  border-radius: var(--Border-1, 4px);
+}
+.skeleton--sm { width: 20px; }
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

package/dist/collection/components/dropi-table/dropi-table.js

@@ -0,0 +1,333 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-table
+ * Data table with sortable columns, row selection, and empty state.
+ * Pass columns and rows as JSON strings or arrays.
+ */
+export class DropiTable {
+    /** Column definitions (array or JSON string) */
+    columns = [];
+    /** Row data (array or JSON string) */
+    rows = [];
+    /** Enable row selection (checkboxes) */
+    selectable = false;
+    /** Show loading skeleton */
+    loading = false;
+    /** Text shown when no rows */
+    emptyMessage = 'No hay datos disponibles';
+    /** Stripe alternate rows */
+    striped = false;
+    parsedColumns = [];
+    parsedRows = [];
+    sortKey = '';
+    sortDir = null;
+    selectedKeys = new Set();
+    /** Emitted when sort changes. e.detail = { key, dir } */
+    dropiSort;
+    /** Emitted when selection changes. e.detail = selected row indices */
+    dropiSelection;
+    /** Emitted when a row is clicked. e.detail = { row, index } */
+    dropiRowClick;
+    columnsChanged(val) {
+        this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    rowsChanged(val) {
+        this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        this.selectedKeys = new Set();
+    }
+    componentWillLoad() {
+        this.columnsChanged(this.columns);
+        this.rowsChanged(this.rows);
+    }
+    get sortedRows() {
+        if (!this.sortKey || !this.sortDir)
+            return this.parsedRows;
+        const key = this.sortKey;
+        const dir = this.sortDir === 'asc' ? 1 : -1;
+        return [...this.parsedRows].sort((a, b) => {
+            const av = a[key] ?? '';
+            const bv = b[key] ?? '';
+            if (av < bv)
+                return -dir;
+            if (av > bv)
+                return dir;
+            return 0;
+        });
+    }
+    handleSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.sortKey === col.key) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+            if (this.sortDir === null)
+                this.sortKey = '';
+        }
+        else {
+            this.sortKey = col.key;
+            this.sortDir = 'asc';
+        }
+        this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
+    }
+    toggleRow(idx) {
+        const next = new Set(this.selectedKeys);
+        if (next.has(idx))
+            next.delete(idx);
+        else
+            next.add(idx);
+        this.selectedKeys = next;
+        this.dropiSelection.emit(Array.from(next));
+    }
+    toggleAll(checked) {
+        this.selectedKeys = checked
+            ? new Set(this.sortedRows.map((_, i) => i))
+            : new Set();
+        this.dropiSelection.emit(Array.from(this.selectedKeys));
+    }
+    sortIcon(col) {
+        if (!col.sortable)
+            return null;
+        if (this.sortKey !== col.key) {
+            return h("dropi-icon", { name: "Sort", width: "12px", height: "12px", color: "Gray-Gray-300" });
+        }
+        return this.sortDir === 'asc'
+            ? h("dropi-icon", { name: "Arrow-Up-2", width: "12px", height: "12px", color: "Primary-Primary-500" })
+            : h("dropi-icon", { name: "Arrow-Down-2", width: "12px", height: "12px", color: "Primary-Primary-500" });
+    }
+    render() {
+        const rows = this.sortedRows;
+        const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
+        return (h("div", { key: '3e06da209d1f71b8a4a250f4bcd8a8213f34781d', class: "table-wrap" }, h("table", { key: '20056c30e2652f2a405eeb00954dd7b9c9b5924b', class: { 'table': true, 'table--striped': this.striped } }, h("thead", { key: '1a1ea1914f81d1ef8814f202de4d60308801dc1d' }, h("tr", { key: '22447d7fef0cf22c27c6249570c454d44b0865d3' }, this.selectable && (h("th", { key: 'd51aa876d97e01840a5adc34a5ec53f30fc2cac6', class: "table__th table__th--check" }, h("dropi-checkbox", { key: '192639cf8599dc5f3b095092a403509050e43efa', checked: allSelected, onDropiChange: (e) => this.toggleAll(e.detail) }))), this.parsedColumns.map(col => (h("th", { class: {
+                'table__th': true,
+                'table__th--sortable': !!col.sortable,
+            }, style: { width: col.width, textAlign: col.align || 'left' }, onClick: () => this.handleSort(col) }, h("span", { class: "table__th-inner" }, col.label, this.sortIcon(col))))))), h("tbody", { key: '93f65647369b59f913b381f541a18a215e8e0e9a' }, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table__tr--skeleton" }, this.selectable && h("td", { class: "table__td" }, h("div", { class: "skeleton skeleton--sm" })), this.parsedColumns.map(() => (h("td", { class: "table__td" }, h("div", { class: "skeleton" })))))))) : rows.length === 0 ? (h("tr", null, h("td", { class: "table__td table__td--empty", colSpan: this.parsedColumns.length + (this.selectable ? 1 : 0) }, h("dropi-icon", { name: "Document", width: "24px", height: "24px", color: "Gray-Gray-300" }), h("p", null, this.emptyMessage)))) : (rows.map((row, i) => (h("tr", { class: {
+                'table__tr': true,
+                'table__tr--selected': this.selectedKeys.has(i),
+            }, onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.selectable && (h("td", { class: "table__td table__td--check", onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onDropiChange: () => this.toggleRow(i) }))), this.parsedColumns.map(col => (h("td", { class: "table__td", style: { textAlign: col.align || 'left' } }, row[col.key] ?? '—')))))))))));
+    }
+    static get is() { return "dropi-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableColumn[] | string",
+                    "resolved": "TableColumn[] | string",
+                    "references": {
+                        "TableColumn": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableRow[] | string",
+                    "resolved": "TableRow[] | string",
+                    "references": {
+                        "TableRow": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row data (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "[]"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable row selection (checkboxes)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown when no rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "'No hay datos disponibles'"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stripe alternate rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedColumns": {},
+            "parsedRows": {},
+            "sortKey": {},
+            "sortDir": {},
+            "selectedKeys": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiSort",
+                "name": "dropiSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when sort changes. e.detail = { key, dir }"
+                },
+                "complexType": {
+                    "original": "{ key: string; dir: SortDir }",
+                    "resolved": "{ key: string; dir: SortDir; }",
+                    "references": {
+                        "SortDir": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::SortDir"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropiSelection",
+                "name": "dropiSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes. e.detail = selected row indices"
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiRowClick",
+                "name": "dropiRowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a row is clicked. e.detail = { row, index }"
+                },
+                "complexType": {
+                    "original": "{ row: TableRow; index: number }",
+                    "resolved": "{ row: TableRow; index: number; }",
+                    "references": {
+                        "TableRow": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableRow"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "columnsChanged"
+            }, {
+                "propName": "rows",
+                "methodName": "rowsChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-tabs/dropi-tabs.js

@@ -32,7 +32,7 @@ export class DropiTabs {
         this.dropiTabChange.emit(tab);
     }
     render() {
-        return (h("div", { key: '5b28faac5789a5e29aa68fe2892854cdebccda75', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (h("div", { key: '9db1e2f4fdd15fc4ea4407d83fe33c562270acec', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (h("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, h("span", { class: "tab-label-row" }, h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
                 ? h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })

package/dist/collection/components/dropi-tag/dropi-tag.css

@@ -1,5 +1,5 @@
 :host {
-  display: inline-block;
+  display: inline-flex;
 }
 
 *, *::before, *::after { box-sizing: border-box; }
@@ -31,7 +31,6 @@
 
 .file-icon {
   display: flex;
-  margin-right: 4px;
 }
 
 @keyframes fade-in {

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

@@ -48,7 +48,7 @@ export class DropiTag {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: 'd559f6c2ed27d543f018d3533d8d972bc47ceb9d', class: "container-chips" }, h("div", { key: 'd131a4626ead2d3d53d5c77875f8ebb19acc3b52', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '54775a2ca1bd87be3293b3d6417f4a26c6da0c85', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'bce897f4094c33fd53dc98571cae60cd456e0706' }, this.text))));
+        return (h("div", { key: 'ca7fdd40b3d059abe34a6c4ccfba5cbfbdb5c786', class: "container-chips" }, h("div", { key: '897f4ab4a9d2d5ecb7088c6732f59c6cc3138c43', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '77b9315e4d1d4bd257331a4ce4cb3b82480430c0', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'c55aede3070168989b8ebefa85480968f71eb08a' }, this.text))));
     }
     static get is() { return "dropi-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.css

@@ -0,0 +1,14 @@
+:host {
+  display: inline-block;
+}
+
+.type-variation {
+  border-radius: 4px;
+  background: #f1b44c;
+  padding: 2px 6px;
+  font-size: 12px;
+  color: #fff;
+  text-transform: capitalize;
+  font-weight: 400;
+  width: fit-content;
+}

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.js

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tag-type-product
+ * Tag badge showing the product variation type.
+ */
+export class DropiTagTypeProduct {
+    /** Label text. Default: VARIABLE */
+    label = 'VARIABLE';
+    render() {
+        return h("div", { key: '7002748963348a2361665d0d307f4d8eb3a24e3a', class: "type-variation" }, this.label);
+    }
+    static get is() { return "dropi-tag-type-product"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tag-type-product.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tag-type-product.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text. Default: VARIABLE"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'VARIABLE'"
+            }
+        };
+    }
+}