@neuravision/ng-construct 0.3.6 → 0.4.0

package/fesm2022/neuravision-ng-construct.mjs

@@ -2964,6 +2964,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AfTabPanelComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
 
+/**
+ * Router-based tab navigation component.
+ *
+ * Uses the `ct-tabs` CSS classes from the Construct Design System but renders
+ * `<a routerLink>` elements for navigation. Active state is determined
+ * automatically via `routerLinkActive`.
+ *
+ * For content-panel tabs (show/hide content without routing), use `<af-tabs>` instead.
+ *
+ * @example
+ * <af-nav-tabs
+ *   [tabs]="[
+ *     { id: 'my', label: 'My Documents', routerLink: '/documents/my' },
+ *     { id: 'all', label: 'All Documents', routerLink: '/documents/all' }
+ *   ]">
+ * </af-nav-tabs>
+ */
+class AfNavTabsComponent {
+    /** Tab items to render. */
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    /** Visual variant. `'pill'` renders pill-shaped tabs with background. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Accessible label for the tab navigation. */
+    ariaLabel = input('Sub navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    containerClasses = computed(() => {
+        const classes = ['ct-tabs'];
+        const v = this.variant();
+        if (v === 'pill')
+            classes.push('ct-tabs--pill');
+        const s = this.size();
+        if (s !== 'md')
+            classes.push(`ct-tabs--${s}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavTabsComponent, isStandalone: true, selector: "af-nav-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav [class]="containerClasses()" [attr.aria-label]="ariaLabel()">
+      <ul class="ct-tabs__list">
+        @for (tab of tabs(); track tab.id) {
+          <li>
+            @if (tab.disabled) {
+              <span
+                class="ct-tabs__trigger"
+                aria-disabled="true"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </span>
+            } @else {
+              <a
+                class="ct-tabs__trigger"
+                [routerLink]="tab.routerLink"
+                routerLinkActive="ct-tabs__trigger--active"
+                #rla="routerLinkActive"
+                [attr.aria-current]="rla.isActive ? 'page' : null"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </a>
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `, isInline: true, styles: [":host{display:block}ul{list-style:none;margin:0;padding:0}li{display:contents}.ct-tabs__trigger--active{color:var(--color-text-primary)}.ct-tabs__trigger--active:after{background:var(--ct-tabs-indicator-color, var(--color-brand-primary))}.ct-tabs--pill .ct-tabs__trigger--active{background:var(--color-bg-elevated);box-shadow:var(--shadow-sm)}.ct-tabs--pill .ct-tabs__trigger--active:after{display:none}.ct-tabs__trigger[aria-disabled=true]{color:var(--color-text-muted);opacity:var(--opacity-disabled, .5);cursor:not-allowed;pointer-events:none}\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: AfNavTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-nav-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], template: `
+    <nav [class]="containerClasses()" [attr.aria-label]="ariaLabel()">
+      <ul class="ct-tabs__list">
+        @for (tab of tabs(); track tab.id) {
+          <li>
+            @if (tab.disabled) {
+              <span
+                class="ct-tabs__trigger"
+                aria-disabled="true"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </span>
+            } @else {
+              <a
+                class="ct-tabs__trigger"
+                [routerLink]="tab.routerLink"
+                routerLinkActive="ct-tabs__trigger--active"
+                #rla="routerLinkActive"
+                [attr.aria-current]="rla.isActive ? 'page' : null"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </a>
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `, styles: [":host{display:block}ul{list-style:none;margin:0;padding:0}li{display:contents}.ct-tabs__trigger--active{color:var(--color-text-primary)}.ct-tabs__trigger--active:after{background:var(--ct-tabs-indicator-color, var(--color-brand-primary))}.ct-tabs--pill .ct-tabs__trigger--active{background:var(--color-bg-elevated);box-shadow:var(--shadow-sm)}.ct-tabs--pill .ct-tabs__trigger--active:after{display:none}.ct-tabs__trigger[aria-disabled=true]{color:var(--color-text-muted);opacity:var(--opacity-disabled, .5);cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
 /**
  * Dropdown menu component implementing the WAI-ARIA Menu Pattern.
  *
@@ -3407,10 +3505,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 /**
- * Breadcrumbs navigation component
+ * Breadcrumbs navigation component with Angular Router support.
+ *
+ * Items with `routerLink` navigate via the Angular Router (no page reload).
+ * Items with `url` render a plain `<a href>` (for external links).
+ * The last item is always rendered as static text (current page).
  *
  * @example
- * <af-breadcrumbs [items]="breadcrumbs"></af-breadcrumbs>
+ * <af-breadcrumbs [items]="[
+ *   { label: 'Home', routerLink: '/' },
+ *   { label: 'Documents', routerLink: '/documents' },
+ *   { label: 'My Documents' }
+ * ]"></af-breadcrumbs>
  */
 class AfBreadcrumbsComponent {
     /** Breadcrumb items */
@@ -3421,34 +3527,50 @@ class AfBreadcrumbsComponent {
       <ol class="ct-breadcrumbs__list">
         @for (item of items(); track $index; let isLast = $last) {
           <li class="ct-breadcrumbs__item">
-            @if (!isLast && item.url) {
+            @if (isLast) {
+              <span class="ct-breadcrumbs__current" aria-current="page">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="ct-breadcrumbs__link" [routerLink]="item.routerLink">
+                {{ item.label }}
+              </a>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
+            } @else if (item.url) {
               <a class="ct-breadcrumbs__link" [href]="item.url">
                 {{ item.label }}
               </a>
-              <span class="ct-breadcrumbs__separator">/</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             } @else {
-              <span class="ct-breadcrumbs__current">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__text">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             }
           </li>
         }
       </ol>
     </nav>
-  `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfBreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'af-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: `
     <nav class="ct-breadcrumbs" aria-label="Breadcrumb">
       <ol class="ct-breadcrumbs__list">
         @for (item of items(); track $index; let isLast = $last) {
           <li class="ct-breadcrumbs__item">
-            @if (!isLast && item.url) {
+            @if (isLast) {
+              <span class="ct-breadcrumbs__current" aria-current="page">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="ct-breadcrumbs__link" [routerLink]="item.routerLink">
+                {{ item.label }}
+              </a>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
+            } @else if (item.url) {
               <a class="ct-breadcrumbs__link" [href]="item.url">
                 {{ item.label }}
               </a>
-              <span class="ct-breadcrumbs__separator">/</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             } @else {
-              <span class="ct-breadcrumbs__current">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__text">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             }
           </li>
         }
@@ -8153,5 +8275,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectMenuComponent, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
+export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectMenuComponent, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
 //# sourceMappingURL=neuravision-ng-construct.mjs.map