@indigina/ui-kit 1.1.134 → 1.1.136

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.
@@ -26,7 +26,7 @@ import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
26
26
  import { BehaviorSubject, filter, of, tap, map, combineLatest, combineLatestWith, distinctUntilChanged, debounceTime } from 'rxjs';
27
27
  import { v4 } from 'uuid';
28
28
  import * as i1$8 from '@progress/kendo-angular-dialog';
29
- import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult } from '@progress/kendo-angular-dialog';
29
+ import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog';
30
30
  export { DialogAction, DialogCloseResult, DialogContentBase, DialogRef } from '@progress/kendo-angular-dialog';
31
31
  import * as i1$9 from '@progress/kendo-angular-indicators';
32
32
  import { IndicatorsModule } from '@progress/kendo-angular-indicators';
@@ -5732,7 +5732,7 @@ class KitCollapsedListComponent {
5732
5732
  return width;
5733
5733
  }
5734
5734
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5735
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\"\n [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;gap:20px var(--kit-collapsed-list-gap, 20px);clip-path:inset(-10px 0 0 0)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5735
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\"\n [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;row-gap:15px;clip-path:xywh(0 -10px 100% 150%)}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5736
5736
  }
5737
5737
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
5738
5738
  type: Component,
@@ -5740,7 +5740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
5740
5740
  KitButtonModule,
5741
5741
  KitDropdownModule,
5742
5742
  NgTemplateOutlet,
5743
- ], template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\"\n [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;gap:20px var(--kit-collapsed-list-gap, 20px);clip-path:inset(-10px 0 0 0)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"] }]
5743
+ ], template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\"\n [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;row-gap:15px;clip-path:xywh(0 -10px 100% 150%)}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"] }]
5744
5744
  }] });
5745
5745
 
5746
5746
  class KitScrollNavigationComponent {
@@ -6322,20 +6322,21 @@ class KitSortableComponent {
6322
6322
  * An items list which is going to be rendered as sortable items
6323
6323
  */
6324
6324
  this.items = [];
6325
+ this.onDragEnd = output();
6325
6326
  this.itemTemplate = contentChild(TemplateRef);
6326
6327
  }
6327
6328
  get columnsCount() {
6328
6329
  return this.columnCount ?? null;
6329
6330
  }
6330
6331
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSortableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6331
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n [style.column-count]=\"columnsCount\"\n [kendoSortableBinding]=\"items\"\n [itemClass]=\"itemClass\"\n [activeItemClass]=\"activeItemClass\"\n [animation]=\"true\">\n <ng-template let-item=\"item\">\n @if (itemTemplate()) {\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n ></ng-container>\n } @else {\n {{ item }}\n }\n </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.SortableComponent, selector: "kendo-sortable", inputs: ["tabIndex", "data", "navigable", "navigatable", "animation", "disabledIndexes", "zone", "acceptZones", "itemStyle", "emptyItemStyle", "activeItemStyle", "disabledItemStyle", "itemClass", "activeItemClass", "emptyItemClass", "disabledItemClass", "emptyText", "activeIndex"], outputs: ["dragStart", "dragEnd", "dragOver", "dragLeave", "dataMove", "dataAdd", "dataRemove", "navigate"], exportAs: ["kendoSortable"] }, { kind: "directive", type: i2$4.SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: ["kendoSortableBinding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6332
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass" }, outputs: { onDragEnd: "onDragEnd" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n [style.column-count]=\"columnsCount\"\n [kendoSortableBinding]=\"items\"\n [itemClass]=\"itemClass\"\n [activeItemClass]=\"activeItemClass\"\n [animation]=\"true\"\n (dragEnd)=\"onDragEnd.emit($event)\">\n <ng-template let-item=\"item\">\n @if (itemTemplate()) {\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n ></ng-container>\n } @else {\n {{ item }}\n }\n </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.SortableComponent, selector: "kendo-sortable", inputs: ["tabIndex", "data", "navigable", "navigatable", "animation", "disabledIndexes", "zone", "acceptZones", "itemStyle", "emptyItemStyle", "activeItemStyle", "disabledItemStyle", "itemClass", "activeItemClass", "emptyItemClass", "disabledItemClass", "emptyText", "activeIndex"], outputs: ["dragStart", "dragEnd", "dragOver", "dragLeave", "dataMove", "dataAdd", "dataRemove", "navigate"], exportAs: ["kendoSortable"] }, { kind: "directive", type: i2$4.SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: ["kendoSortableBinding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6332
6333
  }
6333
6334
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSortableComponent, decorators: [{
6334
6335
  type: Component,
6335
6336
  args: [{ selector: 'kit-sortable', imports: [
6336
6337
  CommonModule,
6337
6338
  KENDO_SORTABLE,
6338
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-sortable class=\"kit-sortable\"\n [style.column-count]=\"columnsCount\"\n [kendoSortableBinding]=\"items\"\n [itemClass]=\"itemClass\"\n [activeItemClass]=\"activeItemClass\"\n [animation]=\"true\">\n <ng-template let-item=\"item\">\n @if (itemTemplate()) {\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n ></ng-container>\n } @else {\n {{ item }}\n }\n </ng-template>\n</kendo-sortable>\n" }]
6339
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-sortable class=\"kit-sortable\"\n [style.column-count]=\"columnsCount\"\n [kendoSortableBinding]=\"items\"\n [itemClass]=\"itemClass\"\n [activeItemClass]=\"activeItemClass\"\n [animation]=\"true\"\n (dragEnd)=\"onDragEnd.emit($event)\">\n <ng-template let-item=\"item\">\n @if (itemTemplate()) {\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n ></ng-container>\n } @else {\n {{ item }}\n }\n </ng-template>\n</kendo-sortable>\n" }]
6339
6340
  }], propDecorators: { items: [{
6340
6341
  type: Input
6341
6342
  }], columnCount: [{
@@ -6551,11 +6552,11 @@ const kitBuildGridDataResults = (data, loading, total) => ({
6551
6552
  },
6552
6553
  loading,
6553
6554
  });
6554
- const kitBuildSortString = (sort) => sort?.filter(item => item.dir)
6555
- .map(item => {
6556
- const field = item.field.split('.').join('/');
6557
- return `${field} ${item.dir}`;
6558
- }).join(',') ?? undefined;
6555
+ const kitBuildSortString = (sort) => {
6556
+ const sortString = sort?.filter(({ dir }) => dir)
6557
+ .map(({ field, dir }) => `${field.split('.').join('/')} ${dir}`).join(', ');
6558
+ return sortString !== '' && sortString || undefined;
6559
+ };
6559
6560
 
6560
6561
  var KitGridViewType;
6561
6562
  (function (KitGridViewType) {
@@ -6851,7 +6852,7 @@ class KitGridViewsManagerComponent extends DialogContentBase {
6851
6852
  this.items.update(items => items.filter(item => item.title !== view.title || item.type === KitGridViewType.SYSTEM));
6852
6853
  }
6853
6854
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$d.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
6854
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [ngClass]=\"item.type\">\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [ngClass]=\"{ disabled: isSystemView(item) }\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (isSystemView(item)) {\n <kit-svg-icon class=\"item-icon-system\"\n [icon]=\"kitSvgIcon.GLOBAL\"\n ></kit-svg-icon>\n }\n <kit-button [disabled]=\"isSystemView(item)\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onViewRemove(item)\"\n ></kit-button>\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6855
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [ngClass]=\"item.type\">\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [ngClass]=\"{ disabled: isSystemView(item) }\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (isSystemView(item)) {\n <kit-svg-icon class=\"item-icon-system\"\n [icon]=\"kitSvgIcon.GLOBAL\"\n ></kit-svg-icon>\n }\n <kit-button [disabled]=\"isSystemView(item)\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onViewRemove(item)\"\n ></kit-button>\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6855
6856
  }
6856
6857
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
6857
6858
  type: Component,
@@ -7944,36 +7945,20 @@ class KitGridColumnManagerComponent {
7944
7945
  this.kitButtonKind = KitButtonKind;
7945
7946
  this.kitButtonIconPosition = KitButtonIconPosition;
7946
7947
  this.kitSvgIcon = KitSvgIcon;
7948
+ this.hasUnsavedChanges = signal(false);
7947
7949
  }
7948
7950
  openColumnsDialog() {
7949
7951
  this.updatedColumns.set([...this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns]);
7950
- const cancelAction = {
7951
- text: this.translateService.instant('kit.columns.cancel'),
7952
- cssClass: `${KitButtonState.DEFAULT} ${KitButtonType.GHOST} ${KitButtonKind.MEDIUM}`,
7953
- };
7954
- const applyAction = {
7955
- text: this.translateService.instant('kit.columns.apply'),
7956
- cssClass: `${KitButtonState.DEFAULT} ${KitButtonType.PRIMARY} ${KitButtonKind.MEDIUM}`,
7957
- };
7958
7952
  this.kitDialogService.openDialog({
7959
7953
  title: this.translateService.instant('kit.columns.title'),
7960
7954
  content: this.dialogContent(),
7961
- actions: [
7962
- cancelAction,
7963
- applyAction,
7964
- ],
7965
- preventAction: (action) => {
7966
- if (action === applyAction) {
7967
- this.applyChanges();
7968
- }
7969
- return false;
7970
- },
7971
7955
  appendTo: this.viewContainerRef,
7972
7956
  });
7973
7957
  }
7974
7958
  onColumnVisibilityChange(event, column) {
7975
7959
  this.updatedColumns.update(items => items
7976
7960
  .map(item => item.field === column.field && { ...item, hidden: !event } || item));
7961
+ this.checkChanges();
7977
7962
  }
7978
7963
  applyChanges() {
7979
7964
  const { sort: sortDescriptor } = this.store.selectSnapshot(KIT_GRID_STATE_TOKEN);
@@ -7984,8 +7969,17 @@ class KitGridColumnManagerComponent {
7984
7969
  new SetGridColumns(this.updatedColumns()),
7985
7970
  ]);
7986
7971
  }
7972
+ close() {
7973
+ this.kitDialogService.closeDialog();
7974
+ }
7975
+ checkChanges() {
7976
+ const usedColumnsConfig = this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns;
7977
+ this.hasUnsavedChanges.set(JSON.stringify(this.updatedColumns()) !== JSON.stringify(usedColumnsConfig));
7978
+ }
7987
7979
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridColumnManagerComponent, deps: [{ token: KitDialogService }, { token: i1$d.Store }, { token: i1$b.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
7988
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridColumnManagerComponent, isStandalone: true, selector: "kit-grid-column-manager", viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<kit-button [label]=\"'kit.columns.title' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7980
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridColumnManagerComponent, isStandalone: true, selector: "kit-grid-column-manager", providers: [
7981
+ DialogRef,
7982
+ ], viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<kit-button [label]=\"'kit.columns.title' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\"\n (onDragEnd)=\"checkChanges()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'common.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'common.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-content{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7989
7983
  }
7990
7984
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridColumnManagerComponent, decorators: [{
7991
7985
  type: Component,
@@ -7996,7 +7990,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
7996
7990
  KitSortableComponent,
7997
7991
  KitSvgIconModule,
7998
7992
  NgClass,
7999
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button [label]=\"'kit.columns.title' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}\n"] }]
7993
+ KitDialogActionsComponent,
7994
+ ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
7995
+ DialogRef,
7996
+ ], template: "<kit-button [label]=\"'kit.columns.title' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\"\n (onDragEnd)=\"checkChanges()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'common.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'common.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-content{padding:0}\n"] }]
8000
7997
  }], ctorParameters: () => [{ type: KitDialogService }, { type: i1$d.Store }, { type: i1$b.TranslateService }, { type: i0.ViewContainerRef }] });
8001
7998
 
8002
7999
  // KitButton