@indigina/ui-kit 1.1.182 → 1.1.183
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, signal, TemplateRef, ViewChild, ContentChild,
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, viewChild, HostListener, signal, TemplateRef, ViewChild, ContentChild, Injectable, output, Host, Self, Inject, model, computed, contentChildren, ContentChildren, viewChildren, contentChild, InjectionToken, Optional } from '@angular/core';
|
|
3
3
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
4
4
|
import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -1029,6 +1029,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1029
1029
|
}]
|
|
1030
1030
|
}] });
|
|
1031
1031
|
|
|
1032
|
+
class KitTruncateTextComponent {
|
|
1033
|
+
constructor() {
|
|
1034
|
+
this.tooltip = viewChild.required(TooltipDirective);
|
|
1035
|
+
this.anchor = viewChild.required('anchor');
|
|
1036
|
+
this.content = viewChild.required('content');
|
|
1037
|
+
}
|
|
1038
|
+
onMouseEnter() {
|
|
1039
|
+
const el = this.content().nativeElement;
|
|
1040
|
+
if (el.offsetWidth < el.scrollWidth) {
|
|
1041
|
+
this.anchor().nativeElement.setAttribute('title', el.innerText);
|
|
1042
|
+
this.tooltip().tooltipClass = 'kit-tooltip';
|
|
1043
|
+
this.tooltip().toggle(this.anchor().nativeElement);
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
onMouseOver() {
|
|
1047
|
+
this.tooltip().hide();
|
|
1048
|
+
}
|
|
1049
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: KitTruncateTextComponent, isStandalone: true, selector: "kit-truncate-text", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseOver()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #anchor\n kendoTooltip\n class=\"kit-tooltip\"\n showOn=\"none\">\n <div #content \n class=\"truncate-text\">\n <ng-content/>\n </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1051
|
+
}
|
|
1052
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, decorators: [{
|
|
1053
|
+
type: Component,
|
|
1054
|
+
args: [{ selector: 'kit-truncate-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
1055
|
+
TooltipDirective,
|
|
1056
|
+
], template: "<div #anchor\n kendoTooltip\n class=\"kit-tooltip\"\n showOn=\"none\">\n <div #content \n class=\"truncate-text\">\n <ng-content/>\n </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"] }]
|
|
1057
|
+
}], propDecorators: { onMouseEnter: [{
|
|
1058
|
+
type: HostListener,
|
|
1059
|
+
args: ['mouseenter']
|
|
1060
|
+
}], onMouseOver: [{
|
|
1061
|
+
type: HostListener,
|
|
1062
|
+
args: ['mouseleave']
|
|
1063
|
+
}] } });
|
|
1064
|
+
|
|
1032
1065
|
function buildPopupClass(hideDefaultItem) {
|
|
1033
1066
|
if (hideDefaultItem) {
|
|
1034
1067
|
return DROPDOWN_POPUP_CLASS;
|
|
@@ -1141,7 +1174,7 @@ class KitDropdownComponent {
|
|
|
1141
1174
|
provide: NG_VALUE_ACCESSOR,
|
|
1142
1175
|
useExisting: forwardRef(() => KitDropdownComponent),
|
|
1143
1176
|
multi: true,
|
|
1144
|
-
}], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: KitDropdownItemTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"isValuePrimitive\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <
|
|
1177
|
+
}], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: KitDropdownItemTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"isValuePrimitive\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n @if (footerTemplate()) {\n <ng-template kendoDropDownListFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template kendoDropDownListNoDataTemplate>\n <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n </ng-template>\n }\n </kendo-dropdownlist>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "component", type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$4.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$4.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1145
1178
|
}
|
|
1146
1179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitDropdownComponent, decorators: [{
|
|
1147
1180
|
type: Component,
|
|
@@ -1149,7 +1182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1149
1182
|
provide: NG_VALUE_ACCESSOR,
|
|
1150
1183
|
useExisting: forwardRef(() => KitDropdownComponent),
|
|
1151
1184
|
multi: true,
|
|
1152
|
-
}], standalone: false, template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"isValuePrimitive\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <
|
|
1185
|
+
}], standalone: false, template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"isValuePrimitive\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n @if (footerTemplate()) {\n <ng-template kendoDropDownListFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template kendoDropDownListNoDataTemplate>\n <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n </ng-template>\n }\n </kendo-dropdownlist>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"] }]
|
|
1153
1186
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
1154
1187
|
type: Input
|
|
1155
1188
|
}], selectedItem: [{
|
|
@@ -1198,7 +1231,8 @@ class KitDropdownModule {
|
|
|
1198
1231
|
FormsModule,
|
|
1199
1232
|
KitSvgIconModule,
|
|
1200
1233
|
KitInputLabelModule,
|
|
1201
|
-
KitDropdownItemTemplateDirective
|
|
1234
|
+
KitDropdownItemTemplateDirective,
|
|
1235
|
+
KitTruncateTextComponent], exports: [KitDropdownComponent,
|
|
1202
1236
|
KitDropdownItemTemplateDirective] }); }
|
|
1203
1237
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitDropdownModule, imports: [DropDownListModule,
|
|
1204
1238
|
CommonModule,
|
|
@@ -1227,6 +1261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1227
1261
|
KitSvgIconModule,
|
|
1228
1262
|
KitInputLabelModule,
|
|
1229
1263
|
KitDropdownItemTemplateDirective,
|
|
1264
|
+
KitTruncateTextComponent,
|
|
1230
1265
|
],
|
|
1231
1266
|
}]
|
|
1232
1267
|
}] });
|
|
@@ -5132,39 +5167,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5132
5167
|
}]
|
|
5133
5168
|
}] });
|
|
5134
5169
|
|
|
5135
|
-
class KitTruncateTextComponent {
|
|
5136
|
-
constructor() {
|
|
5137
|
-
this.tooltip = viewChild.required(TooltipDirective);
|
|
5138
|
-
this.anchor = viewChild.required('anchor');
|
|
5139
|
-
this.content = viewChild.required('content');
|
|
5140
|
-
}
|
|
5141
|
-
onMouseEnter() {
|
|
5142
|
-
const el = this.content().nativeElement;
|
|
5143
|
-
if (el.offsetWidth < el.scrollWidth) {
|
|
5144
|
-
this.anchor().nativeElement.setAttribute('title', el.innerText);
|
|
5145
|
-
this.tooltip().tooltipClass = 'kit-tooltip';
|
|
5146
|
-
this.tooltip().toggle(this.anchor().nativeElement);
|
|
5147
|
-
}
|
|
5148
|
-
}
|
|
5149
|
-
onMouseOver() {
|
|
5150
|
-
this.tooltip().hide();
|
|
5151
|
-
}
|
|
5152
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5153
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: KitTruncateTextComponent, isStandalone: true, selector: "kit-truncate-text", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseOver()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #anchor\n kendoTooltip\n class=\"kit-tooltip\"\n showOn=\"none\">\n <div #content \n class=\"truncate-text\">\n <ng-content/>\n </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5154
|
-
}
|
|
5155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, decorators: [{
|
|
5156
|
-
type: Component,
|
|
5157
|
-
args: [{ selector: 'kit-truncate-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
5158
|
-
TooltipDirective,
|
|
5159
|
-
], template: "<div #anchor\n kendoTooltip\n class=\"kit-tooltip\"\n showOn=\"none\">\n <div #content \n class=\"truncate-text\">\n <ng-content/>\n </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"] }]
|
|
5160
|
-
}], propDecorators: { onMouseEnter: [{
|
|
5161
|
-
type: HostListener,
|
|
5162
|
-
args: ['mouseenter']
|
|
5163
|
-
}], onMouseOver: [{
|
|
5164
|
-
type: HostListener,
|
|
5165
|
-
args: ['mouseleave']
|
|
5166
|
-
}] } });
|
|
5167
|
-
|
|
5168
5170
|
class KitShipmentCard {
|
|
5169
5171
|
constructor() {
|
|
5170
5172
|
this.data = input.required();
|
|
@@ -5901,7 +5903,7 @@ class KitCollapsedListComponent {
|
|
|
5901
5903
|
this.shouldShowDropdown.set(fitCount < allItems.length);
|
|
5902
5904
|
}
|
|
5903
5905
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5904
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "measureItem", predicate: ["measureItem"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5906
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "measureItem", predicate: ["measureItem"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5905
5907
|
}
|
|
5906
5908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
|
|
5907
5909
|
type: Component,
|
|
@@ -5911,7 +5913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5911
5913
|
NgTemplateOutlet,
|
|
5912
5914
|
DropDownListModule,
|
|
5913
5915
|
NgClass,
|
|
5914
|
-
], template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"] }]
|
|
5916
|
+
], template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"] }]
|
|
5915
5917
|
}] });
|
|
5916
5918
|
|
|
5917
5919
|
class KitScrollNavigationComponent {
|
|
@@ -7345,7 +7347,7 @@ class KitGridViewsManagerComponent extends DialogContentBase {
|
|
|
7345
7347
|
this.hasUnsavedChanges.set(JSON.stringify(usedConfig) !== JSON.stringify(updatedViews));
|
|
7346
7348
|
}
|
|
7347
7349
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$d.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\"\n (onDragEnd)=\"checkChanges()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [class.hidden]=\"item.hidden\"\n [ngClass]=\"[item.type]\">\n <kit-svg-icon class=\"item-move\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (!isSystemView(item)) {\n <kit-svg-icon class=\"item-remove\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n (click)=\"onViewRemove(item)\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"item-toggle\"\n [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n ></kit-svg-icon>\n }\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7350
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\"\n (onDragEnd)=\"checkChanges()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [class.hidden]=\"item.hidden\"\n [ngClass]=\"[item.type]\">\n <kit-svg-icon class=\"item-move\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (!isSystemView(item)) {\n <kit-svg-icon class=\"item-remove\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n (click)=\"onViewRemove(item)\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"item-toggle\"\n [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n ></kit-svg-icon>\n }\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7349
7351
|
}
|
|
7350
7352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
|
|
7351
7353
|
type: Component,
|
|
@@ -7358,7 +7360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7358
7360
|
KitDialogActionsComponent,
|
|
7359
7361
|
TitleCasePipe,
|
|
7360
7362
|
KitTruncateTextComponent,
|
|
7361
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\"\n (onDragEnd)=\"checkChanges()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [class.hidden]=\"item.hidden\"\n [ngClass]=\"[item.type]\">\n <kit-svg-icon class=\"item-move\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (!isSystemView(item)) {\n <kit-svg-icon class=\"item-remove\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n (click)=\"onViewRemove(item)\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"item-toggle\"\n [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n ></kit-svg-icon>\n }\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"] }]
|
|
7363
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\"\n (onDragEnd)=\"checkChanges()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [class.hidden]=\"item.hidden\"\n [ngClass]=\"[item.type]\">\n <kit-svg-icon class=\"item-move\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (!isSystemView(item)) {\n <kit-svg-icon class=\"item-remove\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n (click)=\"onViewRemove(item)\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"item-toggle\"\n [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n ></kit-svg-icon>\n }\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"] }]
|
|
7362
7364
|
}], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$8.DialogRef }] });
|
|
7363
7365
|
|
|
7364
7366
|
class KitGridViewsComponent {
|