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

package/dist/components/modal/modal.js

@@ -0,0 +1,251 @@
+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, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StModal = class StModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls whether the modal is open.
+         */
+        this.open = false;
+        /**
+         * Title text displayed in the modal header.
+         */
+        this.heading = '';
+        /**
+         * Size of the modal (sm, md, lg, xl, xxl).
+         */
+        this.size = 'md';
+        /**
+         * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+         */
+        this.static = false;
+        this.isClosing = false;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this.dialogEl.classList.remove('closing');
+                this.isClosing = false;
+                if (!this.dialogEl.open) {
+                    this.dialogEl.showModal();
+                }
+            }
+            else if (this.dialogEl.open && !this.isClosing) {
+                this.closeWithAnimation();
+            }
+        }
+    }
+    closeWithAnimation() {
+        if (this.isClosing)
+            return;
+        this.isClosing = true;
+        this.dialogEl.classList.add('closing');
+        const onAnimationEnd = () => {
+            this.dialogEl.removeEventListener('animationend', onAnimationEnd);
+            this.dialogEl.classList.remove('closing');
+            this.isClosing = false;
+            if (!this.open) {
+                this.dialogEl.close();
+            }
+        };
+        this.dialogEl.addEventListener('animationend', onAnimationEnd);
+    }
+    handleClose() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+    }
+    handleCancel(e) {
+        e.preventDefault();
+        if (!this.static) {
+            this.handleClose();
+        }
+    }
+    onDialogClose() {
+        if (this.open) {
+            this.open = false;
+            this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+        }
+    }
+    handleBackdropClick(e) {
+        if (this.static)
+            return;
+        const rect = this.dialogEl.getBoundingClientRect();
+        const clickedOutside = e.clientX < rect.left ||
+            e.clientX > rect.right ||
+            e.clientY < rect.top ||
+            e.clientY > rect.bottom;
+        if (clickedOutside) {
+            this.handleClose();
+        }
+    }
+    render() {
+        return html `
+      <dialog 
+        class="size-${this.size}"
+        aria-labelledby=${this.heading ? 'modal-heading' : nothing}
+        @cancel=${this.handleCancel} 
+        @click=${this.handleBackdropClick} 
+        @close=${this.onDialogClose}
+      >
+        <div class="modal-header" @click=${(e) => e.stopPropagation()}>
+          <slot name="header">
+            <h3 class="modal-title" id="modal-heading">${this.heading}</h3>
+          </slot>
+          
+          ${!this.static ? html `
+            <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          ` : nothing}
+        </div>
+        <div class="modal-body" @click=${(e) => e.stopPropagation()}>
+          <slot></slot>
+        </div>
+        <div class="modal-footer" @click=${(e) => e.stopPropagation()}>
+          <slot name="footer"></slot>
+        </div>
+      </dialog>
+    `;
+    }
+};
+StModal.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: contents;
+      }
+
+      dialog {
+        padding: 0;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-lg, 0.5rem);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        
+        /* Responsive width calculation */
+        width: calc(100% - 2rem);
+        margin: auto;
+        
+        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        font-family: var(--st-font-family, inherit);
+      }
+
+      /* Sizes */
+      dialog.size-sm { max-width: 400px; }
+      dialog.size-md { max-width: 500px; }
+      dialog.size-lg { max-width: 800px; }
+      dialog.size-xl { max-width: 1024px; }
+      dialog.size-xxl { max-width: 1280px; }
+
+      dialog::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(2px);
+      }
+
+      /* Animations */
+      @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes fade-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+      @keyframes slide-up {
+        from { opacity: 0; transform: translateY(20px) scale(0.95); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes slide-down {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(20px) scale(0.95); }
+      }
+
+      dialog[open] {
+        animation: slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog[open]::backdrop {
+        animation: fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      
+      dialog.closing {
+        animation: slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog.closing::backdrop {
+        animation: fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+
+      .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 1px solid var(--st-color-border);
+      }
+
+      .modal-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .close-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--st-color-text-muted);
+        padding: 0.25rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--st-radius-sm);
+        transition: color 0.2s, background-color 0.2s;
+      }
+
+      .close-btn:hover {
+        color: var(--st-color-text);
+        background-color: var(--st-color-surface-muted, #f1f5f9);
+      }
+
+      .modal-body {
+        padding: var(--st-spacing-lg);
+        font-size: var(--st-font-size-sm, 0.875rem);
+        line-height: 1.5;
+      }
+
+      .modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--st-spacing-sm);
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-top: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface-muted, #f8fafc);
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StModal.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], StModal.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], StModal.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], StModal.prototype, "static", void 0);
+__decorate([
+    query('dialog')
+], StModal.prototype, "dialogEl", void 0);
+StModal = __decorate([
+    customElement('st-modal')
+], StModal);
+export { StModal };

package/dist/components/page-layout/page-layout.d.ts

@@ -0,0 +1,46 @@
+import { LitElement, PropertyValues } from 'lit';
+export type LayoutVariant = 'app-shell' | 'content-sidebar' | 'single-column' | 'three-column';
+export declare class StPageLayout extends LitElement {
+    /**
+     * Defines the structural layout variant to render.
+     */
+    variant: LayoutVariant;
+    /**
+     * Maximum width for the left sidebar section (e.g., '20rem', '300px').
+     */
+    sidebarWidth: string;
+    /**
+     * Maximum width for the right sidebar section (e.g., '16rem', '250px').
+     */
+    rightSidebarWidth: string;
+    /**
+     * Optional maximum width for the main content area (e.g., '48rem', '800px').
+     */
+    mainMaxWidth: string;
+    /**
+     * When true, expands the main content area to fill 100% of the available width between sidebars.
+     */
+    fillMain: boolean;
+    private _mobileMenuOpen;
+    private _touchStartX;
+    private _currentTranslateX;
+    private _isDragging;
+    updated(changedProperties: PropertyValues<this>): void;
+    private _toggleMobileMenu;
+    private _closeMobileMenu;
+    private _handleNavClick;
+    private _handleTouchStart;
+    private _handleTouchMove;
+    private _handleTouchEnd;
+    private _resizeListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-page-layout': StPageLayout;
+    }
+}
+//# sourceMappingURL=page-layout.d.ts.map

package/dist/components/page-layout/page-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../../../src/components/page-layout/page-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,GAAG,eAAe,GAAG,cAAc,CAAC;AAE/F,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAmB;IAEzC;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QA0BvD;IAED,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAGF,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAarB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,MAAM,CAAC,MAAM,4BAsZX;IAEF,MAAM,yCAgJL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}