@koobiq/components 18.38.1 → 18.39.1

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.
Files changed (68) hide show
  1. package/app-switcher/app-switcher.d.ts +4 -3
  2. package/checkbox/checkbox.scss +5 -21
  3. package/code-block/code-block.scss +2 -2
  4. package/core/option/option.d.ts +1 -0
  5. package/core/styles/visual/_layout.scss +10 -0
  6. package/dropdown/dropdown.scss +1 -0
  7. package/esm2022/app-switcher/app-switcher.mjs +20 -17
  8. package/esm2022/checkbox/checkbox.mjs +2 -2
  9. package/esm2022/code-block/code-block.mjs +3 -3
  10. package/esm2022/core/option/option.mjs +3 -1
  11. package/esm2022/core/version.mjs +2 -2
  12. package/esm2022/dropdown/dropdown-trigger.directive.mjs +2 -4
  13. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  14. package/esm2022/filter-bar/filter-bar.mjs +5 -19
  15. package/esm2022/filter-bar/filter-search.mjs +39 -11
  16. package/esm2022/filter-bar/pipes/pipe-date.mjs +4 -1
  17. package/esm2022/filter-bar/pipes/pipe-datetime.mjs +5 -2
  18. package/esm2022/filter-bar/pipes/pipe-multi-select.mjs +35 -14
  19. package/esm2022/filter-bar/pipes/pipe-multi-tree-select.mjs +40 -11
  20. package/esm2022/input/input-number.mjs +3 -1
  21. package/esm2022/list/list-selection.component.mjs +10 -4
  22. package/esm2022/loader-overlay/loader-overlay.component.mjs +2 -2
  23. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  24. package/esm2022/popover/popover.component.mjs +3 -3
  25. package/esm2022/select/select.component.mjs +4 -2
  26. package/esm2022/time-range/time-range-editor.mjs +2 -2
  27. package/esm2022/timepicker/timepicker.directive.mjs +59 -9
  28. package/esm2022/tooltip/tooltip.component.mjs +3 -3
  29. package/fesm2022/koobiq-components-app-switcher.mjs +19 -16
  30. package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
  31. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  32. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  33. package/fesm2022/koobiq-components-code-block.mjs +2 -2
  34. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  35. package/fesm2022/koobiq-components-core.mjs +3 -1
  36. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  37. package/fesm2022/koobiq-components-dropdown.mjs +3 -5
  38. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  39. package/fesm2022/koobiq-components-filter-bar.mjs +122 -53
  40. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  41. package/fesm2022/koobiq-components-input.mjs +2 -0
  42. package/fesm2022/koobiq-components-input.mjs.map +1 -1
  43. package/fesm2022/koobiq-components-list.mjs +9 -3
  44. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  45. package/fesm2022/koobiq-components-loader-overlay.mjs +2 -2
  46. package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
  47. package/fesm2022/koobiq-components-popover.mjs +4 -4
  48. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  49. package/fesm2022/koobiq-components-select.mjs +4 -2
  50. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  51. package/fesm2022/koobiq-components-time-range.mjs +1 -1
  52. package/fesm2022/koobiq-components-time-range.mjs.map +1 -1
  53. package/fesm2022/koobiq-components-timepicker.mjs +58 -8
  54. package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
  55. package/fesm2022/koobiq-components-tooltip.mjs +2 -2
  56. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  57. package/filter-bar/filter-bar.d.ts +1 -1
  58. package/filter-bar/filter-search.d.ts +17 -4
  59. package/filter-bar/pipes/pipe-multi-select.d.ts +4 -1
  60. package/filter-bar/pipes/pipe-multi-tree-select.d.ts +5 -0
  61. package/list/list-selection.component.d.ts +4 -2
  62. package/loader-overlay/loader-overlay.scss +22 -31
  63. package/package.json +4 -4
  64. package/popover/_popover-theme.scss +2 -2
  65. package/popover/popover.scss +3 -2
  66. package/schematics/ng-add/index.js +2 -2
  67. package/timepicker/timepicker.directive.d.ts +16 -6
  68. package/tooltip/_tooltip-theme.scss +5 -6
@@ -1,11 +1,11 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, ChangeDetectorRef, DestroyRef, afterNextRender, TemplateRef, Directive, ElementRef, Input, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, viewChild, ViewChild, ViewChildren, EventEmitter, Output, Injector, ViewContainerRef, NgModule } from '@angular/core';
2
+ import { InjectionToken, inject, ChangeDetectorRef, DestroyRef, afterNextRender, TemplateRef, Directive, ElementRef, Input, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, viewChild, ViewChild, ViewChildren, EventEmitter, Output, input, numberAttribute, Injector, ViewContainerRef, NgModule } from '@angular/core';
3
3
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
4
4
  import * as i5$1 from '@koobiq/components/core';
5
5
  import { isMac, KbqComponentColors, KBQ_TITLE_TEXT_REF, DateAdapter, DateFormatter, PopUpPlacements, kbqDisableLegacyValidationDirectiveProvider, KbqFormattersModule, KbqOption, KbqPseudoCheckboxModule, KbqHighlightModule, ruRULocaleData, PopUpSizes, KbqFormsModule, KBQ_LOCALE_SERVICE, KbqOptionModule, KbqSelectMatcher } from '@koobiq/components/core';
6
6
  import * as i4 from '@koobiq/components/divider';
7
7
  import { KbqDividerModule } from '@koobiq/components/divider';
8
- import { Subject, merge, Subscription, throttleTime, Observable, of, BehaviorSubject } from 'rxjs';
8
+ import { Subject, merge, Subscription, throttleTime, Observable, of, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1 } from 'rxjs';
9
9
  import * as i1$1 from '@angular/forms';
10
10
  import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
11
11
  import { ENTER } from '@koobiq/cdk/keycodes';
@@ -465,6 +465,9 @@ class KbqPipeDateComponent extends KbqBasePipe {
465
465
  if (($event.ctrlKey || $event.metaKey) && $event.keyCode === ENTER) {
466
466
  this.onApplyPeriod();
467
467
  }
468
+ if ($event.keyCode === ENTER) {
469
+ $event.preventDefault();
470
+ }
468
471
  }
469
472
  onApplyPeriod() {
470
473
  this.data.value = {
@@ -642,6 +645,9 @@ class KbqPipeDatetimeComponent extends KbqBasePipe {
642
645
  if (($event.ctrlKey || $event.metaKey) && $event.keyCode === ENTER) {
643
646
  this.onApplyPeriod();
644
647
  }
648
+ if ($event.keyCode === ENTER) {
649
+ $event.preventDefault();
650
+ }
645
651
  }
646
652
  /** @docs-private */
647
653
  onApplyPeriod() {
@@ -710,7 +716,7 @@ class KbqPipeDatetimeComponent extends KbqBasePipe {
710
716
  provide: KbqBasePipe,
711
717
  useExisting: this
712
718
  }
713
- ], viewQueries: [{ propertyName: "listSelection", first: true, predicate: ["listSelection"], descendants: true, read: KbqListSelection, isSignal: true }, { propertyName: "returnButton", first: true, predicate: ["returnButton"], descendants: true, read: KbqButton, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n #popover=\"kbqPopover\"\n kbq-button\n kbqPopover\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [kbqPopoverArrow]=\"false\"\n [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n [kbqPopoverContent]=\"content\"\n [kbqPopoverOffset]=\"4\"\n [defaultPaddings]=\"false\"\n [kbqPopoverPlacement]=\"placements.BottomLeft\"\n [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n (kbqPopoverVisibleChange)=\"isListMode = true\"\n>\n <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n {{ formattedValue }}\n </span>\n</button>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #content>\n @if (isListMode) {\n <div class=\"kbq-date-list\">\n <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n {{ localeData.datePipe?.customPeriod }}\n <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\n </kbq-list-option>\n\n @for (item of values; track item) {\n <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n {{ item.name }}\n </kbq-list-option>\n }\n </kbq-list-selection>\n </div>\n } @else {\n <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n <div class=\"kbq-date-period__header\">\n <button\n #returnButton\n kbq-button\n [color]=\"colors.Theme\"\n [kbqStyle]=\"styles.Transparent\"\n (click)=\"showList()\"\n >\n <i kbq-icon=\"kbq-chevron-left_16\"></i>\n {{ localeData.datePipe.backToPeriodSelection }}\n </button>\n </div>\n\n <kbq-divider />\n\n <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n <div class=\"kbq-date-period__content-header\">{{ localeData.datePipe.customPeriod }}</div>\n <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n <div class=\"kbq-form__row_with-time kbq-form__control\">\n <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar\">\n <input\n formControlName=\"start\"\n [kbqCalendar]=\"startDateCalendar\"\n [max]=\"formGroup.controls.end.value\"\n (focusin)=\"onFocusStartInput()\"\n (keydown.tab)=\"hideCalendars()\"\n />\n <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n </kbq-form-field>\n\n <kbq-form-field class=\"kbq-date-period__time\">\n <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n <input formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n </kbq-form-field>\n </div>\n\n <kbq-calendar\n #startDateCalendar\n [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n (selectedChange)=\"onSelectStartDate($event)\"\n />\n\n <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n <div class=\"kbq-form__row_with-time kbq-form__control\">\n <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar\">\n <input\n formControlName=\"end\"\n [kbqCalendar]=\"endDateCalendar\"\n (focusin)=\"onFocusEndInput()\"\n (keydown.tab)=\"hideCalendars()\"\n />\n <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n </kbq-form-field>\n\n <kbq-form-field class=\"kbq-date-period__time\">\n <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n <input formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n </kbq-form-field>\n </div>\n\n @if (formGroup.controls.start.invalid) {\n <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n {{ localeData.datePipe.customPeriodErrorHint }}\n </kbq-hint>\n }\n\n <kbq-calendar\n #endDateCalendar\n [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n (selectedChange)=\"onSelectEndDate($event)\"\n />\n </form>\n\n <div class=\"kbq-date-period__footer\">\n <button\n kbq-button\n [color]=\"'theme'\"\n [disabled]=\"disabled\"\n [kbqStyle]=\"'transparent'\"\n (click)=\"onApplyPeriod()\"\n >\n <span>{{ localeData.pipe.applyButton }}</span>\n &nbsp;\n <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318' : 'Ctrl+' }}Enter</span>\n </button>\n </div>\n </div>\n }\n</ng-template>\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\">{{ formattedValue }}</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:var(--kbq-size-l);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-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding-top:var(--kbq-size-xs);padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content;padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__content-header{grid-column:2 span;padding-top:var(--kbq-size-s);padding-left:var(--kbq-size-l);padding-right:var(--kbq-size-l);color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{flex:1}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{min-width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i2.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: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "inset", "paddings"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { 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: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i9.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
719
+ ], viewQueries: [{ propertyName: "listSelection", first: true, predicate: ["listSelection"], descendants: true, read: KbqListSelection, isSignal: true }, { propertyName: "returnButton", first: true, predicate: ["returnButton"], descendants: true, read: KbqButton, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n #popover=\"kbqPopover\"\n kbq-button\n kbqPopover\n [disabled]=\"data.disabled\"\n [kbqPipeState]=\"data\"\n [kbqPipeTitle]=\"pipeTooltip\"\n [kbqPopoverArrow]=\"false\"\n [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n [kbqPopoverContent]=\"content\"\n [kbqPopoverOffset]=\"4\"\n [defaultPaddings]=\"false\"\n [kbqPopoverPlacement]=\"placements.BottomLeft\"\n [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n (kbqPopoverVisibleChange)=\"isListMode = true\"\n>\n <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n {{ formattedValue }}\n </span>\n</button>\n\n@if (showRemoveButton) {\n <kbq-pipe-button />\n}\n\n<ng-template #content>\n @if (isListMode) {\n <div class=\"kbq-date-list\">\n <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n {{ localeData.datePipe?.customPeriod }}\n <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\n </kbq-list-option>\n\n @for (item of values; track item) {\n <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n {{ item.name }}\n </kbq-list-option>\n }\n </kbq-list-selection>\n </div>\n } @else {\n <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n <div class=\"kbq-date-period__header\">\n <button\n #returnButton\n kbq-button\n [color]=\"colors.Theme\"\n [kbqStyle]=\"styles.Transparent\"\n (click)=\"showList()\"\n >\n <i kbq-icon=\"kbq-chevron-left_16\"></i>\n {{ localeData.datePipe.backToPeriodSelection }}\n </button>\n </div>\n\n <kbq-divider />\n\n <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n <div class=\"kbq-date-period__content-header\">{{ localeData.datePipe.customPeriod }}</div>\n <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n <div class=\"kbq-form__row_with-time kbq-form__control\">\n <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar\">\n <input\n formControlName=\"start\"\n [kbqCalendar]=\"startDateCalendar\"\n [max]=\"formGroup.controls.end.value\"\n (focusin)=\"onFocusStartInput()\"\n (keydown.tab)=\"hideCalendars()\"\n />\n <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n </kbq-form-field>\n\n <kbq-form-field class=\"kbq-date-period__time\">\n <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n <input formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n </kbq-form-field>\n </div>\n\n <kbq-calendar\n #startDateCalendar\n [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n (selectedChange)=\"onSelectStartDate($event)\"\n />\n\n <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n <div class=\"kbq-form__row_with-time kbq-form__control\">\n <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar\">\n <input\n formControlName=\"end\"\n [kbqCalendar]=\"endDateCalendar\"\n (focusin)=\"onFocusEndInput()\"\n (keydown.tab)=\"hideCalendars()\"\n />\n <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n </kbq-form-field>\n\n <kbq-form-field class=\"kbq-date-period__time\">\n <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n <input formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n </kbq-form-field>\n </div>\n\n @if (formGroup.controls.start.invalid) {\n <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n {{ localeData.datePipe.customPeriodErrorHint }}\n </kbq-hint>\n }\n\n <kbq-calendar\n #endDateCalendar\n [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n (selectedChange)=\"onSelectEndDate($event)\"\n />\n </form>\n\n <div class=\"kbq-date-period__footer\">\n <button\n kbq-button\n [color]=\"'theme'\"\n [disabled]=\"disabled\"\n [kbqStyle]=\"'transparent'\"\n (click)=\"onApplyPeriod()\"\n >\n <span>{{ localeData.pipe.applyButton }}</span>\n &nbsp;\n <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318' : 'Ctrl+' }}Enter</span>\n </button>\n </div>\n </div>\n }\n</ng-template>\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\">{{ formattedValue }}</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:var(--kbq-size-l);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-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding-top:var(--kbq-size-xs);padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content;padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__content-header{grid-column:2 span;padding-top:var(--kbq-size-s);padding-left:var(--kbq-size-l);padding-right:var(--kbq-size-l);color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{flex:1}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{min-width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i2.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: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "inset", "paddings"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { 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: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i9.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
714
720
  }
715
721
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqPipeDatetimeComponent, decorators: [{
716
722
  type: Component,
@@ -764,6 +770,9 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
764
770
  }
765
771
  /** selected value */
766
772
  get selected() {
773
+ if (this.selectedAllEqualsSelectedNothing) {
774
+ return this.internalSelected;
775
+ }
767
776
  return this.data.value;
768
777
  }
769
778
  /** Whether the current pipe is empty. */
@@ -800,6 +809,7 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
800
809
  }
801
810
  /** @docs-private */
802
811
  ngOnInit() {
812
+ this.updateInternalSelected();
803
813
  this.filteredOptions = merge(this.filterBar.internalTemplatesChanges, this.searchControl.valueChanges).pipe(map(this.getFilteredOptions), takeUntilDestroyed(this.destroyRef));
804
814
  }
805
815
  ngAfterViewInit() {
@@ -812,13 +822,19 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
812
822
  onSelect(item) {
813
823
  if (this.selectionAllInProgress)
814
824
  return;
815
- this.data.value = item;
825
+ if (this.selectedAllEqualsSelectedNothing && this.allVisibleOptionsSelected) {
826
+ this.data.value = [];
827
+ }
828
+ else {
829
+ this.data.value = item;
830
+ }
816
831
  this.emitChangePipeEvent();
817
832
  this.stateChanges.next();
818
833
  }
819
834
  /** @docs-private */
820
835
  onClear() {
821
836
  this.data.value = [];
837
+ this.updateInternalSelected();
822
838
  this.filterBar?.onClearPipe.emit(this.data);
823
839
  this.filterBar?.onChangePipe.emit(this.data);
824
840
  this.stateChanges.next();
@@ -839,12 +855,32 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
839
855
  this.visibleOptions.forEach((option) => option.select());
840
856
  }
841
857
  this.selectionAllInProgress = false;
842
- this.data.value = [...this.select.value];
858
+ if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
859
+ this.data.value = [];
860
+ }
861
+ else {
862
+ this.data.value = [...this.select.value];
863
+ }
843
864
  if (emitEvent) {
844
865
  this.emitChangePipeEvent();
845
866
  }
846
867
  this.stateChanges.next();
847
868
  }
869
+ /** @docs-private */
870
+ onClose() {
871
+ if (this.allOptionsSelected) {
872
+ this.updateInternalSelected();
873
+ }
874
+ }
875
+ /** opens select */
876
+ open() {
877
+ this.select.open();
878
+ }
879
+ updateInternalSelected() {
880
+ if (this.selectedAllEqualsSelectedNothing) {
881
+ this.internalSelected = this.data.value?.slice() || [];
882
+ }
883
+ }
848
884
  emitChangePipeEvent() {
849
885
  if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
850
886
  this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
@@ -853,22 +889,13 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
853
889
  this.filterBar?.onChangePipe.emit(this.data);
854
890
  }
855
891
  }
856
- onClose() {
857
- if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
858
- this.toggleSelectionAll(false);
859
- }
860
- }
861
- /** opens select */
862
- open() {
863
- this.select.open();
864
- }
865
892
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqPipeMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
866
893
  /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqPipeMultiSelectComponent, isStandalone: true, selector: "kbq-pipe-multi-select", providers: [
867
894
  {
868
895
  provide: KbqBasePipe,
869
896
  useExisting: this
870
897
  }
871
- ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }, { propertyName: "options", predicate: KbqOption, 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 [selectAllHandler]=\"selectAllHandler\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (closed)=\"onClose()\"\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 (\n select.triggerValues.length > 1 &&\n (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n ) {\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 type=\"text\"\n placeholder=\"{{ localeData.search.placeholder }}\"\n [formControl]=\"searchControl\"\n (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @if (data.selectAll && !select.isEmptySearchResult) {\n <kbq-option\n [class.kbq-selected]=\"allVisibleOptionsSelected\"\n [selectable]=\"false\"\n (click)=\"toggleSelectionAll()\"\n (keydown.enter)=\"toggleSelectionAll()\"\n >\n <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n {{ localeData.pipe.selectAll }}\n </kbq-option>\n }\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:var(--kbq-size-l);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-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);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", "multiline", "searchMinOptionsThreshold", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "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: i5$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i5$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i5$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i5$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i2.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: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { 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: 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" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i5$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
898
+ ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }, { propertyName: "options", predicate: KbqOption, 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 [selectAllHandler]=\"selectAllHandler\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (closed)=\"onClose()\"\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 (\n select.triggerValues.length > 1 &&\n (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n ) {\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 autocomplete=\"off\"\n kbqInput\n type=\"text\"\n placeholder=\"{{ localeData.search.placeholder }}\"\n [formControl]=\"searchControl\"\n (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @if (data.selectAll && !select.isEmptySearchResult) {\n <kbq-option\n [class.kbq-selected]=\"allVisibleOptionsSelected\"\n [selectable]=\"false\"\n (click)=\"toggleSelectionAll()\"\n (keydown.enter)=\"toggleSelectionAll()\"\n >\n <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n {{ localeData.pipe.selectAll }}\n </kbq-option>\n }\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:var(--kbq-size-l);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-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);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", "multiline", "searchMinOptionsThreshold", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "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: i5$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i5$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i5$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i5$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i2.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: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { 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: 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" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i5$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
872
899
  }
873
900
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
874
901
  type: Component,
@@ -895,7 +922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
895
922
  ReactiveFormsModule,
896
923
  AsyncPipe,
897
924
  KbqPseudoCheckboxModule
898
- ], 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 [selectAllHandler]=\"selectAllHandler\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (closed)=\"onClose()\"\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 (\n select.triggerValues.length > 1 &&\n (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n ) {\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 type=\"text\"\n placeholder=\"{{ localeData.search.placeholder }}\"\n [formControl]=\"searchControl\"\n (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @if (data.selectAll && !select.isEmptySearchResult) {\n <kbq-option\n [class.kbq-selected]=\"allVisibleOptionsSelected\"\n [selectable]=\"false\"\n (click)=\"toggleSelectionAll()\"\n (keydown.enter)=\"toggleSelectionAll()\"\n >\n <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n {{ localeData.pipe.selectAll }}\n </kbq-option>\n }\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:var(--kbq-size-l);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-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);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"] }]
925
+ ], 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 [selectAllHandler]=\"selectAllHandler\"\n [tabIndex]=\"-1\"\n [value]=\"selected\"\n (closed)=\"onClose()\"\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 (\n select.triggerValues.length > 1 &&\n (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n ) {\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 autocomplete=\"off\"\n kbqInput\n type=\"text\"\n placeholder=\"{{ localeData.search.placeholder }}\"\n [formControl]=\"searchControl\"\n (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n />\n <kbq-cleaner />\n </kbq-form-field>\n }\n\n <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n @if (data.selectAll && !select.isEmptySearchResult) {\n <kbq-option\n [class.kbq-selected]=\"allVisibleOptionsSelected\"\n [selectable]=\"false\"\n (click)=\"toggleSelectionAll()\"\n (keydown.enter)=\"toggleSelectionAll()\"\n >\n <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n {{ localeData.pipe.selectAll }}\n </kbq-option>\n }\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:var(--kbq-size-l);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-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);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"] }]
899
926
  }], propDecorators: { select: [{
900
927
  type: ViewChild,
901
928
  args: [KbqSelect]
@@ -907,6 +934,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
907
934
  class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
908
935
  /** selected value */
909
936
  get selected() {
937
+ if (this.selectedAllEqualsSelectedNothing) {
938
+ return this.internalSelected;
939
+ }
910
940
  return this.data.value;
911
941
  }
912
942
  /** Whether the current pipe is empty. */
@@ -1001,6 +1031,7 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
1001
1031
  this.filterBar?.internalTemplatesChanges.pipe(takeUntilDestroyed()).subscribe(this.updateTemplates);
1002
1032
  }
1003
1033
  ngOnInit() {
1034
+ this.updateInternalSelected();
1004
1035
  this.searchControl.valueChanges.subscribe((value) => this.treeControl.filterNodes(value));
1005
1036
  }
1006
1037
  ngAfterViewInit() {
@@ -1022,9 +1053,16 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
1022
1053
  this.tree.setStateChildren(option, !option.selected);
1023
1054
  }
1024
1055
  this.toggleParents(option.data.parent);
1025
- this.data.value = this.select.selectedValues;
1026
- this.emitChangePipeEvent();
1027
- this.stateChanges.next();
1056
+ setTimeout(() => {
1057
+ if (this.selectedAllEqualsSelectedNothing && this.allVisibleOptionsSelected) {
1058
+ this.data.value = [];
1059
+ }
1060
+ else {
1061
+ this.data.value = this.select.selectedValues;
1062
+ }
1063
+ this.emitChangePipeEvent();
1064
+ this.stateChanges.next();
1065
+ });
1028
1066
  }
1029
1067
  searchKeydownHandler() {
1030
1068
  if (this.data.selectAll && this.tree.keyManager.activeItemIndex === 0) {
@@ -1051,22 +1089,40 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
1051
1089
  this.tree.selectionModel.select(...dataNodesForSelect);
1052
1090
  }
1053
1091
  }
1054
- this.data.value = [...this.select.selectedValues];
1055
- if (emitEvent) {
1056
- this.emitChangePipeEvent();
1057
- }
1058
- this.stateChanges.next();
1092
+ setTimeout(() => {
1093
+ if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
1094
+ this.data.value = [];
1095
+ }
1096
+ else {
1097
+ this.data.value = [...this.select.selectedValues];
1098
+ }
1099
+ if (emitEvent) {
1100
+ this.emitChangePipeEvent();
1101
+ }
1102
+ this.stateChanges.next();
1103
+ });
1059
1104
  }
1060
1105
  /** opens select */
1061
1106
  open() {
1062
1107
  setTimeout(() => this.select.open());
1063
1108
  }
1109
+ onClear() {
1110
+ super.onClear();
1111
+ this.updateInternalSelected();
1112
+ }
1113
+ /** @docs-private */
1064
1114
  onOpen() {
1065
1115
  this.treeControl.expandAll();
1066
1116
  }
1117
+ /** @docs-private */
1067
1118
  onClose() {
1068
- if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
1069
- this.toggleSelectAllNode(false);
1119
+ if (this.allOptionsSelected) {
1120
+ this.updateInternalSelected();
1121
+ }
1122
+ }
1123
+ updateInternalSelected() {
1124
+ if (this.selectedAllEqualsSelectedNothing) {
1125
+ this.internalSelected = this.data.value?.slice() || [];
1070
1126
  }
1071
1127
  }
1072
1128
  emitChangePipeEvent() {
@@ -1927,23 +1983,10 @@ class KbqFilterBar {
1927
1983
  }
1928
1984
  merge(this.onChangePipe, this.onRemovePipe)
1929
1985
  .pipe(takeUntilDestroyed())
1930
- .subscribe((changedPipe) => {
1986
+ .subscribe(() => {
1931
1987
  if (this.filter) {
1932
1988
  this.filter.changed = true;
1933
- // need to give out fake data. Data will be synchronized after pipe closing
1934
- if (this.filter.pipes.find((pipe) => getId(pipe) === getId(changedPipe) && pipe.value !== changedPipe.value)) {
1935
- const filter = { ...this.filter };
1936
- filter.pipes = filter.pipes.map((pipe) => {
1937
- if (getId(pipe) === getId(changedPipe)) {
1938
- return changedPipe;
1939
- }
1940
- return pipe;
1941
- });
1942
- this.filterChange.emit(filter);
1943
- }
1944
- else {
1945
- this.filterChange.emit(this.filter);
1946
- }
1989
+ this.filterChange.emit(this.filter);
1947
1990
  }
1948
1991
  });
1949
1992
  merge(this.filterChange, this.onChangePipe, this.onRemovePipe, this.internalFilterChanges)
@@ -1987,7 +2030,7 @@ class KbqFilterBar {
1987
2030
  </div>
1988
2031
 
1989
2032
  <div class="kbq-filter-bar__right">
1990
- <ng-content select="kbq-filter-search, [kbq-filter-search]" />
2033
+ <ng-content select="kbq-filter-search, [kbq-filter-search], kbq-search-expandable" />
1991
2034
 
1992
2035
  <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
1993
2036
  </div>
@@ -2007,7 +2050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2007
2050
  </div>
2008
2051
 
2009
2052
  <div class="kbq-filter-bar__right">
2010
- <ng-content select="kbq-filter-search, [kbq-filter-search]" />
2053
+ <ng-content select="kbq-filter-search, [kbq-filter-search], kbq-search-expandable" />
2011
2054
 
2012
2055
  <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
2013
2056
  </div>
@@ -2067,28 +2110,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2067
2110
  }, styles: [".kbq-filter-refresher{display:flex;align-items:center;min-width:64px}\n"] }]
2068
2111
  }] });
2069
2112
 
2113
+ const defaultOnSearchTimeout = 0;
2070
2114
  class KbqFilterBarSearch {
2071
- /** localized data
2072
- * @docs-private */
2073
- get localeData() {
2074
- return this.filterBar.configuration.search;
2075
- }
2076
2115
  constructor() {
2077
2116
  /** KbqFilterBar instance */
2078
2117
  this.filterBar = inject(KbqFilterBar);
2079
2118
  this.changeDetectorRef = inject(ChangeDetectorRef);
2119
+ this.destroyRef = inject(DestroyRef);
2080
2120
  /** control for search */
2081
2121
  this.searchControl = new UntypedFormControl();
2082
2122
  /** Whether the search active */
2083
2123
  this.isSearchActive = false;
2124
+ /**
2125
+ /** Timeout in milliseconds for emit event. The default value is taken from defaultOnSearchTimeout
2126
+ * @default 0
2127
+ */
2128
+ this.onSearchTimeout = input(defaultOnSearchTimeout, { transform: numberAttribute });
2129
+ /** Emit event by enter or not. Default is false */
2130
+ this.emitValueByEnter = input(false, { transform: booleanAttribute });
2131
+ /** Value of the field after initialization */
2132
+ this.initialValue = input();
2084
2133
  /** event that is generated whenever a user performs a search. */
2085
2134
  this.onSearch = new EventEmitter();
2086
2135
  /** @docs-private */
2087
2136
  this.onReset = () => {
2088
2137
  this.changeDetectorRef.markForCheck();
2089
2138
  };
2090
- this.searchControl.valueChanges.subscribe(this.onSearch);
2091
- this.filterBar.filterReset?.onResetFilter.pipe(takeUntilDestroyed()).subscribe(this.onReset);
2139
+ }
2140
+ /** localized data
2141
+ * @docs-private */
2142
+ get localeData() {
2143
+ return this.filterBar.configuration.search;
2144
+ }
2145
+ ngAfterViewInit() {
2146
+ this.filterBar.filterReset?.onResetFilter.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.onReset);
2147
+ if (this.initialValue()) {
2148
+ this.searchControl.setValue(this.initialValue(), { emitEvent: false });
2149
+ }
2150
+ this.searchControl.valueChanges
2151
+ .pipe(distinctUntilChanged$1(), filter(() => !this.emitValueByEnter()), debounceTime$1(this.onSearchTimeout()), takeUntilDestroyed(this.destroyRef))
2152
+ .subscribe(this.onSearch);
2092
2153
  }
2093
2154
  openSearch() {
2094
2155
  this.isSearchActive = true;
@@ -2107,6 +2168,12 @@ class KbqFilterBarSearch {
2107
2168
  this.tooltip.hide();
2108
2169
  }
2109
2170
  /** @docs-private */
2171
+ onEnter() {
2172
+ if (this.emitValueByEnter()) {
2173
+ this.onSearch.emit(this.searchControl.value);
2174
+ }
2175
+ }
2176
+ /** @docs-private */
2110
2177
  onClear() {
2111
2178
  this.isSearchActive = false;
2112
2179
  setTimeout(() => {
@@ -2115,7 +2182,7 @@ class KbqFilterBarSearch {
2115
2182
  });
2116
2183
  }
2117
2184
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFilterBarSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2118
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KbqFilterBarSearch, isStandalone: true, selector: "kbq-filter-search, [kbq-filter-search]", outputs: { onSearch: "onSearch" }, host: { classAttribute: "kbq-filter-search" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true }], ngImport: i0, template: `
2185
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: KbqFilterBarSearch, isStandalone: true, selector: "kbq-filter-search, [kbq-filter-search]", inputs: { onSearchTimeout: { classPropertyName: "onSearchTimeout", publicName: "onSearchTimeout", isSignal: true, isRequired: false, transformFunction: null }, emitValueByEnter: { classPropertyName: "emitValueByEnter", publicName: "emitValueByEnter", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "kbq-filter-search" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true }], ngImport: i0, template: `
2119
2186
  <button
2120
2187
  kbq-button
2121
2188
  [class.kbq-filter_hidden]="isSearchActive"
@@ -2137,6 +2204,7 @@ class KbqFilterBarSearch {
2137
2204
  placeholder="{{ localeData.placeholder }}"
2138
2205
  (blur)="onBlur()"
2139
2206
  (keydown.escape)="onEscape()"
2207
+ (keydown.enter)="onEnter()"
2140
2208
  />
2141
2209
 
2142
2210
  <kbq-cleaner (click)="onClear()" />
@@ -2167,6 +2235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2167
2235
  placeholder="{{ localeData.placeholder }}"
2168
2236
  (blur)="onBlur()"
2169
2237
  (keydown.escape)="onEscape()"
2238
+ (keydown.enter)="onEnter()"
2170
2239
  />
2171
2240
 
2172
2241
  <kbq-cleaner (click)="onClear()" />
@@ -2182,7 +2251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2182
2251
  ], host: {
2183
2252
  class: 'kbq-filter-search'
2184
2253
  }, styles: [".kbq-filter-search{display:flex;align-items:start}.kbq-filter-search .kbq-form-field{width:260px}.kbq-filter-search .kbq-filter_hidden{display:none}\n"] }]
2185
- }], ctorParameters: () => [], propDecorators: { input: [{
2254
+ }], propDecorators: { input: [{
2186
2255
  type: ViewChild,
2187
2256
  args: [KbqInput]
2188
2257
  }], button: [{
@@ -2408,5 +2477,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2408
2477
  * Generated bundle index. Do not edit.
2409
2478
  */
2410
2479
 
2411
- 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, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTitleDirective, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, defaultFilterBarPipes, getId, kbqBuildTree, kbqFilterBarPipesProvider };
2480
+ 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, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTitleDirective, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, defaultFilterBarPipes, defaultOnSearchTimeout, getId, kbqBuildTree, kbqFilterBarPipesProvider };
2412
2481
  //# sourceMappingURL=koobiq-components-filter-bar.mjs.map