@koobiq/components 18.23.0 → 18.25.0
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/badge/_badge-theme.scss +8 -0
- package/badge/badge-tokens.scss +15 -2
- package/badge/badge.component.d.ts +2 -1
- package/code-block/code-block-highlight.d.ts +1 -1
- package/code-block/code-block.d.ts +2 -2
- package/core/common-behaviors/color.d.ts +4 -1
- package/core/formatters/date/formatter.d.ts +4 -3
- package/core/styles/theming/_scrollbar-theme.scss +8 -10
- package/dropdown/dropdown.scss +1 -0
- package/esm2022/badge/badge.component.mjs +4 -3
- package/esm2022/button/button.component.mjs +3 -2
- package/esm2022/code-block/code-block-highlight.mjs +7 -6
- package/esm2022/code-block/code-block.mjs +7 -7
- package/esm2022/core/common-behaviors/color.mjs +7 -2
- package/esm2022/core/formatters/date/formatter.mjs +5 -10
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/file-upload/file-drop.mjs +5 -1
- package/esm2022/file-upload/file-upload.mjs +12 -2
- package/esm2022/file-upload/multiple-file-upload.component.mjs +29 -21
- package/esm2022/file-upload/single-file-upload.component.mjs +23 -16
- package/esm2022/filter-bar/pipe-add.mjs +5 -4
- package/esm2022/filter-bar/pipes/base-pipe.mjs +9 -4
- package/esm2022/filter-bar/pipes/pipe-multi-select.mjs +3 -3
- package/esm2022/filter-bar/pipes/pipe-select.mjs +3 -3
- package/esm2022/filter-bar/pipes/pipe-text.mjs +6 -1
- package/esm2022/icon/icon-button.component.mjs +2 -2
- package/esm2022/markdown/markdown.component.mjs +2 -2
- package/esm2022/modal/modal.service.mjs +8 -4
- package/esm2022/tags/tag-list.component.mjs +2 -2
- package/esm2022/tags/tag.component.mjs +2 -1
- package/esm2022/toggle/toggle.component.mjs +3 -3
- package/fesm2022/koobiq-components-badge.mjs +3 -2
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +2 -1
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +12 -11
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +10 -10
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +2 -2
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +65 -36
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-filter-bar.mjs +21 -11
- package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +2 -2
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +2 -2
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +7 -3
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +3 -2
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +2 -2
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/file-upload/file-drop.d.ts +5 -0
- package/file-upload/file-upload.d.ts +11 -1
- package/file-upload/multiple-file-upload.component.d.ts +24 -4
- package/file-upload/single-file-upload.component.d.ts +16 -2
- package/filter-bar/pipes/base-pipe.d.ts +3 -1
- package/filter-bar/pipes/pipe-text.d.ts +2 -0
- package/icon/icon-button.scss +4 -0
- package/markdown/markdown.scss +1 -1
- package/package.json +4 -4
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/prebuilt-themes/theme.css +1 -1
- package/schematics/ng-add/index.js +2 -2
- package/tags/tag-list.scss +6 -1
- package/toggle/_toggle-theme.scss +24 -20
- package/toggle/toggle-tokens.scss +0 -1
- package/toggle/toggle.scss +7 -8
|
@@ -44,6 +44,10 @@ import { KbqDropdownTrigger, KbqDropdownModule } from '@koobiq/components/dropdo
|
|
|
44
44
|
|
|
45
45
|
/** Injection Token for providing configuration of filter-bar */
|
|
46
46
|
const KBQ_PIPE_DATA = new InjectionToken('KBQ_PIPE_DATA');
|
|
47
|
+
/** function to get unique identifier of an element */
|
|
48
|
+
function getId(item) {
|
|
49
|
+
return item?.id ?? item?.name;
|
|
50
|
+
}
|
|
47
51
|
class KbqBasePipe {
|
|
48
52
|
/** Whether the current pipe is empty. Used for apply style modifier */
|
|
49
53
|
get isEmpty() {
|
|
@@ -72,7 +76,7 @@ class KbqBasePipe {
|
|
|
72
76
|
this.isMac = isMac();
|
|
73
77
|
/** updates values for selection and value template */
|
|
74
78
|
this.updateTemplates = (templates) => {
|
|
75
|
-
const template = templates?.find((template) => template
|
|
79
|
+
const template = templates?.find((template) => getId(template) === getId(this.data));
|
|
76
80
|
if (template?.values) {
|
|
77
81
|
this.values = template.values;
|
|
78
82
|
this.valueTemplate = template.valueTemplate;
|
|
@@ -89,8 +93,8 @@ class KbqBasePipe {
|
|
|
89
93
|
delete this.data.openOnAdd;
|
|
90
94
|
this.open();
|
|
91
95
|
}
|
|
92
|
-
this.filterBar?.openPipe.pipe(filter(Boolean)).subscribe((
|
|
93
|
-
if (this.data
|
|
96
|
+
this.filterBar?.openPipe.pipe(filter(Boolean)).subscribe((id) => {
|
|
97
|
+
if (getId(this.data) === id) {
|
|
94
98
|
this.open();
|
|
95
99
|
}
|
|
96
100
|
});
|
|
@@ -108,6 +112,7 @@ class KbqBasePipe {
|
|
|
108
112
|
onClear() {
|
|
109
113
|
this.data.value = null;
|
|
110
114
|
this.stateChanges.next();
|
|
115
|
+
this.filterBar?.onChangePipe.next(this.data);
|
|
111
116
|
}
|
|
112
117
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqBasePipe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
113
118
|
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqBasePipe, isStandalone: true, host: { properties: { "class": "\"kbq-pipe__\" + data.type", "class.kbq-pipe_empty": "isEmpty", "class.kbq-pipe_cleanable": "data.cleanable", "class.kbq-pipe_removable": "data.removable", "class.kbq-pipe_disabled": "data.disabled" }, classAttribute: "kbq-pipe" }, ngImport: i0 }); }
|
|
@@ -745,7 +750,7 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
|
|
|
745
750
|
provide: KbqBasePipe,
|
|
746
751
|
useExisting: this
|
|
747
752
|
}
|
|
748
|
-
], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n #select=\"kbqSelect\"\n multiple\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-multiselect__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n @if (select.triggerValues.length === 1) {\n <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n {{ select.triggerValue }}\n </span>\n } @else if (select.triggerValues.length > 1) {\n <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n {{ select.triggerValues.length }}\n </kbq-badge>\n }\n </button>\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input kbqInput placeholder=\"Search\" type=\"text\" [formControl]=\"searchControl\" />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @for (item of filteredOptions | async; track item) {\n <kbq-option [value]=\"item\">\n @if (isTemplateRef(valueTemplate)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(valueTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n />\n } @else {\n {{ item.name }}\n }\n </kbq-option>\n }\n</kbq-select>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:12px;align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:12px;background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multiselect .kbq-pipe__value{margin-left:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-left:var(--kbq-size-xs)}.kbq-pipe-multiselect__panel .kbq-select__content{max-height:404px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i3$2.KbqOption, selector: "kbq-option", inputs: ["value", "userSelect", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i3$2.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i3$2.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "directive", type: i3$2.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i5$1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i5$1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i6.KbqFormField, selector: "kbq-form-field", exportAs: ["kbqFormField"] }, { kind: "directive", type: i6.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i6.KbqPrefix, selector: "[kbqPrefix]" }, { kind: "component", type: i6.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "directive", type: i6.KbqValidateDirective, selector: " input[kbqInput], input[kbqNumberInput], input[kbqInputPassword], input[kbqTimepicker], input[kbqDatepicker], textarea[kbqTextarea], kbq-select, kbq-tree-select, kbq-tag-list ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i6.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
753
|
+
], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n #select=\"kbqSelect\"\n multiple\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-multiselect__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n @if (select.triggerValues.length === 1) {\n <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n {{ select.triggerValue }}\n </span>\n } @else if (select.triggerValues.length > 1) {\n <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n {{ select.triggerValues.length }}\n </kbq-badge>\n }\n </button>\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input\n kbqInput\n placeholder=\"{{ localeData.search.placeholder }}\"\n type=\"text\"\n [formControl]=\"searchControl\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @for (item of filteredOptions | async; track item) {\n <kbq-option [value]=\"item\">\n @if (isTemplateRef(valueTemplate)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(valueTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n />\n } @else {\n {{ item.name }}\n }\n </kbq-option>\n }\n</kbq-select>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:12px;align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:12px;background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multiselect .kbq-pipe__value{margin-left:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-left:var(--kbq-size-xs)}.kbq-pipe-multiselect__panel .kbq-select__content{max-height:404px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i3$2.KbqOption, selector: "kbq-option", inputs: ["value", "userSelect", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i3$2.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i3$2.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "directive", type: i3$2.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i5$1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i5$1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i6.KbqFormField, selector: "kbq-form-field", exportAs: ["kbqFormField"] }, { kind: "directive", type: i6.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i6.KbqPrefix, selector: "[kbqPrefix]" }, { kind: "component", type: i6.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "directive", type: i6.KbqValidateDirective, selector: " input[kbqInput], input[kbqNumberInput], input[kbqInputPassword], input[kbqTimepicker], input[kbqDatepicker], textarea[kbqTextarea], kbq-select, kbq-tree-select, kbq-tag-list ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i6.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
749
754
|
}
|
|
750
755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
|
|
751
756
|
type: Component,
|
|
@@ -771,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
771
776
|
KbqInputModule,
|
|
772
777
|
ReactiveFormsModule,
|
|
773
778
|
AsyncPipe
|
|
774
|
-
], template: "<kbq-select\n #select=\"kbqSelect\"\n multiple\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-multiselect__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n @if (select.triggerValues.length === 1) {\n <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n {{ select.triggerValue }}\n </span>\n } @else if (select.triggerValues.length > 1) {\n <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n {{ select.triggerValues.length }}\n </kbq-badge>\n }\n </button>\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input
|
|
779
|
+
], template: "<kbq-select\n #select=\"kbqSelect\"\n multiple\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-multiselect__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n @if (select.triggerValues.length === 1) {\n <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n {{ select.triggerValue }}\n </span>\n } @else if (select.triggerValues.length > 1) {\n <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n {{ select.triggerValues.length }}\n </kbq-badge>\n }\n </button>\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input\n kbqInput\n placeholder=\"{{ localeData.search.placeholder }}\"\n type=\"text\"\n [formControl]=\"searchControl\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @for (item of filteredOptions | async; track item) {\n <kbq-option [value]=\"item\">\n @if (isTemplateRef(valueTemplate)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(valueTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n />\n } @else {\n {{ item.name }}\n }\n </kbq-option>\n }\n</kbq-select>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:12px;align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:12px;background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multiselect .kbq-pipe__value{margin-left:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-left:var(--kbq-size-xs)}.kbq-pipe-multiselect__panel .kbq-select__content{max-height:404px}\n"] }]
|
|
775
780
|
}], propDecorators: { select: [{
|
|
776
781
|
type: ViewChild,
|
|
777
782
|
args: [KbqSelect]
|
|
@@ -816,7 +821,7 @@ class KbqPipeSelectComponent extends KbqBasePipe {
|
|
|
816
821
|
provide: KbqBasePipe,
|
|
817
822
|
useExisting: this
|
|
818
823
|
}
|
|
819
|
-
], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n #select\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-select__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n <span\n #kbqTitleText\n kbqPipeMinWidth\n class=\"kbq-pipe__value\"\n [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n >\n {{ select.triggerValue }}\n </span>\n </button>\n\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input kbqInput placeholder=\"Search\" type=\"text\" [formControl]=\"searchControl\" />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @for (item of filteredOptions | async; track item) {\n <kbq-option [value]=\"item\">\n @if (isTemplateRef(valueTemplate)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(valueTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n />\n } @else {\n {{ item.name }}\n }\n </kbq-option>\n }\n</kbq-select>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:12px;align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:12px;background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe-select__panel .kbq-select__content{max-height:404px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i3$2.KbqOption, selector: "kbq-option", inputs: ["value", "userSelect", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i3$2.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i3$2.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "directive", type: i3$2.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i6.KbqFormField, selector: "kbq-form-field", exportAs: ["kbqFormField"] }, { kind: "directive", type: i6.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i6.KbqPrefix, selector: "[kbqPrefix]" }, { kind: "component", type: i6.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "directive", type: i6.KbqValidateDirective, selector: " input[kbqInput], input[kbqNumberInput], input[kbqInputPassword], input[kbqTimepicker], input[kbqDatepicker], textarea[kbqTextarea], kbq-select, kbq-tree-select, kbq-tag-list ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i6.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
824
|
+
], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n #select\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-select__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n <span\n #kbqTitleText\n kbqPipeMinWidth\n class=\"kbq-pipe__value\"\n [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n >\n {{ select.triggerValue }}\n </span>\n </button>\n\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input\n kbqInput\n placeholder=\"{{ localeData.search.placeholder }}\"\n type=\"text\"\n [formControl]=\"searchControl\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @for (item of filteredOptions | async; track item) {\n <kbq-option [value]=\"item\">\n @if (isTemplateRef(valueTemplate)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(valueTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n />\n } @else {\n {{ item.name }}\n }\n </kbq-option>\n }\n</kbq-select>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:12px;align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:12px;background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe-select__panel .kbq-select__content{max-height:404px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i3$2.KbqOption, selector: "kbq-option", inputs: ["value", "userSelect", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i3$2.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i3$2.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "directive", type: i3$2.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i6.KbqFormField, selector: "kbq-form-field", exportAs: ["kbqFormField"] }, { kind: "directive", type: i6.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i6.KbqPrefix, selector: "[kbqPrefix]" }, { kind: "component", type: i6.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "directive", type: i6.KbqValidateDirective, selector: " input[kbqInput], input[kbqNumberInput], input[kbqInputPassword], input[kbqTimepicker], input[kbqDatepicker], textarea[kbqTextarea], kbq-select, kbq-tree-select, kbq-tag-list ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i6.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
820
825
|
}
|
|
821
826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPipeSelectComponent, decorators: [{
|
|
822
827
|
type: Component,
|
|
@@ -841,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
841
846
|
KbqInputModule,
|
|
842
847
|
ReactiveFormsModule,
|
|
843
848
|
AsyncPipe
|
|
844
|
-
], template: "<kbq-select\n #select\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-select__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n <span\n #kbqTitleText\n kbqPipeMinWidth\n class=\"kbq-pipe__value\"\n [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n >\n {{ select.triggerValue }}\n </span>\n </button>\n\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input
|
|
849
|
+
], template: "<kbq-select\n #select\n [compareWith]=\"compareByValue\"\n [disabled]=\"data.disabled\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n [panelClass]=\"'kbq-pipe-select__panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (selectionChange)=\"onSelect($event.value)\"\n>\n <button\n kbq-button\n kbq-select-matcher\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n >\n <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n <span\n #kbqTitleText\n kbqPipeMinWidth\n class=\"kbq-pipe__value\"\n [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n >\n {{ select.triggerValue }}\n </span>\n </button>\n\n @if (data.search) {\n <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n <input\n kbqInput\n placeholder=\"{{ localeData.search.placeholder }}\"\n type=\"text\"\n [formControl]=\"searchControl\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @for (item of filteredOptions | async; track item) {\n <kbq-option [value]=\"item\">\n @if (isTemplateRef(valueTemplate)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(valueTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n />\n } @else {\n {{ item.name }}\n }\n </kbq-option>\n }\n</kbq-select>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:12px;align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:12px;background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe-select__panel .kbq-select__content{max-height:404px}\n"] }]
|
|
845
850
|
}], propDecorators: { select: [{
|
|
846
851
|
type: ViewChild,
|
|
847
852
|
args: [KbqSelect]
|
|
@@ -878,6 +883,11 @@ class KbqPipeTextComponent extends KbqBasePipe {
|
|
|
878
883
|
this.onApply();
|
|
879
884
|
}
|
|
880
885
|
}
|
|
886
|
+
/** clears the pipe and triggers changes */
|
|
887
|
+
onClear() {
|
|
888
|
+
super.onClear();
|
|
889
|
+
this.control.reset();
|
|
890
|
+
}
|
|
881
891
|
/** opens popover */
|
|
882
892
|
open() {
|
|
883
893
|
this.popover.show();
|
|
@@ -1576,13 +1586,13 @@ class KbqPipeAdd {
|
|
|
1576
1586
|
this.addedPipes = [];
|
|
1577
1587
|
this.filterBar.changes.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
1578
1588
|
if (this.filterBar?.filter) {
|
|
1579
|
-
this.addedPipes = this.filterBar.filter.pipes.map((pipe) => pipe
|
|
1589
|
+
this.addedPipes = this.filterBar.filter.pipes.map((pipe) => getId(pipe));
|
|
1580
1590
|
}
|
|
1581
1591
|
});
|
|
1582
1592
|
}
|
|
1583
1593
|
addPipeFromTemplate(option) {
|
|
1584
1594
|
if (option.selected) {
|
|
1585
|
-
this.filterBar.openPipe.next(option.value
|
|
1595
|
+
this.filterBar.openPipe.next(getId(option.value));
|
|
1586
1596
|
}
|
|
1587
1597
|
else {
|
|
1588
1598
|
option.select();
|
|
@@ -1602,7 +1612,7 @@ class KbqPipeAdd {
|
|
|
1602
1612
|
* should be returned.
|
|
1603
1613
|
*/
|
|
1604
1614
|
compareWith(o1, o2) {
|
|
1605
|
-
return (o1
|
|
1615
|
+
return getId(o1) === o2;
|
|
1606
1616
|
}
|
|
1607
1617
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPipeAdd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1608
1618
|
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqPipeAdd, isStandalone: true, selector: "kbq-pipe-add", inputs: { filterTemplate: "filterTemplate" }, outputs: { onAddPipe: "onAddPipe" }, host: { classAttribute: "kbq-pipe-add" }, viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }], ngImport: i0, template: `
|
|
@@ -1770,5 +1780,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
1770
1780
|
* Generated bundle index. Do not edit.
|
|
1771
1781
|
*/
|
|
1772
1782
|
|
|
1773
|
-
export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterBarRefresher, KbqFilterBarSearch, KbqFilterReset, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTitleDirective, KbqPipeTypes, defaultFilterBarPipes, kbqFilterBarPipesProvider };
|
|
1783
|
+
export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterBarRefresher, KbqFilterBarSearch, KbqFilterReset, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTitleDirective, KbqPipeTypes, defaultFilterBarPipes, getId, kbqFilterBarPipesProvider };
|
|
1774
1784
|
//# sourceMappingURL=koobiq-components-filter-bar.mjs.map
|