@tedi-design-system/angular 6.0.0 → 6.1.0-rc.1
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/community/components/navigation/index.d.ts +1 -0
- package/community/components/navigation/index.d.ts.map +1 -1
- package/community/components/navigation/vertical-stepper/index.d.ts +3 -0
- package/community/components/navigation/vertical-stepper/index.d.ts.map +1 -0
- package/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.d.ts +25 -0
- package/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.d.ts.map +1 -0
- package/community/components/navigation/vertical-stepper/vertical-stepper.component.d.ts +9 -0
- package/community/components/navigation/vertical-stepper/vertical-stepper.component.d.ts.map +1 -0
- package/fesm2022/tedi-design-system-angular-community.mjs +74 -1
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../community/components/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../community/components/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../community/components/navigation/vertical-stepper/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yDAAyD,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class VerticalStepperItemComponent {
|
|
3
|
+
completed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
4
|
+
error: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
5
|
+
selected: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
6
|
+
disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
7
|
+
informative: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
8
|
+
title: import("@angular/core").InputSignal<string>;
|
|
9
|
+
route: import("@angular/core").InputSignal<string | any[] | import("@angular/router").UrlTree | null | undefined>;
|
|
10
|
+
opened: import("@angular/core").ModelSignal<boolean>;
|
|
11
|
+
itemSelect: import("@angular/core").OutputEmitterRef<void>;
|
|
12
|
+
private stepperContext;
|
|
13
|
+
subItem: import("@angular/core").WritableSignal<boolean>;
|
|
14
|
+
subItems: import("@angular/core").Signal<readonly VerticalStepperItemComponent[]>;
|
|
15
|
+
compact: import("@angular/core").Signal<boolean | undefined>;
|
|
16
|
+
enumerated: import("@angular/core").Signal<boolean | undefined>;
|
|
17
|
+
hasSubItems: import("@angular/core").Signal<boolean>;
|
|
18
|
+
onSubItemSelect: import("@angular/core").EffectRef;
|
|
19
|
+
onSubItemChanges: import("@angular/core").EffectRef;
|
|
20
|
+
toggleOpen(): void;
|
|
21
|
+
routerLinkActiveChange(isActive: boolean): void;
|
|
22
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<VerticalStepperItemComponent, never>;
|
|
23
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<VerticalStepperItemComponent, "tedi-vertical-stepper-item", never, { "completed": { "alias": "completed"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "informative": { "alias": "informative"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "route": { "alias": "route"; "required": false; "isSignal": true; }; "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, { "opened": "openedChange"; "itemSelect": "itemSelect"; }, ["subItems"], ["[item-title]", "[item-description]", "tedi-vertical-stepper-item"], true, never>;
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=vertical-stepper-item.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vertical-stepper-item.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.ts"],"names":[],"mappings":";AAsBA,qBA0Ba,4BAA4B;IACvC,SAAS,qEAAiD;IAC1D,KAAK,qEAAiD;IACtD,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,WAAW,qEAAiD;IAC5D,KAAK,8CAA4B;IACjC,KAAK,6GAA8C;IACnD,MAAM,+CAAyB;IAE/B,UAAU,iDAAY;IAEtB,OAAO,CAAC,cAAc,CAAwD;IAC9E,OAAO,kDAA0B;IACjC,QAAQ,0EAAiD;IACzD,OAAO,sDAAkD;IACzD,UAAU,sDAAqD;IAC/D,WAAW,0CAA4C;IAEvD,eAAe,oCAKZ;IAEH,gBAAgB,oCAEb;IAEH,UAAU;IAIV,sBAAsB,CAAC,QAAQ,EAAE,OAAO;yCAlC7B,4BAA4B;2CAA5B,4BAA4B;CAuCxC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class VerticalStepperComponent {
|
|
3
|
+
ariaLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
4
|
+
compact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
5
|
+
enumerated: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<VerticalStepperComponent, never>;
|
|
7
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<VerticalStepperComponent, "tedi-vertical-stepper", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "enumerated": { "alias": "enumerated"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=vertical-stepper.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vertical-stepper.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/navigation/vertical-stepper/vertical-stepper.component.ts"],"names":[],"mappings":";AAQA,qBAYa,wBAAwB;IACnC,SAAS,0DAAmB;IAC5B,OAAO,qEAAiD;IACxD,UAAU,qEAAiD;yCAHhD,wBAAwB;2CAAxB,wBAAwB;CAIpC"}
|
|
@@ -3198,6 +3198,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3198
3198
|
}, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content role=\"tabpanel\" [attr.aria-labelledby]=\"activeTabId()\">\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media (max-width: 575.98px){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media (min-width: 576px){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"] }]
|
|
3199
3199
|
}], ctorParameters: () => [] });
|
|
3200
3200
|
|
|
3201
|
+
class VerticalStepperComponent {
|
|
3202
|
+
ariaLabel = input();
|
|
3203
|
+
compact = input(false, { transform: booleanAttribute });
|
|
3204
|
+
enumerated = input(false, { transform: booleanAttribute });
|
|
3205
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VerticalStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: VerticalStepperComponent, isStandalone: true, selector: "tedi-vertical-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, enumerated: { classPropertyName: "enumerated", publicName: "enumerated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-vertical-stepper": "true", "class.tedi-vertical-stepper--compact": "compact()" } }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\">\n <div role=\"list\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [".tedi-vertical-stepper{counter-reset:step-number}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3207
|
+
}
|
|
3208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VerticalStepperComponent, decorators: [{
|
|
3209
|
+
type: Component,
|
|
3210
|
+
args: [{ selector: "tedi-vertical-stepper", imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3211
|
+
"[class.tedi-vertical-stepper]": "true",
|
|
3212
|
+
"[class.tedi-vertical-stepper--compact]": "compact()",
|
|
3213
|
+
}, template: "<nav [attr.aria-label]=\"ariaLabel()\">\n <div role=\"list\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [".tedi-vertical-stepper{counter-reset:step-number}\n"] }]
|
|
3214
|
+
}] });
|
|
3215
|
+
|
|
3216
|
+
class VerticalStepperItemComponent {
|
|
3217
|
+
completed = input(false, { transform: booleanAttribute });
|
|
3218
|
+
error = input(false, { transform: booleanAttribute });
|
|
3219
|
+
selected = input(false, { transform: booleanAttribute });
|
|
3220
|
+
disabled = input(false, { transform: booleanAttribute });
|
|
3221
|
+
informative = input(false, { transform: booleanAttribute });
|
|
3222
|
+
title = input.required();
|
|
3223
|
+
route = input(undefined);
|
|
3224
|
+
opened = model(false); // for items with children
|
|
3225
|
+
itemSelect = output();
|
|
3226
|
+
stepperContext = inject(VerticalStepperComponent, { optional: true });
|
|
3227
|
+
subItem = signal(false);
|
|
3228
|
+
subItems = contentChildren(VerticalStepperItemComponent);
|
|
3229
|
+
compact = computed(() => this.stepperContext?.compact());
|
|
3230
|
+
enumerated = computed(() => this.stepperContext?.enumerated());
|
|
3231
|
+
hasSubItems = computed(() => !!this.subItems().length);
|
|
3232
|
+
onSubItemSelect = effect(() => {
|
|
3233
|
+
const subItemSelected = this.subItems().some((item) => item.selected());
|
|
3234
|
+
if (subItemSelected) {
|
|
3235
|
+
this.opened.set(true);
|
|
3236
|
+
}
|
|
3237
|
+
});
|
|
3238
|
+
onSubItemChanges = effect(() => {
|
|
3239
|
+
this.subItems().forEach((item) => item.subItem.set(true));
|
|
3240
|
+
});
|
|
3241
|
+
toggleOpen() {
|
|
3242
|
+
this.opened.update((previouslyOpened) => !previouslyOpened);
|
|
3243
|
+
}
|
|
3244
|
+
routerLinkActiveChange(isActive) {
|
|
3245
|
+
if (isActive) {
|
|
3246
|
+
this.itemSelect.emit();
|
|
3247
|
+
}
|
|
3248
|
+
}
|
|
3249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VerticalStepperItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: VerticalStepperItemComponent, isStandalone: true, selector: "tedi-vertical-stepper-item", inputs: { completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, informative: { classPropertyName: "informative", publicName: "informative", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", itemSelect: "itemSelect" }, host: { properties: { "class.tedi-vertical-stepper-item": "true", "class.tedi-vertical-stepper-item--completed": "completed()", "class.tedi-vertical-stepper-item--error": "error()", "class.tedi-vertical-stepper-item--selected": "selected()", "class.tedi-vertical-stepper-item--disabled": "disabled()", "class.tedi-vertical-stepper-item--informative": "informative()", "class.tedi-vertical-stepper-item--sub-item": "subItem()", "class.tedi-vertical-stepper-item--compact": "compact()", "class.tedi-vertical-stepper-item--enumerated": "enumerated()", "attr.role": "'listitem'" } }, queries: [{ propertyName: "subItems", predicate: VerticalStepperItemComponent, isSignal: true }], ngImport: i0, template: "<ng-template #statusIcon>\n @if (subItem() || !compact()) {\n @if (completed()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.completed' | tediTranslate\"\n name=\"check\"\n color=\"success\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n } @else if (error()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.error' | tediTranslate\"\n name=\"error\"\n color=\"danger\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n }\n }\n</ng-template>\n\n<div class=\"tedi-vertical-stepper-item__indicator\">\n @if (!selected() && compact() && !subItem()) {\n @if (completed()) {\n <tedi-icon name=\"check\" color=\"white\" [size]=\"16\" />\n } @else if (error()) {\n <tedi-icon name=\"exclamation\" color=\"white\" [size]=\"16\" />\n }\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__line\"></div>\n<div class=\"tedi-vertical-stepper-item__title\">\n @if (hasSubItems()) {\n <button\n [disabled]=\"disabled()\"\n (click)=\"toggleOpen()\"\n class=\"tedi-vertical-stepper-item__toggle\"\n [attr.aria-expanded]=\"opened()\"\n >\n <span>{{ title() }}</span\n ><ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n class=\"tedi-vertical-stepper-item__toggle-icon\"\n [class.tedi-vertical-stepper-item__toggle-icon--opened]=\"opened()\"\n />\n </button>\n } @else {\n <ng-content select=\"[item-title]\">\n @if (route()) {\n <a\n [routerLink]=\"disabled() ? undefined : route()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n routerLinkActive\n (isActiveChange)=\"routerLinkActiveChange($event)\"\n >{{ title() }}</a\n >\n } @else {\n <button\n [disabled]=\"disabled()\"\n (click)=\"itemSelect.emit()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n >\n {{ title() }}\n </button>\n }\n </ng-content>\n <ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container>\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__description\">\n <ng-content select=\"[item-description]\" />\n</div>\n@if (opened()) {\n <ng-content select=\"tedi-vertical-stepper-item\" />\n}\n", styles: [".tedi-vertical-stepper-item{display:grid;position:relative;--_step-indicator-size: 24px;--_step-indicator-color: var(--general-text-secondary, #4b4e62);--_step-indicator-border: var(--stepper-step-default-border, #9293a4);--_step-indicator-border-hover: var( --stepper-step-default-border-hover, #005aa3 );--_step-indicator-border-width: 1px;--_step-indicator-background: var(--stepper-step-default-bg, #fff);--_step-indicator-background-hover: var(--stepper-step-default-bg, #fff);--_step-padding: var(--stepper-item-vertical-lg-padding-top, 8px);--_step-inner-spacing: var(--stepper-item-vertical-lg-inner-spacing, 8px);--_step-line-color: var(--stepper-item-vertical-line, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-default, #151926);--_step-title-color-hover: var(--stepper-item-vertical-text-hover, #004277);--_step-title-size: var(--body-regular-size, 16px);--_step-title-weight: var(--body-regular-weight, 400);--_step-title-line-height: var(--body-regular-line-height, 24px);--_step-title-spacing: var(--layout-grid-gutters-08, 8px);grid-template-areas:\"indicator title\" \". description\";grid-template-columns:auto 1fr;grid-auto-columns:auto;column-gap:var(--_step-inner-spacing);z-index:0}.tedi-vertical-stepper-item__indicator{grid-area:indicator;display:flex;align-items:center;justify-content:center;height:var(--_step-indicator-size);width:var(--_step-indicator-size);border:var(--_step-indicator-border) solid var(--_step-indicator-border-width);background-color:var(--_step-indicator-background);color:var(--_step-indicator-color);border-radius:9999px;font-size:var(--body-small-bold-size, 14px);font-weight:var(--body-bold-weight, 700);align-self:center;justify-self:center}.tedi-vertical-stepper-item__indicator:before{content:counter(step-number)}.tedi-vertical-stepper-item:has(>.tedi-vertical-stepper-item__title :is(button,a):hover)>.tedi-vertical-stepper-item__indicator{background-color:var(--_step-indicator-background-hover);border-color:var(--_step-indicator-border-hover)}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item){counter-increment:step-number}.tedi-vertical-stepper-item__title{grid-area:title;padding:var(--_step-padding) 0}.tedi-vertical-stepper-item__title a,.tedi-vertical-stepper-item__title button{padding:0;background:none;border:none;text-decoration:none;font-family:var(--family-default, Roboto);font-size:var(--_step-title-size);font-weight:var(--_step-title-weight);line-height:var(--_step-title-line-height);cursor:pointer;color:var(--_step-title-color)}.tedi-vertical-stepper-item__title a:hover,.tedi-vertical-stepper-item__title button:hover{color:var(--_step-title-color-hover)}.tedi-vertical-stepper-item__title a:hover:not(.tedi-vertical-stepper-item__toggle),.tedi-vertical-stepper-item__title button:hover:not(.tedi-vertical-stepper-item__toggle){text-decoration:underline}.tedi-vertical-stepper-item__toggle{display:flex;width:100%;align-items:center}.tedi-vertical-stepper-item__toggle:hover>span{text-decoration:underline}.tedi-vertical-stepper-item__toggle-icon{margin-left:auto;transition:transform .3s}.tedi-vertical-stepper-item__toggle-icon--opened{transform:rotateX(180deg)}.tedi-vertical-stepper-item__status-icon{margin-inline:var(--_step-title-spacing)}.tedi-vertical-stepper-item__description{grid-area:description}.tedi-vertical-stepper-item__description:empty{display:none}.tedi-vertical-stepper-item__line:before,.tedi-vertical-stepper-item__line:after{content:\"\";grid-row:1/span 1;grid-column:1/span 1;left:50%;transform:translate(-50%);position:absolute;width:1px;background-color:var(--_step-line-color);top:0;bottom:0;z-index:-1}.tedi-vertical-stepper-item__line:before{grid-row:1/span 1}.tedi-vertical-stepper-item__line:after{grid-row:2/span 1}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):first-child>.tedi-vertical-stepper-item__line:before{top:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child:not(:has(.tedi-vertical-stepper-item--sub-item))>.tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child>.tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item--compact{--_step-indicator-size: var(--stepper-item-vertical-step-size-md, 16px);--_step-padding: var(--stepper-item-vertical-compact-padding-top, 3px);--_step-inner-spacing: var( --stepper-item-vertical-compact-inner-spacing, 6px );--_step-title-spacing: var(--layout-grid-gutters-04, 4px)}.tedi-vertical-stepper-item--compact .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--compact.tedi-vertical-stepper-item--enumerated:not(.tedi-vertical-stepper-item--sub-item)>.tedi-vertical-stepper-item__title :is(a,button):before{content:counter(step-number) \".\";display:inline-block}.tedi-vertical-stepper-item--sub-item{grid-column:1/span 2;grid-template-columns:subgrid;--_step-indicator-size: var(--stepper-item-vertical-step-size-sm, 9px);--_step-padding: var(--stepper-item-vertical-padding-y-sm, 2px)}.tedi-vertical-stepper-item--sub-item .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--completed{--_step-indicator-background: var(--stepper-step-completed-bg, #266b42);--_step-indicator-border: var(--stepper-step-completed-bg, #266b42);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-completed-bg-hover, #1d5032 );--_step-indicator-background-hover: var( --stepper-step-completed-bg-hover, #1d5032 )}.tedi-vertical-stepper-item--error{--_step-indicator-background: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-border: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-danger-bg-hover, #812525 );--_step-indicator-background-hover: var( --stepper-step-danger-bg-hover, #812525 )}.tedi-vertical-stepper-item--selected{--_step-indicator-background: var(--stepper-step-selected-bg, #fff);--_step-indicator-color: var( --stepper-item-vertical-text-selected, #004277 );--_step-indicator-border: var(--stepper-step-selected-border, #004277);--_step-indicator-border-width: 2px;--_step-indicator-border-hover: var( --stepper-step-selected-border-hover, #003662 );--_step-title-color: var(--stepper-item-vertical-text-selected, #004277);--_step-title-weight: var(--body-bold-weight, 700)}.tedi-vertical-stepper-item--selected.tedi-vertical-stepper-item--compact:not(.tedi-vertical-stepper-item--sub-item){--_step-indicator-border-width: 4px}.tedi-vertical-stepper-item--disabled{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-color: var( --stepper-item-vertical-text-disabled, #9293a4 );--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-disabled, #9293a4)}.tedi-vertical-stepper-item--disabled .tedi-vertical-stepper-item__title{pointer-events:none}.tedi-vertical-stepper-item--informative{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--general-text-tertiary, #5d6071)}.tedi-vertical-stepper-item--informative .tedi-vertical-stepper-item__title{pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3251
|
+
}
|
|
3252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VerticalStepperItemComponent, decorators: [{
|
|
3253
|
+
type: Component,
|
|
3254
|
+
args: [{ selector: "tedi-vertical-stepper-item", imports: [
|
|
3255
|
+
IconComponent,
|
|
3256
|
+
RouterLink,
|
|
3257
|
+
RouterLinkActive,
|
|
3258
|
+
NgTemplateOutlet,
|
|
3259
|
+
TediTranslationPipe,
|
|
3260
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3261
|
+
"[class.tedi-vertical-stepper-item]": "true",
|
|
3262
|
+
"[class.tedi-vertical-stepper-item--completed]": "completed()",
|
|
3263
|
+
"[class.tedi-vertical-stepper-item--error]": "error()",
|
|
3264
|
+
"[class.tedi-vertical-stepper-item--selected]": "selected()",
|
|
3265
|
+
"[class.tedi-vertical-stepper-item--disabled]": "disabled()",
|
|
3266
|
+
"[class.tedi-vertical-stepper-item--informative]": "informative()",
|
|
3267
|
+
"[class.tedi-vertical-stepper-item--sub-item]": "subItem()",
|
|
3268
|
+
"[class.tedi-vertical-stepper-item--compact]": "compact()",
|
|
3269
|
+
"[class.tedi-vertical-stepper-item--enumerated]": "enumerated()",
|
|
3270
|
+
"[attr.role]": "'listitem'",
|
|
3271
|
+
}, template: "<ng-template #statusIcon>\n @if (subItem() || !compact()) {\n @if (completed()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.completed' | tediTranslate\"\n name=\"check\"\n color=\"success\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n } @else if (error()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.error' | tediTranslate\"\n name=\"error\"\n color=\"danger\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n }\n }\n</ng-template>\n\n<div class=\"tedi-vertical-stepper-item__indicator\">\n @if (!selected() && compact() && !subItem()) {\n @if (completed()) {\n <tedi-icon name=\"check\" color=\"white\" [size]=\"16\" />\n } @else if (error()) {\n <tedi-icon name=\"exclamation\" color=\"white\" [size]=\"16\" />\n }\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__line\"></div>\n<div class=\"tedi-vertical-stepper-item__title\">\n @if (hasSubItems()) {\n <button\n [disabled]=\"disabled()\"\n (click)=\"toggleOpen()\"\n class=\"tedi-vertical-stepper-item__toggle\"\n [attr.aria-expanded]=\"opened()\"\n >\n <span>{{ title() }}</span\n ><ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n class=\"tedi-vertical-stepper-item__toggle-icon\"\n [class.tedi-vertical-stepper-item__toggle-icon--opened]=\"opened()\"\n />\n </button>\n } @else {\n <ng-content select=\"[item-title]\">\n @if (route()) {\n <a\n [routerLink]=\"disabled() ? undefined : route()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n routerLinkActive\n (isActiveChange)=\"routerLinkActiveChange($event)\"\n >{{ title() }}</a\n >\n } @else {\n <button\n [disabled]=\"disabled()\"\n (click)=\"itemSelect.emit()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n >\n {{ title() }}\n </button>\n }\n </ng-content>\n <ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container>\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__description\">\n <ng-content select=\"[item-description]\" />\n</div>\n@if (opened()) {\n <ng-content select=\"tedi-vertical-stepper-item\" />\n}\n", styles: [".tedi-vertical-stepper-item{display:grid;position:relative;--_step-indicator-size: 24px;--_step-indicator-color: var(--general-text-secondary, #4b4e62);--_step-indicator-border: var(--stepper-step-default-border, #9293a4);--_step-indicator-border-hover: var( --stepper-step-default-border-hover, #005aa3 );--_step-indicator-border-width: 1px;--_step-indicator-background: var(--stepper-step-default-bg, #fff);--_step-indicator-background-hover: var(--stepper-step-default-bg, #fff);--_step-padding: var(--stepper-item-vertical-lg-padding-top, 8px);--_step-inner-spacing: var(--stepper-item-vertical-lg-inner-spacing, 8px);--_step-line-color: var(--stepper-item-vertical-line, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-default, #151926);--_step-title-color-hover: var(--stepper-item-vertical-text-hover, #004277);--_step-title-size: var(--body-regular-size, 16px);--_step-title-weight: var(--body-regular-weight, 400);--_step-title-line-height: var(--body-regular-line-height, 24px);--_step-title-spacing: var(--layout-grid-gutters-08, 8px);grid-template-areas:\"indicator title\" \". description\";grid-template-columns:auto 1fr;grid-auto-columns:auto;column-gap:var(--_step-inner-spacing);z-index:0}.tedi-vertical-stepper-item__indicator{grid-area:indicator;display:flex;align-items:center;justify-content:center;height:var(--_step-indicator-size);width:var(--_step-indicator-size);border:var(--_step-indicator-border) solid var(--_step-indicator-border-width);background-color:var(--_step-indicator-background);color:var(--_step-indicator-color);border-radius:9999px;font-size:var(--body-small-bold-size, 14px);font-weight:var(--body-bold-weight, 700);align-self:center;justify-self:center}.tedi-vertical-stepper-item__indicator:before{content:counter(step-number)}.tedi-vertical-stepper-item:has(>.tedi-vertical-stepper-item__title :is(button,a):hover)>.tedi-vertical-stepper-item__indicator{background-color:var(--_step-indicator-background-hover);border-color:var(--_step-indicator-border-hover)}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item){counter-increment:step-number}.tedi-vertical-stepper-item__title{grid-area:title;padding:var(--_step-padding) 0}.tedi-vertical-stepper-item__title a,.tedi-vertical-stepper-item__title button{padding:0;background:none;border:none;text-decoration:none;font-family:var(--family-default, Roboto);font-size:var(--_step-title-size);font-weight:var(--_step-title-weight);line-height:var(--_step-title-line-height);cursor:pointer;color:var(--_step-title-color)}.tedi-vertical-stepper-item__title a:hover,.tedi-vertical-stepper-item__title button:hover{color:var(--_step-title-color-hover)}.tedi-vertical-stepper-item__title a:hover:not(.tedi-vertical-stepper-item__toggle),.tedi-vertical-stepper-item__title button:hover:not(.tedi-vertical-stepper-item__toggle){text-decoration:underline}.tedi-vertical-stepper-item__toggle{display:flex;width:100%;align-items:center}.tedi-vertical-stepper-item__toggle:hover>span{text-decoration:underline}.tedi-vertical-stepper-item__toggle-icon{margin-left:auto;transition:transform .3s}.tedi-vertical-stepper-item__toggle-icon--opened{transform:rotateX(180deg)}.tedi-vertical-stepper-item__status-icon{margin-inline:var(--_step-title-spacing)}.tedi-vertical-stepper-item__description{grid-area:description}.tedi-vertical-stepper-item__description:empty{display:none}.tedi-vertical-stepper-item__line:before,.tedi-vertical-stepper-item__line:after{content:\"\";grid-row:1/span 1;grid-column:1/span 1;left:50%;transform:translate(-50%);position:absolute;width:1px;background-color:var(--_step-line-color);top:0;bottom:0;z-index:-1}.tedi-vertical-stepper-item__line:before{grid-row:1/span 1}.tedi-vertical-stepper-item__line:after{grid-row:2/span 1}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):first-child>.tedi-vertical-stepper-item__line:before{top:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child:not(:has(.tedi-vertical-stepper-item--sub-item))>.tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child>.tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item--compact{--_step-indicator-size: var(--stepper-item-vertical-step-size-md, 16px);--_step-padding: var(--stepper-item-vertical-compact-padding-top, 3px);--_step-inner-spacing: var( --stepper-item-vertical-compact-inner-spacing, 6px );--_step-title-spacing: var(--layout-grid-gutters-04, 4px)}.tedi-vertical-stepper-item--compact .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--compact.tedi-vertical-stepper-item--enumerated:not(.tedi-vertical-stepper-item--sub-item)>.tedi-vertical-stepper-item__title :is(a,button):before{content:counter(step-number) \".\";display:inline-block}.tedi-vertical-stepper-item--sub-item{grid-column:1/span 2;grid-template-columns:subgrid;--_step-indicator-size: var(--stepper-item-vertical-step-size-sm, 9px);--_step-padding: var(--stepper-item-vertical-padding-y-sm, 2px)}.tedi-vertical-stepper-item--sub-item .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--completed{--_step-indicator-background: var(--stepper-step-completed-bg, #266b42);--_step-indicator-border: var(--stepper-step-completed-bg, #266b42);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-completed-bg-hover, #1d5032 );--_step-indicator-background-hover: var( --stepper-step-completed-bg-hover, #1d5032 )}.tedi-vertical-stepper-item--error{--_step-indicator-background: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-border: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-danger-bg-hover, #812525 );--_step-indicator-background-hover: var( --stepper-step-danger-bg-hover, #812525 )}.tedi-vertical-stepper-item--selected{--_step-indicator-background: var(--stepper-step-selected-bg, #fff);--_step-indicator-color: var( --stepper-item-vertical-text-selected, #004277 );--_step-indicator-border: var(--stepper-step-selected-border, #004277);--_step-indicator-border-width: 2px;--_step-indicator-border-hover: var( --stepper-step-selected-border-hover, #003662 );--_step-title-color: var(--stepper-item-vertical-text-selected, #004277);--_step-title-weight: var(--body-bold-weight, 700)}.tedi-vertical-stepper-item--selected.tedi-vertical-stepper-item--compact:not(.tedi-vertical-stepper-item--sub-item){--_step-indicator-border-width: 4px}.tedi-vertical-stepper-item--disabled{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-color: var( --stepper-item-vertical-text-disabled, #9293a4 );--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-disabled, #9293a4)}.tedi-vertical-stepper-item--disabled .tedi-vertical-stepper-item__title{pointer-events:none}.tedi-vertical-stepper-item--informative{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--general-text-tertiary, #5d6071)}.tedi-vertical-stepper-item--informative .tedi-vertical-stepper-item__title{pointer-events:none}\n"] }]
|
|
3272
|
+
}] });
|
|
3273
|
+
|
|
3201
3274
|
class TableStylesComponent {
|
|
3202
3275
|
size = input("default");
|
|
3203
3276
|
verticalBorders = input(false, { transform: booleanAttribute });
|
|
@@ -3221,5 +3294,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3221
3294
|
* Generated bundle index. Do not edit.
|
|
3222
3295
|
*/
|
|
3223
3296
|
|
|
3224
|
-
export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzone, FileDropzoneComponent, FileDropzoneErrorCode, FileSizeStandards, FloatingButtonComponent, FormFieldComponent, IECFileSize, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SIFileSize, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableOfContentsComponent, TableOfContentsItemComponent, TableOfContentsNestedWrapperComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, formatBytes, getDefaultHelpers, modalBreakpoints, roundNumber, specialOptionControls, validateFileSize, validateFileType };
|
|
3297
|
+
export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzone, FileDropzoneComponent, FileDropzoneErrorCode, FileSizeStandards, FloatingButtonComponent, FormFieldComponent, IECFileSize, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SIFileSize, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableOfContentsComponent, TableOfContentsItemComponent, TableOfContentsNestedWrapperComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, VerticalStepperComponent, VerticalStepperItemComponent, formatBytes, getDefaultHelpers, modalBreakpoints, roundNumber, specialOptionControls, validateFileSize, validateFileType };
|
|
3225
3298
|
//# sourceMappingURL=tedi-design-system-angular-community.mjs.map
|