@koobiq/components 18.21.0 → 18.22.0

package/schematics/utils/ast.js

@@ -0,0 +1,28 @@
+'use strict';
+
+/** WARNING:
+ * this is copy of https://github.com/angular/angular/blob/main/packages/compiler/src/ml_parser/ast.ts
+ * since @angular/compiler and @angular-devkit/schematics
+ * are not compatible with each other */
+function visitAll(visitor, nodes) {
+    const result = [];
+    const visit = visitor.visit
+        ? (ast) => visitor.visit(ast) || ast.visit(visitor)
+        : (ast) => ast.visit(visitor);
+    nodes.forEach((ast) => {
+        visit(ast);
+    });
+    return result;
+}
+// attr can be naked or in [ ]
+// attr.value can be {{ value }} , 'value'
+function getSimpleAttributeName(attrName) {
+    return attrName.replace(/[\[\]]/g, '');
+}
+function getSimpleAttributeValue(attrValue) {
+    return attrValue.replace(/[{}']/g, '');
+}
+
+exports.getSimpleAttributeName = getSimpleAttributeName;
+exports.getSimpleAttributeValue = getSimpleAttributeValue;
+exports.visitAll = visitAll;

package/schematics/utils/package-config.js

@@ -56,7 +56,53 @@ async function setupOptions(project, tree) {
         return projectWorkspace;
     }
 }
+async function getParsingInfo(project, tree) {
+    const tsPaths = new Set();
+    const templatePaths = new Set();
+    const projectDefinition = await setupOptions(project, tree);
+    if (!projectDefinition) {
+        throw new schematics.SchematicsException(utils_messages.noProject('no project'));
+    }
+    tree.getDir(projectDefinition.root).visit((filePath) => {
+        if (filePath.endsWith('.ts')) {
+            tsPaths.add(filePath);
+        }
+        if (filePath.endsWith('.html')) {
+            templatePaths.add(filePath);
+        }
+    });
+    return { tsPaths, templatePaths, projectDefinition };
+}
+/**
+ * WARNING: do not change directly, since it's a copy of
+ * https://github.com/angular/angular/blob/6fa8d441979fdbabb88dddd246f54587e17126e8/packages/core/schematics/utils/load_esm.ts
+ *
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ * This is only intended to be used with Angular framework packages.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+async function loadEsmModule(modulePath) {
+    const namespaceObject = await new Function('modulePath', `return import(modulePath);`)(modulePath);
+    // If it is not ESM then the values needed will be stored in the `default` property.
+    // TODO_ESM: This can be removed once `@angular/*` packages are ESM only.
+    if (namespaceObject.default) {
+        return namespaceObject.default;
+    }
+    else {
+        return namespaceObject;
+    }
+}
 
 exports.addPackageToPackageJson = addPackageToPackageJson;
 exports.getPackageVersionFromPackageJson = getPackageVersionFromPackageJson;
+exports.getParsingInfo = getParsingInfo;
+exports.loadEsmModule = loadEsmModule;
 exports.setupOptions = setupOptions;

package/schematics/utils/typescript.js

@@ -0,0 +1,171 @@
+'use strict';
+
+var ts = require('typescript');
+var utils_ast = require('./ast.js');
+
+const LEADING_TRIVIA_CHARS = [' ', '\n', '\r', '\t'];
+function forEachClass(sourceFile, callback) {
+    sourceFile.forEachChild(function walk(node) {
+        if (ts.isClassDeclaration(node)) {
+            callback(node);
+        }
+        node.forEachChild(walk);
+    });
+}
+function canMigrateFile(sourceFile, program) {
+    // We shouldn't migrate .d.ts files, files from an external library or type checking files.
+    return !(sourceFile.fileName.endsWith('.ngtypecheck.ts') ||
+        sourceFile.isDeclarationFile ||
+        program.isSourceFileFromExternalLibrary(sourceFile));
+}
+function updateDecoratorProperty(decorator, propertyName, newValue) {
+    if (ts.isCallExpression(decorator.expression)) {
+        const [arg] = decorator.expression.arguments;
+        if (ts.isObjectLiteralExpression(arg)) {
+            const newProperties = arg.properties.map((prop) => {
+                if (ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name) && prop.name.text === propertyName) {
+                    return ts.factory.updatePropertyAssignment(prop, prop.name, ts.factory.createNoSubstitutionTemplateLiteral(newValue, newValue));
+                }
+                return prop;
+            });
+            const newArg = ts.factory.updateObjectLiteralExpression(arg, newProperties);
+            const newCall = ts.factory.updateCallExpression(decorator.expression, decorator.expression.expression, undefined, [newArg]);
+            return ts.factory.updateDecorator(decorator, newCall);
+        }
+    }
+    return decorator;
+}
+function getClassWithUpdatedDecorator(node, decorator, updatedDecorator) {
+    const nodeDecorators = ts.getDecorators(node) || [];
+    const decoratorIndex = nodeDecorators.indexOf(decorator);
+    const updatedDecorators = decoratorIndex !== -1 ? [
+        ...nodeDecorators.slice(0, decoratorIndex),
+        updatedDecorator,
+        ...nodeDecorators.slice(decoratorIndex + 1, nodeDecorators.length)
+    ] : nodeDecorators;
+    const modifiers = node.modifiers ? node.modifiers.filter((modifier) => modifier !== decorator) : [];
+    return ts.factory.replaceDecoratorsAndModifiers(node, [...updatedDecorators, ...modifiers]);
+}
+/**
+ * Class that collects specific elements for migration
+ * based on matching tag names and attribute values.
+ *
+ * Used as reference:
+ * @see https://github.com/angular/angular/blob/6fa8d441979fdbabb88dddd246f54587e17126e8/packages/core/schematics/migrations/control-flow-migration/types.ts#L432
+ */
+class ElementCollector {
+    constructor(migrationData, filePath) {
+        this.migrationData = migrationData;
+        this.filePath = filePath;
+        this.elementsToMigrate = [];
+    }
+    visitElement(el) {
+        if (el.name === this.migrationData.elementName && el.attrs.length > 0) {
+            for (const attr of el.attrs) {
+                const cleanAttrName = utils_ast.getSimpleAttributeName(attr.name);
+                if (cleanAttrName === this.migrationData.attrs.key.from) {
+                    this.elementsToMigrate.push(el);
+                }
+            }
+        }
+        this.visitChildren(el);
+    }
+    /**
+     * Recursively visits all child nodes of a given element or block.
+     */
+    visitChildren(el) {
+        if (el.children?.length) {
+            for (const child of el.children) {
+                child.visit(this);
+            }
+        }
+    }
+    /**
+     * Handle @if, @for blocks
+     */
+    visitBlock(block, _1) {
+        this.visitChildren(block);
+    }
+    // part of interface
+    visitAttribute(_, _1) { }
+    visitText(_, _1) { }
+    visitComment(_, _1) { }
+    visitExpansion(_, _1) { }
+    visitExpansionCase(_, _1) { }
+    visitBlockParameter(_, _1) { }
+    visitLetDeclaration(_, _1) { }
+}
+class AnalyzedFile {
+    constructor(sourceFile) {
+        this.ranges = [];
+        this.templateRanges = [];
+        this.sourceFile = sourceFile;
+    }
+    /** Returns the ranges in the order in which they should be migrated. */
+    getSortedRanges() {
+        // templates first for checking on whether certain imports can be safely removed
+        this.templateRanges = this.ranges
+            .slice()
+            .filter((x) => x.type === 'template' || x.type === 'templateUrl')
+            .sort((aStart, bStart) => bStart.start - aStart.start);
+        return this.templateRanges;
+    }
+    /**
+     * Adds a text range to an `AnalyzedFile`.
+     * @param path Path of the file.
+     * @param sourceFile SourceFile
+     * @param analyzedFiles Map keeping track of all the analyzed files.
+     * @param range Range to be added.
+     */
+    static addRange(path, sourceFile, analyzedFiles, range) {
+        let analysis = analyzedFiles.get(path);
+        if (!analysis) {
+            analysis = new AnalyzedFile(sourceFile);
+            analyzedFiles.set(path, analysis);
+        }
+        const duplicate = analysis.ranges.find((current) => current.start === range.start && current.end === range.end);
+        if (!duplicate) {
+            analysis.ranges.push(range);
+        }
+    }
+}
+/**
+ * parses the template string into the Html AST
+ */
+async function parseTemplate(template) {
+    try {
+        const { HtmlParser } = await import('@angular/compiler');
+        const parser = new HtmlParser();
+        // Note: we use the HtmlParser here, instead of the `parseTemplate` function, because the
+        // latter returns an Ivy AST, not an HTML AST. The HTML AST has the advantage of preserving
+        // interpolated text as text nodes containing a mixture of interpolation tokens and text tokens,
+        // rather than turning them into `BoundText` nodes like the Ivy AST does. This allows us to
+        // easily get the text-only ranges without having to reconstruct the original text.
+        const parsed = parser.parse(template, '', {
+            // Allows for ICUs to be parsed.
+            tokenizeExpansionForms: true,
+            // Explicitly disable blocks so that their characters are treated as plain text.
+            tokenizeBlocks: true,
+            preserveLineEndings: true,
+            leadingTriviaChars: LEADING_TRIVIA_CHARS
+        });
+        // Don't migrate invalid templates.
+        if (parsed.errors && parsed.errors.length > 0) {
+            const errors = parsed.errors.map((e) => ({ type: 'parse', error: e }));
+            return { tree: undefined, errors };
+        }
+        return { tree: parsed, errors: [] };
+    }
+    catch (e) {
+        return { tree: undefined, errors: [{ type: 'parse', error: e }] };
+    }
+}
+
+exports.AnalyzedFile = AnalyzedFile;
+exports.ElementCollector = ElementCollector;
+exports.LEADING_TRIVIA_CHARS = LEADING_TRIVIA_CHARS;
+exports.canMigrateFile = canMigrateFile;
+exports.forEachClass = forEachClass;
+exports.getClassWithUpdatedDecorator = getClassWithUpdatedDecorator;
+exports.parseTemplate = parseTemplate;
+exports.updateDecoratorProperty = updateDecoratorProperty;

package/select/select.component.d.ts

@@ -2,10 +2,10 @@ import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
 import { CdkVirtualForOf } from '@angular/cdk/scrolling';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, Provider, QueryList, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqAbstractSelect, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher, KbqAbstractSelect, KbqComponentColors, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqTag } from '@koobiq/components/tags';
 import { Observable, Subject } from 'rxjs';
@@ -36,30 +36,18 @@ export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
 }>>;
 /** Utility provider for `KBQ_SELECT_OPTIONS`. */
 export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
-/** @docs-private */
-export declare class KbqSelectBase extends KbqAbstractSelect {
-    elementRef: ElementRef;
-    defaultErrorStateMatcher: ErrorStateMatcher;
-    parentForm: NgForm;
-    parentFormGroup: FormGroupDirective;
-    ngControl: NgControl;
-    /**
-     * Emits whenever the component state changes and should cause the parent
-     * form-field to update. Implemented as part of `KbqFormFieldControl`.
-     * @docs-private
-     */
-    readonly stateChanges: Subject<void>;
-    constructor(elementRef: ElementRef, defaultErrorStateMatcher: ErrorStateMatcher, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
-}
-/** @docs-private */
-declare const KbqSelectMixinBase: CanDisableCtor & HasTabIndexCtor & CanUpdateErrorStateCtor & typeof KbqSelectBase;
-export declare class KbqSelect extends KbqSelectMixinBase implements AfterContentInit, AfterViewInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, KbqFormFieldControl<any>, CanUpdateErrorState {
+export declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<any>, CanUpdateErrorState {
     private readonly _changeDetectorRef;
     private readonly _ngZone;
     private readonly _renderer;
+    defaultErrorStateMatcher: ErrorStateMatcher;
+    elementRef: ElementRef;
     private overlayContainer;
     private readonly _dir;
+    parentForm: NgForm;
+    parentFormGroup: FormGroupDirective;
     private readonly parentFormField;
+    ngControl: NgControl;
     private readonly scrollStrategyFactory;
     protected localeService?: KbqLocaleService | undefined;
     protected readonly isBrowser: boolean;
@@ -70,6 +58,14 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
          */
         panelWidth: KbqSelectPanelWidth;
     }> | null;
+    /** Whether the component is in an error state. */
+    errorState: boolean;
+    /**
+     * Emits whenever the component state changes and should cause the parent
+     * form-field to update. Implemented as part of `KbqFormFieldControl`.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<void>;
     /** A name for this control that can be used by `kbq-form-field`. */
     controlType: string;
     hiddenItems: number;
@@ -186,8 +182,11 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     get id(): string;
     set id(value: string);
     private _id;
-    get disabled(): any;
-    set disabled(value: any);
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
     /** Whether the select is focused. */
     get focused(): boolean;
@@ -203,6 +202,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     get empty(): boolean;
     get firstSelected(): KbqOptionBase | null;
     get firstFiltered(): boolean;
+    get colorForState(): KbqComponentColors;
     private closeSubscription;
     /** The scroll position of the overlay panel, calculated to center the selected option. */
     private scrollTop;
@@ -221,8 +221,8 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    updateErrorState(): void;
     hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
     clearValue($event: any): void;
     /** `View -> model callback called when value changes` */
@@ -341,8 +341,9 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
-export {};

package/tabs/paginated-tab-header.d.ts

@@ -174,7 +174,8 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     private scrollTo;
     private updateScrollPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disablePagination": { "alias": "disablePagination"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_selectedIndex: unknown;
     static ngAcceptInputType_disablePagination: unknown;
     static ngAcceptInputType_vertical: unknown;
 }

package/tabs/tab-group.component.d.ts

@@ -1,5 +1,4 @@
 import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, OnDestroy, QueryList } from '@angular/core';
-import { CanDisableCtor } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqTabHeader } from './tab-header.component';
 import { KbqTab } from './tab.component';
@@ -36,16 +35,11 @@ export interface KbqTabsConfig {
 }
 /** Injection token that can be used to provide the default options the tabs module. */
 export declare const KBQ_TABS_CONFIG: InjectionToken<KbqTabsConfig>;
-declare class KbqTabGroupBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
 export type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | null);
 /**
  * Tab-group component.  Supports basic tab pairs (label + content) and includes keyboard navigation.
  */
-export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
+export declare class KbqTabGroup implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
     private readonly changeDetectorRef;
     readonly resizeStream: Subject<Event>;
     tabs: QueryList<KbqTab>;
@@ -58,8 +52,8 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     /** Whether the tab group should grow to the size of the active tab. */
     dynamicHeight: boolean;
     /** The index of the active tab. */
-    get selectedIndex(): number | null;
-    set selectedIndex(value: number | null);
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
     private _selectedIndex;
     get activeTab(): KbqTab | null;
     set activeTab(value: KbqTabSelectBy | null);
@@ -67,6 +61,9 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     headerPosition: KbqTabHeaderPosition;
     /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
     animationDuration: string;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     /** Output to enable support for two-way binding on `[(selectedIndex)]` */
     readonly selectedIndexChange: EventEmitter<number>;
     /** Event emitted when the tab selection has changed. */
@@ -87,7 +84,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private resizeSubscription;
     private readonly groupId;
     private readonly resizeDebounceInterval;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, defaultConfig?: KbqTabsConfig);
+    constructor(changeDetectorRef: ChangeDetectorRef, defaultConfig?: KbqTabsConfig);
     /**
      * After the content is checked, this component knows what tabs have been defined
      * and what the selected index should be. This is where we can know exactly what position
@@ -128,12 +125,13 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     private clampTabIndex;
     private getTabIndexToSelect;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
     static ngAcceptInputType_transparent: unknown;
     static ngAcceptInputType_onSurface: unknown;
     static ngAcceptInputType_underlined: unknown;
     static ngAcceptInputType_vertical: unknown;
     static ngAcceptInputType_dynamicHeight: unknown;
+    static ngAcceptInputType_selectedIndex: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
-export {};

package/tabs/tab-header.component.d.ts

@@ -27,6 +27,6 @@ export declare class KbqTabHeader extends KbqPaginatedTabHeader {
     protected get activeTabOffsetLeft(): string | null;
     protected itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
     static ngAcceptInputType_underlined: unknown;
 }

package/tabs/tab-label-wrapper.directive.d.ts

@@ -1,21 +1,18 @@
 import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
-import { CanDisable, CanDisableCtor } from '@koobiq/components/core';
 import { KbqTab } from './tab.component';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqTabLabelWrapperBase {
-}
-/** @docs-private */
-export declare const KbqTabLabelWrapperMixinBase: CanDisableCtor & typeof KbqTabLabelWrapperBase;
 /**
  * Used in the `kbq-tab-group` view to display tab labels.
  * @docs-private
  */
-export declare class KbqTabLabelWrapper extends KbqTabLabelWrapperMixinBase implements CanDisable, AfterViewInit {
+export declare class KbqTabLabelWrapper implements AfterViewInit {
     elementRef: ElementRef;
     private renderer;
     labelContent: ElementRef;
     tab: KbqTab;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     constructor(elementRef: ElementRef, renderer: Renderer2);
     ngAfterViewInit(): void;
     /** Sets focus on the wrapper element */
@@ -27,5 +24,6 @@ export declare class KbqTabLabelWrapper extends KbqTabLabelWrapperMixinBase impl
     getInnerText(): any;
     private addClassModifierForIcons;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabelWrapper, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabelWrapper, "[kbqTabLabelWrapper]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tab": { "alias": "tab"; "required": false; }; }, {}, ["labelContent"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabelWrapper, "[kbqTabLabelWrapper]", never, { "tab": { "alias": "tab"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["labelContent"], never, false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/tabs/tab.component.d.ts

@@ -1,15 +1,10 @@
 import { TemplatePortal } from '@angular/cdk/portal';
 import { OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
-import { CanDisable, CanDisableCtor, PopUpPlacements } from '@koobiq/components/core';
+import { PopUpPlacements } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqTabLabel } from './tab-label.directive';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqTabBase {
-}
-/** @docs-private */
-export declare const KbqTabMixinBase: CanDisableCtor & typeof KbqTabBase;
-export declare class KbqTab extends KbqTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {
+export declare class KbqTab implements OnInit, OnChanges, OnDestroy {
     private readonly viewContainerRef;
     /** @docs-private */
     get content(): TemplatePortal | null;
@@ -25,6 +20,9 @@ export declare class KbqTab extends KbqTabMixinBase implements OnInit, CanDisabl
     get tooltipTitle(): string;
     set tooltipTitle(value: string);
     private _tooltipTitle;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     tooltipPlacement: PopUpPlacements;
     /** Plain text label for the tab, used when there is no template label. */
     textLabel: string;
@@ -64,6 +62,7 @@ export declare class KbqTab extends KbqTabMixinBase implements OnInit, CanDisabl
      */
     protected setTemplateLabelInput(value: KbqTabLabel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTab, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTab, "kbq-tab", ["kbqTab"], { "disabled": { "alias": "disabled"; "required": false; }; "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "textLabel": { "alias": "label"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, ["templateLabel", "explicitContent"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTab, "kbq-tab", ["kbqTab"], { "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "textLabel": { "alias": "label"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, ["templateLabel", "explicitContent"], ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_empty: unknown;
 }

package/tags/tag-list.component.d.ts

@@ -3,39 +3,33 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
-import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Observable, Subject } from 'rxjs';
 import { KbqTagTextControl } from './tag-text-control';
 import { KbqTag, KbqTagEvent, KbqTagSelectionChange } from './tag.component';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqTagListBase {
-    defaultErrorStateMatcher: ErrorStateMatcher;
-    parentForm: NgForm;
-    parentFormGroup: FormGroupDirective;
-    ngControl: NgControl;
-    /**
-     * Emits whenever the component state changes and should cause the parent
-     * form-field to update. Implemented as part of `KbqFormFieldControl`.
-     * @docs-private
-     */
-    readonly stateChanges: Subject<void>;
-    constructor(defaultErrorStateMatcher: ErrorStateMatcher, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
-}
-/** @docs-private */
-export declare const KbqTagListMixinBase: CanUpdateErrorStateCtor & typeof KbqTagListBase;
 /** Change event object that is emitted when the tag list value has changed. */
 export declare class KbqTagListChange {
     source: KbqTagList;
     value: any;
     constructor(source: KbqTagList, value: any);
 }
-export declare class KbqTagList extends KbqTagListMixinBase implements KbqFormFieldControl<any>, ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState {
+export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState {
     protected elementRef: ElementRef<HTMLElement>;
     private changeDetectorRef;
+    defaultErrorStateMatcher: ErrorStateMatcher;
     private dir;
+    parentForm: NgForm;
+    parentFormGroup: FormGroupDirective;
+    ngControl: NgControl;
     readonly controlType: string;
+    /**
+     * Emits whenever the component state changes and should cause the parent
+     * form-field to update. Implemented as part of `KbqFormFieldControl`.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<void>;
     /** Combined stream of all of the child tags' selection change events. */
     get tagSelectionChanges(): Observable<KbqTagSelectionChange>;
     /** Combined stream of all of the child tags' focus change events. */
@@ -131,6 +125,8 @@ export declare class KbqTagList extends KbqTagListMixinBase implements KbqFormFi
     cleaner: KbqCleaner;
     /** The tag components contained within this tag list. */
     tags: QueryList<KbqTag>;
+    /** Whether the component is in an error state. */
+    errorState: boolean;
     private _value;
     private _required;
     private _placeholder;
@@ -159,6 +155,7 @@ export declare class KbqTagList extends KbqTagListMixinBase implements KbqFormFi
     ngOnInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
+    updateErrorState(): void;
     onTouched: () => void;
     onChange: (value: any) => void;
     /** Associates an HTML input element with this tag list. */

package/tags/tag.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
-import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, KbqTitleTextRef } from '@koobiq/components/core';
+import { KbqColorDirective, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
@@ -30,14 +30,7 @@ export declare class KbqTagTrailingIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagTrailingIcon, "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", never, {}, {}, never, never, false, never>;
 }
-/** @docs-private */
-export declare class KbqTagBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqTagMixinBase: CanColorCtor & CanDisableCtor & typeof KbqTagBase;
-export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption, OnDestroy, CanColor, CanDisable, KbqTitleTextRef, AfterContentInit {
+export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit {
     elementRef: ElementRef;
     changeDetectorRef: ChangeDetectorRef;
     private _ngZone;
@@ -116,7 +109,7 @@ export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption,
     blur(): void;
     private dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "color": { "alias": "color"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove])", "*", "[kbqTagRemove]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove])", "*", "[kbqTagRemove]"], false, never>;
 }
 /**
  *