@neuravision/ng-construct 0.3.1 → 0.3.3

package/fesm2022/neuravision-ng-construct.mjs

@@ -78,7 +78,7 @@ class AfAlertComponent {
             class="af-alert__dismiss"
             aria-label="Dismiss alert"
             (click)="dismiss()">
-            ×
+            <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
           </button>
         }
       </div>
@@ -113,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             class="af-alert__dismiss"
             aria-label="Dismiss alert"
             (click)="dismiss()">
-            ×
+            <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
           </button>
         }
       </div>
@@ -2081,10 +2081,11 @@ class AfModalComponent {
             <h2 [id]="titleId">{{ title() }}</h2>
             @if (showCloseButton()) {
               <button
-                class="ct-button ct-button--ghost"
+                class="ct-button ct-button--ghost ct-button--icon"
+                type="button"
                 aria-label="Close"
                 (click)="close()">
-                ×
+                <span class="ct-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
               </button>
             }
           </div>
@@ -2123,10 +2124,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             <h2 [id]="titleId">{{ title() }}</h2>
             @if (showCloseButton()) {
               <button
-                class="ct-button ct-button--ghost"
+                class="ct-button ct-button--ghost ct-button--icon"
+                type="button"
                 aria-label="Close"
                 (click)="close()">
-                ×
+                <span class="ct-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
               </button>
             }
           </div>
@@ -2260,10 +2262,11 @@ class AfToastContainerComponent {
             </button>
           }
           <button
-            class="ct-button ct-button--ghost"
+            class="ct-button ct-button--ghost ct-button--icon ct-button--sm"
+            type="button"
             aria-label="Close"
             (click)="toastService.dismiss(toast.id)">
-            ×
+            <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
           </button>
         </div>
       }
@@ -2294,10 +2297,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             </button>
           }
           <button
-            class="ct-button ct-button--ghost"
+            class="ct-button ct-button--ghost ct-button--icon ct-button--sm"
+            type="button"
             aria-label="Close"
             (click)="toastService.dismiss(toast.id)">
-            ×
+            <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
           </button>
         </div>
       }
@@ -2517,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++;
@@ -2568,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) {
@@ -2619,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);
         }
     }
@@ -2629,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);
@@ -2659,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;
@@ -2675,9 +2691,6 @@ class AfDropdownComponent {
         }
         return from;
     }
-    getActionableItems() {
-        return this.items().filter((item) => !item.separator);
-    }
     handleTypeAhead(char) {
         if (this.typeAheadTimer) {
             clearTimeout(this.typeAheadTimer);
@@ -2687,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;
@@ -2699,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"
@@ -2750,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"
@@ -2788,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
@@ -3620,7 +3635,7 @@ class AfChipInputComponent {
                 class="ct-chip__remove"
                 [attr.aria-label]="'Remove ' + chip"
                 (click)="remove(chip, $event)">
-                &times;
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
               </button>
             }
           </span>
@@ -3691,7 +3706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 class="ct-chip__remove"
                 [attr.aria-label]="'Remove ' + chip"
                 (click)="remove(chip, $event)">
-                &times;
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
               </button>
             }
           </span>
@@ -4215,7 +4230,7 @@ class AfSidebarComponent {
             type="button"
             aria-label="Close menu"
             (click)="close()">
-            <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
+            <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
           </button>
         }
       </div>
@@ -4246,7 +4261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             type="button"
             aria-label="Close menu"
             (click)="close()">
-            <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
+            <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
           </button>
         }
       </div>
@@ -4262,38 +4277,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }] } });
 
 /**
- * Icon component that abstracts the icon rendering strategy.
+ * Icon wrapper that applies Construct Design System sizing via `ct-icon` classes.
  *
- * Currently uses Material Icons font ligatures. The icon strategy
- * can be changed centrally without modifying consumers.
+ * Uses content projection so any icon source can be used:
+ * Lucide, custom SVGs, or other icon libraries.
  *
- * @example
- * <af-icon name="delete" />
- * <af-icon name="edit" size="sm" />
+ * @example Using with Lucide
+ * ```html
+ * <af-icon size="sm">
+ *   <lucide-x />
+ * </af-icon>
+ * ```
+ *
+ * @example Using with inline SVG
+ * ```html
+ * <af-icon size="lg">
+ *   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+ *     <circle cx="12" cy="12" r="10" />
+ *   </svg>
+ * </af-icon>
+ * ```
  */
 class AfIconComponent {
-    /** Material Icon name (ligature) */
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     /** Icon size variant */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     iconClasses = computed(() => {
-        const classes = ['ct-icon', 'material-icons'];
+        const classes = ['ct-icon'];
         if (this.size() !== 'md') {
             classes.push(`ct-icon--${this.size()}`);
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfIconComponent, isStandalone: true, selector: "af-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span [class]="iconClasses()" aria-hidden="true">{{ name() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfIconComponent, isStandalone: true, selector: "af-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="iconClasses()" aria-hidden="true">
+      <ng-content />
+    </span>
   `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'af-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <span [class]="iconClasses()" aria-hidden="true">{{ name() }}</span>
+    <span [class]="iconClasses()" aria-hidden="true">
+      <ng-content />
+    </span>
   `, styles: [":host{display:inline-flex;align-items:center;justify-content:center}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Slider component with full form control and accessibility support.
@@ -4601,7 +4630,7 @@ class AfDrawerComponent {
               type="button"
               [attr.aria-label]="closeButtonAriaLabel()"
               (click)="close()">
-              <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
+              <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
             </button>
           }
         </div>
@@ -4643,7 +4672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
               type="button"
               [attr.aria-label]="closeButtonAriaLabel()"
               (click)="close()">
-              <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
+              <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
             </button>
           }
         </div>
@@ -7046,7 +7075,7 @@ class AfBannerComponent {
           type="button"
           [attr.aria-label]="closeAriaLabel()"
           (click)="dismiss()">
-          &times;
+          <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
         </button>
       }
     </div>
@@ -7081,7 +7110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
           type="button"
           [attr.aria-label]="closeAriaLabel()"
           (click)="dismiss()">
-          &times;
+          <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
         </button>
       }
     </div>