@koobiq/components 18.13.0 → 18.15.0

package/fesm2022/koobiq-components-select.mjs

@@ -1,7 +1,9 @@
+import { ContentObserver } from '@angular/cdk/observers';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, inject, EventEmitter, DestroyRef, isDevMode, booleanAttribute, numberAttribute, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, ContentChild, ViewChildren, ContentChildren, Input, Output, NgModule } from '@angular/core';
+import { inject, Directive, InjectionToken, EventEmitter, DestroyRef, isDevMode, booleanAttribute, numberAttribute, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, ContentChild, ViewChildren, ContentChildren, Input, Output, NgModule } from '@angular/core';
 import * as i1 from '@koobiq/components/core';
-import { mixinTabIndex, mixinDisabled, mixinErrorState, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, defaultOffsetY, getKbqSelectNonArrayValueError, KbqVirtualOption, SELECT_PANEL_PADDING_X, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqOption, KbqOptgroup, kbqSelectAnimations, KbqOptionModule, KbqSelectSearchEmptyResult, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
+import { KbqAbstractSelect, mixinTabIndex, mixinDisabled, mixinErrorState, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, defaultOffsetY, getKbqSelectNonArrayValueError, KbqVirtualOption, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqOption, KbqOptgroup, kbqSelectAnimations, KbqOptionModule, KbqSelectSearchEmptyResult, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import * as i3 from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -36,34 +38,30 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
     constructor(option) {
         super();
         this.option = option;
+        this.resizeObserver = inject(SharedResizeObserver);
+        this.resizeObserverSubscription = null;
+        this.contentObserver = inject(ContentObserver);
+        this.contentObserverSubscription = null;
     }
     ngAfterViewInit() {
         this.content = this.option.viewValue;
-        this.resizeObserver = new ResizeObserver(() => (this.disabled = !this.isOverflown));
-        this.mutationObserver = new MutationObserver(() => (this.content = this.option.viewValue));
-        this.mutationObserver.observe(this.textElement, {
-            characterData: true,
-            attributes: false,
-            childList: true,
-            subtree: true
-        });
+        this.contentObserverSubscription = this.contentObserver
+            .observe(this.textElement)
+            .subscribe(() => (this.content = this.option.viewValue));
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        if (this.resizeObserver) {
-            this.resizeObserver.unobserve(this.textElement);
-            this.resizeObserver.disconnect();
-        }
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
+        this.resizeObserverSubscription?.unsubscribe();
+        this.contentObserverSubscription?.unsubscribe();
     }
     onMouseEnter() {
-        this.resizeObserver.observe(this.textElement);
+        this.resizeObserverSubscription = this.resizeObserver
+            .observe(this.textElement)
+            .subscribe(() => (this.disabled = !this.isOverflown));
         this.disabled = !this.isOverflown;
     }
     onMouseLeave() {
-        this.resizeObserver.unobserve(this.textElement);
+        this.resizeObserverSubscription?.unsubscribe();
         this.disabled = true;
     }
     onFocus() {
@@ -110,8 +108,9 @@ const kbqSelectOptionsProvider = (options) => {
     };
 };
 /** @docs-private */
-class KbqSelectBase {
+class KbqSelectBase extends KbqAbstractSelect {
     constructor(elementRef, defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl) {
+        super();
         this.elementRef = elementRef;
         this.defaultErrorStateMatcher = defaultErrorStateMatcher;
         this.parentForm = parentForm;
@@ -334,8 +333,6 @@ class KbqSelect extends KbqSelectMixinBase {
         /** Unique id for this input. */
         this.uid = `kbq-select-${nextUniqueId++}`;
         this.visibleChanges = new BehaviorSubject(false);
-        /** Overlay panel class. */
-        this.overlayPanelClass = 'kbq-select-overlay';
         this.destroyRef = inject(DestroyRef);
         /** `View -> model callback called when value changes` */
         this.onChange = () => { };
@@ -957,79 +954,6 @@ class KbqSelect extends KbqSelectMixinBase {
     scrollActiveOptionIntoView() {
         this.keyManager.activeItem?.focus();
     }
-    /**
-     * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
-     * This must be adjusted to align the selected option text over the trigger text when
-     * the panel opens. Will change based on LTR or RTL text direction. Note that the offset
-     * can't be calculated until the panel has been attached, because we need to know the
-     * content width in order to constrain the panel within the viewport.
-     */
-    setOverlayPosition() {
-        this.resetOverlay();
-        const overlayRect = this.getOverlayRect();
-        // Window width without scrollbar
-        const windowWidth = this.scrollStrategy._overlayRef?.hostElement.clientWidth;
-        const isRtl = this.isRtl();
-        const paddingWidth = SELECT_PANEL_PADDING_X * 2;
-        let offsetX = SELECT_PANEL_PADDING_X;
-        let overlayMaxWidth;
-        // Invert the offsetX in LTR.
-        if (!isRtl) {
-            offsetX *= -1;
-        }
-        // Determine if select overflows on either side.
-        const leftOverflow = 0 - (overlayRect.left + offsetX - (isRtl ? paddingWidth : 0));
-        const rightOverflow = overlayRect.right + offsetX - windowWidth + (isRtl ? 0 : paddingWidth);
-        // If the element overflows on either side, reduce the offset to allow it to fit.
-        if (leftOverflow > 0 || rightOverflow > 0) {
-            [offsetX, overlayMaxWidth] = this.calculateOverlayXPosition(overlayRect, windowWidth, offsetX);
-            this.overlayDir.overlayRef.overlayElement.style.maxWidth = `${overlayMaxWidth}px`;
-            // reset the minWidth property
-            this.overlayDir.overlayRef.overlayElement.style.minWidth = '';
-        }
-        // Set the offset directly in order to avoid having to go through change detection and
-        // potentially triggering "changed after it was checked" errors. Round the value to avoid
-        // blurry content in some browsers.
-        this.overlayDir.offsetX = Math.round(offsetX);
-        this.overlayDir.overlayRef.updatePosition();
-    }
-    calculateOverlayXPosition(overlayRect, windowWidth, basicOffsetX) {
-        let offsetX = basicOffsetX;
-        const leftIndent = this.triggerRect.left;
-        const rightIndent = windowWidth - this.triggerRect.right;
-        // Setting direction of dropdown expansion
-        const isRightDirection = leftIndent <= rightIndent;
-        let maxDropdownWidth;
-        let overlayMaxWidth;
-        const triggerWidth = this.triggerRect.width + SELECT_PANEL_INDENT_PADDING_X;
-        if (isRightDirection) {
-            maxDropdownWidth = rightIndent + triggerWidth - SELECT_PANEL_VIEWPORT_PADDING;
-            overlayMaxWidth = overlayRect.width < maxDropdownWidth ? overlayRect.width : maxDropdownWidth;
-        }
-        else {
-            let leftOffset;
-            maxDropdownWidth = leftIndent + triggerWidth - SELECT_PANEL_VIEWPORT_PADDING;
-            if (overlayRect.width < maxDropdownWidth) {
-                overlayMaxWidth = overlayRect.width;
-                leftOffset = this.triggerRect.right - overlayMaxWidth;
-            }
-            else {
-                overlayMaxWidth = maxDropdownWidth;
-                leftOffset = this.triggerRect.right - (overlayMaxWidth - SELECT_PANEL_INDENT_PADDING_X);
-            }
-            offsetX -= this.triggerRect.left - leftOffset;
-        }
-        return [offsetX, overlayMaxWidth];
-    }
-    resetOverlay() {
-        this.overlayDir.overlayRef.hostElement.classList.add(this.overlayPanelClass);
-        this.overlayDir.offsetX = 0;
-        this.overlayDir.overlayRef.overlayElement.style.maxWidth = 'unset';
-        this.overlayDir.overlayRef.updatePosition();
-    }
-    getOverlayRect() {
-        return this.overlayDir.overlayRef.overlayElement.getBoundingClientRect();
-    }
     /** Gets how wide the overlay panel should be. */
     getOverlayWidth(origin) {
         if (this.panelWidth === 'auto') {