@frame-kit/ui-ng-patterns 0.2.15 → 0.2.17
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.
|
@@ -17,6 +17,7 @@ import * as i1 from '@angular/cdk/drag-drop';
|
|
|
17
17
|
import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
18
18
|
import { LoaderComponent } from '@frame-kit/ui-ng/ui/loader';
|
|
19
19
|
import { DropdownMenuComponent, DropdownTriggerDirective, DropdownPanelDirective } from '@frame-kit/ui-ng/ui/dropdown-menu';
|
|
20
|
+
import { NavBrandComponent } from '@frame-kit/ui-ng/ui/nav-brand';
|
|
20
21
|
|
|
21
22
|
/**
|
|
22
23
|
* Page-level dashboard header: title + optional description on the left, up to
|
|
@@ -2215,8 +2216,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2215
2216
|
class DashboardNavComponent {
|
|
2216
2217
|
// ===== INPUTS =====
|
|
2217
2218
|
groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
2218
|
-
/**
|
|
2219
|
-
|
|
2219
|
+
/**
|
|
2220
|
+
* Icon-rail mode, passed through to every segment. Left `null` — the
|
|
2221
|
+
* default — each segment reads the collapse state of an ancestor
|
|
2222
|
+
* `fk-app-shell`, which is what `fk-dashboard-layout` is. Set it
|
|
2223
|
+
* explicitly only to drive the rail without a shell present.
|
|
2224
|
+
*
|
|
2225
|
+
* It defaults to inheriting rather than to `false` because the failure is
|
|
2226
|
+
* silent otherwise: a nav told nothing renders its expanded rows into a
|
|
2227
|
+
* collapsed rail and they are squashed, with no error to follow.
|
|
2228
|
+
*/
|
|
2229
|
+
collapsed = input(null, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
2220
2230
|
/** Project `[navSlotBefore]` content immediately before this group. */
|
|
2221
2231
|
slotBeforeGroupId = input(null, ...(ngDevMode ? [{ debugName: "slotBeforeGroupId" }] : /* istanbul ignore next */ []));
|
|
2222
2232
|
/** Project default `<ng-content>` immediately after this group. */
|
|
@@ -2225,7 +2235,11 @@ class DashboardNavComponent {
|
|
|
2225
2235
|
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
2226
2236
|
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2227
2237
|
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2238
|
+
// ===== INJECTED =====
|
|
2239
|
+
shell = inject(AppShellComponent, { optional: true });
|
|
2228
2240
|
// ===== COMPUTED =====
|
|
2241
|
+
/** The rail state in force: this input, else the ancestor shell's. */
|
|
2242
|
+
isCollapsed = computed(() => this.collapsed() ?? this.shell?.isCollapsed() ?? false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
2229
2243
|
/**
|
|
2230
2244
|
* Visible groups sliced into render segments, each carrying a single-group
|
|
2231
2245
|
* `SidebarNavModel`.
|
|
@@ -2279,7 +2293,7 @@ class DashboardNavComponent {
|
|
|
2279
2293
|
}, ...(ngDevMode ? [{ debugName: "segmentsAfterSlot" }] : /* istanbul ignore next */ []));
|
|
2280
2294
|
classes = computed(() => [
|
|
2281
2295
|
'fk-dashboard-nav',
|
|
2282
|
-
this.
|
|
2296
|
+
this.isCollapsed() ? 'fk-dashboard-nav--collapsed' : '',
|
|
2283
2297
|
this.className(),
|
|
2284
2298
|
]
|
|
2285
2299
|
.filter(Boolean)
|
|
@@ -2290,21 +2304,32 @@ class DashboardNavComponent {
|
|
|
2290
2304
|
get hostId() {
|
|
2291
2305
|
return this.id();
|
|
2292
2306
|
}
|
|
2307
|
+
/**
|
|
2308
|
+
* The sidebar is a navigation landmark, so a screen reader can jump to it
|
|
2309
|
+
* rather than walking the page to find it. The host is the element that
|
|
2310
|
+
* holds every link, so the role belongs here; without it the `aria-label`
|
|
2311
|
+
* below names nothing, and a page whose only other landmark is a breadcrumb
|
|
2312
|
+
* offers no way to reach the navigation at all.
|
|
2313
|
+
*/
|
|
2314
|
+
hostRole = 'navigation';
|
|
2293
2315
|
get hostAriaLabel() {
|
|
2294
2316
|
return this.ariaLabel();
|
|
2295
2317
|
}
|
|
2296
2318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2297
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardNavComponent, isStandalone: true, selector: "fk-dashboard-nav", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, slotBeforeGroupId: { classPropertyName: "slotBeforeGroupId", publicName: "slotBeforeGroupId", isSignal: true, isRequired: false, transformFunction: null }, slotAfterGroupId: { classPropertyName: "slotAfterGroupId", publicName: "slotAfterGroupId", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "@for (segment of segmentsBeforeSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"
|
|
2319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardNavComponent, isStandalone: true, selector: "fk-dashboard-nav", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, slotBeforeGroupId: { classPropertyName: "slotBeforeGroupId", publicName: "slotBeforeGroupId", isSignal: true, isRequired: false, transformFunction: null }, slotAfterGroupId: { classPropertyName: "slotAfterGroupId", publicName: "slotAfterGroupId", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.hostRole", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "@for (segment of segmentsBeforeSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n}\n\n<!--\n Exactly one outlet for `[navSlotBefore]`, never inside a conditional. With\n no anchored group, or no groups at all, both loops are empty and the slot\n lands at the top \u2014 so a caller with nothing to navigate to still gets its\n switcher, which is the one way back to somewhere it can use.\n-->\n<ng-content select=\"[navSlotBefore]\" />\n\n@for (segment of segmentsAfterSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n @if (segment.after) {\n <ng-content />\n }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fk-dashboard-nav-gap, var(--fk-rhythm-6, 1.5rem));padding:var(--fk-dashboard-nav-padding, var(--fk-rhythm-4, 1rem))}:host(.fk-dashboard-nav--collapsed){padding-inline:var(--fk-dashboard-nav-padding-inline-collapsed, var(--fk-rhythm-2, .5rem))}.fk-dashboard-nav__separator{border-top:1px solid var(--fk-dashboard-nav-separator-color, var(--fk-color-border, #d9e2ee))}\n"], dependencies: [{ kind: "component", type: SidebarNavComponent, selector: "fk-sidebar-nav", inputs: ["model", "collapsed", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2298
2320
|
}
|
|
2299
2321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardNavComponent, decorators: [{
|
|
2300
2322
|
type: Component,
|
|
2301
|
-
args: [{ selector: 'fk-dashboard-nav', standalone: true, imports: [SidebarNavComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (segment of segmentsBeforeSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"
|
|
2323
|
+
args: [{ selector: 'fk-dashboard-nav', standalone: true, imports: [SidebarNavComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (segment of segmentsBeforeSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n}\n\n<!--\n Exactly one outlet for `[navSlotBefore]`, never inside a conditional. With\n no anchored group, or no groups at all, both loops are empty and the slot\n lands at the top \u2014 so a caller with nothing to navigate to still gets its\n switcher, which is the one way back to somewhere it can use.\n-->\n<ng-content select=\"[navSlotBefore]\" />\n\n@for (segment of segmentsAfterSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n @if (segment.after) {\n <ng-content />\n }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fk-dashboard-nav-gap, var(--fk-rhythm-6, 1.5rem));padding:var(--fk-dashboard-nav-padding, var(--fk-rhythm-4, 1rem))}:host(.fk-dashboard-nav--collapsed){padding-inline:var(--fk-dashboard-nav-padding-inline-collapsed, var(--fk-rhythm-2, .5rem))}.fk-dashboard-nav__separator{border-top:1px solid var(--fk-dashboard-nav-separator-color, var(--fk-color-border, #d9e2ee))}\n"] }]
|
|
2302
2324
|
}], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], slotBeforeGroupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotBeforeGroupId", required: false }] }], slotAfterGroupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotAfterGroupId", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
|
|
2303
2325
|
type: HostBinding,
|
|
2304
2326
|
args: ['class']
|
|
2305
2327
|
}], hostId: [{
|
|
2306
2328
|
type: HostBinding,
|
|
2307
2329
|
args: ['attr.id']
|
|
2330
|
+
}], hostRole: [{
|
|
2331
|
+
type: HostBinding,
|
|
2332
|
+
args: ['attr.role']
|
|
2308
2333
|
}], hostAriaLabel: [{
|
|
2309
2334
|
type: HostBinding,
|
|
2310
2335
|
args: ['attr.aria-label']
|
|
@@ -2426,9 +2451,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2426
2451
|
args: ['attr.id']
|
|
2427
2452
|
}] } });
|
|
2428
2453
|
|
|
2454
|
+
/**
|
|
2455
|
+
* A whole dashboard shell in one element: the collapsing aside and its
|
|
2456
|
+
* toggle, the brand block at its head, the icon-rail navigation, and the
|
|
2457
|
+
* banner, topbar, panel and footer slots a product hangs its own content
|
|
2458
|
+
* off.
|
|
2459
|
+
*
|
|
2460
|
+
* `fk-dashboard-layout` and `fk-dashboard-nav` remain the pieces to reach
|
|
2461
|
+
* for when a product wants a different arrangement. This is the arrangement
|
|
2462
|
+
* most products want, assembled once: every consumer that builds it by hand
|
|
2463
|
+
* repeats the same half-dozen bindings, and the ones that matter fail
|
|
2464
|
+
* quietly when forgotten rather than loudly.
|
|
2465
|
+
*
|
|
2466
|
+
* Everything a product supplies is projected on through, so nothing is
|
|
2467
|
+
* given up by using it: banners, a trailing panel, a second nav column
|
|
2468
|
+
* beside the page, switchers pinned into the rail.
|
|
2469
|
+
*
|
|
2470
|
+
* @example
|
|
2471
|
+
* ```html
|
|
2472
|
+
* <fk-dashboard-chrome
|
|
2473
|
+
* #chrome
|
|
2474
|
+
* brandText="Acme"
|
|
2475
|
+
* brandDescription="Admin"
|
|
2476
|
+
* brandHref="/"
|
|
2477
|
+
* [navGroups]="nav()"
|
|
2478
|
+
* >
|
|
2479
|
+
* <fk-icon-badge chromeBrandMark name="acme-mark" shape="rounded" size="sm" />
|
|
2480
|
+
* <nav chromeTopbarStart>…</nav>
|
|
2481
|
+
* <fk-user-menu chromeTopbarEnd … />
|
|
2482
|
+
* <router-outlet />
|
|
2483
|
+
* </fk-dashboard-chrome>
|
|
2484
|
+
* ```
|
|
2485
|
+
*/
|
|
2486
|
+
class DashboardChromeComponent {
|
|
2487
|
+
// ===== BRAND =====
|
|
2488
|
+
/** Product name beside the mark. */
|
|
2489
|
+
brandText = input('', ...(ngDevMode ? [{ debugName: "brandText" }] : /* istanbul ignore next */ []));
|
|
2490
|
+
/** The line under it — which product this is. */
|
|
2491
|
+
brandDescription = input('', ...(ngDevMode ? [{ debugName: "brandDescription" }] : /* istanbul ignore next */ []));
|
|
2492
|
+
/** Where the brand block navigates. */
|
|
2493
|
+
brandHref = input('/', ...(ngDevMode ? [{ debugName: "brandHref" }] : /* istanbul ignore next */ []));
|
|
2494
|
+
// ===== NAVIGATION =====
|
|
2495
|
+
/** Ordered nav groups, already filtered to what this reader may open. */
|
|
2496
|
+
navGroups = input([], ...(ngDevMode ? [{ debugName: "navGroups" }] : /* istanbul ignore next */ []));
|
|
2497
|
+
/** Group id the `[chromeNavBefore]` content is placed in front of. */
|
|
2498
|
+
navSlotBeforeGroupId = input(null, ...(ngDevMode ? [{ debugName: "navSlotBeforeGroupId" }] : /* istanbul ignore next */ []));
|
|
2499
|
+
/** Group id the `[chromeNavAfter]` content follows. */
|
|
2500
|
+
navSlotAfterGroupId = input(null, ...(ngDevMode ? [{ debugName: "navSlotAfterGroupId" }] : /* istanbul ignore next */ []));
|
|
2501
|
+
// ===== LAYOUT =====
|
|
2502
|
+
/** Aside behaviour. `icon` leaves a rail behind when collapsed. */
|
|
2503
|
+
mode = input('icon', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
2504
|
+
/** Trailing-panel behaviour, for a product that projects `[chromeEnd]`. */
|
|
2505
|
+
endMode = input('over', ...(ngDevMode ? [{ debugName: "endMode" }] : /* istanbul ignore next */ []));
|
|
2506
|
+
/** Covers the content column while a routed page resolves. */
|
|
2507
|
+
pageLoading = input(false, ...(ngDevMode ? [{ debugName: "pageLoading" }] : /* istanbul ignore next */ []));
|
|
2508
|
+
toggleAriaLabel = input('', ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
|
|
2509
|
+
menuAriaLabel = input('', ...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
|
|
2510
|
+
// ===== BASE PROPS =====
|
|
2511
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
2512
|
+
// Optional rather than required: content a product projects reads the
|
|
2513
|
+
// rail state before the view has resolved, and a required query throws
|
|
2514
|
+
// when read that early.
|
|
2515
|
+
layout = viewChild(DashboardLayoutComponent, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
2516
|
+
/**
|
|
2517
|
+
* Whether the aside is collapsed to its rail. For projected content that
|
|
2518
|
+
* has to follow it — a switcher pinned into the nav shrinks to its glyph
|
|
2519
|
+
* the same way the rows do.
|
|
2520
|
+
*/
|
|
2521
|
+
collapsed() {
|
|
2522
|
+
return this.layout()?.collapsed() ?? false;
|
|
2523
|
+
}
|
|
2524
|
+
/** Whether the trailing panel is open. */
|
|
2525
|
+
endOpen() {
|
|
2526
|
+
return this.layout()?.endOpen() ?? false;
|
|
2527
|
+
}
|
|
2528
|
+
/** Collapse the aside to its rail. */
|
|
2529
|
+
closeSidenav() {
|
|
2530
|
+
this.layout()?.closeSidenav();
|
|
2531
|
+
}
|
|
2532
|
+
/** Open the trailing panel. */
|
|
2533
|
+
openEnd() {
|
|
2534
|
+
this.layout()?.openEnd();
|
|
2535
|
+
}
|
|
2536
|
+
/** Close the trailing panel. */
|
|
2537
|
+
closeEnd() {
|
|
2538
|
+
this.layout()?.closeEnd();
|
|
2539
|
+
}
|
|
2540
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2541
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: DashboardChromeComponent, isStandalone: true, selector: "fk-dashboard-chrome", inputs: { brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: false, transformFunction: null }, brandDescription: { classPropertyName: "brandDescription", publicName: "brandDescription", isSignal: true, isRequired: false, transformFunction: null }, brandHref: { classPropertyName: "brandHref", publicName: "brandHref", isSignal: true, isRequired: false, transformFunction: null }, navGroups: { classPropertyName: "navGroups", publicName: "navGroups", isSignal: true, isRequired: false, transformFunction: null }, navSlotBeforeGroupId: { classPropertyName: "navSlotBeforeGroupId", publicName: "navSlotBeforeGroupId", isSignal: true, isRequired: false, transformFunction: null }, navSlotAfterGroupId: { classPropertyName: "navSlotAfterGroupId", publicName: "navSlotAfterGroupId", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, endMode: { classPropertyName: "endMode", publicName: "endMode", isSignal: true, isRequired: false, transformFunction: null }, pageLoading: { classPropertyName: "pageLoading", publicName: "pageLoading", isSignal: true, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "layout", first: true, predicate: DashboardLayoutComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<fk-dashboard-layout\n [mode]=\"mode()\"\n [endMode]=\"endMode()\"\n [pageLoading]=\"pageLoading()\"\n [toggleAriaLabel]=\"toggleAriaLabel()\"\n [menuAriaLabel]=\"menuAriaLabel()\"\n [className]=\"className()\"\n>\n <ng-content select=\"[chromeBanner]\" ngProjectAs=\"[layoutBanner]\" />\n\n <fk-nav-brand\n layoutBrand\n [brandText]=\"brandText()\"\n [description]=\"brandDescription()\"\n [href]=\"brandHref()\"\n >\n <ng-content select=\"[chromeBrandMark]\" ngProjectAs=\"[navLogo]\" />\n </fk-nav-brand>\n\n <!--\n The layout draws its own hamburger without these, which would not match\n a product's icon set. Supplied here so no consumer has to know that.\n -->\n <fk-icon layoutToggleIcon name=\"menu-outline\" size=\"18px\" />\n <fk-icon layoutMenuIcon name=\"menu-outline\" />\n\n <!--\n No `collapsed` binding: the nav reads the rail state from this layout,\n which is the ancestor shell it looks for.\n -->\n <fk-dashboard-nav\n layoutAside\n [groups]=\"navGroups()\"\n [slotBeforeGroupId]=\"navSlotBeforeGroupId()\"\n [slotAfterGroupId]=\"navSlotAfterGroupId()\"\n >\n <ng-content select=\"[chromeNavBefore]\" ngProjectAs=\"[navSlotBefore]\" />\n <ng-content select=\"[chromeNavAfter]\" />\n </fk-dashboard-nav>\n\n <ng-content select=\"[chromeTopbarStart]\" ngProjectAs=\"[layoutTopbarStart]\" />\n <ng-content select=\"[chromeTopbarEnd]\" ngProjectAs=\"[layoutTopbarEnd]\" />\n\n <!-- The routed page, and anything else in the content column. -->\n <ng-content />\n\n <ng-content\n select=\"[chromeContentPanel]\"\n ngProjectAs=\"[layoutContentPanel]\"\n />\n <ng-content select=\"[chromeEnd]\" ngProjectAs=\"[layoutEnd]\" />\n <ng-content select=\"[chromeFooter]\" ngProjectAs=\"[layoutFooter]\" />\n</fk-dashboard-layout>\n", dependencies: [{ kind: "component", type: DashboardLayoutComponent, selector: "fk-dashboard-layout", inputs: ["mode", "sidenavWidth", "collapsedWidth", "endMode", "endWidth", "endCollapsedWidth", "pageLoading", "toggleAriaLabel", "menuAriaLabel", "className", "id"] }, { kind: "component", type: DashboardNavComponent, selector: "fk-dashboard-nav", inputs: ["groups", "collapsed", "slotBeforeGroupId", "slotAfterGroupId", "className", "id", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "component", type: NavBrandComponent, selector: "fk-nav-brand", inputs: ["brandText", "href", "description", "id", "className", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2542
|
+
}
|
|
2543
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardChromeComponent, decorators: [{
|
|
2544
|
+
type: Component,
|
|
2545
|
+
args: [{ selector: 'fk-dashboard-chrome', standalone: true, imports: [
|
|
2546
|
+
DashboardLayoutComponent,
|
|
2547
|
+
DashboardNavComponent,
|
|
2548
|
+
IconComponent,
|
|
2549
|
+
NavBrandComponent,
|
|
2550
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fk-dashboard-layout\n [mode]=\"mode()\"\n [endMode]=\"endMode()\"\n [pageLoading]=\"pageLoading()\"\n [toggleAriaLabel]=\"toggleAriaLabel()\"\n [menuAriaLabel]=\"menuAriaLabel()\"\n [className]=\"className()\"\n>\n <ng-content select=\"[chromeBanner]\" ngProjectAs=\"[layoutBanner]\" />\n\n <fk-nav-brand\n layoutBrand\n [brandText]=\"brandText()\"\n [description]=\"brandDescription()\"\n [href]=\"brandHref()\"\n >\n <ng-content select=\"[chromeBrandMark]\" ngProjectAs=\"[navLogo]\" />\n </fk-nav-brand>\n\n <!--\n The layout draws its own hamburger without these, which would not match\n a product's icon set. Supplied here so no consumer has to know that.\n -->\n <fk-icon layoutToggleIcon name=\"menu-outline\" size=\"18px\" />\n <fk-icon layoutMenuIcon name=\"menu-outline\" />\n\n <!--\n No `collapsed` binding: the nav reads the rail state from this layout,\n which is the ancestor shell it looks for.\n -->\n <fk-dashboard-nav\n layoutAside\n [groups]=\"navGroups()\"\n [slotBeforeGroupId]=\"navSlotBeforeGroupId()\"\n [slotAfterGroupId]=\"navSlotAfterGroupId()\"\n >\n <ng-content select=\"[chromeNavBefore]\" ngProjectAs=\"[navSlotBefore]\" />\n <ng-content select=\"[chromeNavAfter]\" />\n </fk-dashboard-nav>\n\n <ng-content select=\"[chromeTopbarStart]\" ngProjectAs=\"[layoutTopbarStart]\" />\n <ng-content select=\"[chromeTopbarEnd]\" ngProjectAs=\"[layoutTopbarEnd]\" />\n\n <!-- The routed page, and anything else in the content column. -->\n <ng-content />\n\n <ng-content\n select=\"[chromeContentPanel]\"\n ngProjectAs=\"[layoutContentPanel]\"\n />\n <ng-content select=\"[chromeEnd]\" ngProjectAs=\"[layoutEnd]\" />\n <ng-content select=\"[chromeFooter]\" ngProjectAs=\"[layoutFooter]\" />\n</fk-dashboard-layout>\n" }]
|
|
2551
|
+
}], propDecorators: { brandText: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandText", required: false }] }], brandDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandDescription", required: false }] }], brandHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandHref", required: false }] }], navGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "navGroups", required: false }] }], navSlotBeforeGroupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSlotBeforeGroupId", required: false }] }], navSlotAfterGroupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSlotAfterGroupId", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], endMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "endMode", required: false }] }], pageLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLoading", required: false }] }], toggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAriaLabel", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], layout: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DashboardLayoutComponent), { isSignal: true }] }] } });
|
|
2552
|
+
|
|
2429
2553
|
/**
|
|
2430
2554
|
* Generated bundle index. Do not edit.
|
|
2431
2555
|
*/
|
|
2432
2556
|
|
|
2433
|
-
export { BackNavComponent, ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentDetailHeaderComponent, ContentDetailPageComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, ContextSwitcherComponent, DashboardLayoutComponent, DashboardNavComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, InlineLoaderComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
|
|
2557
|
+
export { BackNavComponent, ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentDetailHeaderComponent, ContentDetailPageComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, ContextSwitcherComponent, DashboardChromeComponent, DashboardLayoutComponent, DashboardNavComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, InlineLoaderComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
|
|
2434
2558
|
//# sourceMappingURL=frame-kit-ui-ng-patterns-dashboard.mjs.map
|