@teranga-ds/components 0.1.0

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

@@ -0,0 +1,329 @@
+import { h, Host } from "@stencil/core";
+export class TgSelect {
+    constructor() {
+        this.placeholder = 'Sélectionner…';
+        this.options = '[]';
+        this.required = false;
+        this.disabled = false;
+        this.fullWidth = false;
+        this.size = 'md';
+        this.selectId = `tg-select-${selectCount++}`;
+        this.open = false;
+        this.toggleDropdown = (e) => {
+            e.stopPropagation();
+            if (!this.disabled)
+                this.open = !this.open;
+        };
+        this.selectOption = (opt, e) => {
+            e.stopPropagation();
+            if (opt.disabled)
+                return;
+            this.value = opt.value;
+            this.open = false;
+            this.tgChange.emit(opt.value);
+        };
+    }
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get selectedLabel() {
+        var _a;
+        return (_a = this.parsedOptions.find(o => o.value === this.value)) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    handleDocumentClick() {
+        this.open = false;
+    }
+    render() {
+        var _a;
+        const isInvalid = !!this.error;
+        const opts = this.parsedOptions;
+        return (h(Host, { key: '443ea0e4bb8538d5db70c691097bf93cfceff132' }, h("div", { key: '32f0921431972dc7401f0bd38ff2b05e6cbeff88', class: { 'tg-select-wrapper': true, [`tg-select-wrapper--${this.size}`]: true } }, this.label && (h("label", { key: '34273d2004455a131a2a73daf9b317449d9e6f4d', class: "tg-select__label" }, this.label, this.required && h("span", { key: '3b1e463ef449629e1f6dcf89b4cc67ebbab20e5c', class: "tg-select__required" }, " *"))), h("button", { key: 'dab926bef0054f133c277bbbe736b5399e69f0e3', type: "button", class: {
+                'tg-select__trigger': true,
+                'tg-select__trigger--placeholder': !this.value,
+                'tg-select__trigger--invalid': isInvalid,
+            }, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", onClick: this.toggleDropdown }, h("span", { key: '8cba42521505bf731343bdf1d4e8206bb6d3f08d' }, (_a = this.selectedLabel) !== null && _a !== void 0 ? _a : this.placeholder), h("svg", { key: '9e496d5f2697df35291483c14bf17d68d59b657a', class: { 'tg-select__chevron': true, 'tg-select__chevron--open': this.open }, viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: '180baa210ebef935a9a68c54555656a526d16e41', "fill-rule": "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", "clip-rule": "evenodd" }))), this.open && (h("div", { key: '48c4d329ad75ec2a6255cddc069daac3f8be05d8', class: "tg-select__dropdown", role: "listbox", onClick: (e) => e.stopPropagation() }, opts.map(opt => (h("div", { class: {
+                'tg-select__option': true,
+                'tg-select__option--selected': opt.value === this.value,
+                'tg-select__option--disabled': !!opt.disabled,
+            }, role: "option", "aria-selected": opt.value === this.value ? 'true' : 'false', onClick: (e) => this.selectOption(opt, e) }, opt.value === this.value && (h("svg", { class: "tg-select__check", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { "fill-rule": "evenodd", d: "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z", "clip-rule": "evenodd" }))), opt.label))))), isInvalid ? (h("span", { class: "tg-select__error" }, this.error)) : this.helperText ? (h("span", { class: "tg-select__helper" }, this.helperText)) : null)));
+    }
+    static get is() { return "tg-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-select.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"
+            },
+            "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": "'S\u00E9lectionner\u2026'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[] | string",
+                    "resolved": "SelectOption[] | string",
+                    "references": {
+                        "SelectOption": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-select/tg-select.tsx",
+                            "id": "src/components/tg-select/tg-select.tsx::SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "'[]'"
+            },
+            "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"
+            },
+            "error": {
+                "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"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "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'"
+            },
+            "selectId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-id",
+                "defaultValue": "`tg-select-${selectCount++}`"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    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": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+let selectCount = 0;

package/dist/collection/components/tg-session-expired/tg-session-expired.css

@@ -0,0 +1,8 @@
+:host { display: contents; }
+.tg-se__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 99999; display: flex; align-items: center; justify-content: center; }
+.tg-se { background: var(--tg-color-surface-raised); border-radius: var(--tg-radius-2xl); padding: var(--tg-spacing-8); text-align: center; max-width: 22rem; font-family: var(--tg-font-family-sans); }
+.tg-se__icon { font-size: 3rem; margin-bottom: var(--tg-spacing-3); }
+.tg-se__title { 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-se__msg { margin: 0 0 var(--tg-spacing-5); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); line-height: var(--tg-line-height-relaxed); }
+.tg-se__btn { width: 100%; padding: var(--tg-spacing-2-5); background: var(--tg-color-primary); color: var(--tg-color-primary-on); border: none; border-radius: var(--tg-radius-lg); font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); cursor: pointer; }
+.tg-se__btn:hover { filter: brightness(1.1); }

package/dist/collection/components/tg-session-expired/tg-session-expired.js

@@ -0,0 +1,128 @@
+import { h, Host } from "@stencil/core";
+export class TgSessionExpired {
+    constructor() {
+        this.open = false;
+        this.heading = 'Session expir\u00e9e';
+        this.message = 'Votre session a expir\u00e9. Veuillez vous reconnecter.';
+        this.loginLabel = 'Se reconnecter';
+    }
+    render() {
+        if (!this.open)
+            return h(Host, null);
+        return (h(Host, null, h("div", { class: "tg-se__overlay" }, h("div", { class: "tg-se" }, h("div", { class: "tg-se__icon" }, "\\ud83d\\udd12"), h("h3", { class: "tg-se__title" }, this.heading), h("p", { class: "tg-se__msg" }, this.message), h("button", { class: "tg-se__btn", type: "button", onClick: () => this.tgRelogin.emit() }, this.loginLabel)))));
+    }
+    static get is() { return "tg-session-expired"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-session-expired.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-session-expired.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "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": "'Session expir\\u00e9e'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "'Votre session a expir\\u00e9. Veuillez vous reconnecter.'"
+            },
+            "loginLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "login-label",
+                "defaultValue": "'Se reconnecter'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgRelogin",
+                "name": "tgRelogin",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,188 @@
+:host {
+  display: block;
+}
+
+.tg-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  min-height: 100%;
+  background: var(--tg-color-surface, #fff);
+  border-right: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+  font-family: var(--tg-font-family, sans-serif);
+  padding: var(--tg-spacing-md, 16px);
+  transition: width var(--tg-duration-normal, 200ms) var(--tg-ease-default, ease),
+              transform var(--tg-duration-normal, 200ms) var(--tg-ease-default, ease);
+}
+
+.tg-sidebar--collapsed {
+  width: 64px;
+}
+
+/* Header */
+.tg-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--tg-spacing-md, 16px);
+  margin-bottom: var(--tg-spacing-sm, 12px);
+  border-bottom: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+}
+
+.tg-sidebar__title {
+  font-size: var(--tg-font-size-md, 0.875rem);
+  font-weight: var(--tg-font-weight-semibold, 600);
+  color: var(--tg-color-text, #111827);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tg-sidebar--collapsed .tg-sidebar__title {
+  display: none;
+}
+
+.tg-sidebar__collapse-btn {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: var(--tg-spacing-xs, 8px);
+  border-radius: var(--tg-radius-md, 8px);
+  color: var(--tg-color-text-secondary, #6b7280);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background var(--tg-duration-fast, 150ms);
+}
+
+.tg-sidebar__collapse-btn:hover {
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+.tg-sidebar__collapse-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-sidebar__collapse-btn svg {
+  width: 18px; height: 18px;
+  transition: transform var(--tg-duration-fast, 150ms);
+}
+
+.tg-sidebar--collapsed .tg-sidebar__collapse-btn svg {
+  transform: rotate(180deg);
+}
+
+/* Section */
+.tg-sidebar__section {
+  margin-bottom: var(--tg-spacing-md, 16px);
+}
+
+.tg-sidebar__section-title {
+  font-size: 0.6875rem;
+  font-weight: var(--tg-font-weight-semibold, 600);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--tg-color-text-secondary, #6b7280);
+  padding: 0 var(--tg-spacing-sm, 12px);
+  margin-bottom: var(--tg-spacing-xs, 8px);
+}
+
+.tg-sidebar--collapsed .tg-sidebar__section-title {
+  display: none;
+}
+
+/* Nav item */
+.tg-sidebar__nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.tg-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-sm, 12px);
+  padding: var(--tg-spacing-xs, 8px) var(--tg-spacing-sm, 12px);
+  border-radius: var(--tg-radius-md, 8px);
+  color: var(--tg-color-text-secondary, #6b7280);
+  text-decoration: none;
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  font-weight: var(--tg-font-weight-medium, 500);
+  transition: color var(--tg-duration-fast, 150ms), background var(--tg-duration-fast, 150ms);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tg-sidebar__link:hover {
+  color: var(--tg-color-text, #111827);
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+.tg-sidebar__link--active {
+  color: var(--tg-color-primary, #00853F);
+  background: var(--tg-color-primary-50, #ecfdf5);
+}
+
+.tg-sidebar__link:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-sidebar__link-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.tg-sidebar__link-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.tg-sidebar__link-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tg-sidebar--collapsed .tg-sidebar__link-label {
+  display: none;
+}
+
+.tg-sidebar--collapsed .tg-sidebar__link {
+  justify-content: center;
+  padding: var(--tg-spacing-xs, 8px);
+}
+
+/* Badge */
+.tg-sidebar__badge {
+  margin-left: auto;
+  font-size: 0.6875rem;
+  font-weight: var(--tg-font-weight-semibold, 600);
+  background: var(--tg-color-danger, #dc2626);
+  color: #fff;
+  border-radius: 9999px;
+  padding: 0 6px;
+  min-width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tg-sidebar--collapsed .tg-sidebar__badge {
+  display: none;
+}
+
+/* Footer */
+.tg-sidebar__footer {
+  margin-top: auto;
+  padding-top: var(--tg-spacing-md, 16px);
+  border-top: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+}