@koobiq/components 18.7.1 → 18.9.0

package/risk-level/risk-level-tokens.scss

@@ -3,38 +3,7 @@
     --kbq-risk-level-size-padding-horizontal: var(--kbq-size-s);
     --kbq-risk-level-size-border-width: var(--kbq-size-border-width);
     --kbq-risk-level-size-border-radius: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-risk-level-filled-fade-off-success-background: var(--kbq-background-success);
-    --kbq-risk-level-filled-fade-off-success-text: var(--kbq-foreground-white);
-    --kbq-risk-level-filled-fade-off-warning-background: var(--kbq-background-warning);
-    --kbq-risk-level-filled-fade-off-warning-text: var(--kbq-foreground-white);
-    --kbq-risk-level-filled-fade-off-error-background: var(--kbq-background-error);
-    --kbq-risk-level-filled-fade-off-error-text: var(--kbq-foreground-white);
-    --kbq-risk-level-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);
-    --kbq-risk-level-filled-fade-on-contrast-text: var(--kbq-foreground-contrast);
-    --kbq-risk-level-filled-fade-on-success-background: var(--kbq-background-success-fade);
-    --kbq-risk-level-filled-fade-on-success-text: var(--kbq-foreground-success);
-    --kbq-risk-level-filled-fade-on-warning-background: var(--kbq-background-warning-fade);
-    --kbq-risk-level-filled-fade-on-warning-text: var(--kbq-foreground-warning);
-    --kbq-risk-level-filled-fade-on-error-background: var(--kbq-background-error-fade);
-    --kbq-risk-level-filled-fade-on-error-text: var(--kbq-foreground-error);
-    --kbq-risk-level-outline-fade-on-contrast-background: transparent;
-    --kbq-risk-level-outline-fade-on-contrast-text: var(--kbq-foreground-contrast);
-    --kbq-risk-level-outline-fade-on-contrast-border: var(--kbq-line-contrast-fade);
-    --kbq-risk-level-outline-fade-on-success-background: transparent;
-    --kbq-risk-level-outline-fade-on-success-text: var(--kbq-foreground-success);
-    --kbq-risk-level-outline-fade-on-success-border: var(--kbq-line-success-fade);
-    --kbq-risk-level-outline-fade-on-warning-background: transparent;
-    --kbq-risk-level-outline-fade-on-warning-text: var(--kbq-foreground-warning);
-    --kbq-risk-level-outline-fade-on-warning-border: var(--kbq-line-warning-fade);
-    --kbq-risk-level-outline-fade-on-error-background: transparent;
-    --kbq-risk-level-outline-fade-on-error-text: var(--kbq-foreground-error);
-    --kbq-risk-level-outline-fade-on-error-border: var(--kbq-line-error-fade);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-risk-level-filled-fade-off-success-background: var(--kbq-background-success);
     --kbq-risk-level-filled-fade-off-success-text: var(--kbq-foreground-white);
     --kbq-risk-level-filled-fade-off-warning-background: var(--kbq-background-warning);

package/schematics/ng-add/index.js

@@ -23,7 +23,6 @@ const VERSIONS = {
     MESSAGEFORMAT_CORE: '^0.0.0',
     RADIX_NG: '^0.0.0',
     LUXON: '^0.0.0',
-    OVERLAYSCROLLBARS: '^0.0.0',
     NGX_HIGHLIGHTJS: '^0.0.0'
 };
 /**
@@ -42,18 +41,16 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.7.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.7.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.1.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.9.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.9.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.4");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.4");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.8.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.8.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', VERSIONS.RADIX_NG);
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");
-        utils_packageConfig.addPackageToPackageJson(tree, 'overlayscrollbars', "^2.7.3");
-        utils_packageConfig.addPackageToPackageJson(tree, 'ngx-highlightjs', "^10.0.0");
     };
 }
 

package/scrollbar/scrollbar-tokens.scss

@@ -5,22 +5,7 @@
     --kbq-scrollbar-size-thumb-width: var(--kbq-size-s);
     --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
     --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
-    --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
-    --kbq-scrollbar-track-default-border: transparent;
-    --kbq-scrollbar-track-default-background: transparent;
-    --kbq-scrollbar-track-hover-border: transparent;
-    --kbq-scrollbar-track-hover-background: transparent;
-    --kbq-scrollbar-track-active-border: transparent;
-    --kbq-scrollbar-track-active-background: transparent;
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
     --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
     --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);

package/select/select-tokens.scss

@@ -10,14 +10,7 @@
     --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
     --kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);
     --kbq-select-panel-size-max-height: 256px;
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
-    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);
     --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
 }

package/select/select.component.d.ts

@@ -1,8 +1,8 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
-import { CdkConnectedOverlay, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
 import { CdkVirtualForOf } from '@angular/cdk/scrolling';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, Provider, QueryList, Renderer2, SimpleChanges, 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, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
@@ -16,6 +16,26 @@ export declare class KbqSelectChange {
     value: any;
     constructor(source: KbqSelect, value: any);
 }
+/** Select panel width type. */
+export type KbqSelectPanelWidth = 'auto' | number | null;
+/** Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token. */
+export type KbqSelectOptions = Partial<{
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqSelectPanelWidth;
+}>;
+/** Injection token that can be used to provide the default options for the `kbq-select`. */
+export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqSelectPanelWidth;
+}>>;
+/** Utility provider for `KBQ_SELECT_OPTIONS`. */
+export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
 /** @docs-private */
 export declare class KbqSelectBase {
     elementRef: ElementRef;
@@ -42,11 +62,12 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private readonly parentFormField;
     private readonly scrollStrategyFactory;
     protected localeService?: KbqLocaleService | undefined;
+    private readonly defaultOptions;
     /** A name for this control that can be used by `kbq-form-field`. */
     controlType: string;
     hiddenItems: number;
     /** The last measured value for the trigger's client bounding rect. */
-    triggerRect: ClientRect;
+    triggerRect: DOMRect;
     /** The cached font-size of the trigger element. */
     triggerFontSize: number;
     /** Deals with the selection logic. */
@@ -141,6 +162,11 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
      */
     get compareWith(): (o1: any, o2: any) => boolean;
     set compareWith(fn: (o1: any, o2: any) => boolean);
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqSelectPanelWidth;
     /** Value of the select control. */
     get value(): any;
     set value(newValue: any);
@@ -171,6 +197,14 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     /** Unique id for this input. */
     private readonly uid;
     private visibleChanges;
+    /** Width of the overlay panel. */
+    protected overlayWidth: string | number;
+    /** Min width of the overlay panel. */
+    protected overlayMinWidth: string | number;
+    /** Overlay panel class. */
+    protected readonly overlayPanelClass = "kbq-select-overlay";
+    /** Origin for the overlay panel. */
+    protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     private readonly destroyRef;
     constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
@@ -301,12 +335,14 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private calculateOverlayXPosition;
     private resetOverlay;
     private getOverlayRect;
+    /** Gets how wide the overlay panel should be. */
     private getOverlayWidth;
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     private _compareWith;
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: 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; }; "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"], { "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; }; "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 ngAcceptInputType_multiple: unknown;
 }
 export {};

package/select/select.scss

@@ -19,6 +19,26 @@
 .kbq-select__content {
     @extend %kbq-select-content;
 
+    .kbq-option {
+        position: relative;
+
+        &:before,
+        &:after {
+            position: absolute;
+            content: '';
+            width: var(--kbq-size-xxs);
+            height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
+        }
+
+        &:before {
+            right: calc(100% + var(--kbq-size-3xs)); // outline size
+        }
+
+        &:after {
+            left: calc(100% + var(--kbq-size-3xs)); // outline size
+        }
+    }
+
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
         min-height: var(--kbq-select-panel-size-max-height, 256px);
         max-height: var(--kbq-select-panel-size-max-height, 256px);

package/sidepanel/sidepanel-tokens.scss

@@ -12,17 +12,7 @@
     --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);
     --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-3xl);
     --kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
-    --kbq-sidepanel-container-background: var(--kbq-background-card);
-    --kbq-sidepanel-container-shadow: var(--kbq-shadow-overlay);
-    --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
-    --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
     --kbq-sidepanel-container-background: var(--kbq-background-card);
     --kbq-sidepanel-container-shadow: var(--kbq-shadow-overlay);

package/tabs/_tabs-common.scss

@@ -1,4 +1,5 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
+@use '../core/styles/common/vendor-prefixes';
 
 @mixin tab-label {
     position: relative;
@@ -14,11 +15,11 @@
 
     cursor: pointer;
 
-    padding: kbq-difference-series-css-variables(
+    padding: tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-vertical,
             tabs-size-tab-item-focus-outline-width]
         )
-        kbq-difference-series-css-variables(
+        tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-horizontal,
             tabs-size-tab-item-focus-outline-width]
         );
@@ -38,14 +39,14 @@
     }
 
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
-        padding-left: kbq-difference-series-css-variables(
+        padding-left: tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-horizontal,
             tabs-size-tab-item-focus-outline-width]
         );
     }
 
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
-        padding-right: kbq-difference-series-css-variables(
+        padding-right: tokens.kbq-difference-series-css-variables(
             [tabs-size-tab-item-padding-horizontal,
             tabs-size-tab-item-focus-outline-width]
         );
@@ -90,3 +91,24 @@
         }
     }
 }
+
+// Common styles for paginated tabs, used by `.kbq-tab-header` and `.kbq-tab-nav-bar`
+@mixin paginated-tab-header {
+    .kbq-tab-header__pagination {
+        @include vendor-prefixes.user-select(none);
+
+        position: relative;
+        display: none;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        z-index: 2;
+        -webkit-tap-highlight-color: transparent;
+        touch-action: none;
+        padding: 0 var(--kbq-size-m);
+
+        .kbq-tab-header__pagination-controls_enabled & {
+            display: flex;
+        }
+    }
+}

package/tabs/_tabs-theme.scss

@@ -1,5 +1,4 @@
-@use '../core/styles/typography/typography-utils' as *;
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
 @mixin kbq-tab-item-state($type, $sub-type, $style-name) {
     $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
@@ -52,7 +51,6 @@
     }
 }
 
-//noinspection ALL
 @mixin kbq-tabs-theme() {
     .kbq-tab-group {
         &.kbq-tab-group_filled {
@@ -104,9 +102,7 @@
     .kbq-tab-nav-bar {
         &.kbq-tab-nav-bar_filled {
             &.kbq-tab-nav-bar_on-background {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-filled-on-background-background);
-                }
+                background: var(--kbq-tabs-tab-stack-filled-on-background-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(filled, on-background);
@@ -114,9 +110,7 @@
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
-                }
+                background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(filled, on-background);
@@ -126,9 +120,7 @@
 
         &.kbq-tab-nav-bar_transparent {
             &.kbq-tab-nav-bar_on-background {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
-                }
+                background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(transparent, on-background);
@@ -136,9 +128,7 @@
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                .kbq-tab-header {
-                    background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
-                }
+                background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
 
                 & .kbq-tab-link {
                     @include kbq-tab-item-style(transparent, on-background);
@@ -151,6 +141,6 @@
 @mixin kbq-tabs-typography() {
     .kbq-tab-label,
     .kbq-tab-link {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 }

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

@@ -1,8 +1,6 @@
 import { FocusableOption } from '@angular/cdk/a11y';
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import { Platform } from '@angular/cdk/platform';
-import { ViewportRuler } from '@angular/cdk/scrolling';
-import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { Direction } from '@angular/cdk/bidi';
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
@@ -19,13 +17,6 @@ export type KbqPaginatedTabHeaderItem = FocusableOption & {
  * @docs-private
  */
 export declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
-    protected elementRef: ElementRef<HTMLElement>;
-    protected changeDetectorRef: ChangeDetectorRef;
-    private viewportRuler;
-    private ngZone;
-    private platform;
-    private dir;
-    animationMode?: string | undefined;
     /** The index of the active tab. */
     get selectedIndex(): number;
     set selectedIndex(value: number);
@@ -39,11 +30,11 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     set scrollDistance(v: number);
     /** The distance in pixels that the tab labels should be translated to the left. */
     private _scrollDistance;
-    abstract items: QueryList<KbqPaginatedTabHeaderItem>;
-    abstract tabListContainer: ElementRef<HTMLElement>;
-    abstract tabList: ElementRef<HTMLElement>;
-    abstract nextPaginator: ElementRef<HTMLElement>;
-    abstract previousPaginator: ElementRef<HTMLElement>;
+    abstract readonly items: QueryList<KbqPaginatedTabHeaderItem>;
+    abstract readonly tabListContainer: ElementRef<HTMLElement>;
+    abstract readonly tabList: ElementRef<HTMLElement>;
+    abstract readonly nextPaginator: ElementRef<HTMLElement>;
+    abstract readonly previousPaginator: ElementRef<HTMLElement>;
     /** Event emitted when the option is selected. */
     readonly selectFocusedIndex: EventEmitter<number>;
     /** Event emitted when a label is focused. */
@@ -59,8 +50,10 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
      * layout recalculations if it's known that pagination won't be required.
      */
     disablePagination: boolean;
-    private readonly destroyRef;
-    protected vertical: boolean;
+    /** Whether the tabs should be displayed vertically. */
+    set vertical(value: boolean);
+    get vertical(): boolean;
+    private _vertical;
     /**
      * The number of tab labels that are displayed on the header. When this changes, the header
      * should re-evaluate the scroll position.
@@ -76,7 +69,14 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     private stopScrolling;
     /** Whether the header should scroll to the selected index after the view has been checked. */
     private selectedIndexChanged;
-    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string | undefined);
+    protected readonly destroyRef: DestroyRef;
+    readonly elementRef: ElementRef<any>;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    private readonly viewportRuler;
+    private readonly ngZone;
+    private readonly platform;
+    private readonly dir;
+    constructor();
     /** Called when the user has selected an item via the keyboard. */
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -173,6 +173,8 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
      */
     private scrollTo;
     private updateScrollPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; }, {}, never, never, false, never>;
+    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 ngAcceptInputType_disablePagination: unknown;
+    static ngAcceptInputType_vertical: unknown;
 }

package/tabs/public-api.d.ts

@@ -1,10 +1,10 @@
-export { KbqTabBody, KbqTabBodyOriginState, KbqTabBodyPortal, KbqTabBodyPositionState } from './tab-body.component';
-export { KbqTabContent } from './tab-content.directive';
+export * from './tab-body.component';
+export * from './tab-content.directive';
 export * from './tab-group.component';
-export { KbqTabHeader, ScrollDirection } from './tab-header.component';
-export { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
-export { KbqTabLabel } from './tab-label.directive';
-export { KbqTabLink, KbqTabNav } from './tab-nav-bar/index';
-export { KbqTab } from './tab.component';
+export * from './tab-header.component';
+export * from './tab-label-wrapper.directive';
+export * from './tab-label.directive';
+export * from './tab-nav-bar';
+export * from './tab.component';
 export * from './tabs-animations';
 export * from './tabs.module';

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

@@ -6,23 +6,19 @@ import { KbqTab } from './tab.component';
 import * as i0 from "@angular/core";
 export declare class KbqAlignTabsCenterCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlignTabsCenterCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsCenterCssStyler, "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsCenterCssStyler, "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqAlignTabsEndCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlignTabsEndCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsEndCssStyler, "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsEndCssStyler, "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqStretchTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqStretchTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqStretchTabsCssStyler, "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqStretchTabsCssStyler, "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqVerticalTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqUnderlinedTabsCssStyler {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUnderlinedTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUnderlinedTabsCssStyler, "kbq-tab-group[underlined], [kbq-tab-nav-bar][underlined]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", never, {}, {}, never, never, false, never>;
 }
 /** A simple change event emitted on focus or selection changes. */
 export declare class KbqTabChangeEvent {
@@ -34,38 +30,33 @@ export declare class KbqTabChangeEvent {
 /** Possible positions for the tab header. */
 export type KbqTabHeaderPosition = 'above' | 'below';
 /** Object that can be used to configure the default options for the tabs module. */
-export interface IKbqTabsConfig {
+export interface KbqTabsConfig {
     /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
     animationDuration?: string;
 }
 /** Injection token that can be used to provide the default options the tabs module. */
-export declare const KBQ_TABS_CONFIG: InjectionToken<string>;
-/** @docs-private */
-export declare class KbqTabGroupBase {
+export declare const KBQ_TABS_CONFIG: InjectionToken<KbqTabsConfig>;
+declare class KbqTabGroupBase {
     elementRef: ElementRef;
     constructor(elementRef: ElementRef);
 }
-/** @docs-private */
-export declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
+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.
+ * Tab-group component.  Supports basic tab pairs (label + content) and includes keyboard navigation.
  */
 export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
     private readonly changeDetectorRef;
     readonly resizeStream: Subject<Event>;
-    vertical: boolean;
-    underlined: boolean;
     tabs: QueryList<KbqTab>;
     tabBodyWrapper: ElementRef;
     tabHeader: KbqTabHeader;
     transparent: boolean;
     onSurface: boolean;
+    underlined: boolean;
+    vertical: boolean;
     /** Whether the tab group should grow to the size of the active tab. */
-    get dynamicHeight(): boolean;
-    set dynamicHeight(value: boolean);
-    private _dynamicHeight;
+    dynamicHeight: boolean;
     /** The index of the active tab. */
     get selectedIndex(): number | null;
     set selectedIndex(value: number | null);
@@ -96,7 +87,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private resizeSubscription;
     private readonly groupId;
     private readonly resizeDebounceInterval;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, vertical: string, underlined: string, defaultConfig?: IKbqTabsConfig);
+    constructor(elementRef: ElementRef, 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
@@ -137,6 +128,12 @@ 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, { attribute: "vertical"; }, { attribute: "underlined"; }, { 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; }; "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, 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 ngAcceptInputType_transparent: unknown;
+    static ngAcceptInputType_onSurface: unknown;
+    static ngAcceptInputType_underlined: unknown;
+    static ngAcceptInputType_vertical: unknown;
+    static ngAcceptInputType_dynamicHeight: unknown;
 }
+export {};