@koobiq/components 20.3.2 → 20.4.0

package/fesm2022/koobiq-components-select.mjs

@@ -5,7 +5,7 @@ import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
 import { ContentObserver } from '@angular/cdk/observers';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
-import { KbqOption, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, getSelectAllState, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, ruRULocaleData, KBQ_PANEL_DEFAULT_MIN_WIDTH, kbqResolvePanelMaxHeightToken, toggleSelectAll, KbqSelectAllEvent, isUndefined, kbqGetElementHeight, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, runCompareWith, KbqVirtualOption, ActiveDescendantKeyManager, isInput, shouldSelectSearchText, kbqSelectAnimations, KbqPseudoCheckbox, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, kbqSiblingPopupProvider, KbqOptionModule, KbqSelectFooterItem } from '@koobiq/components/core';
+import { KbqOption, KBQ_WINDOW, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, getSelectAllState, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, ruRULocaleData, KBQ_PANEL_DEFAULT_MIN_WIDTH, kbqResolvePanelMaxHeightToken, toggleSelectAll, KbqSelectAllEvent, isUndefined, kbqGetElementHeight, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, runCompareWith, KbqVirtualOption, ActiveDescendantKeyManager, isInput, shouldSelectSearchText, kbqSelectAnimations, KbqPseudoCheckbox, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, kbqSiblingPopupProvider, KbqOptionModule, KbqSelectFooterItem } from '@koobiq/components/core';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { Subscription, throttleTime, Subject, defer, merge, EMPTY, BehaviorSubject, fromEvent } from 'rxjs';
 import { debounceTime, switchMap, startWith, take, filter, map, delay, distinctUntilChanged, auditTime, takeUntil } from 'rxjs/operators';
@@ -122,7 +122,24 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
     get isOverflown() {
         if (!this.isBrowser)
             return false;
-        return this.textElement.clientWidth < this.textElement.scrollWidth;
+        const textElement = this.textElement;
+        // A two-line option's lines clip themselves, so they never widen this element's `scrollWidth`.
+        return textElement.clientWidth < textElement.scrollWidth || this.hasClippedLine(textElement);
+    }
+    /**
+     * Whether one of the option's own line boxes is truncating its text. The ellipsis is part of the
+     * condition, so a child clipping for another reason is not read as truncated text.
+     */
+    hasClippedLine(textElement) {
+        const { children } = textElement;
+        for (let index = 0; index < children.length; index++) {
+            const line = children[index];
+            if (line.clientWidth < line.scrollWidth &&
+                this.window.getComputedStyle(line).textOverflow.includes('ellipsis')) {
+                return true;
+            }
+        }
+        return false;
     }
     constructor() {
         super();
@@ -130,6 +147,7 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
         this.resizeObserver = inject(SharedResizeObserver);
         this.contentObserver = inject(ContentObserver);
         this.isBrowser = inject(Platform).isBrowser;
+        this.window = inject(KBQ_WINDOW);
         this.debounceInterval = 100;
         this.resizeSubscription = Subscription.EMPTY;
         this.contentObserverSubscription = Subscription.EMPTY;