snice 1.13.2 → 1.13.4

package/dist/components/modal/snice-modal.js

@@ -0,0 +1,288 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, property, query, on, watch, ready, dispatch } from '../../src/index';
+import css from './snice-modal.css?inline';
+let SniceModal = class SniceModal extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.size = 'medium';
+        this.previousSize = 'medium';
+        this.noBackdropDismiss = false;
+        this.noEscapeDismiss = false;
+        this.noFocusTrap = false;
+        this.noCloseButton = false;
+        this.label = '';
+        this.previousFocus = null;
+    }
+    html() {
+        // Renders once - initial state
+        return /*html*/ `
+      <div class="modal" 
+           role="dialog" 
+           aria-modal="true"
+           aria-label="${this.label}"
+           aria-hidden="true">
+        <div class="modal__backdrop" part="backdrop"></div>
+        <div class="modal__panel modal__panel--${this.size}" part="panel">
+          <div class="modal__header" part="header">
+            <slot name="header"></slot>
+            <button class="modal__close" part="close" aria-label="Close modal">
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
+              </svg>
+            </button>
+          </div>
+          <div class="modal__body" part="body">
+            <slot></slot>
+          </div>
+          <div class="modal__footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+    init() {
+        // Make sure modal state is properly initialized
+        if (this.open) {
+            this.showModal();
+        }
+        // Apply initial close button state
+        if (this.noCloseButton) {
+            const closeButton = this.shadowRoot?.querySelector('.modal__close');
+            if (closeButton) {
+                closeButton.style.display = 'none';
+            }
+        }
+    }
+    handleOpenChange() {
+        // Imperatively update the modal DOM
+        if (this.modal) {
+            if (this.open) {
+                this.modal.classList.add('modal--open');
+                this.modal.setAttribute('aria-hidden', 'false');
+                this.showModal();
+            }
+            else {
+                this.modal.classList.remove('modal--open');
+                this.modal.setAttribute('aria-hidden', 'true');
+                this.hideModal();
+            }
+        }
+    }
+    handleSizeChange() {
+        // Imperatively update the panel size class
+        if (this.panel) {
+            this.panel.classList.remove(`modal__panel--${this.previousSize}`);
+            this.panel.classList.add(`modal__panel--${this.size}`);
+            this.previousSize = this.size;
+        }
+    }
+    handleCloseButtonChange() {
+        // Imperatively show/hide the close button
+        const closeButton = this.shadowRoot?.querySelector('.modal__close');
+        if (closeButton) {
+            closeButton.style.display = this.noCloseButton ? 'none' : '';
+        }
+    }
+    handleBackdropClick() {
+        if (!this.noBackdropDismiss) {
+            this.close();
+        }
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleEscape() {
+        if (!this.open)
+            return;
+        if (!this.noEscapeDismiss) {
+            this.close();
+        }
+    }
+    handleTab(e) {
+        if (!this.open)
+            return;
+        if (!this.noFocusTrap) {
+            this.trapFocus(e);
+        }
+    }
+    showModal() {
+        // Store current focus
+        this.previousFocus = document.activeElement;
+        // Lock body scroll
+        document.body.style.overflow = 'hidden';
+        // Focus first focusable element or modal itself
+        requestAnimationFrame(() => {
+            const firstFocusable = this.panel?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+            else {
+                this.panel?.focus();
+            }
+        });
+        this.dispatchOpenEvent();
+    }
+    hideModal() {
+        // Restore body scroll
+        document.body.style.overflow = '';
+        // Restore previous focus
+        if (this.previousFocus) {
+            this.previousFocus.focus();
+            this.previousFocus = null;
+        }
+        this.dispatchCloseEvent();
+    }
+    trapFocus(e) {
+        if (!this.panel)
+            return;
+        const focusableElements = this.panel.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const focusable = Array.from(focusableElements);
+        const firstFocusable = focusable[0];
+        const lastFocusable = focusable[focusable.length - 1];
+        if (e.shiftKey) {
+            // Shift + Tab
+            if (document.activeElement === firstFocusable) {
+                lastFocusable?.focus();
+                e.preventDefault();
+            }
+        }
+        else {
+            // Tab
+            if (document.activeElement === lastFocusable) {
+                firstFocusable?.focus();
+                e.preventDefault();
+            }
+        }
+    }
+    dispatchOpenEvent() {
+        return { modal: this };
+    }
+    dispatchCloseEvent() {
+        return { modal: this };
+    }
+    // Public API
+    show() {
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceModal.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceModal.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-backdrop-dismiss', reflect: true }),
+    __metadata("design:type", Object)
+], SniceModal.prototype, "noBackdropDismiss", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-escape-dismiss', reflect: true }),
+    __metadata("design:type", Object)
+], SniceModal.prototype, "noEscapeDismiss", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-focus-trap', reflect: true }),
+    __metadata("design:type", Object)
+], SniceModal.prototype, "noFocusTrap", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-close-button', reflect: true }),
+    __metadata("design:type", Object)
+], SniceModal.prototype, "noCloseButton", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], SniceModal.prototype, "label", void 0);
+__decorate([
+    query('.modal'),
+    __metadata("design:type", HTMLElement)
+], SniceModal.prototype, "modal", void 0);
+__decorate([
+    query('.modal__panel'),
+    __metadata("design:type", HTMLElement)
+], SniceModal.prototype, "panel", void 0);
+__decorate([
+    query('.modal__backdrop'),
+    __metadata("design:type", HTMLElement)
+], SniceModal.prototype, "backdrop", void 0);
+__decorate([
+    ready(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "init", null);
+__decorate([
+    watch('open'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "handleOpenChange", null);
+__decorate([
+    watch('size'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "handleSizeChange", null);
+__decorate([
+    watch('noCloseButton'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "handleCloseButtonChange", null);
+__decorate([
+    on('click', '.modal__backdrop'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "handleBackdropClick", null);
+__decorate([
+    on('click', '.modal__close'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "handleCloseClick", null);
+__decorate([
+    on('keydown:Escape', { stopPropagation: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "handleEscape", null);
+__decorate([
+    on('keydown:Tab'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "handleTab", null);
+__decorate([
+    dispatch('@snice/modal-open', { bubbles: true, composed: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "dispatchOpenEvent", null);
+__decorate([
+    dispatch('@snice/modal-close', { bubbles: true, composed: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceModal.prototype, "dispatchCloseEvent", null);
+SniceModal = __decorate([
+    element('snice-modal')
+], SniceModal);
+export { SniceModal };
+//# sourceMappingURL=snice-modal.js.map

package/dist/components/modal/snice-modal.js.map

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

package/dist/components/modal/snice-modal.types.d.ts

@@ -0,0 +1,18 @@
+export type ModalSize = 'small' | 'medium' | 'large' | 'fullscreen';
+export interface SniceModalElement extends HTMLElement {
+    open: boolean;
+    size: ModalSize;
+    noBackdropDismiss: boolean;
+    noEscapeDismiss: boolean;
+    noFocusTrap: boolean;
+    noCloseButton: boolean;
+    label: string;
+    show(): void;
+    close(): void;
+}
+export interface ModalOpenDetail {
+    modal: SniceModalElement;
+}
+export interface ModalCloseDetail {
+    modal: SniceModalElement;
+}

package/dist/components/modal/snice-modal.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=snice-modal.types.js.map

package/dist/components/modal/snice-modal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-modal.types.js","sourceRoot":"","sources":["../../../components/modal/snice-modal.types.ts"],"names":[],"mappings":""}

package/dist/components/pagination/snice-pagination.d.ts

@@ -0,0 +1,26 @@
+export declare class SnicePagination extends HTMLElement {
+    current: number;
+    total: number;
+    siblings: number;
+    showFirst: boolean;
+    showLast: boolean;
+    showPrev: boolean;
+    showNext: boolean;
+    size: 'small' | 'medium' | 'large';
+    variant: 'default' | 'rounded' | 'text';
+    html(): string;
+    css(): string;
+    private getPageNumbers;
+    handleFirst(): void;
+    handlePrev(): void;
+    handleNext(): void;
+    handleLast(): void;
+    handlePageClick(event: Event): void;
+    private changePage;
+    private updateView;
+    goToPage(page: number): void;
+    nextPage(): void;
+    previousPage(): void;
+    firstPage(): void;
+    lastPage(): void;
+}