@neuravision/ng-construct 0.3.6 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuravision/ng-construct",
-  "version": "0.3.6",
+  "version": "0.4.2",
   "description": "Angular components for the Construct Design System",
   "keywords": [
     "angular",

package/types/neuravision-ng-construct.d.ts

@@ -979,6 +979,49 @@ declare class AfTabsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTabsComponent, "af-tabs", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["panels"], ["*"], true, never>;
 }
 
+interface AfNavTab {
+    /** Unique identifier for the tab. */
+    id: string;
+    /** Display label. */
+    label: string;
+    /** Angular Router link for navigation. */
+    routerLink: string | string[];
+    /** Disables the tab. */
+    disabled?: boolean;
+}
+type AfNavTabsVariant = 'default' | 'pill';
+type AfNavTabsSize = 'sm' | 'md' | 'lg';
+/**
+ * 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>
+ */
+declare class AfNavTabsComponent {
+    /** Tab items to render. */
+    tabs: _angular_core.InputSignal<AfNavTab[]>;
+    /** Visual variant. `'pill'` renders pill-shaped tabs with background. */
+    variant: _angular_core.InputSignal<AfNavTabsVariant>;
+    /** Size variant. */
+    size: _angular_core.InputSignal<AfNavTabsSize>;
+    /** Accessible label for the tab navigation. */
+    ariaLabel: _angular_core.InputSignal<string>;
+    containerClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfNavTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfNavTabsComponent, "af-nav-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 interface AfDropdownItem {
     label: string;
     value: unknown;
@@ -1080,13 +1123,24 @@ declare class AfPaginationComponent {
 
 interface AfBreadcrumb {
     label: string;
+    /** Angular Router link for SPA navigation (preferred for internal routes). */
+    routerLink?: string | string[];
+    /** Plain HTML href for external links. Causes a full page reload. */
     url?: string;
 }
 /**
- * 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>
  */
 declare class AfBreadcrumbsComponent {
     /** Breadcrumb items */
@@ -1168,6 +1222,57 @@ declare class AfDatepickerComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDatepickerComponent, "af-datepicker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "dateChange": "dateChange"; }, never, never, true, never>;
 }
 
+type AfChipVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
+type AfChipAppearance = 'subtle' | 'outline' | 'solid';
+type AfChipSize = 'sm' | 'md' | 'lg';
+/**
+ * Chip component for labels, tags, statuses, and interactive filters.
+ *
+ * @example Static chip
+ * <af-chip variant="success" size="sm">Resolved</af-chip>
+ *
+ * @example Toggle chip with two-way binding
+ * <af-chip selectable [(selected)]="isActive">Filter</af-chip>
+ *
+ * @example Removable chip
+ * <af-chip removable (removed)="onRemove()">Status: Active</af-chip>
+ */
+declare class AfChipComponent {
+    /** Semantic color variant. */
+    variant: _angular_core.InputSignal<AfChipVariant>;
+    /** Visual style: subtle (filled background), outline, or solid. */
+    appearance: _angular_core.InputSignal<AfChipAppearance>;
+    /** Size of the chip. */
+    size: _angular_core.InputSignal<AfChipSize>;
+    /** Opaque value for identifying this chip in lists or groups. */
+    value: _angular_core.InputSignal<unknown>;
+    /** Enables toggle behavior with hover, active, focus styles, and keyboard support. */
+    selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Selected state for toggle chips. Supports two-way binding via `[(selected)]`. */
+    selected: _angular_core.ModelSignal<boolean>;
+    /** Disables the chip, preventing all interaction. */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Shows a remove button inside the chip. */
+    removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Shows a dot status indicator instead of an icon. */
+    dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for icon-only or truncated chips. */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Accessible label for the remove button. Should be localized by the consumer. */
+    removeAriaLabel: _angular_core.InputSignal<string>;
+    /** Emits the chip's `value` when the remove button is clicked or Delete/Backspace is pressed. */
+    removed: _angular_core.OutputEmitterRef<unknown>;
+    chipRole: _angular_core.Signal<"button" | "group" | null>;
+    iconClasses: _angular_core.Signal<string>;
+    chipClasses: _angular_core.Signal<string>;
+    handleClick(): void;
+    handleKeydown(event: Event): void;
+    handleRemoveKeydown(event: Event): void;
+    handleRemove(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfChipComponent, "af-chip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "removed": "removed"; }, never, ["[chipAvatar]", "af-icon,[chipIcon]", "*"], true, never>;
+}
+
 /**
  * Chip input component for managing a list of string values.
  *
@@ -2390,5 +2495,5 @@ declare class AfFormatLabelPipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<AfFormatLabelPipe, "afFormatLabel", true>;
 }
 
-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 type { AfAlertVariant, AfAvatarSize, AfAvatarStatus, AfBadgeVariant, AfBannerAppearance, AfBannerPosition, AfBannerVariant, AfBreadcrumb, AfButtonSize, AfButtonType, AfButtonVariant, AfCardElevation, AfCardPadding, AfColumn, AfComboboxOption, AfDataRow, AfDataTableConfig, AfDividerColor, AfDividerOrientation, AfDividerSpacing, AfDrawerPosition, AfDrawerSize, AfDropdownItem, AfEmptyStateSize, AfEmptyStateVariant, AfFileEntry, AfFileValidationError, AfIconSize, AfInputType, AfNavbarSize, AfNavbarVariant, AfPopoverAlign, AfPopoverPosition, AfPopoverSize, AfProgressBarSize, AfProgressBarVariant, AfSelectMenuOption, AfSelectOption, AfShellPanelState, AfShellSidebarState, AfSidebarMode, AfSkeletonVariant, AfSliderSize, AfSortDirection, AfSortState, AfSpinnerSize, AfTab, AfTableCellType, AfTableVariant, AfToast, AfToastVariant, AfToggleGroupSize, AfToggleItem, AfTooltipPosition };
+export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipComponent, 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 };
+export type { AfAlertVariant, AfAvatarSize, AfAvatarStatus, AfBadgeVariant, AfBannerAppearance, AfBannerPosition, AfBannerVariant, AfBreadcrumb, AfButtonSize, AfButtonType, AfButtonVariant, AfCardElevation, AfCardPadding, AfChipAppearance, AfChipSize, AfChipVariant, AfColumn, AfComboboxOption, AfDataRow, AfDataTableConfig, AfDividerColor, AfDividerOrientation, AfDividerSpacing, AfDrawerPosition, AfDrawerSize, AfDropdownItem, AfEmptyStateSize, AfEmptyStateVariant, AfFileEntry, AfFileValidationError, AfIconSize, AfInputType, AfNavTab, AfNavTabsSize, AfNavTabsVariant, AfNavbarSize, AfNavbarVariant, AfPopoverAlign, AfPopoverPosition, AfPopoverSize, AfProgressBarSize, AfProgressBarVariant, AfSelectMenuOption, AfSelectOption, AfShellPanelState, AfShellSidebarState, AfSidebarMode, AfSkeletonVariant, AfSliderSize, AfSortDirection, AfSortState, AfSpinnerSize, AfTab, AfTableCellType, AfTableVariant, AfToast, AfToastVariant, AfToggleGroupSize, AfToggleItem, AfTooltipPosition };