@tedi-design-system/angular 8.0.1-rc.7 → 8.1.0-rc.2
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.
|
@@ -18379,6 +18379,28 @@ class ProgressBarComponent {
|
|
|
18379
18379
|
* Accessible label for the progress bar. Falls back to `label()` when omitted.
|
|
18380
18380
|
*/
|
|
18381
18381
|
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
18382
|
+
/**
|
|
18383
|
+
* Publishes changes to the formatted value (`valueLabel`, or the percentage)
|
|
18384
|
+
* in a visually hidden live region, independently of `showValue`.
|
|
18385
|
+
* The current value is skipped when announcements are enabled.
|
|
18386
|
+
*
|
|
18387
|
+
* Progress bars are not live regions by default. Enable announcements when
|
|
18388
|
+
* users need updates without navigating back to the bar. Use `polite` for
|
|
18389
|
+
* routine updates and `assertive` for urgent updates that may interrupt speech.
|
|
18390
|
+
* @default off
|
|
18391
|
+
*/
|
|
18392
|
+
announce = input("off", ...(ngDevMode ? [{ debugName: "announce" }] : []));
|
|
18393
|
+
/**
|
|
18394
|
+
* Minimum time in milliseconds between live-region updates. The first change
|
|
18395
|
+
* is published immediately; changes during the interval are combined into one
|
|
18396
|
+
* update with the latest value. Changing the interval reschedules pending updates.
|
|
18397
|
+
* Zero disables throttling. Negative values become zero; non-finite values use 1000ms.
|
|
18398
|
+
* Ignored when `announce` is `off`.
|
|
18399
|
+
* @default 1000
|
|
18400
|
+
*/
|
|
18401
|
+
announceInterval = input(1000, ...(ngDevMode ? [{ debugName: "announceInterval", transform: (value) => Number.isFinite(value) ? Math.max(0, value) : 1000 }] : [{
|
|
18402
|
+
transform: (value) => Number.isFinite(value) ? Math.max(0, value) : 1000,
|
|
18403
|
+
}]));
|
|
18382
18404
|
/*
|
|
18383
18405
|
* Per-breakpoint overrides (`xs`–`xxl`).
|
|
18384
18406
|
*
|
|
@@ -18440,8 +18462,60 @@ class ProgressBarComponent {
|
|
|
18440
18462
|
}), ...(ngDevMode ? [{ debugName: "currentProps" }] : []));
|
|
18441
18463
|
formattedValue = computed(() => this.currentProps().valueLabel ?? `${this.value()}%`, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
|
|
18442
18464
|
accessibleLabel = computed(() => this.ariaLabel() ?? this.label() ?? undefined, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : []));
|
|
18465
|
+
announcedValue = signal("", ...(ngDevMode ? [{ debugName: "announcedValue" }] : []));
|
|
18466
|
+
announceRole = computed(() => this.announce() === "assertive" ? "alert" : "status", ...(ngDevMode ? [{ debugName: "announceRole" }] : []));
|
|
18467
|
+
lastAnnouncedAt;
|
|
18468
|
+
announceTimeout;
|
|
18469
|
+
previousAnnounceText;
|
|
18470
|
+
constructor() {
|
|
18471
|
+
effect(() => {
|
|
18472
|
+
const mode = this.announce();
|
|
18473
|
+
const text = this.formattedValue();
|
|
18474
|
+
const interval = this.announceInterval();
|
|
18475
|
+
untracked(() => {
|
|
18476
|
+
if (mode === "off") {
|
|
18477
|
+
this.resetAnnouncement();
|
|
18478
|
+
}
|
|
18479
|
+
else if (this.previousAnnounceText === undefined) {
|
|
18480
|
+
this.previousAnnounceText = text;
|
|
18481
|
+
}
|
|
18482
|
+
else {
|
|
18483
|
+
const changed = text !== this.previousAnnounceText;
|
|
18484
|
+
this.previousAnnounceText = text;
|
|
18485
|
+
if (changed || this.announceTimeout !== undefined) {
|
|
18486
|
+
this.queueAnnouncement(text, interval);
|
|
18487
|
+
}
|
|
18488
|
+
}
|
|
18489
|
+
});
|
|
18490
|
+
});
|
|
18491
|
+
inject(DestroyRef).onDestroy(() => clearTimeout(this.announceTimeout));
|
|
18492
|
+
}
|
|
18493
|
+
queueAnnouncement(text, interval) {
|
|
18494
|
+
const remaining = this.lastAnnouncedAt === undefined
|
|
18495
|
+
? 0
|
|
18496
|
+
: interval - (Date.now() - this.lastAnnouncedAt);
|
|
18497
|
+
if (remaining <= 0) {
|
|
18498
|
+
this.announceNow(text);
|
|
18499
|
+
return;
|
|
18500
|
+
}
|
|
18501
|
+
clearTimeout(this.announceTimeout);
|
|
18502
|
+
this.announceTimeout = setTimeout(() => this.announceNow(this.formattedValue()), remaining);
|
|
18503
|
+
}
|
|
18504
|
+
announceNow(text) {
|
|
18505
|
+
clearTimeout(this.announceTimeout);
|
|
18506
|
+
this.announceTimeout = undefined;
|
|
18507
|
+
this.lastAnnouncedAt = Date.now();
|
|
18508
|
+
this.announcedValue.set(text);
|
|
18509
|
+
}
|
|
18510
|
+
resetAnnouncement() {
|
|
18511
|
+
clearTimeout(this.announceTimeout);
|
|
18512
|
+
this.announceTimeout = undefined;
|
|
18513
|
+
this.lastAnnouncedAt = undefined;
|
|
18514
|
+
this.previousAnnounceText = undefined;
|
|
18515
|
+
this.announcedValue.set("");
|
|
18516
|
+
}
|
|
18443
18517
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18444
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress-bar": "true", "class.tedi-progress-bar--small": "currentProps().size === 'small'", "class.tedi-progress-bar--label-horizontal": "label() && currentProps().labelPosition === 'horizontal'", "class.tedi-progress-bar--value-bottom": "currentProps().valuePosition === 'bottom'" } }, ngImport: i0, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n @if (label() && currentProps().labelPosition === \"horizontal\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n }\n\n <div class=\"tedi-progress-bar__main\">\n <div class=\"tedi-progress-bar__track-row\">\n <progress\n class=\"tedi-progress-bar__track\"\n [attr.id]=\"resolvedId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-valuetext]=\"currentProps().valueLabel\"\n ></progress>\n\n @if (\n currentProps().showValue &&\n currentProps().valuePosition === \"horizontal\"\n ) {\n <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n {{ formattedValue() }}\n </span>\n }\n </div>\n\n <div class=\"tedi-progress-bar__hint-row\">\n <ng-content select=\"tedi-feedback-text\" />\n\n @if (\n currentProps().showValue && currentProps().valuePosition === \"bottom\"\n ) {\n <span\n tedi-label\n size=\"small\"\n class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n >\n {{ formattedValue() }}\n </span>\n }\n </div>\n </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18518
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, announce: { classPropertyName: "announce", publicName: "announce", isSignal: true, isRequired: false, transformFunction: null }, announceInterval: { classPropertyName: "announceInterval", publicName: "announceInterval", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress-bar": "true", "class.tedi-progress-bar--small": "currentProps().size === 'small'", "class.tedi-progress-bar--label-horizontal": "label() && currentProps().labelPosition === 'horizontal'", "class.tedi-progress-bar--value-bottom": "currentProps().valuePosition === 'bottom'" } }, ngImport: i0, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n @if (label() && currentProps().labelPosition === \"horizontal\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n }\n\n <div class=\"tedi-progress-bar__main\">\n <div class=\"tedi-progress-bar__track-row\">\n <progress\n class=\"tedi-progress-bar__track\"\n [attr.id]=\"resolvedId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-valuetext]=\"currentProps().valueLabel\"\n ></progress>\n\n @if (\n currentProps().showValue &&\n currentProps().valuePosition === \"horizontal\"\n ) {\n <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n {{ formattedValue() }}\n </span>\n }\n </div>\n\n <div class=\"tedi-progress-bar__hint-row\">\n <ng-content select=\"tedi-feedback-text\" />\n\n @if (\n currentProps().showValue && currentProps().valuePosition === \"bottom\"\n ) {\n <span\n tedi-label\n size=\"small\"\n class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n >\n {{ formattedValue() }}\n </span>\n }\n </div>\n </div>\n</div>\n\n@if (announce() !== \"off\") {\n <span\n class=\"sr-only\"\n [attr.role]=\"announceRole()\"\n [attr.aria-live]=\"announce()\"\n aria-atomic=\"true\"\n >\n {{ announcedValue() }}\n </span>\n}\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18445
18519
|
}
|
|
18446
18520
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
18447
18521
|
type: Component,
|
|
@@ -18450,8 +18524,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18450
18524
|
"[class.tedi-progress-bar--small]": "currentProps().size === 'small'",
|
|
18451
18525
|
"[class.tedi-progress-bar--label-horizontal]": "label() && currentProps().labelPosition === 'horizontal'",
|
|
18452
18526
|
"[class.tedi-progress-bar--value-bottom]": "currentProps().valuePosition === 'bottom'",
|
|
18453
|
-
}, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n @if (label() && currentProps().labelPosition === \"horizontal\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n }\n\n <div class=\"tedi-progress-bar__main\">\n <div class=\"tedi-progress-bar__track-row\">\n <progress\n class=\"tedi-progress-bar__track\"\n [attr.id]=\"resolvedId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-valuetext]=\"currentProps().valueLabel\"\n ></progress>\n\n @if (\n currentProps().showValue &&\n currentProps().valuePosition === \"horizontal\"\n ) {\n <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n {{ formattedValue() }}\n </span>\n }\n </div>\n\n <div class=\"tedi-progress-bar__hint-row\">\n <ng-content select=\"tedi-feedback-text\" />\n\n @if (\n currentProps().showValue && currentProps().valuePosition === \"bottom\"\n ) {\n <span\n tedi-label\n size=\"small\"\n class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n >\n {{ formattedValue() }}\n </span>\n }\n </div>\n </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"] }]
|
|
18454
|
-
}], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
18527
|
+
}, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n @if (label() && currentProps().labelPosition === \"horizontal\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n }\n\n <div class=\"tedi-progress-bar__main\">\n <div class=\"tedi-progress-bar__track-row\">\n <progress\n class=\"tedi-progress-bar__track\"\n [attr.id]=\"resolvedId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-valuetext]=\"currentProps().valueLabel\"\n ></progress>\n\n @if (\n currentProps().showValue &&\n currentProps().valuePosition === \"horizontal\"\n ) {\n <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n {{ formattedValue() }}\n </span>\n }\n </div>\n\n <div class=\"tedi-progress-bar__hint-row\">\n <ng-content select=\"tedi-feedback-text\" />\n\n @if (\n currentProps().showValue && currentProps().valuePosition === \"bottom\"\n ) {\n <span\n tedi-label\n size=\"small\"\n class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n >\n {{ formattedValue() }}\n </span>\n }\n </div>\n </div>\n</div>\n\n@if (announce() !== \"off\") {\n <span\n class=\"sr-only\"\n [attr.role]=\"announceRole()\"\n [attr.aria-live]=\"announce()\"\n aria-atomic=\"true\"\n >\n {{ announcedValue() }}\n </span>\n}\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"] }]
|
|
18528
|
+
}], ctorParameters: () => [], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], announce: [{ type: i0.Input, args: [{ isSignal: true, alias: "announce", required: false }] }], announceInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "announceInterval", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
18455
18529
|
|
|
18456
18530
|
class AttachmentComponent {
|
|
18457
18531
|
projectedProgress = contentChild(ProgressBarComponent, ...(ngDevMode ? [{ debugName: "projectedProgress" }] : []));
|
|
@@ -18817,8 +18891,11 @@ class TimelineComponent {
|
|
|
18817
18891
|
*/
|
|
18818
18892
|
variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
18819
18893
|
/**
|
|
18820
|
-
*
|
|
18821
|
-
*
|
|
18894
|
+
* Vertical padding of each item in the "card" variant, in rems (same scale
|
|
18895
|
+
* as Card). Both the gaps between items and the card's top/bottom edges
|
|
18896
|
+
* resolve to twice this value. Horizontal item padding is fixed at the card
|
|
18897
|
+
* default.
|
|
18898
|
+
* @default 0.5
|
|
18822
18899
|
*/
|
|
18823
18900
|
cardPadding = input(...(ngDevMode ? [undefined, { debugName: "cardPadding" }] : []));
|
|
18824
18901
|
items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -18829,7 +18906,7 @@ class TimelineComponent {
|
|
|
18829
18906
|
this.items.update((list) => list.filter((i) => i !== item));
|
|
18830
18907
|
}
|
|
18831
18908
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TimelineComponent, isStandalone: true, selector: "tedi-timeline", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cardPadding: { classPropertyName: "cardPadding", publicName: "cardPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline--card": "variant() === 'card'", "style.--_timeline-card-padding": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null" }, classAttribute: "tedi-timeline" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-
|
|
18909
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TimelineComponent, isStandalone: true, selector: "tedi-timeline", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cardPadding: { classPropertyName: "cardPadding", publicName: "cardPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline--card": "variant() === 'card'", "style.--_timeline-card-padding": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null" }, classAttribute: "tedi-timeline" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-xs);padding-block:var(--_timeline-card-padding);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-timeline--card .tedi-timeline-item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;padding:var(--_timeline-card-padding) var(--card-padding-md-default);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-bottom:0}.tedi-timeline--card .tedi-timeline__timings,.tedi-timeline--card .tedi-timeline__info{padding-top:0;padding-bottom:0}.tedi-timeline--card .tedi-timeline-item:not(:last-child) .tedi-timeline__marker{margin-bottom:calc(-2 * var(--_timeline-card-padding) - 10px)}.tedi-timeline--card .tedi-timeline__marker .tedi-separator--dot-only-outlined:before{background-color:var(--card-background-primary)}@media(max-width:61.98rem){.tedi-timeline--card .tedi-timeline-item .tedi-timeline__marker{grid-row:1/span 2}.tedi-timeline--card .tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:1/span 3}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18833
18910
|
}
|
|
18834
18911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
18835
18912
|
type: Component,
|
|
@@ -18837,7 +18914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18837
18914
|
class: "tedi-timeline",
|
|
18838
18915
|
"[class.tedi-timeline--card]": "variant() === 'card'",
|
|
18839
18916
|
"[style.--_timeline-card-padding]": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null",
|
|
18840
|
-
}, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-
|
|
18917
|
+
}, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-xs);padding-block:var(--_timeline-card-padding);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-timeline--card .tedi-timeline-item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;padding:var(--_timeline-card-padding) var(--card-padding-md-default);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-bottom:0}.tedi-timeline--card .tedi-timeline__timings,.tedi-timeline--card .tedi-timeline__info{padding-top:0;padding-bottom:0}.tedi-timeline--card .tedi-timeline-item:not(:last-child) .tedi-timeline__marker{margin-bottom:calc(-2 * var(--_timeline-card-padding) - 10px)}.tedi-timeline--card .tedi-timeline__marker .tedi-separator--dot-only-outlined:before{background-color:var(--card-background-primary)}@media(max-width:61.98rem){.tedi-timeline--card .tedi-timeline-item .tedi-timeline__marker{grid-row:1/span 2}.tedi-timeline--card .tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:1/span 3}}\n"] }]
|
|
18841
18918
|
}], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cardPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPadding", required: false }] }] } });
|
|
18842
18919
|
|
|
18843
18920
|
/**
|
|
@@ -18914,14 +18991,14 @@ class TimelineItemComponent {
|
|
|
18914
18991
|
return "secondary";
|
|
18915
18992
|
}, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
18916
18993
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18917
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline__item--has-bottom": "isMobile() && !!timingsBottom()" }, classAttribute: "tedi-timeline-item" }, queries: [{ propertyName: "timingsBottom", first: true, predicate: TimelineTimingsBottomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:
|
|
18994
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline__item--has-bottom": "isMobile() && !!timingsBottom()" }, classAttribute: "tedi-timeline-item" }, queries: [{ propertyName: "timingsBottom", first: true, predicate: TimelineTimingsBottomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px;--timeline-dot-offset-md: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-md)) / 2 );--timeline-dot-offset-lg: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-lg)) / 2 )}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:var(--separator-dot-size-sm);height:var(--separator-dot-size-sm);margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:var(--timeline-dot-offset-md)}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:calc(-1 * var(--timeline-dot-offset-md))}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:var(--timeline-dot-offset-lg)}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"], dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18918
18995
|
}
|
|
18919
18996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, decorators: [{
|
|
18920
18997
|
type: Component,
|
|
18921
18998
|
args: [{ standalone: true, selector: "tedi-timeline-item", imports: [SeparatorComponent, TextComponent, NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
18922
18999
|
class: "tedi-timeline-item",
|
|
18923
19000
|
"[class.tedi-timeline__item--has-bottom]": "isMobile() && !!timingsBottom()",
|
|
18924
|
-
}, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:
|
|
19001
|
+
}, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px;--timeline-dot-offset-md: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-md)) / 2 );--timeline-dot-offset-lg: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-lg)) / 2 )}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:var(--separator-dot-size-sm);height:var(--separator-dot-size-sm);margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:var(--timeline-dot-offset-md)}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:calc(-1 * var(--timeline-dot-offset-md))}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:var(--timeline-dot-offset-lg)}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"] }]
|
|
18925
19002
|
}], propDecorators: { timings: [{ type: i0.Input, args: [{ isSignal: true, alias: "timings", required: false }] }], timingsBottom: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineTimingsBottomDirective), { isSignal: true }] }] } });
|
|
18926
19003
|
|
|
18927
19004
|
class TimelineDescriptionComponent {
|