@frame-kit/ui-ng-patterns 0.1.7 → 0.1.9
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input,
|
|
2
|
+
import { input, computed, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, Injector, viewChild, contentChild, signal, effect, afterNextRender, output, ElementRef, linkedSignal } from '@angular/core';
|
|
3
3
|
import { HeadlineComponent } from '@frame-kit/ui-ng/core/headline';
|
|
4
4
|
import { TextComponent } from '@frame-kit/ui-ng/core/text';
|
|
5
5
|
import { IconComponent } from '@frame-kit/ui-ng/core/icon';
|
|
@@ -49,16 +49,35 @@ import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
|
49
49
|
* </fk-page-header>
|
|
50
50
|
*/
|
|
51
51
|
class PageHeaderComponent {
|
|
52
|
+
// ===== INPUTS =====
|
|
52
53
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
53
54
|
description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
54
55
|
headingLevel = input(1, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
56
|
+
// ===== BASE PROPS =====
|
|
57
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
58
|
+
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
59
|
+
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
60
|
+
// ===== COMPUTED =====
|
|
61
|
+
classes = computed(() => ['fk-page-header', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
62
|
+
get hostClass() {
|
|
63
|
+
return this.classes();
|
|
64
|
+
}
|
|
65
|
+
get hostId() {
|
|
66
|
+
return this.id();
|
|
67
|
+
}
|
|
55
68
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
56
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PageHeaderComponent, isStandalone: true, selector: "fk-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"fk-page-
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PageHeaderComponent, isStandalone: true, selector: "fk-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", 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" } }, ngImport: i0, template: "<header class=\"fk-page-header__bar\" [attr.aria-label]=\"ariaLabel()\">\n <div class=\"fk-page-header__text\">\n <div class=\"fk-page-header__title-row\">\n <ng-content select=\"[pageHeaderLeading]\" />\n\n <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n <ng-content select=\"[pageHeaderTrailing]\" />\n </div>\n\n @if (description()) {\n <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n description()\n }}</fk-text>\n }\n </div>\n\n <div class=\"fk-page-header__actions\">\n <ng-content select=\"[pageHeaderActions]\" />\n </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header__bar{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header__bar{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"], dependencies: [{ kind: "component", type: HeadlineComponent, selector: "fk-headline", inputs: ["ariaLabel", "className", "fontSize", "id", "level", "variant", "visuallyHidden"] }, { kind: "component", type: TextComponent, selector: "fk-text", inputs: ["as", "variant", "tone", "align", "weight", "truncate", "maxLines", "gutterBottom", "italic", "visuallyHidden", "className", "id", "ariaLabel", "ariaDescribedBy", "role", "htmlFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
57
70
|
}
|
|
58
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
59
72
|
type: Component,
|
|
60
|
-
args: [{ selector: 'fk-page-header', standalone: true, imports: [HeadlineComponent, TextComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fk-page-
|
|
61
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } }
|
|
73
|
+
args: [{ selector: 'fk-page-header', standalone: true, imports: [HeadlineComponent, TextComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fk-page-header__bar\" [attr.aria-label]=\"ariaLabel()\">\n <div class=\"fk-page-header__text\">\n <div class=\"fk-page-header__title-row\">\n <ng-content select=\"[pageHeaderLeading]\" />\n\n <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n <ng-content select=\"[pageHeaderTrailing]\" />\n </div>\n\n @if (description()) {\n <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n description()\n }}</fk-text>\n }\n </div>\n\n <div class=\"fk-page-header__actions\">\n <ng-content select=\"[pageHeaderActions]\" />\n </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header__bar{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header__bar{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"] }]
|
|
74
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", 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: [{
|
|
75
|
+
type: HostBinding,
|
|
76
|
+
args: ['class']
|
|
77
|
+
}], hostId: [{
|
|
78
|
+
type: HostBinding,
|
|
79
|
+
args: ['attr.id']
|
|
80
|
+
}] } });
|
|
62
81
|
|
|
63
82
|
/**
|
|
64
83
|
* Empty-state panel for dashboard tables and lists: a centered icon, a title,
|
|
@@ -127,18 +146,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
127
146
|
* A standalone layout primitive for custom dashboard rows.
|
|
128
147
|
*/
|
|
129
148
|
class ContentSplitLayoutComponent {
|
|
149
|
+
// ===== INPUTS =====
|
|
130
150
|
endWidth = input(null, ...(ngDevMode ? [{ debugName: "endWidth" }] : /* istanbul ignore next */ []));
|
|
131
151
|
gap = input('var(--fk-rhythm-4, 1rem)', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
132
|
-
|
|
152
|
+
// ===== BASE PROPS =====
|
|
153
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
154
|
+
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
155
|
+
// ===== COMPUTED =====
|
|
156
|
+
classes = computed(() => ['fk-content-split-layout', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
157
|
+
get hostClass() {
|
|
158
|
+
return this.classes();
|
|
159
|
+
}
|
|
160
|
+
get hostId() {
|
|
161
|
+
return this.id();
|
|
162
|
+
}
|
|
133
163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentSplitLayoutComponent, isStandalone: true, selector: "fk-content-split-layout", inputs: { endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div\n class=\"fk-content-split-layout__row\"\n [style.--fk-content-split-gap]=\"gap()\"\n>\n <div class=\"fk-content-split-layout__start\">\n <ng-content select=\"[start]\" />\n </div>\n\n <div\n class=\"fk-content-split-layout__end\"\n [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n [style.--fk-content-split-end-width]=\"endWidth()\"\n >\n <ng-content select=\"[end]\" />\n </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentSplitLayoutComponent, isStandalone: true, selector: "fk-content-split-layout", inputs: { endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", 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 } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<div\n class=\"fk-content-split-layout__row\"\n [style.--fk-content-split-gap]=\"gap()\"\n>\n <div class=\"fk-content-split-layout__start\">\n <ng-content select=\"[start]\" />\n </div>\n\n <div\n class=\"fk-content-split-layout__end\"\n [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n [style.--fk-content-split-end-width]=\"endWidth()\"\n >\n <ng-content select=\"[end]\" />\n </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
135
165
|
}
|
|
136
166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, decorators: [{
|
|
137
167
|
type: Component,
|
|
138
168
|
args: [{ selector: 'fk-content-split-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fk-content-split-layout__row\"\n [style.--fk-content-split-gap]=\"gap()\"\n>\n <div class=\"fk-content-split-layout__start\">\n <ng-content select=\"[start]\" />\n </div>\n\n <div\n class=\"fk-content-split-layout__end\"\n [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n [style.--fk-content-split-end-width]=\"endWidth()\"\n >\n <ng-content select=\"[end]\" />\n </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"] }]
|
|
139
|
-
}], propDecorators: { endWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], hostClass: [{
|
|
169
|
+
}], propDecorators: { endWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
|
|
140
170
|
type: HostBinding,
|
|
141
171
|
args: ['class']
|
|
172
|
+
}], hostId: [{
|
|
173
|
+
type: HostBinding,
|
|
174
|
+
args: ['attr.id']
|
|
142
175
|
}] } });
|
|
143
176
|
|
|
144
177
|
/**
|
|
@@ -944,9 +977,9 @@ const VIEWPORT_MARGIN = 24;
|
|
|
944
977
|
* live in the widget and persist to `localStorage` under `storageKey` — these
|
|
945
978
|
* are UI preferences, not part of the model.
|
|
946
979
|
*
|
|
947
|
-
* **
|
|
948
|
-
*
|
|
949
|
-
*
|
|
980
|
+
* **Opinionated but themeable.** It ships a house look out of the box; all
|
|
981
|
+
* colour flows through `--fk-onboarding-guide-*` tokens, so overriding those
|
|
982
|
+
* (e.g. pointing them at a brand scale) retints it without touching the markup.
|
|
950
983
|
*
|
|
951
984
|
* ```html
|
|
952
985
|
* <fk-onboarding-guide
|
|
@@ -1209,9 +1242,310 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1209
1242
|
args: ['attr.id']
|
|
1210
1243
|
}] } });
|
|
1211
1244
|
|
|
1245
|
+
/**
|
|
1246
|
+
* Layout for a dashboard search/filter bar. It lays out a primary search field
|
|
1247
|
+
* and fixed-width filter dropdowns in a responsive row and compacts the
|
|
1248
|
+
* projected `fk-form-field` / `fk-input` / `fk-select` controls to the house
|
|
1249
|
+
* filter-bar size — so every dashboard's filter bar reads the same without
|
|
1250
|
+
* per-page CSS.
|
|
1251
|
+
*
|
|
1252
|
+
* It owns **layout and responsiveness only** — no surrounding border,
|
|
1253
|
+
* background, or elevation. If you want the bar to sit inside a card, wrap it in
|
|
1254
|
+
* your own surface.
|
|
1255
|
+
*
|
|
1256
|
+
* Tag the primary search field with the `search` attribute (grows to fill) and
|
|
1257
|
+
* each fixed-width filter with the `filter` attribute. Under a narrow container
|
|
1258
|
+
* the row stacks and every control goes full-width.
|
|
1259
|
+
*
|
|
1260
|
+
* ```html
|
|
1261
|
+
* <fk-search-bar-layout>
|
|
1262
|
+
* <fk-form-field search>
|
|
1263
|
+
* <fk-icon fkPrefix name="magnifier-outline" size="sm" />
|
|
1264
|
+
* <fk-input formControlName="q" placeholder="Search…" />
|
|
1265
|
+
* </fk-form-field>
|
|
1266
|
+
*
|
|
1267
|
+
* <fk-form-field filter>
|
|
1268
|
+
* <fk-select formControlName="status" [options]="options" />
|
|
1269
|
+
* </fk-form-field>
|
|
1270
|
+
* </fk-search-bar-layout>
|
|
1271
|
+
* ```
|
|
1272
|
+
*
|
|
1273
|
+
* Uses `ViewEncapsulation.None` so it can style the projected controls (the
|
|
1274
|
+
* `[search]` / `[filter]` children and the select chevron); its rules are scoped
|
|
1275
|
+
* under the block class.
|
|
1276
|
+
*/
|
|
1277
|
+
class SearchBarLayoutComponent {
|
|
1278
|
+
// ===== BASE PROPS =====
|
|
1279
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1280
|
+
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1281
|
+
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1282
|
+
// ===== COMPUTED =====
|
|
1283
|
+
classes = computed(() => ['fk-search-bar-layout', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1284
|
+
get hostClass() {
|
|
1285
|
+
return this.classes();
|
|
1286
|
+
}
|
|
1287
|
+
role = 'search';
|
|
1288
|
+
get hostId() {
|
|
1289
|
+
return this.id();
|
|
1290
|
+
}
|
|
1291
|
+
get hostAriaLabel() {
|
|
1292
|
+
return this.ariaLabel();
|
|
1293
|
+
}
|
|
1294
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchBarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1295
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SearchBarLayoutComponent, isStandalone: true, selector: "fk-search-bar-layout", inputs: { 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.role": "this.role", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<div class=\"fk-search-bar-layout__row\">\n <ng-content />\n</div>\n", styles: [".fk-search-bar-layout{display:block;container-type:inline-size}.fk-search-bar-layout__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fk-search-bar-layout-gap);--fk-form-label-gap: 0;--fk-form-label-margin-top: 0;--fk-form-subscript-gap: 0;--fk-form-subscript-display: none;--fk-form-subscript-min-height: 0;--fk-form-field-gap: 0;--fk-input-padding: var(--fk-search-bar-layout-control-padding);--fk-input-font-size: var(--fk-search-bar-layout-control-font-size);--fk-input-border-radius: var(--fk-search-bar-layout-control-radius);--fk-select-arrow-color: var(--fk-search-bar-layout-chevron-color)}@container (max-width: 500px){.fk-search-bar-layout__row{flex-direction:column;align-items:stretch}}.fk-search-bar-layout__row>[search]{flex:1;min-width:0;--fk-input-bg: var(--fk-search-bar-layout-search-bg)}.fk-search-bar-layout__row>[filter]{flex:0 0 auto;min-width:var(--fk-search-bar-layout-filter-min-width);--fk-input-font-weight: var(--fk-search-bar-layout-filter-font-weight)}@container (max-width: 500px){.fk-search-bar-layout__row>[search],.fk-search-bar-layout__row>[filter]{flex:none;width:100%}}.fk-search-bar-layout__row .fk-select__arrow{stroke-width:var(--fk-search-bar-layout-chevron-stroke)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1296
|
+
}
|
|
1297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchBarLayoutComponent, decorators: [{
|
|
1298
|
+
type: Component,
|
|
1299
|
+
args: [{ selector: 'fk-search-bar-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fk-search-bar-layout__row\">\n <ng-content />\n</div>\n", styles: [".fk-search-bar-layout{display:block;container-type:inline-size}.fk-search-bar-layout__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fk-search-bar-layout-gap);--fk-form-label-gap: 0;--fk-form-label-margin-top: 0;--fk-form-subscript-gap: 0;--fk-form-subscript-display: none;--fk-form-subscript-min-height: 0;--fk-form-field-gap: 0;--fk-input-padding: var(--fk-search-bar-layout-control-padding);--fk-input-font-size: var(--fk-search-bar-layout-control-font-size);--fk-input-border-radius: var(--fk-search-bar-layout-control-radius);--fk-select-arrow-color: var(--fk-search-bar-layout-chevron-color)}@container (max-width: 500px){.fk-search-bar-layout__row{flex-direction:column;align-items:stretch}}.fk-search-bar-layout__row>[search]{flex:1;min-width:0;--fk-input-bg: var(--fk-search-bar-layout-search-bg)}.fk-search-bar-layout__row>[filter]{flex:0 0 auto;min-width:var(--fk-search-bar-layout-filter-min-width);--fk-input-font-weight: var(--fk-search-bar-layout-filter-font-weight)}@container (max-width: 500px){.fk-search-bar-layout__row>[search],.fk-search-bar-layout__row>[filter]{flex:none;width:100%}}.fk-search-bar-layout__row .fk-select__arrow{stroke-width:var(--fk-search-bar-layout-chevron-stroke)}\n"] }]
|
|
1300
|
+
}], propDecorators: { 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: [{
|
|
1301
|
+
type: HostBinding,
|
|
1302
|
+
args: ['class']
|
|
1303
|
+
}], role: [{
|
|
1304
|
+
type: HostBinding,
|
|
1305
|
+
args: ['attr.role']
|
|
1306
|
+
}], hostId: [{
|
|
1307
|
+
type: HostBinding,
|
|
1308
|
+
args: ['attr.id']
|
|
1309
|
+
}], hostAriaLabel: [{
|
|
1310
|
+
type: HostBinding,
|
|
1311
|
+
args: ['attr.aria-label']
|
|
1312
|
+
}] } });
|
|
1313
|
+
|
|
1314
|
+
/**
|
|
1315
|
+
* A titled content section for a dashboard page: an optional heading followed by
|
|
1316
|
+
* projected content, with consistent vertical rhythm between the section and its
|
|
1317
|
+
* own children.
|
|
1318
|
+
*
|
|
1319
|
+
* Spacing is top-margin only (never a parent `gap`), so a consumer's per-child
|
|
1320
|
+
* `margin-top` overrides cleanly instead of stacking on an invisible gap. The
|
|
1321
|
+
* first child sits flush; each subsequent child gets the section rhythm.
|
|
1322
|
+
* `marginTop` overrides the section's own top margin per instance.
|
|
1323
|
+
*
|
|
1324
|
+
* ```html
|
|
1325
|
+
* <fk-content-page-section title="Members" [level]="3">
|
|
1326
|
+
* <p>…</p>
|
|
1327
|
+
* <fk-data-table />
|
|
1328
|
+
* </fk-content-page-section>
|
|
1329
|
+
* ```
|
|
1330
|
+
*
|
|
1331
|
+
* Uses `ViewEncapsulation.None` so the inter-child rhythm rule reaches projected
|
|
1332
|
+
* content; its rules are scoped under the block class.
|
|
1333
|
+
*/
|
|
1334
|
+
class ContentPageSectionComponent {
|
|
1335
|
+
// ===== INPUTS =====
|
|
1336
|
+
title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1337
|
+
level = input(5, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
|
|
1338
|
+
marginTop = input(null, ...(ngDevMode ? [{ debugName: "marginTop" }] : /* istanbul ignore next */ []));
|
|
1339
|
+
// ===== BASE PROPS =====
|
|
1340
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1341
|
+
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1342
|
+
// ===== COMPUTED =====
|
|
1343
|
+
classes = computed(() => ['fk-content-page-section', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1344
|
+
get hostClass() {
|
|
1345
|
+
return this.classes();
|
|
1346
|
+
}
|
|
1347
|
+
get hostId() {
|
|
1348
|
+
return this.id();
|
|
1349
|
+
}
|
|
1350
|
+
get hostMarginTop() {
|
|
1351
|
+
return this.marginTop();
|
|
1352
|
+
}
|
|
1353
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1354
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ContentPageSectionComponent, isStandalone: true, selector: "fk-content-page-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", 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 } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "style.margin-top": "this.hostMarginTop" } }, ngImport: i0, template: "@if (title()) {\n <fk-headline [level]=\"level()\">{{ title() }}</fk-headline>\n}\n\n<ng-content />\n", styles: [".fk-content-page-section{display:flex;flex-direction:column;margin-top:var(--fk-content-page-section-margin-top);--fk-headline-margin-block-start: 0}.fk-content-page-section>*+*{margin-top:var(--fk-content-page-section-gap)}\n"], dependencies: [{ kind: "component", type: HeadlineComponent, selector: "fk-headline", inputs: ["ariaLabel", "className", "fontSize", "id", "level", "variant", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1355
|
+
}
|
|
1356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentPageSectionComponent, decorators: [{
|
|
1357
|
+
type: Component,
|
|
1358
|
+
args: [{ selector: 'fk-content-page-section', standalone: true, imports: [HeadlineComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (title()) {\n <fk-headline [level]=\"level()\">{{ title() }}</fk-headline>\n}\n\n<ng-content />\n", styles: [".fk-content-page-section{display:flex;flex-direction:column;margin-top:var(--fk-content-page-section-margin-top);--fk-headline-margin-block-start: 0}.fk-content-page-section>*+*{margin-top:var(--fk-content-page-section-gap)}\n"] }]
|
|
1359
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], marginTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "marginTop", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
|
|
1360
|
+
type: HostBinding,
|
|
1361
|
+
args: ['class']
|
|
1362
|
+
}], hostId: [{
|
|
1363
|
+
type: HostBinding,
|
|
1364
|
+
args: ['attr.id']
|
|
1365
|
+
}], hostMarginTop: [{
|
|
1366
|
+
type: HostBinding,
|
|
1367
|
+
args: ['style.margin-top']
|
|
1368
|
+
}] } });
|
|
1369
|
+
|
|
1370
|
+
/**
|
|
1371
|
+
* Lays its `fk-content-column` children out **side by side**, wrapping and
|
|
1372
|
+
* ultimately stacking to a single column based on the row's *own* available
|
|
1373
|
+
* width — never the viewport (so it reacts when a sidenav opens or it sits in a
|
|
1374
|
+
* narrow panel). Same intrinsic CSS grid as `fk-columns`
|
|
1375
|
+
* (`repeat(auto-fit, minmax(min, 1fr))`); `minColumnWidth` is the single knob
|
|
1376
|
+
* for when columns stack.
|
|
1377
|
+
*
|
|
1378
|
+
* Optionally **bordered**, with an optional **headline**
|
|
1379
|
+
* (`fk-content-column-headline`) that sits *outside* the border — so the row
|
|
1380
|
+
* reads as a titled section wrapping a set of columns.
|
|
1381
|
+
*
|
|
1382
|
+
* ```html
|
|
1383
|
+
* <fk-content-row [bordered]="true" minColumnWidth="16rem">
|
|
1384
|
+
* <fk-content-column-headline>Providers</fk-content-column-headline>
|
|
1385
|
+
* <fk-content-column>…</fk-content-column>
|
|
1386
|
+
* <fk-content-column>…</fk-content-column>
|
|
1387
|
+
* </fk-content-row>
|
|
1388
|
+
* ```
|
|
1389
|
+
*/
|
|
1390
|
+
class ContentRowComponent {
|
|
1391
|
+
// ===== INPUTS =====
|
|
1392
|
+
/**
|
|
1393
|
+
* The smallest width a column may shrink to before the row drops to fewer
|
|
1394
|
+
* columns — the single knob that controls when columns wrap/stack.
|
|
1395
|
+
*/
|
|
1396
|
+
minColumnWidth = input('16rem', ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : /* istanbul ignore next */ []));
|
|
1397
|
+
/**
|
|
1398
|
+
* Optional cap on how wide a column may grow. Unset (default), columns fill
|
|
1399
|
+
* the row (`1fr`); when set, columns stop at this width and leftover space
|
|
1400
|
+
* stays empty (columns aligned to the start).
|
|
1401
|
+
*/
|
|
1402
|
+
maxColumnWidth = input(null, ...(ngDevMode ? [{ debugName: "maxColumnWidth" }] : /* istanbul ignore next */ []));
|
|
1403
|
+
/** Gap between side-by-side columns and between wrapped rows. */
|
|
1404
|
+
gutter = input('var(--fk-rhythm-4, 1rem)', ...(ngDevMode ? [{ debugName: "gutter" }] : /* istanbul ignore next */ []));
|
|
1405
|
+
/** Draws a bordered, padded box around the columns (not the headline). */
|
|
1406
|
+
bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
1407
|
+
// ===== BASE PROPS =====
|
|
1408
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1409
|
+
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1410
|
+
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1411
|
+
// ===== COMPUTED =====
|
|
1412
|
+
classes = computed(() => ['fk-content-row', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1413
|
+
get hostClass() {
|
|
1414
|
+
return this.classes();
|
|
1415
|
+
}
|
|
1416
|
+
get hostId() {
|
|
1417
|
+
return this.id();
|
|
1418
|
+
}
|
|
1419
|
+
get hostAriaLabel() {
|
|
1420
|
+
return this.ariaLabel();
|
|
1421
|
+
}
|
|
1422
|
+
get hostMin() {
|
|
1423
|
+
return this.minColumnWidth();
|
|
1424
|
+
}
|
|
1425
|
+
// Null leaves the property unset, so the SCSS falls back to `1fr` (fill).
|
|
1426
|
+
get hostMax() {
|
|
1427
|
+
return this.maxColumnWidth();
|
|
1428
|
+
}
|
|
1429
|
+
get hostGutter() {
|
|
1430
|
+
return this.gutter();
|
|
1431
|
+
}
|
|
1432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentRowComponent, isStandalone: true, selector: "fk-content-row", inputs: { minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, maxColumnWidth: { classPropertyName: "maxColumnWidth", publicName: "maxColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, gutter: { classPropertyName: "gutter", publicName: "gutter", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", 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", "style.--fk-content-row-min": "this.hostMin", "style.--fk-content-row-max": "this.hostMax", "style.--fk-content-row-gutter": "this.hostGutter" } }, ngImport: i0, template: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n class=\"fk-content-row__grid\"\n [class.fk-content-row__grid--bordered]=\"bordered()\"\n>\n <ng-content />\n</div>\n", styles: [":host{display:block}.fk-content-row__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--fk-content-row-min, 16rem),100%),var(--fk-content-row-max, 1fr)));gap:var(--fk-content-row-gutter, var(--fk-rhythm-4, 1rem));align-items:stretch;justify-content:start}.fk-content-row__grid:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-row__grid--bordered{padding:var(--fk-content-row-padding);border:1px solid var(--fk-content-row-border-color);border-radius:var(--fk-content-row-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1434
|
+
}
|
|
1435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentRowComponent, decorators: [{
|
|
1436
|
+
type: Component,
|
|
1437
|
+
args: [{ selector: 'fk-content-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n class=\"fk-content-row__grid\"\n [class.fk-content-row__grid--bordered]=\"bordered()\"\n>\n <ng-content />\n</div>\n", styles: [":host{display:block}.fk-content-row__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--fk-content-row-min, 16rem),100%),var(--fk-content-row-max, 1fr)));gap:var(--fk-content-row-gutter, var(--fk-rhythm-4, 1rem));align-items:stretch;justify-content:start}.fk-content-row__grid:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-row__grid--bordered{padding:var(--fk-content-row-padding);border:1px solid var(--fk-content-row-border-color);border-radius:var(--fk-content-row-radius)}\n"] }]
|
|
1438
|
+
}], propDecorators: { minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], maxColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxColumnWidth", required: false }] }], gutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutter", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", 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: [{
|
|
1439
|
+
type: HostBinding,
|
|
1440
|
+
args: ['class']
|
|
1441
|
+
}], hostId: [{
|
|
1442
|
+
type: HostBinding,
|
|
1443
|
+
args: ['attr.id']
|
|
1444
|
+
}], hostAriaLabel: [{
|
|
1445
|
+
type: HostBinding,
|
|
1446
|
+
args: ['attr.aria-label']
|
|
1447
|
+
}], hostMin: [{
|
|
1448
|
+
type: HostBinding,
|
|
1449
|
+
args: ['style.--fk-content-row-min']
|
|
1450
|
+
}], hostMax: [{
|
|
1451
|
+
type: HostBinding,
|
|
1452
|
+
args: ['style.--fk-content-row-max']
|
|
1453
|
+
}], hostGutter: [{
|
|
1454
|
+
type: HostBinding,
|
|
1455
|
+
args: ['style.--fk-content-row-gutter']
|
|
1456
|
+
}] } });
|
|
1457
|
+
|
|
1458
|
+
/**
|
|
1459
|
+
* A single content column — a vertical block of stacked content, with an
|
|
1460
|
+
* optional **border** and an optional **headline** (`fk-content-column-headline`)
|
|
1461
|
+
* that sits *outside* that border. The semantic unit that goes inside an
|
|
1462
|
+
* `fk-content-row` (which lays columns side by side and stacks them when narrow),
|
|
1463
|
+
* or stands alone as a bordered, titled section.
|
|
1464
|
+
*
|
|
1465
|
+
* ```html
|
|
1466
|
+
* <fk-content-column [bordered]="true">
|
|
1467
|
+
* <fk-content-column-headline>Provider</fk-content-column-headline>
|
|
1468
|
+
* …
|
|
1469
|
+
* </fk-content-column>
|
|
1470
|
+
* ```
|
|
1471
|
+
*/
|
|
1472
|
+
class ContentColumnComponent {
|
|
1473
|
+
// ===== INPUTS =====
|
|
1474
|
+
/** Draws a bordered, padded box around the content (not the headline). */
|
|
1475
|
+
bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
1476
|
+
// ===== BASE PROPS =====
|
|
1477
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1478
|
+
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1479
|
+
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1480
|
+
// ===== COMPUTED =====
|
|
1481
|
+
classes = computed(() => ['fk-content-column', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1482
|
+
get hostClass() {
|
|
1483
|
+
return this.classes();
|
|
1484
|
+
}
|
|
1485
|
+
get hostId() {
|
|
1486
|
+
return this.id();
|
|
1487
|
+
}
|
|
1488
|
+
get hostAriaLabel() {
|
|
1489
|
+
return this.ariaLabel();
|
|
1490
|
+
}
|
|
1491
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentColumnComponent, isStandalone: true, selector: "fk-content-column", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", 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: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n class=\"fk-content-column__content\"\n [class.fk-content-column__content--bordered]=\"bordered()\"\n>\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column}.fk-content-column__content{flex:1;display:flex;flex-direction:column}.fk-content-column__content:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-column__content--bordered{padding:var(--fk-content-column-padding);border:1px solid var(--fk-content-column-border-color);border-radius:var(--fk-content-column-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1493
|
+
}
|
|
1494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnComponent, decorators: [{
|
|
1495
|
+
type: Component,
|
|
1496
|
+
args: [{ selector: 'fk-content-column', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n class=\"fk-content-column__content\"\n [class.fk-content-column__content--bordered]=\"bordered()\"\n>\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column}.fk-content-column__content{flex:1;display:flex;flex-direction:column}.fk-content-column__content:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-column__content--bordered{padding:var(--fk-content-column-padding);border:1px solid var(--fk-content-column-border-color);border-radius:var(--fk-content-column-radius)}\n"] }]
|
|
1497
|
+
}], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", 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: [{
|
|
1498
|
+
type: HostBinding,
|
|
1499
|
+
args: ['class']
|
|
1500
|
+
}], hostId: [{
|
|
1501
|
+
type: HostBinding,
|
|
1502
|
+
args: ['attr.id']
|
|
1503
|
+
}], hostAriaLabel: [{
|
|
1504
|
+
type: HostBinding,
|
|
1505
|
+
args: ['attr.aria-label']
|
|
1506
|
+
}] } });
|
|
1507
|
+
|
|
1508
|
+
/**
|
|
1509
|
+
* Optional headline for `fk-content-column` / `fk-content-row`. Projected
|
|
1510
|
+
* *outside* the bordered region, so it labels the group without being boxed in
|
|
1511
|
+
* with the content. Projects its own text/markup.
|
|
1512
|
+
*
|
|
1513
|
+
* ```html
|
|
1514
|
+
* <fk-content-column [bordered]="true">
|
|
1515
|
+
* <fk-content-column-headline>Provider</fk-content-column-headline>
|
|
1516
|
+
* …
|
|
1517
|
+
* </fk-content-column>
|
|
1518
|
+
* ```
|
|
1519
|
+
*/
|
|
1520
|
+
class ContentColumnHeadlineComponent {
|
|
1521
|
+
// ===== BASE PROPS =====
|
|
1522
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1523
|
+
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1524
|
+
// ===== COMPUTED =====
|
|
1525
|
+
classes = computed(() => ['fk-content-column-headline', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1526
|
+
get hostClass() {
|
|
1527
|
+
return this.classes();
|
|
1528
|
+
}
|
|
1529
|
+
get hostId() {
|
|
1530
|
+
return this.id();
|
|
1531
|
+
}
|
|
1532
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnHeadlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1533
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentColumnHeadlineComponent, isStandalone: true, selector: "fk-content-column-headline", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;color:var(--fk-content-column-headline-color);font-size:var(--fk-content-column-headline-font-size);font-weight:var(--fk-content-column-headline-font-weight)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1534
|
+
}
|
|
1535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnHeadlineComponent, decorators: [{
|
|
1536
|
+
type: Component,
|
|
1537
|
+
args: [{ selector: 'fk-content-column-headline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:block;color:var(--fk-content-column-headline-color);font-size:var(--fk-content-column-headline-font-size);font-weight:var(--fk-content-column-headline-font-weight)}\n"] }]
|
|
1538
|
+
}], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
|
|
1539
|
+
type: HostBinding,
|
|
1540
|
+
args: ['class']
|
|
1541
|
+
}], hostId: [{
|
|
1542
|
+
type: HostBinding,
|
|
1543
|
+
args: ['attr.id']
|
|
1544
|
+
}] } });
|
|
1545
|
+
|
|
1212
1546
|
/**
|
|
1213
1547
|
* Generated bundle index. Do not edit.
|
|
1214
1548
|
*/
|
|
1215
1549
|
|
|
1216
|
-
export { ColumnsComponent, ContentSplitLayoutComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, OnboardingGuideComponent, PageHeaderComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
|
|
1550
|
+
export { ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
|
|
1217
1551
|
//# sourceMappingURL=frame-kit-ui-ng-patterns-dashboard.mjs.map
|