codexly-ui 0.6.3 → 0.6.5

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, numberAttribute, booleanAttribute, DOCUMENT as DOCUMENT$1, Input } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
@@ -12198,6 +12198,398 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["clx-carousel{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], _slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClxCarouselDirective), { isSignal: true }] }] } });
 
+class ClxAnimateDirective {
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    clxAnimate = input.required(...(ngDevMode ? [{ debugName: "clxAnimate" }] : /* istanbul ignore next */ []));
+    trigger = input('manual', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    duration = input(undefined, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    delay = input(undefined, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    repeat = input(...(ngDevMode ? [undefined, { debugName: "repeat" }] : /* istanbul ignore next */ []));
+    easing = input(...(ngDevMode ? [undefined, { debugName: "easing" }] : /* istanbul ignore next */ []));
+    fillMode = input(...(ngDevMode ? [undefined, { debugName: "fillMode" }] : /* istanbul ignore next */ []));
+    once = input(false, { ...(ngDevMode ? { debugName: "once" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    threshold = input(undefined, { ...(ngDevMode ? { debugName: "threshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    animationStart = output();
+    animationEnd = output();
+    // ─── Dependencias ─────────────────────────────────────────────────────────
+    el = inject(ElementRef);
+    service = inject(ClxAnimateService);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    // ─── Estado interno ───────────────────────────────────────────────────────
+    _abortCtrl;
+    _unobserve;
+    _hasPlayed = false;
+    _initialized = false;
+    _destroyed = false;
+    get nativeElement() { return this.el.nativeElement; }
+    // ─── Ciclo de vida ────────────────────────────────────────────────────────
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this._initialized = true;
+        this._bindTrigger(this.trigger());
+        this.destroyRef.onDestroy(() => {
+            this._destroyed = true;
+            this._teardown();
+        });
+    }
+    ngOnChanges(changes) {
+        if (!this._initialized)
+            return;
+        if ('trigger' in changes) {
+            this._unbindTrigger();
+            this._bindTrigger(this.trigger());
+        }
+    }
+    // ─── API pública ──────────────────────────────────────────────────────────
+    /**
+     * Ejecuta la animación. Retorna una Promise que resuelve al terminar.
+     * El output animationEnd se emite al resolverse la Promise.
+     */
+    play(overrides) {
+        this.animationStart.emit();
+        return this.service
+            .runAnimation(this.nativeElement, this._buildConfig(overrides))
+            .then(() => {
+            if (this._destroyed)
+                return;
+            this.animationEnd.emit({
+                element: this.nativeElement,
+                animation: this.clxAnimate(),
+                timestamp: Date.now(),
+            });
+        });
+    }
+    stop() {
+        this.service.stop(this.nativeElement);
+    }
+    // ─── Privado ──────────────────────────────────────────────────────────────
+    _buildConfig(overrides) {
+        return this.service.buildConfig({
+            animation: this.clxAnimate(),
+            trigger: this.trigger(),
+            ...(this.duration() !== undefined && { duration: this.duration() }),
+            ...(this.delay() !== undefined && { delay: this.delay() }),
+            ...(this.repeat() !== undefined && { repeat: this.repeat() }),
+            ...(this.easing() !== undefined && { easing: this.easing() }),
+            ...(this.fillMode() !== undefined && { fillMode: this.fillMode() }),
+            ...(this.threshold() !== undefined && { threshold: this.threshold() }),
+            once: this.once(),
+        }, overrides ?? {});
+    }
+    _bindTrigger(trigger) {
+        const el = this.nativeElement;
+        this._abortCtrl = new AbortController();
+        const { signal } = this._abortCtrl;
+        switch (trigger) {
+            case 'click':
+                el.addEventListener('click', () => this.play(), { signal });
+                break;
+            case 'hover':
+                el.addEventListener('mouseenter', () => this.play(), { signal });
+                break;
+            case 'hoverLeave':
+                el.addEventListener('mouseleave', () => this.play(), { signal });
+                break;
+            case 'onEnter':
+                this._bindIntersection(true);
+                break;
+            case 'onLeave':
+                this._bindIntersection(false);
+                break;
+            case 'manual':
+                break;
+        }
+    }
+    _bindIntersection(playOnEnter) {
+        const config = this._buildConfig();
+        const threshold = config.threshold ?? 0.1;
+        this._unobserve = this.service.observe(this.nativeElement, threshold, (isIntersecting) => {
+            const shouldPlay = playOnEnter ? isIntersecting : !isIntersecting;
+            if (!shouldPlay)
+                return;
+            if (this._hasPlayed && config.once)
+                return;
+            this._hasPlayed = true;
+            this.play();
+            if (config.once) {
+                this._unobserve?.();
+                this._unobserve = undefined;
+            }
+        });
+    }
+    _unbindTrigger() {
+        this._abortCtrl?.abort();
+        this._abortCtrl = undefined;
+        this._unobserve?.();
+        this._unobserve = undefined;
+        this._hasPlayed = false;
+    }
+    _teardown() {
+        this._unbindTrigger();
+        this.service.stop(this.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: ClxAnimateDirective, isStandalone: true, selector: "[clxAnimate]", inputs: { clxAnimate: { classPropertyName: "clxAnimate", publicName: "clxAnimate", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, repeat: { classPropertyName: "repeat", publicName: "repeat", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, fillMode: { classPropertyName: "fillMode", publicName: "fillMode", isSignal: true, isRequired: false, transformFunction: null }, once: { classPropertyName: "once", publicName: "once", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationStart: "animationStart", animationEnd: "animationEnd" }, exportAs: ["clxAnimate"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clxAnimate]',
+                    standalone: true,
+                    exportAs: 'clxAnimate',
+                }]
+        }], propDecorators: { clxAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxAnimate", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], repeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "repeat", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], fillMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMode", required: false }] }], once: [{ type: i0.Input, args: [{ isSignal: true, alias: "once", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], animationStart: [{ type: i0.Output, args: ["animationStart"] }], animationEnd: [{ type: i0.Output, args: ["animationEnd"] }] } });
+
+const SHADOW_CLASS_MAP = {
+    none: '',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+    xl: 'shadow-xl',
+    '2xl': 'shadow-2xl',
+};
+const DEFAULT_POSITION = { right: 24, bottom: 24 };
+/** Movement below this, in pixels, is treated as a click rather than a drag. */
+const DRAG_THRESHOLD = 4;
+class ClxFabComponent {
+    // ── Inputs — personalización tipo clx-button ─────────────────────────────────
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    icon = input('apps', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shadow = input('lg', ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    triggerLabel = input('Accesos directos', ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    /** Saved position (e.g. from user preferences). Takes precedence over defaultPosition when present. */
+    position = input(undefined, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Initial corner used only when the user hasn't dragged/saved a position yet. */
+    defaultPosition = input(DEFAULT_POSITION, ...(ngDevMode ? [{ debugName: "defaultPosition" }] : /* istanbul ignore next */ []));
+    // ── Outputs ─────────────────────────────────────────────────────────────────
+    itemClick = output();
+    /** Emitted once, after a drag ends, with the new position to persist. */
+    positionChange = output();
+    _themeSvc = inject(ClxThemeService);
+    _document = inject(DOCUMENT$1);
+    _elementRef = inject((ElementRef));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _draggedPosition = signal(null, ...(ngDevMode ? [{ debugName: "_draggedPosition" }] : /* istanbul ignore next */ []));
+    _position = computed(() => this._draggedPosition() ?? this.position() ?? this.defaultPosition(), ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
+    _triggerClass = computed(() => `transition-transform duration-200 hover:scale-110 ${SHADOW_CLASS_MAP[this.shadow()]}`.trim(), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
+    /** Los botones de la pila de accesos van un paso más pequeños que el trigger. */
+    _itemSize = computed(() => {
+        const map = {
+            sm: 'xxs', md: 'xs', lg: 'sm',
+        };
+        return map[this.size()] ?? 'sm';
+    }, ...(ngDevMode ? [{ debugName: "_itemSize" }] : /* istanbul ignore next */ []));
+    // ── CDK Overlay ─────────────────────────────────────────────────────────────
+    _sso = inject(ScrollStrategyOptions);
+    _scrollStrategy = this._sso.reposition();
+    _positions = [
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+    ];
+    // ── State ────────────────────────────────────────────────────────────────────
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    // ── Drag ─────────────────────────────────────────────────────────────────────
+    _dragging = false;
+    _dragMoved = false;
+    _dragStartX = 0;
+    _dragStartY = 0;
+    _dragStartRight = 0;
+    _dragStartBottom = 0;
+    _onPointerDown(event) {
+        if (event.button !== 0 && event.pointerType === 'mouse')
+            return;
+        this._dragging = true;
+        this._dragMoved = false;
+        this._dragStartX = event.clientX;
+        this._dragStartY = event.clientY;
+        const current = this._position();
+        this._dragStartRight = current.right;
+        this._dragStartBottom = current.bottom;
+        const wrapper = this._elementRef.nativeElement.querySelector('[cdkOverlayOrigin]');
+        wrapper?.setPointerCapture(event.pointerId);
+        const onMove = (e) => this._onPointerMove(e);
+        const onUp = (e) => {
+            this._onPointerUp(e);
+            this._document.removeEventListener('pointermove', onMove);
+            this._document.removeEventListener('pointerup', onUp);
+        };
+        this._document.addEventListener('pointermove', onMove);
+        this._document.addEventListener('pointerup', onUp);
+    }
+    _onPointerMove(event) {
+        if (!this._dragging)
+            return;
+        const dx = event.clientX - this._dragStartX;
+        const dy = event.clientY - this._dragStartY;
+        if (!this._dragMoved && Math.hypot(dx, dy) < DRAG_THRESHOLD)
+            return;
+        this._dragMoved = true;
+        const win = this._document.defaultView;
+        const maxRight = win ? win.innerWidth - 56 : Infinity;
+        const maxBottom = win ? win.innerHeight - 56 : Infinity;
+        const right = Math.min(Math.max(this._dragStartRight - dx, 8), maxRight);
+        const bottom = Math.min(Math.max(this._dragStartBottom - dy, 8), maxBottom);
+        this._draggedPosition.set({ right, bottom });
+    }
+    _onPointerUp(_event) {
+        this._dragging = false;
+        if (this._dragMoved) {
+            this.positionChange.emit(this._position());
+        }
+        this._dragMoved = false;
+    }
+    _onTriggerClick() {
+        if (this._dragMoved)
+            return;
+        this._toggle();
+    }
+    _toggle() { this._isOpen.update(v => !v); }
+    _close() { this._isOpen.set(false); }
+    _onKeydown(event) {
+        if (event.key === 'Escape')
+            this._close();
+    }
+    _onItemClick(item) {
+        this.itemClick.emit(item);
+        this._close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxFabComponent, isStandalone: true, selector: "clx-fab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", positionChange: "positionChange" }, ngImport: i0, template: `
+    <!-- ── Trigger (this wrapper owns the fixed positioning + drag; the button inside stays a plain clx-button) ── -->
+    <div
+      #wrapper
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      class="fixed z-40 select-none"
+      [style.right.px]="_position().right"
+      [style.bottom.px]="_position().bottom"
+      [style.touchAction]="'none'"
+      (pointerdown)="_onPointerDown($event)">
+      <button
+        clx-button
+        type="button"
+        [variant]="variant()"
+        shape="circle"
+        [iconOnly]="true"
+        [icon]="_isOpen() ? 'close' : icon()"
+        [color]="_color()"
+        [size]="size()"
+        [class]="_triggerClass()"
+        [attr.aria-label]="triggerLabel()"
+        [attr.aria-expanded]="_isOpen()"
+        (click)="_onTriggerClick()">
+      </button>
+    </div>
+
+    <!-- ── Overlay panel: vertical stack expanding upward ────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (overlayKeydown)="_onKeydown($event)">
+
+      <div class="flex flex-col items-end gap-2 mb-2" role="menu">
+        @for (item of items(); track item.key; let i = $index) {
+          <div
+            clxAnimate="fadeInUp"
+            trigger="onEnter"
+            [delay]="i * 60"
+            [duration]="220"
+            class="flex items-center gap-2">
+            <span class="px-2.5 py-1 rounded-lg bg-clx-surface border border-clx-border shadow-sm text-xs font-medium text-clx-text-label whitespace-nowrap">
+              {{ item.label }}
+            </span>
+            <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
+              variant="light" [color]="_color()" [size]="_itemSize()" class="shadow-md"
+              [attr.aria-label]="item.label"
+              (click)="_onItemClick(item)">
+            </button>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "directive", type: ClxAnimateDirective, selector: "[clxAnimate]", inputs: ["clxAnimate", "trigger", "duration", "delay", "repeat", "easing", "fillMode", "once", "threshold"], outputs: ["animationStart", "animationEnd"], exportAs: ["clxAnimate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-fab',
+                    standalone: true,
+                    imports: [OverlayModule, ClxButtonComponent, ClxAnimateDirective],
+                    template: `
+    <!-- ── Trigger (this wrapper owns the fixed positioning + drag; the button inside stays a plain clx-button) ── -->
+    <div
+      #wrapper
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      class="fixed z-40 select-none"
+      [style.right.px]="_position().right"
+      [style.bottom.px]="_position().bottom"
+      [style.touchAction]="'none'"
+      (pointerdown)="_onPointerDown($event)">
+      <button
+        clx-button
+        type="button"
+        [variant]="variant()"
+        shape="circle"
+        [iconOnly]="true"
+        [icon]="_isOpen() ? 'close' : icon()"
+        [color]="_color()"
+        [size]="size()"
+        [class]="_triggerClass()"
+        [attr.aria-label]="triggerLabel()"
+        [attr.aria-expanded]="_isOpen()"
+        (click)="_onTriggerClick()">
+      </button>
+    </div>
+
+    <!-- ── Overlay panel: vertical stack expanding upward ────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (overlayKeydown)="_onKeydown($event)">
+
+      <div class="flex flex-col items-end gap-2 mb-2" role="menu">
+        @for (item of items(); track item.key; let i = $index) {
+          <div
+            clxAnimate="fadeInUp"
+            trigger="onEnter"
+            [delay]="i * 60"
+            [duration]="220"
+            class="flex items-center gap-2">
+            <span class="px-2.5 py-1 rounded-lg bg-clx-surface border border-clx-border shadow-sm text-xs font-medium text-clx-text-label whitespace-nowrap">
+              {{ item.label }}
+            </span>
+            <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
+              variant="light" [color]="_color()" [size]="_itemSize()" class="shadow-md"
+              [attr.aria-label]="item.label"
+              (click)="_onItemClick(item)">
+            </button>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], positionChange: [{ type: i0.Output, args: ["positionChange"] }] } });
+
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';
 const TABLE_HEADER_CELL_CLASS = 'px-4 py-3 font-semibold whitespace-nowrap';
@@ -15025,151 +15417,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }] });
 
-class ClxAnimateDirective {
-    // ─── Inputs ───────────────────────────────────────────────────────────────
-    clxAnimate = input.required(...(ngDevMode ? [{ debugName: "clxAnimate" }] : /* istanbul ignore next */ []));
-    trigger = input('manual', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
-    duration = input(undefined, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    delay = input(undefined, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    repeat = input(...(ngDevMode ? [undefined, { debugName: "repeat" }] : /* istanbul ignore next */ []));
-    easing = input(...(ngDevMode ? [undefined, { debugName: "easing" }] : /* istanbul ignore next */ []));
-    fillMode = input(...(ngDevMode ? [undefined, { debugName: "fillMode" }] : /* istanbul ignore next */ []));
-    once = input(false, { ...(ngDevMode ? { debugName: "once" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    threshold = input(undefined, { ...(ngDevMode ? { debugName: "threshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    // ─── Outputs ──────────────────────────────────────────────────────────────
-    animationStart = output();
-    animationEnd = output();
-    // ─── Dependencias ─────────────────────────────────────────────────────────
-    el = inject(ElementRef);
-    service = inject(ClxAnimateService);
-    platformId = inject(PLATFORM_ID);
-    destroyRef = inject(DestroyRef);
-    // ─── Estado interno ───────────────────────────────────────────────────────
-    _abortCtrl;
-    _unobserve;
-    _hasPlayed = false;
-    _initialized = false;
-    _destroyed = false;
-    get nativeElement() { return this.el.nativeElement; }
-    // ─── Ciclo de vida ────────────────────────────────────────────────────────
-    ngOnInit() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        this._initialized = true;
-        this._bindTrigger(this.trigger());
-        this.destroyRef.onDestroy(() => {
-            this._destroyed = true;
-            this._teardown();
-        });
-    }
-    ngOnChanges(changes) {
-        if (!this._initialized)
-            return;
-        if ('trigger' in changes) {
-            this._unbindTrigger();
-            this._bindTrigger(this.trigger());
-        }
-    }
-    // ─── API pública ──────────────────────────────────────────────────────────
-    /**
-     * Ejecuta la animación. Retorna una Promise que resuelve al terminar.
-     * El output animationEnd se emite al resolverse la Promise.
-     */
-    play(overrides) {
-        this.animationStart.emit();
-        return this.service
-            .runAnimation(this.nativeElement, this._buildConfig(overrides))
-            .then(() => {
-            if (this._destroyed)
-                return;
-            this.animationEnd.emit({
-                element: this.nativeElement,
-                animation: this.clxAnimate(),
-                timestamp: Date.now(),
-            });
-        });
-    }
-    stop() {
-        this.service.stop(this.nativeElement);
-    }
-    // ─── Privado ──────────────────────────────────────────────────────────────
-    _buildConfig(overrides) {
-        return this.service.buildConfig({
-            animation: this.clxAnimate(),
-            trigger: this.trigger(),
-            ...(this.duration() !== undefined && { duration: this.duration() }),
-            ...(this.delay() !== undefined && { delay: this.delay() }),
-            ...(this.repeat() !== undefined && { repeat: this.repeat() }),
-            ...(this.easing() !== undefined && { easing: this.easing() }),
-            ...(this.fillMode() !== undefined && { fillMode: this.fillMode() }),
-            ...(this.threshold() !== undefined && { threshold: this.threshold() }),
-            once: this.once(),
-        }, overrides ?? {});
-    }
-    _bindTrigger(trigger) {
-        const el = this.nativeElement;
-        this._abortCtrl = new AbortController();
-        const { signal } = this._abortCtrl;
-        switch (trigger) {
-            case 'click':
-                el.addEventListener('click', () => this.play(), { signal });
-                break;
-            case 'hover':
-                el.addEventListener('mouseenter', () => this.play(), { signal });
-                break;
-            case 'hoverLeave':
-                el.addEventListener('mouseleave', () => this.play(), { signal });
-                break;
-            case 'onEnter':
-                this._bindIntersection(true);
-                break;
-            case 'onLeave':
-                this._bindIntersection(false);
-                break;
-            case 'manual':
-                break;
-        }
-    }
-    _bindIntersection(playOnEnter) {
-        const config = this._buildConfig();
-        const threshold = config.threshold ?? 0.1;
-        this._unobserve = this.service.observe(this.nativeElement, threshold, (isIntersecting) => {
-            const shouldPlay = playOnEnter ? isIntersecting : !isIntersecting;
-            if (!shouldPlay)
-                return;
-            if (this._hasPlayed && config.once)
-                return;
-            this._hasPlayed = true;
-            this.play();
-            if (config.once) {
-                this._unobserve?.();
-                this._unobserve = undefined;
-            }
-        });
-    }
-    _unbindTrigger() {
-        this._abortCtrl?.abort();
-        this._abortCtrl = undefined;
-        this._unobserve?.();
-        this._unobserve = undefined;
-        this._hasPlayed = false;
-    }
-    _teardown() {
-        this._unbindTrigger();
-        this.service.stop(this.nativeElement);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: ClxAnimateDirective, isStandalone: true, selector: "[clxAnimate]", inputs: { clxAnimate: { classPropertyName: "clxAnimate", publicName: "clxAnimate", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, repeat: { classPropertyName: "repeat", publicName: "repeat", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, fillMode: { classPropertyName: "fillMode", publicName: "fillMode", isSignal: true, isRequired: false, transformFunction: null }, once: { classPropertyName: "once", publicName: "once", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationStart: "animationStart", animationEnd: "animationEnd" }, exportAs: ["clxAnimate"], usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clxAnimate]',
-                    standalone: true,
-                    exportAs: 'clxAnimate',
-                }]
-        }], propDecorators: { clxAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxAnimate", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], repeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "repeat", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], fillMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMode", required: false }] }], once: [{ type: i0.Input, args: [{ isSignal: true, alias: "once", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], animationStart: [{ type: i0.Output, args: ["animationStart"] }], animationEnd: [{ type: i0.Output, args: ["animationEnd"] }] } });
-
 class ClxAnimateGroupDirective {
     stagger = input(100, { ...(ngDevMode ? { debugName: "stagger" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     children;
@@ -15439,5 +15686,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map