codexly-ui 0.6.7 → 0.6.8

package/fesm2022/codexly-ui.mjs

@@ -12367,6 +12367,8 @@ class ClxFabComponent {
     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 */ []));
+    /** Direction the shortcut stack expands toward. */
+    expandDirection = input('up', ...(ngDevMode ? [{ debugName: "expandDirection" }] : /* istanbul ignore next */ []));
     // ── Outputs ─────────────────────────────────────────────────────────────────
     itemClick = output();
     /** Emitted once, after a drag ends, with the new position to persist. */
@@ -12387,10 +12389,46 @@ class ClxFabComponent {
     // ── 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 },
-    ];
+    static POSITIONS_BY_DIRECTION = {
+        up: [
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+        ],
+        down: [
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+        ],
+        left: [
+            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
+            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
+        ],
+        right: [
+            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
+            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
+        ],
+    };
+    _positions = computed(() => ClxFabComponent.POSITIONS_BY_DIRECTION[this.expandDirection()], ...(ngDevMode ? [{ debugName: "_positions" }] : /* istanbul ignore next */ []));
+    static STACK_CLASS_BY_DIRECTION = {
+        up: 'flex-col items-end mb-2',
+        down: 'flex-col-reverse items-end mt-2',
+        left: 'flex-row items-center mr-2',
+        right: 'flex-row-reverse items-center ml-2',
+    };
+    _stackClass = computed(() => `flex gap-2 ${ClxFabComponent.STACK_CLASS_BY_DIRECTION[this.expandDirection()]}`, ...(ngDevMode ? [{ debugName: "_stackClass" }] : /* istanbul ignore next */ []));
+    static ITEM_CLASS_BY_DIRECTION = {
+        up: 'flex items-center gap-2',
+        down: 'flex items-center gap-2',
+        left: 'flex items-center gap-2 flex-row-reverse',
+        right: 'flex items-center gap-2',
+    };
+    _itemClass = computed(() => ClxFabComponent.ITEM_CLASS_BY_DIRECTION[this.expandDirection()], ...(ngDevMode ? [{ debugName: "_itemClass" }] : /* istanbul ignore next */ []));
+    static ANIMATION_BY_DIRECTION = {
+        up: 'fadeInUp',
+        down: 'fadeInDown',
+        left: 'fadeInLeft',
+        right: 'fadeInRight',
+    };
+    _itemAnimation = computed(() => ClxFabComponent.ANIMATION_BY_DIRECTION[this.expandDirection()], ...(ngDevMode ? [{ debugName: "_itemAnimation" }] : /* istanbul ignore next */ []));
     // ── State ────────────────────────────────────────────────────────────────────
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     // ── Drag ─────────────────────────────────────────────────────────────────────
@@ -12457,7 +12495,7 @@ 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 }, 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: `
+    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 }, expandDirection: { classPropertyName: "expandDirection", publicName: "expandDirection", 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
       #origin="cdkOverlayOrigin"
@@ -12483,25 +12521,25 @@ class ClxFabComponent {
       </button>
     </div>
 
-    <!-- ── Overlay panel: vertical stack expanding upward ────────────────── -->
+    <!-- ── Overlay panel: stack expanding toward expandDirection() ────────────────── -->
     <ng-template
       cdkConnectedOverlay
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayPositions]="_positions()"
       [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
       [cdkConnectedOverlayPush]="true"
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="flex flex-col items-end gap-2 mb-2" role="menu">
+      <div [class]="_stackClass()" role="menu">
         @for (item of items(); track item.key; let i = $index) {
           <div
-            clxAnimate="fadeInUp"
+            [clxAnimate]="_itemAnimation()"
             trigger="onEnter"
             [delay]="i * 60"
             [duration]="220"
-            class="flex items-center gap-2">
+            [class]="_itemClass()">
             <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>
@@ -12548,25 +12586,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </button>
     </div>
 
-    <!-- ── Overlay panel: vertical stack expanding upward ────────────────── -->
+    <!-- ── Overlay panel: stack expanding toward expandDirection() ────────────────── -->
     <ng-template
       cdkConnectedOverlay
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayPositions]="_positions()"
       [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
       [cdkConnectedOverlayPush]="true"
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="flex flex-col items-end gap-2 mb-2" role="menu">
+      <div [class]="_stackClass()" role="menu">
         @for (item of items(); track item.key; let i = $index) {
           <div
-            clxAnimate="fadeInUp"
+            [clxAnimate]="_itemAnimation()"
             trigger="onEnter"
             [delay]="i * 60"
             [duration]="220"
-            class="flex items-center gap-2">
+            [class]="_itemClass()">
             <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>
@@ -12583,7 +12621,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 }] }], 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"] }] } });
+        }], 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 }] }], expandDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandDirection", 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';