@koobiq/components 19.4.1 → 19.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (242) hide show
  1. package/LICENSE +1 -1
  2. package/accordion/accordion-content.d.ts +1 -1
  3. package/accordion/accordion-content.directive.d.ts +22 -7
  4. package/accordion/accordion-header.directive.d.ts +2 -2
  5. package/accordion/accordion-item.d.ts +74 -3
  6. package/accordion/accordion-trigger.component.d.ts +15 -2
  7. package/accordion/accordion-trigger.directive.d.ts +13 -5
  8. package/accordion/accordion.component.d.ts +67 -6
  9. package/accordion/accordion.component.scss +9 -27
  10. package/accordion/public-api.d.ts +0 -2
  11. package/actions-panel/actions-panel-container.scss +6 -0
  12. package/actions-panel/actions-panel-tokens.scss +4 -1
  13. package/autocomplete/autocomplete.component.d.ts +6 -1
  14. package/autocomplete/autocomplete.module.d.ts +1 -1
  15. package/autocomplete/autocomplete.scss +14 -3
  16. package/badge/badge-tokens.scss +3 -3
  17. package/button/button-group.d.ts +45 -0
  18. package/button/button-group.scss +17 -0
  19. package/button/button.component.d.ts +3 -0
  20. package/button/button.module.d.ts +2 -1
  21. package/button/public-api.d.ts +1 -0
  22. package/button-toggle/button-toggle-tokens.scss +1 -1
  23. package/checkbox/checkbox.d.ts +5 -4
  24. package/checkbox/checkbox.scss +5 -5
  25. package/clamped-text/clamped-list.d.ts +41 -0
  26. package/clamped-text/clamped-text.d.ts +10 -6
  27. package/clamped-text/constants.d.ts +21 -1
  28. package/clamped-text/index.d.ts +1 -0
  29. package/clamped-text/module.d.ts +2 -1
  30. package/code-block/code-block-tokens.scss +35 -16
  31. package/code-block/code-block.d.ts +17 -5
  32. package/code-block/code-block.module.d.ts +1 -1
  33. package/code-block/code-block.scss +1 -0
  34. package/code-block/types.d.ts +9 -0
  35. package/core/common-behaviors/flex.d.ts +4 -0
  36. package/core/common-behaviors/index.d.ts +1 -0
  37. package/core/error/error-state-matcher.d.ts +10 -0
  38. package/core/form-field/form-field-ref.d.ts +3 -1
  39. package/core/forms/_forms.scss +10 -3
  40. package/core/locales/en-US.d.ts +2 -0
  41. package/core/locales/es-LA.d.ts +2 -0
  42. package/core/locales/locale-service.d.ts +10 -0
  43. package/core/locales/pt-BR.d.ts +2 -0
  44. package/core/locales/ru-RU.d.ts +2 -0
  45. package/core/locales/tk-TM.d.ts +2 -0
  46. package/core/locales/types.d.ts +2 -0
  47. package/core/option/_option-action-theme.scss +1 -0
  48. package/core/option/_option-theme.scss +4 -17
  49. package/core/option/action-container.scss +4 -6
  50. package/core/option/option.d.ts +5 -1
  51. package/core/option/option.scss +5 -0
  52. package/core/pop-up/pop-up-trigger.d.ts +11 -2
  53. package/core/select/common.d.ts +4 -4
  54. package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +2 -2
  55. package/core/styles/common/_groups-mixins.scss +79 -0
  56. package/core/styles/common/_groups.scss +4 -34
  57. package/core/styles/common/_overlay.scss +5 -1
  58. package/core/styles/common/_select.scss +4 -0
  59. package/core/styles/theming/scrollbar-tokens.scss +6 -6
  60. package/core/styles/visual/_layout.scss +0 -2
  61. package/core/utils/utils.d.ts +2 -0
  62. package/datepicker/datepicker-input.directive.d.ts +1 -0
  63. package/dropdown/dropdown-trigger.directive.d.ts +5 -0
  64. package/dropdown/dropdown.component.d.ts +2 -1
  65. package/ellipsis-center/ellipsis-center.directive.d.ts +0 -1
  66. package/fesm2022/koobiq-components-accordion.mjs +301 -237
  67. package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
  68. package/fesm2022/koobiq-components-actions-panel.mjs +12 -12
  69. package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
  70. package/fesm2022/koobiq-components-alert.mjs +16 -16
  71. package/fesm2022/koobiq-components-app-switcher.mjs +25 -25
  72. package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
  73. package/fesm2022/koobiq-components-autocomplete.mjs +39 -23
  74. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  75. package/fesm2022/koobiq-components-badge.mjs +14 -14
  76. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  77. package/fesm2022/koobiq-components-breadcrumbs.mjs +25 -25
  78. package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
  79. package/fesm2022/koobiq-components-button-toggle.mjs +12 -12
  80. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  81. package/fesm2022/koobiq-components-button.mjs +146 -24
  82. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  83. package/fesm2022/koobiq-components-checkbox.mjs +18 -20
  84. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  85. package/fesm2022/koobiq-components-clamped-text.mjs +134 -47
  86. package/fesm2022/koobiq-components-clamped-text.mjs.map +1 -1
  87. package/fesm2022/koobiq-components-code-block.mjs +54 -22
  88. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  89. package/fesm2022/koobiq-components-content-panel.mjs +28 -28
  90. package/fesm2022/koobiq-components-core.mjs +313 -257
  91. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  92. package/fesm2022/koobiq-components-datepicker.mjs +40 -64
  93. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  94. package/fesm2022/koobiq-components-divider.mjs +7 -7
  95. package/fesm2022/koobiq-components-dl.mjs +13 -13
  96. package/fesm2022/koobiq-components-dropdown.mjs +48 -23
  97. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  98. package/fesm2022/koobiq-components-dynamic-translation.mjs +13 -13
  99. package/fesm2022/koobiq-components-ellipsis-center.mjs +8 -9
  100. package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
  101. package/fesm2022/koobiq-components-empty-state.mjs +19 -19
  102. package/fesm2022/koobiq-components-file-upload.mjs +39 -39
  103. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  104. package/fesm2022/koobiq-components-filter-bar.mjs +118 -106
  105. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  106. package/fesm2022/koobiq-components-form-field.mjs +77 -65
  107. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  108. package/fesm2022/koobiq-components-icon.mjs +32 -28
  109. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  110. package/fesm2022/koobiq-components-inline-edit.mjs +115 -65
  111. package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
  112. package/fesm2022/koobiq-components-input.mjs +28 -26
  113. package/fesm2022/koobiq-components-input.mjs.map +1 -1
  114. package/fesm2022/koobiq-components-link.mjs +23 -17
  115. package/fesm2022/koobiq-components-link.mjs.map +1 -1
  116. package/fesm2022/koobiq-components-list.mjs +19 -19
  117. package/fesm2022/koobiq-components-loader-overlay.mjs +28 -19
  118. package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
  119. package/fesm2022/koobiq-components-markdown.mjs +54 -22
  120. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  121. package/fesm2022/koobiq-components-modal.mjs +96 -63
  122. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  123. package/fesm2022/koobiq-components-navbar-ic.mjs +34 -34
  124. package/fesm2022/koobiq-components-navbar.mjs +53 -46
  125. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  126. package/fesm2022/koobiq-components-notification-center.mjs +16 -16
  127. package/fesm2022/koobiq-components-notification-center.mjs.map +1 -1
  128. package/fesm2022/koobiq-components-overflow-items.mjs +29 -17
  129. package/fesm2022/koobiq-components-overflow-items.mjs.map +1 -1
  130. package/fesm2022/koobiq-components-popover.mjs +52 -23
  131. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  132. package/fesm2022/koobiq-components-progress-bar.mjs +13 -13
  133. package/fesm2022/koobiq-components-progress-spinner.mjs +14 -14
  134. package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
  135. package/fesm2022/koobiq-components-radio.mjs +10 -10
  136. package/fesm2022/koobiq-components-resizer.mjs +10 -10
  137. package/fesm2022/koobiq-components-risk-level.mjs +7 -7
  138. package/fesm2022/koobiq-components-scrollbar.mjs +12 -12
  139. package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
  140. package/fesm2022/koobiq-components-search-expandable.mjs +17 -8
  141. package/fesm2022/koobiq-components-search-expandable.mjs.map +1 -1
  142. package/fesm2022/koobiq-components-select.mjs +342 -58
  143. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  144. package/fesm2022/koobiq-components-sidebar.mjs +13 -13
  145. package/fesm2022/koobiq-components-sidepanel.mjs +50 -41
  146. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  147. package/fesm2022/koobiq-components-skeleton.mjs +62 -13
  148. package/fesm2022/koobiq-components-skeleton.mjs.map +1 -1
  149. package/fesm2022/koobiq-components-split-button.mjs +9 -9
  150. package/fesm2022/koobiq-components-split-button.mjs.map +1 -1
  151. package/fesm2022/koobiq-components-splitter.mjs +16 -16
  152. package/fesm2022/koobiq-components-table.mjs +10 -10
  153. package/fesm2022/koobiq-components-tabs.mjs +54 -54
  154. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  155. package/fesm2022/koobiq-components-tags.mjs +44 -47
  156. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  157. package/fesm2022/koobiq-components-textarea.mjs +10 -9
  158. package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
  159. package/fesm2022/koobiq-components-time-range.mjs +25 -25
  160. package/fesm2022/koobiq-components-time-range.mjs.map +1 -1
  161. package/fesm2022/koobiq-components-timepicker.mjs +10 -10
  162. package/fesm2022/koobiq-components-timezone.mjs +26 -26
  163. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  164. package/fesm2022/koobiq-components-title.mjs +8 -9
  165. package/fesm2022/koobiq-components-title.mjs.map +1 -1
  166. package/fesm2022/koobiq-components-toast.mjs +16 -16
  167. package/fesm2022/koobiq-components-toggle.mjs +12 -9
  168. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  169. package/fesm2022/koobiq-components-tooltip.mjs +95 -52
  170. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  171. package/fesm2022/koobiq-components-top-bar.mjs +15 -15
  172. package/fesm2022/koobiq-components-top-bar.mjs.map +1 -1
  173. package/fesm2022/koobiq-components-tree-select.mjs +15 -12
  174. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  175. package/fesm2022/koobiq-components-tree.mjs +64 -52
  176. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  177. package/fesm2022/koobiq-components-username.mjs +28 -28
  178. package/fesm2022/koobiq-components-username.mjs.map +1 -1
  179. package/filter-bar/filter-search.d.ts +10 -1
  180. package/filter-bar/pipes/pipe-date.scss +5 -16
  181. package/form-field/form-field.d.ts +25 -1
  182. package/form-field/form-field.scss +26 -2
  183. package/icon/icon-button.component.d.ts +3 -0
  184. package/icon/icon-button.scss +4 -0
  185. package/inline-edit/inline-edit-tokens.scss +3 -3
  186. package/inline-edit/inline-edit.d.ts +31 -11
  187. package/inline-edit/inline-edit.scss +28 -30
  188. package/input/input-password.d.ts +1 -0
  189. package/input/input.d.ts +1 -0
  190. package/link/_link-theme.scss +18 -8
  191. package/link/link-tokens.scss +9 -6
  192. package/link/link.component.d.ts +9 -5
  193. package/loader-overlay/_loader-overlay-theme.scss +12 -0
  194. package/loader-overlay/loader-overlay-tokens.scss +1 -0
  195. package/loader-overlay/loader-overlay.component.d.ts +7 -1
  196. package/markdown/_markdown-theme.scss +3 -31
  197. package/markdown/markdown-tokens.scss +0 -11
  198. package/markdown/markdown.component.d.ts +12 -7
  199. package/markdown/markdown.scss +0 -11
  200. package/modal/modal-ref.class.d.ts +1 -0
  201. package/modal/modal.component.d.ts +14 -8
  202. package/modal/modal.scss +1 -0
  203. package/modal/modal.type.d.ts +5 -0
  204. package/navbar/navbar-item.component.d.ts +3 -1
  205. package/navbar/navbar.scss +3 -0
  206. package/overflow-items/overflow-items.d.ts +8 -2
  207. package/package.json +4 -5
  208. package/popover/popover.component.d.ts +15 -2
  209. package/prebuilt-themes/dark-theme.css +1 -1
  210. package/prebuilt-themes/light-theme.css +1 -1
  211. package/prebuilt-themes/theme.css +1 -1
  212. package/progress-spinner/progress-spinner.scss +1 -0
  213. package/schematics/ng-add/index.js +4 -6
  214. package/scrollbar/scrollbar-tokens.scss +7 -7
  215. package/search-expandable/search-expandable.d.ts +6 -2
  216. package/select/public-api.d.ts +1 -0
  217. package/select/select-common.d.ts +30 -0
  218. package/select/select.component.d.ts +193 -29
  219. package/select/select.module.d.ts +3 -2
  220. package/sidepanel/_sidepanel-theme.scss +1 -7
  221. package/sidepanel/sidepanel-config.d.ts +10 -2
  222. package/sidepanel/sidepanel.service.d.ts +0 -1
  223. package/skeleton/skeleton.d.ts +12 -3
  224. package/skeleton/skeleton.scss +22 -7
  225. package/split-button/_split-button-theme.scss +2 -1
  226. package/tabs/_tabs-common.scss +2 -1
  227. package/tags/tag-input.d.ts +4 -3
  228. package/tags/tag-list.component.d.ts +1 -0
  229. package/tags/tag-tokens.scss +4 -4
  230. package/textarea/textarea.component.d.ts +1 -0
  231. package/title/title.directive.d.ts +0 -1
  232. package/toggle/toggle.component.d.ts +4 -3
  233. package/tooltip/tooltip-tokens.scss +4 -4
  234. package/tooltip/tooltip.component.d.ts +22 -2
  235. package/top-bar/top-bar.scss +3 -0
  236. package/tree/_tree-theme.scss +0 -19
  237. package/tree/tree-option.component.d.ts +9 -3
  238. package/tree/tree-option.scss +9 -5
  239. package/tree/tree-selection.component.d.ts +2 -0
  240. package/tree-select/tree-select.component.d.ts +1 -0
  241. package/accordion/accordion-item.directive.d.ts +0 -72
  242. package/accordion/accordion-root.directive.d.ts +0 -64
@@ -5,7 +5,7 @@ import * as i3 from '@angular/forms';
5
5
  import { hasModifierKey, isSelectAll, SEMICOLON, COMMA, SPACE as SPACE$1, TAB as TAB$1, ENTER as ENTER$1 } from '@koobiq/cdk/keycodes';
6
6
  import * as i3$1 from '@koobiq/components/autocomplete';
7
7
  import * as i1 from '@koobiq/components/core';
8
- import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, isBoolean } from '@koobiq/components/core';
8
+ import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION } from '@koobiq/components/core';
9
9
  import * as i1$1 from '@koobiq/components/form-field';
10
10
  import { KbqFormFieldControl } from '@koobiq/components/form-field';
11
11
  import { FocusMonitor } from '@angular/cdk/a11y';
@@ -50,10 +50,10 @@ const getTagEditInputMissingError = () => {
50
50
  * @docs-private
51
51
  */
52
52
  class KbqTagAvatar {
53
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
54
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
53
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
54
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
55
55
  }
56
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagAvatar, decorators: [{
56
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagAvatar, decorators: [{
57
57
  type: Directive,
58
58
  args: [{
59
59
  selector: 'kbq-tag-avatar, [kbqTagAvatar]',
@@ -65,10 +65,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
65
65
  * @docs-private
66
66
  */
67
67
  class KbqTagTrailingIcon {
68
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
69
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
68
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
69
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
70
70
  }
71
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
71
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
72
72
  type: Directive,
73
73
  args: [{
74
74
  selector: 'kbq-tag-trailing-icon, [kbqTagTrailingIcon]',
@@ -83,10 +83,10 @@ class KbqTagEditSubmit {
83
83
  /** @docs-private */
84
84
  this.tag = inject(KbqTag);
85
85
  }
86
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
87
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
86
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
87
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
88
88
  }
89
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
89
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
90
90
  type: Directive,
91
91
  args: [{
92
92
  selector: '[kbqTagEditSubmit]',
@@ -132,10 +132,10 @@ class KbqTagEditInput {
132
132
  default:
133
133
  }
134
134
  }
135
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
136
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
135
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
136
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
137
137
  }
138
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagEditInput, decorators: [{
138
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagEditInput, decorators: [{
139
139
  type: Directive,
140
140
  args: [{
141
141
  selector: '[kbqTagEditInput]',
@@ -498,8 +498,8 @@ class KbqTag extends KbqColorDirective {
498
498
  }
499
499
  });
500
500
  }
501
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTag, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
502
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KbqTag, isStandalone: true, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: ["editable", "editable", booleanAttribute], preventEditSubmit: ["preventEditSubmit", "preventEditSubmit", booleanAttribute], selected: ["selected", "selected", booleanAttribute], value: "value", selectable: ["selectable", "selectable", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabindex: "tabindex", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-tag-with-avatar": "avatar", "class.kbq-tag-with-icon": "contentChildren", "class.kbq-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable", "class.kbq-tag_selectable": "selectable", "class.kbq-tag_draggable": "draggable" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkDrag }], ngImport: i0, template: `
501
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTag, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
502
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: KbqTag, isStandalone: true, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: ["editable", "editable", booleanAttribute], preventEditSubmit: ["preventEditSubmit", "preventEditSubmit", booleanAttribute], selected: ["selected", "selected", booleanAttribute], value: "value", selectable: ["selectable", "selectable", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabindex: "tabindex", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-tag-with-avatar": "avatar", "class.kbq-tag-with-icon": "contentChildren", "class.kbq-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable", "class.kbq-tag_selectable": "selectable", "class.kbq-tag_draggable": "draggable" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkDrag }], ngImport: i0, template: `
503
503
  <div class="kbq-tag__wrapper">
504
504
  <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
505
505
  <span #kbqTitleText class="kbq-tag__text">
@@ -519,7 +519,7 @@ class KbqTag extends KbqColorDirective {
519
519
  </div>
520
520
  `, isInline: true, styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;height:var(--kbq-size-xxl);padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
521
521
  }
522
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTag, decorators: [{
522
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTag, decorators: [{
523
523
  type: Component,
524
524
  args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', template: `
525
525
  <div class="kbq-tag__wrapper">
@@ -642,10 +642,10 @@ class KbqTagRemove {
642
642
  // that the tag is being removed before the event bubbles up.
643
643
  event.stopPropagation();
644
644
  }
645
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagRemove, deps: [{ token: forwardRef(() => KbqTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
646
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
645
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagRemove, deps: [{ token: forwardRef(() => KbqTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
646
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
647
647
  }
648
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagRemove, decorators: [{
648
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagRemove, decorators: [{
649
649
  type: Directive,
650
650
  args: [{
651
651
  selector: '[kbqTagRemove]',
@@ -826,6 +826,7 @@ class KbqTagList {
826
826
  this.parentForm = parentForm;
827
827
  this.parentFormGroup = parentFormGroup;
828
828
  this.ngControl = ngControl;
829
+ this.useLegacyValidation = inject(KBQ_VALIDATION, { optional: true })?.useValidation ?? false;
829
830
  this.dropList = inject(CdkDropList, { host: true });
830
831
  this.destroyRef = inject(DestroyRef);
831
832
  this.focusMonitor = inject(FocusMonitor);
@@ -1286,7 +1287,7 @@ class KbqTagList {
1286
1287
  }
1287
1288
  /** Revalidate control. */
1288
1289
  revalidate() {
1289
- if (this.ngControl?.control) {
1290
+ if (this.useLegacyValidation && this.ngControl?.control) {
1290
1291
  const control = this.ngControl.control;
1291
1292
  control.updateValueAndValidity({ emitEvent: false });
1292
1293
  control.statusChanges.emit(control.status);
@@ -1312,8 +1313,8 @@ class KbqTagList {
1312
1313
  this.unselectAll();
1313
1314
  });
1314
1315
  }
1315
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: i2$1.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
1316
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KbqTagList, isStandalone: true, selector: "kbq-tag-list", inputs: { multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], editable: ["editable", "editable", booleanAttribute], emitOnTagChanges: ["emitOnTagChanges", "emitOnTagChanges", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable", "class.kbq-tag-list_editable": "editable", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
1316
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: i2$1.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
1317
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: KbqTagList, isStandalone: true, selector: "kbq-tag-list", inputs: { multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], editable: ["editable", "editable", booleanAttribute], emitOnTagChanges: ["emitOnTagChanges", "emitOnTagChanges", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable", "class.kbq-tag-list_editable": "editable", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
1317
1318
  <div class="kbq-tags-list__list-container">
1318
1319
  <ng-content />
1319
1320
  </div>
@@ -1323,9 +1324,9 @@ class KbqTagList {
1323
1324
  <ng-content select="kbq-cleaner" />
1324
1325
  </div>
1325
1326
  }
1326
- `, isInline: true, styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-line-warning);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-white);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-white);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1327
+ `, isInline: true, styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1327
1328
  }
1328
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagList, decorators: [{
1329
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagList, decorators: [{
1329
1330
  type: Component,
1330
1331
  args: [{ selector: 'kbq-tag-list', exportAs: 'kbqTagList', template: `
1331
1332
  <div class="kbq-tags-list__list-container">
@@ -1350,7 +1351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
1350
1351
  '(focus)': 'focus()',
1351
1352
  '(blur)': 'blur()',
1352
1353
  '(keydown)': 'keydown($event)'
1353
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], hostDirectives: [CdkDropList], styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-line-warning);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-white);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-white);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
1354
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], hostDirectives: [CdkDropList], styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
1354
1355
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2$1.Directionality, decorators: [{
1355
1356
  type: Optional
1356
1357
  }] }, { type: i3.NgForm, decorators: [{
@@ -1414,7 +1415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
1414
1415
  }]
1415
1416
  }] } });
1416
1417
 
1417
- const KbqTagInputDefaultSeparators = {
1418
+ const KBQ_TAG_INPUT_DEFAULT_SEPARATORS = {
1418
1419
  [ENTER$1]: { symbol: /\r?\n/, key: 'Enter' },
1419
1420
  [TAB$1]: { symbol: /\t/, key: 'Tab' },
1420
1421
  [SPACE$1]: { symbol: / /, key: ' ' },
@@ -1436,6 +1437,7 @@ class KbqTagInput {
1436
1437
  set separatorKeyCodes(value) {
1437
1438
  this._separatorKeyCodes = value || [];
1438
1439
  }
1440
+ /** @docs-private */
1439
1441
  get separators() {
1440
1442
  return this._separatorKeyCodes.reduce((acc, key) => {
1441
1443
  const separator = this.getSeparatorByKeyCode(key);
@@ -1458,15 +1460,6 @@ class KbqTagInput {
1458
1460
  set addOnBlur(value) {
1459
1461
  this._addOnBlur = coerceBooleanProperty(value);
1460
1462
  }
1461
- /**
1462
- * Whether the tagEnd event will be emitted when the text pasted.
1463
- */
1464
- get addOnPaste() {
1465
- return this._addOnPaste;
1466
- }
1467
- set addOnPaste(value) {
1468
- this._addOnPaste = coerceBooleanProperty(value);
1469
- }
1470
1463
  /** Whether the input is disabled. */
1471
1464
  get disabled() {
1472
1465
  return this._disabled || (this._tagList && this._tagList.disabled);
@@ -1487,6 +1480,7 @@ class KbqTagInput {
1487
1480
  /** Whether the control is focused. */
1488
1481
  this.focused = false;
1489
1482
  this._separatorKeyCodes = this.defaultOptions.separatorKeyCodes;
1483
+ this._separators = this.defaultOptions.separators || KBQ_TAG_INPUT_DEFAULT_SEPARATORS;
1490
1484
  /** Emitted when a tag is to be added. */
1491
1485
  this.tagEnd = new EventEmitter();
1492
1486
  /** A value indicating whether allow/prevent tags duplication */
@@ -1496,6 +1490,11 @@ class KbqTagInput {
1496
1490
  /** Unique id for the input. */
1497
1491
  this.id = `kbq-tag-list-input-${nextUniqueId++}`;
1498
1492
  this._addOnBlur = true;
1493
+ /**
1494
+ * Whether the tagEnd event will be emitted when the text pasted.
1495
+ * @default true
1496
+ */
1497
+ this.addOnPaste = this.defaultOptions.addOnPaste ?? true;
1499
1498
  this._disabled = false;
1500
1499
  /**
1501
1500
  * @docs-private
@@ -1504,8 +1503,6 @@ class KbqTagInput {
1504
1503
  */
1505
1504
  this.countOfSymbolsForUpdateWidth = 3;
1506
1505
  this.inputElement = this.elementRef.nativeElement;
1507
- this._separators = this.defaultOptions.separators || KbqTagInputDefaultSeparators;
1508
- this._addOnPaste = isBoolean(this.defaultOptions.addOnPaste) ? this.defaultOptions.addOnPaste : true;
1509
1506
  }
1510
1507
  ngOnChanges() {
1511
1508
  this._tagList.stateChanges.next();
@@ -1601,8 +1598,8 @@ class KbqTagInput {
1601
1598
  }
1602
1599
  getSeparatorsForString(value) {
1603
1600
  return this.separators
1604
- .filter((separator) => value.search(separator.key) > -1)
1605
- .map((separator) => separator.key);
1601
+ .filter((separator) => value.search(separator.symbol) > -1)
1602
+ .map((separator) => separator.symbol.source);
1606
1603
  }
1607
1604
  trimValue(value) {
1608
1605
  return this.trimDirective ? this.trimDirective.trim(value) : value;
@@ -1621,10 +1618,10 @@ class KbqTagInput {
1621
1618
  isSeparatorKey(event) {
1622
1619
  return this.separators.some((separator) => separator.key === event.key && !event.shiftKey);
1623
1620
  }
1624
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: KBQ_TAGS_DEFAULT_OPTIONS }, { token: i1$1.KbqTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3$1.KbqAutocompleteTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
1625
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste"], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
1621
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: KBQ_TAGS_DEFAULT_OPTIONS }, { token: i1$1.KbqTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3$1.KbqAutocompleteTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
1622
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.20", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste", booleanAttribute], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
1626
1623
  }
1627
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagInput, decorators: [{
1624
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagInput, decorators: [{
1628
1625
  type: Directive,
1629
1626
  args: [{
1630
1627
  selector: 'input[kbqTagInputFor]',
@@ -1677,7 +1674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
1677
1674
  args: ['kbqTagInputAddOnBlur']
1678
1675
  }], addOnPaste: [{
1679
1676
  type: Input,
1680
- args: ['kbqTagInputAddOnPaste']
1677
+ args: [{ alias: 'kbqTagInputAddOnPaste', transform: booleanAttribute }]
1681
1678
  }], disabled: [{
1682
1679
  type: Input
1683
1680
  }] } });
@@ -1687,8 +1684,8 @@ const COMPONENTS = [
1687
1684
  KbqTagEditInput
1688
1685
  ];
1689
1686
  class KbqTagsModule {
1690
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1691
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
1687
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1688
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
1692
1689
  KbqTagEditInput, KbqTagList,
1693
1690
  KbqTag,
1694
1691
  KbqTagInput,
@@ -1701,14 +1698,14 @@ class KbqTagsModule {
1701
1698
  KbqTagAvatar,
1702
1699
  KbqTagRemove, KbqTagEditSubmit,
1703
1700
  KbqTagEditInput] }); }
1704
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagsModule, providers: [
1701
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagsModule, providers: [
1705
1702
  {
1706
1703
  provide: KBQ_TAGS_DEFAULT_OPTIONS,
1707
1704
  useValue: { separatorKeyCodes: [ENTER$1] }
1708
1705
  }
1709
1706
  ], imports: [PlatformModule] }); }
1710
1707
  }
1711
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqTagsModule, decorators: [{
1708
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagsModule, decorators: [{
1712
1709
  type: NgModule,
1713
1710
  args: [{
1714
1711
  imports: [