@flyos/design-system 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/flyos-design-system.mjs +136 -128
- package/fesm2022/flyos-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/scss/_ink-baseline.scss +29 -29
- package/scss/_shell-embed-bridge.scss +81 -81
- package/scss/_vos-button-mixins.scss +28 -28
- package/types/flyos-design-system.d.ts +26 -3
- package/types/flyos-design-system.d.ts.map +1 -1
|
@@ -48,7 +48,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
|
48
48
|
// tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
|
|
49
49
|
// Used only for the diagnostic message; the duplicate-instance detection itself is
|
|
50
50
|
// version-agnostic, so a stale literal misnames a fork rather than hiding one.
|
|
51
|
-
const FLY_DS_VERSION = '1.
|
|
51
|
+
const FLY_DS_VERSION = '1.5.0';
|
|
52
52
|
const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
|
|
53
53
|
/**
|
|
54
54
|
* Records this design-system instance on the shared `scope` and returns the
|
|
@@ -1207,9 +1207,14 @@ const flyStandaloneAuthGuard = () => {
|
|
|
1207
1207
|
* token — attaching it would exfiltrate the token to whatever host the app happens to call.
|
|
1208
1208
|
*
|
|
1209
1209
|
* Requests that MUST NOT carry the bearer even same-origin: the STS token endpoint (its own client
|
|
1210
|
-
* auth)
|
|
1211
|
-
* cookie)
|
|
1212
|
-
*
|
|
1210
|
+
* auth), the pre-auth BFF endpoints under `/api/{appId}/auth/` (they authenticate via the HttpOnly
|
|
1211
|
+
* cookie), and any path the app declared in `anonymousPaths` (an `[AllowAnonymous]` surface such as
|
|
1212
|
+
* a public portal). The exclusion runs on the origin-NORMALIZED pathname, so an absolute same-origin
|
|
1213
|
+
* URL to the BFF is excluded exactly like its relative spelling.
|
|
1214
|
+
*
|
|
1215
|
+
* The same exclusion governs the 401 handling: a `401` from an excluded path never starts a login.
|
|
1216
|
+
* That matters most for `anonymousPaths` — without it, a stray 401 on a public surface would bounce
|
|
1217
|
+
* an anonymous visitor into a PKCE login they cannot complete.
|
|
1213
1218
|
*
|
|
1214
1219
|
* Ordering: register this AFTER any offline/sample-data interceptor and BEFORE `stepUpInterceptor`
|
|
1215
1220
|
* (a `401 step_up_required` arrives while the session is valid, so this interceptor passes it through
|
|
@@ -1217,8 +1222,11 @@ const flyStandaloneAuthGuard = () => {
|
|
|
1217
1222
|
*/
|
|
1218
1223
|
function flyStandaloneAuthInterceptor(req, next) {
|
|
1219
1224
|
const auth = inject(FlyStandaloneAuthService);
|
|
1220
|
-
const
|
|
1221
|
-
const
|
|
1225
|
+
const config = inject(FLY_STANDALONE_AUTH_CONFIG);
|
|
1226
|
+
const appId = config.appId;
|
|
1227
|
+
// App-declared anonymous surfaces join the built-in pre-auth paths: no bearer, and no
|
|
1228
|
+
// login redirect on a 401 (see `FlyStandaloneAuthConfig.anonymousPaths`).
|
|
1229
|
+
const authPaths = ['/connect/token', `/api/${appId}/auth/`, ...(config.anonymousPaths ?? [])];
|
|
1222
1230
|
// Normalize BEFORE any decision: resolving against the app's own origin collapses a relative URL
|
|
1223
1231
|
// and its absolute same-origin spelling onto one shape, and exposes a foreign origin for what it is.
|
|
1224
1232
|
let sameOrigin = false;
|
|
@@ -9141,11 +9149,11 @@ class FlyBlockUiComponent {
|
|
|
9141
9149
|
return k && k.length > 0 ? k : 'common.loading';
|
|
9142
9150
|
}, ...(ngDevMode ? [{ debugName: "resolvedMessageKey" }] : /* istanbul ignore next */ []));
|
|
9143
9151
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9144
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\
|
|
9152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\n <div\n class=\"fly-block-ui\"\n role=\"status\"\n aria-live=\"polite\"\n aria-busy=\"true\"\n [attr.aria-label]=\"resolvedMessageKey() | translate\">\n <div class=\"fly-block-ui__card\">\n <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9145
9153
|
}
|
|
9146
9154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBlockUiComponent, decorators: [{
|
|
9147
9155
|
type: Component,
|
|
9148
|
-
args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\
|
|
9156
|
+
args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\n <div\n class=\"fly-block-ui\"\n role=\"status\"\n aria-live=\"polite\"\n aria-busy=\"true\"\n [attr.aria-label]=\"resolvedMessageKey() | translate\">\n <div class=\"fly-block-ui__card\">\n <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
|
|
9149
9157
|
}], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }] } });
|
|
9150
9158
|
|
|
9151
9159
|
/**
|
|
@@ -16721,11 +16729,11 @@ class FlyPeoplePickerComponent {
|
|
|
16721
16729
|
this.selectionChange.emit(this._selected().map((o) => o.id));
|
|
16722
16730
|
}
|
|
16723
16731
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16724
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\
|
|
16732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\n <ul class=\"fly-people-picker__chips\" role=\"list\">\n @for (o of selected(); track o.id) {\n <li class=\"fly-people-picker__chip\" role=\"listitem\">\n <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n @if (o.avatarUrl) {\n <img [src]=\"o.avatarUrl\" alt=\"\" />\n } @else {\n <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n }\n </span>\n <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n <button\n type=\"button\"\n class=\"fly-people-picker__chip-remove\"\n [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n (click)=\"remove(o.id)\">\n \u2715\n </button>\n </li>\n }\n </ul>\n}\n\n@if (showSearch()) {\n <fly-typeahead\n [searchFn]=\"typeaheadSearchFn\"\n [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n [allowFreeText]=\"false\"\n (selected)=\"onPicked($event)\" />\n} @else {\n <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n {{ 'people_picker.change' | translate }}\n </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyTypeaheadComponent, selector: "fly-typeahead", inputs: ["searchFn", "debounceMs", "placeholder", "ariaLabel", "value", "allowFreeText", "openOnFocus"], outputs: ["valueChange", "selected", "cleared"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16725
16733
|
}
|
|
16726
16734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, decorators: [{
|
|
16727
16735
|
type: Component,
|
|
16728
|
-
args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\
|
|
16736
|
+
args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\n <ul class=\"fly-people-picker__chips\" role=\"list\">\n @for (o of selected(); track o.id) {\n <li class=\"fly-people-picker__chip\" role=\"listitem\">\n <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n @if (o.avatarUrl) {\n <img [src]=\"o.avatarUrl\" alt=\"\" />\n } @else {\n <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n }\n </span>\n <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n <button\n type=\"button\"\n class=\"fly-people-picker__chip-remove\"\n [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n (click)=\"remove(o.id)\">\n \u2715\n </button>\n </li>\n }\n </ul>\n}\n\n@if (showSearch()) {\n <fly-typeahead\n [searchFn]=\"typeaheadSearchFn\"\n [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n [allowFreeText]=\"false\"\n (selected)=\"onPicked($event)\" />\n} @else {\n <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n {{ 'people_picker.change' | translate }}\n </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"] }]
|
|
16729
16737
|
}], ctorParameters: () => [], propDecorators: { searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], excludeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeIds", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], typeahead: [{
|
|
16730
16738
|
type: ViewChild,
|
|
16731
16739
|
args: [FlyTypeaheadComponent]
|
|
@@ -18989,30 +18997,30 @@ class FlyDetailCardComponent {
|
|
|
18989
18997
|
/** Drop the body padding — for a child that brings its own list/table chrome. */
|
|
18990
18998
|
flush = input(false, ...(ngDevMode ? [{ debugName: "flush" }] : /* istanbul ignore next */ []));
|
|
18991
18999
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18992
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
18993
|
-
@if (titleKey() || hasProjectedTitle()) {
|
|
18994
|
-
<fly-section-header [titleKey]="titleKey()">
|
|
18995
|
-
<ng-content select="[card-title]" ngProjectAs="[section-title]" />
|
|
18996
|
-
<ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
|
|
18997
|
-
</fly-section-header>
|
|
18998
|
-
}
|
|
18999
|
-
<div class="dc__body" [class.dc__body--flush]="flush()">
|
|
19000
|
-
<ng-content />
|
|
19001
|
-
</div>
|
|
19000
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
19001
|
+
@if (titleKey() || hasProjectedTitle()) {
|
|
19002
|
+
<fly-section-header [titleKey]="titleKey()">
|
|
19003
|
+
<ng-content select="[card-title]" ngProjectAs="[section-title]" />
|
|
19004
|
+
<ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
|
|
19005
|
+
</fly-section-header>
|
|
19006
|
+
}
|
|
19007
|
+
<div class="dc__body" [class.dc__body--flush]="flush()">
|
|
19008
|
+
<ng-content />
|
|
19009
|
+
</div>
|
|
19002
19010
|
`, isInline: true, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"], dependencies: [{ kind: "component", type: FlySectionHeaderComponent, selector: "fly-section-header", inputs: ["titleKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19003
19011
|
}
|
|
19004
19012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, decorators: [{
|
|
19005
19013
|
type: Component,
|
|
19006
|
-
args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
19007
|
-
@if (titleKey() || hasProjectedTitle()) {
|
|
19008
|
-
<fly-section-header [titleKey]="titleKey()">
|
|
19009
|
-
<ng-content select="[card-title]" ngProjectAs="[section-title]" />
|
|
19010
|
-
<ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
|
|
19011
|
-
</fly-section-header>
|
|
19012
|
-
}
|
|
19013
|
-
<div class="dc__body" [class.dc__body--flush]="flush()">
|
|
19014
|
-
<ng-content />
|
|
19015
|
-
</div>
|
|
19014
|
+
args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
19015
|
+
@if (titleKey() || hasProjectedTitle()) {
|
|
19016
|
+
<fly-section-header [titleKey]="titleKey()">
|
|
19017
|
+
<ng-content select="[card-title]" ngProjectAs="[section-title]" />
|
|
19018
|
+
<ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
|
|
19019
|
+
</fly-section-header>
|
|
19020
|
+
}
|
|
19021
|
+
<div class="dc__body" [class.dc__body--flush]="flush()">
|
|
19022
|
+
<ng-content />
|
|
19023
|
+
</div>
|
|
19016
19024
|
`, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"] }]
|
|
19017
19025
|
}], propDecorators: { titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], hasProjectedTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedTitle", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }] } });
|
|
19018
19026
|
|
|
@@ -19140,108 +19148,108 @@ class FlyDetailShellComponent {
|
|
|
19140
19148
|
buttons?.[next]?.focus();
|
|
19141
19149
|
}
|
|
19142
19150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19143
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
19144
|
-
<div class="ds__layout">
|
|
19145
|
-
<aside class="ds__aside">
|
|
19146
|
-
<div class="ds__pinned">
|
|
19147
|
-
<ng-content select="[detail-aside]" />
|
|
19148
|
-
</div>
|
|
19149
|
-
|
|
19150
|
-
@if (sections().length > 0) {
|
|
19151
|
-
<div
|
|
19152
|
-
#rail
|
|
19153
|
-
class="ds__rail"
|
|
19154
|
-
role="tablist"
|
|
19155
|
-
tabindex="-1"
|
|
19156
|
-
[attr.aria-orientation]="'vertical'"
|
|
19157
|
-
[attr.aria-label]="sectionsLabelKey() | translate"
|
|
19158
|
-
(keydown)="onKey($event)"
|
|
19159
|
-
>
|
|
19160
|
-
@for (s of sections(); track s.id) {
|
|
19161
|
-
<button
|
|
19162
|
-
type="button"
|
|
19163
|
-
class="ds__tab"
|
|
19164
|
-
role="tab"
|
|
19165
|
-
[id]="tabId(s.id)"
|
|
19166
|
-
[class.ds__tab--active]="activeId() === s.id"
|
|
19167
|
-
[attr.aria-selected]="activeId() === s.id"
|
|
19168
|
-
[attr.aria-controls]="panelId()"
|
|
19169
|
-
[attr.tabindex]="activeId() === s.id ? 0 : -1"
|
|
19170
|
-
[attr.title]="s.labelKey | translate"
|
|
19171
|
-
(click)="select(s.id)"
|
|
19172
|
-
>
|
|
19173
|
-
@if (s.icon) {
|
|
19174
|
-
<span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
|
|
19175
|
-
}
|
|
19176
|
-
<span class="ds__tab-label">{{ s.labelKey | translate }}</span>
|
|
19177
|
-
</button>
|
|
19178
|
-
}
|
|
19179
|
-
</div>
|
|
19180
|
-
}
|
|
19181
|
-
</aside>
|
|
19182
|
-
|
|
19183
|
-
<div
|
|
19184
|
-
class="ds__panel"
|
|
19185
|
-
[id]="panelId()"
|
|
19186
|
-
[attr.role]="sections().length ? 'tabpanel' : null"
|
|
19187
|
-
[attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
|
|
19188
|
-
>
|
|
19189
|
-
<ng-content />
|
|
19190
|
-
</div>
|
|
19191
|
-
</div>
|
|
19151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
19152
|
+
<div class="ds__layout">
|
|
19153
|
+
<aside class="ds__aside">
|
|
19154
|
+
<div class="ds__pinned">
|
|
19155
|
+
<ng-content select="[detail-aside]" />
|
|
19156
|
+
</div>
|
|
19157
|
+
|
|
19158
|
+
@if (sections().length > 0) {
|
|
19159
|
+
<div
|
|
19160
|
+
#rail
|
|
19161
|
+
class="ds__rail"
|
|
19162
|
+
role="tablist"
|
|
19163
|
+
tabindex="-1"
|
|
19164
|
+
[attr.aria-orientation]="'vertical'"
|
|
19165
|
+
[attr.aria-label]="sectionsLabelKey() | translate"
|
|
19166
|
+
(keydown)="onKey($event)"
|
|
19167
|
+
>
|
|
19168
|
+
@for (s of sections(); track s.id) {
|
|
19169
|
+
<button
|
|
19170
|
+
type="button"
|
|
19171
|
+
class="ds__tab"
|
|
19172
|
+
role="tab"
|
|
19173
|
+
[id]="tabId(s.id)"
|
|
19174
|
+
[class.ds__tab--active]="activeId() === s.id"
|
|
19175
|
+
[attr.aria-selected]="activeId() === s.id"
|
|
19176
|
+
[attr.aria-controls]="panelId()"
|
|
19177
|
+
[attr.tabindex]="activeId() === s.id ? 0 : -1"
|
|
19178
|
+
[attr.title]="s.labelKey | translate"
|
|
19179
|
+
(click)="select(s.id)"
|
|
19180
|
+
>
|
|
19181
|
+
@if (s.icon) {
|
|
19182
|
+
<span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
|
|
19183
|
+
}
|
|
19184
|
+
<span class="ds__tab-label">{{ s.labelKey | translate }}</span>
|
|
19185
|
+
</button>
|
|
19186
|
+
}
|
|
19187
|
+
</div>
|
|
19188
|
+
}
|
|
19189
|
+
</aside>
|
|
19190
|
+
|
|
19191
|
+
<div
|
|
19192
|
+
class="ds__panel"
|
|
19193
|
+
[id]="panelId()"
|
|
19194
|
+
[attr.role]="sections().length ? 'tabpanel' : null"
|
|
19195
|
+
[attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
|
|
19196
|
+
>
|
|
19197
|
+
<ng-content />
|
|
19198
|
+
</div>
|
|
19199
|
+
</div>
|
|
19192
19200
|
`, isInline: true, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (max-width: 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19193
19201
|
}
|
|
19194
19202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, decorators: [{
|
|
19195
19203
|
type: Component,
|
|
19196
|
-
args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
19197
|
-
<div class="ds__layout">
|
|
19198
|
-
<aside class="ds__aside">
|
|
19199
|
-
<div class="ds__pinned">
|
|
19200
|
-
<ng-content select="[detail-aside]" />
|
|
19201
|
-
</div>
|
|
19202
|
-
|
|
19203
|
-
@if (sections().length > 0) {
|
|
19204
|
-
<div
|
|
19205
|
-
#rail
|
|
19206
|
-
class="ds__rail"
|
|
19207
|
-
role="tablist"
|
|
19208
|
-
tabindex="-1"
|
|
19209
|
-
[attr.aria-orientation]="'vertical'"
|
|
19210
|
-
[attr.aria-label]="sectionsLabelKey() | translate"
|
|
19211
|
-
(keydown)="onKey($event)"
|
|
19212
|
-
>
|
|
19213
|
-
@for (s of sections(); track s.id) {
|
|
19214
|
-
<button
|
|
19215
|
-
type="button"
|
|
19216
|
-
class="ds__tab"
|
|
19217
|
-
role="tab"
|
|
19218
|
-
[id]="tabId(s.id)"
|
|
19219
|
-
[class.ds__tab--active]="activeId() === s.id"
|
|
19220
|
-
[attr.aria-selected]="activeId() === s.id"
|
|
19221
|
-
[attr.aria-controls]="panelId()"
|
|
19222
|
-
[attr.tabindex]="activeId() === s.id ? 0 : -1"
|
|
19223
|
-
[attr.title]="s.labelKey | translate"
|
|
19224
|
-
(click)="select(s.id)"
|
|
19225
|
-
>
|
|
19226
|
-
@if (s.icon) {
|
|
19227
|
-
<span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
|
|
19228
|
-
}
|
|
19229
|
-
<span class="ds__tab-label">{{ s.labelKey | translate }}</span>
|
|
19230
|
-
</button>
|
|
19231
|
-
}
|
|
19232
|
-
</div>
|
|
19233
|
-
}
|
|
19234
|
-
</aside>
|
|
19235
|
-
|
|
19236
|
-
<div
|
|
19237
|
-
class="ds__panel"
|
|
19238
|
-
[id]="panelId()"
|
|
19239
|
-
[attr.role]="sections().length ? 'tabpanel' : null"
|
|
19240
|
-
[attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
|
|
19241
|
-
>
|
|
19242
|
-
<ng-content />
|
|
19243
|
-
</div>
|
|
19244
|
-
</div>
|
|
19204
|
+
args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
19205
|
+
<div class="ds__layout">
|
|
19206
|
+
<aside class="ds__aside">
|
|
19207
|
+
<div class="ds__pinned">
|
|
19208
|
+
<ng-content select="[detail-aside]" />
|
|
19209
|
+
</div>
|
|
19210
|
+
|
|
19211
|
+
@if (sections().length > 0) {
|
|
19212
|
+
<div
|
|
19213
|
+
#rail
|
|
19214
|
+
class="ds__rail"
|
|
19215
|
+
role="tablist"
|
|
19216
|
+
tabindex="-1"
|
|
19217
|
+
[attr.aria-orientation]="'vertical'"
|
|
19218
|
+
[attr.aria-label]="sectionsLabelKey() | translate"
|
|
19219
|
+
(keydown)="onKey($event)"
|
|
19220
|
+
>
|
|
19221
|
+
@for (s of sections(); track s.id) {
|
|
19222
|
+
<button
|
|
19223
|
+
type="button"
|
|
19224
|
+
class="ds__tab"
|
|
19225
|
+
role="tab"
|
|
19226
|
+
[id]="tabId(s.id)"
|
|
19227
|
+
[class.ds__tab--active]="activeId() === s.id"
|
|
19228
|
+
[attr.aria-selected]="activeId() === s.id"
|
|
19229
|
+
[attr.aria-controls]="panelId()"
|
|
19230
|
+
[attr.tabindex]="activeId() === s.id ? 0 : -1"
|
|
19231
|
+
[attr.title]="s.labelKey | translate"
|
|
19232
|
+
(click)="select(s.id)"
|
|
19233
|
+
>
|
|
19234
|
+
@if (s.icon) {
|
|
19235
|
+
<span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
|
|
19236
|
+
}
|
|
19237
|
+
<span class="ds__tab-label">{{ s.labelKey | translate }}</span>
|
|
19238
|
+
</button>
|
|
19239
|
+
}
|
|
19240
|
+
</div>
|
|
19241
|
+
}
|
|
19242
|
+
</aside>
|
|
19243
|
+
|
|
19244
|
+
<div
|
|
19245
|
+
class="ds__panel"
|
|
19246
|
+
[id]="panelId()"
|
|
19247
|
+
[attr.role]="sections().length ? 'tabpanel' : null"
|
|
19248
|
+
[attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
|
|
19249
|
+
>
|
|
19250
|
+
<ng-content />
|
|
19251
|
+
</div>
|
|
19252
|
+
</div>
|
|
19245
19253
|
`, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (max-width: 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"] }]
|
|
19246
19254
|
}], propDecorators: { rail: [{ type: i0.ViewChild, args: ['rail', { isSignal: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sectionsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsLabelKey", required: false }] }] } });
|
|
19247
19255
|
|