@tedi-design-system/angular 8.1.0-rc.1 → 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.
@@ -18891,8 +18891,11 @@ class TimelineComponent {
18891
18891
  */
18892
18892
  variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
18893
18893
  /**
18894
- * Item padding in rems for the card variant.
18895
- * @default 1
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
18896
18899
  */
18897
18900
  cardPadding = input(...(ngDevMode ? [undefined, { debugName: "cardPadding" }] : []));
18898
18901
  items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -18903,7 +18906,7 @@ class TimelineComponent {
18903
18906
  this.items.update((list) => list.filter((i) => i !== item));
18904
18907
  }
18905
18908
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
18906
- 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-md-default);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);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-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 });
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 });
18907
18910
  }
18908
18911
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, decorators: [{
18909
18912
  type: Component,
@@ -18911,7 +18914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
18911
18914
  class: "tedi-timeline",
18912
18915
  "[class.tedi-timeline--card]": "variant() === 'card'",
18913
18916
  "[style.--_timeline-card-padding]": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null",
18914
- }, 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-md-default);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);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-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"] }]
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"] }]
18915
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 }] }] } });
18916
18919
 
18917
18920
  /**
@@ -18988,14 +18991,14 @@ class TimelineItemComponent {
18988
18991
  return "secondary";
18989
18992
  }, ...(ngDevMode ? [{ debugName: "color" }] : []));
18990
18993
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
18991
- 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:4px;height:4px;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:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@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:3px}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 });
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 });
18992
18995
  }
18993
18996
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, decorators: [{
18994
18997
  type: Component,
18995
18998
  args: [{ standalone: true, selector: "tedi-timeline-item", imports: [SeparatorComponent, TextComponent, NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
18996
18999
  class: "tedi-timeline-item",
18997
19000
  "[class.tedi-timeline__item--has-bottom]": "isMobile() && !!timingsBottom()",
18998
- }, 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:4px;height:4px;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:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@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:3px}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"] }]
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"] }]
18999
19002
  }], propDecorators: { timings: [{ type: i0.Input, args: [{ isSignal: true, alias: "timings", required: false }] }], timingsBottom: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineTimingsBottomDirective), { isSignal: true }] }] } });
19000
19003
 
19001
19004
  class TimelineDescriptionComponent {