@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

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 (256) hide show
  1. package/alert/_alert-theme.scss +19 -33
  2. package/alert/alert.component.scss +49 -141
  3. package/autocomplete/_autocomplete-theme.scss +3 -2
  4. package/autocomplete/autocomplete.scss +7 -14
  5. package/badge/_badge-theme.scss +31 -45
  6. package/badge/badge.component.scss +18 -38
  7. package/button/_button-base.scss +7 -13
  8. package/button/_button-theme.scss +29 -85
  9. package/button/button.component.d.ts +3 -2
  10. package/button/button.scss +7 -16
  11. package/button-toggle/_button-toggle-theme.scss +18 -18
  12. package/button-toggle/button-toggle.scss +14 -34
  13. package/card/_card-theme.scss +19 -17
  14. package/card/card.component.scss +2 -4
  15. package/checkbox/_checkbox-theme.scss +44 -43
  16. package/checkbox/checkbox.scss +23 -21
  17. package/code-block/_code-block-theme.scss +27 -26
  18. package/code-block/actionbar.component.scss +7 -18
  19. package/code-block/code-block.scss +21 -66
  20. package/core/form-field/form-field-ref.d.ts +2 -0
  21. package/core/forms/_forms-theme.scss +4 -7
  22. package/core/forms/_forms.scss +13 -42
  23. package/core/locales/locale-service.d.ts +1 -0
  24. package/core/option/_optgroup-theme.scss +4 -5
  25. package/core/option/_option-action-theme.scss +7 -7
  26. package/core/option/_option-theme.scss +16 -20
  27. package/core/select/common.d.ts +35 -0
  28. package/core/select/index.d.ts +1 -0
  29. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +16 -19
  30. package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +9 -8
  31. package/core/styles/common/_groups.scss +3 -5
  32. package/core/styles/common/_list.scss +14 -18
  33. package/core/styles/common/_popup.scss +5 -4
  34. package/core/styles/common/_select.scss +11 -16
  35. package/core/styles/common/_tokens.scss +30 -9
  36. package/core/styles/theming/_components-theming.scss +151 -131
  37. package/core/styles/visual/_layout.scss +14 -16
  38. package/datepicker/_datepicker-theme.scss +24 -39
  39. package/datepicker/calendar-body.scss +3 -8
  40. package/datepicker/calendar-header.scss +4 -9
  41. package/datepicker/calendar.scss +5 -16
  42. package/datepicker/datepicker-content.scss +4 -12
  43. package/datepicker/datepicker-input.scss +0 -4
  44. package/datepicker/datepicker-toggle.scss +3 -2
  45. package/divider/_divider-theme.scss +3 -1
  46. package/divider/divider.scss +9 -25
  47. package/dl/_dl-theme.scss +5 -6
  48. package/dl/dl.scss +5 -19
  49. package/dropdown/_dropdown-theme.scss +21 -21
  50. package/dropdown/dropdown-item.scss +5 -11
  51. package/dropdown/dropdown-trigger.directive.d.ts +2 -2
  52. package/dropdown/dropdown.scss +6 -14
  53. package/esm2022/alert/alert.component.mjs +2 -2
  54. package/esm2022/badge/badge.component.mjs +2 -2
  55. package/esm2022/button/button.component.mjs +13 -6
  56. package/esm2022/button-toggle/button-toggle.component.mjs +2 -2
  57. package/esm2022/checkbox/checkbox.mjs +2 -2
  58. package/esm2022/code-block/actionbar.component.mjs +2 -2
  59. package/esm2022/code-block/code-block.component.mjs +2 -2
  60. package/esm2022/core/form-field/form-field-ref.mjs +1 -1
  61. package/esm2022/core/locales/locale-service.mjs +5 -2
  62. package/esm2022/core/option/option.mjs +2 -2
  63. package/esm2022/core/select/common.mjs +120 -0
  64. package/esm2022/core/select/index.mjs +2 -1
  65. package/esm2022/core/version.mjs +2 -2
  66. package/esm2022/datepicker/calendar-header.component.mjs +1 -1
  67. package/esm2022/dropdown/dropdown-item.component.mjs +2 -2
  68. package/esm2022/dropdown/dropdown-trigger.directive.mjs +4 -4
  69. package/esm2022/file-upload/multiple-file-upload.component.mjs +2 -2
  70. package/esm2022/file-upload/single-file-upload.component.mjs +2 -2
  71. package/esm2022/form-field/form-field.mjs +2 -2
  72. package/esm2022/form-field/hint.mjs +2 -2
  73. package/esm2022/form-field/password-hint.mjs +2 -2
  74. package/esm2022/icon/icon-item.component.mjs +16 -6
  75. package/esm2022/list/list-selection.component.mjs +2 -2
  76. package/esm2022/list/list.component.mjs +2 -2
  77. package/esm2022/markdown/markdown.component.mjs +2 -2
  78. package/esm2022/navbar/navbar-item.component.mjs +2 -2
  79. package/esm2022/navbar/navbar.component.mjs +2 -2
  80. package/esm2022/navbar/vertical-navbar.component.mjs +2 -2
  81. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  82. package/esm2022/popover/popover.component.mjs +3 -3
  83. package/esm2022/radio/radio.component.mjs +2 -2
  84. package/esm2022/scrollbar/scrollbar.component.mjs +2 -2
  85. package/esm2022/select/select.component.mjs +18 -114
  86. package/esm2022/select/select.module.mjs +28 -28
  87. package/esm2022/table/table.component.mjs +2 -2
  88. package/esm2022/tabs/tab-group.component.mjs +54 -12
  89. package/esm2022/tabs/tab-header.component.mjs +2 -2
  90. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  91. package/esm2022/tags/tag-default-options.mjs +1 -1
  92. package/esm2022/tags/tag-input.mjs +17 -3
  93. package/esm2022/tags/tag-list.component.mjs +2 -2
  94. package/esm2022/tags/tag.component.mjs +2 -2
  95. package/esm2022/timepicker/timepicker.directive.mjs +10 -2
  96. package/esm2022/timezone/timezone-option.component.mjs +2 -2
  97. package/esm2022/timezone/timezone-select.component.mjs +5 -5
  98. package/esm2022/title/title.directive.mjs +2 -2
  99. package/esm2022/toast/toast.component.mjs +3 -3
  100. package/esm2022/toast/toast.service.mjs +17 -12
  101. package/esm2022/tooltip/tooltip.component.mjs +2 -2
  102. package/esm2022/tree/tree-option.component.mjs +2 -2
  103. package/esm2022/tree-select/tree-select.component.mjs +9 -37
  104. package/esm2022/tree-select/tree-select.module.mjs +31 -11
  105. package/fesm2022/koobiq-components-alert.mjs +2 -2
  106. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-badge.mjs +2 -2
  108. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  109. package/fesm2022/koobiq-components-button-toggle.mjs +2 -2
  110. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  111. package/fesm2022/koobiq-components-button.mjs +12 -5
  112. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  113. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  114. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  115. package/fesm2022/koobiq-components-code-block.mjs +4 -4
  116. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  117. package/fesm2022/koobiq-components-core.mjs +124 -7
  118. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  119. package/fesm2022/koobiq-components-datepicker.mjs +1 -1
  120. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  121. package/fesm2022/koobiq-components-dropdown.mjs +5 -5
  122. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  123. package/fesm2022/koobiq-components-file-upload.mjs +4 -4
  124. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  125. package/fesm2022/koobiq-components-form-field.mjs +6 -6
  126. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  127. package/fesm2022/koobiq-components-icon.mjs +14 -4
  128. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  129. package/fesm2022/koobiq-components-list.mjs +4 -4
  130. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  131. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  132. package/fesm2022/koobiq-components-navbar.mjs +6 -6
  133. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  134. package/fesm2022/koobiq-components-popover.mjs +4 -4
  135. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  136. package/fesm2022/koobiq-components-radio.mjs +2 -2
  137. package/fesm2022/koobiq-components-radio.mjs.map +1 -1
  138. package/fesm2022/koobiq-components-scrollbar.mjs +2 -2
  139. package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
  140. package/fesm2022/koobiq-components-select.mjs +46 -142
  141. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  142. package/fesm2022/koobiq-components-table.mjs +2 -2
  143. package/fesm2022/koobiq-components-tabs.mjs +56 -14
  144. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  145. package/fesm2022/koobiq-components-tags.mjs +20 -7
  146. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  147. package/fesm2022/koobiq-components-timepicker.mjs +9 -1
  148. package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
  149. package/fesm2022/koobiq-components-timezone.mjs +6 -6
  150. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  151. package/fesm2022/koobiq-components-title.mjs +1 -1
  152. package/fesm2022/koobiq-components-title.mjs.map +1 -1
  153. package/fesm2022/koobiq-components-toast.mjs +19 -13
  154. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  155. package/fesm2022/koobiq-components-tooltip.mjs +2 -2
  156. package/fesm2022/koobiq-components-tree-select.mjs +37 -44
  157. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  158. package/fesm2022/koobiq-components-tree.mjs +2 -2
  159. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  160. package/file-upload/_file-upload-theme.scss +109 -68
  161. package/file-upload/file-upload.scss +0 -5
  162. package/file-upload/multiple-file-upload.component.scss +35 -99
  163. package/file-upload/single-file-upload.component.scss +12 -31
  164. package/form-field/_form-field-theme.scss +32 -34
  165. package/form-field/_hint-theme.scss +16 -19
  166. package/form-field/cleaner.scss +3 -8
  167. package/form-field/form-field.scss +11 -12
  168. package/form-field/hint.scss +5 -7
  169. package/form-field/password-toggle.scss +3 -9
  170. package/form-field/stepper.scss +4 -10
  171. package/icon/_icon-button-theme.scss +35 -35
  172. package/icon/_icon-item-theme.scss +46 -31
  173. package/icon/_icon-theme.scss +9 -15
  174. package/icon/icon-button.scss +5 -17
  175. package/icon/icon-item.component.d.ts +3 -1
  176. package/icon/icon-item.scss +12 -7
  177. package/icon/icon.scss +0 -5
  178. package/input/_input-theme.scss +2 -3
  179. package/input/input.scss +2 -1
  180. package/link/_link-theme.scss +25 -42
  181. package/list/_list-theme.scss +18 -17
  182. package/list/list.scss +3 -5
  183. package/loader-overlay/_loader-overlay-theme.scss +13 -16
  184. package/loader-overlay/loader-overlay.scss +9 -32
  185. package/markdown/_markdown-theme.scss +41 -44
  186. package/markdown/markdown.scss +38 -88
  187. package/modal/_modal-confirm.scss +2 -6
  188. package/modal/_modal-theme.scss +11 -12
  189. package/modal/modal.scss +18 -24
  190. package/navbar/_navbar-item_horizontal.scss +28 -28
  191. package/navbar/_navbar-item_vertical.scss +31 -30
  192. package/navbar/_navbar-theme.scss +21 -22
  193. package/navbar/navbar-brand.scss +24 -26
  194. package/navbar/navbar-divider.scss +4 -7
  195. package/navbar/navbar-item.scss +11 -13
  196. package/navbar/navbar.scss +2 -5
  197. package/navbar/vertical-navbar.scss +3 -5
  198. package/package.json +9 -9
  199. package/popover/_popover-theme.scss +9 -16
  200. package/popover/popover.scss +18 -24
  201. package/prebuilt-themes/dark-theme.css +1 -1
  202. package/prebuilt-themes/light-theme.css +1 -1
  203. package/progress-bar/_progress-bar-theme.scss +7 -10
  204. package/progress-bar/progress-bar.scss +6 -18
  205. package/progress-spinner/_progress-spinner-theme.scss +6 -7
  206. package/progress-spinner/progress-spinner.scss +8 -17
  207. package/radio/_radio-theme.scss +29 -37
  208. package/radio/radio.scss +20 -39
  209. package/risk-level/_risk-level-theme.scss +25 -30
  210. package/risk-level/risk-level.component.scss +5 -8
  211. package/schematics/ng-add/index.js +6 -6
  212. package/scrollbar/_scrollbar-component-theme.scss +14 -17
  213. package/scrollbar/scrollbar.component.scss +13 -20
  214. package/select/_select-theme.scss +14 -15
  215. package/select/select.component.d.ts +2 -32
  216. package/select/select.module.d.ts +1 -1
  217. package/select/select.scss +3 -10
  218. package/sidepanel/_sidepanel-theme.scss +8 -9
  219. package/sidepanel/sidepanel.scss +19 -30
  220. package/splitter/_splitter-theme.scss +3 -3
  221. package/table/_table-theme.scss +9 -8
  222. package/table/table.scss +12 -12
  223. package/tabs/_tabs-common.scss +4 -7
  224. package/tabs/_tabs-theme.scss +77 -44
  225. package/tabs/tab-group.component.d.ts +9 -3
  226. package/tabs/tab-group.scss +2 -7
  227. package/tabs/tab-header.scss +0 -4
  228. package/tabs/tab-nav-bar/tab-nav-bar.scss +2 -7
  229. package/tags/_tag-theme.scss +23 -26
  230. package/tags/tag-default-options.d.ts +1 -0
  231. package/tags/tag-input.d.ts +7 -1
  232. package/tags/tag-list.scss +6 -5
  233. package/tags/tag.scss +6 -9
  234. package/textarea/_textarea-theme.scss +2 -4
  235. package/textarea/textarea.scss +4 -6
  236. package/timepicker/timepicker.scss +2 -7
  237. package/timezone/_timezone-option-theme.scss +8 -9
  238. package/timezone/timezone-option.component.scss +5 -7
  239. package/timezone/timezone-select.component.d.ts +2 -1
  240. package/timezone/timezone-select.component.scss +2 -3
  241. package/toast/_toast-theme.scss +15 -14
  242. package/toast/toast-container.component.scss +4 -7
  243. package/toast/toast.component.scss +20 -25
  244. package/toast/toast.service.d.ts +8 -4
  245. package/toggle/_toggle-theme.scss +48 -42
  246. package/toggle/toggle.scss +9 -21
  247. package/tooltip/_tooltip-theme.scss +13 -16
  248. package/tooltip/tooltip.scss +8 -10
  249. package/tree/_tree-theme.scss +20 -22
  250. package/tree/toggle.scss +3 -5
  251. package/tree/tree-option.scss +5 -6
  252. package/tree-select/_tree-select-theme.scss +12 -14
  253. package/tree-select/tree-select.component.d.ts +4 -17
  254. package/tree-select/tree-select.module.d.ts +1 -2
  255. package/tree-select/tree-select.scss +1 -5
  256. package/core/styles/_variables.scss +0 -1
@@ -1,12 +1,12 @@
1
- import * as i2$1 from '@angular/cdk/overlay';
1
+ import * as i2 from '@angular/cdk/overlay';
2
2
  import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
3
3
  import * as i6 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i0 from '@angular/core';
6
- import { Directive, Inject, Optional, ContentChild, EventEmitter, isDevMode, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Self, ViewChild, ViewChildren, ContentChildren, Input, Output, NgModule } from '@angular/core';
7
- import * as i2 from '@koobiq/components/core';
8
- import { mixinTabIndex, mixinDisabled, mixinErrorState, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, getKbqSelectNonArrayValueError, KbqVirtualOption, SELECT_PANEL_PADDING_X, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_OPTION_PARENT_COMPONENT, KbqOption, KbqOptgroup, kbqSelectAnimations, KbqOptionModule, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
9
- import * as i1 from '@koobiq/components/form-field';
6
+ import { Directive, Inject, Optional, EventEmitter, isDevMode, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Self, ViewChild, ContentChild, ViewChildren, ContentChildren, Input, Output, NgModule } from '@angular/core';
7
+ import * as i1 from '@koobiq/components/core';
8
+ import { mixinTabIndex, mixinDisabled, mixinErrorState, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, getKbqSelectNonArrayValueError, KbqVirtualOption, SELECT_PANEL_PADDING_X, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_OPTION_PARENT_COMPONENT, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqOption, KbqOptgroup, kbqSelectAnimations, KbqOptionModule, KbqSelectSearchEmptyResult, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
9
+ import * as i5 from '@koobiq/components/form-field';
10
10
  import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
11
11
  import * as i7 from '@koobiq/components/icon';
12
12
  import { KbqIconModule } from '@koobiq/components/icon';
@@ -18,11 +18,10 @@ import * as i3 from '@angular/cdk/bidi';
18
18
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
19
19
  import { SelectionModel } from '@angular/cdk/collections';
20
20
  import { CdkVirtualForOf } from '@angular/cdk/scrolling';
21
- import * as i5 from '@angular/forms';
21
+ import * as i4$1 from '@angular/forms';
22
22
  import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
23
- import { ESCAPE, SPACE, HOME, END, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, TAB, PAGE_UP, PAGE_DOWN, A, BACKSPACE, DELETE } from '@koobiq/cdk/keycodes';
24
- import { KbqInput } from '@koobiq/components/input';
25
- import { Subscription, Subject, defer, merge, BehaviorSubject } from 'rxjs';
23
+ import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, A, BACKSPACE, DELETE } from '@koobiq/cdk/keycodes';
24
+ import { Subject, defer, merge, Subscription, BehaviorSubject } from 'rxjs';
26
25
  import { switchMap, take, filter, map, distinctUntilChanged, takeUntil, startWith, delay } from 'rxjs/operators';
27
26
 
28
27
  class KbqOptionTooltip extends KbqTooltipTrigger {
@@ -72,7 +71,7 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
72
71
  this.disabled = true;
73
72
  this.hide();
74
73
  }
75
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptionTooltip, deps: [{ token: i2.KbqOption }, { token: i2$1.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2$1.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i3.Directionality, optional: true }, { token: i4.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
74
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptionTooltip, deps: [{ token: i1.KbqOption }, { token: i2.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i3.Directionality, optional: true }, { token: i4.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
76
75
  /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqOptionTooltip, selector: "kbq-option", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, usesInheritance: true, ngImport: i0 }); }
77
76
  }
78
77
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptionTooltip, decorators: [{
@@ -86,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
86
85
  '(blur)': 'onBlur()'
87
86
  }
88
87
  }]
89
- }], ctorParameters: () => [{ type: i2.KbqOption }, { type: i2$1.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2$1.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
88
+ }], ctorParameters: () => [{ type: i1.KbqOption }, { type: i2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
90
89
  type: Inject,
91
90
  args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
92
91
  }] }, { type: i3.Directionality, decorators: [{
@@ -102,101 +101,6 @@ class KbqSelectChange {
102
101
  this.value = value;
103
102
  }
104
103
  }
105
- class KbqSelectFooter {
106
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
107
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectFooter, selector: "kbq-select-footer, [kbq-select-footer]", host: { classAttribute: "kbq-select__footer" }, ngImport: i0 }); }
108
- }
109
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectFooter, decorators: [{
110
- type: Directive,
111
- args: [{
112
- selector: 'kbq-select-footer, [kbq-select-footer]',
113
- host: { class: 'kbq-select__footer' }
114
- }]
115
- }] });
116
- class KbqSelectSearch {
117
- constructor(formField) {
118
- this.searchChangesSubscription = new Subscription();
119
- this.isSearchChanged = false;
120
- formField.canCleanerClearByEsc = false;
121
- }
122
- focus() {
123
- this.input.focus();
124
- }
125
- reset() {
126
- this.input.ngControl.reset();
127
- }
128
- ngAfterContentInit() {
129
- if (!this.input) {
130
- throw Error('KbqSelectSearch does not work without kbqInput');
131
- }
132
- if (!this.input.ngControl) {
133
- throw Error('KbqSelectSearch does not work without ngControl');
134
- }
135
- Promise.resolve().then(() => {
136
- this.searchChangesSubscription = this.input.ngControl.valueChanges.subscribe(() => {
137
- this.isSearchChanged = true;
138
- });
139
- });
140
- }
141
- ngOnDestroy() {
142
- this.searchChangesSubscription.unsubscribe();
143
- }
144
- handleKeydown(event) {
145
- // tslint:disable-next-line:deprecation
146
- if (event.keyCode === ESCAPE) {
147
- if (this.input.value) {
148
- this.reset();
149
- event.stopPropagation();
150
- }
151
- }
152
- // tslint:disable-next-line:deprecation
153
- if ([SPACE, HOME, END].includes(event.keyCode)) {
154
- event.stopPropagation();
155
- }
156
- }
157
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectSearch, deps: [{ token: i1.KbqFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
158
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectSearch, selector: "[kbqSelectSearch]", host: { listeners: { "keydown": "handleKeydown($event)" } }, queries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true }], exportAs: ["kbqSelectSearch"], ngImport: i0 }); }
159
- }
160
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectSearch, decorators: [{
161
- type: Directive,
162
- args: [{
163
- selector: '[kbqSelectSearch]',
164
- exportAs: 'kbqSelectSearch',
165
- host: {
166
- '(keydown)': 'handleKeydown($event)'
167
- }
168
- }]
169
- }], ctorParameters: () => [{ type: i1.KbqFormField }], propDecorators: { input: [{
170
- type: ContentChild,
171
- args: [KbqInput, { static: false }]
172
- }] } });
173
- class KbqSelectSearchEmptyResult {
174
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectSearchEmptyResult, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
175
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"], ngImport: i0 }); }
176
- }
177
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectSearchEmptyResult, decorators: [{
178
- type: Directive,
179
- args: [{
180
- selector: '[kbq-select-search-empty-result]',
181
- exportAs: 'kbqSelectSearchEmptyResult'
182
- }]
183
- }] });
184
- class KbqSelectTrigger {
185
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
186
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectTrigger, selector: "kbq-select-trigger, [kbq-select-trigger]", ngImport: i0 }); }
187
- }
188
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectTrigger, decorators: [{
189
- type: Directive,
190
- args: [{ selector: 'kbq-select-trigger, [kbq-select-trigger]' }]
191
- }] });
192
- class KbqSelectMatcher {
193
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectMatcher, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
194
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", ngImport: i0 }); }
195
- }
196
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectMatcher, decorators: [{
197
- type: Directive,
198
- args: [{ selector: 'kbq-select-matcher, [kbq-select-matcher]' }]
199
- }] });
200
104
  /** @docs-private */
201
105
  class KbqSelectBase {
202
106
  constructor(elementRef, defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl) {
@@ -298,7 +202,7 @@ class KbqSelect extends KbqSelectMixinBase {
298
202
  this._focused = value;
299
203
  }
300
204
  get isEmptySearchResult() {
301
- return this.search && this.options.length === 0 && !!this.search.input.value;
205
+ return this.search && this.options.length === 0 && !!this.search.value();
302
206
  }
303
207
  get canShowCleaner() {
304
208
  return !this.disabled && this.cleaner && this.selectionModel.hasValue();
@@ -1149,11 +1053,11 @@ class KbqSelect extends KbqSelectMixinBase {
1149
1053
  this._renderer.setStyle(triggerClone, 'left', '0');
1150
1054
  return triggerClone;
1151
1055
  }
1152
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i2.ErrorStateMatcher }, { token: i0.ElementRef }, { token: i2$1.OverlayContainer }, { token: i3.Directionality, optional: true }, { token: i5.NgForm, optional: true }, { token: i5.FormGroupDirective, optional: true }, { token: i1.KbqFormField, optional: true }, { token: i5.NgControl, optional: true, self: true }, { token: KBQ_SELECT_SCROLL_STRATEGY }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
1056
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ErrorStateMatcher }, { token: i0.ElementRef }, { token: i2.OverlayContainer }, { token: i3.Directionality, optional: true }, { token: i4$1.NgForm, optional: true }, { token: i4$1.FormGroupDirective, optional: true }, { token: i5.KbqFormField, optional: true }, { token: i4$1.NgControl, optional: true, self: true }, { token: KBQ_SELECT_SCROLL_STRATEGY }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
1153
1057
  /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelect, selector: "kbq-select", inputs: { disabled: "disabled", tabIndex: "tabIndex", hiddenItemsText: "hiddenItemsText", panelClass: "panelClass", backdropClass: "backdropClass", errorStateMatcher: "errorStateMatcher", sortComparator: "sortComparator", hasBackdrop: "hasBackdrop", placeholder: "placeholder", required: "required", multiple: "multiple", compareWith: "compareWith", value: "value", id: "id", hiddenItemsTextFormatter: "hiddenItemsTextFormatter" }, outputs: { openedChange: "openedChange", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()", "window:resize": "calculateHiddenItems()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState" }, classAttribute: "kbq-select" }, providers: [
1154
1058
  { provide: KbqFormFieldControl, useExisting: KbqSelect },
1155
1059
  { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect }
1156
- ], queries: [{ propertyName: "footer", first: true, predicate: KbqSelectFooter, descendants: true, read: ElementRef }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef }, { propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }, { propertyName: "options", predicate: KbqOption, descendants: true }, { propertyName: "optionGroups", predicate: KbqOptgroup }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n [class.kbq-select__trigger_empty]=\"empty\"\n #origin=\"cdkOverlayOrigin\"\n #trigger\n [ngSwitch]=\"!!customMatcher\">\n\n <select class=\"cdk-visually-hidden\" [id]=\"id\"></select>\n\n <div class=\"kbq-select__matcher\" *ngSwitchCase=\"false\">\n <span class=\"kbq-select__placeholder\" *ngIf=\"empty\">{{ placeholder || '\\u00A0' }}</span>\n <span *ngIf=\"!empty\" [ngSwitch]=\"!!customTrigger\">\n <div *ngSwitchDefault [ngSwitch]=\"multiple\" class=\"kbq-select__match-container\">\n <span *ngSwitchCase=\"false\" class=\"kbq-select__matcher-text\">{{ triggerValue }}</span>\n <div *ngSwitchCase=\"true\" class=\"kbq-select__match-list\">\n <ng-container *ngIf=\"!customTagTemplateRef\">\n <kbq-tag *ngFor=\"let option of triggerValues\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n [class.kbq-error]=\"errorState\">\n {{ option.viewValue }}\n <i kbq-icon=\"mc-close-S_16\" kbqTagRemove\n *ngIf=\"!option.disabled && !disabled\"\n (click)=\"onRemoveMatcherItem(option, $event)\">\n </i>\n </kbq-tag>\n </ng-container>\n <ng-container *ngIf=\"customTagTemplateRef\">\n <ng-container *ngFor=\"let option of triggerValues\"\n [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n [ngTemplateOutletContext]=\"{$implicit: option, select: this}\">\n </ng-container>\n </ng-container>\n </div>\n <div class=\"kbq-select__match-hidden-text\" [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\">\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" *ngSwitchCase=\"true\"></ng-content>\n </span>\n\n <div class=\"kbq-select__cleaner\" *ngIf=\"canShowCleaner\" (click)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n </div>\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i class=\"kbq-select__arrow\" kbq-icon=\"mc-angle-down-S_16\" [color]=\"'contrast-fade'\"></i>\n </div>\n </div>\n\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" *ngSwitchCase=\"true\"></ng-content>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n (backdropClick)=\"close()\"\n (attach)=\"onAttached()\"\n (detach)=\"close()\">\n <div\n #panel\n class=\"kbq-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.transformOrigin]=\"transformOrigin\"\n [style.font-size.px]=\"triggerFontSize\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"handleClick($event)\">\n\n <div *ngIf=\"search\" class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\"></ng-content>\n </div>\n\n <div #optionsContainer\n class=\"kbq-select__content kbq-scrollbar\"\n [@fadeInContent]=\"'showing'\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\">\n\n <div *ngIf=\"isEmptySearchResult\" class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-select-footer]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2)}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, 8px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-vertical, 8px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-left, 12px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-left, 4px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);max-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);gap:var(--kbq-select-size-multiple-content-gap, 4px);margin-right:var(--kbq-select-size-multiple-content-gap, 4px)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, 4px);text-align:right}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, 8px)}.kbq-select__panel .kbq-optgroup-label,.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, 32px);cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, 12px);padding-right:var(--kbq-option-size-horizontal-padding, 12px);border:var(--kbq-option-size-border-width, 2px) solid transparent}.kbq-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:4px 12px}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:calc(var(--kbq-select-panel-size-max-height, 256px));max-height:calc(var(--kbq-select-panel-size-max-height, 256px))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i8.KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["color", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: i8.KbqTagRemove, selector: "[kbqTagRemove]" }], animations: [
1060
+ ], queries: [{ propertyName: "footer", first: true, predicate: KbqSelectFooter, descendants: true, read: ElementRef }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef }, { propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }, { propertyName: "options", predicate: KbqOption, descendants: true }, { propertyName: "optionGroups", predicate: KbqOptgroup }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n [class.kbq-select__trigger_empty]=\"empty\"\n #origin=\"cdkOverlayOrigin\"\n #trigger\n [ngSwitch]=\"!!customMatcher\">\n\n <select class=\"cdk-visually-hidden\" [id]=\"id\"></select>\n\n <div class=\"kbq-select__matcher\" *ngSwitchCase=\"false\">\n <span class=\"kbq-select__placeholder\" *ngIf=\"empty\">{{ placeholder || '\\u00A0' }}</span>\n <span *ngIf=\"!empty\" [ngSwitch]=\"!!customTrigger\">\n <div *ngSwitchDefault [ngSwitch]=\"multiple\" class=\"kbq-select__match-container\">\n <span *ngSwitchCase=\"false\" class=\"kbq-select__matcher-text\">{{ triggerValue }}</span>\n <div *ngSwitchCase=\"true\" class=\"kbq-select__match-list\">\n <ng-container *ngIf=\"!customTagTemplateRef\">\n <kbq-tag *ngFor=\"let option of triggerValues\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n [class.kbq-error]=\"errorState\">\n {{ option.viewValue }}\n <i kbq-icon=\"mc-close-S_16\" kbqTagRemove\n *ngIf=\"!option.disabled && !disabled\"\n (click)=\"onRemoveMatcherItem(option, $event)\">\n </i>\n </kbq-tag>\n </ng-container>\n <ng-container *ngIf=\"customTagTemplateRef\">\n <ng-container *ngFor=\"let option of triggerValues\"\n [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n [ngTemplateOutletContext]=\"{$implicit: option, select: this}\">\n </ng-container>\n </ng-container>\n </div>\n <div class=\"kbq-select__match-hidden-text\" [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\">\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" *ngSwitchCase=\"true\"></ng-content>\n </span>\n\n <div class=\"kbq-select__cleaner\" *ngIf=\"canShowCleaner\" (click)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n </div>\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i class=\"kbq-select__arrow\" kbq-icon=\"mc-angle-down-S_16\" [color]=\"'contrast-fade'\"></i>\n </div>\n </div>\n\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" *ngSwitchCase=\"true\"></ng-content>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n (backdropClick)=\"close()\"\n (attach)=\"onAttached()\"\n (detach)=\"close()\">\n <div\n #panel\n class=\"kbq-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.transformOrigin]=\"transformOrigin\"\n [style.font-size.px]=\"triggerFontSize\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"handleClick($event)\">\n\n <div *ngIf=\"search\" class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\"></ng-content>\n </div>\n\n <div #optionsContainer\n class=\"kbq-select__content kbq-scrollbar\"\n [@fadeInContent]=\"'showing'\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\">\n\n <div *ngIf=\"isEmptySearchResult\" class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-select-footer]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2)}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-left, 12px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-left, 4px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);max-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);gap:var(--kbq-select-size-multiple-content-gap, 4px);margin-right:var(--kbq-select-size-multiple-content-gap, 4px)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, 4px);text-align:right}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, 8px)}.kbq-select__panel .kbq-optgroup-label,.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, 32px);cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, 12px);padding-right:var(--kbq-option-size-horizontal-padding, 12px);border:var(--kbq-option-size-border-width, 2px) solid transparent}.kbq-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs, 4px) var(--kbq-size-m, 12px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i8.KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["color", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: i8.KbqTagRemove, selector: "[kbqTagRemove]" }], animations: [
1157
1061
  kbqSelectAnimations.transformPanel,
1158
1062
  kbqSelectAnimations.fadeInContent
1159
1063
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1177,23 +1081,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
1177
1081
  ], providers: [
1178
1082
  { provide: KbqFormFieldControl, useExisting: KbqSelect },
1179
1083
  { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect }
1180
- ], template: "<div cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n [class.kbq-select__trigger_empty]=\"empty\"\n #origin=\"cdkOverlayOrigin\"\n #trigger\n [ngSwitch]=\"!!customMatcher\">\n\n <select class=\"cdk-visually-hidden\" [id]=\"id\"></select>\n\n <div class=\"kbq-select__matcher\" *ngSwitchCase=\"false\">\n <span class=\"kbq-select__placeholder\" *ngIf=\"empty\">{{ placeholder || '\\u00A0' }}</span>\n <span *ngIf=\"!empty\" [ngSwitch]=\"!!customTrigger\">\n <div *ngSwitchDefault [ngSwitch]=\"multiple\" class=\"kbq-select__match-container\">\n <span *ngSwitchCase=\"false\" class=\"kbq-select__matcher-text\">{{ triggerValue }}</span>\n <div *ngSwitchCase=\"true\" class=\"kbq-select__match-list\">\n <ng-container *ngIf=\"!customTagTemplateRef\">\n <kbq-tag *ngFor=\"let option of triggerValues\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n [class.kbq-error]=\"errorState\">\n {{ option.viewValue }}\n <i kbq-icon=\"mc-close-S_16\" kbqTagRemove\n *ngIf=\"!option.disabled && !disabled\"\n (click)=\"onRemoveMatcherItem(option, $event)\">\n </i>\n </kbq-tag>\n </ng-container>\n <ng-container *ngIf=\"customTagTemplateRef\">\n <ng-container *ngFor=\"let option of triggerValues\"\n [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n [ngTemplateOutletContext]=\"{$implicit: option, select: this}\">\n </ng-container>\n </ng-container>\n </div>\n <div class=\"kbq-select__match-hidden-text\" [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\">\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" *ngSwitchCase=\"true\"></ng-content>\n </span>\n\n <div class=\"kbq-select__cleaner\" *ngIf=\"canShowCleaner\" (click)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n </div>\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i class=\"kbq-select__arrow\" kbq-icon=\"mc-angle-down-S_16\" [color]=\"'contrast-fade'\"></i>\n </div>\n </div>\n\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" *ngSwitchCase=\"true\"></ng-content>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n (backdropClick)=\"close()\"\n (attach)=\"onAttached()\"\n (detach)=\"close()\">\n <div\n #panel\n class=\"kbq-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.transformOrigin]=\"transformOrigin\"\n [style.font-size.px]=\"triggerFontSize\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"handleClick($event)\">\n\n <div *ngIf=\"search\" class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\"></ng-content>\n </div>\n\n <div #optionsContainer\n class=\"kbq-select__content kbq-scrollbar\"\n [@fadeInContent]=\"'showing'\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\">\n\n <div *ngIf=\"isEmptySearchResult\" class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-select-footer]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2)}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, 8px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-vertical, 8px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-left, 12px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-left, 4px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);max-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);gap:var(--kbq-select-size-multiple-content-gap, 4px);margin-right:var(--kbq-select-size-multiple-content-gap, 4px)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, 4px);text-align:right}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, 8px)}.kbq-select__panel .kbq-optgroup-label,.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, 32px);cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, 12px);padding-right:var(--kbq-option-size-horizontal-padding, 12px);border:var(--kbq-option-size-border-width, 2px) solid transparent}.kbq-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:4px 12px}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:calc(var(--kbq-select-panel-size-max-height, 256px));max-height:calc(var(--kbq-select-panel-size-max-height, 256px))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}\n"] }]
1181
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i2.ErrorStateMatcher }, { type: i0.ElementRef }, { type: i2$1.OverlayContainer }, { type: i3.Directionality, decorators: [{
1084
+ ], template: "<div cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n [class.kbq-select__trigger_empty]=\"empty\"\n #origin=\"cdkOverlayOrigin\"\n #trigger\n [ngSwitch]=\"!!customMatcher\">\n\n <select class=\"cdk-visually-hidden\" [id]=\"id\"></select>\n\n <div class=\"kbq-select__matcher\" *ngSwitchCase=\"false\">\n <span class=\"kbq-select__placeholder\" *ngIf=\"empty\">{{ placeholder || '\\u00A0' }}</span>\n <span *ngIf=\"!empty\" [ngSwitch]=\"!!customTrigger\">\n <div *ngSwitchDefault [ngSwitch]=\"multiple\" class=\"kbq-select__match-container\">\n <span *ngSwitchCase=\"false\" class=\"kbq-select__matcher-text\">{{ triggerValue }}</span>\n <div *ngSwitchCase=\"true\" class=\"kbq-select__match-list\">\n <ng-container *ngIf=\"!customTagTemplateRef\">\n <kbq-tag *ngFor=\"let option of triggerValues\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n [class.kbq-error]=\"errorState\">\n {{ option.viewValue }}\n <i kbq-icon=\"mc-close-S_16\" kbqTagRemove\n *ngIf=\"!option.disabled && !disabled\"\n (click)=\"onRemoveMatcherItem(option, $event)\">\n </i>\n </kbq-tag>\n </ng-container>\n <ng-container *ngIf=\"customTagTemplateRef\">\n <ng-container *ngFor=\"let option of triggerValues\"\n [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n [ngTemplateOutletContext]=\"{$implicit: option, select: this}\">\n </ng-container>\n </ng-container>\n </div>\n <div class=\"kbq-select__match-hidden-text\" [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\">\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" *ngSwitchCase=\"true\"></ng-content>\n </span>\n\n <div class=\"kbq-select__cleaner\" *ngIf=\"canShowCleaner\" (click)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n </div>\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i class=\"kbq-select__arrow\" kbq-icon=\"mc-angle-down-S_16\" [color]=\"'contrast-fade'\"></i>\n </div>\n </div>\n\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" *ngSwitchCase=\"true\"></ng-content>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n (backdropClick)=\"close()\"\n (attach)=\"onAttached()\"\n (detach)=\"close()\">\n <div\n #panel\n class=\"kbq-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.transformOrigin]=\"transformOrigin\"\n [style.font-size.px]=\"triggerFontSize\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"handleClick($event)\">\n\n <div *ngIf=\"search\" class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\"></ng-content>\n </div>\n\n <div #optionsContainer\n class=\"kbq-select__content kbq-scrollbar\"\n [@fadeInContent]=\"'showing'\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\">\n\n <div *ngIf=\"isEmptySearchResult\" class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-select-footer]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2)}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-single-padding-left, 12px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-right, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) calc(var(--kbq-select-size-multiple-padding-left, 4px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);max-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-select-size-multiple-padding-vertical, 4px) * 2);gap:var(--kbq-select-size-multiple-content-gap, 4px);margin-right:var(--kbq-select-size-multiple-content-gap, 4px)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, 4px);text-align:right}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, 8px)}.kbq-select__panel .kbq-optgroup-label,.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, 32px);cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, 12px);padding-right:var(--kbq-option-size-horizontal-padding, 12px);border:var(--kbq-option-size-border-width, 2px) solid transparent}.kbq-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs, 4px) var(--kbq-size-m, 12px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}\n"] }]
1085
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ErrorStateMatcher }, { type: i0.ElementRef }, { type: i2.OverlayContainer }, { type: i3.Directionality, decorators: [{
1182
1086
  type: Optional
1183
- }] }, { type: i5.NgForm, decorators: [{
1087
+ }] }, { type: i4$1.NgForm, decorators: [{
1184
1088
  type: Optional
1185
- }] }, { type: i5.FormGroupDirective, decorators: [{
1089
+ }] }, { type: i4$1.FormGroupDirective, decorators: [{
1186
1090
  type: Optional
1187
- }] }, { type: i1.KbqFormField, decorators: [{
1091
+ }] }, { type: i5.KbqFormField, decorators: [{
1188
1092
  type: Optional
1189
- }] }, { type: i5.NgControl, decorators: [{
1093
+ }] }, { type: i4$1.NgControl, decorators: [{
1190
1094
  type: Self
1191
1095
  }, {
1192
1096
  type: Optional
1193
1097
  }] }, { type: undefined, decorators: [{
1194
1098
  type: Inject,
1195
1099
  args: [KBQ_SELECT_SCROLL_STRATEGY]
1196
- }] }, { type: i2.KbqLocaleService, decorators: [{
1100
+ }] }, { type: i1.KbqLocaleService, decorators: [{
1197
1101
  type: Optional
1198
1102
  }, {
1199
1103
  type: Inject,
@@ -1283,26 +1187,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
1283
1187
  class KbqSelectModule {
1284
1188
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1285
1189
  /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectModule, declarations: [KbqSelect,
1286
- KbqSelectSearch,
1287
- KbqSelectSearchEmptyResult,
1288
- KbqSelectTrigger,
1289
- KbqSelectMatcher,
1290
- KbqOptionTooltip,
1291
- KbqSelectFooter], imports: [CommonModule,
1190
+ KbqOptionTooltip], imports: [CommonModule,
1292
1191
  OverlayModule,
1293
1192
  KbqOptionModule,
1294
1193
  KbqIconModule,
1295
1194
  KbqTagsModule,
1296
- KbqToolTipModule], exports: [KbqFormFieldModule,
1297
- KbqSelect,
1195
+ KbqToolTipModule,
1298
1196
  KbqSelectSearch,
1299
- KbqSelectSearchEmptyResult,
1300
- KbqSelectTrigger,
1301
- KbqSelectMatcher,
1302
1197
  KbqSelectFooter,
1198
+ KbqSelectMatcher,
1199
+ KbqSelectTrigger,
1200
+ KbqSelectSearchEmptyResult], exports: [KbqFormFieldModule,
1201
+ KbqSelect,
1303
1202
  KbqOptionTooltip,
1304
1203
  KbqOptionModule,
1305
- CommonModule] }); }
1204
+ CommonModule,
1205
+ KbqSelectSearch,
1206
+ KbqSelectFooter,
1207
+ KbqSelectMatcher,
1208
+ KbqSelectTrigger,
1209
+ KbqSelectSearchEmptyResult] }); }
1306
1210
  /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectModule, providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [CommonModule,
1307
1211
  OverlayModule,
1308
1212
  KbqOptionModule,
@@ -1321,28 +1225,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
1321
1225
  KbqOptionModule,
1322
1226
  KbqIconModule,
1323
1227
  KbqTagsModule,
1324
- KbqToolTipModule
1228
+ KbqToolTipModule,
1229
+ KbqSelectSearch,
1230
+ KbqSelectFooter,
1231
+ KbqSelectMatcher,
1232
+ KbqSelectTrigger,
1233
+ KbqSelectSearchEmptyResult
1325
1234
  ],
1326
1235
  exports: [
1327
1236
  KbqFormFieldModule,
1328
1237
  KbqSelect,
1329
- KbqSelectSearch,
1330
- KbqSelectSearchEmptyResult,
1331
- KbqSelectTrigger,
1332
- KbqSelectMatcher,
1333
- KbqSelectFooter,
1334
1238
  KbqOptionTooltip,
1335
1239
  KbqOptionModule,
1336
- CommonModule
1240
+ CommonModule,
1241
+ KbqSelectSearch,
1242
+ KbqSelectFooter,
1243
+ KbqSelectMatcher,
1244
+ KbqSelectTrigger,
1245
+ KbqSelectSearchEmptyResult
1337
1246
  ],
1338
1247
  declarations: [
1339
1248
  KbqSelect,
1340
- KbqSelectSearch,
1341
- KbqSelectSearchEmptyResult,
1342
- KbqSelectTrigger,
1343
- KbqSelectMatcher,
1344
- KbqOptionTooltip,
1345
- KbqSelectFooter
1249
+ KbqOptionTooltip
1346
1250
  ],
1347
1251
  providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER]
1348
1252
  }]
@@ -1352,5 +1256,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
1352
1256
  * Generated bundle index. Do not edit.
1353
1257
  */
1354
1258
 
1355
- export { KbqOptionTooltip, KbqSelect, KbqSelectBase, KbqSelectChange, KbqSelectFooter, KbqSelectMatcher, KbqSelectModule, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger };
1259
+ export { KbqOptionTooltip, KbqSelect, KbqSelectBase, KbqSelectChange, KbqSelectModule };
1356
1260
  //# sourceMappingURL=koobiq-components-select.mjs.map