@koobiq/components 19.8.4 → 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.
- package/accordion/accordion-content.directive.d.ts +23 -3
- package/accordion/accordion-trigger.component.d.ts +1 -0
- package/accordion/accordion.component.scss +4 -1
- package/alert/alert-tokens.scss +4 -4
- package/autocomplete/autocomplete-trigger.directive.d.ts +10 -5
- package/breadcrumbs/breadcrumbs.d.ts +2 -0
- package/breadcrumbs/breadcrumbs.scss +4 -0
- package/button/button-group.scss +42 -2
- package/button-toggle/button-toggle-tokens.scss +16 -0
- package/button-toggle/button-toggle.component.d.ts +3 -1
- package/button-toggle/button-toggle.scss +105 -1
- package/checkbox/checkbox.scss +5 -4
- package/clamped-text/clamped-text.d.ts +4 -2
- package/core/form-field/field-sizing-content.d.ts +0 -1
- package/core/form-field/form-field-ref.d.ts +1 -0
- package/core/form-field/index.d.ts +1 -0
- package/core/form-field/text-field-selection.d.ts +18 -0
- package/core/form-field/text-ruler.d.ts +16 -0
- package/core/navbar/rectangle-item.d.ts +8 -0
- package/core/option/_action-container-mixins.scss +28 -0
- package/core/option/_option-theme.scss +8 -0
- package/core/option/action.d.ts +9 -0
- package/core/option/action.scss +7 -0
- package/core/option/option.d.ts +10 -6
- package/core/pop-up/pop-up-trigger.d.ts +6 -0
- package/core/select/constants.d.ts +8 -1
- package/core/services/measure-scrollbar.service.d.ts +1 -0
- package/core/styles/common/_animation.scss +35 -24
- package/core/styles/common/_select.scss +17 -2
- package/core/styles/theming/_scrollbar-theme.scss +4 -0
- package/core/styles/typography/_typography.scss +8 -0
- package/core/utils/dom.d.ts +12 -0
- package/datepicker/datepicker-input.directive.d.ts +20 -5
- package/datepicker/datepicker.component.d.ts +4 -1
- package/dl/dl.component.d.ts +1 -0
- package/dl/dl.scss +10 -0
- package/dropdown/dropdown-item.component.d.ts +10 -2
- package/dropdown/dropdown-item.scss +16 -0
- package/dropdown/dropdown-trigger.directive.d.ts +6 -1
- package/dropdown/dropdown.component.d.ts +6 -1
- package/dropdown/dropdown.module.d.ts +1 -1
- package/dropdown/dropdown.scss +18 -3
- package/ellipsis-center/ellipsis-center.directive.d.ts +35 -2
- package/fesm2022/koobiq-components-accordion.mjs +104 -16
- package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
- package/fesm2022/koobiq-components-alert.mjs +2 -2
- package/fesm2022/koobiq-components-app-switcher.mjs +6 -6
- package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +21 -9
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-breadcrumbs.mjs +10 -5
- package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/koobiq-components-button-toggle.mjs +8 -5
- package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +4 -4
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-checkbox.mjs +2 -2
- package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
- package/fesm2022/koobiq-components-clamped-text.mjs +9 -0
- package/fesm2022/koobiq-components-clamped-text.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +14 -5
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-content-panel.mjs +5 -4
- package/fesm2022/koobiq-components-content-panel.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +234 -64
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +73 -49
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +5 -4
- package/fesm2022/koobiq-components-dl.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +65 -22
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-ellipsis-center.mjs +77 -22
- package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +12 -12
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-filter-bar.mjs +295 -46
- package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +2 -2
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +1 -1
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-inline-edit.mjs +26 -5
- package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
- package/fesm2022/koobiq-components-list.mjs +12 -22
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +4 -1
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +53 -12
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +29 -13
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-notification-center.mjs +45 -7
- package/fesm2022/koobiq-components-notification-center.mjs.map +1 -1
- package/fesm2022/koobiq-components-overflow-items.mjs +4 -0
- package/fesm2022/koobiq-components-overflow-items.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +35 -18
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-radio.mjs +3 -7
- package/fesm2022/koobiq-components-radio.mjs.map +1 -1
- package/fesm2022/koobiq-components-resizer.mjs +23 -4
- package/fesm2022/koobiq-components-resizer.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +126 -29
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidebar.mjs +10 -0
- package/fesm2022/koobiq-components-sidebar.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidepanel.mjs +34 -10
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-splitter.mjs +4 -0
- package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +27 -7
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +4 -2
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-textarea.mjs +7 -14
- package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
- package/fesm2022/koobiq-components-timepicker.mjs +44 -19
- package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +10 -4
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-title.mjs +41 -3
- package/fesm2022/koobiq-components-title.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +31 -3
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +2 -2
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +4 -1
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +36 -12
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +41 -37
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/fesm2022/koobiq-components-username.mjs +2 -2
- package/fesm2022/koobiq-components-username.mjs.map +1 -1
- package/file-upload/dropzone.d.ts +0 -1
- package/file-upload/file-upload.scss +11 -0
- package/file-upload/multiple-file-upload.component.scss +29 -3
- package/file-upload/primitives/file-picker.d.ts +1 -1
- package/file-upload/single-file-upload.component.scss +10 -2
- package/filter-bar/filter-bar.d.ts +1 -1
- package/filter-bar/filter-bar.types.d.ts +2 -0
- package/filter-bar/filters.scss +3 -2
- package/filter-bar/pipes/base-pipe.d.ts +31 -0
- package/filter-bar/pipes/base-pipe.scss +0 -13
- package/filter-bar/pipes/pipe-date.d.ts +1 -1
- package/filter-bar/pipes/pipe-datetime.d.ts +1 -1
- package/filter-bar/pipes/pipe-input.d.ts +42 -0
- package/filter-bar/pipes/pipe-input.scss +10 -0
- package/filter-bar/public-api.d.ts +1 -0
- package/form-field/fieldset.scss +10 -0
- package/inline-edit/inline-edit.d.ts +5 -0
- package/inline-edit/inline-edit.scss +7 -7
- package/link/_link-theme.scss +50 -15
- package/list/_list-theme.scss +12 -0
- package/list/list-selection.component.d.ts +1 -0
- package/list/list.scss +2 -9
- package/modal/modal-tokens.scss +1 -1
- package/modal/modal.component.d.ts +9 -1
- package/modal/modal.directive.d.ts +11 -0
- package/modal/modal.type.d.ts +7 -0
- package/navbar/_navbar-item_horizontal.scss +5 -0
- package/navbar/_navbar-item_vertical.scss +7 -5
- package/navbar/navbar-item.component.d.ts +15 -0
- package/navbar/navbar.component.d.ts +1 -0
- package/navbar/vertical-navbar.scss +6 -0
- package/notification-center/notification-center.d.ts +13 -1
- package/notification-center/notification-center.scss +12 -0
- package/notification-center/notification-item.scss +6 -0
- package/overflow-items/overflow-items.d.ts +1 -0
- package/package.json +4 -4
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/prebuilt-themes/theme.css +1 -1
- package/radio/radio.component.d.ts +1 -5
- package/radio/radio.scss +18 -4
- package/resizer/resizer.d.ts +12 -0
- package/schematics/ng-add/index.js +2 -2
- package/select/select-option.directive.d.ts +1 -0
- package/select/select.component.d.ts +29 -4
- package/sidebar/sidebar.component.d.ts +3 -0
- package/sidepanel/sidepanel-directives.d.ts +2 -0
- package/sidepanel/sidepanel.service.d.ts +8 -0
- package/splitter/splitter.component.d.ts +1 -0
- package/tabs/tab-body.component.d.ts +2 -0
- package/tabs/tab-header.component.d.ts +1 -0
- package/tabs/tab-header.scss +1 -0
- package/tabs/tab-nav-bar.d.ts +1 -0
- package/tabs/tabs-tokens.scss +1 -1
- package/textarea/textarea.component.d.ts +0 -1
- package/timepicker/timepicker.directive.d.ts +3 -0
- package/timezone/timezone-option.directive.d.ts +1 -0
- package/title/title.directive.d.ts +21 -0
- package/toast/toast-container.component.d.ts +25 -0
- package/tree/_tree-theme.scss +5 -11
- package/tree/toggle.scss +4 -0
- package/tree/tree-option.component.d.ts +3 -0
- package/tree/tree-option.scss +2 -12
- package/tree/tree-selection.component.d.ts +1 -0
- 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
|
|
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
|
|
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
|
-
'
|
|
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.
|
|
674
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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),
|
|
739
|
+
return BOX_SIZING_BORDER_BOX_WIDTH_PROPERTIES.reduce((width, property) => width + (parseFloat(computedStyle[property]) || 0), textWidth);
|
|
694
740
|
}
|
|
695
|
-
return
|
|
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 {
|
|
3603
|
-
return [
|
|
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
|
-
|
|
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
|
-
*
|
|
3956
|
-
*
|
|
3957
|
-
*
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
/**
|
|
5026
|
-
|
|
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
|
-
|
|
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.
|
|
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
|