@koobiq/components 20.3.0 → 20.3.2

package/fesm2022/koobiq-components-ellipsis-center.mjs

@@ -1,24 +1,56 @@
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, input, numberAttribute, Input, Directive, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
-import { Subject, Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-const MIN_VISIBLE_LENGTH = 50;
+/**
+ * Renders text as two spans and moves the ellipsis into the middle, so the tail — a file extension, the
+ * digits that tell two reports apart — stays readable when the host is too narrow for the whole string. A
+ * tooltip spells out the full text, and is enabled only while something is actually hidden.
+ *
+ * The host needs the layout contract the consuming component ships (see `.kbq-ellipsis-center` in
+ * `file-upload.scss`): the two spans have no styles of their own.
+ */
 class KbqEllipsisCenterDirective extends KbqTooltipTrigger {
     constructor() {
         super(...arguments);
         this.cdr = inject(ChangeDetectorRef);
-        this.minVisibleLength = input(MIN_VISIBLE_LENGTH, ...(ngDevMode ? [{ debugName: "minVisibleLength" }] : []));
+        /**
+         * Application-wide `ResizeObserver` shared by every consumer, as `KbqTitleDirective` uses. Unlike the
+         * `window:resize` listener this directive used to carry, it also reacts to container-only resizes — a
+         * splitter drag, a sidebar collapse, or the vertical scrollbar that appears once a file list fills up —
+         * none of which resize the window, all of which change where the text has to be split.
+         */
+        this.resizeObserver = inject(SharedResizeObserver);
+        /**
+         * Shortest text worth splitting in the middle. Anything below it keeps its natural order and is cut off
+         * at the end by the host's own `text-overflow`.
+         *
+         * Defaults to `0` — every overflowing text is split — because that is what the directive has always
+         * done: the input was declared but never read, so any other default would silently end-truncate labels
+         * that consumers expect to see split.
+         */
+        this.minVisibleLength = input(0, ...(ngDevMode ? [{ debugName: "minVisibleLength" }] : []));
+        /**
+         * Lower bound, in pixels, for the average glyph width used to decide how many characters fit in the
+         * tail. The rendered text is measured as well and the wider of the two wins, so an underestimate here
+         * can no longer push the extension out of the tail — raising it only shortens the tail further.
+         */
         this.charWidth = input(7, ...(ngDevMode ? [{ debugName: "charWidth" }] : []));
         /**
          * Debounce time (ms) for resize events before recalculating ellipsis position.
          * @default 50
          */
         this.debounceInterval = input(50, ...(ngDevMode ? [{ debugName: "debounceInterval", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        /** @docs-private */
+        /**
+         * @deprecated No longer read. Resizes now come from the shared `ResizeObserver`, which also catches the
+         * container-only ones a `window:resize` listener cannot see; the host listener that used to feed this
+         * subject is gone, and nothing subscribes to it. Kept as a no-op and removed in the next major version.
+         * @docs-private */
         this.resizeStream = new Subject();
-        this.resizeSubscription = Subscription.EMPTY;
     }
     // TODO: Skipped for migration because:
     //  Accessor inputs cannot be migrated as they are too complex.
@@ -34,13 +66,19 @@ class KbqEllipsisCenterDirective extends KbqTooltipTrigger {
         this.refresh();
     }
     ngAfterViewInit() {
-        this.resizeSubscription = this.resizeStream
-            .pipe(debounceTime(this.debounceInterval()))
-            .subscribe(() => this.refresh());
+        super.ngAfterViewInit();
+        this.resizeObserver
+            .observe(this.elementRef.nativeElement)
+            .pipe(debounceTime(this.debounceInterval()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (this.elementRef.nativeElement.clientWidth !== this.lastMeasuredWidth) {
+                this.refresh();
+            }
+        });
     }
     ngOnDestroy() {
+        clearTimeout(this.refreshTimeoutId);
         super.ngOnDestroy();
-        this.resizeSubscription.unsubscribe();
     }
     /**
      * Updates the displayed text with center ellipsis truncation based on container width.
@@ -65,36 +103,53 @@ class KbqEllipsisCenterDirective extends KbqTooltipTrigger {
         });
         this.renderer.appendChild(dataTextStart, this.renderer.createText(this._kbqEllipsisCenter));
         this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));
-        setTimeout(() => {
-            this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;
-            if (this.disabled) {
-                start = '';
-                end = this._kbqEllipsisCenter;
-            }
-            else {
-                const averageCharWidth = this.charWidth();
-                const lastCharsLength = Math.round(this.elementRef.nativeElement.clientWidth / 2 / averageCharWidth);
-                const sliceIndex = Math.round(this._kbqEllipsisCenter.length - lastCharsLength);
+        // A queued callback outlives both the spans it measures and the directive itself: it would measure
+        // elements a newer `refresh()` has already detached (`scrollWidth === 0`, so the text reads as
+        // fitting) and then call `hide()` on a torn-down trigger.
+        clearTimeout(this.refreshTimeoutId);
+        this.refreshTimeoutId = setTimeout(() => {
+            const { clientWidth } = this.elementRef.nativeElement;
+            // The full text is still in the start element at this point, so this is the width it needs.
+            const textWidth = dataTextStart.scrollWidth;
+            const truncated = clientWidth < textWidth;
+            this.lastMeasuredWidth = clientWidth;
+            if (truncated && this._kbqEllipsisCenter.length >= this.minVisibleLength()) {
+                // What the text actually rendered at, not what `charWidth` assumes: with glyphs wider than
+                // the Latin-sized default (Cyrillic, CJK, uppercase) the estimate hands the tail more
+                // characters than the cell can hold, and the tail does not shrink — so `overflow: hidden`
+                // would swallow the extension the split exists to keep.
+                const averageCharWidth = Math.max(this.charWidth(), textWidth / this._kbqEllipsisCenter.length);
+                const lastCharsLength = Math.round(clientWidth / 2 / averageCharWidth);
+                // Both halves have to keep at least one character: an empty start element drops the ellipsis
+                // (it is the only one carrying `text-overflow`), an empty end element drops the extension.
+                const sliceIndex = Math.max(1, Math.min(Math.round(this._kbqEllipsisCenter.length - lastCharsLength), this._kbqEllipsisCenter.length - 1));
                 start = this._kbqEllipsisCenter.slice(0, sliceIndex);
                 end = this._kbqEllipsisCenter.slice(sliceIndex);
             }
+            else {
+                // Text that is not split goes into the start element, the only one carrying
+                // `text-overflow: ellipsis` — the end element cannot shrink, so text parked there would
+                // overflow the host instead of being cut off.
+                start = this._kbqEllipsisCenter;
+                end = '';
+            }
             dataTextStart.innerText = start;
             dataTextEnd.innerText = end;
+            this.disabled = !truncated;
             this.cdr.markForCheck();
         });
         this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);
         this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqEllipsisCenterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqEllipsisCenterDirective, isStandalone: true, selector: "[kbqEllipsisCenter]", inputs: { kbqEllipsisCenter: { classPropertyName: "kbqEllipsisCenter", publicName: "kbqEllipsisCenter", isSignal: false, isRequired: false, transformFunction: null }, minVisibleLength: { classPropertyName: "minVisibleLength", publicName: "minVisibleLength", isSignal: true, isRequired: false, transformFunction: null }, charWidth: { classPropertyName: "charWidth", publicName: "charWidth", isSignal: true, isRequired: false, transformFunction: null }, debounceInterval: { classPropertyName: "debounceInterval", publicName: "debounceInterval", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, classAttribute: "kbq-ellipsis-center" }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqEllipsisCenterDirective, isStandalone: true, selector: "[kbqEllipsisCenter]", inputs: { kbqEllipsisCenter: { classPropertyName: "kbqEllipsisCenter", publicName: "kbqEllipsisCenter", isSignal: false, isRequired: false, transformFunction: null }, minVisibleLength: { classPropertyName: "minVisibleLength", publicName: "minVisibleLength", isSignal: true, isRequired: false, transformFunction: null }, charWidth: { classPropertyName: "charWidth", publicName: "charWidth", isSignal: true, isRequired: false, transformFunction: null }, debounceInterval: { classPropertyName: "debounceInterval", publicName: "debounceInterval", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-ellipsis-center" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqEllipsisCenterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqEllipsisCenter]',
                     host: {
-                        class: 'kbq-ellipsis-center',
-                        '(window:resize)': 'resizeStream.next($event)'
+                        class: 'kbq-ellipsis-center'
                     }
                 }]
         }], propDecorators: { kbqEllipsisCenter: [{

package/fesm2022/koobiq-components-ellipsis-center.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-ellipsis-center.mjs","sources":["../../../packages/components/ellipsis-center/ellipsis-center.directive.ts","../../../packages/components/ellipsis-center/koobiq-components-ellipsis-center.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Directive,\n    inject,\n    Input,\n    input,\n    NgModule,\n    numberAttribute,\n    OnDestroy,\n    OnInit\n} from '@angular/core';\nimport { KbqTooltipTrigger } from '@koobiq/components/tooltip';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nconst MIN_VISIBLE_LENGTH = 50;\n\n@Directive({\n    selector: '[kbqEllipsisCenter]',\n    host: {\n        class: 'kbq-ellipsis-center',\n        '(window:resize)': 'resizeStream.next($event)'\n    }\n})\nexport class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {\n    private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\n\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input() set kbqEllipsisCenter(value: string) {\n        this._kbqEllipsisCenter = value;\n        this.refresh();\n        // check the view to properly calculate text-start and text-end on text initialized\n        this.cdr.detectChanges();\n    }\n\n    readonly minVisibleLength = input<number>(MIN_VISIBLE_LENGTH);\n\n    readonly charWidth = input(7);\n\n    /**\n     * Debounce time (ms) for resize events before recalculating ellipsis position.\n     * @default 50\n     */\n    readonly debounceInterval = input<number, unknown>(50, { transform: numberAttribute });\n\n    /** @docs-private */\n    readonly resizeStream = new Subject<Event>();\n\n    private _kbqEllipsisCenter: string;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    override ngOnInit(): void {\n        super.ngOnInit();\n        this.content = this._kbqEllipsisCenter;\n        this.refresh();\n    }\n\n    ngAfterViewInit(): void {\n        this.resizeSubscription = this.resizeStream\n            .pipe(debounceTime(this.debounceInterval()))\n            .subscribe(() => this.refresh());\n    }\n\n    ngOnDestroy() {\n        super.ngOnDestroy();\n        this.resizeSubscription.unsubscribe();\n    }\n\n    /**\n     * Updates the displayed text with center ellipsis truncation based on container width.\n     * Recreates start/end span elements, measures available space, and adjusts text accordingly.\n     * @docs-private\n     */\n    refresh(): void {\n        let start = '';\n        let end = '';\n\n        this.content = this._kbqEllipsisCenter;\n\n        const [dataTextStart, dataTextEnd] = [\n            'kbq-ellipsis-center_data-text-start',\n            'kbq-ellipsis-center_data-text-end'\n        ].map((querySelector) => {\n            const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n\n            if (element) {\n                this.renderer.removeChild(this.elementRef.nativeElement, element);\n            }\n\n            const newElement = this.renderer.createElement('span');\n\n            this.renderer.addClass(newElement, querySelector);\n\n            return newElement;\n        });\n\n        this.renderer.appendChild(dataTextStart, this.renderer.createText(this._kbqEllipsisCenter));\n        this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n        setTimeout(() => {\n            this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;\n\n            if (this.disabled) {\n                start = '';\n                end = this._kbqEllipsisCenter;\n            } else {\n                const averageCharWidth = this.charWidth();\n                const lastCharsLength = Math.round(this.elementRef.nativeElement.clientWidth / 2 / averageCharWidth);\n                const sliceIndex: number = Math.round(this._kbqEllipsisCenter.length - lastCharsLength);\n\n                start = this._kbqEllipsisCenter.slice(0, sliceIndex);\n                end = this._kbqEllipsisCenter.slice(sliceIndex);\n            }\n\n            dataTextStart.innerText = start;\n            dataTextEnd.innerText = end;\n\n            this.cdr.markForCheck();\n        });\n\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n    }\n}\n\n@NgModule({\n    imports: [KbqEllipsisCenterDirective],\n    exports: [KbqEllipsisCenterDirective]\n})\nexport class KbqEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-ellipsis-center.mjs","sources":["../../../packages/components/ellipsis-center/ellipsis-center.directive.ts","../../../packages/components/ellipsis-center/koobiq-components-ellipsis-center.ts"],"sourcesContent":["import { SharedResizeObserver } from '@angular/cdk/observers/private';\nimport {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Directive,\n    inject,\n    Input,\n    input,\n    NgModule,\n    numberAttribute,\n    OnDestroy,\n    OnInit\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { KbqTooltipTrigger } from '@koobiq/components/tooltip';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n/**\n * Renders text as two spans and moves the ellipsis into the middle, so the tail — a file extension, the\n * digits that tell two reports apart — stays readable when the host is too narrow for the whole string. A\n * tooltip spells out the full text, and is enabled only while something is actually hidden.\n *\n * The host needs the layout contract the consuming component ships (see `.kbq-ellipsis-center` in\n * `file-upload.scss`): the two spans have no styles of their own.\n */\n@Directive({\n    selector: '[kbqEllipsisCenter]',\n    host: {\n        class: 'kbq-ellipsis-center'\n    }\n})\nexport class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {\n    private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\n\n    /**\n     * Application-wide `ResizeObserver` shared by every consumer, as `KbqTitleDirective` uses. Unlike the\n     * `window:resize` listener this directive used to carry, it also reacts to container-only resizes — a\n     * splitter drag, a sidebar collapse, or the vertical scrollbar that appears once a file list fills up —\n     * none of which resize the window, all of which change where the text has to be split.\n     */\n    private readonly resizeObserver = inject(SharedResizeObserver);\n\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input() set kbqEllipsisCenter(value: string) {\n        this._kbqEllipsisCenter = value;\n        this.refresh();\n        // check the view to properly calculate text-start and text-end on text initialized\n        this.cdr.detectChanges();\n    }\n\n    /**\n     * Shortest text worth splitting in the middle. Anything below it keeps its natural order and is cut off\n     * at the end by the host's own `text-overflow`.\n     *\n     * Defaults to `0` — every overflowing text is split — because that is what the directive has always\n     * done: the input was declared but never read, so any other default would silently end-truncate labels\n     * that consumers expect to see split.\n     */\n    readonly minVisibleLength = input<number>(0);\n\n    /**\n     * Lower bound, in pixels, for the average glyph width used to decide how many characters fit in the\n     * tail. The rendered text is measured as well and the wider of the two wins, so an underestimate here\n     * can no longer push the extension out of the tail — raising it only shortens the tail further.\n     */\n    readonly charWidth = input(7);\n\n    /**\n     * Debounce time (ms) for resize events before recalculating ellipsis position.\n     * @default 50\n     */\n    readonly debounceInterval = input<number, unknown>(50, { transform: numberAttribute });\n\n    /**\n     * @deprecated No longer read. Resizes now come from the shared `ResizeObserver`, which also catches the\n     * container-only ones a `window:resize` listener cannot see; the host listener that used to feed this\n     * subject is gone, and nothing subscribes to it. Kept as a no-op and removed in the next major version.\n     * @docs-private */\n    readonly resizeStream = new Subject<Event>();\n\n    private _kbqEllipsisCenter: string;\n\n    // Host width the last completed `refresh()` measured, so a resize that leaves it untouched (the host is\n    // clamped to its container) does not schedule work that would produce the same split.\n    private lastMeasuredWidth: number | undefined;\n\n    private refreshTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    override ngOnInit(): void {\n        super.ngOnInit();\n        this.content = this._kbqEllipsisCenter;\n        this.refresh();\n    }\n\n    ngAfterViewInit(): void {\n        super.ngAfterViewInit();\n\n        this.resizeObserver\n            .observe(this.elementRef.nativeElement)\n            .pipe(debounceTime(this.debounceInterval()), takeUntilDestroyed(this.destroyRef))\n            .subscribe(() => {\n                if (this.elementRef.nativeElement.clientWidth !== this.lastMeasuredWidth) {\n                    this.refresh();\n                }\n            });\n    }\n\n    ngOnDestroy() {\n        clearTimeout(this.refreshTimeoutId);\n\n        super.ngOnDestroy();\n    }\n\n    /**\n     * Updates the displayed text with center ellipsis truncation based on container width.\n     * Recreates start/end span elements, measures available space, and adjusts text accordingly.\n     * @docs-private\n     */\n    refresh(): void {\n        let start = '';\n        let end = '';\n\n        this.content = this._kbqEllipsisCenter;\n\n        const [dataTextStart, dataTextEnd] = [\n            'kbq-ellipsis-center_data-text-start',\n            'kbq-ellipsis-center_data-text-end'\n        ].map((querySelector) => {\n            const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n\n            if (element) {\n                this.renderer.removeChild(this.elementRef.nativeElement, element);\n            }\n\n            const newElement = this.renderer.createElement('span');\n\n            this.renderer.addClass(newElement, querySelector);\n\n            return newElement;\n        });\n\n        this.renderer.appendChild(dataTextStart, this.renderer.createText(this._kbqEllipsisCenter));\n        this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n\n        // A queued callback outlives both the spans it measures and the directive itself: it would measure\n        // elements a newer `refresh()` has already detached (`scrollWidth === 0`, so the text reads as\n        // fitting) and then call `hide()` on a torn-down trigger.\n        clearTimeout(this.refreshTimeoutId);\n\n        this.refreshTimeoutId = setTimeout(() => {\n            const { clientWidth } = this.elementRef.nativeElement;\n            // The full text is still in the start element at this point, so this is the width it needs.\n            const textWidth = dataTextStart.scrollWidth;\n            const truncated = clientWidth < textWidth;\n\n            this.lastMeasuredWidth = clientWidth;\n\n            if (truncated && this._kbqEllipsisCenter.length >= this.minVisibleLength()) {\n                // What the text actually rendered at, not what `charWidth` assumes: with glyphs wider than\n                // the Latin-sized default (Cyrillic, CJK, uppercase) the estimate hands the tail more\n                // characters than the cell can hold, and the tail does not shrink — so `overflow: hidden`\n                // would swallow the extension the split exists to keep.\n                const averageCharWidth = Math.max(this.charWidth(), textWidth / this._kbqEllipsisCenter.length);\n                const lastCharsLength = Math.round(clientWidth / 2 / averageCharWidth);\n\n                // Both halves have to keep at least one character: an empty start element drops the ellipsis\n                // (it is the only one carrying `text-overflow`), an empty end element drops the extension.\n                const sliceIndex = Math.max(\n                    1,\n                    Math.min(\n                        Math.round(this._kbqEllipsisCenter.length - lastCharsLength),\n                        this._kbqEllipsisCenter.length - 1\n                    )\n                );\n\n                start = this._kbqEllipsisCenter.slice(0, sliceIndex);\n                end = this._kbqEllipsisCenter.slice(sliceIndex);\n            } else {\n                // Text that is not split goes into the start element, the only one carrying\n                // `text-overflow: ellipsis` — the end element cannot shrink, so text parked there would\n                // overflow the host instead of being cut off.\n                start = this._kbqEllipsisCenter;\n                end = '';\n            }\n\n            dataTextStart.innerText = start;\n            dataTextEnd.innerText = end;\n\n            this.disabled = !truncated;\n            this.cdr.markForCheck();\n        });\n\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n    }\n}\n\n@NgModule({\n    imports: [KbqEllipsisCenterDirective],\n    exports: [KbqEllipsisCenterDirective]\n})\nexport class KbqEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}