pdm-ui-kit 0.4.2 → 1.1.0

package/fesm2020/pdm-ui-kit-src-drawer.mjs

@@ -0,0 +1,354 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, NgModule } from '@angular/core';
+import { Z_INDEX } from 'pdm-ui-kit/src/utils';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from 'pdm-ui-kit/src/icon';
+import { PdmIconModule } from 'pdm-ui-kit/src/icon';
+
+/**
+ * Drawer/Sheet component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Posicionamiento configurable (bottom, left, right, top)
+ * - Tamaños predefinidos
+ * - Responsive: bottom sheet en mobile, side panel en desktop
+ * - Contenido genérico via ng-content
+ *
+ * @example
+ * // Drawer simple desde el bottom
+ * <pdm-drawer [open]="isOpen" position="bottom">
+ *   <h3>Title</h3>
+ *   <p>Content</p>
+ * </pdm-drawer>
+ *
+ * @example
+ * // Side panel desde la right
+ * <pdm-drawer [open]="isOpen" position="right" size="md">
+ *   <p>Content</p>
+ * </pdm-drawer>
+ */
+class PdmDrawerComponent {
+    constructor() {
+        this.open = false;
+        /**
+         * Posición del drawer
+         * - bottom: desde abajo (default, mejor para mobile)
+         * - left: side panel desde izquierda
+         * - right: side panel desde derecha
+         * - top: desde arriba (poco común)
+         */
+        this.position = 'bottom';
+        /**
+         * Tamaño del drawer
+         * - sm: 400px (side) / 50vh (bottom/top)
+         * - md: 500px (side) / 66vh (bottom/top) (default)
+         * - lg: 640px (side) / 80vh (bottom/top)
+         * - full: 100% ancho/alto
+         */
+        this.size = 'md';
+        /**
+         * @deprecated Use position="bottom" instead
+         */
+        this.variant = 'drawer';
+        this.className = '';
+        this.title = '';
+        this.description = '';
+        /**
+         * Mostrar handle visual (línea para arrastrar)
+         * Solo tiene sentido en position="bottom"
+         */
+        this.showHandle = true;
+        /**
+         * Mostrar botón de cerrar
+         */
+        this.showCloseButton = true;
+        this.closeOnEsc = true;
+        this.closeOnBackdropClick = true;
+        this.openChange = new EventEmitter();
+        // DEPRECATED: contenido específico que se movió a ng-content
+        this.value = '';
+        this.unit = '';
+        this.decrementLabel = '-';
+        this.incrementLabel = '+';
+        this.primaryLabel = '';
+        this.secondaryLabel = '';
+        this.profileTitle = '';
+        this.profileDescription = '';
+        this.nameLabel = 'Name';
+        this.nameValue = '';
+        this.usernameLabel = 'Username';
+        this.usernameValue = '';
+        this.responsivePrimaryLabel = '';
+        this.bars = [];
+        this.primaryAction = new EventEmitter();
+        this.secondaryAction = new EventEmitter();
+    }
+    onEsc() {
+        if (this.open && this.closeOnEsc) {
+            this.close();
+        }
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdropClick) {
+            this.close();
+        }
+    }
+    close() {
+        this.openChange.emit(false);
+    }
+    onPrimaryAction() {
+        this.primaryAction.emit();
+    }
+    onSecondaryAction() {
+        this.secondaryAction.emit();
+    }
+    get containerClassName() {
+        return `fixed inset-0 ${Z_INDEX.drawer} ${this.className}`;
+    }
+    get panelClassName() {
+        const base = [
+            'absolute',
+            'bg-background',
+            'border border-solid',
+            'border-border',
+            'shadow-lg',
+            'overflow-auto'
+        ];
+        // Posicionamiento
+        const positionClasses = this.getPositionClasses();
+        // Tamaño
+        const sizeClasses = this.getSizeClasses();
+        return [...base, ...positionClasses, ...sizeClasses].filter(Boolean).join(' ');
+    }
+    getPositionClasses() {
+        const map = {
+            bottom: ['inset-x-0', 'bottom-0', 'rounded-t-xl'],
+            top: ['inset-x-0', 'top-0', 'rounded-b-xl'],
+            left: ['inset-y-0', 'left-0', 'rounded-r-xl'],
+            right: ['inset-y-0', 'right-0', 'rounded-l-xl']
+        };
+        return map[this.position] || map.bottom;
+    }
+    getSizeClasses() {
+        const isVertical = this.position === 'bottom' || this.position === 'top';
+        if (this.size === 'full') {
+            return ['w-full', 'h-full'];
+        }
+        const sizeMap = {
+            sm: isVertical ? 'max-h-[50vh]' : 'max-w-[400px]',
+            md: isVertical ? 'max-h-[66vh]' : 'max-w-[500px]',
+            lg: isVertical ? 'max-h-[80vh]' : 'max-w-[640px]'
+        };
+        const maxDimension = sizeMap[this.size] || sizeMap.md;
+        if (isVertical) {
+            return ['w-full', maxDimension];
+        }
+        else {
+            return ['h-full', maxDimension];
+        }
+    }
+    get showLegacyContent() {
+        // Mostrar contenido legacy si variant está siendo usado
+        return this.variant === 'drawer' || this.variant === 'responsive-dialog';
+    }
+}
+PdmDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", position: "position", size: "size", variant: "variant", className: "className", title: "title", description: "description", showHandle: "showHandle", showCloseButton: "showCloseButton", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick", value: "value", unit: "unit", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel", primaryLabel: "primaryLabel", secondaryLabel: "secondaryLabel", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", responsivePrimaryLabel: "responsivePrimaryLabel", bars: "bars" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n\n  <!-- Panel -->\n  <section [ngClass]=\"panelClassName\">\n    <!-- Handle visual (solo para bottom) -->\n    <div \n      *ngIf=\"showHandle && position === 'bottom'\" \n      class=\"mx-auto mb-4 mt-2 h-1 w-10 rounded-full bg-border\">\n    </div>\n\n    <!-- Header (opcional) -->\n    <div *ngIf=\"title || description || showCloseButton\" class=\"flex items-start justify-between gap-4 p-6 pb-4\">\n      <div *ngIf=\"title || description\" class=\"flex-1 min-w-0\">\n        <h3 *ngIf=\"title\" class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">\n          {{ title }}\n        </h3>\n        <p *ngIf=\"description\" class=\"m-0 mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </p>\n      </div>\n      \n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n        (click)=\"close()\"\n        aria-label=\"Close drawer\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"px-6 pb-6\">\n      <!-- Contenido gen\u00E9rico -->\n      <ng-container *ngIf=\"!showLegacyContent\">\n        <ng-content></ng-content>\n      </ng-container>\n\n      <!-- LEGACY: contenido espec\u00EDfico hardcodeado (backward compatibility) -->\n      <ng-container *ngIf=\"showLegacyContent\">\n        <!-- Variant: drawer -->\n        <div *ngIf=\"variant === 'drawer'\" class=\"mx-auto flex max-w-sm flex-col items-center\">\n          <div *ngIf=\"value !== ''\" class=\"mt-3 flex w-full items-center justify-center gap-4\">\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n            <div class=\"text-center\">\n              <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n              <div *ngIf=\"unit\" class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n            </div>\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n          </div>\n\n          <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n            <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n          </div>\n\n          <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none box-border rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n          <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none box-border rounded-md border border-solid border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n        </div>\n\n        <!-- Variant: responsive-dialog -->\n        <div *ngIf=\"variant === 'responsive-dialog'\" class=\"flex flex-col gap-3\">\n          <div *ngIf=\"nameLabel && nameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n          </div>\n          <div *ngIf=\"usernameLabel && usernameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n          </div>\n\n          <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none box-border rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n        </div>\n      </ng-container>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n\n  <!-- Panel -->\n  <section [ngClass]=\"panelClassName\">\n    <!-- Handle visual (solo para bottom) -->\n    <div \n      *ngIf=\"showHandle && position === 'bottom'\" \n      class=\"mx-auto mb-4 mt-2 h-1 w-10 rounded-full bg-border\">\n    </div>\n\n    <!-- Header (opcional) -->\n    <div *ngIf=\"title || description || showCloseButton\" class=\"flex items-start justify-between gap-4 p-6 pb-4\">\n      <div *ngIf=\"title || description\" class=\"flex-1 min-w-0\">\n        <h3 *ngIf=\"title\" class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">\n          {{ title }}\n        </h3>\n        <p *ngIf=\"description\" class=\"m-0 mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </p>\n      </div>\n      \n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n        (click)=\"close()\"\n        aria-label=\"Close drawer\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"px-6 pb-6\">\n      <!-- Contenido gen\u00E9rico -->\n      <ng-container *ngIf=\"!showLegacyContent\">\n        <ng-content></ng-content>\n      </ng-container>\n\n      <!-- LEGACY: contenido espec\u00EDfico hardcodeado (backward compatibility) -->\n      <ng-container *ngIf=\"showLegacyContent\">\n        <!-- Variant: drawer -->\n        <div *ngIf=\"variant === 'drawer'\" class=\"mx-auto flex max-w-sm flex-col items-center\">\n          <div *ngIf=\"value !== ''\" class=\"mt-3 flex w-full items-center justify-center gap-4\">\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n            <div class=\"text-center\">\n              <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n              <div *ngIf=\"unit\" class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n            </div>\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n          </div>\n\n          <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n            <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n          </div>\n\n          <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none box-border rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n          <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none box-border rounded-md border border-solid border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n        </div>\n\n        <!-- Variant: responsive-dialog -->\n        <div *ngIf=\"variant === 'responsive-dialog'\" class=\"flex flex-col gap-3\">\n          <div *ngIf=\"nameLabel && nameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n          </div>\n          <div *ngIf=\"usernameLabel && usernameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n          </div>\n\n          <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none box-border rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n        </div>\n      </ng-container>\n    </div>\n  </section>\n</div>\n" }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], showHandle: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], closeOnEsc: [{
+                type: Input
+            }], closeOnBackdropClick: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], unit: [{
+                type: Input
+            }], decrementLabel: [{
+                type: Input
+            }], incrementLabel: [{
+                type: Input
+            }], primaryLabel: [{
+                type: Input
+            }], secondaryLabel: [{
+                type: Input
+            }], profileTitle: [{
+                type: Input
+            }], profileDescription: [{
+                type: Input
+            }], nameLabel: [{
+                type: Input
+            }], nameValue: [{
+                type: Input
+            }], usernameLabel: [{
+                type: Input
+            }], usernameValue: [{
+                type: Input
+            }], responsivePrimaryLabel: [{
+                type: Input
+            }], bars: [{
+                type: Input
+            }], primaryAction: [{
+                type: Output
+            }], secondaryAction: [{
+                type: Output
+            }], onEsc: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Sheet/Side panel component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Tamaños configurables
+ * - Mejor manejo de overflow
+ * - Responsive sizes
+ *
+ * @example
+ * <pdm-sheet [open]="isOpen" side="right" size="md">
+ *   <h3>Settings</h3>
+ *   <p>Content here</p>
+ * </pdm-sheet>
+ */
+class PdmSheetComponent {
+    constructor() {
+        this.open = false;
+        /**
+         * Lado desde donde aparece el sheet
+         */
+        this.side = 'right';
+        /**
+         * Tamaño del sheet
+         * - sm: 320px (side) / 40vh (top/bottom)
+         * - md: 400px (side) / 50vh (top/bottom) (default)
+         * - lg: 500px (side) / 66vh (top/bottom)
+         * - xl: 640px (side) / 80vh (top/bottom)
+         * - full: 100%
+         */
+        this.size = 'md';
+        this.className = '';
+        this.closeOnEsc = true;
+        this.closeOnBackdropClick = true;
+        this.openChange = new EventEmitter();
+    }
+    onEsc() {
+        if (this.open && this.closeOnEsc) {
+            this.close();
+        }
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdropClick) {
+            this.close();
+        }
+    }
+    close() {
+        this.openChange.emit(false);
+    }
+    get panelClass() {
+        const base = 'absolute bg-background border-border shadow-lg overflow-auto';
+        const position = this.getPositionClass();
+        const sizing = this.getSizingClass();
+        return `${base} ${position} ${sizing} ${this.className}`.trim();
+    }
+    getPositionClass() {
+        const map = {
+            left: 'left-0 top-0 h-full border-r',
+            right: 'right-0 top-0 h-full border-l',
+            top: 'top-0 left-0 w-full border-b',
+            bottom: 'bottom-0 left-0 w-full border-t'
+        };
+        return map[this.side];
+    }
+    getSizingClass() {
+        if (this.size === 'full') {
+            return 'w-full h-full';
+        }
+        const isHorizontal = this.side === 'left' || this.side === 'right';
+        if (isHorizontal) {
+            const widthMap = {
+                sm: 'w-full max-w-[320px] sm:max-w-[320px]',
+                md: 'w-full max-w-[360px] sm:max-w-[400px]',
+                lg: 'w-full max-w-[400px] sm:max-w-[500px]',
+                xl: 'w-full max-w-[500px] sm:max-w-[640px]'
+            };
+            return widthMap[this.size] || widthMap.md;
+        }
+        else {
+            const heightMap = {
+                sm: 'max-h-[40vh]',
+                md: 'max-h-[50vh]',
+                lg: 'max-h-[66vh]',
+                xl: 'max-h-[80vh]'
+            };
+            return heightMap[this.size] || heightMap.md;
+        }
+    }
+}
+PdmSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", size: "size", className: "className", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n" }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], side: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], closeOnEsc: [{
+                type: Input
+            }], closeOnBackdropClick: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], onEsc: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+const COMPONENTS = [PdmDrawerComponent, PdmSheetComponent];
+class PdmDrawerModule {
+}
+PdmDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, declarations: [PdmDrawerComponent, PdmSheetComponent], imports: [CommonModule, PdmIconModule], exports: [PdmDrawerComponent, PdmSheetComponent] });
+PdmDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, imports: [CommonModule, PdmIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PdmIconModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmDrawerComponent, PdmDrawerModule, PdmSheetComponent };
+//# sourceMappingURL=pdm-ui-kit-src-drawer.mjs.map

package/fesm2020/pdm-ui-kit-src-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdm-ui-kit-src-drawer.mjs","sources":["../../../src/drawer/drawer.component.ts","../../../src/drawer/drawer.component.html","../../../src/drawer/sheet.component.ts","../../../src/drawer/sheet.component.html","../../../src/drawer/drawer.module.ts","../../../src/drawer/pdm-ui-kit-src-drawer.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';\nimport { responsive } from 'pdm-ui-kit/src/utils';\nimport { Z_INDEX } from 'pdm-ui-kit/src/utils';\n\nexport type PdmDrawerPosition = 'bottom' | 'left' | 'right' | 'top';\nexport type PdmDrawerSize = 'sm' | 'md' | 'lg' | 'full';\n\n/**\n * @deprecated Use specific drawer types. Will be removed in v0.3.0\n */\nexport type PdmDrawerVariant = 'drawer' | 'responsive-dialog';\n\n/**\n * Drawer/Sheet component con soporte responsive\n * \n * MEJORADO en v0.2.0:\n * - Posicionamiento configurable (bottom, left, right, top)\n * - Tamaños predefinidos\n * - Responsive: bottom sheet en mobile, side panel en desktop\n * - Contenido genérico via ng-content\n * \n * @example\n * // Drawer simple desde el bottom\n * <pdm-drawer [open]=\"isOpen\" position=\"bottom\">\n *   <h3>Title</h3>\n *   <p>Content</p>\n * </pdm-drawer>\n * \n * @example\n * // Side panel desde la right\n * <pdm-drawer [open]=\"isOpen\" position=\"right\" size=\"md\">\n *   <p>Content</p>\n * </pdm-drawer>\n */\n@Component({\n  selector: 'pdm-drawer',\n  templateUrl: './drawer.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmDrawerComponent {\n  @Input() open = false;\n  \n  /**\n   * Posición del drawer\n   * - bottom: desde abajo (default, mejor para mobile)\n   * - left: side panel desde izquierda\n   * - right: side panel desde derecha\n   * - top: desde arriba (poco común)\n   */\n  @Input() position: PdmDrawerPosition = 'bottom';\n  \n  /**\n   * Tamaño del drawer\n   * - sm: 400px (side) / 50vh (bottom/top)\n   * - md: 500px (side) / 66vh (bottom/top) (default)\n   * - lg: 640px (side) / 80vh (bottom/top)\n   * - full: 100% ancho/alto\n   */\n  @Input() size: PdmDrawerSize = 'md';\n  \n  /**\n   * @deprecated Use position=\"bottom\" instead\n   */\n  @Input() variant: PdmDrawerVariant = 'drawer';\n  \n  @Input() className = '';\n  @Input() title = '';\n  @Input() description = '';\n  \n  /**\n   * Mostrar handle visual (línea para arrastrar)\n   * Solo tiene sentido en position=\"bottom\"\n   */\n  @Input() showHandle = true;\n  \n  /**\n   * Mostrar botón de cerrar\n   */\n  @Input() showCloseButton = true;\n  \n  @Input() closeOnEsc = true;\n  @Input() closeOnBackdropClick = true;\n\n  @Output() openChange = new EventEmitter<boolean>();\n\n  // DEPRECATED: contenido específico que se movió a ng-content\n  @Input() value: number | string = '';\n  @Input() unit = '';\n  @Input() decrementLabel = '-';\n  @Input() incrementLabel = '+';\n  @Input() primaryLabel = '';\n  @Input() secondaryLabel = '';\n  @Input() profileTitle = '';\n  @Input() profileDescription = '';\n  @Input() nameLabel = 'Name';\n  @Input() nameValue = '';\n  @Input() usernameLabel = 'Username';\n  @Input() usernameValue = '';\n  @Input() responsivePrimaryLabel = '';\n  @Input() bars: number[] = [];\n  @Output() primaryAction = new EventEmitter<void>();\n  @Output() secondaryAction = new EventEmitter<void>();\n\n  @HostListener('document:keydown.escape')\n  onEsc(): void {\n    if (this.open && this.closeOnEsc) {\n      this.close();\n    }\n  }\n\n  onBackdropClick(): void {\n    if (this.closeOnBackdropClick) {\n      this.close();\n    }\n  }\n\n  close(): void {\n    this.openChange.emit(false);\n  }\n\n  onPrimaryAction(): void {\n    this.primaryAction.emit();\n  }\n\n  onSecondaryAction(): void {\n    this.secondaryAction.emit();\n  }\n\n  get containerClassName(): string {\n    return `fixed inset-0 ${Z_INDEX.drawer} ${this.className}`;\n  }\n\n  get panelClassName(): string {\n    const base = [\n      'absolute',\n      'bg-background',\n      'border border-solid',\n      'border-border',\n      'shadow-lg',\n      'overflow-auto'\n    ];\n\n    // Posicionamiento\n    const positionClasses = this.getPositionClasses();\n    \n    // Tamaño\n    const sizeClasses = this.getSizeClasses();\n\n    return [...base, ...positionClasses, ...sizeClasses].filter(Boolean).join(' ');\n  }\n\n  private getPositionClasses(): string[] {\n    const map: Record<PdmDrawerPosition, string[]> = {\n      bottom: ['inset-x-0', 'bottom-0', 'rounded-t-xl'],\n      top: ['inset-x-0', 'top-0', 'rounded-b-xl'],\n      left: ['inset-y-0', 'left-0', 'rounded-r-xl'],\n      right: ['inset-y-0', 'right-0', 'rounded-l-xl']\n    };\n\n    return map[this.position] || map.bottom;\n  }\n\n  private getSizeClasses(): string[] {\n    const isVertical = this.position === 'bottom' || this.position === 'top';\n    \n    if (this.size === 'full') {\n      return ['w-full', 'h-full'];\n    }\n\n    const sizeMap = {\n      sm: isVertical ? 'max-h-[50vh]' : 'max-w-[400px]',\n      md: isVertical ? 'max-h-[66vh]' : 'max-w-[500px]',\n      lg: isVertical ? 'max-h-[80vh]' : 'max-w-[640px]'\n    };\n\n    const maxDimension = sizeMap[this.size] || sizeMap.md;\n\n    if (isVertical) {\n      return ['w-full', maxDimension];\n    } else {\n      return ['h-full', maxDimension];\n    }\n  }\n\n  get showLegacyContent(): boolean {\n    // Mostrar contenido legacy si variant está siendo usado\n    return this.variant === 'drawer' || this.variant === 'responsive-dialog';\n  }\n}\n","<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n\n  <!-- Panel -->\n  <section [ngClass]=\"panelClassName\">\n    <!-- Handle visual (solo para bottom) -->\n    <div \n      *ngIf=\"showHandle && position === 'bottom'\" \n      class=\"mx-auto mb-4 mt-2 h-1 w-10 rounded-full bg-border\">\n    </div>\n\n    <!-- Header (opcional) -->\n    <div *ngIf=\"title || description || showCloseButton\" class=\"flex items-start justify-between gap-4 p-6 pb-4\">\n      <div *ngIf=\"title || description\" class=\"flex-1 min-w-0\">\n        <h3 *ngIf=\"title\" class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">\n          {{ title }}\n        </h3>\n        <p *ngIf=\"description\" class=\"m-0 mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </p>\n      </div>\n      \n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n        (click)=\"close()\"\n        aria-label=\"Close drawer\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"px-6 pb-6\">\n      <!-- Contenido genérico -->\n      <ng-container *ngIf=\"!showLegacyContent\">\n        <ng-content></ng-content>\n      </ng-container>\n\n      <!-- LEGACY: contenido específico hardcodeado (backward compatibility) -->\n      <ng-container *ngIf=\"showLegacyContent\">\n        <!-- Variant: drawer -->\n        <div *ngIf=\"variant === 'drawer'\" class=\"mx-auto flex max-w-sm flex-col items-center\">\n          <div *ngIf=\"value !== ''\" class=\"mt-3 flex w-full items-center justify-center gap-4\">\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n            <div class=\"text-center\">\n              <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n              <div *ngIf=\"unit\" class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n            </div>\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n          </div>\n\n          <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n            <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n          </div>\n\n          <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none box-border rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n          <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none box-border rounded-md border border-solid border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n        </div>\n\n        <!-- Variant: responsive-dialog -->\n        <div *ngIf=\"variant === 'responsive-dialog'\" class=\"flex flex-col gap-3\">\n          <div *ngIf=\"nameLabel && nameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n          </div>\n          <div *ngIf=\"usernameLabel && usernameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n          </div>\n\n          <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none box-border rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n        </div>\n      </ng-container>\n    </div>\n  </section>\n</div>\n","import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';\n\nexport type PdmSheetSide = 'top' | 'right' | 'bottom' | 'left';\nexport type PdmSheetSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Sheet/Side panel component con soporte responsive\n * \n * MEJORADO en v0.2.0:\n * - Tamaños configurables\n * - Mejor manejo de overflow\n * - Responsive sizes\n * \n * @example\n * <pdm-sheet [open]=\"isOpen\" side=\"right\" size=\"md\">\n *   <h3>Settings</h3>\n *   <p>Content here</p>\n * </pdm-sheet>\n */\n@Component({\n  selector: 'pdm-sheet',\n  templateUrl: './sheet.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmSheetComponent {\n  @Input() open = false;\n  \n  /**\n   * Lado desde donde aparece el sheet\n   */\n  @Input() side: PdmSheetSide = 'right';\n  \n  /**\n   * Tamaño del sheet\n   * - sm: 320px (side) / 40vh (top/bottom)\n   * - md: 400px (side) / 50vh (top/bottom) (default)\n   * - lg: 500px (side) / 66vh (top/bottom)\n   * - xl: 640px (side) / 80vh (top/bottom)\n   * - full: 100%\n   */\n  @Input() size: PdmSheetSize = 'md';\n  \n  @Input() className = '';\n  @Input() closeOnEsc = true;\n  @Input() closeOnBackdropClick = true;\n\n  @Output() openChange = new EventEmitter<boolean>();\n\n  @HostListener('document:keydown.escape')\n  onEsc(): void {\n    if (this.open && this.closeOnEsc) {\n      this.close();\n    }\n  }\n\n  onBackdropClick(): void {\n    if (this.closeOnBackdropClick) {\n      this.close();\n    }\n  }\n\n  close(): void {\n    this.openChange.emit(false);\n  }\n\n  get panelClass(): string {\n    const base = 'absolute bg-background border-border shadow-lg overflow-auto';\n    const position = this.getPositionClass();\n    const sizing = this.getSizingClass();\n    \n    return `${base} ${position} ${sizing} ${this.className}`.trim();\n  }\n\n  private getPositionClass(): string {\n    const map: Record<PdmSheetSide, string> = {\n      left: 'left-0 top-0 h-full border-r',\n      right: 'right-0 top-0 h-full border-l',\n      top: 'top-0 left-0 w-full border-b',\n      bottom: 'bottom-0 left-0 w-full border-t'\n    };\n    \n    return map[this.side];\n  }\n\n  private getSizingClass(): string {\n    if (this.size === 'full') {\n      return 'w-full h-full';\n    }\n\n    const isHorizontal = this.side === 'left' || this.side === 'right';\n    \n    if (isHorizontal) {\n      const widthMap = {\n        sm: 'w-full max-w-[320px] sm:max-w-[320px]',\n        md: 'w-full max-w-[360px] sm:max-w-[400px]',\n        lg: 'w-full max-w-[400px] sm:max-w-[500px]',\n        xl: 'w-full max-w-[500px] sm:max-w-[640px]'\n      };\n      return widthMap[this.size] || widthMap.md;\n    } else {\n      const heightMap = {\n        sm: 'max-h-[40vh]',\n        md: 'max-h-[50vh]',\n        lg: 'max-h-[66vh]',\n        xl: 'max-h-[80vh]'\n      };\n      return heightMap[this.size] || heightMap.md;\n    }\n  }\n}\n","<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { PdmIconModule } from \"pdm-ui-kit/src/icon\";\nimport { PdmDrawerComponent } from \"./drawer.component\";\nimport { PdmSheetComponent } from \"./sheet.component\";\n\nconst COMPONENTS = [PdmDrawerComponent, PdmSheetComponent];\n\n@NgModule({\n\timports: [CommonModule, PdmIconModule],\n\tdeclarations: COMPONENTS,\n\texports: COMPONENTS,\n})\nexport class PdmDrawerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAYA;;;;;;;;;;;;;;;;;;;;;AAqBG;MAMU,kBAAkB,CAAA;AAL/B,IAAA,WAAA,GAAA;QAMW,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AAEtB;;;;;;AAMG;QACM,IAAQ,CAAA,QAAA,GAAsB,QAAQ,CAAC;AAEhD;;;;;;AAMG;QACM,IAAI,CAAA,IAAA,GAAkB,IAAI,CAAC;AAEpC;;AAEG;QACM,IAAO,CAAA,OAAA,GAAqB,QAAQ,CAAC;QAErC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;QACf,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QACX,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;AAE1B;;;AAGG;QACM,IAAU,CAAA,UAAA,GAAG,IAAI,CAAC;AAE3B;;AAEG;QACM,IAAe,CAAA,eAAA,GAAG,IAAI,CAAC;QAEvB,IAAU,CAAA,UAAA,GAAG,IAAI,CAAC;QAClB,IAAoB,CAAA,oBAAA,GAAG,IAAI,CAAC;AAE3B,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAW,CAAC;;QAG1C,IAAK,CAAA,KAAA,GAAoB,EAAE,CAAC;QAC5B,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;QACV,IAAc,CAAA,cAAA,GAAG,GAAG,CAAC;QACrB,IAAc,CAAA,cAAA,GAAG,GAAG,CAAC;QACrB,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;QAClB,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;QACpB,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;QAClB,IAAkB,CAAA,kBAAA,GAAG,EAAE,CAAC;QACxB,IAAS,CAAA,SAAA,GAAG,MAAM,CAAC;QACnB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;QACf,IAAa,CAAA,aAAA,GAAG,UAAU,CAAC;QAC3B,IAAa,CAAA,aAAA,GAAG,EAAE,CAAC;QACnB,IAAsB,CAAA,sBAAA,GAAG,EAAE,CAAC;QAC5B,IAAI,CAAA,IAAA,GAAa,EAAE,CAAC;AACnB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAQ,CAAC;AACzC,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAQ,CAAC;AAuFtD,KAAA;IApFC,KAAK,GAAA;AACH,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;YAChC,IAAI,CAAC,KAAK,EAAE,CAAC;AACd,SAAA;KACF;IAED,eAAe,GAAA;QACb,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;AACd,SAAA;KACF;IAED,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;IAED,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;KAC7B;AAED,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,CAAA,cAAA,EAAiB,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAA,CAAE,CAAC;KAC5D;AAED,IAAA,IAAI,cAAc,GAAA;AAChB,QAAA,MAAM,IAAI,GAAG;YACX,UAAU;YACV,eAAe;YACf,qBAAqB;YACrB,eAAe;YACf,WAAW;YACX,eAAe;SAChB,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;;AAGlD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CAAC,GAAG,IAAI,EAAE,GAAG,eAAe,EAAE,GAAG,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAChF;IAEO,kBAAkB,GAAA;AACxB,QAAA,MAAM,GAAG,GAAwC;AAC/C,YAAA,MAAM,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,cAAc,CAAC;AACjD,YAAA,GAAG,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC;AAC3C,YAAA,IAAI,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,CAAC;AAC7C,YAAA,KAAK,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,cAAc,CAAC;SAChD,CAAC;QAEF,OAAO,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC;KACzC;IAEO,cAAc,GAAA;AACpB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC;AAEzE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC7B,SAAA;AAED,QAAA,MAAM,OAAO,GAAG;YACd,EAAE,EAAE,UAAU,GAAG,cAAc,GAAG,eAAe;YACjD,EAAE,EAAE,UAAU,GAAG,cAAc,GAAG,eAAe;YACjD,EAAE,EAAE,UAAU,GAAG,cAAc,GAAG,eAAe;SAClD,CAAC;AAEF,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC;AAEtD,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AACjC,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AACjC,SAAA;KACF;AAED,IAAA,IAAI,iBAAiB,GAAA;;QAEnB,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,mBAAmB,CAAC;KAC1E;;+GApJU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,k5BCvC/B,gxJAiFA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FD1Ca,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACE,YAAY,EAAA,eAAA,EAEL,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,gxJAAA,EAAA,CAAA;8BAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBASG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBASG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAKG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAEG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAMG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAKG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBAEG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;gBAEI,UAAU,EAAA,CAAA;sBAAnB,MAAM;gBAGE,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,sBAAsB,EAAA,CAAA;sBAA9B,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACI,aAAa,EAAA,CAAA;sBAAtB,MAAM;gBACG,eAAe,EAAA,CAAA;sBAAxB,MAAM;gBAGP,KAAK,EAAA,CAAA;sBADJ,YAAY;uBAAC,yBAAyB,CAAA;;;AElGzC;;;;;;;;;;;;;AAaG;MAMU,iBAAiB,CAAA;AAL9B,IAAA,WAAA,GAAA;QAMW,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AAEtB;;AAEG;QACM,IAAI,CAAA,IAAA,GAAiB,OAAO,CAAC;AAEtC;;;;;;;AAOG;QACM,IAAI,CAAA,IAAA,GAAiB,IAAI,CAAC;QAE1B,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;QACf,IAAU,CAAA,UAAA,GAAG,IAAI,CAAC;QAClB,IAAoB,CAAA,oBAAA,GAAG,IAAI,CAAC;AAE3B,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAW,CAAC;AA+DpD,KAAA;IA5DC,KAAK,GAAA;AACH,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;YAChC,IAAI,CAAC,KAAK,EAAE,CAAC;AACd,SAAA;KACF;IAED,eAAe,GAAA;QACb,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;AACd,SAAA;KACF;IAED,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;AAED,IAAA,IAAI,UAAU,GAAA;QACZ,MAAM,IAAI,GAAG,8DAA8D,CAAC;AAC5E,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACzC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;AAErC,QAAA,OAAO,CAAG,EAAA,IAAI,CAAI,CAAA,EAAA,QAAQ,IAAI,MAAM,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,CAAA,CAAE,CAAC,IAAI,EAAE,CAAC;KACjE;IAEO,gBAAgB,GAAA;AACtB,QAAA,MAAM,GAAG,GAAiC;AACxC,YAAA,IAAI,EAAE,8BAA8B;AACpC,YAAA,KAAK,EAAE,+BAA+B;AACtC,YAAA,GAAG,EAAE,8BAA8B;AACnC,YAAA,MAAM,EAAE,iCAAiC;SAC1C,CAAC;AAEF,QAAA,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACvB;IAEO,cAAc,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,OAAO,eAAe,CAAC;AACxB,SAAA;AAED,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;AAEnE,QAAA,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,QAAQ,GAAG;AACf,gBAAA,EAAE,EAAE,uCAAuC;AAC3C,gBAAA,EAAE,EAAE,uCAAuC;AAC3C,gBAAA,EAAE,EAAE,uCAAuC;AAC3C,gBAAA,EAAE,EAAE,uCAAuC;aAC5C,CAAC;YACF,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,EAAE,CAAC;AAC3C,SAAA;AAAM,aAAA;AACL,YAAA,MAAM,SAAS,GAAG;AAChB,gBAAA,EAAE,EAAE,cAAc;AAClB,gBAAA,EAAE,EAAE,cAAc;AAClB,gBAAA,EAAE,EAAE,cAAc;AAClB,gBAAA,EAAE,EAAE,cAAc;aACnB,CAAC;YACF,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,EAAE,CAAC;AAC7C,SAAA;KACF;;8GApFU,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,6SCxB9B,w0BAUA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,UAAA,EAAA,MAAA,EAAA,aAAA,EAAA,WAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FDca,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACE,WAAW,EAAA,eAAA,EAEJ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,w0BAAA,EAAA,CAAA;8BAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAKG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAUG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;gBAEI,UAAU,EAAA,CAAA;sBAAnB,MAAM;gBAGP,KAAK,EAAA,CAAA;sBADJ,YAAY;uBAAC,yBAAyB,CAAA;;;AE1CzC,MAAM,UAAU,GAAG,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;MAO9C,eAAe,CAAA;;4GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;6GAAf,eAAe,EAAA,YAAA,EAAA,CAPR,kBAAkB,EAAE,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAG9C,YAAY,EAAE,aAAa,CAAA,EAAA,OAAA,EAAA,CAHlB,kBAAkB,EAAE,iBAAiB,CAAA,EAAA,CAAA,CAAA;6GAO5C,eAAe,EAAA,OAAA,EAAA,CAJjB,YAAY,EAAE,aAAa,CAAA,EAAA,CAAA,CAAA;2FAIzB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC;AACtC,oBAAA,YAAY,EAAE,UAAU;AACxB,oBAAA,OAAO,EAAE,UAAU;AACnB,iBAAA,CAAA;;;ACZD;;AAEG;;;;"}