@koobiq/components 21.0.0 → 21.0.1

package/schematics/utils/tag-patterns.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+// RegExp sources the template rewrites of v20-upgrade and v21-upgrade build on. They live here rather than in a
+// `data.ts`: v21-upgrade's `data.ts` imports every area module, so an area that read them from there would get
+// `undefined` under CommonJS.
+/**
+ * One step inside an opening tag: a quoted value is taken whole, so neither `>` nor an attribute-like word inside
+ * it counts.
+ */
+const TAG_BODY = `(?:[^<>"']|"[^"]*"|'[^']*')`;
+/**
+ * The start of an attribute on an opening `<kbq-code-block>` tag that does not bind `name` itself, captured as
+ * `$1` together with a `[` that opens a binding.
+ */
+const codeBlockTagWithout = (name) => String.raw `(<kbq-code-block(?![\w-])(?!${TAG_BODY}*[\s\[]${name}[\]\s=/>])${TAG_BODY}*?\s\[?)`;
+/** An opening `<kbq-code-block>` tag that binds both `first` and `second`. */
+const codeBlockTagWith = (first, second) => String.raw `<kbq-code-block(?![\w-])(?=${TAG_BODY}*[\s\[]${first}[\]\s=/>])(?=${TAG_BODY}*[\s\[]${second}[\]\s=/>])`;
+
+exports.TAG_BODY = TAG_BODY;
+exports.codeBlockTagWith = codeBlockTagWith;
+exports.codeBlockTagWithout = codeBlockTagWithout;

package/schematics/utils/template-ref-access.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+var utils_ast = require('./ast.cjs');
+var utils_signalMembersMigration = require('./signal-members-migration.cjs');
+require('typescript');
+require('./messages.cjs');
+require('./package-config.cjs');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+require('./project-files.cjs');
+require('./typescript.cjs');
+
+/** A compound assignment (`+=`, `??=`, …) or a postfix `++` / `--` at the start of what follows an access. */
+const COMPOUND_WRITE_AFTER = /^\s*(?:\+\+|--|(?:\*\*|>>>|<<|>>|&&|\|\||\?\?|[-+*/%&|^])=(?!=))/;
+/** A prefix `++` / `--` at the end of what precedes an access. */
+const INCREMENT_BEFORE = /(?:\+\+|--)\s*$/;
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/** `<ref>.<member> =`, but not `==` / `===`: the lookbehind matches the one `memberAccessPattern` uses. */
+function assignmentPattern(ref, members) {
+    const names = members.map(escapeRegExp).join('|');
+    return new RegExp(`(?<![\\w$.])(${escapeRegExp(ref)}\\s*\\.\\s*(${names}))\\b(\\s*=(?!=)\\s*)`, 'g');
+}
+/** `<ref>.<member>` in any form, the optional chain included. */
+function anyAccessPattern(ref, members) {
+    return new RegExp(`(?<![\\w$.])${escapeRegExp(ref)}\\s*\\??\\.\\s*(${members.map(escapeRegExp).join('|')})\\b`, 'g');
+}
+/** End of the assigned expression that starts at `from`: the next top-level `;`, or the end of the statement list. */
+function assignedExpressionEnd(template, from, limit) {
+    let depth = 0;
+    let quote;
+    let end = limit;
+    for (let i = from; i < limit && end === limit; i++) {
+        const char = template[i];
+        if (quote) {
+            if (char === '\\')
+                i++;
+            else if (char === quote)
+                quote = undefined;
+        }
+        else if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+        }
+        else if ('([{'.includes(char)) {
+            depth++;
+        }
+        else if (')]}'.includes(char)) {
+            if (depth === 0)
+                end = i;
+            else
+                depth--;
+        }
+        else if (char === ';' && depth === 0) {
+            end = i;
+        }
+    }
+    while (end > from && /\s/.test(template[end - 1]))
+        end--;
+    return end;
+}
+/**
+ * Rewrites reads and writes of the members reachable through the refs in `template`, whose HTML AST is
+ * `rootNodes`. `policyOf` tells what a `#ref` on an element is bound to, or `undefined` when it is not one of
+ * the migrated types.
+ */
+function rewriteRefAccesses(template, rootNodes, policyOf) {
+    const scanner = new utils_signalMembersMigration.TemplateScanner(template, policyOf);
+    const result = {
+        content: template,
+        readOnlyWrites: new Set(),
+        compoundWrites: new Set(),
+        reported: new Set()
+    };
+    const writeEdits = [];
+    const readEdits = [];
+    // The end of each access already handled: a ref redeclared in a nested view reaches it twice.
+    const seen = new Set();
+    utils_ast.visitAll(scanner, rootNodes);
+    const rewriteWrites = (expression, name, policy) => {
+        const source = template.slice(expression.start, expression.end);
+        for (const match of source.matchAll(assignmentPattern(name, policy.members))) {
+            const [, target, member, operator] = match;
+            const targetEnd = expression.start + match.index + target.length;
+            if (seen.has(targetEnd))
+                continue;
+            seen.add(targetEnd);
+            if (!policy.writable.has(member)) {
+                result.readOnlyWrites.add(member);
+                continue;
+            }
+            // Outside a statement an assignment is no valid template to begin with.
+            if (expression.kind !== 'statement')
+                continue;
+            const valueStart = targetEnd + operator.length;
+            const valueEnd = assignedExpressionEnd(template, valueStart, expression.end);
+            if (valueEnd === valueStart)
+                continue;
+            writeEdits.push({ start: targetEnd, end: valueStart, text: '.set(' });
+            writeEdits.push({ start: valueEnd, end: valueEnd, text: ')' });
+        }
+    };
+    const rewriteReads = (expression, name, policy) => {
+        const source = template.slice(expression.start, expression.end);
+        for (const match of source.matchAll(utils_signalMembersMigration.memberAccessPattern(name, policy.members))) {
+            const start = expression.start + match.index;
+            const end = start + match[0].length;
+            const member = match[2];
+            if (seen.has(end))
+                continue;
+            seen.add(end);
+            // `(click)="ref.value += 1"`, `ref.value++`, `--ref.value`: a call there is no valid template.
+            if (expression.kind === 'statement' &&
+                (COMPOUND_WRITE_AFTER.test(template.slice(end, expression.end)) ||
+                    INCREMENT_BEFORE.test(template.slice(expression.start, start)))) {
+                (policy.writable.has(member) ? result.compoundWrites : result.readOnlyWrites).add(member);
+                continue;
+            }
+            // `[(ngModel)]="ref.value"` writes through the binding: a writable signal fills it as it is.
+            if (expression.kind === 'twoWay' &&
+                !template.slice(expression.start, start).trim() &&
+                !template.slice(end, expression.end).trim()) {
+                if (!policy.writable.has(member))
+                    result.readOnlyWrites.add(member);
+                continue;
+            }
+            readEdits.push({ start: end, end, text: '()' });
+        }
+    };
+    for (const { name, type: policy, ...view } of scanner.unambiguousRefs()) {
+        for (const expression of scanner.expressions) {
+            if (expression.start < view.start || expression.end > view.end)
+                continue;
+            if (policy.members.length > 0) {
+                rewriteWrites(expression, name, policy);
+                rewriteReads(expression, name, policy);
+            }
+            if (policy.reported?.length) {
+                const source = template.slice(expression.start, expression.end);
+                for (const [, member] of source.matchAll(anyAccessPattern(name, policy.reported))) {
+                    result.reported.add(member);
+                }
+            }
+        }
+    }
+    // Applied right to left. The sort is stable, so where a read ends an assigned value, the `)` closing
+    // `.set(` goes in first and the read's `()` lands in front of it.
+    const edits = [...writeEdits, ...readEdits].sort((a, b) => b.start - a.start || b.end - a.end);
+    for (const { start, end, text } of edits) {
+        result.content = result.content.slice(0, start) + text + result.content.slice(end);
+    }
+    return result;
+}
+
+exports.rewriteRefAccesses = rewriteRefAccesses;

package/schematics/utils/{typescript.js → typescript.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var ts = require('typescript');
-var utils_ast = require('./ast.js');
+var utils_ast = require('./ast.cjs');
 
 const LEADING_TRIVIA_CHARS = [' ', '\n', '\r', '\t'];
 function forEachClass(sourceFile, callback) {

package/schematics/utils/warn-only-migration.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var utils_messages = require('./messages.cjs');
+var utils_packageConfig = require('./package-config.cjs');
+var utils_projectFiles = require('./project-files.cjs');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+/**
+ * Builds the rule of a migration that only reports: every `.ts` file of the project that matches a pattern is
+ * logged with its message, then the summary. Never writes.
+ *
+ * The patterns are compiled once here rather than per file. None carries the `g` flag, so a shared instance
+ * holds no `lastIndex`.
+ */
+function warnOnlyRule(config, options) {
+    const { label, summary } = config;
+    const warnPatterns = config.warnPatterns.map(({ anchor, pattern, message }) => ({
+        anchor: anchor ? new RegExp(anchor) : null,
+        pattern: new RegExp(pattern),
+        message
+    }));
+    return async (tree, context) => {
+        const projectDefinition = await utils_packageConfig.setupOptions(options.project, tree);
+        const root = projectDefinition?.root ?? '';
+        let reported = 0;
+        utils_projectFiles.visitProjectFiles(root ? tree.getDir(root) : tree.root, (filePath, entry) => {
+            if (!filePath.endsWith('.ts'))
+                return;
+            const content = entry.content.toString();
+            if (!content)
+                return;
+            for (const { anchor, pattern, message } of warnPatterns) {
+                if (anchor && !anchor.test(content))
+                    continue;
+                if (!pattern.test(content))
+                    continue;
+                reported++;
+                utils_messages.logMessage(context.logger, [`${label} ${filePath}`, `  ${message}`]);
+            }
+        });
+        // Nothing here is affected, so the summary would only be noise.
+        if (reported === 0)
+            return;
+        utils_messages.logMessage(context.logger, [
+            `${label} processed "${root || '<workspace root>'}", ${reported} use(s) reported.`,
+            ...summary
+        ]);
+    };
+}
+
+exports.warnOnlyRule = warnOnlyRule;

package/schematics/utils/workspace-styles.cjs

@@ -0,0 +1,123 @@
+'use strict';
+
+/**
+ * Whether `project` is an application (as opposed to a library) — the same check
+ * `@schematics/angular` itself uses (see `utility/workspace.js`'s `createDefaultPath`), rather than
+ * an allowlist of builder names. A project can sit on any builder — a custom webpack wrapper, an Nx
+ * executor, one this schematic has never heard of — and still be a perfectly good application; only
+ * `projectType` reliably says so.
+ */
+function isApplicationProject(project) {
+    return project.extensions['projectType'] === 'application';
+}
+const KOOBIQ_STATIC_STYLE_ENTRIES = [
+    'node_modules/@koobiq/icons/fonts/kbq-icons.css',
+    'node_modules/@koobiq/design-tokens/web/css-tokens.css',
+    'node_modules/@koobiq/components/prebuilt-themes/theme.css'
+];
+const THEME_TOKENS_PATTERN = /^node_modules\/@koobiq\/design-tokens\/web\/css-tokens-(light|dark)\.css$/;
+/**
+ * The style entries documented in the installation guide, in the order they must be loaded.
+ * `'auto'` includes both token files, since `KbqThemeService` switches between them at runtime —
+ * a static `'light'`/`'dark'` choice only needs its own.
+ *
+ * `@koobiq/design-tokens` ships code-block, scrollbar and skeleton's tokens as opt-in
+ * `component-tokens*.css` files, but `prebuilt-themes/theme.css` already carries their values,
+ * baked in at `@koobiq/components`' own build time — nothing extra to wire here for them.
+ */
+function getKoobiqStyleEntries(theme) {
+    const [icons, tokens, prebuiltTheme] = KOOBIQ_STATIC_STYLE_ENTRIES;
+    const themeTokens = theme === 'auto' ? [
+        'node_modules/@koobiq/design-tokens/web/css-tokens-light.css',
+        'node_modules/@koobiq/design-tokens/web/css-tokens-dark.css'
+    ] : [`node_modules/@koobiq/design-tokens/web/css-tokens-${theme}.css`];
+    return [icons, tokens, ...themeTokens, prebuiltTheme];
+}
+/**
+ * Prepends the Koobiq style entries ahead of whatever is already in `existingStyles`, matching the
+ * order documented in installation.md, where the app's own stylesheet comes last. Re-running with
+ * the same theme is a no-op; re-running with a different theme swaps the `css-tokens-*.css`
+ * entries instead of accumulating duplicates. Non-string entries (style-budget objects) and any
+ * unrelated entries are preserved, untouched, in their original order.
+ */
+function mergeKoobiqStyles(existingStyles, theme) {
+    const desired = getKoobiqStyleEntries(theme);
+    const rest = existingStyles.filter((entry) => {
+        if (typeof entry !== 'string')
+            return true;
+        return (!desired.includes(entry) &&
+            !KOOBIQ_STATIC_STYLE_ENTRIES.includes(entry) &&
+            !THEME_TOKENS_PATTERN.test(entry));
+    });
+    return [...desired, ...rest];
+}
+/**
+ * Resolves the workspace-root-relative path of a project's index.html, mirroring the
+ * `@angular/build:application` builder's own default (`<sourceRoot>/index.html`) when the
+ * `index` option isn't set explicitly. `buildTarget` is `undefined` for a project with no `build`
+ * target at all, in which case the default is the only option available.
+ */
+function getIndexHtmlPath(project, buildTarget) {
+    const indexOption = buildTarget?.options?.index;
+    if (typeof indexOption === 'string') {
+        return indexOption;
+    }
+    if (indexOption && typeof indexOption === 'object' && !Array.isArray(indexOption)) {
+        const input = indexOption.input;
+        if (typeof input === 'string') {
+            return input;
+        }
+    }
+    const sourceRoot = project.sourceRoot ?? `${project.root}/src`;
+    return `${sourceRoot}/index.html`;
+}
+/**
+ * Whether a `build` target's `server`/`ssr` options indicate the project renders on the server —
+ * `KbqThemeCookieStore` matters there, where `KbqThemeLocalStorageStore`'s default doesn't reach
+ * the server render.
+ */
+function isSsrBuildTarget(buildTarget) {
+    const { server, ssr } = buildTarget.options ?? {};
+    return Boolean((typeof server === 'string' && server) || ssr === true || (ssr && typeof ssr === 'object'));
+}
+/**
+ * Mutates `workspace` in place: for every application project (optionally scoped to
+ * `projectName`), merges the Koobiq style entries for `theme` into its `build` target's `styles`
+ * array, when it has one. Returns per-project wiring info the caller uses to edit index.html and
+ * the project's bootstrap file afterward — for every application project, regardless of whether it
+ * had a `build` target to wire styles into, since the bootstrap file (and thus the theme providers)
+ * is resolved independently of it.
+ *
+ * Only the target literally named `build` is touched — not `test` (Karma) or `serve` — keeping the
+ * change's blast radius minimal.
+ */
+function applyKoobiqWorkspaceStyles(workspace, theme, projectName) {
+    const wired = [];
+    for (const [name, project] of workspace.projects) {
+        if (projectName && name !== projectName)
+            continue;
+        if (!isApplicationProject(project))
+            continue;
+        const buildTarget = project.targets.get('build');
+        let stylesWired = false;
+        if (buildTarget) {
+            const options = buildTarget.options ?? (buildTarget.options = {});
+            const existingStyles = Array.isArray(options.styles) ? options.styles : [];
+            options.styles = mergeKoobiqStyles(existingStyles, theme);
+            stylesWired = true;
+        }
+        wired.push({
+            projectName: name,
+            projectRoot: project.root,
+            indexHtmlPath: getIndexHtmlPath(project, buildTarget),
+            isSsr: buildTarget ? isSsrBuildTarget(buildTarget) : false,
+            stylesWired
+        });
+    }
+    return wired;
+}
+
+exports.applyKoobiqWorkspaceStyles = applyKoobiqWorkspaceStyles;
+exports.getIndexHtmlPath = getIndexHtmlPath;
+exports.getKoobiqStyleEntries = getKoobiqStyleEntries;
+exports.mergeKoobiqStyles = mergeKoobiqStyles;

package/types/koobiq-components-code-block.d.ts

@@ -26,10 +26,12 @@ type KbqCodeBlockFile = {
      */
     filename?: string;
     /**
-     * File language, requires for correct syntax highlighting.
-     * If not provided or invalid, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`.
+     * File language, required for correct syntax highlighting. It has to be registered in `languages` of
+     * `KbqCodeBlockHighlightJsConfig`, unless the full bundle of highlight.js is loaded. If not provided or not
+     * registered, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`, or to `plaintext` if that is not registered
+     * either.
      *
-     * See the [list of supported languages](https://highlightjs.readthedocs.io/en/stable/supported-languages.html).
+     * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
      */
     language?: string;
     /**
@@ -330,13 +332,26 @@ declare class KbqCodeBlock implements AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; "isSignal": true; }; "softWrapInput": { "alias": "softWrap"; "required": false; "isSignal": true; }; "viewAllInput": { "alias": "viewAll"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canDownloadInput": { "alias": "canDownload"; "required": false; "isSignal": true; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "alwaysShowActionbar": { "alias": "alwaysShowActionbar"; "required": false; "isSignal": true; }; "filesInput": { "alias": "files"; "required": false; "isSignal": true; }; "activeFileIndexInput": { "alias": "activeFileIndex"; "required": false; "isSignal": true; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabsInput": { "alias": "hideTabs"; "required": false; "isSignal": true; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, [{ directive: typeof i1.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
-/** `highlight.js` configuration */
+/**
+ * Configuration of highlight.js, which highlights the code of a code block: how to load it and which languages to
+ * register. Without a configuration, the code block loads the highlight.js core, which has no languages, and shows the
+ * code as plain text. Provide it with `kbqCodeBlockHighlightJsConfigProvider`.
+ */
 type KbqCodeBlockHighlightJsConfig = Partial<{
-    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    /**
+     * Lazy loader for the highlight.js instance. The core has no languages: register the ones the files use in
+     * `languages`, or load all of them with `() => import('highlight.js')`, the full bundle of about 1 MB.
+     * Defaults to `() => import('highlight.js/lib/core')`.
+     */
     core: () => Promise<{
         default: HLJSApi;
     }>;
-    /** Map of language name to lazy loader for that language's LanguageFn. */
+    /**
+     * Map of language name to lazy loader for that language's LanguageFn. A language of highlight.js loads from
+     * `highlight.js/lib/languages/<name>`, where `<name>` is the name of its file in
+     * [src/languages](https://github.com/highlightjs/highlight.js/tree/11-stable/src/languages). Plain text needs no
+     * entry: the code block registers it as the fallback language.
+     */
     languages: Record<string, () => Promise<{
         default: LanguageFn;
     }>>;
@@ -345,11 +360,20 @@ type KbqCodeBlockHighlightJsConfig = Partial<{
  * Injection token for configuring `KbqCodeBlockHighlightJsConfig`.
  */
 declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
-    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    /**
+     * Lazy loader for the highlight.js instance. The core has no languages: register the ones the files use in
+     * `languages`, or load all of them with `() => import('highlight.js')`, the full bundle of about 1 MB.
+     * Defaults to `() => import('highlight.js/lib/core')`.
+     */
     core: () => Promise<{
         default: HLJSApi;
     }>;
-    /** Map of language name to lazy loader for that language's LanguageFn. */
+    /**
+     * Map of language name to lazy loader for that language's LanguageFn. A language of highlight.js loads from
+     * `highlight.js/lib/languages/<name>`, where `<name>` is the name of its file in
+     * [src/languages](https://github.com/highlightjs/highlight.js/tree/11-stable/src/languages). Plain text needs no
+     * entry: the code block registers it as the fallback language.
+     */
     languages: Record<string, () => Promise<{
         default: LanguageFn;
     }>>;
@@ -361,7 +385,6 @@ declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
  * ```ts
  * providers: [
  *   kbqCodeBlockHighlightJsConfigProvider({
- *     core: () => import('highlight.js/lib/core'),
  *     languages: {
  *       typescript: () => import('highlight.js/lib/languages/typescript'),
  *       css: () => import('highlight.js/lib/languages/css'),
@@ -373,9 +396,11 @@ declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
  */
 declare const kbqCodeBlockHighlightJsConfigProvider: (options: KbqCodeBlockHighlightJsConfig) => Provider;
 /**
- * Fallback language for code block if language is not supported/specified.
+ * Fallback language for code block if language is not supported/specified. It has to be registered in `languages` of
+ * `KbqCodeBlockHighlightJsConfig`, unless it is plain text or the full bundle of highlight.js is loaded, or the code
+ * block falls back to `plaintext`.
  *
- * See the [list of supported languages](https://highlightjs.readthedocs.io/en/stable/supported-languages.html).
+ * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
  */
 declare const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
@@ -408,6 +433,8 @@ declare class KbqCodeBlockHighlight {
     /** Whether to display line numbers for single line code block. */
     readonly singleLine: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private highlight;
+    /** The fallback language, or plain text, which the loader registers on every instance, if it is unknown too. */
+    private fallbackLanguage;
     private warn;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlockHighlight, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqCodeBlockHighlight, "code[kbqCodeBlockHighlight]", ["kbqCodeBlockHighlight"], { "file": { "alias": "file"; "required": true; "isSignal": true; }; "startFrom": { "alias": "startFrom"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/types/koobiq-components-filter-bar.d.ts

@@ -1232,7 +1232,7 @@ declare abstract class KbqTreeSelectPipeBase<V> extends KbqBasePipe<V> implement
     treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
     dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
     /** @docs-private */
-    readonly select: _angular_core.Signal<KbqTreeSelect<KbqTreeSelectFlatNode>>;
+    readonly select: _angular_core.Signal<KbqTreeSelect<KbqTreeSelectFlatNode, KbqTreeSelectFlatNode>>;
     constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -1254,7 +1254,7 @@ declare abstract class KbqTreeSelectPipeBase<V> extends KbqBasePipe<V> implement
 
 declare class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase<KbqSelectValue[]> implements OnInit {
     /** @docs-private */
-    readonly tree: _angular_core.Signal<KbqTreeSelection<KbqTreeSelectFlatNode>>;
+    readonly tree: _angular_core.Signal<KbqTreeSelection<KbqTreeSelectFlatNode, KbqTreeSelectFlatNode>>;
     /** selected value */
     get selected(): KbqSelectValue[] | null;
     /** Whether the current pipe is empty. */

package/types/koobiq-components-tree-select.d.ts

@@ -124,7 +124,7 @@ declare class KbqTreeSelectChange<T = any> {
     /** Every option the change is about, when it covers more than one. */
     values?: unknown[] | undefined);
 }
-declare class KbqTreeSelect<T = any> extends KbqAbstractSelect implements AfterViewChecked, AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState, KbqSiblingPopup {
+declare class KbqTreeSelect<T = any, K = T> extends KbqAbstractSelect implements AfterViewChecked, AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState, KbqSiblingPopup {
     elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly injector;
@@ -158,7 +158,8 @@ declare class KbqTreeSelect<T = any> extends KbqAbstractSelect implements AfterV
      * Deals with the selection logic. The projected `kbq-tree-selection` shares the same instance.
      *
      * `T` is the type of the data nodes, the same as the projected tree's. A template infers it from `[clearPredicate]`
-     * alone, apart from the tree; a query names it: `viewChild.required<KbqTreeSelect<Node>>(KbqTreeSelect)`.
+     * alone, apart from the tree; a query names it: `viewChild.required<KbqTreeSelect<Node>>(KbqTreeSelect)`, and a
+     * select whose tree control has a `trackBy` names the key type too: `KbqTreeSelect<Node, string>`.
      */
     selectionModel: SelectionModel<T>;
     /** Emits once the panel has rendered (`'showing'`) or has been removed (`'void'`). */
@@ -207,7 +208,7 @@ declare class KbqTreeSelect<T = any> extends KbqAbstractSelect implements AfterV
     readonly customTrigger: _angular_core.Signal<KbqSelectTrigger | undefined>;
     readonly customMatcher: _angular_core.Signal<KbqSelectMatcher | undefined>;
     readonly customTagTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
-    readonly tree: _angular_core.Signal<KbqTreeSelection<T> | undefined>;
+    readonly tree: _angular_core.Signal<KbqTreeSelection<T, K> | undefined>;
     readonly search: _angular_core.Signal<KbqSelectSearch | undefined>;
     /** Message projected for an empty tree — the only thing the panel opens onto without options. */
     private readonly noOptionsMessage;
@@ -245,7 +246,7 @@ declare class KbqTreeSelect<T = any> extends KbqAbstractSelect implements AfterV
      * Event emitted whenever the tree's `selectAllOptions()` runs — a click on the `selectAll` master
      * checkbox, the Ctrl/Cmd + A shortcut, or a custom `selectAllHandler` that delegates to it.
      */
-    readonly onSelectAll: _angular_core.OutputEmitterRef<KbqSelectAllEvent<KbqTreeOption<T>, KbqTreeSelect<T>>>;
+    readonly onSelectAll: _angular_core.OutputEmitterRef<KbqSelectAllEvent<KbqTreeOption<T>, KbqTreeSelect<T, K>>>;
     /** Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding. */
     readonly panelClass: InputSignal<string | string[] | Set<string> | {
         [key: string]: any;
@@ -342,11 +343,11 @@ declare class KbqTreeSelect<T = any> extends KbqAbstractSelect implements AfterV
     private readonly resolvedTabIndex;
     private readonly resolvedAriaLabel;
     /** @docs-private */
-    readonly selectAllHandlerInput: _angular_core.InputSignalWithTransform<((event: KeyboardEvent, select: KbqTreeSelect<T>) => void) | undefined, ((event: KeyboardEvent, select: KbqTreeSelect<T>) => void) | undefined>;
+    readonly selectAllHandlerInput: _angular_core.InputSignalWithTransform<((event: KeyboardEvent, select: KbqTreeSelect<T, K>) => void) | undefined, ((event: KeyboardEvent, select: KbqTreeSelect<T, K>) => void) | undefined>;
     /**
      * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
      */
-    get selectAllHandler(): (event: KeyboardEvent, select: KbqTreeSelect<T>) => void;
+    get selectAllHandler(): (event: KeyboardEvent, select: KbqTreeSelect<T, K>) => void;
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
     private defaultSelectAllHandler;
     private readonly focusedValue;
@@ -420,6 +421,8 @@ declare class KbqTreeSelect<T = any> extends KbqAbstractSelect implements AfterV
      * node inside a collapsed branch has no option to ask.
      */
     private isNodeDisabled;
+    /** The rendered option of each node, for asking `isNodeDisabled` about every selected node at once. */
+    private renderedOptionsByNode;
     /**
      * Colour of the trigger's tags and arrow.
      *
@@ -648,8 +651,8 @@ declare class KbqTreeSelect<T = any> extends KbqAbstractSelect implements AfterV
      * timer is the floor that covers that case.
      */
     private subscribeOnSearchChanges;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect<any>, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; "isSignal": true; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "clearPredicate": { "alias": "clearPredicate"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "autoSelectInput": { "alias": "autoSelect"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "tabIndexInput": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAllHandlerInput": { "alias": "selectAllHandler"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "searchMinOptionsThresholdInput": { "alias": "searchMinOptionsThreshold"; "required": false; "isSignal": true; }; }, { "openedChangeOutput": "openedChange"; "openedOutput": "opened"; "closedOutput": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search", "noOptionsMessage"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-select-no-options, [kbq-select-no-options]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], true, [{ directive: typeof i4.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelect<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect<any, any>, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; "isSignal": true; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "clearPredicate": { "alias": "clearPredicate"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "autoSelectInput": { "alias": "autoSelect"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "tabIndexInput": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAllHandlerInput": { "alias": "selectAllHandler"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "searchMinOptionsThresholdInput": { "alias": "searchMinOptionsThreshold"; "required": false; "isSignal": true; }; }, { "openedChangeOutput": "openedChange"; "openedOutput": "opened"; "closedOutput": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search", "noOptionsMessage"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-select-no-options, [kbq-select-no-options]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], true, [{ directive: typeof i4.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
 /**