@indigina/ui-kit 1.1.479 → 1.1.480
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.
|
@@ -6351,7 +6351,6 @@ var KitTimelineType;
|
|
|
6351
6351
|
|
|
6352
6352
|
var KitStatusLabelColor;
|
|
6353
6353
|
(function (KitStatusLabelColor) {
|
|
6354
|
-
KitStatusLabelColor["WHITE"] = "white";
|
|
6355
6354
|
KitStatusLabelColor["PURPLE"] = "purple";
|
|
6356
6355
|
KitStatusLabelColor["TEAL"] = "teal";
|
|
6357
6356
|
KitStatusLabelColor["GREY"] = "grey";
|
|
@@ -6360,6 +6359,7 @@ var KitStatusLabelColor;
|
|
|
6360
6359
|
KitStatusLabelColor["BLUE"] = "blue";
|
|
6361
6360
|
KitStatusLabelColor["PINK"] = "pink";
|
|
6362
6361
|
KitStatusLabelColor["RED"] = "red";
|
|
6362
|
+
KitStatusLabelColor["WHITE"] = "white";
|
|
6363
6363
|
})(KitStatusLabelColor || (KitStatusLabelColor = {}));
|
|
6364
6364
|
var KitStatusLabelSize;
|
|
6365
6365
|
(function (KitStatusLabelSize) {
|
|
@@ -6391,6 +6391,7 @@ class KitTimelineCompactComponent {
|
|
|
6391
6391
|
this.kitSvgIcon = KitSvgIcon;
|
|
6392
6392
|
this.kitButtonType = KitButtonType;
|
|
6393
6393
|
this.kitButtonKind = KitButtonKind;
|
|
6394
|
+
this.kitStatusLabelColor = KitStatusLabelColor;
|
|
6394
6395
|
this.collapsedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedItems" }] : /* istanbul ignore next */ []));
|
|
6395
6396
|
effect(() => {
|
|
6396
6397
|
this.syncCollapsedItems(this.collapseAllSubItems(), this.items());
|
|
@@ -6414,7 +6415,7 @@ class KitTimelineCompactComponent {
|
|
|
6414
6415
|
this.collapsedItems.set(new Set(items.filter(item => !!item.subItems?.length)));
|
|
6415
6416
|
}
|
|
6416
6417
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTimelineCompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.itemTheme\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description let-item=\"item\">\n <div class=\"step-content\"\n [ngClass]=\"item.itemTheme\">\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 [iconType]=\"kitSvgIconType.STROKE\"\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 [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n <div class=\"description-text\">\n <div class=\"description-text-date\">{{ item.date }}</div>\n\n @if (item.description) {\n <span class=\"description-text-separator\">|</span>\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:not(:first-child){margin-top:1px}.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.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:2px}.kit-timeline-compact .description-text{display:flex;align-items:center;margin-top:2px;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.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.grey{color:var(--ui-kit-color-grey-20)}.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-items:before{content:\"\";position:absolute;top:25px;bottom:25px;left:45px;width:1px;background-color:var(--ui-kit-color-grey-19)}.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:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:after{content:\"\";position:absolute;top:9px;left:-15px;width:1px;height:16px;background-color:var(--ui-kit-color-grey-19)}.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"] }, { 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 }); }
|
|
6418
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.itemTheme\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description let-item=\"item\">\n <div class=\"step-content\"\n [ngClass]=\"item.itemTheme\">\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 [iconType]=\"kitSvgIconType.STROKE\"\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 [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 <div class=\"description-text-date\">{{ item.date }}</div>\n\n @if (item.description) {\n <span class=\"description-text-separator\">|</span>\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:not(:first-child){margin-top:1px}.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.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:2px}.kit-timeline-compact .description-text{display:flex;align-items:center;margin-top:2px;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.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.grey{color:var(--ui-kit-color-grey-20)}.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-items:before{content:\"\";position:absolute;top:25px;bottom:25px;left:45px;width:1px;background-color:var(--ui-kit-color-grey-19)}.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:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:after{content:\"\";position:absolute;top:9px;left:-15px;width:1px;height:16px;background-color:var(--ui-kit-color-grey-19)}.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"] }, { 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 }); }
|
|
6418
6419
|
}
|
|
6419
6420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTimelineCompactComponent, decorators: [{
|
|
6420
6421
|
type: Component,
|
|
@@ -6424,7 +6425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6424
6425
|
KitStatusLabelComponent,
|
|
6425
6426
|
NgTemplateOutlet,
|
|
6426
6427
|
KitButtonComponent,
|
|
6427
|
-
], 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.itemTheme\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description let-item=\"item\">\n <div class=\"step-content\"\n [ngClass]=\"item.itemTheme\">\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 [iconType]=\"kitSvgIconType.STROKE\"\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 [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n <div class=\"description-text\">\n <div class=\"description-text-date\">{{ item.date }}</div>\n\n @if (item.description) {\n <span class=\"description-text-separator\">|</span>\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:not(:first-child){margin-top:1px}.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.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:2px}.kit-timeline-compact .description-text{display:flex;align-items:center;margin-top:2px;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.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.grey{color:var(--ui-kit-color-grey-20)}.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-items:before{content:\"\";position:absolute;top:25px;bottom:25px;left:45px;width:1px;background-color:var(--ui-kit-color-grey-19)}.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:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:after{content:\"\";position:absolute;top:9px;left:-15px;width:1px;height:16px;background-color:var(--ui-kit-color-grey-19)}.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"] }]
|
|
6428
|
+
], 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.itemTheme\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description let-item=\"item\">\n <div class=\"step-content\"\n [ngClass]=\"item.itemTheme\">\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 [iconType]=\"kitSvgIconType.STROKE\"\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 [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 <div class=\"description-text-date\">{{ item.date }}</div>\n\n @if (item.description) {\n <span class=\"description-text-separator\">|</span>\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:not(:first-child){margin-top:1px}.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.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:2px}.kit-timeline-compact .description-text{display:flex;align-items:center;margin-top:2px;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.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.grey{color:var(--ui-kit-color-grey-20)}.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-items:before{content:\"\";position:absolute;top:25px;bottom:25px;left:45px;width:1px;background-color:var(--ui-kit-color-grey-19)}.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:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:after{content:\"\";position:absolute;top:9px;left:-15px;width:1px;height:16px;background-color:var(--ui-kit-color-grey-19)}.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"] }]
|
|
6428
6429
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], collapseAllSubItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAllSubItems", required: false }] }] } });
|
|
6429
6430
|
|
|
6430
6431
|
var KitTimelineCompactItemTheme;
|