@indigina/ui-kit 1.1.606 → 1.1.608
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/indigina-ui-kit-auth0.mjs +158 -0
- package/fesm2022/indigina-ui-kit-auth0.mjs.map +1 -0
- package/fesm2022/indigina-ui-kit.mjs +17 -2
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/package.json +16 -2
- package/types/indigina-ui-kit-auth0.d.ts +37 -0
- package/types/indigina-ui-kit.d.ts +23 -3
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, Injectable, makeEnvironmentProviders } from '@angular/core';
|
|
3
|
+
import { AuthService, authHttpInterceptorFn, provideAuth0 } from '@auth0/auth0-angular';
|
|
4
|
+
import { EMPTY } from 'rxjs';
|
|
5
|
+
import { filter, take, switchMap } from 'rxjs/operators';
|
|
6
|
+
import { withInterceptors } from '@angular/common/http';
|
|
7
|
+
|
|
8
|
+
class KitAuthService {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.auth0 = inject(AuthService);
|
|
11
|
+
this.loggingIn = false;
|
|
12
|
+
this.loggingOut = false;
|
|
13
|
+
}
|
|
14
|
+
isAuthenticated$() {
|
|
15
|
+
return this.auth0.isLoading$.pipe(filter((loading) => !loading), take(1), switchMap(() => this.auth0.isAuthenticated$));
|
|
16
|
+
}
|
|
17
|
+
getAccessToken$() {
|
|
18
|
+
if (this.loggingOut) {
|
|
19
|
+
return EMPTY;
|
|
20
|
+
}
|
|
21
|
+
return this.auth0.getAccessTokenSilently();
|
|
22
|
+
}
|
|
23
|
+
isLoggingOut() {
|
|
24
|
+
return this.loggingOut;
|
|
25
|
+
}
|
|
26
|
+
login(targetPath) {
|
|
27
|
+
if (this.loggingIn || this.loggingOut) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const target = targetPath ?? `${window.location.pathname}${window.location.search}${window.location.hash}`;
|
|
31
|
+
this.loggingIn = true;
|
|
32
|
+
this.auth0.loginWithRedirect({ appState: { target } }).subscribe({
|
|
33
|
+
error: () => {
|
|
34
|
+
this.loggingIn = false;
|
|
35
|
+
},
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
logout() {
|
|
39
|
+
this.loggingOut = true;
|
|
40
|
+
this.auth0
|
|
41
|
+
.logout({
|
|
42
|
+
logoutParams: {
|
|
43
|
+
returnTo: window.location.origin,
|
|
44
|
+
},
|
|
45
|
+
})
|
|
46
|
+
.subscribe({
|
|
47
|
+
error: () => {
|
|
48
|
+
this.loggingOut = false;
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
53
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitAuthService }); }
|
|
54
|
+
}
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitAuthService, decorators: [{
|
|
56
|
+
type: Injectable
|
|
57
|
+
}] });
|
|
58
|
+
|
|
59
|
+
const kitAuthHttpInterceptor = (request, next) => {
|
|
60
|
+
if (request.headers.has('Authorization')) {
|
|
61
|
+
return next(request);
|
|
62
|
+
}
|
|
63
|
+
const session = inject(KitAuthService, {
|
|
64
|
+
optional: true,
|
|
65
|
+
});
|
|
66
|
+
if (session?.isLoggingOut()) {
|
|
67
|
+
return EMPTY;
|
|
68
|
+
}
|
|
69
|
+
return authHttpInterceptorFn(request, next);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const DEFAULT_CACHE_LOCATION = 'localstorage';
|
|
73
|
+
const stripTrailingSlashes = (value) => {
|
|
74
|
+
let end = value.length;
|
|
75
|
+
while (end > 0 && value[end - 1] === '/') {
|
|
76
|
+
end -= 1;
|
|
77
|
+
}
|
|
78
|
+
return value.slice(0, end);
|
|
79
|
+
};
|
|
80
|
+
const isValidApiBaseUrl = (value, parsed) => /^https?:\/\/[^/]/i.test(value) &&
|
|
81
|
+
!!parsed.hostname &&
|
|
82
|
+
!value.includes('*') &&
|
|
83
|
+
!value.includes('\\') &&
|
|
84
|
+
!/\s/.test(value) &&
|
|
85
|
+
!parsed.username &&
|
|
86
|
+
!parsed.password &&
|
|
87
|
+
!value.includes('?') &&
|
|
88
|
+
!value.includes('#');
|
|
89
|
+
const buildAllowedList = (apiUrls) => {
|
|
90
|
+
if (apiUrls.length === 0) {
|
|
91
|
+
throw new Error('Auth0 API allowlist must contain at least one URL');
|
|
92
|
+
}
|
|
93
|
+
return apiUrls.flatMap((apiUrl) => {
|
|
94
|
+
const normalized = apiUrl.trim();
|
|
95
|
+
if (!normalized) {
|
|
96
|
+
throw new Error('Auth0 API allowlist contains an empty URL');
|
|
97
|
+
}
|
|
98
|
+
let parsed;
|
|
99
|
+
try {
|
|
100
|
+
parsed = new URL(normalized);
|
|
101
|
+
}
|
|
102
|
+
catch {
|
|
103
|
+
throw new Error('Auth0 API allowlist must contain absolute HTTP(S) URLs without wildcards, credentials, queries, or fragments');
|
|
104
|
+
}
|
|
105
|
+
if (!isValidApiBaseUrl(normalized, parsed)) {
|
|
106
|
+
throw new Error('Auth0 API allowlist must contain absolute HTTP(S) URLs without wildcards, credentials, queries, or fragments');
|
|
107
|
+
}
|
|
108
|
+
const baseUrl = stripTrailingSlashes(parsed.href);
|
|
109
|
+
return [
|
|
110
|
+
baseUrl,
|
|
111
|
+
`${baseUrl}/*`,
|
|
112
|
+
];
|
|
113
|
+
});
|
|
114
|
+
};
|
|
115
|
+
const buildAuthorizationParams = (settings) => {
|
|
116
|
+
const authorizationParams = {
|
|
117
|
+
redirect_uri: window.location.origin,
|
|
118
|
+
audience: settings.audience,
|
|
119
|
+
scope: 'openid profile email offline_access',
|
|
120
|
+
};
|
|
121
|
+
if (settings.connection) {
|
|
122
|
+
authorizationParams.connection = settings.connection;
|
|
123
|
+
}
|
|
124
|
+
return authorizationParams;
|
|
125
|
+
};
|
|
126
|
+
const withKitAuthHttpInterceptor = () => withInterceptors([kitAuthHttpInterceptor]);
|
|
127
|
+
const provideKitAuth0 = (settings, options) => {
|
|
128
|
+
const normalizedSettings = {
|
|
129
|
+
domain: settings.domain?.trim(),
|
|
130
|
+
clientId: settings.clientId?.trim(),
|
|
131
|
+
audience: settings.audience?.trim(),
|
|
132
|
+
connection: settings.connection?.trim() || undefined,
|
|
133
|
+
};
|
|
134
|
+
if (!normalizedSettings.domain || !normalizedSettings.clientId || !normalizedSettings.audience) {
|
|
135
|
+
throw new Error('Auth0 settings are incomplete: domain, clientId, and audience are required');
|
|
136
|
+
}
|
|
137
|
+
return makeEnvironmentProviders([
|
|
138
|
+
provideAuth0({
|
|
139
|
+
domain: normalizedSettings.domain,
|
|
140
|
+
clientId: normalizedSettings.clientId,
|
|
141
|
+
cacheLocation: options.cacheLocation ?? DEFAULT_CACHE_LOCATION,
|
|
142
|
+
useRefreshTokens: true,
|
|
143
|
+
useRefreshTokensFallback: false,
|
|
144
|
+
authorizationParams: buildAuthorizationParams(normalizedSettings),
|
|
145
|
+
httpInterceptor: {
|
|
146
|
+
allowedList: buildAllowedList(options.allowedApiUrls),
|
|
147
|
+
},
|
|
148
|
+
}),
|
|
149
|
+
KitAuthService,
|
|
150
|
+
]);
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Generated bundle index. Do not edit.
|
|
155
|
+
*/
|
|
156
|
+
|
|
157
|
+
export { KitAuthService, kitAuthHttpInterceptor, provideKitAuth0, withKitAuthHttpInterceptor };
|
|
158
|
+
//# sourceMappingURL=indigina-ui-kit-auth0.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indigina-ui-kit-auth0.mjs","sources":["../../../projects/ui-kit/auth0/src/lib/services/kit-auth.service.ts","../../../projects/ui-kit/auth0/src/lib/services/kit-auth-http.interceptor.ts","../../../projects/ui-kit/auth0/src/lib/services/provide-kit-auth.ts","../../../projects/ui-kit/auth0/indigina-ui-kit-auth0.ts"],"sourcesContent":["import { inject, Injectable } from '@angular/core';\nimport { AuthService } from '@auth0/auth0-angular';\nimport { EMPTY, Observable } from 'rxjs';\nimport { filter, switchMap, take } from 'rxjs/operators';\n\n@Injectable()\nexport class KitAuthService {\n private readonly auth0: AuthService = inject(AuthService);\n private loggingIn: boolean = false;\n private loggingOut: boolean = false;\n\n isAuthenticated$(): Observable<boolean> {\n return this.auth0.isLoading$.pipe(\n filter((loading: boolean) => !loading),\n take(1),\n switchMap(() => this.auth0.isAuthenticated$),\n );\n }\n\n getAccessToken$(): Observable<string> {\n if (this.loggingOut) {\n return EMPTY;\n }\n\n return this.auth0.getAccessTokenSilently();\n }\n\n isLoggingOut(): boolean {\n return this.loggingOut;\n }\n\n login(targetPath?: string): void {\n if (this.loggingIn || this.loggingOut) {\n return;\n }\n\n const target: string = targetPath ?? `${window.location.pathname}${window.location.search}${window.location.hash}`;\n this.loggingIn = true;\n this.auth0.loginWithRedirect({ appState: { target } }).subscribe({\n error: () => {\n this.loggingIn = false;\n },\n });\n }\n\n logout(): void {\n this.loggingOut = true;\n this.auth0\n .logout({\n logoutParams: {\n returnTo: window.location.origin,\n },\n })\n .subscribe({\n error: () => {\n this.loggingOut = false;\n },\n });\n }\n}\n","import { HttpInterceptorFn } from '@angular/common/http';\nimport { inject } from '@angular/core';\nimport { authHttpInterceptorFn } from '@auth0/auth0-angular';\nimport { EMPTY } from 'rxjs';\nimport { KitAuthService } from './kit-auth.service';\n\nexport const kitAuthHttpInterceptor: HttpInterceptorFn = (request, next) => {\n if (request.headers.has('Authorization')) {\n return next(request);\n }\n\n const session: KitAuthService | null = inject(KitAuthService, {\n optional: true,\n });\n if (session?.isLoggingOut()) {\n return EMPTY;\n }\n\n return authHttpInterceptorFn(request, next);\n};\n","import { HttpFeature, HttpFeatureKind, withInterceptors } from '@angular/common/http';\nimport {\n EnvironmentProviders,\n makeEnvironmentProviders,\n} from '@angular/core';\nimport { AuthorizationParams, provideAuth0 } from '@auth0/auth0-angular';\nimport {\n KitAuth0CacheLocation,\n KitAuth0Options,\n KitAuth0Settings,\n} from '../models/kit-auth0-settings.model';\nimport { kitAuthHttpInterceptor } from './kit-auth-http.interceptor';\nimport { KitAuthService } from './kit-auth.service';\n\nconst DEFAULT_CACHE_LOCATION: KitAuth0CacheLocation = 'localstorage';\n\nconst stripTrailingSlashes = (value: string): string => {\n let end: number = value.length;\n while (end > 0 && value[end - 1] === '/') {\n end -= 1;\n }\n\n return value.slice(0, end);\n};\n\nconst isValidApiBaseUrl = (value: string, parsed: URL): boolean =>\n /^https?:\\/\\/[^/]/i.test(value) &&\n !!parsed.hostname &&\n !value.includes('*') &&\n !value.includes('\\\\') &&\n !/\\s/.test(value) &&\n !parsed.username &&\n !parsed.password &&\n !value.includes('?') &&\n !value.includes('#');\n\nconst buildAllowedList = (apiUrls: readonly string[]): string[] => {\n if (apiUrls.length === 0) {\n throw new Error('Auth0 API allowlist must contain at least one URL');\n }\n\n return apiUrls.flatMap((apiUrl) => {\n const normalized: string = apiUrl.trim();\n if (!normalized) {\n throw new Error('Auth0 API allowlist contains an empty URL');\n }\n\n let parsed: URL;\n try {\n parsed = new URL(normalized);\n } catch {\n throw new Error('Auth0 API allowlist must contain absolute HTTP(S) URLs without wildcards, credentials, queries, or fragments');\n }\n\n if (!isValidApiBaseUrl(normalized, parsed)) {\n throw new Error('Auth0 API allowlist must contain absolute HTTP(S) URLs without wildcards, credentials, queries, or fragments');\n }\n\n const baseUrl: string = stripTrailingSlashes(parsed.href);\n\n return [\n baseUrl,\n `${baseUrl}/*`,\n ];\n });\n};\n\nconst buildAuthorizationParams = (\n settings: KitAuth0Settings,\n): AuthorizationParams => {\n const authorizationParams: AuthorizationParams = {\n redirect_uri: window.location.origin,\n audience: settings.audience,\n scope: 'openid profile email offline_access',\n };\n if (settings.connection) {\n authorizationParams.connection = settings.connection;\n }\n\n return authorizationParams;\n};\n\nexport const withKitAuthHttpInterceptor = (): HttpFeature<HttpFeatureKind.Interceptors> =>\n withInterceptors([kitAuthHttpInterceptor]);\n\nexport const provideKitAuth0 = (\n settings: KitAuth0Settings,\n options: KitAuth0Options,\n): EnvironmentProviders => {\n const normalizedSettings: KitAuth0Settings = {\n domain: settings.domain?.trim(),\n clientId: settings.clientId?.trim(),\n audience: settings.audience?.trim(),\n connection: settings.connection?.trim() || undefined,\n };\n if (!normalizedSettings.domain || !normalizedSettings.clientId || !normalizedSettings.audience) {\n throw new Error(\n 'Auth0 settings are incomplete: domain, clientId, and audience are required',\n );\n }\n\n return makeEnvironmentProviders([\n provideAuth0({\n domain: normalizedSettings.domain,\n clientId: normalizedSettings.clientId,\n cacheLocation: options.cacheLocation ?? DEFAULT_CACHE_LOCATION,\n useRefreshTokens: true,\n useRefreshTokensFallback: false,\n authorizationParams: buildAuthorizationParams(normalizedSettings),\n httpInterceptor: {\n allowedList: buildAllowedList(options.allowedApiUrls),\n },\n }),\n KitAuthService,\n ]);\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -8547,6 +8547,21 @@ class KitTimelineCompactComponent {
|
|
|
8547
8547
|
return next;
|
|
8548
8548
|
});
|
|
8549
8549
|
}
|
|
8550
|
+
resolveMeta(item) {
|
|
8551
|
+
const locationText = item.meta?.location?.text ?? item.description;
|
|
8552
|
+
const locationIcon = item.meta?.location?.icon ?? item.descriptionIcon;
|
|
8553
|
+
const locationIconType = item.meta?.location?.iconType ?? item.descriptionIconType;
|
|
8554
|
+
return {
|
|
8555
|
+
date: item.meta?.date ?? item.date ?? '',
|
|
8556
|
+
delayText: item.meta?.delayText ?? item.dateAdditionalText,
|
|
8557
|
+
location: locationText ? {
|
|
8558
|
+
text: locationText,
|
|
8559
|
+
icon: locationIcon,
|
|
8560
|
+
iconType: locationIconType,
|
|
8561
|
+
} : undefined,
|
|
8562
|
+
subjectName: item.meta?.subjectName ?? item.subjectName,
|
|
8563
|
+
};
|
|
8564
|
+
}
|
|
8550
8565
|
syncCollapsedItems(collapseAllSubItems, items) {
|
|
8551
8566
|
if (!collapseAllSubItems) {
|
|
8552
8567
|
this.collapsedItems.set(new Set());
|
|
@@ -8555,7 +8570,7 @@ class KitTimelineCompactComponent {
|
|
|
8555
8570
|
this.collapsedItems.set(new Set(items.filter(item => !!item.subItems?.length)));
|
|
8556
8571
|
}
|
|
8557
8572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTimelineCompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8558
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTimelineCompactComponent, isStandalone: true, selector: "kit-timeline-compact", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapseAllSubItems: { classPropertyName: "collapseAllSubItems", publicName: "collapseAllSubItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-timeline-compact\">\n @for (item of items(); track item) {\n <div class=\"step\">\n <div class=\"step-inner\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"item.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n\n @if (item.subItems?.length) {\n <div class=\"sub-items-wrapper\"\n [class.collapsed]=\"isCollapsed(item)\">\n <div class=\"sub-items\">\n @for (subItem of item.subItems; track subItem) {\n <div class=\"sub-item\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"subItem.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"subItem.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"subItem.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n <div class=\"step-line\"\n [ngClass]=\"item.lineTheme ?? kitTimelineCompactLineTheme.GREY\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description\n let-item=\"item\">\n <div class=\"step-content\">\n <div class=\"step-description\">\n <div class=\"description-title\">\n <div class=\"step-title\">{{ item.title }}</div>\n @if (item.subItems?.length) {\n <kit-button class=\"step-toggle-btn\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [class.collapsed]=\"isCollapsed(item)\"\n (click)=\"toggleSubItems(item)\" />\n }\n @if (item.label) {\n <kit-status-label class=\"step-content-label\"\n [tooltip]=\"item.labelTooltip\"\n [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n @if (item.status) {\n <div class=\"status-wrapper\">\n <kit-status-label [color]=\"item.statusColor ?? kitStatusLabelColor.BLUE\">\n {{ item.status }}\n </kit-status-label>\n </div>\n }\n\n <div class=\"description-text\">\n @if (item.date || item.dateAdditionalText) {\n <div class=\"description-text-date\">{{ item.date }}</div>\n\n @if (item.dateAdditionalText) {\n <div class=\"description-text-additional\">{{ item.dateAdditionalText }}</div>\n }\n\n @if (item.description) {\n <span class=\"description-text-separator\">|</span>\n }\n }\n\n @if (item.description) {\n @if (item.descriptionIcon) {\n <div class=\"description-icon\"\n [ngClass]=\"item.descriptionIconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.descriptionIcon\" />\n </div>\n }\n <div class=\"description-text-body\">{{ item.description }}</div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".kit-timeline-compact{display:flex;flex-direction:column;gap:20px}.kit-timeline-compact .step{position:relative}.kit-timeline-compact .step:last-child .step-line{display:none}.kit-timeline-compact .step-line{position:absolute;top:32px;left:15px;width:2px;height:100%;background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.black{background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.grey{background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-inner{position:relative;z-index:2;display:flex;gap:12px}.kit-timeline-compact .step-description{display:flex;flex-direction:column;gap:4px}.kit-timeline-compact .description-text{display:flex;align-items:center;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.kit-timeline-compact .description-text-date{white-space:nowrap}.kit-timeline-compact .description-text-additional{margin-left:5px;color:var(--ui-kit-color-red-1)}.kit-timeline-compact .description-text-separator{margin:0 5px}.kit-timeline-compact .description-title{display:flex;align-items:center}.kit-timeline-compact .description-title .step-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-kit-color-grey-22);font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:capitalize}.kit-timeline-compact .step-content{display:flex;align-items:flex-start;gap:12px}.kit-timeline-compact .step-content-label{margin-left:10px}.kit-timeline-compact .step-icon-wrapper{width:32px;height:32px;border-radius:50%;flex-shrink:0}.kit-timeline-compact .step-icon-wrapper.green{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.green .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.green .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.green .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.blue{background:var(--ui-kit-color-blue-2)}.kit-timeline-compact .step-icon-wrapper.blue .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.grey{background:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-icon-wrapper.grey .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.fill{fill:var(--ui-kit-color-grey-20);stroke:none}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-20)}.kit-timeline-compact .step-icon-wrapper.success{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.success .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.success .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.success .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.warning{background:var(--ui-kit-color-orange)}.kit-timeline-compact .step-icon-wrapper.warning .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.danger{background:var(--ui-kit-color-red-1)}.kit-timeline-compact .step-icon-wrapper.danger .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-toggle-btn{transition:transform .3s ease}.kit-timeline-compact .step-toggle-btn.collapsed{transform:rotate(-180deg)}.kit-timeline-compact .description-icon{width:16px;height:16px;margin-right:5px}.kit-timeline-compact .description-icon.fill{fill:var(--ui-kit-color-grey-23);stroke:none}.kit-timeline-compact .description-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-23)}.kit-timeline-compact .sub-items-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}.kit-timeline-compact .sub-items-wrapper.collapsed{grid-template-rows:0fr}.kit-timeline-compact .sub-items{position:relative;padding-left:60px;overflow:hidden}.kit-timeline-compact .sub-item{position:relative;display:flex;gap:12px;padding:15px 0 0}.kit-timeline-compact .sub-item:before{content:\"\";position:absolute;top:0;left:-15px;height:100%;width:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:after{content:\"\";position:absolute;top:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:before{top:5px;height:calc(100% - 5px)}.kit-timeline-compact .sub-item:last-child:before{height:25px}.kit-timeline-compact .sub-item .step-icon-wrapper{width:16px;height:16px;margin-top:2px;flex-shrink:0}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon{width:10px}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTimelineCompactComponent, isStandalone: true, selector: "kit-timeline-compact", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapseAllSubItems: { classPropertyName: "collapseAllSubItems", publicName: "collapseAllSubItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-timeline-compact\">\n @for (item of items(); track item) {\n <div class=\"step\">\n <div class=\"step-inner\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"item.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n\n @if (item.subItems?.length) {\n <div class=\"sub-items-wrapper\"\n [class.collapsed]=\"isCollapsed(item)\">\n <div class=\"sub-items\">\n @for (subItem of item.subItems; track subItem) {\n <div class=\"sub-item\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"subItem.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"subItem.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"subItem.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n <div class=\"step-line\"\n [ngClass]=\"item.lineTheme ?? kitTimelineCompactLineTheme.GREY\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description\n let-item=\"item\">\n <div class=\"step-content\">\n <div class=\"step-description\">\n <div class=\"description-title\">\n <div class=\"step-title\">{{ item.title }}</div>\n @if (item.subItems?.length) {\n <kit-button class=\"step-toggle-btn\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [class.collapsed]=\"isCollapsed(item)\"\n (click)=\"toggleSubItems(item)\" />\n }\n @if (item.label) {\n <kit-status-label class=\"step-content-label\"\n [tooltip]=\"item.labelTooltip\"\n [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n @if (item.status) {\n <div class=\"status-wrapper\">\n <kit-status-label [color]=\"item.statusColor ?? kitStatusLabelColor.BLUE\">\n {{ item.status }}\n </kit-status-label>\n </div>\n }\n\n <div class=\"description-text\">\n @let meta = resolveMeta(item);\n\n @if (meta.date || meta.delayText) {\n <div class=\"description-text-date\">{{ meta.date }}</div>\n\n @if (meta.delayText) {\n <div class=\"description-text-additional\">{{ meta.delayText }}</div>\n }\n\n @if (meta.location?.text || meta.subjectName) {\n <span class=\"description-text-separator\">|</span>\n }\n }\n\n @if (meta.location?.text) {\n @if (meta.location?.icon; as icon) {\n <div class=\"description-icon\"\n [ngClass]=\"meta.location?.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"icon\" />\n </div>\n }\n <div class=\"description-text-location\">{{ meta.location?.text }}</div>\n\n @if (meta.subjectName) {\n <span class=\"description-text-separator\">|</span>\n }\n }\n\n @if (meta.subjectName) {\n <div class=\"description-text-subject\">{{ meta.subjectName }}</div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".kit-timeline-compact{display:flex;flex-direction:column;gap:20px}.kit-timeline-compact .step{position:relative}.kit-timeline-compact .step:last-child .step-line{display:none}.kit-timeline-compact .step-line{position:absolute;top:32px;left:15px;width:2px;height:100%;background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.black{background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.grey{background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-inner{position:relative;z-index:2;display:flex;gap:12px}.kit-timeline-compact .step-description{display:flex;flex-direction:column;gap:4px}.kit-timeline-compact .description-text{display:flex;align-items:center;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.kit-timeline-compact .description-text-date{white-space:nowrap}.kit-timeline-compact .description-text-additional{margin-left:5px;color:var(--ui-kit-color-red-1)}.kit-timeline-compact .description-text-separator{margin:0 5px}.kit-timeline-compact .description-text-location,.kit-timeline-compact .description-text-subject{white-space:nowrap}.kit-timeline-compact .description-title{display:flex;align-items:center}.kit-timeline-compact .description-title .step-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-kit-color-grey-22);font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:capitalize}.kit-timeline-compact .step-content{display:flex;align-items:flex-start;gap:12px}.kit-timeline-compact .step-content-label{margin-left:10px}.kit-timeline-compact .step-icon-wrapper{width:32px;height:32px;border-radius:50%;flex-shrink:0}.kit-timeline-compact .step-icon-wrapper.green{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.green .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.green .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.green .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.blue{background:var(--ui-kit-color-blue-2)}.kit-timeline-compact .step-icon-wrapper.blue .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.grey{background:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-icon-wrapper.grey .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.fill{fill:var(--ui-kit-color-grey-20);stroke:none}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-20)}.kit-timeline-compact .step-icon-wrapper.success{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.success .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.success .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.success .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.warning{background:var(--ui-kit-color-orange)}.kit-timeline-compact .step-icon-wrapper.warning .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.danger{background:var(--ui-kit-color-red-1)}.kit-timeline-compact .step-icon-wrapper.danger .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-toggle-btn{transition:transform .3s ease}.kit-timeline-compact .step-toggle-btn.collapsed{transform:rotate(-180deg)}.kit-timeline-compact .description-icon{width:16px;height:16px;margin-right:5px}.kit-timeline-compact .description-icon.fill{fill:var(--ui-kit-color-grey-23);stroke:none}.kit-timeline-compact .description-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-23)}.kit-timeline-compact .sub-items-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}.kit-timeline-compact .sub-items-wrapper.collapsed{grid-template-rows:0fr}.kit-timeline-compact .sub-items{position:relative;padding-left:60px;overflow:hidden}.kit-timeline-compact .sub-item{position:relative;display:flex;gap:12px;padding:15px 0 0}.kit-timeline-compact .sub-item:before{content:\"\";position:absolute;top:0;left:-15px;height:100%;width:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:after{content:\"\";position:absolute;top:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:before{top:5px;height:calc(100% - 5px)}.kit-timeline-compact .sub-item:last-child:before{height:25px}.kit-timeline-compact .sub-item .step-icon-wrapper{width:16px;height:16px;margin-top:2px;flex-shrink:0}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon{width:10px}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8559
8574
|
}
|
|
8560
8575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTimelineCompactComponent, decorators: [{
|
|
8561
8576
|
type: Component,
|
|
@@ -8565,7 +8580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
8565
8580
|
KitStatusLabelComponent,
|
|
8566
8581
|
NgTemplateOutlet,
|
|
8567
8582
|
KitButtonComponent,
|
|
8568
|
-
], template: "<div class=\"kit-timeline-compact\">\n @for (item of items(); track item) {\n <div class=\"step\">\n <div class=\"step-inner\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"item.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n\n @if (item.subItems?.length) {\n <div class=\"sub-items-wrapper\"\n [class.collapsed]=\"isCollapsed(item)\">\n <div class=\"sub-items\">\n @for (subItem of item.subItems; track subItem) {\n <div class=\"sub-item\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"subItem.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"subItem.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"subItem.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n <div class=\"step-line\"\n [ngClass]=\"item.lineTheme ?? kitTimelineCompactLineTheme.GREY\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description\n let-item=\"item\">\n <div class=\"step-content\">\n <div class=\"step-description\">\n <div class=\"description-title\">\n <div class=\"step-title\">{{ item.title }}</div>\n @if (item.subItems?.length) {\n <kit-button class=\"step-toggle-btn\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [class.collapsed]=\"isCollapsed(item)\"\n (click)=\"toggleSubItems(item)\" />\n }\n @if (item.label) {\n <kit-status-label class=\"step-content-label\"\n [tooltip]=\"item.labelTooltip\"\n [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n @if (item.status) {\n <div class=\"status-wrapper\">\n <kit-status-label [color]=\"item.statusColor ?? kitStatusLabelColor.BLUE\">\n {{ item.status }}\n </kit-status-label>\n </div>\n }\n\n <div class=\"description-text\">\n @if (
|
|
8583
|
+
], template: "<div class=\"kit-timeline-compact\">\n @for (item of items(); track item) {\n <div class=\"step\">\n <div class=\"step-inner\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"item.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n\n @if (item.subItems?.length) {\n <div class=\"sub-items-wrapper\"\n [class.collapsed]=\"isCollapsed(item)\">\n <div class=\"sub-items\">\n @for (subItem of item.subItems; track subItem) {\n <div class=\"sub-item\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"subItem.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"subItem.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"subItem.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n <div class=\"step-line\"\n [ngClass]=\"item.lineTheme ?? kitTimelineCompactLineTheme.GREY\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description\n let-item=\"item\">\n <div class=\"step-content\">\n <div class=\"step-description\">\n <div class=\"description-title\">\n <div class=\"step-title\">{{ item.title }}</div>\n @if (item.subItems?.length) {\n <kit-button class=\"step-toggle-btn\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [class.collapsed]=\"isCollapsed(item)\"\n (click)=\"toggleSubItems(item)\" />\n }\n @if (item.label) {\n <kit-status-label class=\"step-content-label\"\n [tooltip]=\"item.labelTooltip\"\n [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n @if (item.status) {\n <div class=\"status-wrapper\">\n <kit-status-label [color]=\"item.statusColor ?? kitStatusLabelColor.BLUE\">\n {{ item.status }}\n </kit-status-label>\n </div>\n }\n\n <div class=\"description-text\">\n @let meta = resolveMeta(item);\n\n @if (meta.date || meta.delayText) {\n <div class=\"description-text-date\">{{ meta.date }}</div>\n\n @if (meta.delayText) {\n <div class=\"description-text-additional\">{{ meta.delayText }}</div>\n }\n\n @if (meta.location?.text || meta.subjectName) {\n <span class=\"description-text-separator\">|</span>\n }\n }\n\n @if (meta.location?.text) {\n @if (meta.location?.icon; as icon) {\n <div class=\"description-icon\"\n [ngClass]=\"meta.location?.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"icon\" />\n </div>\n }\n <div class=\"description-text-location\">{{ meta.location?.text }}</div>\n\n @if (meta.subjectName) {\n <span class=\"description-text-separator\">|</span>\n }\n }\n\n @if (meta.subjectName) {\n <div class=\"description-text-subject\">{{ meta.subjectName }}</div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".kit-timeline-compact{display:flex;flex-direction:column;gap:20px}.kit-timeline-compact .step{position:relative}.kit-timeline-compact .step:last-child .step-line{display:none}.kit-timeline-compact .step-line{position:absolute;top:32px;left:15px;width:2px;height:100%;background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.black{background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.grey{background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-inner{position:relative;z-index:2;display:flex;gap:12px}.kit-timeline-compact .step-description{display:flex;flex-direction:column;gap:4px}.kit-timeline-compact .description-text{display:flex;align-items:center;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.kit-timeline-compact .description-text-date{white-space:nowrap}.kit-timeline-compact .description-text-additional{margin-left:5px;color:var(--ui-kit-color-red-1)}.kit-timeline-compact .description-text-separator{margin:0 5px}.kit-timeline-compact .description-text-location,.kit-timeline-compact .description-text-subject{white-space:nowrap}.kit-timeline-compact .description-title{display:flex;align-items:center}.kit-timeline-compact .description-title .step-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-kit-color-grey-22);font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:capitalize}.kit-timeline-compact .step-content{display:flex;align-items:flex-start;gap:12px}.kit-timeline-compact .step-content-label{margin-left:10px}.kit-timeline-compact .step-icon-wrapper{width:32px;height:32px;border-radius:50%;flex-shrink:0}.kit-timeline-compact .step-icon-wrapper.green{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.green .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.green .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.green .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.blue{background:var(--ui-kit-color-blue-2)}.kit-timeline-compact .step-icon-wrapper.blue .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.grey{background:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-icon-wrapper.grey .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.fill{fill:var(--ui-kit-color-grey-20);stroke:none}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-20)}.kit-timeline-compact .step-icon-wrapper.success{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.success .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.success .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.success .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.warning{background:var(--ui-kit-color-orange)}.kit-timeline-compact .step-icon-wrapper.warning .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.danger{background:var(--ui-kit-color-red-1)}.kit-timeline-compact .step-icon-wrapper.danger .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-toggle-btn{transition:transform .3s ease}.kit-timeline-compact .step-toggle-btn.collapsed{transform:rotate(-180deg)}.kit-timeline-compact .description-icon{width:16px;height:16px;margin-right:5px}.kit-timeline-compact .description-icon.fill{fill:var(--ui-kit-color-grey-23);stroke:none}.kit-timeline-compact .description-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-23)}.kit-timeline-compact .sub-items-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}.kit-timeline-compact .sub-items-wrapper.collapsed{grid-template-rows:0fr}.kit-timeline-compact .sub-items{position:relative;padding-left:60px;overflow:hidden}.kit-timeline-compact .sub-item{position:relative;display:flex;gap:12px;padding:15px 0 0}.kit-timeline-compact .sub-item:before{content:\"\";position:absolute;top:0;left:-15px;height:100%;width:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:after{content:\"\";position:absolute;top:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:before{top:5px;height:calc(100% - 5px)}.kit-timeline-compact .sub-item:last-child:before{height:25px}.kit-timeline-compact .sub-item .step-icon-wrapper{width:16px;height:16px;margin-top:2px;flex-shrink:0}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon{width:10px}\n"] }]
|
|
8569
8584
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], collapseAllSubItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAllSubItems", required: false }] }] } });
|
|
8570
8585
|
|
|
8571
8586
|
const KIT_DATE_FORMAT = 'dd MMM yyyy';
|