@indigina/ui-kit 1.1.145 → 1.1.147

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.
@@ -4671,7 +4671,7 @@ class KitDatepickerComponent {
4671
4671
  documentClick(event) {
4672
4672
  const target = event.target;
4673
4673
  const popup = this.document.querySelector('.kit-datepicker-popup');
4674
- if (!this.elementRef?.nativeElement.contains(target) && !popup?.contains(target)) {
4674
+ if (!this.elementRef?.nativeElement.contains(target) && !popup?.contains(target) && !target?.matches('.k-link')) {
4675
4675
  this.datepicker.toggle(false);
4676
4676
  }
4677
4677
  }
@@ -6501,6 +6501,7 @@ const kitTranslations = {
6501
6501
  enterText: 'Enter Text',
6502
6502
  overrideMessage: 'Existing view will be overridden',
6503
6503
  invalidMessage: 'Special characters are not allowed',
6504
+ lengthMessage: 'The name must be 250 characters or fewer',
6504
6505
  noUnsavedChanges: 'No unsaved changes',
6505
6506
  manageViews: 'Manage Views',
6506
6507
  views: 'Views',
@@ -6731,16 +6732,30 @@ const navigateToView = (name, router, activatedRoute) => {
6731
6732
  };
6732
6733
  const kitEncodeViewNameToUrl = (name) => name.split(' ').join('-');
6733
6734
  const decodeViewNameFromUrl = (name) => name.split('-').join(' ');
6734
- const isViewNameValid = (name) => {
6735
+ const validateViewName = (views, viewName) => {
6735
6736
  const specialChars = '!@#$%^&*()_+[]{}|;:,.<>?/~`-=';
6736
- return [...specialChars].every(item => !name.includes(item));
6737
- };
6738
- const getInputMessage = (views, viewName) => {
6739
- if (!isViewNameValid(viewName)) {
6740
- return 'kit.views.invalidMessage';
6737
+ if ([...specialChars].some(item => viewName.includes(item))) {
6738
+ return {
6739
+ isValid: false,
6740
+ message: 'kit.views.invalidMessage',
6741
+ };
6742
+ }
6743
+ if (viewName.length > 250) {
6744
+ return {
6745
+ isValid: false,
6746
+ message: 'kit.views.lengthMessage',
6747
+ };
6741
6748
  }
6742
- const isViewExist = !!views.find(item => item.title === viewName);
6743
- return isViewExist && 'kit.views.overrideMessage' || '';
6749
+ if (views.some(view => view.title === viewName)) {
6750
+ return {
6751
+ isValid: true,
6752
+ message: 'kit.views.overrideMessage',
6753
+ };
6754
+ }
6755
+ return {
6756
+ isValid: true,
6757
+ message: '',
6758
+ };
6744
6759
  };
6745
6760
 
6746
6761
  class FetchGridViews extends AbstractPayloadAction {
@@ -7039,13 +7054,6 @@ class KitGridViewsSaveComponent {
7039
7054
  this.hasUnsavedChanges = signal(false);
7040
7055
  this.selectedView = this.store.selectSignal(KitGridViewsState.selectedView);
7041
7056
  }
7042
- get isViewNameValid() {
7043
- return isViewNameValid(this.viewName());
7044
- }
7045
- get inputMessage() {
7046
- const infoMessage = getInputMessage(this.views(), this.viewName());
7047
- return infoMessage && this.translateService.instant(infoMessage) || '';
7048
- }
7049
7057
  ngOnInit() {
7050
7058
  this.store.select(KIT_GRID_STATE_TOKEN).pipe(filter(({ columns }) => !!columns.length)).subscribe(({ filter, sort, columns }) => {
7051
7059
  const selectedViewState = {
@@ -7061,6 +7069,13 @@ class KitGridViewsSaveComponent {
7061
7069
  this.hasUnsavedChanges.set(JSON.stringify(selectedViewState) !== JSON.stringify(currentViewState));
7062
7070
  });
7063
7071
  }
7072
+ get isViewNameValid() {
7073
+ return validateViewName(this.views(), this.viewName()).isValid;
7074
+ }
7075
+ get inputMessage() {
7076
+ const messageKey = validateViewName(this.views(), this.viewName()).message;
7077
+ return messageKey && this.translateService.instant(messageKey) || '';
7078
+ }
7064
7079
  onPopupToggle() {
7065
7080
  this.viewName.set('');
7066
7081
  this.popup()?.toggle();
@@ -7158,8 +7173,8 @@ class KitGridViewsManagerComponent extends DialogContentBase {
7158
7173
  this.checkChanges();
7159
7174
  }
7160
7175
  checkChanges() {
7161
- const config = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.config;
7162
- const usedConfig = config?.viewState?.config?.map(view => ({ title: view.title, hidden: view.hidden ?? false })) ?? [];
7176
+ const views = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.views;
7177
+ const usedConfig = views.map(view => ({ title: view.title, hidden: view.hidden ?? false })) ?? [];
7163
7178
  const updatedViews = this.items().map(view => ({ title: view.title, hidden: view.hidden ?? false }));
7164
7179
  this.hasUnsavedChanges.set(JSON.stringify(usedConfig) !== JSON.stringify(updatedViews));
7165
7180
  }
@@ -7181,13 +7196,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
7181
7196
  }], ctorParameters: () => [{ type: i1$c.Store }, { type: i1$7.DialogRef }] });
7182
7197
 
7183
7198
  class KitGridViewsComponent {
7184
- get isViewNameValid() {
7185
- return isViewNameValid(this.createNewViewName());
7186
- }
7187
- get inputMessage() {
7188
- const infoMessage = getInputMessage(this.views(), this.createNewViewName().toLowerCase());
7189
- return infoMessage && this.translateService.instant(infoMessage) || '';
7190
- }
7191
7199
  constructor(store, activatedRoute, router, destroyRef, titleCasePipe, kitDialogService, translateService, viewContainerRef, location) {
7192
7200
  this.store = store;
7193
7201
  this.activatedRoute = activatedRoute;
@@ -7250,6 +7258,13 @@ class KitGridViewsComponent {
7250
7258
  ngOnDestroy() {
7251
7259
  this.store.dispatch(new StateReset(KitGridViewsState));
7252
7260
  }
7261
+ get isViewNameValid() {
7262
+ return validateViewName(this.views(), this.createNewViewName()).isValid;
7263
+ }
7264
+ get inputMessage() {
7265
+ const messageKey = validateViewName(this.views(), this.createNewViewName()).message;
7266
+ return messageKey && this.translateService.instant(messageKey) || '';
7267
+ }
7253
7268
  onSelectView(selectedView) {
7254
7269
  this.location.go(this.router.createUrlTree([`../${selectedView.title}`], { relativeTo: this.activatedRoute }).toString());
7255
7270
  this.store.dispatch(new SetSelectedView(selectedView));
@@ -7265,9 +7280,14 @@ class KitGridViewsComponent {
7265
7280
  this.kitDialogService.dialogRef?.result.pipe(filter(result => !(result instanceof DialogCloseResult))).subscribe(() => {
7266
7281
  const views = this.store.selectSnapshot(KitGridViewsState.getViews());
7267
7282
  const view = findGridViewByName(views, this.selectedView()?.title ?? '');
7268
- return view
7269
- ? this.store.dispatch(new SetSelectedView(view))
7270
- : navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
7283
+ if (view) {
7284
+ this.store.dispatch(new SetSelectedView(view));
7285
+ }
7286
+ else {
7287
+ const defaultView = findGridViewByName(views, this.defaultViewName());
7288
+ navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
7289
+ defaultView && this.store.dispatch(new SetSelectedView(defaultView));
7290
+ }
7271
7291
  });
7272
7292
  }
7273
7293
  onViewCreate() {
@@ -7336,7 +7356,7 @@ class KitGridViewsComponent {
7336
7356
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$c.Store }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }, { token: i0.DestroyRef }, { token: i1$1.TitleCasePipe }, { token: KitDialogService }, { token: i1$9.TranslateService }, { token: i0.ViewContainerRef }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
7337
7357
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsComponent, isStandalone: true, selector: "kit-grid-views", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, systemViews: { classPropertyName: "systemViews", publicName: "systemViews", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, providers: [
7338
7358
  TitleCasePipe,
7339
- ], viewQueries: [{ propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n @if (views$ | async; as views) {\n <div class=\"views-list\">\n <kit-collapsed-list #toggleButton\n [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownFooterTemplate]=\"dropdownFooter\"\n [dropdownItemTemplate]=\"dropdownItem\"\n [alwaysShowDropdown]=\"true\"\n (onSelectItem)=\"onSelectView($event)\"/>\n </div>\n\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n ></kit-grid-views-save>\n }\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n\n<ng-template #collapsedListItem let-item>\n <kit-button class=\"views-item\"\n [ngClass]=\"item.type\"\n [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n [label]=\"item.title | titlecase\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n <div class=\"dropdown-footer\">\n <kit-button [label]=\"'kit.views.newView' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onPopupToggle()\"/>\n <kit-button [label]=\"'kit.views.manageViews' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"views()?.length < 2\"\n (clicked)=\"openViewsManagerModal()\"/>\n </div>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"collapsedList()?.dropdown()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox [defaultValue]=\"createNewViewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"createNewViewName.set($event)\"\n ></kit-textbox>\n <div class=\"new-view-action\">\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"createNewViewPopup()?.close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!createNewViewName() || !isViewNameValid\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n <div class=\"views-item\"\n [ngClass]=\"dataItem.type\"\n [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n <kit-svg-icon class=\"view-icon\"\n [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n ></kit-svg-icon>\n <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n <kit-svg-icon class=\"check-icon\"\n [icon]=\"kitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown"], outputs: ["onSelectItem"] }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }, { 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$9.TranslatePipe, name: "translate" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7359
+ ], viewQueries: [{ propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n @if (views$ | async; as views) {\n <div class=\"views-list\">\n <kit-collapsed-list #toggleButton\n [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownFooterTemplate]=\"dropdownFooter\"\n [dropdownItemTemplate]=\"dropdownItem\"\n [alwaysShowDropdown]=\"true\"\n (onSelectItem)=\"onSelectView($event)\"/>\n </div>\n\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n ></kit-grid-views-save>\n }\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n\n<ng-template #collapsedListItem let-item>\n <kit-button class=\"views-item\"\n [ngClass]=\"item.type\"\n [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n [label]=\"item.title | titlecase\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n <div class=\"dropdown-footer\">\n <kit-button [label]=\"'kit.views.newView' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onPopupToggle()\"/>\n <kit-button [label]=\"'kit.views.manageViews' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"/>\n </div>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(collapsedList()?.dropdown())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox [defaultValue]=\"createNewViewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"createNewViewName.set($event)\"\n ></kit-textbox>\n <div class=\"new-view-action\">\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"createNewViewPopup()?.close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!createNewViewName() || !isViewNameValid\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n <div class=\"views-item\"\n [ngClass]=\"dataItem.type\"\n [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n <kit-svg-icon class=\"view-icon\"\n [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n ></kit-svg-icon>\n <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n <kit-svg-icon class=\"check-icon\"\n [icon]=\"kitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown"], outputs: ["onSelectItem"] }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }, { 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$9.TranslatePipe, name: "translate" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7340
7360
  }
7341
7361
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, decorators: [{
7342
7362
  type: Component,
@@ -7354,7 +7374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
7354
7374
  KitTextboxModule,
7355
7375
  ], providers: [
7356
7376
  TitleCasePipe,
7357
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n @if (views$ | async; as views) {\n <div class=\"views-list\">\n <kit-collapsed-list #toggleButton\n [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownFooterTemplate]=\"dropdownFooter\"\n [dropdownItemTemplate]=\"dropdownItem\"\n [alwaysShowDropdown]=\"true\"\n (onSelectItem)=\"onSelectView($event)\"/>\n </div>\n\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n ></kit-grid-views-save>\n }\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n\n<ng-template #collapsedListItem let-item>\n <kit-button class=\"views-item\"\n [ngClass]=\"item.type\"\n [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n [label]=\"item.title | titlecase\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n <div class=\"dropdown-footer\">\n <kit-button [label]=\"'kit.views.newView' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onPopupToggle()\"/>\n <kit-button [label]=\"'kit.views.manageViews' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"views()?.length < 2\"\n (clicked)=\"openViewsManagerModal()\"/>\n </div>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"collapsedList()?.dropdown()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox [defaultValue]=\"createNewViewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"createNewViewName.set($event)\"\n ></kit-textbox>\n <div class=\"new-view-action\">\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"createNewViewPopup()?.close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!createNewViewName() || !isViewNameValid\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n <div class=\"views-item\"\n [ngClass]=\"dataItem.type\"\n [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n <kit-svg-icon class=\"view-icon\"\n [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n ></kit-svg-icon>\n <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n <kit-svg-icon class=\"check-icon\"\n [icon]=\"kitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"] }]
7377
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n @if (views$ | async; as views) {\n <div class=\"views-list\">\n <kit-collapsed-list #toggleButton\n [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownFooterTemplate]=\"dropdownFooter\"\n [dropdownItemTemplate]=\"dropdownItem\"\n [alwaysShowDropdown]=\"true\"\n (onSelectItem)=\"onSelectView($event)\"/>\n </div>\n\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n ></kit-grid-views-save>\n }\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n\n<ng-template #collapsedListItem let-item>\n <kit-button class=\"views-item\"\n [ngClass]=\"item.type\"\n [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n [label]=\"item.title | titlecase\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n <div class=\"dropdown-footer\">\n <kit-button [label]=\"'kit.views.newView' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onPopupToggle()\"/>\n <kit-button [label]=\"'kit.views.manageViews' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"/>\n </div>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(collapsedList()?.dropdown())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox [defaultValue]=\"createNewViewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"createNewViewName.set($event)\"\n ></kit-textbox>\n <div class=\"new-view-action\">\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"createNewViewPopup()?.close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!createNewViewName() || !isViewNameValid\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n <div class=\"views-item\"\n [ngClass]=\"dataItem.type\"\n [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n <kit-svg-icon class=\"view-icon\"\n [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n ></kit-svg-icon>\n <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n <kit-svg-icon class=\"check-icon\"\n [icon]=\"kitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"] }]
7358
7378
  }], ctorParameters: () => [{ type: i1$c.Store }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }, { type: KitDialogService }, { type: i1$9.TranslateService }, { type: i0.ViewContainerRef }, { type: i1$1.Location }], propDecorators: { viewChanged: [{
7359
7379
  type: Output
7360
7380
  }] } });