@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.2

package/dist/components/table/table.js

@@ -0,0 +1,167 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StTable = class StTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.data = [];
+        this.mode = 'horizontal';
+        this.striped = false;
+        this.hoverable = false;
+        this.dense = false;
+    }
+    render() {
+        return html `
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              ${this.columns.map(col => html `<th scope="col">${col.header}</th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.data.map(row => html `
+              <tr>
+                ${this.columns.map(col => html `
+                  <td data-label=${col.header}>${row[col.key]}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+    }
+};
+StTable.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .table-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: var(--st-font-size-base, 1rem);
+        color: var(--st-color-text);
+      }
+
+      th {
+        font-weight: 600;
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 2px solid var(--st-color-border);
+        color: var(--st-color-text-muted);
+        white-space: nowrap;
+      }
+
+      td {
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 1px solid var(--st-color-border);
+      }
+
+      /* Modifiers */
+      :host([dense]) th,
+      :host([dense]) td {
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+      }
+
+      :host([striped]) tbody tr:nth-of-type(odd) {
+        background-color: var(--st-color-surface-muted);
+      }
+
+      :host([hoverable]) tbody tr:hover {
+        background-color: var(--st-color-surface-hover);
+      }
+
+      /* ==========================================================
+         Vertical Mode (Responsive Stacked Cards)
+         ========================================================== */
+      :host([mode="vertical"]) table,
+      :host([mode="vertical"]) tbody,
+      :host([mode="vertical"]) tr,
+      :host([mode="vertical"]) td {
+        display: block;
+        width: 100%;
+      }
+
+      /* Visually hide header but keep for screen readers */
+      :host([mode="vertical"]) thead {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      :host([mode="vertical"]) tr {
+        margin-bottom: var(--st-spacing-md);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        overflow: hidden;
+      }
+
+      :host([mode="vertical"]) td {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--st-color-border);
+        text-align: right;
+      }
+
+      :host([mode="vertical"]) td:last-child {
+        border-bottom: none;
+      }
+
+      /* Inject the header name on the left */
+      :host([mode="vertical"]) td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        text-align: left;
+        padding-right: var(--st-spacing-md);
+        color: var(--st-color-text-muted);
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], StTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], StTable.prototype, "data", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StTable.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTable.prototype, "striped", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTable.prototype, "hoverable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTable.prototype, "dense", void 0);
+StTable = __decorate([
+    customElement('st-table')
+], StTable);
+export { StTable };

package/dist/components/tabs/tab-panel.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class StTabPanel extends LitElement {
+    name: string;
+    active: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=tab-panel.d.ts.map

package/dist/components/tabs/tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACG,IAAI,SAAM;IACT,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BAYX;IAEF,MAAM,yCAML;CACF"}

package/dist/components/tabs/tab-panel.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StTabPanel = class StTabPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.active = false;
+    }
+    render() {
+        return html `
+      <div role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+StTabPanel.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        padding: var(--st-spacing-md) 0;
+      }
+
+      :host(:not([active])) {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StTabPanel.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTabPanel.prototype, "active", void 0);
+StTabPanel = __decorate([
+    customElement('st-tab-panel')
+], StTabPanel);
+export { StTabPanel };

package/dist/components/tabs/tab.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+export declare class StTab extends LitElement {
+    panel: string;
+    active: boolean;
+    static styles: import("lit").CSSResult[];
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=tab.d.ts.map

package/dist/components/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,KAAM,SAAQ,UAAU;IACQ,KAAK,SAAM;IACV,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BA6CX;IAEF,OAAO,CAAC,YAAY;IAQpB,MAAM,yCAWL;CACF"}

package/dist/components/tabs/tab.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StTab = class StTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.panel = '';
+        this.active = false;
+    }
+    _handleClick() {
+        this.dispatchEvent(new CustomEvent('st-tab-select', {
+            detail: { panel: this.panel },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        return html `
+      <button 
+        role="tab" 
+        aria-selected=${this.active ? 'true' : 'false'}
+        tabindex=${this.active ? '0' : '-1'}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+StTab.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-block;
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        white-space: nowrap;
+      }
+
+      button:hover {
+        color: var(--st-color-text);
+      }
+
+      button:focus-visible {
+        outline: none;
+        background-color: var(--st-color-surface);
+        border-radius: 4px 4px 0 0;
+      }
+
+      /* Active State */
+      :host([active]) button {
+        color: var(--st-color-primary);
+        border-bottom-color: var(--st-color-primary);
+      }
+
+      ::slotted(svg) {
+        width: 1.125rem;
+        height: 1.125rem;
+        fill: currentColor;
+      }
+    `
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StTab.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTab.prototype, "active", void 0);
+StTab = __decorate([
+    customElement('st-tab')
+], StTab);
+export { StTab };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,14 @@
+import "./tab.js";
+import "./tab-panel.js";
+import { LitElement } from "lit";
+export declare class StTabs extends LitElement {
+    private _tabs;
+    private _panels;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleTabSelect;
+    private _handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,CAAC,KAAK,CAAW;IAGxB,OAAO,CAAC,OAAO,CAAgB;IAE/B,MAAM,CAAC,MAAM,4BAoBX;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,iBAAiB;IAUzB,MAAM,yCASL;CACF"}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import "./tab.js";
+import "./tab-panel.js";
+import { LitElement, html, css } from "lit";
+import { customElement, queryAssignedElements } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+let StTabs = class StTabs extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("st-tab-select", this._handleTabSelect);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("st-tab-select", this._handleTabSelect);
+    }
+    _handleTabSelect(e) {
+        // 1. Stop the event here so parent <st-tabs> instances don't react to it
+        e.stopPropagation();
+        const targetPanel = e.detail.panel;
+        // Update active states on all tabs
+        this._tabs.forEach((tab) => {
+            tab.active = tab.panel === targetPanel;
+        });
+        // Update active states on all panels
+        this._panels.forEach((panel) => {
+            panel.active = panel.name === targetPanel;
+        });
+    }
+    // Ensures the first tab is active by default if none are explicitly set
+    _handleSlotChange() {
+        if (!this._tabs.length || !this._panels.length)
+            return;
+        const hasActiveTab = this._tabs.some((tab) => tab.active);
+        if (!hasActiveTab) {
+            this._tabs[0].active = true;
+            this._panels[0].active = true;
+        }
+    }
+    render() {
+        return html `
+      <div class="nav-container" role="tablist">
+        <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+      <div class="panels-container">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+StTabs.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+
+      .nav-container {
+        display: flex;
+        /* Creates the track line underneath the tabs */
+        border-bottom: 1px solid var(--st-color-border);
+        gap: var(--st-spacing-xs);
+        overflow-x: auto; /* Allows tabs to scroll horizontally on small screens */
+        scrollbar-width: none; /* Hides scrollbar on Firefox */
+      }
+
+      .nav-container::-webkit-scrollbar {
+        display: none; /* Hides scrollbar on Chrome/Safari */
+      }
+    `,
+];
+__decorate([
+    queryAssignedElements({ slot: "nav", selector: "st-tab" })
+], StTabs.prototype, "_tabs", void 0);
+__decorate([
+    queryAssignedElements({ selector: "st-tab-panel" })
+], StTabs.prototype, "_panels", void 0);
+StTabs = __decorate([
+    customElement("st-tabs")
+], StTabs);
+export { StTabs };

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, PropertyValues } from "lit";
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+export declare class StTextarea extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    private _textareaEl;
+    name: string;
+    label: string;
+    value: string;
+    placeholder: string;
+    helpText: string;
+    rows: number;
+    resize: TextareaResize;
+    required: boolean;
+    minlength?: number;
+    maxlength?: number;
+    disabled: boolean;
+    invalid: boolean;
+    readonly: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues<this>): void;
+    private _syncValidity;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private _handleInput;
+    private _handleChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-textarea": StTextarea;
+    }
+}
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEzE,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAElB,OAAO,CAAC,WAAW,CAAuB;IAEpB,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACP,QAAQ,SAAM;IAGxB,IAAI,SAAK;IACM,MAAM,EAAE,cAAc,CAAc;IAGnC,QAAQ,UAAS;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGH,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE3D,cAaC;IAED,MAAM,CAAC,MAAM,4BAuFX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAOvD;IAED,OAAO,CAAC,aAAa;IASrB,iBAAiB,SAIhB;IAED,aAAa,YAEZ;IACD,cAAc,YAEb;IAED,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,aAAa;IAIrB,MAAM,yCAuBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}