@frame-kit/ui-ng-patterns 0.2.16 → 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)
|
|
@@ -2302,11 +2316,11 @@ class DashboardNavComponent {
|
|
|
2302
2316
|
return this.ariaLabel();
|
|
2303
2317
|
}
|
|
2304
2318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2305
|
-
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]=\"
|
|
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 });
|
|
2306
2320
|
}
|
|
2307
2321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardNavComponent, decorators: [{
|
|
2308
2322
|
type: Component,
|
|
2309
|
-
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"] }]
|
|
2310
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: [{
|
|
2311
2325
|
type: HostBinding,
|
|
2312
2326
|
args: ['class']
|
|
@@ -2437,9 +2451,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2437
2451
|
args: ['attr.id']
|
|
2438
2452
|
}] } });
|
|
2439
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
|
+
|
|
2440
2553
|
/**
|
|
2441
2554
|
* Generated bundle index. Do not edit.
|
|
2442
2555
|
*/
|
|
2443
2556
|
|
|
2444
|
-
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 };
|
|
2445
2558
|
//# sourceMappingURL=frame-kit-ui-ng-patterns-dashboard.mjs.map
|