@indigina/ui-kit 1.1.473 → 1.1.475

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.
@@ -6385,11 +6385,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
6385
6385
  class KitTimelineCompactComponent {
6386
6386
  constructor() {
6387
6387
  this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
6388
+ this.collapseAllSubItems = input(false, ...(ngDevMode ? [{ debugName: "collapseAllSubItems" }] : /* istanbul ignore next */ []));
6388
6389
  this.kitSvgIconType = KitSvgIconType;
6389
6390
  this.kitSvgIcon = KitSvgIcon;
6390
6391
  this.kitButtonType = KitButtonType;
6391
6392
  this.kitButtonKind = KitButtonKind;
6392
6393
  this.collapsedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedItems" }] : /* istanbul ignore next */ []));
6394
+ effect(() => {
6395
+ this.syncCollapsedItems(this.collapseAllSubItems(), this.items());
6396
+ });
6393
6397
  }
6394
6398
  isCollapsed(item) {
6395
6399
  return this.collapsedItems().has(item);
@@ -6401,8 +6405,15 @@ class KitTimelineCompactComponent {
6401
6405
  return next;
6402
6406
  });
6403
6407
  }
6408
+ syncCollapsedItems(collapseAllSubItems, items) {
6409
+ if (!collapseAllSubItems) {
6410
+ this.collapsedItems.set(new Set());
6411
+ return;
6412
+ }
6413
+ this.collapsedItems.set(new Set(items.filter(item => !!item.subItems?.length)));
6414
+ }
6404
6415
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTimelineCompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6405
- 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 } }, 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 class=\"sub-step-line\"></div>\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 .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-20)}.kit-timeline-compact .step-inner{position:relative;z-index:2;display:flex;padding:20px 0 0}.kit-timeline-compact .description-text{display:flex;align-items:center;margin-top:2px;color:var(--ui-kit-color-grey-23);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;margin-left: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%}.kit-timeline-compact .step-icon-wrapper.green{background:var(--ui-kit-color-green-8)}.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-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{padding-left:60px;overflow:hidden}.kit-timeline-compact .sub-item{position:relative;display:flex;padding:15px 0 0}.kit-timeline-compact .sub-item .step-icon-wrapper{width:16px;height:16px;margin-top:2px}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon{width:10px}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon:before{content:\"\";position:absolute;top:23px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-20)}.kit-timeline-compact .sub-item:last-child .sub-step-line{display:none}.kit-timeline-compact .sub-item .sub-step-line{position:absolute;top:8px;left:-15px;width:1px;height:calc(100% + 15px);background-color:var(--ui-kit-color-grey-20)}\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 }); }
6416
+ 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 }); }
6406
6417
  }
6407
6418
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTimelineCompactComponent, decorators: [{
6408
6419
  type: Component,
@@ -6412,14 +6423,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
6412
6423
  KitStatusLabelComponent,
6413
6424
  NgTemplateOutlet,
6414
6425
  KitButtonComponent,
6415
- ], 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 class=\"sub-step-line\"></div>\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 .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-20)}.kit-timeline-compact .step-inner{position:relative;z-index:2;display:flex;padding:20px 0 0}.kit-timeline-compact .description-text{display:flex;align-items:center;margin-top:2px;color:var(--ui-kit-color-grey-23);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;margin-left: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%}.kit-timeline-compact .step-icon-wrapper.green{background:var(--ui-kit-color-green-8)}.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-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{padding-left:60px;overflow:hidden}.kit-timeline-compact .sub-item{position:relative;display:flex;padding:15px 0 0}.kit-timeline-compact .sub-item .step-icon-wrapper{width:16px;height:16px;margin-top:2px}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon{width:10px}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon:before{content:\"\";position:absolute;top:23px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-20)}.kit-timeline-compact .sub-item:last-child .sub-step-line{display:none}.kit-timeline-compact .sub-item .sub-step-line{position:absolute;top:8px;left:-15px;width:1px;height:calc(100% + 15px);background-color:var(--ui-kit-color-grey-20)}\n"] }]
6416
- }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
6426
+ ], 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"] }]
6427
+ }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], collapseAllSubItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAllSubItems", required: false }] }] } });
6417
6428
 
6418
6429
  var KitTimelineCompactItemTheme;
6419
6430
  (function (KitTimelineCompactItemTheme) {
6420
6431
  KitTimelineCompactItemTheme["GREEN"] = "green";
6421
6432
  KitTimelineCompactItemTheme["BLUE"] = "blue";
6422
6433
  KitTimelineCompactItemTheme["GREY"] = "grey";
6434
+ KitTimelineCompactItemTheme["SUCCESS"] = "success";
6435
+ KitTimelineCompactItemTheme["WARNING"] = "warning";
6436
+ KitTimelineCompactItemTheme["DANGER"] = "danger";
6423
6437
  })(KitTimelineCompactItemTheme || (KitTimelineCompactItemTheme = {}));
6424
6438
 
6425
6439
  class KitFileCardMessagesComponent {
@@ -11597,7 +11611,7 @@ class KitGridCellService {
11597
11611
  }
11598
11612
  createCellValue(columnType, columnField, dataItem, translationMap = {}, defaultValue = '') {
11599
11613
  const value = this.getCellValue(dataItem, columnField);
11600
- if (columnField in translationMap && value) {
11614
+ if (columnField in translationMap && value != null && value !== '') {
11601
11615
  return this.translateService.instant(translationMap[columnField](value)) ?? defaultValue;
11602
11616
  }
11603
11617
  switch (columnType) {