@neuravision/ng-construct 0.2.0 → 0.3.1

package/fesm2022/neuravision-ng-construct.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { input, output, signal, computed, ChangeDetectionStrategy, Component, inject, forwardRef, model, booleanAttribute, viewChild, contentChildren, effect, contentChild, ElementRef, TemplateRef, Directive, Injectable, viewChildren, Renderer2, InjectionToken, DOCUMENT, numberAttribute, Pipe } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
  * Alert component for displaying contextual feedback messages.
@@ -1631,7 +1632,7 @@ class AfCardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfCardComponent, isStandalone: true, selector: "af-card", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["[header]"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.2", type: AfCardComponent, isStandalone: true, selector: "af-card", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["[header]"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <section
       [class]="cardClasses()"
       [style]="cardStyles()"
@@ -1640,20 +1641,16 @@ class AfCardComponent {
       [attr.aria-label]="ariaLabel() || null"
       (click)="onCardClick()"
       (keydown)="onCardKeydown($event)">
-      @if (hasHeader()) {
-        <div class="ct-card__header">
-          <ng-content select="[header]" />
-        </div>
-      }
+      <div class="ct-card__header" [hidden]="!hasHeader()">
+        <ng-content select="[header]" />
+      </div>
       <div class="ct-card__body">
         <ng-content select="[body]" />
         <ng-content />
       </div>
-      @if (hasFooter()) {
-        <div class="ct-card__footer">
-          <ng-content select="[footer]" />
-        </div>
-      }
+      <div class="ct-card__footer" [hidden]="!hasFooter()">
+        <ng-content select="[footer]" />
+      </div>
     </section>
   `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1668,20 +1665,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       [attr.aria-label]="ariaLabel() || null"
       (click)="onCardClick()"
       (keydown)="onCardKeydown($event)">
-      @if (hasHeader()) {
-        <div class="ct-card__header">
-          <ng-content select="[header]" />
-        </div>
-      }
+      <div class="ct-card__header" [hidden]="!hasHeader()">
+        <ng-content select="[header]" />
+      </div>
       <div class="ct-card__body">
         <ng-content select="[body]" />
         <ng-content />
       </div>
-      @if (hasFooter()) {
-        <div class="ct-card__footer">
-          <ng-content select="[footer]" />
-        </div>
-      }
+      <div class="ct-card__footer" [hidden]="!hasFooter()">
+        <ng-content select="[footer]" />
+      </div>
     </section>
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], headerRef: [{ type: i0.ContentChild, args: ['[header]', { ...{ read: ElementRef }, isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['[footer]', { ...{ read: ElementRef }, isSignal: true }] }] } });
@@ -2099,11 +2092,9 @@ class AfModalComponent {
             <ng-content select="[body]"></ng-content>
             <ng-content></ng-content>
           </div>
-          @if (hasFooter()) {
-            <div class="ct-modal__footer">
-              <ng-content select="[footer]"></ng-content>
-            </div>
-          }
+          <div class="ct-modal__footer" [hidden]="!hasFooter()">
+            <ng-content select="[footer]"></ng-content>
+          </div>
         </div>
       </div>
     }
@@ -2143,11 +2134,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             <ng-content select="[body]"></ng-content>
             <ng-content></ng-content>
           </div>
-          @if (hasFooter()) {
-            <div class="ct-modal__footer">
-              <ng-content select="[footer]"></ng-content>
-            </div>
-          }
+          <div class="ct-modal__footer" [hidden]="!hasFooter()">
+            <ng-content select="[footer]"></ng-content>
+          </div>
         </div>
       </div>
     }
@@ -6194,17 +6183,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 
 let nextId = 0;
 /**
- * Individual navigation item used within af-navbar.
+ * Individual navigation item used within af-navbar or af-toolbar.
+ *
+ * Supports Angular Router via `routerLink`, standard links via `href`,
+ * and button mode when neither is provided. Content projection allows
+ * icons and custom markup inside the link.
  *
  * @example
- * <af-nav-item label="Dashboard" href="/dashboard" [active]="true" />
+ * <af-nav-item label="Dashboard" routerLink="/dashboard">
+ *   <af-icon name="dashboard" /> Dashboard
+ * </af-nav-item>
  */
 class AfNavItemComponent {
-    /** Text label for the navigation item. */
+    /** Text label shown as fallback when no content is projected. Also used by the mobile menu. */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     /** URL for the navigation link. Renders as `<a>` when provided, `<button>` otherwise. */
     href = input('', ...(ngDevMode ? [{ debugName: "href" }] : []));
-    /** Marks this item as the currently active page. */
+    /** Angular Router link. Renders as `<a>` with routerLink and auto-active detection. */
+    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
+    /** Marks this item as the currently active page (used for href/button mode, routerLink auto-detects). */
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
     /** Disables interaction with this item. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
@@ -6225,76 +6222,106 @@ class AfNavItemComponent {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavItemComponent, isStandalone: true, selector: "af-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "linkRef", first: true, predicate: ["linkEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavItemComponent, isStandalone: true, selector: "af-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "linkRef", first: true, predicate: ["linkEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <li class="ct-navbar__item" role="none">
-      @if (href()) {
+      @if (routerLink()) {
         <a
           #linkEl
           class="ct-navbar__link"
+          [routerLink]="routerLink()!"
+          routerLinkActive="ct-navbar__link--active"
+          role="menuitem"
+          [attr.aria-disabled]="disabled() || null"
+          [attr.tabindex]="rovingTabindex()"
+          (click)="onClick($event)">
+          <ng-content>{{ label() }}</ng-content>
+        </a>
+      } @else if (href()) {
+        <a
+          #linkEl
+          class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           [href]="href()"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </a>
       } @else {
         <button
           #linkEl
           class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           type="button"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </button>
       }
     </li>
-  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-nav-item', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'af-nav-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], template: `
     <li class="ct-navbar__item" role="none">
-      @if (href()) {
+      @if (routerLink()) {
         <a
           #linkEl
           class="ct-navbar__link"
+          [routerLink]="routerLink()!"
+          routerLinkActive="ct-navbar__link--active"
+          role="menuitem"
+          [attr.aria-disabled]="disabled() || null"
+          [attr.tabindex]="rovingTabindex()"
+          (click)="onClick($event)">
+          <ng-content>{{ label() }}</ng-content>
+        </a>
+      } @else if (href()) {
+        <a
+          #linkEl
+          class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           [href]="href()"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </a>
       } @else {
         <button
           #linkEl
           class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           type="button"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </button>
       }
     </li>
   `, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], linkRef: [{ type: i0.ViewChild, args: ['linkEl', { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], linkRef: [{ type: i0.ViewChild, args: ['linkEl', { isSignal: true }] }] } });
 /**
  * Responsive navbar with mobile menu, keyboard navigation, and ARIA landmarks.
  *
  * @example
  * <af-navbar ariaLabel="Main navigation">
  *   <a brand class="ct-navbar__brand" href="/">My App</a>
- *   <af-nav-item label="Dashboard" href="/dashboard" [active]="true" />
- *   <af-nav-item label="Settings" href="/settings" />
+ *   <af-nav-item label="Dashboard" routerLink="/dashboard">
+ *     <af-icon name="dashboard" /> Dashboard
+ *   </af-nav-item>
+ *   <af-nav-item label="Settings" routerLink="/settings" />
  *   <button actions class="ct-button">Profile</button>
  * </af-navbar>
  */
@@ -6517,7 +6544,19 @@ class AfNavbarComponent {
         role="menu"
         aria-label="Mobile navigation">
         @for (item of items(); track item) {
-          @if (item.href()) {
+          @if (item.routerLink(); as rl) {
+            <a
+              #mobileLink
+              class="ct-navbar__link"
+              [routerLink]="rl"
+              routerLinkActive="ct-navbar__link--active"
+              role="menuitem"
+              [attr.aria-disabled]="item.disabled() || null"
+              [attr.tabindex]="mobileMenuOpen() ? 0 : -1"
+              (click)="onMobileItemClick($event, item)">
+              {{ item.label() }}
+            </a>
+          } @else if (item.href()) {
             <a
               #mobileLink
               class="ct-navbar__link"
@@ -6545,11 +6584,11 @@ class AfNavbarComponent {
         }
       </div>
     </header>
-  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-navbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'af-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], host: {
                         '(keydown)': 'handleKeydown($event)',
                         '(document:click)': 'onDocumentClick($event)',
                     }, template: `
@@ -6590,7 +6629,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         role="menu"
         aria-label="Mobile navigation">
         @for (item of items(); track item) {
-          @if (item.href()) {
+          @if (item.routerLink(); as rl) {
+            <a
+              #mobileLink
+              class="ct-navbar__link"
+              [routerLink]="rl"
+              routerLinkActive="ct-navbar__link--active"
+              role="menuitem"
+              [attr.aria-disabled]="item.disabled() || null"
+              [attr.tabindex]="mobileMenuOpen() ? 0 : -1"
+              (click)="onMobileItemClick($event, item)">
+              {{ item.label() }}
+            </a>
+          } @else if (item.href()) {
             <a
               #mobileLink
               class="ct-navbar__link"