@neuravision/ng-construct 0.3.3 → 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.3",
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
  /**
@@ -833,6 +1005,10 @@ declare class AfDropdownComponent {
833
1005
  label: _angular_core.InputSignal<string>;
834
1006
  /** Trigger button size. */
835
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">;
836
1012
  /** Menu items. */
837
1013
  items: _angular_core.InputSignal<AfDropdownItem[]>;
838
1014
  /** Emits the selected item's value. */
@@ -870,7 +1046,7 @@ declare class AfDropdownComponent {
870
1046
  private nextEnabledIndex;
871
1047
  private handleTypeAhead;
872
1048
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfDropdownComponent, never>;
873
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDropdownComponent, "af-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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>;
874
1050
  }
875
1051
 
876
1052
  /**
@@ -1736,7 +1912,7 @@ declare class AfNavItemComponent {
1736
1912
  focusLink(): void;
1737
1913
  onClick(event: MouseEvent): void;
1738
1914
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfNavItemComponent, never>;
1739
- 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>;
1740
1916
  }
1741
1917
  /**
1742
1918
  * Responsive navbar with mobile menu, keyboard navigation, and ARIA landmarks.
@@ -1921,7 +2097,7 @@ declare class AfBannerComponent implements OnDestroy {
1921
2097
  private readonly isDismissed;
1922
2098
  private autoCloseTimerId;
1923
2099
  /** Current open/closed state for the data-state attribute */
1924
- state: _angular_core.Signal<"closed" | "open">;
2100
+ state: _angular_core.Signal<"open" | "closed">;
1925
2101
  /** ARIA role based on variant: alert for danger/warning, status for others */
1926
2102
  ariaRole: _angular_core.Signal<"alert" | "status">;
1927
2103
  /** Computed CSS class string for the banner element */
@@ -2214,5 +2390,5 @@ declare class AfFormatLabelPipe implements PipeTransform {
2214
2390
  static ɵpipe: _angular_core.ɵɵPipeDeclaration<AfFormatLabelPipe, "afFormatLabel", true>;
2215
2391
  }
2216
2392
 
2217
- 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 };
2218
- 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 };