codexly-ui 0.6.4 → 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, numberAttribute, booleanAttribute, Input } 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';
@@ -12351,6 +12351,9 @@ const SHADOW_CLASS_MAP = {
     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 */ []));
@@ -12360,11 +12363,21 @@ class ClxFabComponent {
     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 */ []));
-    _triggerClass = computed(() => `fixed bottom-6 right-6 z-40 transition-transform duration-200 hover:scale-110 ${SHADOW_CLASS_MAP[this.shadow()]}`.trim(), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* 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 = {
@@ -12381,7 +12394,61 @@ class ClxFabComponent {
     ];
     // ── State ────────────────────────────────────────────────────────────────────
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
-    // ── Methods ──────────────────────────────────────────────────────────────────
+    // ── 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) {
@@ -12393,24 +12460,32 @@ class ClxFabComponent {
         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 } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
-    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
-    <button
+    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
-      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)="_toggle()">
-    </button>
+      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
@@ -12452,23 +12527,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     imports: [OverlayModule, ClxButtonComponent, ClxAnimateDirective],
                     template: `
-    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
-    <button
+    <!-- ── Trigger (this wrapper owns the fixed positioning + drag; the button inside stays a plain clx-button) ── -->
+    <div
+      #wrapper
       #origin="cdkOverlayOrigin"
       cdkOverlayOrigin
-      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)="_toggle()">
-    </button>
+      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
@@ -12505,7 +12588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     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 }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], 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';