@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-clamped-text.mjs

@@ -1,85 +1,94 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, model, input, numberAttribute, computed, Directive, output, viewChild, signal, DestroyRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ruRULocaleData, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
-import { map, of, pairwise, skip, debounceTime } from 'rxjs';
+import { InjectionToken, model, input, numberAttribute, inject, computed, Directive, booleanAttribute, viewChild, signal, DestroyRef, Injector, ElementRef, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@koobiq/components/core';
+import { ruRULocaleData, kbqLocaleConfigurationOverrideProvider, kbqInjectLocaleConfiguration, kbqInjectNativeElement, KbqLocaleOverridesDirective } from '@koobiq/components/core';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Platform } from '@angular/cdk/platform';
-import { KbqButtonModule } from '@koobiq/components/button';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { KbqIcon } from '@koobiq/components/icon';
-import * as i1 from '@koobiq/components/link';
-import { KbqLinkModule } from '@koobiq/components/link';
+import { KbqLink, KbqLinkPrefix } from '@koobiq/components/link';
+import { debounce, timer } from 'rxjs';
 
+/**
+ * `KbqClampedText` and `KbqClampedList` are documented as two components but ship from one entry
+ * point on purpose: they share the `KbqClampedRoot` contract below, the `KbqClampedListTrigger`
+ * that drives it and a single `clampedText` locale section. Splitting them would duplicate all
+ * three across two packages for no consumer-visible gain.
+ */
 /**
  * Default maximum number of visible rows for the clamped text component
  * before truncation and the "collapse/expand" toggle is shown.
  */
 const kbqClampedTextDefaultMaxRows = 5;
 /** Localization configuration provider. */
-const KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION = new InjectionToken('KbqClampedTextLocaleConfig', {
+const KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION = new InjectionToken('KbqClampedTextLocaleConfiguration', {
     factory: () => ruRULocaleData.clampedText
 });
 /**
- * Utility provider.
- * @see KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION
+ * Utility provider of {@link KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION}. Only the strings you pass are overridden;
+ * the rest keep following the active locale.
+ */
+const kbqClampedTextLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('clampedText', configuration);
+/**
+ * Token the clamped containers of this package provide themselves under, so that
+ * `KbqClampedListTrigger` can drive whichever of them it is projected into without naming a
+ * concrete class.
  */
-const kbqClampedTextLocaleConfigurationProvider = (configuration) => ({
-    provide: KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION,
-    useValue: configuration
-});
 const KbqClampedRoot = new InjectionToken('KbqClampedRoot');
 /**
- * Injection function that creates a reactive locale configuration signal.
- * @see {KbqClampedText, KbqClampedList}
+ * Injection function that creates a reactive locale configuration signal for {@link KbqClampedText} and
+ * {@link KbqClampedList}.
+ *
  * @docs-private
  */
-function kbqInjectKbqClampedLocaleConfiguration() {
-    const localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-    const initialValue = inject(KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION);
-    const config = localeService
-        ? localeService.changes.pipe(map(() => localeService.getParams('clampedText')))
-        : of(initialValue);
-    return toSignal(config, { initialValue });
+function kbqInjectClampedTextLocaleConfiguration() {
+    return kbqInjectLocaleConfiguration('clampedText', KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION);
 }
 
+/**
+ * Renders a long list compactly: keeps the first `collapsedVisibleCount` items and lets a projected
+ * `kbqClampedListTrigger` reveal the rest.
+ */
 class KbqClampedList {
     constructor() {
+        this.nativeElement = kbqInjectNativeElement();
         /** Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = expanded. */
-        this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+        this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
         /** The list of items to display. */
-        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /**
-         * Maximum number of items visible in collapsed state.
-         * @default 10
+         * Maximum number of items visible in collapsed state. Defaults to `10`.
          */
-        this.collapsedVisibleCount = input(10, ...(ngDevMode ? [{ debugName: "collapsedVisibleCount", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.collapsedVisibleCount = input(10, { ...(ngDevMode ? { debugName: "collapsedVisibleCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * Minimum number of hidden items required to show the toggle trigger.
-         * @default 6
+         * Minimum number of hidden items required to show the toggle trigger. Defaults to `6`.
          */
-        this.hiddenThreshold = input(6, ...(ngDevMode ? [{ debugName: "hiddenThreshold", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.hiddenThreshold = input(6, { ...(ngDevMode ? { debugName: "hiddenThreshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Id the trigger points its `aria-controls` at. Keeps an id the host already carries. */
+        this.contentId = this.nativeElement.id || inject(_IdGenerator).getId('kbq-clamped-list-');
         /** Number of items hidden when the list is collapsed. */
-        this.exceededItemCount = computed(() => this.items().length - this.collapsedVisibleCount(), ...(ngDevMode ? [{ debugName: "exceededItemCount" }] : []));
+        this.exceededItemCount = computed(() => this.items().length - this.collapsedVisibleCount(), ...(ngDevMode ? [{ debugName: "exceededItemCount" }] : /* istanbul ignore next */ []));
         /** Whether the number of hidden items meets the threshold to render the toggle trigger. */
-        this.hasToggle = computed(() => this.exceededItemCount() >= this.hiddenThreshold(), ...(ngDevMode ? [{ debugName: "hasToggle" }] : []));
+        this.hasToggle = computed(() => this.exceededItemCount() >= this.hiddenThreshold(), ...(ngDevMode ? [{ debugName: "hasToggle" }] : /* istanbul ignore next */ []));
         /** Slice of items currently rendered — truncated to `minVisibleCount` when collapsed, a full list otherwise. */
-        this.visibleItems = computed(() => this.isCollapsed() && this.hasToggle() ? this.items().slice(0, this.collapsedVisibleCount()) : this.items(), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+        this.visibleItems = computed(() => this.isCollapsed() && this.hasToggle() ? this.items().slice(0, this.collapsedVisibleCount()) : this.items(), ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         /** Localized "show more" label with the exceeded item count interpolated into the `{exceededItemCount}` placeholder. */
-        this.showMoreCountText = computed(() => this.localeConfiguration().showMoreText.replace('{exceededItemCount}', this.exceededItemCount().toString(10)), ...(ngDevMode ? [{ debugName: "showMoreCountText" }] : []));
+        this.showMoreCountText = computed(() => this.localeConfiguration().showMoreText.replace('{exceededItemCount}', this.exceededItemCount().toString(10)), ...(ngDevMode ? [{ debugName: "showMoreCountText" }] : /* istanbul ignore next */ []));
         /** Clamped text locale configuration. */
-        this.localeConfiguration = kbqInjectKbqClampedLocaleConfiguration();
+        this.localeConfiguration = kbqInjectClampedTextLocaleConfiguration();
     }
     /** Toggles the collapsed state of the list. Stops event propagation. */
     toggle(event) {
         event.stopPropagation();
         this.isCollapsed.update((state) => !state);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqClampedList, isStandalone: true, selector: "[kbqClampedList]", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsedVisibleCount: { classPropertyName: "collapsedVisibleCount", publicName: "collapsedVisibleCount", isSignal: true, isRequired: false, transformFunction: null }, hiddenThreshold: { classPropertyName: "hiddenThreshold", publicName: "hiddenThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, host: { properties: { "attr.aria-expanded": "isCollapsed() && hasToggle() ? \"false\" : \"true\"" }, classAttribute: "kbq-clamped-list" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqClampedList, isStandalone: true, selector: "[kbqClampedList]", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsedVisibleCount: { classPropertyName: "collapsedVisibleCount", publicName: "collapsedVisibleCount", isSignal: true, isRequired: false, transformFunction: null }, hiddenThreshold: { classPropertyName: "hiddenThreshold", publicName: "hiddenThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, host: { properties: { "attr.id": "contentId" }, classAttribute: "kbq-clamped-list" }, providers: [
             { provide: KbqClampedRoot, useExisting: KbqClampedList }
-        ], exportAs: ["kbqClampedList"], ngImport: i0 }); }
+        ], exportAs: ["kbqClampedList"], hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqClampedList]',
@@ -88,110 +97,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     ],
                     host: {
                         class: 'kbq-clamped-list',
-                        '[attr.aria-expanded]': 'isCollapsed() && hasToggle() ? "false" : "true"'
+                        '[attr.id]': 'contentId'
                     },
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ],
                     exportAs: 'kbqClampedList'
                 }]
         }], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsedVisibleCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedVisibleCount", required: false }] }], hiddenThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenThreshold", required: false }] }] } });
 /**
- * Clamped list trigger.
- * Used for calling toggle collapsed state on click events
+ * Disclosure control for the clamped container it is projected into — `[kbqClampedList]` or
+ * `<kbq-clamped-text>`. Supplies the button semantics itself, so a host element does not have to:
+ * `role`, `tabindex`, `aria-expanded` and `aria-controls` all come from here, and a `role` or
+ * `tabindex` written on the element wins over the defaults.
  */
 class KbqClampedListTrigger {
     constructor() {
         this.root = inject(KbqClampedRoot, { optional: true });
+        /**
+         * Disclosure state of the controlled region. The trigger is only rendered while `hasToggle()`
+         * holds, so the container's own collapsed state is what the user sees at that point.
+         */
+        this.expanded = computed(() => {
+            const root = this.root;
+            if (!root)
+                return null;
+            return !(root.hasToggle() && (root.isCollapsed() ?? true));
+        }, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Activates the trigger from the keyboard. `preventDefault()` keeps Space from scrolling the
+     * page on the non-native hosts this directive is meant for, and suppresses the synthetic click
+     * a native button would fire on top of this handler.
+     */
+    onKeydown(event) {
+        event.preventDefault();
+        this.root?.toggle(event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedListTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqClampedListTrigger, isStandalone: true, selector: "[kbqClampedListTrigger]", host: { listeners: { "click": "root?.toggle($event)", "keydown.enter": "root?.toggle($event)", "keydown.space": "root?.toggle($event)" }, classAttribute: "kbq-clamped-list__trigger kbq-clamped-text__toggle" }, exportAs: ["kbqClampedListTrigger"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedListTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqClampedListTrigger, isStandalone: true, selector: "[kbqClampedListTrigger]", host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "click": "root?.toggle($event)", "keydown.enter": "onKeydown($any($event))", "keydown.space": "onKeydown($any($event))" }, properties: { "attr.aria-expanded": "expanded()", "attr.aria-controls": "root?.contentId ?? null" }, classAttribute: "kbq-clamped-list__trigger" }, exportAs: ["kbqClampedListTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedListTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedListTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqClampedListTrigger]',
                     host: {
-                        class: 'kbq-clamped-list__trigger kbq-clamped-text__toggle',
+                        class: 'kbq-clamped-list__trigger',
+                        role: 'button',
+                        tabindex: '0',
+                        '[attr.aria-expanded]': 'expanded()',
+                        '[attr.aria-controls]': 'root?.contentId ?? null',
                         '(click)': 'root?.toggle($event)',
-                        '(keydown.enter)': 'root?.toggle($event)',
-                        '(keydown.space)': 'root?.toggle($event)'
+                        '(keydown.enter)': 'onKeydown($any($event))',
+                        '(keydown.space)': 'onKeydown($any($event))'
                     },
                     exportAs: 'kbqClampedListTrigger'
                 }]
         }] });
 
+/**
+ * Clamps projected text to `rows` lines and offers a disclosure control that reveals the rest.
+ * The control only appears once a measurement has shown the content does not fit.
+ */
 class KbqClampedText {
     constructor() {
         /**
-         * Max rows before text is clamped.
-         * @default kbqClampedTextDefaultMaxRows
+         * Max rows before text is clamped. Defaults to `kbqClampedTextDefaultMaxRows`.
+         */
+        this.rows = input(kbqClampedTextDefaultMaxRows, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = auto.
+         * Writable half of the `[(isCollapsed)]` two-way binding — written when the user operates the
+         * toggle, never by the component's own measurement.
+         */
+        this.isCollapsed = model(undefined, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        /**
+         * Debounce time on resize observer when recalculating toggle and text visibility. Defaults to `0`.
          */
-        this.rows = input(kbqClampedTextDefaultMaxRows, ...(ngDevMode ? [{ debugName: "rows" }] : []));
-        /** Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = auto. */
-        this.isCollapsed = input(...(ngDevMode ? [undefined, { debugName: "isCollapsed" }] : []));
+        this.debounceTime = input(0, { ...(ngDevMode ? { debugName: "debounceTime" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * Debounce time on resize observer when recalculating toggle and text visibility.
-         * @default 0
+         * Whether collapsing scrolls the component back into view. Defaults to `true`.
          */
-        this.debounceTime = input(0, ...(ngDevMode ? [{ debugName: "debounceTime", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        /** Emits when collapsed state changes. Used for two-way binding with `isCollapsed`. */
-        this.isCollapsedChange = output();
+        this.scrollOnCollapse = input(true, { ...(ngDevMode ? { debugName: "scrollOnCollapse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Id of the clamped region, published by the toggle as its `aria-controls`. */
+        this.contentId = inject(_IdGenerator).getId('kbq-clamped-text-content-');
         /** @docs-private */
         this.text = viewChild.required('text');
         /** @docs-private */
         this.textContainer = viewChild.required('textContainer');
+        this.hasToggleState = signal(false, ...(ngDevMode ? [{ debugName: "hasToggleState" }] : /* istanbul ignore next */ []));
+        /** Whether the content overflows `rows` lines by enough to be worth a toggle. */
+        this.hasToggle = this.hasToggleState.asReadonly();
+        /** Whether the content has been measured at least once. */
+        this.measured = signal(false, ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
         /**
-         * This flag controls event emission, aria/css-class calculation
+         * Rendered collapsed state, which drives the css class and the toggle's `aria-expanded`.
+         *
+         * Before the first measurement nothing is known about the content, so the requested state is
+         * applied as-is: the server and the first paint clamp the text rather than flashing all of it.
+         *
          * @docs-private
          */
-        this.collapsedState = signal(undefined, ...(ngDevMode ? [{ debugName: "collapsedState" }] : []));
-        /** @docs-private */
-        this.isToggleCollapsed = signal(undefined, ...(ngDevMode ? [{ debugName: "isToggleCollapsed" }] : []));
-        /** @docs-private */
-        this.lineClamp = signal(null, ...(ngDevMode ? [{ debugName: "lineClamp" }] : []));
-        /** @docs-private */
-        this.hasToggle = signal(true, ...(ngDevMode ? [{ debugName: "hasToggle" }] : []));
+        this.collapsedState = computed(() => {
+            const collapsed = this.isCollapsed() ?? true;
+            return this.measured() ? this.hasToggle() && collapsed : collapsed;
+        }, ...(ngDevMode ? [{ debugName: "collapsedState" }] : /* istanbul ignore next */ []));
         this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
         this.elementRef = inject(ElementRef);
         this.resizeObserver = inject(SharedResizeObserver);
         this.platform = inject(Platform);
         /**
          * Clamped text locale configuration.
+         *
          * @docs-private
          */
-        this.localeConfiguration = kbqInjectKbqClampedLocaleConfiguration();
-        /**
-         * This flag is used to prevent trigger resize observer on toggle click.
-         */
-        this.isEventFromToggle = false;
-        /**
-         * Calculates next collapsed state according to previous one.
-         * `undefined` is treated as collapsed and not touched stated.
-         */
-        this.toggleCollapseState = (state) => {
-            const isCollapsed = state ?? true;
-            return !isCollapsed;
-        };
-        toObservable(this.isCollapsed)
-            .pipe(pairwise(), takeUntilDestroyed())
-            .subscribe(([previous, current]) => {
-            this.collapsedState.set(current);
-            // store previous collapsed value to reduce unnecessary changes
-            this.isToggleCollapsed.set(!this.hasToggle() ? previous : current);
-        });
-        toObservable(this.collapsedState)
-            .pipe(skip(1), takeUntilDestroyed())
-            .subscribe((collapsed) => {
-            if (collapsed === undefined)
-                return;
-            this.isCollapsedChange.emit(collapsed);
-        });
-        toObservable(this.rows)
-            .pipe(takeUntilDestroyed())
-            .subscribe((rows) => this.lineClamp.set(rows));
-    }
-    ngOnInit() {
-        // pairwise() in the constructor needs 2 emissions before firing, so seed isToggleCollapsed
-        // here (after inputs are set) to prevent the resize observer from defaulting to collapsed.
-        this.isToggleCollapsed.set(this.isCollapsed());
+        this.localeConfiguration = kbqInjectClampedTextLocaleConfiguration();
     }
     ngAfterViewInit() {
         if (!this.platform.isBrowser)
@@ -199,45 +220,39 @@ class KbqClampedText {
         const textContainer = this.textContainer().nativeElement;
         this.resizeObserver
             .observe(textContainer)
-            .pipe(debounceTime(this.debounceTime()), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.updateToggleVisibilityState();
-            this.updateCollapsedState();
-        });
+            // `debounce` re-reads the input on every delivery, so a later `[debounceTime]` applies.
+            .pipe(debounce(() => timer(this.debounceTime())), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.updateToggleVisibilityState());
     }
-    /** @docs-private */
+    /** Flips the collapsed state. Stops event propagation. */
     toggle(event) {
         event.stopPropagation();
-        this.collapsedState.update((state) => this.toggleCollapseState(this.isToggleCollapsed() ?? state));
-        this.isToggleCollapsed.update(this.toggleCollapseState);
-        this.isEventFromToggle = true;
-        if (this.collapsedState()) {
-            setTimeout(() => this.elementRef.nativeElement.scrollIntoView({ block: 'center', inline: 'center' }));
-        }
+        // Untracked: called from a consumer's `effect()`, the collapsed state read here would make the effect toggle
+        // again on every change it makes.
+        untracked(() => {
+            this.isCollapsed.update((state) => !(state ?? true));
+            if (this.scrollOnCollapse() && this.collapsedState()) {
+                afterNextRender(() => this.elementRef.nativeElement.scrollIntoView({ block: 'nearest', inline: 'nearest' }), { injector: this.injector });
+            }
+        });
     }
     updateToggleVisibilityState() {
-        this.hasToggle.set(this.getRowsCount() > this.rows() + 1);
-    }
-    updateCollapsedState() {
-        if (this.isEventFromToggle) {
-            this.isEventFromToggle = false;
-            return;
-        }
-        this.collapsedState.set(this.hasToggle() && (this.isToggleCollapsed() ?? true));
+        this.hasToggleState.set(this.getRowsCount() > this.rows() + 1);
+        this.measured.set(true);
     }
     getRowsCount() {
         const rects = Array.from(this.text().nativeElement.getClientRects());
         return [...new Set(rects.map(({ top }) => top))].length;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqClampedText, isStandalone: true, selector: "kbq-clamped-text", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsedChange: "isCollapsedChange" }, host: { properties: { "attr.aria-expanded": "collapsedState() ? \"false\" : \"true\"" }, classAttribute: "kbq-clamped-text" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqClampedText, isStandalone: true, selector: "kbq-clamped-text", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, scrollOnCollapse: { classPropertyName: "scrollOnCollapse", publicName: "scrollOnCollapse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, host: { classAttribute: "kbq-clamped-text" }, providers: [
             { provide: KbqClampedRoot, useExisting: KbqClampedText }
-        ], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true, isSignal: true }, { propertyName: "textContainer", first: true, predicate: ["textContainer"], descendants: true, isSignal: true }], exportAs: ["kbqClampedText"], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true, isSignal: true }, { propertyName: "textContainer", first: true, predicate: ["textContainer"], descendants: true, isSignal: true }], exportAs: ["kbqClampedText"], hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
         <div
             #textContainer
             class="kbq-clamped-text__content"
-            [style.-webkit-line-clamp]="lineClamp()"
-            [style.line-clamp]="lineClamp()"
+            [id]="contentId"
+            [style.--kbq-clamped-text-line-clamp]="rows()"
             [class.kbq-clamped-text__content_collapsed]="collapsedState()"
         >
             <span #text>
@@ -246,33 +261,28 @@ class KbqClampedText {
         </div>
 
         @if (hasToggle()) {
-            <span kbq-link noUnderline pseudo role="button" kbqClampedListTrigger>
+            <span class="kbq-clamped-text__toggle" kbqLink size="normal" kbqClampedListTrigger>
                 @let config = localeConfiguration();
 
-                @if (collapsedState()) {
-                    <i kbq-icon="kbq-chevron-down_16"></i>
-                    <span class="kbq-link__text">{{ config.openText }}</span>
-                } @else {
-                    <i kbq-icon="kbq-chevron-up_16"></i>
-                    <span class="kbq-link__text">{{ config.closeText }}</span>
-                }
+                <i kbqLinkPrefix [kbq-icon]="collapsedState() ? 'kbq-chevron-down_16' : 'kbq-chevron-up_16'"></i>
+                {{ collapsedState() ? config.openText : config.closeText }}
             </span>
         }
-    `, isInline: true, styles: [".kbq-clamped-text{display:inline-flex;flex-direction:column}.kbq-clamped-text__content.kbq-clamped-text__content_collapsed{display:-webkit-box;overflow-y:hidden;-webkit-box-orient:vertical}.kbq-clamped-text__toggle{margin-top:var(--kbq-size-xxs);align-self:flex-start}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "ngmodule", type: KbqLinkModule }, { kind: "directive", type: i1.KbqLink, selector: "[kbq-link]", inputs: ["disabled", "tabIndex", "pseudo", "noUnderline", "big", "compact", "multiline", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqClampedListTrigger, selector: "[kbqClampedListTrigger]", exportAs: ["kbqClampedListTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-clamped-text{display:inline-flex;flex-direction:column}.kbq-clamped-text__content.kbq-clamped-text__content_collapsed{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kbq-clamped-text-line-clamp);line-clamp:var(--kbq-clamped-text-line-clamp)}.kbq-clamped-text__toggle{margin-top:var(--kbq-clamped-text-size-toggle-margin, var(--kbq-size-xxs));align-self:flex-start}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "component", type: KbqLink, selector: "[kbqLink]", inputs: ["disabled", "tabIndex", "pseudo", "external", "underline", "size", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqLinkPrefix, selector: "[kbqLinkPrefix]" }, { kind: "directive", type: KbqClampedListTrigger, selector: "[kbqClampedListTrigger]", exportAs: ["kbqClampedListTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedText, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-clamped-text', imports: [
                         KbqIcon,
-                        KbqButtonModule,
-                        KbqLinkModule,
+                        KbqLink,
+                        KbqLinkPrefix,
                         KbqClampedListTrigger
                     ], template: `
         <div
             #textContainer
             class="kbq-clamped-text__content"
-            [style.-webkit-line-clamp]="lineClamp()"
-            [style.line-clamp]="lineClamp()"
+            [id]="contentId"
+            [style.--kbq-clamped-text-line-clamp]="rows()"
             [class.kbq-clamped-text__content_collapsed]="collapsedState()"
         >
             <span #text>
@@ -281,41 +291,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </div>
 
         @if (hasToggle()) {
-            <span kbq-link noUnderline pseudo role="button" kbqClampedListTrigger>
+            <span class="kbq-clamped-text__toggle" kbqLink size="normal" kbqClampedListTrigger>
                 @let config = localeConfiguration();
 
-                @if (collapsedState()) {
-                    <i kbq-icon="kbq-chevron-down_16"></i>
-                    <span class="kbq-link__text">{{ config.openText }}</span>
-                } @else {
-                    <i kbq-icon="kbq-chevron-up_16"></i>
-                    <span class="kbq-link__text">{{ config.closeText }}</span>
-                }
+                <i kbqLinkPrefix [kbq-icon]="collapsedState() ? 'kbq-chevron-down_16' : 'kbq-chevron-up_16'"></i>
+                {{ collapsedState() ? config.openText : config.closeText }}
             </span>
         }
     `, providers: [
                         { provide: KbqClampedRoot, useExisting: KbqClampedText }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-clamped-text',
-                        '[attr.aria-expanded]': 'collapsedState() ? "false" : "true"'
-                    }, exportAs: 'kbqClampedText', styles: [".kbq-clamped-text{display:inline-flex;flex-direction:column}.kbq-clamped-text__content.kbq-clamped-text__content_collapsed{display:-webkit-box;overflow-y:hidden;-webkit-box-orient:vertical}.kbq-clamped-text__toggle{margin-top:var(--kbq-size-xxs);align-self:flex-start}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], isCollapsedChange: [{ type: i0.Output, args: ["isCollapsedChange"] }], text: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], textContainer: [{ type: i0.ViewChild, args: ['textContainer', { isSignal: true }] }] } });
+                        class: 'kbq-clamped-text'
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], exportAs: 'kbqClampedText', styles: [".kbq-clamped-text{display:inline-flex;flex-direction:column}.kbq-clamped-text__content.kbq-clamped-text__content_collapsed{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kbq-clamped-text-line-clamp);line-clamp:var(--kbq-clamped-text-line-clamp)}.kbq-clamped-text__toggle{margin-top:var(--kbq-clamped-text-size-toggle-margin, var(--kbq-size-xxs));align-self:flex-start}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], scrollOnCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollOnCollapse", required: false }] }], text: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], textContainer: [{ type: i0.ViewChild, args: ['textContainer', { isSignal: true }] }] } });
 
 const COMPONENTS = [
     KbqClampedText,
     KbqClampedList,
     KbqClampedListTrigger
 ];
+/** Re-exports both clamped containers and their shared trigger for `NgModule`-based consumers. */
 class KbqClampedTextModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedTextModule, imports: [KbqClampedText,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedTextModule, imports: [KbqClampedText,
             KbqClampedList,
             KbqClampedListTrigger], exports: [KbqClampedText,
             KbqClampedList,
             KbqClampedListTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedTextModule, imports: [KbqClampedText] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedTextModule, imports: [KbqClampedText] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqClampedTextModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqClampedTextModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
@@ -327,5 +334,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION, KbqClampedList, KbqClampedListTrigger, KbqClampedRoot, KbqClampedText, KbqClampedTextModule, kbqClampedTextDefaultMaxRows, kbqClampedTextLocaleConfigurationProvider, kbqInjectKbqClampedLocaleConfiguration };
+export { KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION, KbqClampedList, KbqClampedListTrigger, KbqClampedRoot, KbqClampedText, KbqClampedTextModule, kbqClampedTextDefaultMaxRows, kbqClampedTextLocaleConfigurationProvider, kbqInjectClampedTextLocaleConfiguration };
 //# sourceMappingURL=koobiq-components-clamped-text.mjs.map