@neuravision/ng-construct 0.3.1 → 0.3.2

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>
       }
@@ -3620,7 +3624,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 +3695,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 +4219,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 +4250,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 +4266,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 +4619,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 +4661,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 +7064,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 +7099,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>