@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.5

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 (238) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +2 -2
  3. package/autocomplete/autocomplete-origin.directive.d.ts +1 -1
  4. package/autocomplete/autocomplete-trigger.directive.d.ts +1 -1
  5. package/autocomplete/autocomplete.component.d.ts +1 -1
  6. package/autocomplete/autocomplete.scss +0 -3
  7. package/badge/README.md +0 -0
  8. package/{core/styles/theming/_badges-theme.scss → badge/_badge-theme.scss} +1 -5
  9. package/badge/badge.component.d.ts +26 -0
  10. package/badge/badge.component.scss +55 -0
  11. package/badge/badge.module.d.ts +10 -0
  12. package/badge/index.d.ts +1 -0
  13. package/badge/public-api.d.ts +2 -0
  14. package/button/button.scss +5 -2
  15. package/checkbox/README.md +1 -1
  16. package/checkbox/checkbox.d.ts +1 -1
  17. package/core/common-behaviors/color.d.ts +1 -1
  18. package/core/common-behaviors/common-module.d.ts +1 -1
  19. package/core/forms/_forms-theme.scss +4 -4
  20. package/core/forms/_forms.scss +1 -3
  21. package/core/option/_option-theme.scss +39 -16
  22. package/core/option/action.scss +3 -4
  23. package/core/option/option.scss +6 -51
  24. package/core/styles/_koobiq-theme.scss +4 -1
  25. package/core/styles/_tokens.kbq.import.scss +4 -4
  26. package/core/styles/_tokens.scss +4 -4
  27. package/core/styles/common/_list.scss +123 -0
  28. package/core/styles/common/_select.scss +218 -0
  29. package/core/styles/theming/_components-theming.scss +414 -47
  30. package/datepicker/datepicker-animations.d.ts +1 -1
  31. package/dropdown/_dropdown-theme.scss +30 -37
  32. package/dropdown/dropdown-item.component.d.ts +1 -1
  33. package/dropdown/dropdown-item.scss +18 -40
  34. package/dropdown/dropdown.scss +16 -39
  35. package/esm2022/alert/alert.component.mjs +1 -1
  36. package/esm2022/autocomplete/autocomplete-origin.directive.mjs +4 -4
  37. package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +8 -8
  38. package/esm2022/autocomplete/autocomplete.component.mjs +4 -4
  39. package/esm2022/badge/badge.component.mjs +62 -0
  40. package/esm2022/badge/badge.module.mjs +36 -0
  41. package/esm2022/badge/index.mjs +2 -0
  42. package/esm2022/badge/koobiq-components-badge.mjs +5 -0
  43. package/esm2022/badge/public-api.mjs +3 -0
  44. package/esm2022/button/button.component.mjs +2 -2
  45. package/esm2022/checkbox/checkbox.mjs +2 -2
  46. package/esm2022/code-block/actionbar.component.mjs +3 -3
  47. package/esm2022/code-block/code-block.component.mjs +3 -3
  48. package/esm2022/core/common-behaviors/color.mjs +1 -1
  49. package/esm2022/core/common-behaviors/common-module.mjs +2 -2
  50. package/esm2022/core/option/action.mjs +5 -5
  51. package/esm2022/core/option/option.mjs +3 -3
  52. package/esm2022/core/overlay/overlay-position-map.mjs +2 -1
  53. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  54. package/esm2022/core/version.mjs +2 -2
  55. package/esm2022/datepicker/calendar-header.component.mjs +3 -3
  56. package/esm2022/datepicker/datepicker-animations.mjs +2 -2
  57. package/esm2022/dropdown/dropdown-item.component.mjs +3 -3
  58. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  59. package/esm2022/file-upload/multiple-file-upload.component.mjs +2 -2
  60. package/esm2022/file-upload/single-file-upload.component.mjs +2 -2
  61. package/esm2022/form-field/form-field.mjs +6 -6
  62. package/esm2022/form-field/password-hint.mjs +2 -2
  63. package/esm2022/form-field/password-toggle.mjs +6 -6
  64. package/esm2022/form-field/prefix.mjs +3 -3
  65. package/esm2022/form-field/validate.directive.mjs +5 -5
  66. package/esm2022/icon/icon.component.mjs +3 -3
  67. package/esm2022/input/input-errors.mjs +2 -2
  68. package/esm2022/input/input-number.mjs +3 -3
  69. package/esm2022/input/input-password.mjs +5 -5
  70. package/esm2022/input/input.mjs +7 -7
  71. package/esm2022/link/link.component.mjs +2 -12
  72. package/esm2022/list/list-selection.component.mjs +20 -7
  73. package/esm2022/list/list.component.mjs +2 -2
  74. package/esm2022/list/list.module.mjs +8 -4
  75. package/esm2022/loader-overlay/loader-overlay.component.mjs +20 -19
  76. package/esm2022/modal/modal.component.mjs +6 -20
  77. package/esm2022/navbar/vertical-navbar.animation.mjs +2 -2
  78. package/esm2022/progress-spinner/progress-spinner.component.mjs +1 -1
  79. package/esm2022/risk-level/index.mjs +2 -0
  80. package/esm2022/risk-level/koobiq-components-risk-level.mjs +5 -0
  81. package/esm2022/risk-level/public-api.mjs +3 -0
  82. package/esm2022/risk-level/risk-level.component.mjs +40 -0
  83. package/esm2022/risk-level/risk-level.module.mjs +28 -0
  84. package/esm2022/select/select.component.mjs +5 -5
  85. package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
  86. package/esm2022/sidepanel/sidepanel-directives.mjs +7 -9
  87. package/esm2022/tabs/tab-group.component.mjs +16 -21
  88. package/esm2022/tabs/tab-header.component.mjs +2 -2
  89. package/esm2022/tabs/tab-label-wrapper.directive.mjs +3 -3
  90. package/esm2022/tabs/tab-label.directive.mjs +3 -3
  91. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +17 -7
  92. package/esm2022/tabs/tabs.module.mjs +2 -6
  93. package/esm2022/tags/tag-input.mjs +8 -8
  94. package/esm2022/tags/tag-list.component.mjs +4 -4
  95. package/esm2022/tags/tag.component.mjs +6 -6
  96. package/esm2022/textarea/textarea.component.mjs +4 -4
  97. package/esm2022/timezone/timezone-option.component.mjs +3 -3
  98. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  99. package/esm2022/toast/toast-container.component.mjs +2 -2
  100. package/esm2022/toast/toast.component.mjs +25 -13
  101. package/esm2022/toast/toast.module.mjs +14 -5
  102. package/esm2022/toast/toast.type.mjs +6 -1
  103. package/esm2022/tooltip/tooltip.animations.mjs +2 -2
  104. package/esm2022/tooltip/tooltip.component.mjs +14 -14
  105. package/esm2022/tree/padding.directive.mjs +4 -4
  106. package/esm2022/tree/toggle.mjs +5 -4
  107. package/esm2022/tree/tree-option.component.mjs +4 -7
  108. package/esm2022/tree/tree.module.mjs +13 -4
  109. package/esm2022/tree-select/tree-select.component.mjs +16 -10
  110. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  111. package/fesm2022/koobiq-components-autocomplete.mjs +13 -13
  112. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  113. package/fesm2022/koobiq-components-badge.mjs +102 -0
  114. package/fesm2022/koobiq-components-badge.mjs.map +1 -0
  115. package/fesm2022/koobiq-components-button.mjs +2 -2
  116. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  117. package/fesm2022/koobiq-components-checkbox.mjs +1 -1
  118. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  119. package/fesm2022/koobiq-components-code-block.mjs +4 -4
  120. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  121. package/fesm2022/koobiq-components-core.mjs +11 -10
  122. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  123. package/fesm2022/koobiq-components-datepicker.mjs +3 -3
  124. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  125. package/fesm2022/koobiq-components-dropdown.mjs +4 -4
  126. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  127. package/fesm2022/koobiq-components-file-upload.mjs +4 -4
  128. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  129. package/fesm2022/koobiq-components-form-field.mjs +17 -17
  130. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  131. package/fesm2022/koobiq-components-icon.mjs +2 -2
  132. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  133. package/fesm2022/koobiq-components-input.mjs +13 -13
  134. package/fesm2022/koobiq-components-input.mjs.map +1 -1
  135. package/fesm2022/koobiq-components-link.mjs +1 -11
  136. package/fesm2022/koobiq-components-link.mjs.map +1 -1
  137. package/fesm2022/koobiq-components-list.mjs +28 -11
  138. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  139. package/fesm2022/koobiq-components-loader-overlay.mjs +19 -18
  140. package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
  141. package/fesm2022/koobiq-components-modal.mjs +5 -19
  142. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  143. package/fesm2022/koobiq-components-navbar.mjs +1 -1
  144. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  145. package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
  146. package/fesm2022/koobiq-components-risk-level.mjs +72 -0
  147. package/fesm2022/koobiq-components-risk-level.mjs.map +1 -0
  148. package/fesm2022/koobiq-components-select.mjs +4 -4
  149. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  150. package/fesm2022/koobiq-components-sidepanel.mjs +9 -10
  151. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  152. package/fesm2022/koobiq-components-tabs.mjs +38 -37
  153. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  154. package/fesm2022/koobiq-components-tags.mjs +15 -15
  155. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  156. package/fesm2022/koobiq-components-textarea.mjs +3 -3
  157. package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
  158. package/fesm2022/koobiq-components-timezone.mjs +4 -4
  159. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  160. package/fesm2022/koobiq-components-toast.mjs +41 -15
  161. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  162. package/fesm2022/koobiq-components-tooltip.mjs +14 -14
  163. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  164. package/fesm2022/koobiq-components-tree-select.mjs +15 -9
  165. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  166. package/fesm2022/koobiq-components-tree.mjs +27 -20
  167. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  168. package/form-field/_form-field-theme.scss +2 -2
  169. package/form-field/form-field.d.ts +2 -2
  170. package/form-field/password-toggle.d.ts +2 -2
  171. package/form-field/prefix.d.ts +1 -1
  172. package/form-field/validate.directive.d.ts +1 -1
  173. package/input/input-number.d.ts +1 -1
  174. package/input/input-password.d.ts +1 -1
  175. package/input/input.d.ts +2 -2
  176. package/input/input.scss +3 -1
  177. package/link/_link-theme.scss +1 -3
  178. package/link/link.component.d.ts +1 -4
  179. package/list/_list-theme.scss +35 -15
  180. package/list/list-selection.component.d.ts +5 -1
  181. package/list/list.module.d.ts +1 -1
  182. package/list/list.scss +3 -12
  183. package/loader-overlay/_loader-overlay-theme.scss +43 -11
  184. package/loader-overlay/loader-overlay.component.d.ts +6 -5
  185. package/loader-overlay/loader-overlay.scss +53 -22
  186. package/modal/_modal-confirm.scss +20 -28
  187. package/modal/_modal-theme.scss +5 -35
  188. package/modal/modal.component.d.ts +3 -6
  189. package/modal/modal.scss +32 -36
  190. package/package.json +41 -29
  191. package/prebuilt-themes/dark-theme.css +1 -1
  192. package/prebuilt-themes/light-theme.css +1 -1
  193. package/progress-spinner/progress-spinner.component.d.ts +2 -2
  194. package/risk-level/README.md +0 -0
  195. package/risk-level/_risk-level-theme.scss +88 -0
  196. package/risk-level/index.d.ts +1 -0
  197. package/risk-level/public-api.d.ts +2 -0
  198. package/risk-level/risk-level.component.d.ts +18 -0
  199. package/risk-level/risk-level.component.scss +26 -0
  200. package/risk-level/risk-level.module.d.ts +10 -0
  201. package/select/_select-theme.scss +8 -0
  202. package/select/select.scss +5 -189
  203. package/sidepanel/_sidepanel-theme.scss +6 -41
  204. package/sidepanel/sidepanel-directives.d.ts +0 -2
  205. package/sidepanel/sidepanel.scss +33 -35
  206. package/tabs/_tabs-common.scss +27 -146
  207. package/tabs/_tabs-theme.scss +81 -175
  208. package/tabs/tab-group.component.d.ts +5 -8
  209. package/tabs/tab-group.scss +10 -10
  210. package/tabs/tab-header.scss +2 -24
  211. package/tabs/tab-label-wrapper.directive.d.ts +1 -1
  212. package/tabs/tab-label.directive.d.ts +1 -1
  213. package/tabs/tab-nav-bar/tab-nav-bar.d.ts +3 -1
  214. package/tabs/tab-nav-bar/tab-nav-bar.scss +9 -16
  215. package/tabs/tabs.module.d.ts +1 -1
  216. package/tags/_tag-theme.scss +0 -24
  217. package/tags/tag-input.d.ts +1 -1
  218. package/tags/tag-list.scss +20 -16
  219. package/tags/tag.component.d.ts +3 -3
  220. package/textarea/textarea.component.d.ts +1 -1
  221. package/toast/_toast-theme.scss +21 -33
  222. package/toast/toast-container.component.scss +2 -1
  223. package/toast/toast.component.d.ts +4 -1
  224. package/toast/toast.component.scss +41 -34
  225. package/toast/toast.module.d.ts +1 -1
  226. package/toast/toast.type.d.ts +8 -5
  227. package/tooltip/tooltip.animations.d.ts +1 -1
  228. package/tooltip/tooltip.component.d.ts +4 -4
  229. package/tree/_tree-theme.scss +46 -34
  230. package/tree/tree-option.component.d.ts +0 -1
  231. package/tree/tree-option.scss +34 -23
  232. package/tree/tree.module.d.ts +2 -1
  233. package/tree-select/_tree-select-theme.scss +9 -1
  234. package/tree-select/tree-select.component.d.ts +5 -3
  235. package/tree-select/tree-select.scss +5 -194
  236. package/core/styles/theming/_badges.scss +0 -57
  237. package/core/styles/theming/prebuilt/light-theme.scss +0 -20
  238. package/list/_list-base.scss +0 -54
@@ -290,7 +290,7 @@ class KbqTag extends KbqTagMixinBase {
290
290
  });
291
291
  }
292
292
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTag, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
293
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { color: "color", selected: "selected", value: "value", selectable: "selectable", removable: "removable", tabindex: "tabindex", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-tag-with-avatar": "avatar", "class.kbq-tag-with-icon": "contentChildren", "class.kbq-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(function () { return KbqTagRemove; }), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTitleText"], descendants: true }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tag__wrapper\">\n <ng-content select=\"[kbq-icon]:not([mcTagRemove])\"></ng-content>\n <span class=\"kbq-tag__text\" #mcTitleText><ng-content></ng-content></span>\n <ng-content select=\"[mcTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 4px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
293
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { color: "color", selected: "selected", value: "value", selectable: "selectable", removable: "removable", tabindex: "tabindex", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-tag-with-avatar": "avatar", "class.kbq-tag-with-icon": "contentChildren", "class.kbq-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(function () { return KbqTagRemove; }), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTitleText"], descendants: true }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tag__wrapper\">\n <ng-content select=\"[kbq-icon]:not([kbqTagRemove])\"></ng-content>\n <span class=\"kbq-tag__text\" #mcTitleText><ng-content></ng-content></span>\n <ng-content select=\"[kbqTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 4px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
294
294
  }
295
295
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTag, decorators: [{
296
296
  type: Component,
@@ -308,7 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
308
308
  '(keydown)': 'handleKeydown($event)',
309
309
  '(focus)': 'focus()',
310
310
  '(blur)': 'blur()'
311
- }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], template: "<div class=\"kbq-tag__wrapper\">\n <ng-content select=\"[kbq-icon]:not([mcTagRemove])\"></ng-content>\n <span class=\"kbq-tag__text\" #mcTitleText><ng-content></ng-content></span>\n <ng-content select=\"[mcTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 4px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
311
+ }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], template: "<div class=\"kbq-tag__wrapper\">\n <ng-content select=\"[kbq-icon]:not([kbqTagRemove])\"></ng-content>\n <span class=\"kbq-tag__text\" #mcTitleText><ng-content></ng-content></span>\n <ng-content select=\"[kbqTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 4px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
312
312
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { textElement: [{
313
313
  type: ViewChild,
314
314
  args: ['mcTitleText']
@@ -348,7 +348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
348
348
  * Example:
349
349
  *
350
350
  * `<kbq-tag>
351
- * <kbq-icon mcTagRemove>cancel</kbq-icon>
351
+ * <kbq-icon kbqTagRemove>cancel</kbq-icon>
352
352
  * </kbq-tag>`
353
353
  *
354
354
  * You *may* use a custom icon, but you may need to override the `kbq-tag-remove` positioning
@@ -375,12 +375,12 @@ class KbqTagRemove {
375
375
  event.stopPropagation();
376
376
  }
377
377
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagRemove, deps: [{ token: forwardRef(() => KbqTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
378
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagRemove, selector: "[mcTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
378
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagRemove, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
379
379
  }
380
380
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagRemove, decorators: [{
381
381
  type: Directive,
382
382
  args: [{
383
- selector: '[mcTagRemove]',
383
+ selector: '[kbqTagRemove]',
384
384
  host: {
385
385
  class: 'kbq-tag-remove kbq-tag-trailing-icon',
386
386
  '[attr.tabindex]': '-1',
@@ -1029,7 +1029,7 @@ class KbqTagList extends KbqTagListMixinBase {
1029
1029
  }
1030
1030
  }
1031
1031
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: i2.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
1032
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["mcTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["mcTagList"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"kbq-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-input{border:none;outline:none;background:transparent;min-height:22px}.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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto;margin-left:var(--kbq-tag-input-size-content-gap, 8px)}.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, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-left:var(--kbq-tag-input-size-padding-left, 4px)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1032
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "attr.tabindex": "disabled ? null : 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: ["mcTagList"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"kbq-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-left:4px;padding-right:unset}.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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-right, 12px) calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-left, 4px)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1033
1033
  }
1034
1034
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagList, decorators: [{
1035
1035
  type: Component,
@@ -1042,7 +1042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
1042
1042
  '(focus)': 'focus()',
1043
1043
  '(blur)': 'blur()',
1044
1044
  '(keydown)': 'keydown($event)'
1045
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], template: "<div class=\"kbq-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"kbq-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-input{border:none;outline:none;background:transparent;min-height:22px}.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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto;margin-left:var(--kbq-tag-input-size-content-gap, 8px)}.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, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-left:var(--kbq-tag-input-size-padding-left, 4px)}\n"] }]
1045
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], template: "<div class=\"kbq-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"kbq-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-left:4px;padding-right:unset}.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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-right, 12px) calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-left, 4px)}\n"] }]
1046
1046
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2.Directionality, decorators: [{
1047
1047
  type: Optional
1048
1048
  }] }, { type: i3.NgForm, decorators: [{
@@ -1080,7 +1080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
1080
1080
  type: Output
1081
1081
  }], cleaner: [{
1082
1082
  type: ContentChild,
1083
- args: ['mcTagListCleaner', { static: true }]
1083
+ args: ['kbqTagListCleaner', { static: true }]
1084
1084
  }], tags: [{
1085
1085
  type: ContentChildren,
1086
1086
  args: [KbqTag, {
@@ -1278,13 +1278,13 @@ class KbqTagInput {
1278
1278
  .some((separator) => separator.key === event.key && !event.shiftKey);
1279
1279
  }
1280
1280
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KBQ_TAGS_DEFAULT_OPTIONS }, { token: i1$1.KbqTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
1281
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagInput, selector: "input[mcTagInputFor]", inputs: { separatorKeyCodes: ["mcTagInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", tagList: ["mcTagInputFor", "tagList"], addOnBlur: ["mcTagInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { tagEnd: "mcTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur()", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["mcTagInput", "mcTagInputFor"], usesOnChanges: true, ngImport: i0 }); }
1281
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur()", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["mcTagInput", "kbqTagInputFor"], usesOnChanges: true, ngImport: i0 }); }
1282
1282
  }
1283
1283
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagInput, decorators: [{
1284
1284
  type: Directive,
1285
1285
  args: [{
1286
- selector: 'input[mcTagInputFor]',
1287
- exportAs: 'mcTagInput, mcTagInputFor',
1286
+ selector: 'input[kbqTagInputFor]',
1287
+ exportAs: 'mcTagInput, kbqTagInputFor',
1288
1288
  host: {
1289
1289
  class: 'kbq-tag-input',
1290
1290
  '[id]': 'id',
@@ -1310,20 +1310,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
1310
1310
  type: Self
1311
1311
  }] }]; }, propDecorators: { separatorKeyCodes: [{
1312
1312
  type: Input,
1313
- args: ['mcTagInputSeparatorKeyCodes']
1313
+ args: ['kbqTagInputSeparatorKeyCodes']
1314
1314
  }], tagEnd: [{
1315
1315
  type: Output,
1316
- args: ['mcTagInputTokenEnd']
1316
+ args: ['kbqTagInputTokenEnd']
1317
1317
  }], placeholder: [{
1318
1318
  type: Input
1319
1319
  }], id: [{
1320
1320
  type: Input
1321
1321
  }], tagList: [{
1322
1322
  type: Input,
1323
- args: ['mcTagInputFor']
1323
+ args: ['kbqTagInputFor']
1324
1324
  }], addOnBlur: [{
1325
1325
  type: Input,
1326
- args: ['mcTagInputAddOnBlur']
1326
+ args: ['kbqTagInputAddOnBlur']
1327
1327
  }], disabled: [{
1328
1328
  type: Input
1329
1329
  }] } });