@indigina/ui-kit 1.1.311 → 1.1.313
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/indigina-ui-kit.mjs +40 -26
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +6 -3
- package/package.json +1 -1
|
@@ -4142,13 +4142,14 @@ class KitPopupComponent {
|
|
|
4142
4142
|
this.closed = output();
|
|
4143
4143
|
this.kitButtonKind = KitButtonKind;
|
|
4144
4144
|
this.kitButtonType = KitButtonType;
|
|
4145
|
-
this.popupRef = null;
|
|
4145
|
+
this.popupRef = signal(null, ...(ngDevMode ? [{ debugName: "popupRef" }] : []));
|
|
4146
4146
|
this.onDocumentClick = (event) => {
|
|
4147
4147
|
const target = event.target;
|
|
4148
|
-
|
|
4148
|
+
const popupRef = this.popupRef();
|
|
4149
|
+
if (!popupRef || !target) {
|
|
4149
4150
|
return;
|
|
4150
4151
|
}
|
|
4151
|
-
const isInsidePopup =
|
|
4152
|
+
const isInsidePopup = popupRef.popupElement.contains(target);
|
|
4152
4153
|
const isInsideAnchor = this.anchorElement.contains(target);
|
|
4153
4154
|
const isInsideExtra = target instanceof HTMLElement && this.extraInsideSelectors().some(sel => !!target.closest(sel));
|
|
4154
4155
|
if (!isInsidePopup && !isInsideAnchor && !isInsideExtra) {
|
|
@@ -4157,10 +4158,10 @@ class KitPopupComponent {
|
|
|
4157
4158
|
};
|
|
4158
4159
|
}
|
|
4159
4160
|
get popupHTMLElement() {
|
|
4160
|
-
return this.popupRef?.popupElement || null;
|
|
4161
|
+
return this.popupRef()?.popupElement || null;
|
|
4161
4162
|
}
|
|
4162
4163
|
get isPopupOpen() {
|
|
4163
|
-
return !!this.popupRef;
|
|
4164
|
+
return !!this.popupRef();
|
|
4164
4165
|
}
|
|
4165
4166
|
get anchorElement() {
|
|
4166
4167
|
return this.anchor() instanceof ElementRef && this.anchor().nativeElement || this.anchor();
|
|
@@ -4173,11 +4174,11 @@ class KitPopupComponent {
|
|
|
4173
4174
|
this.removeOutsideClickListener();
|
|
4174
4175
|
}
|
|
4175
4176
|
toggle(options) {
|
|
4176
|
-
if (this.popupRef) {
|
|
4177
|
+
if (this.popupRef()) {
|
|
4177
4178
|
this.close();
|
|
4178
4179
|
}
|
|
4179
4180
|
else {
|
|
4180
|
-
this.popupRef
|
|
4181
|
+
this.popupRef.set(this.popupService.open({
|
|
4181
4182
|
...options,
|
|
4182
4183
|
anchor: this.anchor(),
|
|
4183
4184
|
content: this.popupTemplate,
|
|
@@ -4186,16 +4187,16 @@ class KitPopupComponent {
|
|
|
4186
4187
|
'kit-popup',
|
|
4187
4188
|
this.popupClass(),
|
|
4188
4189
|
],
|
|
4189
|
-
});
|
|
4190
|
+
}));
|
|
4190
4191
|
this.opened.emit();
|
|
4191
4192
|
}
|
|
4192
4193
|
}
|
|
4193
4194
|
close() {
|
|
4194
|
-
if (!this.popupRef) {
|
|
4195
|
+
if (!this.popupRef()) {
|
|
4195
4196
|
return;
|
|
4196
4197
|
}
|
|
4197
|
-
this.popupRef
|
|
4198
|
-
this.popupRef
|
|
4198
|
+
this.popupRef()?.close();
|
|
4199
|
+
this.popupRef.set(null);
|
|
4199
4200
|
this.closed.emit();
|
|
4200
4201
|
}
|
|
4201
4202
|
cancel() {
|
|
@@ -4595,6 +4596,7 @@ var KitCardTheme;
|
|
|
4595
4596
|
|
|
4596
4597
|
class KitCardComponent {
|
|
4597
4598
|
constructor() {
|
|
4599
|
+
this.router = inject(Router);
|
|
4598
4600
|
/**
|
|
4599
4601
|
* Defines card data
|
|
4600
4602
|
*/
|
|
@@ -4625,8 +4627,19 @@ class KitCardComponent {
|
|
|
4625
4627
|
this.itemsExpanded = !this.itemsExpanded;
|
|
4626
4628
|
this.toggleClicked.emit(this.itemsExpanded);
|
|
4627
4629
|
}
|
|
4630
|
+
openItemLink(item) {
|
|
4631
|
+
if (!item.disabled && item.link.length) {
|
|
4632
|
+
this.router.navigate(item.link, {
|
|
4633
|
+
...item.navigationExtras,
|
|
4634
|
+
queryParams: {
|
|
4635
|
+
...item.navigationExtras?.queryParams,
|
|
4636
|
+
},
|
|
4637
|
+
queryParamsHandling: 'replace',
|
|
4638
|
+
});
|
|
4639
|
+
}
|
|
4640
|
+
}
|
|
4628
4641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded", hideToggle: "hideToggle" }, outputs: { buttonClicked: "buttonClicked", toggleClicked: "toggleClicked" }, ngImport: i0, template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n [routerLink]=\"item.disabled ? null : item.link\">\n <div class=\"card-item-count\">{{ item.count ?? 0 }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1 && !hideToggle) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.buttonDisabled ? null : data.link\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
4642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded", hideToggle: "hideToggle" }, outputs: { buttonClicked: "buttonClicked", toggleClicked: "toggleClicked" }, ngImport: i0, template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? 0 }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1 && !hideToggle) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.buttonDisabled ? null : data.link\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
4630
4643
|
trigger('expandCollapse', [
|
|
4631
4644
|
state('true', style({ height: '*' })),
|
|
4632
4645
|
state('false', style({
|
|
@@ -4664,7 +4677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
4664
4677
|
RouterLink,
|
|
4665
4678
|
KitTooltipDirective,
|
|
4666
4679
|
NgClass,
|
|
4667
|
-
], template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n [routerLink]=\"item.disabled ? null : item.link\">\n <div class=\"card-item-count\">{{ item.count ?? 0 }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1 && !hideToggle) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.buttonDisabled ? null : data.link\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"] }]
|
|
4680
|
+
], template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? 0 }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1 && !hideToggle) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.buttonDisabled ? null : data.link\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"] }]
|
|
4668
4681
|
}], propDecorators: { data: [{
|
|
4669
4682
|
type: Input
|
|
4670
4683
|
}], theme: [{
|
|
@@ -7399,6 +7412,7 @@ class KitGridViewsSaveComponent {
|
|
|
7399
7412
|
this.kitTooltipPosition = KitTooltipPosition;
|
|
7400
7413
|
this.hasUnsavedChanges = signal(false, ...(ngDevMode ? [{ debugName: "hasUnsavedChanges" }] : []));
|
|
7401
7414
|
this.selectedView = this.store.selectSignal(KitGridViewsState.selectedView);
|
|
7415
|
+
this.isViewSaving = signal(false, ...(ngDevMode ? [{ debugName: "isViewSaving" }] : []));
|
|
7402
7416
|
}
|
|
7403
7417
|
ngOnInit() {
|
|
7404
7418
|
this.store.select(KIT_GRID_STATE_TOKEN).pipe(filter(({ columns }) => !!columns.length)).subscribe(({ filter, sort, columns }) => {
|
|
@@ -7440,25 +7454,26 @@ class KitGridViewsSaveComponent {
|
|
|
7440
7454
|
columns: buildGridViewColumns(columns),
|
|
7441
7455
|
},
|
|
7442
7456
|
};
|
|
7457
|
+
this.isViewSaving.set(true);
|
|
7443
7458
|
this.store.dispatch(new AddGridView(view)).subscribe(() => {
|
|
7444
7459
|
this.hasUnsavedChanges.set(false);
|
|
7445
7460
|
const path = kitEncodeViewNameToUrl(this.viewName().toLowerCase());
|
|
7446
7461
|
this.resetQueryParams.emit();
|
|
7447
|
-
|
|
7448
|
-
|
|
7449
|
-
this.
|
|
7462
|
+
this.popup()?.close();
|
|
7463
|
+
this.router.navigate([`../${path}`], { relativeTo: this.activatedRoute }).then(() => {
|
|
7464
|
+
this.isViewSaving.set(false);
|
|
7450
7465
|
this.store.dispatch(new SetSelectedView(view));
|
|
7451
7466
|
});
|
|
7452
7467
|
});
|
|
7453
7468
|
}
|
|
7454
7469
|
onValueChange(value) {
|
|
7455
|
-
if (
|
|
7470
|
+
if (value === null) {
|
|
7456
7471
|
return;
|
|
7457
7472
|
}
|
|
7458
7473
|
this.viewName.set(value);
|
|
7459
7474
|
}
|
|
7460
7475
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsSaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7461
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resetQueryParams: "resetQueryParams" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n kitTooltip\n class=\"grid-views-save-btn\"\n kitTooltipFilter=\".grid-views-save-btn\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n [active]=\"popup.isPopupOpen\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"grid-views-save\">\n <kit-autocomplete class=\"grid-views-save-input\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [allowCustom]=\"true\"\n [items]=\"viewsAutocompleteItems() ?? []\"\n [closePopupIfDataNotFound]=\"true\"\n [invalid]=\"!isViewNameValid\"\n [messageText]=\"inputMessage\"\n (filterChanged)=\"onValueChange($event)\"\n (valueChanged)=\"viewName.set($event)\"\n (selectionChanged)=\"onValueChange($event)\"\n ></kit-autocomplete>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!viewName() || !isViewNameValid\"\n (clicked)=\"onViewSave()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["selectedValueChange", "disabledChange", "filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$c.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7476
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resetQueryParams: "resetQueryParams" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n kitTooltip\n class=\"grid-views-save-btn\"\n kitTooltipFilter=\".grid-views-save-btn\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n [active]=\"popup.isPopupOpen\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"grid-views-save\">\n <kit-autocomplete class=\"grid-views-save-input\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [allowCustom]=\"true\"\n [items]=\"viewsAutocompleteItems() ?? []\"\n [closePopupIfDataNotFound]=\"true\"\n [invalid]=\"!isViewNameValid\"\n [messageText]=\"inputMessage\"\n (filterChanged)=\"onValueChange($event)\"\n (valueChanged)=\"viewName.set($event)\"\n (selectionChanged)=\"onValueChange($event)\"\n ></kit-autocomplete>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!viewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewSave()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["selectedValueChange", "disabledChange", "filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$c.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7462
7477
|
}
|
|
7463
7478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsSaveComponent, decorators: [{
|
|
7464
7479
|
type: Component,
|
|
@@ -7468,7 +7483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
7468
7483
|
KitAutocompleteComponent,
|
|
7469
7484
|
TranslateModule,
|
|
7470
7485
|
KitTooltipDirective,
|
|
7471
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n kitTooltip\n class=\"grid-views-save-btn\"\n kitTooltipFilter=\".grid-views-save-btn\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n [active]=\"popup.isPopupOpen\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"grid-views-save\">\n <kit-autocomplete class=\"grid-views-save-input\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [allowCustom]=\"true\"\n [items]=\"viewsAutocompleteItems() ?? []\"\n [closePopupIfDataNotFound]=\"true\"\n [invalid]=\"!isViewNameValid\"\n [messageText]=\"inputMessage\"\n (filterChanged)=\"onValueChange($event)\"\n (valueChanged)=\"viewName.set($event)\"\n (selectionChanged)=\"onValueChange($event)\"\n ></kit-autocomplete>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!viewName() || !isViewNameValid\"\n (clicked)=\"onViewSave()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"] }]
|
|
7486
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n kitTooltip\n class=\"grid-views-save-btn\"\n kitTooltipFilter=\".grid-views-save-btn\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n [active]=\"popup.isPopupOpen\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"grid-views-save\">\n <kit-autocomplete class=\"grid-views-save-input\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [allowCustom]=\"true\"\n [items]=\"viewsAutocompleteItems() ?? []\"\n [closePopupIfDataNotFound]=\"true\"\n [invalid]=\"!isViewNameValid\"\n [messageText]=\"inputMessage\"\n (filterChanged)=\"onValueChange($event)\"\n (valueChanged)=\"viewName.set($event)\"\n (selectionChanged)=\"onValueChange($event)\"\n ></kit-autocomplete>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!viewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewSave()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"] }]
|
|
7472
7487
|
}] });
|
|
7473
7488
|
|
|
7474
7489
|
class KitGridViewsComponent {
|
|
@@ -7570,7 +7585,6 @@ class KitGridViewsComponent {
|
|
|
7570
7585
|
});
|
|
7571
7586
|
}
|
|
7572
7587
|
onViewCreate() {
|
|
7573
|
-
this.isViewSaving.set(true);
|
|
7574
7588
|
const view = {
|
|
7575
7589
|
title: this.createNewViewName(),
|
|
7576
7590
|
group: this.viewGroup(),
|
|
@@ -7582,11 +7596,11 @@ class KitGridViewsComponent {
|
|
|
7582
7596
|
columns: buildGridViewColumns(this.defaultColumns()),
|
|
7583
7597
|
},
|
|
7584
7598
|
};
|
|
7599
|
+
this.isViewSaving.set(true);
|
|
7585
7600
|
this.store.dispatch(new AddGridView(view)).subscribe(() => {
|
|
7586
7601
|
this.resetQueryParams();
|
|
7602
|
+
this.createNewViewPopup()?.close();
|
|
7587
7603
|
this.navigateToView(this.createNewViewName()).then(() => {
|
|
7588
|
-
this.createNewViewName.set('');
|
|
7589
|
-
this.createNewViewPopup()?.close();
|
|
7590
7604
|
this.isViewSaving.set(false);
|
|
7591
7605
|
this.store.dispatch(new SetSelectedView(view));
|
|
7592
7606
|
});
|
|
@@ -7719,7 +7733,7 @@ class KitGridViewsComponent {
|
|
|
7719
7733
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: [
|
|
7720
7734
|
TitleCasePipe,
|
|
7721
7735
|
KitGridUrlStateService,
|
|
7722
|
-
], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { 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 <div class=\"views-actions\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.addView' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"onCreateViewPopupToggle()\"\n ></kit-button>\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views()\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n (resetQueryParams)=\"resetQueryParams()\"\n ></kit-grid-views-save>\n <kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.manageViews' | translate\"\n [icon]=\"kitSvgIcon.VIEWS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n <div class=\"views-list\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [gap]=\"0\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n (selectItem)=\"onSelectView($event)\"/>\n </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n kitButtonType.GHOST || kitButtonType.LINK\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(anchor())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox class=\"new-view-input\"\n [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 <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ 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"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$c.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7736
|
+
], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { 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 <div class=\"views-actions\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.addView' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [active]=\"popup.isPopupOpen\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"onCreateViewPopupToggle()\"\n ></kit-button>\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views()\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n (resetQueryParams)=\"resetQueryParams()\"\n ></kit-grid-views-save>\n <kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.manageViews' | translate\"\n [icon]=\"kitSvgIcon.VIEWS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n <div class=\"views-list\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [gap]=\"0\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n (selectItem)=\"onSelectView($event)\"/>\n </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n kitButtonType.GHOST || kitButtonType.LINK\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(anchor())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox class=\"new-view-input\"\n [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 <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ 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"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$c.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7723
7737
|
}
|
|
7724
7738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsComponent, decorators: [{
|
|
7725
7739
|
type: Component,
|
|
@@ -7738,7 +7752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
7738
7752
|
], providers: [
|
|
7739
7753
|
TitleCasePipe,
|
|
7740
7754
|
KitGridUrlStateService,
|
|
7741
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n <div class=\"views-actions\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.addView' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"onCreateViewPopupToggle()\"\n ></kit-button>\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views()\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n (resetQueryParams)=\"resetQueryParams()\"\n ></kit-grid-views-save>\n <kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.manageViews' | translate\"\n [icon]=\"kitSvgIcon.VIEWS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n <div class=\"views-list\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [gap]=\"0\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n (selectItem)=\"onSelectView($event)\"/>\n </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n kitButtonType.GHOST || kitButtonType.LINK\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(anchor())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox class=\"new-view-input\"\n [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 <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"] }]
|
|
7755
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n <div class=\"views-actions\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.addView' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [active]=\"popup.isPopupOpen\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"onCreateViewPopupToggle()\"\n ></kit-button>\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views()\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n (resetQueryParams)=\"resetQueryParams()\"\n ></kit-grid-views-save>\n <kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.manageViews' | translate\"\n [icon]=\"kitSvgIcon.VIEWS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n <div class=\"views-list\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [gap]=\"0\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n (selectItem)=\"onSelectView($event)\"/>\n </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n kitButtonType.GHOST || kitButtonType.LINK\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(anchor())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox class=\"new-view-input\"\n [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 <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"] }]
|
|
7742
7756
|
}] });
|
|
7743
7757
|
|
|
7744
7758
|
class FetchUserSettings {
|
|
@@ -8858,7 +8872,7 @@ class KitGridExportComponent {
|
|
|
8858
8872
|
.replace(/'/g, ''');
|
|
8859
8873
|
}
|
|
8860
8874
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridExportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8861
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridExportComponent, isStandalone: true, selector: "kit-grid-export", inputs: { getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: true, transformFunction: null }, exportedFileName: { classPropertyName: "exportedFileName", publicName: "exportedFileName", isSignal: true, isRequired: true, transformFunction: null }, drawPdf: { classPropertyName: "drawPdf", publicName: "drawPdf", isSignal: true, isRequired: true, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: true, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-export\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.export.title' | translate\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [disabled]=\"!gridHasData() || isGridExporting()\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-grid-export-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <span class=\"kit-grid-export-popup-label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n [items]=\"gridExportOptions\" \n (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup-label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["disabledChange", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$c.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridExportComponent, isStandalone: true, selector: "kit-grid-export", inputs: { getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: true, transformFunction: null }, exportedFileName: { classPropertyName: "exportedFileName", publicName: "exportedFileName", isSignal: true, isRequired: true, transformFunction: null }, drawPdf: { classPropertyName: "drawPdf", publicName: "drawPdf", isSignal: true, isRequired: true, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: true, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-export\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.export.title' | translate\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [disabled]=\"!gridHasData() || isGridExporting()\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [active]=\"popup.isPopupOpen\"\n (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-grid-export-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <span class=\"kit-grid-export-popup-label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n [items]=\"gridExportOptions\" \n (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup-label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["disabledChange", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$c.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8862
8876
|
}
|
|
8863
8877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridExportComponent, decorators: [{
|
|
8864
8878
|
type: Component,
|
|
@@ -8868,7 +8882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
8868
8882
|
KitPopupComponent,
|
|
8869
8883
|
KitRadioButtonComponent,
|
|
8870
8884
|
KitTooltipDirective,
|
|
8871
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-export\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.export.title' | translate\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [disabled]=\"!gridHasData() || isGridExporting()\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-grid-export-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <span class=\"kit-grid-export-popup-label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n [items]=\"gridExportOptions\" \n (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup-label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"] }]
|
|
8885
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-export\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.export.title' | translate\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [disabled]=\"!gridHasData() || isGridExporting()\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [active]=\"popup.isPopupOpen\"\n (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-grid-export-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <span class=\"kit-grid-export-popup-label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n [items]=\"gridExportOptions\" \n (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup-label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"] }]
|
|
8872
8886
|
}] });
|
|
8873
8887
|
|
|
8874
8888
|
class KitGridCellComponent {
|