@neuravision/ng-construct 0.3.2 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neuravision/ng-construct",
3
- "version": "0.3.2",
3
+ "version": "0.3.6",
4
4
  "description": "Angular components for the Construct Design System",
5
5
  "keywords": [
6
6
  "angular",
@@ -12,7 +12,7 @@
12
12
  "@angular/common": "^21.1.0",
13
13
  "@angular/core": "^21.1.0",
14
14
  "@angular/router": "^21.1.0",
15
- "@neuravision/construct": "^1.1.2",
15
+ "@neuravision/construct": "^1.1.4",
16
16
  "@lucide/angular": "^1.0.0-rc.0"
17
17
  },
18
18
  "dependencies": {
@@ -109,6 +109,178 @@ declare class AfAccordionComponent {
109
109
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAccordionComponent, "af-accordion", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
110
110
  }
111
111
 
112
+ type AfShellSidebarState = 'expanded' | 'collapsed' | 'hidden';
113
+ type AfShellPanelState = 'open' | 'closed';
114
+ /**
115
+ * Page header rendered inside the main content area of an App Shell.
116
+ *
117
+ * Displays breadcrumbs, page title, and actions in a flex row.
118
+ * Place inside `<af-app-shell>` without any slot attribute so it
119
+ * projects into the main area.
120
+ *
121
+ * @example
122
+ * <af-app-shell>
123
+ * <af-app-shell-page-header sticky>
124
+ * <nav aria-label="Breadcrumb">Home / Dashboard</nav>
125
+ * <h1>Dashboard</h1>
126
+ * <button class="ct-button">New Item</button>
127
+ * </af-app-shell-page-header>
128
+ * <p>Main content…</p>
129
+ * </af-app-shell>
130
+ */
131
+ declare class AfAppShellPageHeaderComponent {
132
+ /** Pin the page header to the top of the scrollable main area. */
133
+ sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
134
+ classes: _angular_core.Signal<string>;
135
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAppShellPageHeaderComponent, never>;
136
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAppShellPageHeaderComponent, "af-app-shell-page-header", never, { "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
137
+ }
138
+ /**
139
+ * Classic CSS-Grid App Shell that orchestrates header, sidebar,
140
+ * main content, optional panel, and footer.
141
+ *
142
+ * Wraps the `ct-app-shell` CSS component from the Construct Design System.
143
+ * Sidebar and panel states are two-way bindable via `model()` signals.
144
+ *
145
+ * Content projection slots:
146
+ * - `[header]` — Navbar / top bar
147
+ * - `[sidebar]` — Navigation sidebar
148
+ * - `[panel]` — Right-side contextual panel
149
+ * - `[footer]` — Footer area
150
+ * - `[bottomNav]` — Mobile bottom navigation (requires `bottomNav` modifier)
151
+ * - *(default)* — Main content (including `<af-app-shell-page-header>`)
152
+ *
153
+ * @example
154
+ * <af-app-shell [(sidebarState)]="sidebarState" [(panelState)]="panelState" sidebarFullHeight>
155
+ * <af-navbar header ariaLabel="Main">…</af-navbar>
156
+ * <af-sidebar sidebar ariaLabel="Navigation">…</af-sidebar>
157
+ * <af-app-shell-page-header sticky>
158
+ * <h1>Dashboard</h1>
159
+ * </af-app-shell-page-header>
160
+ * <p>Content goes here</p>
161
+ * <div panel>Inspector</div>
162
+ * <footer footer>&copy; 2026</footer>
163
+ * </af-app-shell>
164
+ */
165
+ declare class AfAppShellComponent {
166
+ /** Current sidebar state — two-way bindable. */
167
+ sidebarState: _angular_core.ModelSignal<AfShellSidebarState>;
168
+ /** Current panel state — two-way bindable. */
169
+ panelState: _angular_core.ModelSignal<AfShellPanelState>;
170
+ /** Remove the sidebar column entirely. */
171
+ noSidebar: _angular_core.InputSignalWithTransform<boolean, unknown>;
172
+ /** Place the sidebar on the right side. */
173
+ sidebarRight: _angular_core.InputSignalWithTransform<boolean, unknown>;
174
+ /** Sidebar spans the full viewport height (header sits beside it). */
175
+ sidebarFullHeight: _angular_core.InputSignalWithTransform<boolean, unknown>;
176
+ /** Stick the footer to the bottom with a top border. */
177
+ footerSticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
178
+ /** Enable bottom navigation on mobile (hides sidebar and footer). */
179
+ bottomNav: _angular_core.InputSignalWithTransform<boolean, unknown>;
180
+ /** Accessible label for the sidebar landmark. */
181
+ sidebarLabel: _angular_core.InputSignal<string>;
182
+ /** Accessible label for the panel landmark. */
183
+ panelLabel: _angular_core.InputSignal<string>;
184
+ /** ID of the main content element (used by skip-link). */
185
+ mainId: _angular_core.InputSignal<string>;
186
+ /** Visible text of the skip-link. */
187
+ skipLinkLabel: _angular_core.InputSignal<string>;
188
+ shellClasses: _angular_core.Signal<string>;
189
+ /** Dismiss the mobile sidebar overlay. */
190
+ onBackdropClick(): void;
191
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAppShellComponent, never>;
192
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAppShellComponent, "af-app-shell", never, { "sidebarState": { "alias": "sidebarState"; "required": false; "isSignal": true; }; "panelState": { "alias": "panelState"; "required": false; "isSignal": true; }; "noSidebar": { "alias": "noSidebar"; "required": false; "isSignal": true; }; "sidebarRight": { "alias": "sidebarRight"; "required": false; "isSignal": true; }; "sidebarFullHeight": { "alias": "sidebarFullHeight"; "required": false; "isSignal": true; }; "footerSticky": { "alias": "footerSticky"; "required": false; "isSignal": true; }; "bottomNav": { "alias": "bottomNav"; "required": false; "isSignal": true; }; "sidebarLabel": { "alias": "sidebarLabel"; "required": false; "isSignal": true; }; "panelLabel": { "alias": "panelLabel"; "required": false; "isSignal": true; }; "mainId": { "alias": "mainId"; "required": false; "isSignal": true; }; "skipLinkLabel": { "alias": "skipLinkLabel"; "required": false; "isSignal": true; }; }, { "sidebarState": "sidebarStateChange"; "panelState": "panelStateChange"; }, never, ["[header]", "[sidebar]", "*", "[panel]", "[footer]", "[bottomNav]"], true, never>;
193
+ }
194
+
195
+ /**
196
+ * Toolbar rendered inside the main content area of an App Shell V2.
197
+ *
198
+ * Replaces the classic full-width page header with a toolbar row
199
+ * for breadcrumbs, page title, and actions. Place inside
200
+ * `<af-app-shell-v2>` without any slot attribute so it projects
201
+ * into the main area.
202
+ *
203
+ * @example
204
+ * <af-app-shell-v2>
205
+ * <af-app-shell-v2-toolbar sticky>
206
+ * <nav aria-label="Breadcrumb">Home / Dashboard</nav>
207
+ * <div>
208
+ * <button class="ct-button">Export</button>
209
+ * </div>
210
+ * </af-app-shell-v2-toolbar>
211
+ * <p>Main content…</p>
212
+ * </af-app-shell-v2>
213
+ */
214
+ declare class AfAppShellV2ToolbarComponent {
215
+ /** Pin the toolbar to the top of the scrollable main area. */
216
+ sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
217
+ classes: _angular_core.Signal<string>;
218
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAppShellV2ToolbarComponent, never>;
219
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAppShellV2ToolbarComponent, "af-app-shell-v2-toolbar", never, { "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
220
+ }
221
+ /**
222
+ * Floating-canvas App Shell with elevated surfaces, rounded corners,
223
+ * and optional glass/branded modifiers.
224
+ *
225
+ * Wraps the `ct-app-shell-v2` CSS component from the Construct Design System.
226
+ * Sidebar and panel states are two-way bindable via `model()` signals.
227
+ *
228
+ * Content projection slots:
229
+ * - `[header]` — Optional floating header bar (requires `withHeader` input)
230
+ * - `[sidebar]` — Floating sidebar surface
231
+ * - `[panel]` — Right-side contextual panel (inside body flex container)
232
+ * - `[footer]` — Footer inside the main area
233
+ * - *(default)* — Main content (including `<af-app-shell-v2-toolbar>`)
234
+ *
235
+ * @example
236
+ * <af-app-shell-v2
237
+ * [(sidebarState)]="sidebarState"
238
+ * [(panelState)]="panelState"
239
+ * withHeader
240
+ * sidebarBranded
241
+ * glass>
242
+ * <af-navbar header ariaLabel="Main">…</af-navbar>
243
+ * <af-sidebar sidebar ariaLabel="Navigation">…</af-sidebar>
244
+ * <af-app-shell-v2-toolbar sticky>
245
+ * <h1>Dashboard</h1>
246
+ * </af-app-shell-v2-toolbar>
247
+ * <p>Content goes here</p>
248
+ * <div panel>Inspector</div>
249
+ * <footer footer>&copy; 2026</footer>
250
+ * </af-app-shell-v2>
251
+ */
252
+ declare class AfAppShellV2Component {
253
+ /** Current sidebar state — two-way bindable. */
254
+ sidebarState: _angular_core.ModelSignal<AfShellSidebarState>;
255
+ /** Current panel state — two-way bindable. */
256
+ panelState: _angular_core.ModelSignal<AfShellPanelState>;
257
+ /** Remove the sidebar entirely. */
258
+ noSidebar: _angular_core.InputSignalWithTransform<boolean, unknown>;
259
+ /** Place the sidebar on the right side. */
260
+ sidebarRight: _angular_core.InputSignalWithTransform<boolean, unknown>;
261
+ /** Sidebar spans the full viewport height (header sits beside it). */
262
+ sidebarFullHeight: _angular_core.InputSignalWithTransform<boolean, unknown>;
263
+ /** Show the optional floating header bar. */
264
+ withHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
265
+ /** Dark-branded sidebar (Slack / Linear / Discord aesthetic). */
266
+ sidebarBranded: _angular_core.InputSignalWithTransform<boolean, unknown>;
267
+ /** Frosted glass morphism effect on all floating surfaces. */
268
+ glass: _angular_core.InputSignalWithTransform<boolean, unknown>;
269
+ /** Accessible label for the sidebar landmark. */
270
+ sidebarLabel: _angular_core.InputSignal<string>;
271
+ /** Accessible label for the panel landmark. */
272
+ panelLabel: _angular_core.InputSignal<string>;
273
+ /** ID of the main content element (used by skip-link). */
274
+ mainId: _angular_core.InputSignal<string>;
275
+ /** Visible text of the skip-link. */
276
+ skipLinkLabel: _angular_core.InputSignal<string>;
277
+ shellClasses: _angular_core.Signal<string>;
278
+ /** Dismiss the mobile sidebar overlay. */
279
+ onBackdropClick(): void;
280
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAppShellV2Component, never>;
281
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAppShellV2Component, "af-app-shell-v2", never, { "sidebarState": { "alias": "sidebarState"; "required": false; "isSignal": true; }; "panelState": { "alias": "panelState"; "required": false; "isSignal": true; }; "noSidebar": { "alias": "noSidebar"; "required": false; "isSignal": true; }; "sidebarRight": { "alias": "sidebarRight"; "required": false; "isSignal": true; }; "sidebarFullHeight": { "alias": "sidebarFullHeight"; "required": false; "isSignal": true; }; "withHeader": { "alias": "withHeader"; "required": false; "isSignal": true; }; "sidebarBranded": { "alias": "sidebarBranded"; "required": false; "isSignal": true; }; "glass": { "alias": "glass"; "required": false; "isSignal": true; }; "sidebarLabel": { "alias": "sidebarLabel"; "required": false; "isSignal": true; }; "panelLabel": { "alias": "panelLabel"; "required": false; "isSignal": true; }; "mainId": { "alias": "mainId"; "required": false; "isSignal": true; }; "skipLinkLabel": { "alias": "skipLinkLabel"; "required": false; "isSignal": true; }; }, { "sidebarState": "sidebarStateChange"; "panelState": "panelStateChange"; }, never, ["[header]", "[sidebar]", "*", "[footer]", "[panel]"], true, never>;
282
+ }
283
+
112
284
  type AfAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
113
285
  type AfAvatarStatus = 'online' | 'offline' | 'busy' | 'away';
114
286
  /**
@@ -828,15 +1000,26 @@ interface AfDropdownItem {
828
1000
  */
829
1001
  declare class AfDropdownComponent {
830
1002
  private static nextId;
1003
+ private readonly hostRef;
831
1004
  /** Dropdown button label. */
832
1005
  label: _angular_core.InputSignal<string>;
1006
+ /** Trigger button size. */
1007
+ size: _angular_core.InputSignal<AfButtonSize>;
1008
+ /** Horizontal alignment of the menu relative to the trigger. */
1009
+ align: _angular_core.InputSignal<"start" | "end">;
1010
+ /** Which side of the trigger the menu opens on. */
1011
+ side: _angular_core.InputSignal<"bottom" | "top">;
833
1012
  /** Menu items. */
834
1013
  items: _angular_core.InputSignal<AfDropdownItem[]>;
835
1014
  /** Emits the selected item's value. */
836
1015
  itemSelected: _angular_core.OutputEmitterRef<unknown>;
1016
+ /** Computed CSS classes for the trigger button. */
1017
+ triggerClasses: _angular_core.Signal<string>;
837
1018
  triggerRef: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
838
1019
  menuRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
839
1020
  itemButtons: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
1021
+ /** Non-separator items that can receive focus and be selected. */
1022
+ private actionableItems;
840
1023
  isOpen: _angular_core.WritableSignal<boolean>;
841
1024
  focusedItemIndex: _angular_core.WritableSignal<number>;
842
1025
  private instanceId;
@@ -861,10 +1044,9 @@ declare class AfDropdownComponent {
861
1044
  private focusItem;
862
1045
  private focusCurrent;
863
1046
  private nextEnabledIndex;
864
- private getActionableItems;
865
1047
  private handleTypeAhead;
866
1048
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfDropdownComponent, never>;
867
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDropdownComponent, "af-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, never, never, true, never>;
1049
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDropdownComponent, "af-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, never, never, true, never>;
868
1050
  }
869
1051
 
870
1052
  /**
@@ -1730,7 +1912,7 @@ declare class AfNavItemComponent {
1730
1912
  focusLink(): void;
1731
1913
  onClick(event: MouseEvent): void;
1732
1914
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfNavItemComponent, never>;
1733
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfNavItemComponent, "af-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*", "*", "*"], true, never>;
1915
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfNavItemComponent, "af-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
1734
1916
  }
1735
1917
  /**
1736
1918
  * Responsive navbar with mobile menu, keyboard navigation, and ARIA landmarks.
@@ -1915,7 +2097,7 @@ declare class AfBannerComponent implements OnDestroy {
1915
2097
  private readonly isDismissed;
1916
2098
  private autoCloseTimerId;
1917
2099
  /** Current open/closed state for the data-state attribute */
1918
- state: _angular_core.Signal<"closed" | "open">;
2100
+ state: _angular_core.Signal<"open" | "closed">;
1919
2101
  /** ARIA role based on variant: alert for danger/warning, status for others */
1920
2102
  ariaRole: _angular_core.Signal<"alert" | "status">;
1921
2103
  /** Computed CSS class string for the banner element */
@@ -2208,5 +2390,5 @@ declare class AfFormatLabelPipe implements PipeTransform {
2208
2390
  static ɵpipe: _angular_core.ɵɵPipeDeclaration<AfFormatLabelPipe, "afFormatLabel", true>;
2209
2391
  }
2210
2392
 
2211
- export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, 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 };
2212
- 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, AfSidebarMode, AfSkeletonVariant, AfSliderSize, AfSortDirection, AfSortState, AfSpinnerSize, AfTab, AfTableCellType, AfTableVariant, AfToast, AfToastVariant, AfToggleGroupSize, AfToggleItem, AfTooltipPosition };
2393
+ 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 };
2394
+ 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 };