@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/schematics/ng-add/index.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var schematics = require('@angular-devkit/schematics');
+var utility = require('@schematics/angular/utility');
+
+/**
+ * Sorts the keys of the given object.
+ * @returns A new object instance with sorted keys
+ */
+function sortObjectByKeys(obj) {
+    return Object.keys(obj)
+        .sort()
+        .reduce((result, key) => (result[key] = obj[key]) && result, {});
+}
+/**
+ * Adds a package to the package.json in the given tree
+ */
+function addPackageToPackageJson(tree, pkg, version, devDependency = false) {
+    if (tree.exists('package.json')) {
+        const sourceText = tree.read('package.json').toString('utf-8');
+        const json = JSON.parse(sourceText);
+        const dependenciesType = devDependency ? 'devDependencies' : 'dependencies';
+        const dependencies = json[dependenciesType] || {};
+        if (!dependencies[pkg]) {
+            dependencies[pkg] = version;
+            json[dependenciesType] = sortObjectByKeys(dependencies);
+        }
+        tree.overwrite('package.json', JSON.stringify(json, null, 2));
+    }
+    return tree;
+}
+
+function noProject(project) {
+    return `Unable to find project '${project}' in the workspace`;
+}
+
+/**
+ * This is executed when `ng add @koobiq/components` is run.
+ * It installs all dependencies in the 'package.json' and runs 'ng-add-setup-project' schematic.
+ */
+function ngAdd(options) {
+    return async (tree) => {
+        const { project } = options;
+        if (project) {
+            const workspace = await utility.readWorkspace(tree);
+            const projectWorkspace = workspace.projects.get(project);
+            if (!projectWorkspace) {
+                throw new schematics.SchematicsException(noProject(project));
+            }
+        }
+        // Installing dependencies
+        addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.11");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.11");
+        addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
+        addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
+        addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.12");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.12");
+        addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
+        addPackageToPackageJson(tree, 'luxon', "^3.4.4");
+        addPackageToPackageJson(tree, 'marked', "^9.0.0");
+        addPackageToPackageJson(tree, 'overlayscrollbars', "^2.7.3");
+        addPackageToPackageJson(tree, 'ngx-highlightjs', "^10.0.0");
+    };
+}
+
+exports.default = ngAdd;

package/schematics/ng-add/schema.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-ng-add",
+    "title": "koobiq-components ng-add schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        }
+    }
+}

package/scrollbar/_scrollbar-component-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-scrollbar-component-theme($theme) {
     $scrollbar: map.get(map.get($theme, components), scrollbar);
@@ -7,44 +8,39 @@
         .os-scrollbar {
             .os-scrollbar-handle {
                 &::before {
-                    border-color: map.get($scrollbar, default);
-                    background-color: map.get($scrollbar, default);
+                    border-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
+                    background-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
                 }
 
                 &:hover {
                     &::before {
-                        border-color: map.get($scrollbar, hover);
-                        background-color: map.get($scrollbar, hover);
+                        border-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
+                        background-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
                     }
                 }
 
                 &:active {
                     &::before {
-                        border-color: map.get($scrollbar, active);
-                        background-color: map.get($scrollbar, active);
+                        border-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
+                        background-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
                     }
                 }
             }
 
-            /* stylelint-disable no-descending-specificity */
-            .os-scrollbar-track, .os-scrollbar-handle {
-                $track: map.get($scrollbar, track);
-                $default: map.get($track, default);
-
+            .os-scrollbar-track,
+            .os-scrollbar-handle {
                 border-style: solid;
-                border-color: $default !important;
-                background-color: $default;
+                border-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default)) !important;
+                background-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default));
 
                 &:hover {
-                    $hover: map.get($track, hover);
-                    border-color: $hover;
-                    background: $hover;
+                    border-color: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
+                    background: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
                 }
 
                 &:active {
-                    $active: map.get($track, active);
-                    border-color: $active;
-                    background: $active;
+                    border-color: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
+                    background: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
                 }
             }
         }

package/scrollbar/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './scrollbar.module';
 export * from './scrollbar.component';
 export * from './scrollbar.directive';
+export * from './scrollbar.module';
 export * from './scrollbar.types';

package/scrollbar/scrollbar.component.scss

@@ -1,26 +1,14 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
-/* stylelint-disable no-descending-specificity */
 .kbq-scrollbar-component {
-    $scrollbar-size-thumb-width: var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
-    $padding-vertical: var(
-        --kbq-scrollbar-size-track-padding-vertical,
-        map.get($tokens, scrollbar-size-track-padding-vertical)
-    );
-    $padding-horizontal: var(
-        --kbq-scrollbar-size-track-padding-horizontal,
-        map.get($tokens, scrollbar-size-track-padding-horizontal)
-    );
-    $kbq-scrollbar-track-width: var(
-        --kbq-scrollbar-size-track-dimension,
-        map.get($tokens, scrollbar-size-track-dimension)
-    );
-    $thumb-min-height: var(--kbq-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+    $scrollbar-size-thumb-width: kbq-css-variable(scrollbar-size-thumb-width);
+    $padding-vertical: kbq-css-variable(scrollbar-size-track-padding-vertical);
+    $padding-horizontal: kbq-css-variable(scrollbar-size-track-padding-horizontal);
+    $kbq-scrollbar-track-width: kbq-css-variable(scrollbar-size-track-dimension);
+    $thumb-min-height: kbq-css-variable(scrollbar-size-thumb-min-size);
     $border-width: calc(($kbq-scrollbar-track-width - $scrollbar-size-thumb-width) / 4);
 
     .os-scrollbar-vertical {
@@ -29,7 +17,11 @@ $tokens: meta.module-variables(tokens) !default;
         width: $kbq-scrollbar-track-width;
 
         .os-scrollbar-handle {
-            transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
+            transition:
+                opacity 0.15s,
+                background-color 0.15s,
+                border-color 0.15s,
+                width 0.15s;
             border: $padding-horizontal solid;
             width: 100%;
             min-height: $thumb-min-height;
@@ -47,7 +39,11 @@ $tokens: meta.module-variables(tokens) !default;
         height: $kbq-scrollbar-track-width;
 
         .os-scrollbar-handle {
-            transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
+            transition:
+                opacity 0.15s,
+                background-color 0.15s,
+                border-color 0.15s,
+                height 0.15s;
             border: $padding-horizontal solid;
             height: 100%;
             min-width: $thumb-min-height;
@@ -60,21 +56,28 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .os-scrollbar {
-        .os-scrollbar-handle, .os-scrollbar-handle::before, .os-scrollbar-track {
+        .os-scrollbar-handle,
+        .os-scrollbar-handle::before,
+        .os-scrollbar-track {
             box-sizing: border-box;
-            border-radius: var(
-                --kbq-scrollbar-size-thumb-inset-border-radius,
-                map.get($tokens, scrollbar-size-thumb-border-radius)
-            );
+            border-radius: kbq-css-variable(scrollbar-size-thumb-border-radius);
         }
 
         .os-scrollbar-track {
             border-width: $border-width !important;
-            transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
+            transition:
+                opacity 0.15s,
+                background-color 0.15s,
+                border-color 0.15s;
         }
     }
 }
 
+[data-overlayscrollbars-contents] {
+    &:focus-visible {
+        outline: none;
+    }
+}
 
 // core
 .os-size-observer,
@@ -115,7 +118,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .os-size-observer::before {
-    content: "";
+    content: '';
     flex: none;
     box-sizing: inherit;
     padding: 10px;
@@ -148,12 +151,13 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .os-size-observer-listener:empty::before {
-    content: "";
+    content: '';
     width: 100%;
     height: 100%;
 }
 
-.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
+.os-size-observer-listener:empty::before,
+.os-size-observer-listener > .os-size-observer-listener-item {
     display: block;
     position: relative;
     padding: inherit;
@@ -265,7 +269,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .os-environment.os-environment-flexbox-glue-max div::before {
-    content: "";
+    content: '';
     display: block;
     height: 999px;
     width: 999px;
@@ -280,18 +284,18 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 [data-overlayscrollbars-initialize],
-[data-overlayscrollbars~=scrollbarHidden],
-[data-overlayscrollbars-viewport~=scrollbarHidden],
+[data-overlayscrollbars~='scrollbarHidden'],
+[data-overlayscrollbars-viewport~='scrollbarHidden'],
 .os-environment-scrollbar-hidden {
     scrollbar-width: none !important;
 }
 
 [data-overlayscrollbars-initialize]::-webkit-scrollbar,
 [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
-[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
-[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
-[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
-[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
+[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar,
+[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner,
+[data-overlayscrollbars-viewport~='scrollbarHidden']::-webkit-scrollbar,
+[data-overlayscrollbars-viewport~='scrollbarHidden']::-webkit-scrollbar-corner,
 .os-environment-scrollbar-hidden::-webkit-scrollbar,
 .os-environment-scrollbar-hidden::-webkit-scrollbar-corner {
     -webkit-appearance: none !important;
@@ -316,20 +320,20 @@ html[data-overlayscrollbars] {
     margin: 0;
 }
 
-html[data-overlayscrollbars~=body],
-html[data-overlayscrollbars~=body] > body {
+html[data-overlayscrollbars~='body'],
+html[data-overlayscrollbars~='body'] > body {
     width: 100%;
     height: 100%;
 }
 
-html[data-overlayscrollbars~=viewport] > body {
+html[data-overlayscrollbars~='viewport'] > body {
     overflow: visible;
 }
 
 /**
  * structure setup
  */
-[data-overlayscrollbars~=host],
+[data-overlayscrollbars~='host'],
 [data-overlayscrollbars-padding] {
     display: flex;
     align-items: stretch !important;
@@ -337,8 +341,8 @@ html[data-overlayscrollbars~=viewport] > body {
     flex-wrap: nowrap !important;
 }
 
-[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
-    content: "";
+[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~='arrange']::before {
+    content: '';
     position: absolute;
     pointer-events: none;
     z-index: -1;
@@ -363,33 +367,33 @@ html[data-overlayscrollbars~=viewport] > body {
     overflow: hidden;
 }
 
-[data-overlayscrollbars~=host],
-[data-overlayscrollbars~=viewport] {
+[data-overlayscrollbars~='host'],
+[data-overlayscrollbars~='viewport'] {
     position: relative;
     overflow: hidden;
 }
 
-[data-overlayscrollbars~=overflowVisible],
-[data-overlayscrollbars-padding~=overflowVisible],
-[data-overlayscrollbars-viewport~=overflowVisible] {
+[data-overlayscrollbars~='overflowVisible'],
+[data-overlayscrollbars-padding~='overflowVisible'],
+[data-overlayscrollbars-viewport~='overflowVisible'] {
     overflow: visible;
 }
 
-[data-overlayscrollbars-overflow-x=hidden] {
+[data-overlayscrollbars-overflow-x='hidden'] {
     overflow-x: hidden;
     overflow-y: hidden;
 }
 
-[data-overlayscrollbars-overflow-x=scroll] {
+[data-overlayscrollbars-overflow-x='scroll'] {
     overflow-x: scroll;
 }
 
-[data-overlayscrollbars-overflow-y=scroll] {
+[data-overlayscrollbars-overflow-y='scroll'] {
     overflow-y: scroll;
 }
 
-[data-overlayscrollbars~=scrollbarPressed],
-[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport] {
+[data-overlayscrollbars~='scrollbarPressed'],
+[data-overlayscrollbars~='scrollbarPressed'] [data-overlayscrollbars-viewport] {
     scroll-behavior: auto !important;
 }
 
@@ -400,13 +404,9 @@ html[data-overlayscrollbars~=viewport] > body {
 /**
  * Display contents to bridge any flickering during deferred initialization.
  */
-[data-overlayscrollbars-contents]:not(
-[data-overlayscrollbars-padding]
-):not(
-[data-overlayscrollbars-viewport]
-):not(
-[data-overlayscrollbars-content]
-) {
+[data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not(
+        [data-overlayscrollbars-content]
+    ) {
     display: contents;
 }
 
@@ -430,7 +430,13 @@ html[data-overlayscrollbars~=viewport] > body {
     box-sizing: border-box;
     contain: size layout;
     contain: size layout style;
-    transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
+    transition:
+        opacity 0.15s,
+        visibility 0.15s,
+        top 0.15s,
+        right 0.15s,
+        bottom 0.15s,
+        left 0.15s;
     pointer-events: none;
     position: absolute;
     opacity: 0;
@@ -542,7 +548,7 @@ body > .os-scrollbar {
 }
 
 .os-scrollbar .os-scrollbar-handle:before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     right: 0;
@@ -552,8 +558,7 @@ body > .os-scrollbar {
 }
 
 /* NONE THEME: */
-[data-overlayscrollbars~=updating] > .os-scrollbar,
+[data-overlayscrollbars~='updating'] > .os-scrollbar,
 .os-theme-none.os-scrollbar {
     display: none !important;
 }
-

package/scrollbar/scrollbar.directive.d.ts

@@ -1,6 +1,6 @@
 import { NgZone, OnDestroy } from '@angular/core';
-import { KbqScrollbarEvents, KbqScrollbarOptions, KbqScrollbarTarget } from './scrollbar.types';
 import { OverlayScrollbars } from 'overlayscrollbars';
+import { KbqScrollbarEvents, KbqScrollbarOptions, KbqScrollbarTarget } from './scrollbar.types';
 import * as i0 from "@angular/core";
 export declare class KbqScrollbarDirective implements OnDestroy {
     private ngZone;

package/scrollbar/scrollbar.types.d.ts

@@ -1,5 +1,5 @@
-import { EventListeners, EventListenerArgs, InitializationTarget, PartialOptions } from 'overlayscrollbars';
 import { InjectionToken, Provider } from '@angular/core';
+import { EventListenerArgs, EventListeners, InitializationTarget, PartialOptions } from 'overlayscrollbars';
 export type KbqScrollbarEvents = EventListeners;
 export type KbqScrollbarEventListenerArgs = EventListenerArgs;
 export type KbqScrollbarOptions = PartialOptions;

package/select/_select-theme.scss

@@ -4,60 +4,58 @@
 @use '../core/styles/common/popup' as *;
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-select-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     $error: map.get($theme, error);
 
-    $select-panel: map.get(map.get($theme, components), select-panel);
-    $divider: map.get(map.get($theme, components), divider);
+    $select-panel: map.get($theme, components, select-panel);
+    $divider: map.get($theme, components, divider);
 
     .kbq-select {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
 
         &.ng-invalid {
-            color: kbq-color($error);
+            color: kbq-css-variable(error-default, kbq-color($error));
         }
 
         &.kbq-disabled {
-            color: map.get($foreground, text-disabled);
+            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 
     .kbq-select__panel {
-        box-shadow: map.get($select-panel, shadow);
-        background: map.get($select-panel, background);
+        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
 
         & .kbq-select__footer {
-            border-color: map.get($divider, color);
+            border-color: kbq-css-variable(divider-color, map.get($divider, color));
         }
     }
 
     .kbq-select__search-container {
-        border-bottom-color: map.get($divider, color);
+        border-bottom-color: kbq-css-variable(divider-color, map.get($divider, color));
     }
 
     .kbq-select__no-options-message {
-        color: map.get($foreground, text-less-contrast);
+        color: kbq-css-variable(foreground-text-less-contrast, map.get($foreground, text-less-contrast));
     }
 }
 
 @mixin kbq-select-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-select {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, select-font-default));
+        @include kbq-typography-css-variables(select, default);
     }
 
     .kbq-select__panel {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+        @include kbq-typography-css-variables(select-panel, default);
     }
 }

package/select/public-api.d.ts

@@ -1,3 +1,3 @@
-export * from './select.module';
-export * from './select.component';
 export * from './select-option.directive';
+export * from './select.component';
+export * from './select.module';

package/select/select-option.directive.d.ts

@@ -1,3 +1,4 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
@@ -10,13 +11,13 @@ export declare class KbqOptionTooltip extends KbqTooltipTrigger implements After
     private mutationObserver;
     get textElement(): HTMLElement;
     get isOverflown(): boolean;
-    constructor(option: KbqOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(option: KbqOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
     onFocus(): void;
     onBlur(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionTooltip, [null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionTooltip, [null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOptionTooltip, "kbq-option", never, {}, {}, never, never, false, never>;
 }

package/select/select.component.d.ts

@@ -5,11 +5,10 @@ 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 { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOption, KbqOptionSelectionChange, KbqLocaleService, KbqOptionBase } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqInput } from '@koobiq/components/input';
 import { KbqTag } from '@koobiq/components/tags';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /** Change event object that is emitted when the select value has changed. */
 export declare class KbqSelectChange {
@@ -17,35 +16,6 @@ export declare class KbqSelectChange {
     value: any;
     constructor(source: KbqSelect, value: any);
 }
-export declare class KbqSelectFooter {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
-    input: KbqInput;
-    searchChangesSubscription: Subscription;
-    isSearchChanged: boolean;
-    constructor(formField: KbqFormField);
-    focus(): void;
-    reset(): void;
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    handleKeydown(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, ["input"], never, false, never>;
-}
-export declare class KbqSelectSearchEmptyResult {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, false, never>;
-}
-export declare class KbqSelectTrigger {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqSelectMatcher {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, false, never>;
-}
 /** @docs-private */
 export declare class KbqSelectBase {
     elementRef: ElementRef;
@@ -103,10 +73,14 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
      * will fall back to a position above the trigger.
      */
     positions: ConnectedPosition[];
+    /**
+     * Trigger - is a clickable field to open select dropdown panel
+     */
     trigger: ElementRef;
     panel: ElementRef;
     optionsContainer: ElementRef;
     overlayDir: CdkConnectedOverlay;
+    footer?: ElementRef;
     cdkVirtualForOf?: CdkVirtualForOf<any>;
     tags: QueryList<KbqTag>;
     /** User-supplied override of the trigger element. */
@@ -189,6 +163,8 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     get triggerValue(): string;
     get triggerValues(): KbqOptionBase[];
     get empty(): boolean;
+    get firstSelected(): KbqOptionBase | null;
+    get firstFiltered(): boolean;
     private closeSubscription;
     /** The scroll position of the overlay panel, calculated to center the selected option. */
     private scrollTop;
@@ -272,8 +248,11 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     onRemoveMatcherItem(option: KbqOptionBase, $event: any): void;
     calculateHiddenItems(): void;
     getItemHeight(): number;
+    handleClick($event: MouseEvent): void;
     private updateLocaleParams;
     private isVisible;
+    private currentOverlayPosition;
+    private modalOverlayPosition;
     private closingActions;
     private getHeightOfOptionsContainer;
     private updateScrollSize;
@@ -329,6 +308,6 @@ 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; }, { 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"; }, ["cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[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; }; "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-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
 }
 export {};