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

package/dist/components/input/input.js

@@ -0,0 +1,268 @@
+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, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js"; // Helper for optional attributes
+import { resetStyles } from "../../styles/reset.js";
+let StInput = class StInput extends LitElement {
+    constructor() {
+        super();
+        this.name = "";
+        this.label = "";
+        this.value = "";
+        this.placeholder = "";
+        this.type = "text";
+        this.helpText = "";
+        // Validation Properties
+        this.required = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.readonly = false;
+        this._internals = this.attachInternals();
+        // 1. Trigger error state if the user clicks away and the field is invalid
+        this.addEventListener("focusout", () => {
+            this.invalid = !this._inputEl.validity.valid;
+        });
+        // 2. Trigger error state if the st-form tries to submit and fails
+        this.addEventListener("invalid", () => {
+            this.invalid = true;
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Sync the value to the form engine
+        if (changedProperties.has("value")) {
+            this._internals.setFormValue(this.value);
+        }
+        // Sync validity whenever properties change (like value or required status)
+        this._syncValidity();
+    }
+    _syncValidity() {
+        if (!this._inputEl)
+            return;
+        // setValidity arguments: (ValidityState object, Custom Error Message, Anchor Element for Tooltip)
+        this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
+    }
+    formResetCallback() {
+        this.value = "";
+        this._internals.setFormValue("");
+        // Need to wait for the render cycle to finish before checking validity on reset
+        this.updateComplete.then(() => this._syncValidity());
+    }
+    // Expose standard native methods so external scripts can call them on the component
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    _handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        if (this.invalid && target.validity.valid) {
+            this.invalid = false;
+        }
+        this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    }
+    _handleChange(e) {
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="form-control">
+        ${this.label ? html `<label for="input">${this.label}</label>` : ""}
+
+        <div class="input-wrapper">
+          <slot name="prefix"></slot>
+
+          <input
+            id="input"
+            type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            pattern=${ifDefined(this.pattern)}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+          />
+
+          <slot name="suffix"></slot>
+        </div>
+
+        ${this.helpText ? html `<div class="help-text">${this.helpText}</div>` : ""}
+      </div>
+    `;
+    }
+};
+StInput.formAssociated = true;
+StInput.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+
+      .form-control {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+      }
+
+      label {
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        color: var(--st-color-text);
+        margin-bottom: 0.5em;
+      }
+
+      /* 1. The Wrapper acts as the visual input field */
+      .input-wrapper {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        width: 100%;
+
+        background-color: var(--st-color-bg);
+        border: 1px solid var(--st-color-border);
+        border-radius: 4px;
+
+        /* Horizontal padding on the wrapper, vertical on the input */
+        padding: 0 var(--st-spacing-md);
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      /* 2. Apply focus ring to the wrapper when the internal input is focused */
+      .input-wrapper:focus-within {
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 1px var(--st-color-primary);
+      }
+
+      /* 3. The actual input becomes transparent and fills the wrapper */
+      input {
+        flex: 1;
+        width: 100%;
+        border: none;
+        background: transparent;
+        outline: none;
+
+        /* Vertical padding stretches the wrapper */
+        padding: var(--st-spacing-sm) 0;
+        font-size: var(--st-font-size-base);
+        color: var(--st-color-text);
+      }
+
+      input::placeholder {
+        color: var(--st-color-text-muted);
+      }
+
+      /* Slotted Icons */
+      ::slotted(svg) {
+        width: 1.25em;
+        height: 1.25em;
+        /* Default icons to the muted text color */
+        color: var(--st-color-text-muted);
+        fill: currentColor;
+        flex-shrink: 0;
+      }
+
+      /* Interactive Slotted Elements (like clear buttons) */
+      ::slotted(st-button) {
+        /* Pull the button back slightly so it aligns nicely with the input padding */
+        margin-right: calc(var(--st-spacing-sm) * -1);
+      }
+
+      /* Invalid State */
+      :host([invalid]) .input-wrapper {
+        border-color: var(--st-color-error);
+      }
+      :host([invalid]) .input-wrapper:focus-within {
+        box-shadow: 0 0 0 1px var(--st-color-error);
+      }
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+
+      /* Disabled & Readonly States */
+      :host([disabled]) .input-wrapper {
+        opacity: 0.5;
+        cursor: not-allowed;
+        background-color: var(--st-color-surface);
+      }
+      :host([disabled]) input {
+        cursor: not-allowed;
+      }
+      :host([readonly]) .input-wrapper {
+        background-color: var(--st-color-surface);
+      }
+
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+
+      :host([invalid]) .input-wrapper {
+        border-color: var(--st-color-error);
+      }
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+    `,
+];
+__decorate([
+    query("input")
+], StInput.prototype, "_inputEl", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "type", void 0);
+__decorate([
+    property({ attribute: "help-text" })
+], StInput.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "required", void 0);
+__decorate([
+    property({ type: Number })
+], StInput.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number })
+], StInput.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "pattern", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "readonly", void 0);
+StInput = __decorate([
+    customElement("st-input")
+], StInput);
+export { StInput };

package/dist/components/link/link.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class StLink extends LitElement {
+    href: string;
+    target: '_blank' | '_self';
+    size: 'sm' | 'md' | 'lg';
+    variant: 'inline' | 'standalone';
+    color: 'default' | 'primary' | 'muted';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-link': StLink;
+    }
+}
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,SAAO;IACX,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IACtB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,QAAQ,GAAG,YAAY,CAAY;IAC5C,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE9F,MAAM,CAAC,MAAM,4BAsEX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/link/link.js

@@ -0,0 +1,116 @@
+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 StLink = class StLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.href = '#';
+        this.target = '_self';
+        this.size = 'md';
+        this.variant = 'inline';
+        this.color = 'primary';
+    }
+    render() {
+        return html `
+      <a href="${this.href}" target="${this.target}">
+        <slot></slot>
+      </a>
+    `;
+    }
+};
+StLink.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25em;
+        text-decoration: none;
+        font-weight: 500;
+        transition: color 0.2s ease, opacity 0.2s ease;
+      }
+
+      /* ==========================================================
+         Colors
+         ========================================================== */
+      :host([color="primary"]) a {
+        color: var(--st-color-primary);
+      }
+      :host([color="default"]) a {
+        color: var(--st-color-text);
+      }
+      :host([color="muted"]) a {
+        color: var(--st-color-text-muted);
+      }
+
+      /* Hover states */
+      :host([color="primary"]) a:hover {
+        filter: brightness(1.1);
+      }
+      :host([color="default"]) a:hover {
+        color: var(--st-color-primary);
+      }
+      :host([color="muted"]) a:hover {
+        color: var(--st-color-text);
+      }
+
+      /* ==========================================================
+         Sizes
+         ========================================================== */
+      :host([size="sm"]) a { font-size: 0.875rem; }
+      :host([size="md"]) a { font-size: 1rem; }
+      :host([size="lg"]) a { font-size: 1.125rem; }
+
+      /* ==========================================================
+         Variants
+         ========================================================== */
+      /* inline links live inside paragraphs and underline on hover */
+      :host([variant="inline"]) a {
+        text-decoration: underline;
+        text-underline-offset: 4px;
+        font-weight: inherit; /* Inherits from surrounding paragraph text */
+      }
+      :host([variant="inline"]) a:hover {
+        text-decoration-thickness: 2px;
+      }
+
+      /* standalone links (e.g., footers, sidebars) have no underline by default */
+      :host([variant="standalone"]) a {
+        text-decoration: none;
+      }
+      :host([variant="standalone"]) a:hover {
+        text-decoration: underline;
+        text-underline-offset: 4px;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], StLink.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], StLink.prototype, "target", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StLink.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StLink.prototype, "color", void 0);
+StLink = __decorate([
+    customElement('st-link')
+], StLink);
+export { StLink };

package/dist/components/metadata/metadata.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export declare class StMetadata extends LitElement {
+    pageTitle: string;
+    description: string;
+    image: string;
+    protected createRenderRoot(): this;
+    updated(): void;
+    private _updateMetadata;
+    private _setMeta;
+    private _setCanonical;
+    render(): symbol;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-metadata': StMetadata;
+    }
+}
+//# sourceMappingURL=metadata.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/metadata/metadata.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAG1C,qBACa,UAAW,SAAQ,UAAU;IACZ,SAAS,SAAM;IACf,WAAW,SAAM;IACjB,KAAK,SAAM;IAEvC,SAAS,CAAC,gBAAgB,SAAmB;IAE7C,OAAO,SAEN;IAED,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,aAAa;IAUrB,MAAM,WAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/metadata/metadata.js

@@ -0,0 +1,71 @@
+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, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let StMetadata = class StMetadata extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.pageTitle = '';
+        this.description = '';
+        this.image = '';
+    }
+    createRenderRoot() { return this; }
+    updated() {
+        this._updateMetadata();
+    }
+    _updateMetadata() {
+        // Read site name from environment variable (e.g., VITE_SITE_NAME)
+        const siteName = import.meta.env?.VITE_SITE_NAME || '';
+        if (this.pageTitle) {
+            // If site name is configured, append it; otherwise use the title standalone
+            document.title = siteName ? `${this.pageTitle} - ${siteName}` : this.pageTitle;
+            this._setMeta('property', 'og:title', this.pageTitle);
+        }
+        if (this.description) {
+            this._setMeta('name', 'description', this.description);
+            this._setMeta('property', 'og:description', this.description);
+        }
+        if (this.image) {
+            this._setMeta('property', 'og:image', this.image);
+        }
+        this._setCanonical(window.location.href);
+    }
+    _setMeta(attrName, attrValue, content) {
+        let meta = document.head.querySelector(`meta[${attrName}="${attrValue}"]`);
+        if (!meta) {
+            meta = document.createElement('meta');
+            meta.setAttribute(attrName, attrValue);
+            document.head.appendChild(meta);
+        }
+        meta.setAttribute('content', content);
+    }
+    _setCanonical(url) {
+        let link = document.head.querySelector('link[rel="canonical"]');
+        if (!link) {
+            link = document.createElement('link');
+            link.setAttribute('rel', 'canonical');
+            document.head.appendChild(link);
+        }
+        link.setAttribute('href', url);
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property({ type: String })
+], StMetadata.prototype, "pageTitle", void 0);
+__decorate([
+    property({ type: String })
+], StMetadata.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], StMetadata.prototype, "image", void 0);
+StMetadata = __decorate([
+    customElement('st-metadata')
+], StMetadata);
+export { StMetadata };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,35 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class StModal extends LitElement {
+    /**
+     * Controls whether the modal is open.
+     */
+    open: boolean;
+    /**
+     * Title text displayed in the modal header.
+     */
+    heading: string;
+    /**
+     * Size of the modal (sm, md, lg, xl, xxl).
+     */
+    size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+     */
+    static: boolean;
+    private dialogEl;
+    private isClosing;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues): void;
+    private closeWithAnimation;
+    private handleClose;
+    private handleCancel;
+    private onDialogClose;
+    private handleBackdropClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-modal': StModal;
+    }
+}
+//# sourceMappingURL=modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACyB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE3E;;OAEG;IAC0B,MAAM,UAAS;IAE3B,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BAkHX;IAEF,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAYxC;IAED,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA4BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}