@neuravision/ng-construct 0.3.2 → 0.3.3

package/fesm2022/neuravision-ng-construct.mjs

@@ -2521,15 +2521,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  */
 class AfDropdownComponent {
     static nextId = 0;
+    hostRef = inject(ElementRef);
     /** Dropdown button label. */
     label = input('Actions', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Trigger button size. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /** Menu items. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /** Emits the selected item's value. */
     itemSelected = output();
+    /** Computed CSS classes for the trigger button. */
+    triggerClasses = computed(() => {
+        const classes = ['ct-button', 'ct-button--secondary', 'ct-dropdown__trigger'];
+        if (this.size() !== 'md') {
+            classes.push(`ct-button--${this.size()}`);
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
     triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
     menuRef = viewChild('menu', ...(ngDevMode ? [{ debugName: "menuRef" }] : []));
     itemButtons = viewChildren('itemButton', ...(ngDevMode ? [{ debugName: "itemButtons" }] : []));
+    /** Non-separator items that can receive focus and be selected. */
+    actionableItems = computed(() => this.items().filter((item) => !item.separator), ...(ngDevMode ? [{ debugName: "actionableItems" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     focusedItemIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : []));
     instanceId = AfDropdownComponent.nextId++;
@@ -2572,7 +2585,7 @@ class AfDropdownComponent {
     }
     /** Handles keyboard events within the open menu. */
     onMenuKeydown(event) {
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         if (actionableItems.length === 0)
             return;
         switch (event.key) {
@@ -2623,8 +2636,7 @@ class AfDropdownComponent {
         }
     }
     onDocumentClick(event) {
-        const target = event.target;
-        if (!target.closest('.ct-dropdown')) {
+        if (!this.hostRef.nativeElement.contains(event.target)) {
             this.close(false);
         }
     }
@@ -2633,11 +2645,11 @@ class AfDropdownComponent {
      * actionable (non-separator) items.
      */
     getActionableIndex(item) {
-        return this.getActionableItems().indexOf(item);
+        return this.actionableItems().indexOf(item);
     }
     open(focusLast = false) {
         this.isOpen.set(true);
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         const startIndex = focusLast
             ? this.nextEnabledIndex(actionableItems.length, -1)
             : this.nextEnabledIndex(-1, 1);
@@ -2663,7 +2675,7 @@ class AfDropdownComponent {
         buttons[idx]?.nativeElement.focus();
     }
     nextEnabledIndex(from, direction) {
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         const len = actionableItems.length;
         if (len === 0)
             return 0;
@@ -2679,9 +2691,6 @@ class AfDropdownComponent {
         }
         return from;
     }
-    getActionableItems() {
-        return this.items().filter((item) => !item.separator);
-    }
     handleTypeAhead(char) {
         if (this.typeAheadTimer) {
             clearTimeout(this.typeAheadTimer);
@@ -2691,7 +2700,7 @@ class AfDropdownComponent {
             this.typeAheadBuffer = '';
             this.typeAheadTimer = null;
         }, 500);
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         const startIndex = this.focusedItemIndex() + 1;
         for (let i = 0; i < actionableItems.length; i++) {
             const idx = (startIndex + i) % actionableItems.length;
@@ -2703,11 +2712,12 @@ class AfDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfDropdownComponent, isStandalone: true, selector: "af-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "itemButtons", predicate: ["itemButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfDropdownComponent, isStandalone: true, selector: "af-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "itemButtons", predicate: ["itemButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="ct-dropdown" [attr.data-state]="isOpen() ? 'open' : 'closed'">
       <button
         #trigger
-        class="ct-button ct-button--secondary ct-dropdown__trigger"
+        [id]="triggerId"
+        [class]="triggerClasses()"
         [attr.aria-expanded]="isOpen()"
         [attr.aria-controls]="menuId"
         aria-haspopup="menu"
@@ -2754,7 +2764,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
     <div class="ct-dropdown" [attr.data-state]="isOpen() ? 'open' : 'closed'">
       <button
         #trigger
-        class="ct-button ct-button--secondary ct-dropdown__trigger"
+        [id]="triggerId"
+        [class]="triggerClasses()"
         [attr.aria-expanded]="isOpen()"
         [attr.aria-controls]="menuId"
         aria-haspopup="menu"
@@ -2792,7 +2803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       }
     </div>
   `, styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menuRef: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], itemButtons: [{ type: i0.ViewChildren, args: ['itemButton', { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menuRef: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], itemButtons: [{ type: i0.ViewChildren, args: ['itemButton', { isSignal: true }] }] } });
 
 /**
  * Pagination component