@koobiq/components 19.8.5 → 19.8.6

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 (193) hide show
  1. package/accordion/accordion-content.directive.d.ts +23 -3
  2. package/accordion/accordion-trigger.component.d.ts +1 -0
  3. package/accordion/accordion.component.scss +4 -1
  4. package/alert/alert-tokens.scss +4 -4
  5. package/autocomplete/autocomplete-trigger.directive.d.ts +10 -5
  6. package/breadcrumbs/breadcrumbs.d.ts +2 -0
  7. package/breadcrumbs/breadcrumbs.scss +4 -0
  8. package/button/button-group.scss +42 -2
  9. package/button-toggle/button-toggle-tokens.scss +16 -0
  10. package/button-toggle/button-toggle.component.d.ts +3 -1
  11. package/button-toggle/button-toggle.scss +105 -1
  12. package/checkbox/checkbox.scss +5 -4
  13. package/clamped-text/clamped-text.d.ts +1 -0
  14. package/core/form-field/field-sizing-content.d.ts +0 -1
  15. package/core/form-field/form-field-ref.d.ts +1 -0
  16. package/core/form-field/index.d.ts +1 -0
  17. package/core/form-field/text-field-selection.d.ts +18 -0
  18. package/core/form-field/text-ruler.d.ts +16 -0
  19. package/core/navbar/rectangle-item.d.ts +8 -0
  20. package/core/option/_action-container-mixins.scss +28 -0
  21. package/core/option/_option-theme.scss +8 -0
  22. package/core/option/action.d.ts +9 -0
  23. package/core/option/action.scss +7 -0
  24. package/core/option/option.d.ts +10 -6
  25. package/core/pop-up/pop-up-trigger.d.ts +6 -0
  26. package/core/select/constants.d.ts +8 -1
  27. package/core/services/measure-scrollbar.service.d.ts +1 -0
  28. package/core/styles/common/_animation.scss +35 -24
  29. package/core/styles/common/_select.scss +17 -2
  30. package/core/styles/theming/_scrollbar-theme.scss +4 -0
  31. package/core/styles/typography/_typography.scss +8 -0
  32. package/core/utils/dom.d.ts +12 -0
  33. package/datepicker/datepicker-input.directive.d.ts +20 -5
  34. package/datepicker/datepicker.component.d.ts +4 -1
  35. package/dl/dl.component.d.ts +1 -0
  36. package/dl/dl.scss +10 -0
  37. package/dropdown/dropdown-item.component.d.ts +10 -2
  38. package/dropdown/dropdown-item.scss +16 -0
  39. package/dropdown/dropdown-trigger.directive.d.ts +6 -1
  40. package/dropdown/dropdown.component.d.ts +6 -1
  41. package/dropdown/dropdown.module.d.ts +1 -1
  42. package/dropdown/dropdown.scss +18 -3
  43. package/ellipsis-center/ellipsis-center.directive.d.ts +35 -2
  44. package/fesm2022/koobiq-components-accordion.mjs +104 -16
  45. package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
  46. package/fesm2022/koobiq-components-alert.mjs +2 -2
  47. package/fesm2022/koobiq-components-app-switcher.mjs +6 -6
  48. package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
  49. package/fesm2022/koobiq-components-autocomplete.mjs +21 -9
  50. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  51. package/fesm2022/koobiq-components-breadcrumbs.mjs +10 -5
  52. package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
  53. package/fesm2022/koobiq-components-button-toggle.mjs +8 -5
  54. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  55. package/fesm2022/koobiq-components-button.mjs +4 -4
  56. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  57. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  58. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  59. package/fesm2022/koobiq-components-clamped-text.mjs +4 -0
  60. package/fesm2022/koobiq-components-clamped-text.mjs.map +1 -1
  61. package/fesm2022/koobiq-components-code-block.mjs +14 -5
  62. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  63. package/fesm2022/koobiq-components-content-panel.mjs +5 -4
  64. package/fesm2022/koobiq-components-content-panel.mjs.map +1 -1
  65. package/fesm2022/koobiq-components-core.mjs +234 -64
  66. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  67. package/fesm2022/koobiq-components-datepicker.mjs +73 -49
  68. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  69. package/fesm2022/koobiq-components-dl.mjs +5 -4
  70. package/fesm2022/koobiq-components-dl.mjs.map +1 -1
  71. package/fesm2022/koobiq-components-dropdown.mjs +65 -22
  72. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  73. package/fesm2022/koobiq-components-ellipsis-center.mjs +77 -22
  74. package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
  75. package/fesm2022/koobiq-components-file-upload.mjs +12 -12
  76. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  77. package/fesm2022/koobiq-components-filter-bar.mjs +152 -46
  78. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  79. package/fesm2022/koobiq-components-form-field.mjs +2 -2
  80. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  81. package/fesm2022/koobiq-components-icon.mjs +1 -1
  82. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  83. package/fesm2022/koobiq-components-inline-edit.mjs +26 -5
  84. package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
  85. package/fesm2022/koobiq-components-list.mjs +12 -22
  86. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  87. package/fesm2022/koobiq-components-markdown.mjs +4 -1
  88. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  89. package/fesm2022/koobiq-components-modal.mjs +53 -12
  90. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  91. package/fesm2022/koobiq-components-navbar.mjs +29 -13
  92. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  93. package/fesm2022/koobiq-components-notification-center.mjs +45 -7
  94. package/fesm2022/koobiq-components-notification-center.mjs.map +1 -1
  95. package/fesm2022/koobiq-components-overflow-items.mjs +4 -0
  96. package/fesm2022/koobiq-components-overflow-items.mjs.map +1 -1
  97. package/fesm2022/koobiq-components-popover.mjs +35 -18
  98. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  99. package/fesm2022/koobiq-components-radio.mjs +3 -7
  100. package/fesm2022/koobiq-components-radio.mjs.map +1 -1
  101. package/fesm2022/koobiq-components-resizer.mjs +23 -4
  102. package/fesm2022/koobiq-components-resizer.mjs.map +1 -1
  103. package/fesm2022/koobiq-components-select.mjs +126 -29
  104. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  105. package/fesm2022/koobiq-components-sidebar.mjs +10 -0
  106. package/fesm2022/koobiq-components-sidebar.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-sidepanel.mjs +34 -10
  108. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  109. package/fesm2022/koobiq-components-splitter.mjs +4 -0
  110. package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
  111. package/fesm2022/koobiq-components-tabs.mjs +27 -7
  112. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  113. package/fesm2022/koobiq-components-tags.mjs +3 -1
  114. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  115. package/fesm2022/koobiq-components-textarea.mjs +7 -14
  116. package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
  117. package/fesm2022/koobiq-components-timepicker.mjs +44 -19
  118. package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
  119. package/fesm2022/koobiq-components-timezone.mjs +10 -4
  120. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  121. package/fesm2022/koobiq-components-title.mjs +41 -3
  122. package/fesm2022/koobiq-components-title.mjs.map +1 -1
  123. package/fesm2022/koobiq-components-toast.mjs +31 -3
  124. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  125. package/fesm2022/koobiq-components-toggle.mjs +2 -2
  126. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  127. package/fesm2022/koobiq-components-tooltip.mjs +4 -1
  128. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  129. package/fesm2022/koobiq-components-tree-select.mjs +36 -12
  130. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  131. package/fesm2022/koobiq-components-tree.mjs +41 -37
  132. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  133. package/fesm2022/koobiq-components-username.mjs +2 -2
  134. package/fesm2022/koobiq-components-username.mjs.map +1 -1
  135. package/file-upload/dropzone.d.ts +0 -1
  136. package/file-upload/file-upload.scss +11 -0
  137. package/file-upload/multiple-file-upload.component.scss +29 -3
  138. package/file-upload/primitives/file-picker.d.ts +1 -1
  139. package/file-upload/single-file-upload.component.scss +10 -2
  140. package/filter-bar/filter-bar.d.ts +1 -1
  141. package/filter-bar/pipes/base-pipe.d.ts +31 -0
  142. package/filter-bar/pipes/pipe-date.d.ts +1 -1
  143. package/filter-bar/pipes/pipe-datetime.d.ts +1 -1
  144. package/form-field/fieldset.scss +10 -0
  145. package/inline-edit/inline-edit.d.ts +5 -0
  146. package/inline-edit/inline-edit.scss +7 -7
  147. package/link/_link-theme.scss +50 -15
  148. package/list/_list-theme.scss +12 -0
  149. package/list/list-selection.component.d.ts +1 -0
  150. package/list/list.scss +2 -9
  151. package/modal/modal-tokens.scss +1 -1
  152. package/modal/modal.component.d.ts +9 -1
  153. package/modal/modal.directive.d.ts +11 -0
  154. package/modal/modal.type.d.ts +7 -0
  155. package/navbar/_navbar-item_horizontal.scss +5 -0
  156. package/navbar/_navbar-item_vertical.scss +7 -5
  157. package/navbar/navbar-item.component.d.ts +15 -0
  158. package/navbar/navbar.component.d.ts +1 -0
  159. package/navbar/vertical-navbar.scss +6 -0
  160. package/notification-center/notification-center.d.ts +13 -1
  161. package/notification-center/notification-center.scss +12 -0
  162. package/notification-center/notification-item.scss +6 -0
  163. package/overflow-items/overflow-items.d.ts +1 -0
  164. package/package.json +4 -4
  165. package/prebuilt-themes/dark-theme.css +1 -1
  166. package/prebuilt-themes/light-theme.css +1 -1
  167. package/prebuilt-themes/theme.css +1 -1
  168. package/radio/radio.component.d.ts +1 -5
  169. package/radio/radio.scss +18 -4
  170. package/resizer/resizer.d.ts +12 -0
  171. package/schematics/ng-add/index.js +2 -2
  172. package/select/select-option.directive.d.ts +1 -0
  173. package/select/select.component.d.ts +29 -4
  174. package/sidebar/sidebar.component.d.ts +3 -0
  175. package/sidepanel/sidepanel-directives.d.ts +2 -0
  176. package/sidepanel/sidepanel.service.d.ts +8 -0
  177. package/splitter/splitter.component.d.ts +1 -0
  178. package/tabs/tab-body.component.d.ts +2 -0
  179. package/tabs/tab-header.component.d.ts +1 -0
  180. package/tabs/tab-header.scss +1 -0
  181. package/tabs/tab-nav-bar.d.ts +1 -0
  182. package/tabs/tabs-tokens.scss +1 -1
  183. package/textarea/textarea.component.d.ts +0 -1
  184. package/timepicker/timepicker.directive.d.ts +3 -0
  185. package/timezone/timezone-option.directive.d.ts +1 -0
  186. package/title/title.directive.d.ts +21 -0
  187. package/toast/toast-container.component.d.ts +25 -0
  188. package/tree/_tree-theme.scss +5 -11
  189. package/tree/toggle.scss +4 -0
  190. package/tree/tree-option.component.d.ts +3 -0
  191. package/tree/tree-option.scss +2 -12
  192. package/tree/tree-selection.component.d.ts +1 -0
  193. package/tree-select/tree-select.component.d.ts +9 -2
@@ -6,15 +6,16 @@ import { DOCUMENT, CommonModule } from '@angular/common';
6
6
  import { coerceBooleanProperty, coerceNumberProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
7
7
  import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
8
8
  import { merge, fromEvent, map, BehaviorSubject, Subject, interval, Subscription, pairwise } from 'rxjs';
9
+ import { _getFocusedElementPierceShadowDom, Platform } from '@angular/cdk/platform';
9
10
  import * as i1 from '@koobiq/date-adapter';
10
11
  import { DateAdapter as DateAdapter$1 } from '@koobiq/date-adapter';
11
12
  import { DateFormatter as DateFormatter$1 } from '@koobiq/date-formatter';
12
- import { Platform } from '@angular/cdk/platform';
13
13
  import { FocusMonitor } from '@angular/cdk/a11y';
14
14
  import { SPACE, ENTER, TAB, hasModifierKey, ESCAPE, HOME, END } from '@koobiq/cdk/keycodes';
15
15
  import { Overlay, ScrollDispatcher, CdkScrollable } from '@angular/cdk/overlay';
16
16
  import { TooltipSizeArrowSize } from '@koobiq/design-tokens';
17
17
  import { ComponentPortal } from '@angular/cdk/portal';
18
+ import { ViewportRuler } from '@angular/cdk/scrolling';
18
19
  import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
19
20
  import { distinctUntilChanged, filter, delay } from 'rxjs/operators';
20
21
 
@@ -393,6 +394,28 @@ class KbqErrorStateTracker {
393
394
  const kbqInjectNativeElement = () => {
394
395
  return inject((ElementRef)).nativeElement;
395
396
  };
397
+ /**
398
+ * Focuses `element` and scrolls it into view by the shortest distance, leaving a visible one alone.
399
+ *
400
+ * The reveal is explicit because the one `focus()` performs implicitly is not portable: WebKit defers it
401
+ * to a later rendering update, where it lands after — and undoes — any scrolling the reader did in the
402
+ * meantime. Letting the element reveal itself keeps every consumer working, whatever it uses as a scroll
403
+ * container, and the browser resolves that container rather than the caller guessing at it.
404
+ *
405
+ * Pass `skipReveal` when the pointer caused the focus: the element is already under the cursor, so
406
+ * revealing it would shift the list out from under it.
407
+ */
408
+ const kbqFocusAndReveal = (element, skipReveal = false) => {
409
+ if (typeof element.focus !== 'function')
410
+ return;
411
+ // A focus listener calling back into `focus` must not scroll a second time. Read through shadow
412
+ // roots, where `document.activeElement` reports the host instead of the element that holds focus.
413
+ const wasFocused = _getFocusedElementPierceShadowDom() === element;
414
+ element.focus({ preventScroll: true });
415
+ if (skipReveal || wasFocused)
416
+ return;
417
+ element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
418
+ };
396
419
 
397
420
  function isBoolean(value) {
398
421
  return typeof value === 'boolean';
@@ -600,39 +623,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
600
623
  args: [{ providedIn: 'root' }]
601
624
  }] });
602
625
 
603
- const INITIAL_PROPERTIES = {
604
- all: 'initial',
605
- position: 'absolute',
606
- top: coerceCssPixelValue(0),
607
- left: coerceCssPixelValue(0),
608
- width: coerceCssPixelValue(0),
609
- height: coerceCssPixelValue(0),
610
- visibility: 'hidden',
611
- overflow: 'scroll',
612
- whiteSpace: 'pre',
613
- pointerEvents: 'none'
614
- };
615
626
  /**
616
- * Properties that can affect element width and should be inherited from the parent.
627
+ * Properties that affect the rendered width of the text and have to be mirrored onto the ruler.
628
+ *
629
+ * `font-variant` is deliberately absent: the shorthand does not round-trip through the computed style
630
+ * once a field sets more than one of its longhands, so the longhands are copied instead.
617
631
  */
618
- const WIDTH_INHERITED_PROPERTIES = [
632
+ const RULER_INHERITED_PROPERTIES = [
619
633
  'font',
620
634
  'fontFamily',
621
635
  'fontFeatureSettings',
622
636
  'fontKerning',
623
637
  'fontOpticalSizing',
624
- 'fontSizeAdjust',
625
638
  'fontSize',
639
+ 'fontSizeAdjust',
626
640
  'fontStretch',
641
+ 'fontStyle',
627
642
  'fontSynthesis',
628
- 'fontVariant',
643
+ 'fontVariantCaps',
644
+ 'fontVariantEastAsian',
629
645
  'fontVariantLigatures',
646
+ 'fontVariantNumeric',
630
647
  'fontVariationSettings',
631
648
  'fontWeight',
632
649
  'letterSpacing',
633
650
  'textIndent',
634
651
  'textTransform'
635
652
  ];
653
+ const RULER_PROPERTIES = {
654
+ all: 'initial',
655
+ position: 'absolute',
656
+ top: '0px',
657
+ left: '0px',
658
+ width: '0px',
659
+ height: '0px',
660
+ visibility: 'hidden',
661
+ overflow: 'scroll',
662
+ whiteSpace: 'pre',
663
+ pointerEvents: 'none'
664
+ };
665
+ /**
666
+ * Builds a hidden element that renders text with the typography of the element `computedStyle` was taken
667
+ * from. Append it to the document, measure through {@link kbqMeasureRulerText}, and remove it.
668
+ *
669
+ * @docs-private
670
+ */
671
+ const kbqCreateTextRuler = (document, computedStyle) => {
672
+ const ruler = document.createElement('span');
673
+ Object.assign(ruler.style, RULER_PROPERTIES);
674
+ RULER_INHERITED_PROPERTIES.forEach((property) => {
675
+ ruler.style[property] = computedStyle[property];
676
+ });
677
+ return ruler;
678
+ };
679
+ /**
680
+ * Width of `text` in pixels, in the same coordinate space as `clientWidth` and `scrollLeft`.
681
+ *
682
+ * `scrollWidth`, not `getBoundingClientRect()`: the latter reports the transformed box, which disagrees
683
+ * with the untransformed layout metrics it would be compared against under a scaled ancestor.
684
+ *
685
+ * @docs-private
686
+ */
687
+ const kbqMeasureRulerText = (ruler, text) => {
688
+ ruler.textContent = text;
689
+ return ruler.scrollWidth;
690
+ };
691
+
636
692
  /**
637
693
  * Properties that should be added to the width when `box-sizing: border-box` is applied.
638
694
  */
@@ -670,29 +726,19 @@ class KbqFieldSizingContent {
670
726
  }
671
727
  setupWidth() {
672
728
  const computedStyle = this.window.getComputedStyle(this.element);
673
- const ruler = this.createRuler(computedStyle);
674
- ruler.textContent = this.element.value || this.element.placeholder || '';
675
- // We should add space to prevent text truncation in Safari/Firefox
676
- if (ruler.textContent)
677
- ruler.textContent += ' ';
729
+ const ruler = kbqCreateTextRuler(this.document, computedStyle);
730
+ const text = this.element.value || this.element.placeholder || '';
678
731
  this.renderer.appendChild(this.document.body, ruler);
679
- const width = this.calculateWidth(ruler, computedStyle);
732
+ // We should add space to prevent text truncation in Safari/Firefox
733
+ const width = this.calculateWidth(kbqMeasureRulerText(ruler, text && `${text} `), computedStyle);
680
734
  this.renderer.setStyle(this.element, 'width', coerceCssPixelValue(width));
681
735
  this.renderer.removeChild(this.document.body, ruler);
682
736
  }
683
- createRuler(computedStyle) {
684
- const ruler = this.renderer.createElement('span');
685
- Object.assign(ruler.style, INITIAL_PROPERTIES);
686
- WIDTH_INHERITED_PROPERTIES.forEach((property) => {
687
- ruler.style[property] = computedStyle[property];
688
- });
689
- return ruler;
690
- }
691
- calculateWidth(ruler, computedStyle) {
737
+ calculateWidth(textWidth, computedStyle) {
692
738
  if (computedStyle.boxSizing === 'border-box') {
693
- return BOX_SIZING_BORDER_BOX_WIDTH_PROPERTIES.reduce((width, property) => width + (parseFloat(computedStyle[property]) || 0), ruler.scrollWidth);
739
+ return BOX_SIZING_BORDER_BOX_WIDTH_PROPERTIES.reduce((width, property) => width + (parseFloat(computedStyle[property]) || 0), textWidth);
694
740
  }
695
- return ruler.scrollWidth;
741
+ return textWidth;
696
742
  }
697
743
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFieldSizingContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
698
744
  /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqFieldSizingContent, isStandalone: true, selector: "[kbqFieldSizingContent]", host: { classAttribute: "kbq-field-sizing-content" }, exportAs: ["kbqFieldSizingContent"], ngImport: i0 }); }
@@ -717,6 +763,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
717
763
  */
718
764
  const KBQ_FORM_FIELD_REF = new InjectionToken('KbqFormFieldRef');
719
765
 
766
+ /**
767
+ * Scrolls a text field horizontally so that its current selection is visible.
768
+ *
769
+ * Browsers scroll a field to the caret only for edits the user makes: a selection set from script leaves
770
+ * the field at whatever offset the last keystroke produced. A masked field re-renders its value and moves
771
+ * the caret between value parts on every keystroke, so without this the field keeps the offset of the part
772
+ * that was edited before and clips the one being edited now.
773
+ *
774
+ * Leaves the field alone when it is not focused, when it renders something other than its value, and in
775
+ * right-to-left text, where the browser's own caret following is already correct.
776
+ */
777
+ const kbqRevealSelection = (element) => {
778
+ const document = element.ownerDocument;
779
+ const window = document.defaultView;
780
+ // A field the user has left is the browser's to scroll: it resets the offset on blur, and a write
781
+ // landing after that would park the field mid-value until it is focused again.
782
+ if (!window || document.activeElement !== element) {
783
+ return;
784
+ }
785
+ // A password field renders bullets, which are not the widths of the characters behind them.
786
+ if (element.type === 'password') {
787
+ return;
788
+ }
789
+ const maxScrollLeft = element.scrollWidth - element.clientWidth;
790
+ // The value fits, so any offset the field is left at is an artifact of an earlier, longer value.
791
+ if (maxScrollLeft <= 0) {
792
+ element.scrollLeft = 0;
793
+ return;
794
+ }
795
+ const computedStyle = window.getComputedStyle(element);
796
+ // Every offset below is measured from the left edge, while an RTL field scrolls into negative
797
+ // `scrollLeft`. Mirroring that needs the visual order of a bidi line rather than a prefix of the
798
+ // value, so the browser's own caret following is left in place instead of being overwritten.
799
+ if (computedStyle.direction === 'rtl') {
800
+ return;
801
+ }
802
+ const { value, selectionStart, selectionEnd, clientWidth } = element;
803
+ const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
804
+ const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
805
+ const ruler = kbqCreateTextRuler(document, computedStyle);
806
+ document.body.appendChild(ruler);
807
+ // `scrollLeft` is measured from the start of the padding box, the text starts one `padding-left` in.
808
+ const start = paddingLeft + kbqMeasureRulerText(ruler, value.slice(0, selectionStart ?? 0));
809
+ // A caret is the common case on the typing path, and measuring it twice costs a second layout.
810
+ const end = selectionEnd === selectionStart
811
+ ? start
812
+ : paddingLeft + kbqMeasureRulerText(ruler, value.slice(0, selectionEnd ?? 0));
813
+ ruler.remove();
814
+ // The smallest offset that still shows the selection, so that as much as possible of what precedes it
815
+ // stays on screen. Deriving the offset from the selection alone, instead of nudging the current one,
816
+ // keeps the result independent of where the last keystroke happened to leave the field.
817
+ const minimumRevealingEnd = Math.max(end + paddingRight - clientWidth, 0);
818
+ // A selection wider than the field cannot be shown whole; its start is the half worth keeping.
819
+ const maximumKeepingStart = Math.max(start - paddingLeft, 0);
820
+ element.scrollLeft = Math.min(minimumRevealingEnd, maximumKeepingStart, maxScrollLeft);
821
+ };
822
+ /**
823
+ * Selects the `[start, end]` range of a text field and keeps it visible.
824
+ *
825
+ * @see {@link kbqRevealSelection}
826
+ */
827
+ const kbqSetSelectionRange = (element, start, end) => {
828
+ element.setSelectionRange(start, end);
829
+ kbqRevealSelection(element);
830
+ };
831
+
720
832
  const enUSLocaleData = {
721
833
  select: { hiddenItemsText: '+{{ number }}' },
722
834
  datepicker: {
@@ -3596,11 +3708,19 @@ class KbqRectangleItem {
3596
3708
  this._collapsed = value;
3597
3709
  this.state.next();
3598
3710
  }
3711
+ /**
3712
+ * Outer width of the item: its border box plus horizontal margins.
3713
+ *
3714
+ * `getComputedStyle().width` resolves to the used content-box width whatever `box-sizing` says,
3715
+ * so it silently drops padding and borders on the `border-box` elements this measures, and the
3716
+ * result would change again under a consuming application's global reset.
3717
+ * `getBoundingClientRect()` is always the border box, which makes it host-independent.
3718
+ */
3599
3719
  getOuterElementWidth() {
3600
3720
  if (!this.isBrowser)
3601
3721
  return 0;
3602
- const { width, marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
3603
- return [width, marginLeft, marginRight].reduce((acc, item) => acc + parseInt(item), 0);
3722
+ const { marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
3723
+ return [marginLeft, marginRight].reduce((acc, item) => acc + (parseFloat(item) || 0), this.nativeElement.getBoundingClientRect().width);
3604
3724
  }
3605
3725
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqRectangleItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3606
3726
  /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqRectangleItem, isStandalone: true, host: { properties: { "class.kbq-expanded": "!collapsed", "class.kbq-collapsed": "collapsed" } }, ngImport: i0 }); }
@@ -3662,7 +3782,11 @@ class KbqOptionActionComponent {
3662
3782
  else {
3663
3783
  this.nativeElement.focus();
3664
3784
  }
3665
- this.hasFocus = true;
3785
+ // The action lives inside `.kbq-action-container`, which is `display: none` until the option
3786
+ // is hovered or keyboard-focused. Focusing a hidden element is a no-op, so `hasFocus` has to
3787
+ // reflect what actually happened: assuming success would latch `kbq-action-button-focused`
3788
+ // on the option forever, since `FocusMonitor` never emits for an element that never got focus.
3789
+ this.hasFocus = this.nativeElement.ownerDocument.activeElement === this.nativeElement;
3666
3790
  }
3667
3791
  onClick($event) {
3668
3792
  $event.stopPropagation();
@@ -3693,7 +3817,7 @@ class KbqOptionActionComponent {
3693
3817
  <ng-content select="[kbq-icon]">
3694
3818
  <i class="kbq kbq-icon kbq-contrast-fade kbq-ellipsis-vertical_16"></i>
3695
3819
  </ng-content>
3696
- `, isInline: true, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3820
+ `, isInline: true, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;box-sizing:content-box;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3697
3821
  }
3698
3822
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
3699
3823
  type: Component,
@@ -3709,11 +3833,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
3709
3833
  '[attr.tabIndex]': '-1',
3710
3834
  '(click)': 'onClick($event)',
3711
3835
  '(keydown)': 'onKeyDown($event)'
3712
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"] }]
3836
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;box-sizing:content-box;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"] }]
3713
3837
  }], propDecorators: { disabled: [{
3714
3838
  type: Input,
3715
3839
  args: [{ transform: booleanAttribute }]
3716
3840
  }] } });
3841
+ /**
3842
+ * Moves focus from an option to its trailing action button on Tab.
3843
+ *
3844
+ * Shared by `KbqListOption` and `KbqTreeOption` so the two cannot drift apart. Tab is swallowed only
3845
+ * when focus actually landed: the action lives in a `display: none` container until the option is
3846
+ * hovered or keyboard-focused, and focusing a hidden element is a no-op, so suppressing Tab there
3847
+ * would trap focus on the option.
3848
+ */
3849
+ function kbqFocusOptionActionOnTab($event, actionButton) {
3850
+ if (!actionButton || $event.keyCode !== TAB || $event.shiftKey || actionButton.hasFocus) {
3851
+ return;
3852
+ }
3853
+ actionButton.focus();
3854
+ if (actionButton.hasFocus) {
3855
+ $event.preventDefault();
3856
+ }
3857
+ }
3717
3858
 
3718
3859
  class KbqActionContainer {
3719
3860
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqActionContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3952,13 +4093,11 @@ class KbqOption extends KbqOptionBase {
3952
4093
  this._active = false;
3953
4094
  this.mostRecentViewValue = '';
3954
4095
  /**
3955
- * Flag that indicates whether the component is currently focused by a mouse interaction.
3956
- *
3957
- * When set to `true`, the component has focus resulting from a mouse click or
3958
- * other pointer event. It is automatically cleared when the component loses
3959
- * focus or if focus is obtained through keyboard navigation or programmatic means.
4096
+ * Whether the pointer is currently over this option. Cleared on `mouseleave` rather than when the
4097
+ * option is focused: hovering the option that is already active does not move the key manager's
4098
+ * index, so no focus follows and a flag cleared only there would stay armed indefinitely.
3960
4099
  */
3961
- this.isFocusedByMouse = false;
4100
+ this.hoveredByPointer = false;
3962
4101
  }
3963
4102
  ngAfterViewChecked() {
3964
4103
  // Since parent components could be using the option's label to display the selected values
@@ -3979,11 +4118,7 @@ class KbqOption extends KbqOptionBase {
3979
4118
  }
3980
4119
  /** @docs-private */
3981
4120
  getHeight() {
3982
- const element = this.elementRef.nativeElement;
3983
- // For SSR compatibility
3984
- if (typeof element.getClientRects !== 'function')
3985
- return 0;
3986
- return element.getClientRects()[0]?.height ?? 0;
4121
+ return this.elementRef.nativeElement.getClientRects?.()?.[0]?.height ?? 0;
3987
4122
  }
3988
4123
  select(emitEvent = true) {
3989
4124
  if (!this._selected) {
@@ -4001,12 +4136,9 @@ class KbqOption extends KbqOptionBase {
4001
4136
  this.emitSelectionChangeEvent();
4002
4137
  }
4003
4138
  }
4139
+ /** Moves keyboard focus to this option and reveals it — see {@link kbqFocusAndReveal}. */
4004
4140
  focus() {
4005
- const element = this.getHostElement();
4006
- if (typeof element.focus === 'function') {
4007
- element.focus({ preventScroll: this.isFocusedByMouse });
4008
- this.isFocusedByMouse = false;
4009
- }
4141
+ kbqFocusAndReveal(this.getHostElement(), this.hoveredByPointer);
4010
4142
  }
4011
4143
  /**
4012
4144
  * This method sets display styles on the option to make it appear
@@ -4075,16 +4207,20 @@ class KbqOption extends KbqOptionBase {
4075
4207
  onMouseenter() {
4076
4208
  if (this.disabled)
4077
4209
  return;
4078
- this.isFocusedByMouse = true;
4210
+ this.hoveredByPointer = true;
4079
4211
  this.parent?.keyManager?.setActiveItem(this);
4080
4212
  }
4213
+ /** @docs-private */
4214
+ onMouseleave() {
4215
+ this.hoveredByPointer = false;
4216
+ }
4081
4217
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KBQ_OPTION_PARENT_COMPONENT, optional: true }, { token: KbqOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
4082
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqOption, isStandalone: true, selector: "kbq-option", inputs: { value: "value", selectable: ["selectable", "selectable", booleanAttribute], userSelect: ["userSelect", "userSelect", booleanAttribute], showCheckbox: "showCheckbox", viewValue: "viewValue", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "onMouseenter()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.kbq-selected": "selected", "class.kbq-option-multiple": "multiple", "class.kbq-active": "active", "class.kbq-disabled": "disabled", "id": "id" }, classAttribute: "kbq-option" }, providers: [
4218
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqOption, isStandalone: true, selector: "kbq-option", inputs: { value: "value", selectable: ["selectable", "selectable", booleanAttribute], userSelect: ["userSelect", "userSelect", booleanAttribute], showCheckbox: "showCheckbox", viewValue: "viewValue", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.kbq-selected": "selected", "class.kbq-option-multiple": "multiple", "class.kbq-active": "active", "class.kbq-disabled": "disabled", "id": "id" }, classAttribute: "kbq-option" }, providers: [
4083
4219
  {
4084
4220
  provide: KBQ_TITLE_TEXT_REF,
4085
4221
  useExisting: KbqOption
4086
4222
  }
4087
- ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqOption"], usesInheritance: true, ngImport: i0, template: "@if (showCheckbox) {\n <ng-content select=\"kbq-pseudo-checkbox\">\n <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4223
+ ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqOption"], usesInheritance: true, ngImport: i0, template: "@if (showCheckbox) {\n <ng-content select=\"kbq-pseudo-checkbox\">\n <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option.kbq-selected.kbq-disabled{background:var(--kbq-list-states-selected-container-background)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option-multiple.kbq-selected.kbq-disabled{background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4088
4224
  }
4089
4225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOption, decorators: [{
4090
4226
  type: Component,
@@ -4100,13 +4236,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
4100
4236
  '[id]': 'id',
4101
4237
  '(click)': 'handleClick($event)',
4102
4238
  '(mouseenter)': 'onMouseenter()',
4239
+ '(mouseleave)': 'onMouseleave()',
4103
4240
  '(keydown)': 'handleKeydown($event)'
4104
4241
  }, providers: [
4105
4242
  {
4106
4243
  provide: KBQ_TITLE_TEXT_REF,
4107
4244
  useExisting: KbqOption
4108
4245
  }
4109
- ], template: "@if (showCheckbox) {\n <ng-content select=\"kbq-pseudo-checkbox\">\n <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
4246
+ ], template: "@if (showCheckbox) {\n <ng-content select=\"kbq-pseudo-checkbox\">\n <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option.kbq-selected.kbq-disabled{background:var(--kbq-list-states-selected-container-background)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option-multiple.kbq-selected.kbq-disabled{background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
4110
4247
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
4111
4248
  type: Optional
4112
4249
  }, {
@@ -4162,6 +4299,9 @@ function countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
4162
4299
  * @param currentScrollPosition Current scroll position of the panel.
4163
4300
  * @param panelHeight Height of the panel.
4164
4301
  * @docs-private
4302
+ * @deprecated Unused — an option reveals itself on focus through `KbqOption.focus`, which lets the
4303
+ * browser resolve the scroll container instead of computing an offset from a uniform row height. Will be
4304
+ * removed in the next major release.
4165
4305
  */
4166
4306
  function getOptionScrollPosition(optionIndex, optionHeight, currentScrollPosition, panelHeight) {
4167
4307
  const optionOffset = optionIndex * optionHeight;
@@ -4705,6 +4845,11 @@ class KbqPopUpTrigger {
4705
4845
  this.elementRef = inject(ElementRef);
4706
4846
  this.ngZone = inject(NgZone);
4707
4847
  this.scrollDispatcher = inject(ScrollDispatcher);
4848
+ /** CDK ViewportRuler, used to re-apply the stick-to-window position on window resize.
4849
+ * @docs-private */
4850
+ this.viewportRuler = inject(ViewportRuler);
4851
+ /** View container the pop-up component portal is attached to.
4852
+ * @docs-private */
4708
4853
  this.hostView = inject(ViewContainerRef);
4709
4854
  this.direction = inject(Directionality, { optional: true });
4710
4855
  this.destroyRef = inject(DestroyRef);
@@ -4834,6 +4979,14 @@ class KbqPopUpTrigger {
4834
4979
  });
4835
4980
  this.updatePosition();
4836
4981
  this.instance.show(delay);
4982
+ // The position strategy re-applies the overlay position on window resize (its ViewportRuler
4983
+ // subscription is created inside OverlayRef.attach(), i.e. before this one), wiping the manual
4984
+ // styles written by setStickPosition. Re-apply them after the strategy has run.
4985
+ // No-op when stickToWindow is not set.
4986
+ this.viewportRuler
4987
+ .change()
4988
+ .pipe(takeUntilDestroyed(this.instance.destroyRef))
4989
+ .subscribe(() => this.instance?.setStickPosition());
4837
4990
  if (this.hideWithTimeout && this.trigger.includes(PopUpTriggers.Hover)) {
4838
4991
  this.ngZone.runOutsideAngular(() => {
4839
4992
  interval(this.leaveDelay, this.scheduler)
@@ -5022,8 +5175,18 @@ const KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD = 10;
5022
5175
  * this value or more away from the viewport boundary.
5023
5176
  */
5024
5177
  const SELECT_PANEL_VIEWPORT_PADDING = 8;
5025
- /** Injection token that determines the scroll handling while a select is open. */
5026
- const KBQ_SELECT_SCROLL_STRATEGY = new InjectionToken('kbq-select-scroll-strategy');
5178
+ /**
5179
+ * Injection token that determines the scroll handling while a select is open.
5180
+ *
5181
+ * The root default keeps the select usable when it is reached outside `KbqSelectModule`'s injector - imported
5182
+ * as a bare standalone component, pulled in through another standalone component (`KbqTimezoneSelect`,
5183
+ * `KbqCalendarHeader`), or rendered in a component built from the root injector, as `KbqModalService` does.
5184
+ * Providing the token anywhere still wins over this default.
5185
+ */
5186
+ const KBQ_SELECT_SCROLL_STRATEGY = new InjectionToken('kbq-select-scroll-strategy', {
5187
+ providedIn: 'root',
5188
+ factory: () => kbqSelectScrollStrategyProviderFactory(inject(Overlay))
5189
+ });
5027
5190
  /** @docs-private */
5028
5191
  function kbqSelectScrollStrategyProviderFactory(overlay) {
5029
5192
  return () => overlay.scrollStrategies.reposition();
@@ -5171,7 +5334,9 @@ class KbqAbstractSelect {
5171
5334
  this.overlayPanelClass = 'kbq-select-overlay';
5172
5335
  }
5173
5336
  setOverlayPosition() {
5174
- if (!this.overlayDir.overlayRef)
5337
+ // A disposed overlay keeps its `overlayRef` but loses `hostElement`, and an expansion or selection
5338
+ // change can still arrive once the select has closed for good.
5339
+ if (!this.overlayDir.overlayRef?.hostElement)
5175
5340
  return;
5176
5341
  this.resetOverlay();
5177
5342
  const overlayRect = this.getOverlayRect();
@@ -5269,6 +5434,7 @@ class KbqMeasureScrollbarService {
5269
5434
  }
5270
5435
  constructor() {
5271
5436
  this.document = inject(DOCUMENT);
5437
+ this.platform = inject(Platform);
5272
5438
  this.scrollbarMeasure = {
5273
5439
  position: 'absolute',
5274
5440
  top: '-9999px',
@@ -5279,6 +5445,10 @@ class KbqMeasureScrollbarService {
5279
5445
  this.initScrollBarWidth();
5280
5446
  }
5281
5447
  initScrollBarWidth() {
5448
+ if (!this.platform.isBrowser) {
5449
+ this._scrollBarWidth = 0;
5450
+ return;
5451
+ }
5282
5452
  const scrollDiv = this.document.createElement('div');
5283
5453
  for (const scrollProp in this.scrollbarMeasure) {
5284
5454
  if (this.scrollbarMeasure.hasOwnProperty(scrollProp)) {
@@ -5400,11 +5570,11 @@ const kbqDisableLegacyValidationDirectiveProvider = () => ({
5400
5570
  useValue: { useValidation: false }
5401
5571
  });
5402
5572
 
5403
- const VERSION = new Version('19.8.5+sha-8b0b8d4');
5573
+ const VERSION = new Version('19.8.6+sha-ae1c209');
5404
5574
 
5405
5575
  /**
5406
5576
  * Generated bundle index. Do not edit.
5407
5577
  */
5408
5578
 
5409
- export { ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, DateAdapter, DateFormatter, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, FileValidators, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SANITY_CHECKS, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION, KBQ_WINDOW, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqColorDirective, KbqCommonModule, KbqComponentColors, KbqDataSizePipe, KbqDecimalPipe, KbqDefaultThemes, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqReadStateDirective, KbqRectangleItem, KbqRoundDecimalPipe, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, MeasurementSystem, MultipleMode, NUMBER_FORMAT_REGEXP, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, SELECT_PANEL_VIEWPORT_PADDING, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, ThemePalette, ThemeService, VERSION, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, defaultOffsetY, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, formatDataSize, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, isBoolean, isElement, isHtmlElement, isHtmlElementOrNull, isMac, isNull, isUndefined, isWithin, kbqDisableLegacyValidationDirectiveProvider, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqHighlightMark, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, numberByParts, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, selectEvents, tkTMFormattersData, tkTMLocaleData, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
5579
+ export { ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, DateAdapter, DateFormatter, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, FileValidators, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SANITY_CHECKS, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION, KBQ_WINDOW, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqColorDirective, KbqCommonModule, KbqComponentColors, KbqDataSizePipe, KbqDecimalPipe, KbqDefaultThemes, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqReadStateDirective, KbqRectangleItem, KbqRoundDecimalPipe, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, MeasurementSystem, MultipleMode, NUMBER_FORMAT_REGEXP, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, SELECT_PANEL_VIEWPORT_PADDING, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, ThemePalette, ThemeService, VERSION, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, defaultOffsetY, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, formatDataSize, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, isBoolean, isElement, isHtmlElement, isHtmlElementOrNull, isMac, isNull, isUndefined, isWithin, kbqDisableLegacyValidationDirectiveProvider, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqFocusAndReveal, kbqFocusOptionActionOnTab, kbqHighlightMark, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqRevealSelection, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, kbqSetSelectionRange, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, numberByParts, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, selectEvents, tkTMFormattersData, tkTMLocaleData, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
5410
5580
  //# sourceMappingURL=koobiq-components-core.mjs.map