@teranga-ds/components 0.1.0

package/dist/collection/components/tg-date-picker/tg-date-picker.js

@@ -0,0 +1,251 @@
+import { h, Host } from "@stencil/core";
+export class TgDatePicker {
+    constructor() {
+        this.placeholder = 'JJ/MM/AAAA';
+        this.disabled = false;
+        this.invalid = false;
+        this.size = 'md';
+        this.open = false;
+        this.viewDate = new Date();
+        this.prevMonth = () => { const d = new Date(this.viewDate); d.setMonth(d.getMonth() - 1); this.viewDate = d; };
+        this.nextMonth = () => { const d = new Date(this.viewDate); d.setMonth(d.getMonth() + 1); this.viewDate = d; };
+    }
+    onDocClick() { this.open = false; }
+    daysInMonth(y, m) { return new Date(y, m + 1, 0).getDate(); }
+    firstDow(y, m) { return new Date(y, m, 1).getDay(); }
+    selectDay(day) {
+        const y = this.viewDate.getFullYear();
+        const m = String(this.viewDate.getMonth() + 1).padStart(2, '0');
+        const d = String(day).padStart(2, '0');
+        this.tgChange.emit(y + '-' + m + '-' + d);
+        this.open = false;
+    }
+    formatDisplay() {
+        if (!this.value)
+            return '';
+        const p = this.value.split('-');
+        return p[2] + '/' + p[1] + '/' + p[0];
+    }
+    render() {
+        const y = this.viewDate.getFullYear();
+        const m = this.viewDate.getMonth();
+        const days = this.daysInMonth(y, m);
+        const first = this.firstDow(y, m);
+        const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+        const dNames = ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'];
+        const cells = [];
+        for (let i = 0; i < first; i++)
+            cells.push(null);
+        for (let i = 1; i <= days; i++)
+            cells.push(i);
+        return (h(Host, { key: '1bdb0e804ddd590b60b2babcee9189ccfc8103b0' }, h("div", { key: '5a7506eabbc0cefded2504d5266eb3a1ddfe525f', class: 'tg-date-picker tg-date-picker--' + this.size, onClick: (e) => e.stopPropagation() }, this.label && h("label", { key: 'd97ca1c91f0a1d2aef7f4ffabd1704621f702b76', class: "tg-dp__label" }, this.label), h("div", { key: 'fe526741305cebfe28998b3571e036971de8bac2', class: { 'tg-dp__input-wrap': true, 'tg-dp__input-wrap--invalid': this.invalid }, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, h("svg", { key: '65662ba0e277a24d7872564383f57d9e62a6af91', class: "tg-dp__icon", viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" }, h("path", { key: '32dc549db6c1176eb768b93d9b8f9229bfb50d04', "fill-rule": "evenodd", d: "M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5a.75.75 0 000 1.5h10.5a.75.75 0 000-1.5H4.75z" })), h("input", { key: '4042c9d0da06a27715fe0f90a02d327b53c64942', class: "tg-dp__input", type: "text", readonly: true, value: this.formatDisplay(), placeholder: this.placeholder, disabled: this.disabled })), this.open && (h("div", { key: 'c197780bc0024a4dd861ee916596fd46e83aaceb', class: "tg-dp__calendar" }, h("div", { key: '1e0f610b1e5334f44c6cc986efe2dc054a9bc91c', class: "tg-dp__nav" }, h("button", { key: '194e3c5829de2c81497a453ff0f3e32229e1b8eb', class: "tg-dp__nav-btn", type: "button", onClick: this.prevMonth }, "\u2039"), h("span", { key: '7976fef62f152f1707f9aa8bd263ea6ca440b27b', class: "tg-dp__month-year" }, months[m], " ", y), h("button", { key: 'ffe86d738629bfce856af063efb4c4fe333ff81f', class: "tg-dp__nav-btn", type: "button", onClick: this.nextMonth }, "\u203A")), h("div", { key: '1392d14a55be0f9761f48b63dfaf5ed87c576de9', class: "tg-dp__weekdays" }, dNames.map(d => h("span", { class: "tg-dp__wd" }, d))), h("div", { key: 'a238b5c68e95aaba5d09e5eb8926414ccf9f3ff7', class: "tg-dp__days" }, cells.map(day => day ? (h("button", { class: { 'tg-dp__day': true, 'tg-dp__day--sel': this.value === y + '-' + String(m + 1).padStart(2, '0') + '-' + String(day).padStart(2, '0'), 'tg-dp__day--today': new Date().getDate() === day && new Date().getMonth() === m && new Date().getFullYear() === y }, type: "button", onClick: () => this.selectDay(day) }, day)) : h("span", { class: "tg-dp__day tg-dp__day--empty" }))))), this.errorText && h("p", { key: 'b2806b9a78c219aeb93df813b1154359b9b8622d', class: "tg-dp__error" }, this.errorText), !this.errorText && this.helperText && h("p", { key: '5dd972b9d8229e6aa5c8c8a8ada81e302c375518', class: "tg-dp__helper" }, this.helperText))));
+    }
+    static get is() { return "tg-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-date-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'JJ/MM/AAAA'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-text"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "viewDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/tg-empty-state/tg-empty-state.css

@@ -0,0 +1,7 @@
+:host { display: block; }
+.tg-es { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--tg-spacing-10) var(--tg-spacing-6); font-family: var(--tg-font-family-sans); }
+.tg-es__icon { font-size: 3rem; margin-bottom: var(--tg-spacing-4); color: var(--tg-color-text-disabled); }
+.tg-es__heading { margin: 0 0 var(--tg-spacing-2); font-size: var(--tg-font-size-lg); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-primary); }
+.tg-es__desc { margin: 0 0 var(--tg-spacing-4); max-width: 24rem; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); line-height: var(--tg-line-height-relaxed); }
+.tg-es__action { background: var(--tg-color-primary); color: var(--tg-color-primary-on); border: none; border-radius: var(--tg-radius-lg); padding: var(--tg-spacing-2) var(--tg-spacing-5); font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); cursor: pointer; transition: filter var(--tg-duration-fast); }
+.tg-es__action:hover { filter: brightness(1.1); }

package/dist/collection/components/tg-empty-state/tg-empty-state.js

@@ -0,0 +1,123 @@
+import { h, Host } from "@stencil/core";
+export class TgEmptyState {
+    constructor() {
+        this.heading = '';
+        this.variant = 'default';
+    }
+    render() {
+        return (h(Host, { key: 'd944e9a58cddd66f6219051f03796f6aa57d99f2' }, h("div", { key: '2f4dbe36de5e2de74ef26c21e836cd44c3d54268', class: 'tg-es tg-es--' + this.variant }, this.icon && h("div", { key: 'c2ee8e4d1efa67ddb57a9ad9578fd2ac308a84e4', class: "tg-es__icon" }, this.icon), h("slot", { key: '88a9a65a7a33a12c534420a7c8cead7359293dbd', name: "illustration" }), h("h3", { key: 'd0e4e54fdce2b3c0c508f858f3f8748d741da683', class: "tg-es__heading" }, this.heading), this.description && h("p", { key: 'ff6e9dc56b7d0952ee375639df242737490a9bfc', class: "tg-es__desc" }, this.description), this.actionLabel && h("button", { key: '76d760c3aa4eb844639156a333635ac277ff960d', class: "tg-es__action", type: "button" }, this.actionLabel), h("slot", { key: 'af147b503e0736ad1de68def15514799e1f8fbf2' }))));
+    }
+    static get is() { return "tg-empty-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-empty-state.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'illustration'",
+                    "resolved": "\"default\" | \"illustration\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-expandable-row/tg-expandable-row.css

@@ -0,0 +1,13 @@
+:host { display: block; }
+.tg-er { font-family: var(--tg-font-family-sans); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); overflow: hidden; transition: box-shadow var(--tg-duration-fast); }
+.tg-er--open { box-shadow: var(--tg-shadow-sm); }
+.tg-er__header { display: flex; align-items: center; gap: var(--tg-spacing-3); padding: var(--tg-spacing-3) var(--tg-spacing-4); cursor: pointer; background: var(--tg-color-surface-raised); transition: background var(--tg-duration-fast); }
+.tg-er__header:hover { background: var(--tg-color-primary-subtle); }
+.tg-er__icon { font-size: 1.25rem; flex-shrink: 0; }
+.tg-er__text { flex: 1; }
+.tg-er__title { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-er__sub { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); margin-top: 2px; }
+.tg-er__chevron { display: flex; color: var(--tg-color-text-secondary); transition: transform var(--tg-duration-fast); }
+.tg-er__chevron--open { transform: rotate(180deg); }
+.tg-er__body { padding: var(--tg-spacing-4); border-top: 1px solid var(--tg-color-border); background: var(--tg-color-surface-raised); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); animation: tg-er-slide var(--tg-duration-fast) var(--tg-ease-out); }
+@keyframes tg-er-slide { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }

package/dist/collection/components/tg-expandable-row/tg-expandable-row.js

@@ -0,0 +1,89 @@
+import { h, Host } from "@stencil/core";
+export class TgExpandableRow {
+    constructor() {
+        this.header = '';
+        this.expanded = false;
+    }
+    render() {
+        return (h(Host, { key: '265ad774c81210f43635085f8891f0aba5bf305f' }, h("div", { key: '9d0f0fbe35d033abe53d49c34fc29010a1fff3e6', class: { 'tg-er': true, 'tg-er--open': this.expanded } }, h("div", { key: '8fd0aed7ffa9221024fa33ff8508ed33764a2e16', class: "tg-er__header", onClick: () => { this.expanded = !this.expanded; } }, this.icon && h("span", { key: '27aa57c9e0c28a49f4fbd6610296c2cba1d8e9b3', class: "tg-er__icon" }, this.icon), h("div", { key: '916ee17fc8df06f0a7691a2415c84ee5e9e0ab1d', class: "tg-er__text" }, h("span", { key: '6730a2d337f3bb278a11683e4c36c7fa19aa652b', class: "tg-er__title" }, this.header), this.subtext && h("span", { key: 'f3ce90306dc584cd19f1a5f950ddb861acb1761c', class: "tg-er__sub" }, this.subtext)), h("span", { key: '10d999cde3027935a97ebfa50781518eec9abfac', class: { 'tg-er__chevron': true, 'tg-er__chevron--open': this.expanded } }, h("svg", { key: '99db2edc13b678d2b3b68f96a900e026904f0a0f', viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" }, h("path", { key: '03f5b1f103022a583bfbab4065591f32541c5253', "fill-rule": "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" })))), this.expanded && h("div", { key: '443203e99952b3fcf307f8b6527e0108a9e8ee23', class: "tg-er__body" }, h("slot", { key: 'c344a5dda39a42ab4e62498eb8f9326b768364fa' })))));
+    }
+    static get is() { return "tg-expandable-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-expandable-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-expandable-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header",
+                "defaultValue": "''"
+            },
+            "subtext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtext"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {}
+        };
+    }
+}

package/dist/collection/components/tg-fab/tg-fab.css

@@ -0,0 +1,16 @@
+:host { display: inline-flex; }
+.tg-fab { display: inline-flex; align-items: center; justify-content: center; gap: var(--tg-spacing-2); border: none; border-radius: var(--tg-radius-full); cursor: pointer; font-family: var(--tg-font-family-sans); font-weight: var(--tg-font-weight-medium); transition: all var(--tg-duration-fast); box-shadow: var(--tg-shadow-lg); }
+.tg-fab:hover { transform: scale(1.05); box-shadow: var(--tg-shadow-xl); }
+.tg-fab:active { transform: scale(0.95); }
+.tg-fab--sm { width: 2.5rem; height: 2.5rem; font-size: var(--tg-font-size-xs); }
+.tg-fab--md { min-width: 3rem; height: 3rem; padding: 0 var(--tg-spacing-3); font-size: var(--tg-font-size-sm); }
+.tg-fab--lg { min-width: 3.5rem; height: 3.5rem; padding: 0 var(--tg-spacing-4); font-size: var(--tg-font-size-md); }
+.tg-fab--primary { background: var(--tg-color-primary); color: var(--tg-color-primary-on); }
+.tg-fab--secondary { background: var(--tg-color-surface-raised); color: var(--tg-color-text-primary); border: 1px solid var(--tg-color-border); }
+.tg-fab--success { background: var(--tg-color-success); color: white; }
+.tg-fab--danger { background: var(--tg-color-danger); color: white; }
+.tg-fab--fixed { position: fixed; z-index: 1000; }
+.tg-fab--bottom-right { bottom: var(--tg-spacing-6); right: var(--tg-spacing-6); }
+.tg-fab--bottom-left { bottom: var(--tg-spacing-6); left: var(--tg-spacing-6); }
+.tg-fab--bottom-center { bottom: var(--tg-spacing-6); left: 50%; transform: translateX(-50%); }
+.tg-fab__icon { font-size: 1.25em; }

package/dist/collection/components/tg-fab/tg-fab.js

@@ -0,0 +1,164 @@
+import { h, Host } from "@stencil/core";
+export class TgFab {
+    constructor() {
+        this.variant = 'primary';
+        this.size = 'md';
+        this.position = 'bottom-right';
+        this.fixed = true;
+    }
+    render() {
+        return (h(Host, { key: '6dd636b4f00a9e639a1c16e116a3d1baca5116f4' }, h("button", { key: '37a5641cc8f781ecdf7d1e7a2f8571a553c66d71', class: 'tg-fab tg-fab--' + this.variant + ' tg-fab--' + this.size + (this.fixed ? ' tg-fab--fixed tg-fab--' + this.position : ''), type: "button", onClick: () => this.tgClick.emit() }, this.icon && h("span", { key: '8d327d220b24a43fdac63984e014b9a10da0c141', class: "tg-fab__icon" }, this.icon), this.label && h("span", { key: 'df06e983206107d5d80f3a184576447152e4be40', class: "tg-fab__label" }, this.label), !this.icon && !this.label && h("svg", { key: '31e5b6735e0aac2bc6d958a489e6f9beaa6ea75d', viewBox: "0 0 20 20", fill: "currentColor", width: "20", height: "20" }, h("path", { key: '52fe468dd13cc4978ee607a3f3886e562cfefa29', d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" })))));
+    }
+    static get is() { return "tg-fab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-fab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-fab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'danger'",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom-right' | 'bottom-left' | 'bottom-center'",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom-right'"
+            },
+            "fixed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fixed",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgClick",
+                "name": "tgClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}