@sondor-technology/sondor-components 1.0.7 → 1.0.9

package/dist/components/toggle-group/toggle-group.js

@@ -0,0 +1,270 @@
+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, queryAssignedElements, state, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { resetStyles } from "../../styles/reset.js";
+import "./toggle-button.js";
+let StToggleGroup = class StToggleGroup extends LitElement {
+    constructor() {
+        super();
+        this.name = "";
+        this.value = "";
+        this.multiple = false;
+        this.disabled = false;
+        this.required = false;
+        this.ariaLabel = "";
+        // 🚀 NEW: State properties for dynamic shadows
+        this._canScrollLeft = false;
+        this._canScrollRight = false;
+        this._defaultValue = "";
+        // 🚀 NEW: Mathematically determine if we are at the edges of the scroll box
+        this._checkScroll = () => {
+            if (!this._container)
+                return;
+            const { scrollLeft, scrollWidth, clientWidth } = this._container;
+            // Use a 1px buffer to prevent fractional pixel rounding errors on high-DPI screens
+            this._canScrollLeft = scrollLeft > 1;
+            this._canScrollRight = Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1;
+        };
+        this._internals = this.attachInternals();
+        this.addEventListener("st-toggle-action", this._handleToggle);
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this._defaultValue = this.value;
+        // 🚀 NEW: Observe the container. If the user rotates their phone,
+        // we need to recalculate if shadows are still needed.
+        this._resizeObserver = new ResizeObserver(() => this._checkScroll());
+        if (this._container) {
+            this._resizeObserver.observe(this._container);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("value")) {
+            this._internals.setFormValue(this.value || null);
+            this._syncButtons();
+            this._syncValidity();
+        }
+        if (changedProperties.has("disabled")) {
+            this._buttons.forEach((btn) => (btn.disabled = this.disabled));
+        }
+    }
+    _syncButtons() {
+        const values = this.multiple && this.value ? this.value.split(",") : [this.value];
+        this._buttons.forEach((btn) => {
+            btn.selected = values.includes(btn.value);
+        });
+    }
+    _handleSlotChange() {
+        this._syncButtons();
+        if (this.disabled) {
+            this._buttons.forEach((btn) => (btn.disabled = true));
+        }
+        // Calculate shadows after slots render
+        setTimeout(() => this._checkScroll(), 50);
+    }
+    _handleToggle(e) {
+        e.stopPropagation();
+        const toggledValue = e.detail.value;
+        if (this.multiple) {
+            let values = this.value ? this.value.split(",") : [];
+            if (values.includes(toggledValue)) {
+                values = values.filter((v) => v !== toggledValue);
+            }
+            else {
+                values.push(toggledValue);
+            }
+            this.value = values.join(",");
+        }
+        else {
+            if (this.value !== toggledValue) {
+                this.value = toggledValue;
+            }
+        }
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    formResetCallback() {
+        this.value = this._defaultValue;
+    }
+    _syncValidity() {
+        if (this.required && !this.value) {
+            this._internals.setValidity({ valueMissing: true }, "Please select an option.");
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    render() {
+        const wrapperClasses = classMap({
+            "scroll-wrapper": true,
+            "can-scroll-left": this._canScrollLeft,
+            "can-scroll-right": this._canScrollRight,
+        });
+        return html `
+      <div class=${wrapperClasses}>
+        <div
+          class="group-container"
+          role="group"
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
+          aria-required=${this.required ? "true" : "false"}
+          @scroll=${this._checkScroll}
+        >
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+StToggleGroup.formAssociated = true;
+StToggleGroup.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      .scroll-wrapper {
+        position: relative;
+        display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      /* 🚀 FIX: Widened to 40px, boosted z-index to 10, and darkened the opacity */
+      .scroll-wrapper::before,
+      .scroll-wrapper::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 40px;
+        pointer-events: none;
+        z-index: 10;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      
+      .scroll-wrapper::before {
+        left: 0;
+        background: linear-gradient(
+          to right,
+          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          transparent 100%
+        );
+        border-top-left-radius: var(--st-radius-md);
+        border-bottom-left-radius: var(--st-radius-md);
+      }
+
+      .scroll-wrapper::after {
+        right: 0;
+        background: linear-gradient(
+          to left,
+          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          transparent 100%
+        );
+        border-top-right-radius: var(--st-radius-md);
+        border-bottom-right-radius: var(--st-radius-md);
+      }
+
+      .scroll-wrapper.can-scroll-left::before {
+        opacity: 1;
+      }
+
+      .scroll-wrapper.can-scroll-right::after {
+        opacity: 1;
+      }
+
+      /* 🚀 FIX: Dialed up to 0.5 for dark mode */
+      :host([data-theme="dark"]) .scroll-wrapper::before {
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
+      }
+      :host([data-theme="dark"]) .scroll-wrapper::after {
+        background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
+      }
+
+      .group-container {
+        display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+        background-color: var(--st-color-border);
+        gap: 1px;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+
+      .group-container::-webkit-scrollbar {
+        display: none;
+      }
+
+      ::slotted(*) {
+        flex-shrink: 0;
+      }
+
+      :host([disabled]) .group-container {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    `,
+];
+__decorate([
+    query(".group-container")
+], StToggleGroup.prototype, "_container", void 0);
+__decorate([
+    queryAssignedElements({ selector: "st-toggle-button" })
+], StToggleGroup.prototype, "_buttons", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StToggleGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], StToggleGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], StToggleGroup.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StToggleGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StToggleGroup.prototype, "required", void 0);
+__decorate([
+    property({ attribute: "aria-label" })
+], StToggleGroup.prototype, "ariaLabel", void 0);
+__decorate([
+    state()
+], StToggleGroup.prototype, "_canScrollLeft", void 0);
+__decorate([
+    state()
+], StToggleGroup.prototype, "_canScrollRight", void 0);
+StToggleGroup = __decorate([
+    customElement("st-toggle-group")
+], StToggleGroup);
+export { StToggleGroup };
+//# sourceMappingURL=toggle-group.js.map

package/dist/components/toggle-group/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.ts"],"names":[],"mappings":"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"}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, PropertyValues } from "lit";
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
+export type TooltipVariant = "default" | "info" | "success" | "warning" | "danger";
+export declare class StTooltip extends LitElement {
+    content: string;
+    position: TooltipPosition;
+    variant: TooltipVariant;
+    delay: number;
+    disabled: boolean;
+    private _isVisible;
+    private _showTimeout?;
+    private _hideTimeout?;
+    private _tooltipId;
+    private _a11yNode?;
+    private _slottedElements;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _handleSlotChange;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleKeyDown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-tooltip": StTooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnF,qBACa,SAAU,SAAQ,UAAU;IACb,OAAO,SAAM;IACb,QAAQ,EAAE,eAAe,CAAS;IAClC,OAAO,EAAE,cAAc,CAAa;IACpC,KAAK,SAAO;IACI,QAAQ,UAAS;IAElD,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,UAAU,CAA8D;IAEhF,OAAO,CAAC,SAAS,CAAC,CAAkB;IAEX,OAAO,CAAC,gBAAgB,CAAiB;IAElE,MAAM,CAAC,MAAM,4BAkKX;IAEO,iBAAiB,SAQzB;IAEQ,oBAAoB,SAK5B;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAKjD;IAED,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAOtB,MAAM,yCAyBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,293 @@
+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, state, queryAssignedElements } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { resetStyles } from "../../styles/reset.js";
+let StTooltip = class StTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.content = "";
+        this.position = "top";
+        this.variant = "default";
+        this.delay = 200;
+        this.disabled = false;
+        this._isVisible = false;
+        this._tooltipId = `st-tooltip-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._a11yNode = document.createElement("span");
+        this._a11yNode.id = this._tooltipId;
+        this._a11yNode.role = "tooltip";
+        this._a11yNode.style.display = "none";
+        this._a11yNode.textContent = this.content;
+        this.appendChild(this._a11yNode);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._a11yNode && this.contains(this._a11yNode)) {
+            this.removeChild(this._a11yNode);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("content") && this._a11yNode) {
+            this._a11yNode.textContent = this.content;
+        }
+    }
+    _handleSlotChange() {
+        if (this._slottedElements.length > 0) {
+            this._slottedElements.forEach((el) => {
+                el.setAttribute("aria-describedby", this._tooltipId);
+            });
+        }
+    }
+    _handleMouseEnter() {
+        if (this.disabled || !this.content)
+            return;
+        clearTimeout(this._hideTimeout);
+        this._showTimeout = window.setTimeout(() => {
+            this._isVisible = true;
+        }, this.delay);
+    }
+    _handleMouseLeave() {
+        clearTimeout(this._showTimeout);
+        this._hideTimeout = window.setTimeout(() => {
+            this._isVisible = false;
+        }, 100);
+    }
+    _handleFocusIn() {
+        if (this.disabled || !this.content)
+            return;
+        this._isVisible = true;
+    }
+    _handleFocusOut() {
+        this._isVisible = false;
+    }
+    _handleKeyDown(e) {
+        if (e.key === "Escape" && this._isVisible) {
+            e.stopPropagation();
+            this._isVisible = false;
+        }
+    }
+    render() {
+        return html `
+      <div
+        class="tooltip-target"
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
+        @keydown=${this._handleKeyDown}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+
+      <div
+        class=${classMap({
+            "tooltip-popup": true,
+            [`position-${this.position}`]: true,
+            [`variant-${this.variant}`]: true,
+            "is-visible": this._isVisible,
+        })}
+        aria-hidden="true"
+      >
+        ${this.content}
+      </div>
+    `;
+    }
+};
+StTooltip.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .tooltip-target {
+        display: inline-block;
+      }
+
+      .tooltip-popup {
+        position: absolute;
+        z-index: 1000;
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        border: 1px solid var(--st-color-border);
+        padding: var(--st-spacing-xs) var(--st-spacing-sm);
+        border-radius: var(--st-radius-sm);
+        font-size: var(--st-font-size-xs);
+        font-weight: 500;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 0.2s ease,
+          transform 0.2s ease,
+          visibility 0.2s;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      .tooltip-popup::before {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        transform: rotate(45deg);
+        box-sizing: border-box;
+      }
+
+      .is-visible {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* ==========================================
+         VARIANTS
+         ========================================== */
+
+      .variant-info {
+        background: var(--st-color-info, #3b82f6);
+        border-color: var(--st-color-info, #3b82f6);
+        color: var(--st-color-on-info, #ffffff);
+      }
+      .variant-info::before {
+        background: var(--st-color-info, #3b82f6);
+        border-color: var(--st-color-info, #3b82f6);
+      }
+
+      .variant-success {
+        background: var(--st-color-success, #16a34a);
+        border-color: var(--st-color-success, #16a34a);
+        color: var(--st-color-on-success, #ffffff);
+      }
+      .variant-success::before {
+        background: var(--st-color-success, #16a34a);
+        border-color: var(--st-color-success, #16a34a);
+      }
+
+      .variant-warning {
+        background: var(--st-color-warning, #f59e0b);
+        border-color: var(--st-color-warning, #f59e0b);
+        /* Warning usually needs dark text for contrast */
+        color: var(--st-color-on-warning, #1e293b);
+      }
+      .variant-warning::before {
+        background: var(--st-color-warning, #f59e0b);
+        border-color: var(--st-color-warning, #f59e0b);
+      }
+
+      .variant-danger {
+        background: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger, #dc2626);
+        color: var(--st-color-on-danger, #ffffff);
+      }
+      .variant-danger::before {
+        background: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger, #dc2626);
+      }
+
+      /* ==========================================
+         POSITIONS
+         ========================================== */
+
+      .position-top {
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-10px);
+      }
+      .position-top.is-visible {
+        transform: translateX(-50%) translateY(-6px);
+      }
+      .position-top::before {
+        bottom: -5px;
+        left: 50%;
+        margin-left: -4px;
+        border-top: none;
+        border-left: none;
+      }
+
+      .position-bottom {
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(10px);
+      }
+      .position-bottom.is-visible {
+        transform: translateX(-50%) translateY(6px);
+      }
+      .position-bottom::before {
+        top: -5px;
+        left: 50%;
+        margin-left: -4px;
+        border-bottom: none;
+        border-right: none;
+      }
+
+      .position-left {
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%) translateX(-10px);
+      }
+      .position-left.is-visible {
+        transform: translateY(-50%) translateX(-6px);
+      }
+      .position-left::before {
+        right: -5px;
+        top: 50%;
+        margin-top: -4px;
+        border-bottom: none;
+        border-left: none;
+      }
+
+      .position-right {
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%) translateX(10px);
+      }
+      .position-right.is-visible {
+        transform: translateY(-50%) translateX(6px);
+      }
+      .position-right::before {
+        left: -5px;
+        top: 50%;
+        margin-top: -4px;
+        border-top: none;
+        border-right: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StTooltip.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], StTooltip.prototype, "position", void 0);
+__decorate([
+    property({ type: String })
+], StTooltip.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number })
+], StTooltip.prototype, "delay", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTooltip.prototype, "disabled", void 0);
+__decorate([
+    state()
+], StTooltip.prototype, "_isVisible", void 0);
+__decorate([
+    queryAssignedElements()
+], StTooltip.prototype, "_slottedElements", void 0);
+StTooltip = __decorate([
+    customElement("st-tooltip")
+], StTooltip);
+export { StTooltip };
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"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"}

package/dist/styles/index.css

@@ -135,6 +135,8 @@
   --st-color-warning-bg: #422a14;
   --st-color-info-bg: #1e3a8a;
   --st-hover-brightness: 1.3;
+  --st-icon-filter: invert(1);
+  --st-color-scroll-shadow: rgba(0, 0, 0, 0.6);
 }
 
 /* src/styles/index.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",
@@ -173,6 +173,38 @@
     "./modal": {
       "types": "./dist/components/modal/modal.d.ts",
       "default": "./dist/components/modal/modal.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/toggle-group/toggle-group.d.ts",
+      "default": "./dist/components/toggle-group/toggle-group.js"
+    },
+    "./toggle-button": {
+      "types": "./dist/components/toggle-group/toggle-button.d.ts",
+      "default": "./dist/components/toggle-group/toggle-button.js"
+    },
+    "./calendar": {
+      "types": "./dist/components/calendar/calendar.d.ts",
+      "default": "./dist/components/calendar/calendar.js"
+    },
+    "./time-picker": {
+      "types": "./dist/components/time-picker/time-picker.d.ts",
+      "default": "./dist/components/time-picker/time-picker.js"
+    },
+    "./cron-builder": {
+      "types": "./dist/components/cron-builder/cron-builder.d.ts",
+      "default": "./dist/components/cron-builder/cron-builder.js"
+    },
+    "./pin-input": {
+      "types": "./dist/components/pin-input/pin-input.d.ts",
+      "default": "./dist/components/pin-input/pin-input.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/tooltip/tooltip.d.ts",
+      "default": "./dist/components/tooltip/tooltip.js"
+    },
+    "./popover": {
+      "types": "./dist/components/popover/popover.d.ts",
+      "default": "./dist/components/popover/popover.js"
     }
   },
   "sideEffects": [