@indigina/ui-kit 1.1.355 → 1.1.357
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 +19 -11
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +4 -2
- package/package.json +1 -1
|
@@ -5860,6 +5860,7 @@ class KitSearchBarComponent {
|
|
|
5860
5860
|
this.closeButtonLabel = 'Close';
|
|
5861
5861
|
this.searchString = input(...(ngDevMode ? [undefined, { debugName: "searchString" }] : []));
|
|
5862
5862
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
5863
|
+
this.maxLength = input(1000, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
|
|
5863
5864
|
this.changed = new EventEmitter();
|
|
5864
5865
|
this.searchButtonClick = new EventEmitter();
|
|
5865
5866
|
this.closeButtonClick = new EventEmitter();
|
|
@@ -5904,7 +5905,7 @@ class KitSearchBarComponent {
|
|
|
5904
5905
|
this.closeButtonClick.emit();
|
|
5905
5906
|
}
|
|
5906
5907
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5907
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitSearchBarComponent, isStandalone: true, selector: "kit-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchString: { classPropertyName: "searchString", publicName: "searchString", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", searchButtonClick: "searchButtonClick", closeButtonClick: "closeButtonClick" }, viewQueries: [{ propertyName: "searchTextboxElementRef", first: true, predicate: ["searchTextboxElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"kit-search-bar\">\n @if (!searchVisible()) {\n <kit-button [label]=\"searchButtonLabel\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"KitButtonIconPosition.LEADING\"\n [disabled]=\"disabled()\"\n (clicked)=\"onSearchButtonClick()\"\n ></kit-button>\n } @else {\n <div class=\"textbox-wrapper\">\n <kit-textbox #searchTextboxElement\n class=\"search-textbox\"\n [placeholder]=\"placeholder\"\n [size]=\"kitTextboxSize.SMALL\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [defaultValue]=\"searchString() ?? ''\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n <button class=\"clear-button\"\n (click)=\"clearSearch()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n ></kit-svg-icon>\n </button>\n <button class=\"close-button\"\n (click)=\"onCloseButtonClick()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n ></kit-svg-icon>\n </button>\n </div>\n }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5908
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitSearchBarComponent, isStandalone: true, selector: "kit-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchString: { classPropertyName: "searchString", publicName: "searchString", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", searchButtonClick: "searchButtonClick", closeButtonClick: "closeButtonClick" }, viewQueries: [{ propertyName: "searchTextboxElementRef", first: true, predicate: ["searchTextboxElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"kit-search-bar\">\n @if (!searchVisible()) {\n <kit-button [label]=\"searchButtonLabel\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"KitButtonIconPosition.LEADING\"\n [disabled]=\"disabled()\"\n (clicked)=\"onSearchButtonClick()\"\n ></kit-button>\n } @else {\n <div class=\"textbox-wrapper\">\n <kit-textbox #searchTextboxElement\n class=\"search-textbox\"\n [maxlength]=\"maxLength()\"\n [placeholder]=\"placeholder\"\n [size]=\"kitTextboxSize.SMALL\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [defaultValue]=\"searchString() ?? ''\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n <button class=\"clear-button\"\n (click)=\"clearSearch()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n ></kit-svg-icon>\n </button>\n <button class=\"close-button\"\n (click)=\"onCloseButtonClick()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n ></kit-svg-icon>\n </button>\n </div>\n }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5908
5909
|
}
|
|
5909
5910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitSearchBarComponent, decorators: [{
|
|
5910
5911
|
type: Component,
|
|
@@ -5912,14 +5913,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5912
5913
|
KitButtonComponent,
|
|
5913
5914
|
KitTextboxComponent,
|
|
5914
5915
|
KitSvgIconComponent,
|
|
5915
|
-
], template: "<div class=\"kit-search-bar\">\n @if (!searchVisible()) {\n <kit-button [label]=\"searchButtonLabel\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"KitButtonIconPosition.LEADING\"\n [disabled]=\"disabled()\"\n (clicked)=\"onSearchButtonClick()\"\n ></kit-button>\n } @else {\n <div class=\"textbox-wrapper\">\n <kit-textbox #searchTextboxElement\n class=\"search-textbox\"\n [placeholder]=\"placeholder\"\n [size]=\"kitTextboxSize.SMALL\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [defaultValue]=\"searchString() ?? ''\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n <button class=\"clear-button\"\n (click)=\"clearSearch()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n ></kit-svg-icon>\n </button>\n <button class=\"close-button\"\n (click)=\"onCloseButtonClick()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n ></kit-svg-icon>\n </button>\n </div>\n }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"] }]
|
|
5916
|
+
], template: "<div class=\"kit-search-bar\">\n @if (!searchVisible()) {\n <kit-button [label]=\"searchButtonLabel\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"KitButtonIconPosition.LEADING\"\n [disabled]=\"disabled()\"\n (clicked)=\"onSearchButtonClick()\"\n ></kit-button>\n } @else {\n <div class=\"textbox-wrapper\">\n <kit-textbox #searchTextboxElement\n class=\"search-textbox\"\n [maxlength]=\"maxLength()\"\n [placeholder]=\"placeholder\"\n [size]=\"kitTextboxSize.SMALL\"\n [icon]=\"KitSvgIcon.SEARCH\"\n [defaultValue]=\"searchString() ?? ''\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n <button class=\"clear-button\"\n (click)=\"clearSearch()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n ></kit-svg-icon>\n </button>\n <button class=\"close-button\"\n (click)=\"onCloseButtonClick()\">\n <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n ></kit-svg-icon>\n </button>\n </div>\n }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"] }]
|
|
5916
5917
|
}], ctorParameters: () => [], propDecorators: { placeholder: [{
|
|
5917
5918
|
type: Input
|
|
5918
5919
|
}], searchButtonLabel: [{
|
|
5919
5920
|
type: Input
|
|
5920
5921
|
}], closeButtonLabel: [{
|
|
5921
5922
|
type: Input
|
|
5922
|
-
}], searchString: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchString", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{
|
|
5923
|
+
}], searchString: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchString", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], changed: [{
|
|
5923
5924
|
type: Output
|
|
5924
5925
|
}], searchButtonClick: [{
|
|
5925
5926
|
type: Output
|
|
@@ -8122,7 +8123,9 @@ class KitFilterCheckboxComponent {
|
|
|
8122
8123
|
}
|
|
8123
8124
|
get displayedValues() {
|
|
8124
8125
|
const uniqueTitles = new Set();
|
|
8125
|
-
(this.isPopupOpen ? this.checkedItems : this.selectedValues()).forEach(item =>
|
|
8126
|
+
(this.isPopupOpen ? this.checkedItems : this.selectedValues()).forEach(item => {
|
|
8127
|
+
return uniqueTitles.add(this.translateService.instant(this.buildTranslateKey(item.title)));
|
|
8128
|
+
});
|
|
8126
8129
|
return Array.from(uniqueTitles);
|
|
8127
8130
|
}
|
|
8128
8131
|
get isContentOverflowing() {
|
|
@@ -8133,6 +8136,7 @@ class KitFilterCheckboxComponent {
|
|
|
8133
8136
|
return false;
|
|
8134
8137
|
}
|
|
8135
8138
|
constructor() {
|
|
8139
|
+
this.translateService = inject(TranslateService);
|
|
8136
8140
|
this.filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
|
|
8137
8141
|
this.translateKeyPrefix = input('', ...(ngDevMode ? [{ debugName: "translateKeyPrefix" }] : []));
|
|
8138
8142
|
this.items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -8149,20 +8153,24 @@ class KitFilterCheckboxComponent {
|
|
|
8149
8153
|
this.groupedItems = computed(() => {
|
|
8150
8154
|
const groupedItems = {};
|
|
8151
8155
|
this.items().forEach(item => {
|
|
8152
|
-
|
|
8153
|
-
|
|
8156
|
+
const itemKey = this.translateService.instant(this.buildTranslateKey(item.title));
|
|
8157
|
+
if (!groupedItems[itemKey]) {
|
|
8158
|
+
groupedItems[itemKey] = {
|
|
8154
8159
|
title: item.title,
|
|
8155
8160
|
value: [],
|
|
8156
8161
|
checked: item.checked,
|
|
8157
8162
|
};
|
|
8158
8163
|
}
|
|
8159
|
-
groupedItems[
|
|
8164
|
+
groupedItems[itemKey].value.push(item.value);
|
|
8160
8165
|
});
|
|
8161
8166
|
return Object.values(groupedItems);
|
|
8162
8167
|
}, ...(ngDevMode ? [{ debugName: "groupedItems" }] : []));
|
|
8163
8168
|
this.visibleItems = computed(() => {
|
|
8164
8169
|
if (this.searchTerm()) {
|
|
8165
|
-
return this.groupedItems().filter(item =>
|
|
8170
|
+
return this.groupedItems().filter(item => {
|
|
8171
|
+
const itemTitle = this.translateService.instant(this.buildTranslateKey(item.title));
|
|
8172
|
+
return itemTitle.toLowerCase().includes(this.searchTerm().toLowerCase());
|
|
8173
|
+
});
|
|
8166
8174
|
}
|
|
8167
8175
|
return this.groupedItems();
|
|
8168
8176
|
}, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
|
|
@@ -8249,7 +8257,7 @@ class KitFilterCheckboxComponent {
|
|
|
8249
8257
|
})));
|
|
8250
8258
|
}
|
|
8251
8259
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8252
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{
|
|
8260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ displayedValues[0] }}\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n {{ displayedValues[0] ?? '' }}\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-search\" \n [hidden]=\"!isContentOverflowing && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n \n <div #popupContent\n class=\"popup-content\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [(ngModel)]=\"allSelected\"\n (changed)=\"toggleAll($event)\"> \n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8253
8261
|
}
|
|
8254
8262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
|
|
8255
8263
|
type: Component,
|
|
@@ -8261,7 +8269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8261
8269
|
FormsModule,
|
|
8262
8270
|
KitPopupComponent,
|
|
8263
8271
|
KitTextboxComponent,
|
|
8264
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{
|
|
8272
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ displayedValues[0] }}\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n {{ displayedValues[0] ?? '' }}\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-search\" \n [hidden]=\"!isContentOverflowing && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n \n <div #popupContent\n class=\"popup-content\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [(ngModel)]=\"allSelected\"\n (changed)=\"toggleAll($event)\"> \n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
|
|
8265
8273
|
}], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], guidField: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidField", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popupContent: [{ type: i0.ViewChild, args: ['popupContent', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
|
|
8266
8274
|
|
|
8267
8275
|
class KitFilterDateComponent {
|
|
@@ -9334,7 +9342,7 @@ class KitGridSearchComponent {
|
|
|
9334
9342
|
]);
|
|
9335
9343
|
}
|
|
9336
9344
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9337
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: KitGridSearchComponent, isStandalone: true, selector: "kit-grid-search", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSearch: "toggleSearch" }, viewQueries: [{ propertyName: "kitSearchBarComponent", first: true, predicate: KitSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kit-search-bar [placeholder]=\"'kit.search.placeholder' | translate\"\n [searchButtonLabel]=\"'kit.search.searchButtonLabel' | translate\"\n [searchString]=\"(gridState$ | async)?.search\"\n [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n [disabled]=\"disabled()\"\n (closeButtonClick)=\"closeButtonClick()\"\n (searchButtonClick)=\"this.toggleSearch.emit(true)\"\n></kit-search-bar>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitSearchBarComponent, selector: "kit-search-bar", inputs: ["placeholder", "searchButtonLabel", "closeButtonLabel", "searchString", "disabled"], outputs: ["changed", "searchButtonClick", "closeButtonClick"] }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: KitGridSearchComponent, isStandalone: true, selector: "kit-grid-search", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSearch: "toggleSearch" }, viewQueries: [{ propertyName: "kitSearchBarComponent", first: true, predicate: KitSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kit-search-bar [placeholder]=\"'kit.search.placeholder' | translate\"\n [searchButtonLabel]=\"'kit.search.searchButtonLabel' | translate\"\n [searchString]=\"(gridState$ | async)?.search\"\n [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n [disabled]=\"disabled()\"\n (closeButtonClick)=\"closeButtonClick()\"\n (searchButtonClick)=\"this.toggleSearch.emit(true)\"\n></kit-search-bar>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitSearchBarComponent, selector: "kit-search-bar", inputs: ["placeholder", "searchButtonLabel", "closeButtonLabel", "searchString", "disabled", "maxLength"], outputs: ["changed", "searchButtonClick", "closeButtonClick"] }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9338
9346
|
}
|
|
9339
9347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridSearchComponent, decorators: [{
|
|
9340
9348
|
type: Component,
|