@koobiq/components 17.0.0-rc.9 → 17.0.0

package/fesm2022/koobiq-components-dropdown.mjs

@@ -1,46 +1,63 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, ViewChild, ContentChild, HostListener, EventEmitter, QueryList, TemplateRef, Input, ContentChildren, Output, Self, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/cdk/overlay';
-import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { trigger, state, style, transition, group, query, animate } from '@angular/animations';
+import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i3 from '@koobiq/components/icon';
-import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
-import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { Directive, Inject, InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, ViewChild, ContentChild, HostListener, EventEmitter, QueryList, TemplateRef, Input, ContentChildren, Output, Self, NgModule } from '@angular/core';
 import { Subject, Subscription, merge, of, asapScheduler } from 'rxjs';
 import * as i1 from '@angular/cdk/a11y';
 import { mixinDisabled, KBQ_TITLE_TEXT_REF } from '@koobiq/components/core';
+import * as i3 from '@koobiq/components/icon';
+import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
 import * as i4 from '@angular/cdk/bidi';
+import * as i1$1 from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { RIGHT_ARROW, LEFT_ARROW, ESCAPE, ENTER, SPACE, DOWN_ARROW as DOWN_ARROW$1 } from '@koobiq/cdk/keycodes';
 import { startWith, switchMap, take, filter, takeUntil, delay } from 'rxjs/operators';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
-import { trigger, state, style, transition, group, query, animate } from '@angular/animations';
 
 /**
- * Injection token used to provide the parent dropdown to dropdown-specific components.
+ * Animations used by the kbq-dropdown component.
  * @docs-private
  */
-const KBQ_DROPDOWN_PANEL = new InjectionToken('KBQ_DROPDOWN_PANEL');
-/** Injection token to be used to override the default options for `kbq-dropdown`. */
-const KBQ_DROPDOWN_DEFAULT_OPTIONS = new InjectionToken('kbq-dropdown-default-options', {
-    providedIn: 'root',
-    factory: KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY
-});
-/** @docs-private */
-// tslint:disable-next-line:naming-convention
-function KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY() {
-    return {
-        overlapTriggerX: true,
-        overlapTriggerY: false,
-        xPosition: 'after',
-        yPosition: 'below',
-        backdropClass: 'cdk-overlay-transparent-backdrop',
-        hasBackdrop: false
-    };
-}
+const kbqDropdownAnimations = {
+    /**
+     * This animation controls the dropdown panel's entry and exit from the page.
+     *
+     * When the dropdown panel is added to the DOM, it scales in and fades in its border.
+     *
+     * When the dropdown panel is removed from the DOM, it simply fades out after a brief
+     * delay to display the ripple.
+     */
+    transformDropdown: trigger('transformDropdown', [
+        state('void', style({
+            opacity: 0,
+            transform: 'scale(0.8)'
+        })),
+        transition('void => enter', group([
+            query('.kbq-dropdown__content', animate('0ms linear', style({ opacity: 1 }))),
+            animate('0ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' }))
+        ])),
+        transition('* => void', animate('50ms 25ms linear', style({ opacity: 0 })))
+    ]),
+    /**
+     * This animation fades in the background color and content of the dropdown panel
+     * after its containing element is scaled in.
+     */
+    fadeInItems: trigger('fadeInItems', [
+        // now. Remove next time we do breaking changes.
+        state('showing', style({ opacity: 1 })),
+        transition('void => *', [
+            style({ opacity: 0 }),
+            animate('0ms 0ms cubic-bezier(0.55, 0, 0.55, 0.2)')
+        ])
+    ])
+};
+const fadeInItems = kbqDropdownAnimations.fadeInItems;
+const transformDropdown = kbqDropdownAnimations.transformDropdown;
 
 /**
  * Dropdown content that will be rendered lazily once the dropdown is opened.
@@ -101,6 +118,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                     args: [DOCUMENT]
                 }] }] });
 
+/**
+ * Throws an exception for the case when dropdown trigger doesn't have a valid kbq-dropdown instance
+ * @docs-private
+ */
+function throwKbqDropdownMissingError() {
+    throw Error(`kbqDropdownTriggerFor: must pass in an kbq-dropdown instance.
+    Example:
+      <kbq-dropdown #dropdown="kbqDropdown"></kbq-dropdown>
+      <button [kbqDropdownTriggerFor]="dropdown"></button>`);
+}
+/**
+ * Throws an exception for the case when dropdown's x-position value isn't valid.
+ * In other words, it doesn't match 'before' or 'after'.
+ * @docs-private
+ */
+function throwKbqDropdownInvalidPositionX() {
+    throw Error(`xPosition value must be either 'before' or after'.
+      Example: <kbq-dropdown [xPosition]="'before'" #dropdown="kbqDropdown"></kbq-dropdown>`);
+}
+/**
+ * Throws an exception for the case when dropdown's y-position value isn't valid.
+ * In other words, it doesn't match 'above' or 'below'.
+ * @docs-private
+ */
+function throwKbqDropdownInvalidPositionY() {
+    throw Error(`yPosition value must be either 'above' or below'.
+      Example: <kbq-dropdown [yPosition]="'above'" #dropdown="kbqDropdown"></kbq-dropdown>`);
+}
+
+/**
+ * Injection token used to provide the parent dropdown to dropdown-specific components.
+ * @docs-private
+ */
+const KBQ_DROPDOWN_PANEL = new InjectionToken('KBQ_DROPDOWN_PANEL');
+/** Injection token to be used to override the default options for `kbq-dropdown`. */
+const KBQ_DROPDOWN_DEFAULT_OPTIONS = new InjectionToken('kbq-dropdown-default-options', {
+    providedIn: 'root',
+    factory: KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY
+});
+/** @docs-private */
+function KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY() {
+    return {
+        overlapTriggerX: true,
+        overlapTriggerY: false,
+        xPosition: 'after',
+        yPosition: 'below',
+        backdropClass: 'cdk-overlay-transparent-backdrop',
+        hasBackdrop: false
+    };
+}
+
 // Boilerplate for applying mixins to KbqDropdownItem.
 /** @docs-private */
 class KbqDropdownItemBase {
@@ -167,7 +235,6 @@ class KbqDropdownItem extends KbqDropdownItemMixinBase {
     // In Ivy the `host` bindings will be merged when this class is extended, whereas in
     // ViewEngine they're overwritten.
     // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
-    // tslint:disable-next-line:no-host-decorator-in-concrete
     checkDisabled(event) {
         if (this.disabled) {
             event.preventDefault();
@@ -179,7 +246,6 @@ class KbqDropdownItem extends KbqDropdownItemMixinBase {
     // In Ivy the `host` bindings will be merged when this class is extended, whereas in
     // ViewEngine they're overwritten.
     // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
-    // tslint:disable-next-line:no-host-decorator-in-concrete
     handleMouseEnter() {
         this.hovered.next(this);
     }
@@ -188,7 +254,6 @@ class KbqDropdownItem extends KbqDropdownItemMixinBase {
         const clone = this.getHostElement().cloneNode(true);
         const icons = clone.querySelectorAll('[kbq-icon], .kbq-icon');
         // Strip away icons so they don't show up in the text.
-        // tslint:disable-next-line:prefer-for-of
         for (let i = 0; i < icons.length; i++) {
             const icon = icons[i];
             icon.parentNode?.removeChild(icon);
@@ -205,7 +270,7 @@ class KbqDropdownItem extends KbqDropdownItemMixinBase {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDropdownItem, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: KBQ_DROPDOWN_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: { disabled: "disabled" }, host: { listeners: { "click": "checkDisabled($event)", "mouseenter": "handleMouseEnter()" }, properties: { "class.kbq-dropdown-item_with-icon": "icon", "class.kbq-dropdown-item_highlighted": "highlighted", "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null", "attr.tabindex": "getTabIndex()" }, classAttribute: "kbq-dropdown-item" }, providers: [
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem }
-        ], queries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true, static: true }], exportAs: ["kbqDropdownItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-dropdown-item__text\" #kbqTitleText>\n    <ng-content></ng-content>\n</div>\n\n<i *ngIf=\"isNested\"\n   class=\"kbq-dropdown-trigger__icon\"\n   kbq-icon=\"mc-angle-right-S_16\">\n</i>\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-list-size-container-content-gap-horizontal, 8px);border-width:var(--kbq-list-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding:calc(var(--kbq-list-size-container-padding-vertical, 6px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-right, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-vertical, 6px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-left, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px));text-align:left}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, 2px)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item>.kbq-icon:first-child{align-self:flex-start;margin-top:var(--kbq-list-size-container-padding-vertical, 6px)}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, 2px)}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;padding:var(--kbq-list-size-header-padding-top, 8px) var(--kbq-list-size-header-padding-horizontal, 12px) var(--kbq-list-size-header-padding-bottom, 4px) var(--kbq-list-size-header-padding-horizontal, 12px)}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;padding:var(--kbq-list-size-subheading-padding-top, 12px) var(--kbq-list-size-subheading-padding-horizontal, 12px) var(--kbq-list-size-subheading-padding-bottom, 4px) var(--kbq-list-size-subheading-padding-horizontal, 12px)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true, static: true }], exportAs: ["kbqDropdownItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n<div\n    #kbqTitleText\n    class=\"kbq-dropdown-item__text\"\n>\n    <ng-content />\n</div>\n\n<i\n    *ngIf=\"isNested\"\n    kbq-icon=\"mc-angle-right-S_16\"\n    class=\"kbq-dropdown-trigger__icon\"\n></i>\n\n<div\n    class=\"kbq-dropdown-item-overlay\"\n    (click)=\"haltDisabledEvents($event)\"\n></div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s, 8px);border:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-xxs, 4px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-xxs, 4px);text-align:left;align-items:flex-start}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs, 2px)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item>.kbq-icon:first-child:before{align-self:center;display:flex;height:var(--kbq-size-xl, 20px);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs, 2px)}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs, 2px) solid transparent;border-right:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-xs, 6px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-3xs, 2px)}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs, 2px) solid transparent;border-right:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-m, 12px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-xxs, 4px)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDropdownItem, decorators: [{
             type: Component,
@@ -218,7 +283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[attr.tabindex]': 'getTabIndex()'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem }
-                    ], template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-dropdown-item__text\" #kbqTitleText>\n    <ng-content></ng-content>\n</div>\n\n<i *ngIf=\"isNested\"\n   class=\"kbq-dropdown-trigger__icon\"\n   kbq-icon=\"mc-angle-right-S_16\">\n</i>\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-list-size-container-content-gap-horizontal, 8px);border-width:var(--kbq-list-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding:calc(var(--kbq-list-size-container-padding-vertical, 6px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-right, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-vertical, 6px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-left, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px));text-align:left}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, 2px)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item>.kbq-icon:first-child{align-self:flex-start;margin-top:var(--kbq-list-size-container-padding-vertical, 6px)}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, 2px)}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;padding:var(--kbq-list-size-header-padding-top, 8px) var(--kbq-list-size-header-padding-horizontal, 12px) var(--kbq-list-size-header-padding-bottom, 4px) var(--kbq-list-size-header-padding-horizontal, 12px)}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;padding:var(--kbq-list-size-subheading-padding-top, 12px) var(--kbq-list-size-subheading-padding-horizontal, 12px) var(--kbq-list-size-subheading-padding-bottom, 4px) var(--kbq-list-size-subheading-padding-horizontal, 12px)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}\n"] }]
+                    ], template: "<ng-content select=\"[kbq-icon]\" />\n\n<div\n    #kbqTitleText\n    class=\"kbq-dropdown-item__text\"\n>\n    <ng-content />\n</div>\n\n<i\n    *ngIf=\"isNested\"\n    kbq-icon=\"mc-angle-right-S_16\"\n    class=\"kbq-dropdown-trigger__icon\"\n></i>\n\n<div\n    class=\"kbq-dropdown-item-overlay\"\n    (click)=\"haltDisabledEvents($event)\"\n></div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s, 8px);border:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-xxs, 4px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-xxs, 4px);text-align:left;align-items:flex-start}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs, 2px)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item>.kbq-icon:first-child:before{align-self:center;display:flex;height:var(--kbq-size-xl, 20px);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs, 2px)}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs, 2px) solid transparent;border-right:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-xs, 6px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-3xs, 2px)}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs, 2px) solid transparent;border-right:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-m, 12px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-xxs, 4px)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_DROPDOWN_PANEL]
@@ -238,75 +303,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 args: ['mouseenter']
             }] } });
 
-/**
- * Throws an exception for the case when dropdown trigger doesn't have a valid kbq-dropdown instance
- * @docs-private
- */
-function throwKbqDropdownMissingError() {
-    throw Error(`kbqDropdownTriggerFor: must pass in an kbq-dropdown instance.
-    Example:
-      <kbq-dropdown #dropdown="kbqDropdown"></kbq-dropdown>
-      <button [kbqDropdownTriggerFor]="dropdown"></button>`);
-}
-/**
- * Throws an exception for the case when dropdown's x-position value isn't valid.
- * In other words, it doesn't match 'before' or 'after'.
- * @docs-private
- */
-function throwKbqDropdownInvalidPositionX() {
-    throw Error(`xPosition value must be either 'before' or after'.
-      Example: <kbq-dropdown [xPosition]="'before'" #dropdown="kbqDropdown"></kbq-dropdown>`);
-}
-/**
- * Throws an exception for the case when dropdown's y-position value isn't valid.
- * In other words, it doesn't match 'above' or 'below'.
- * @docs-private
- */
-function throwKbqDropdownInvalidPositionY() {
-    throw Error(`yPosition value must be either 'above' or below'.
-      Example: <kbq-dropdown [yPosition]="'above'" #dropdown="kbqDropdown"></kbq-dropdown>`);
-}
-
-/**
- * Animations used by the kbq-dropdown component.
- * @docs-private
- */
-const kbqDropdownAnimations = {
-    /**
-     * This animation controls the dropdown panel's entry and exit from the page.
-     *
-     * When the dropdown panel is added to the DOM, it scales in and fades in its border.
-     *
-     * When the dropdown panel is removed from the DOM, it simply fades out after a brief
-     * delay to display the ripple.
-     */
-    transformDropdown: trigger('transformDropdown', [
-        state('void', style({
-            opacity: 0,
-            transform: 'scale(0.8)'
-        })),
-        transition('void => enter', group([
-            query('.kbq-dropdown__content', animate('0ms linear', style({ opacity: 1 }))),
-            animate('0ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' }))
-        ])),
-        transition('* => void', animate('50ms 25ms linear', style({ opacity: 0 })))
-    ]),
-    /**
-     * This animation fades in the background color and content of the dropdown panel
-     * after its containing element is scaled in.
-     */
-    fadeInItems: trigger('fadeInItems', [
-        // now. Remove next time we do breaking changes.
-        state('showing', style({ opacity: 1 })),
-        transition('void => *', [
-            style({ opacity: 0 }),
-            animate('0ms 0ms cubic-bezier(0.55, 0, 0.55, 0.2)')
-        ])
-    ])
-};
-const fadeInItems = kbqDropdownAnimations.fadeInItems;
-const transformDropdown = kbqDropdownAnimations.transformDropdown;
-
 class KbqDropdown {
     /** Position of the dropdown in the X axis. */
     get xPosition() {
@@ -360,15 +356,11 @@ class KbqDropdown {
     set panelClass(classes) {
         const previousPanelClass = this.previousPanelClass;
         if (previousPanelClass && previousPanelClass.length) {
-            previousPanelClass
-                .split(' ')
-                .forEach((className) => this.classList[className] = false);
+            previousPanelClass.split(' ').forEach((className) => (this.classList[className] = false));
         }
         this.previousPanelClass = classes;
         if (classes?.length) {
-            classes
-                .split(' ')
-                .forEach((className) => this.classList[className] = true);
+            classes.split(' ').forEach((className) => (this.classList[className] = true));
             this.elementRef.nativeElement.className = '';
         }
     }
@@ -403,13 +395,11 @@ class KbqDropdown {
     }
     ngAfterContentInit() {
         this.updateDirectDescendants();
-        this.keyManager = new FocusKeyManager(this.directDescendantItems)
-            .withTypeAhead();
+        this.keyManager = new FocusKeyManager(this.directDescendantItems).withTypeAhead();
         if (this.navigationWithWrap) {
             this.keyManager.withWrap();
         }
-        this.tabSubscription = this.keyManager.tabOut
-            .subscribe(() => this.closed.emit('tab'));
+        this.tabSubscription = this.keyManager.tabOut.subscribe(() => this.closed.emit('tab'));
         // If a user manually (programmatically) focuses a menu item, we need to reflect that focus
         // change back to the key manager. Note that we don't need to unsubscribe here because focused
         // is internal and we know that it gets completed on destroy.
@@ -429,7 +419,6 @@ class KbqDropdown {
     }
     /** Handle a keyboard event from the dropdown, delegating to the appropriate action. */
     handleKeydown(event) {
-        // tslint:disable-next-line:deprecation
         const keyCode = event.keyCode;
         switch (keyCode) {
             case ESCAPE:
@@ -529,9 +518,7 @@ class KbqDropdown {
      * when it comes to maintaining the item order.
      */
     updateDirectDescendants() {
-        this.items.changes
-            .pipe(startWith(this.items))
-            .subscribe((items) => {
+        this.items.changes.pipe(startWith(this.items)).subscribe((items) => {
             this.directDescendantItems.reset(items.filter((item) => item.parentDropdownPanel === this));
             this.directDescendantItems.notifyOnChanges();
         });
@@ -539,7 +526,7 @@ class KbqDropdown {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDropdown, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: KBQ_DROPDOWN_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqDropdown, selector: "kbq-dropdown", inputs: { navigationWithWrap: "navigationWithWrap", xPosition: "xPosition", yPosition: "yPosition", overlapTriggerY: "overlapTriggerY", overlapTriggerX: "overlapTriggerX", hasBackdrop: "hasBackdrop", panelClass: ["class", "panelClass"], backdropClass: "backdropClass" }, outputs: { closed: "closed" }, providers: [
             { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
-        ], queries: [{ propertyName: "lazyContent", first: true, predicate: KbqDropdownContent, descendants: true }, { propertyName: "items", predicate: KbqDropdownItem, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["kbqDropdown"], ngImport: i0, template: "<ng-template>\n    <div class=\"kbq-dropdown__panel\"\n         [ngClass]=\"classList\"\n         [class.kbq-dropdown__panel_nested]=\"parent\"\n         [style.min-width]=\"triggerWidth\"\n         (keydown)=\"handleKeydown($event)\"\n         (click)=\"close()\"\n         [@transformDropdown]=\"panelAnimationState\"\n         (@transformDropdown.start)=\"onAnimationStart($event)\"\n         (@transformDropdown.done)=\"onAnimationDone($event)\"\n         tabindex=\"-1\">\n\n        <div class=\"kbq-dropdown__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:2px}.kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:2px}.kbq-dropdown-trigger__icon{margin-left:auto}.kbq-dropdown__panel{margin-top:2px;min-width:var(--kbq-dropdown-size-container-width-min, 64px);max-width:var(--kbq-dropdown-size-container-width-max, 640px);border-radius:var(--kbq-dropdown-size-container-border-radius, 8px);padding-top:var(--kbq-dropdown-size-container-padding-vertical, 4px);padding-bottom:var(--kbq-dropdown-size-container-padding-vertical, 4px)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__content{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        ], queries: [{ propertyName: "lazyContent", first: true, predicate: KbqDropdownContent, descendants: true }, { propertyName: "items", predicate: KbqDropdownItem, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["kbqDropdown"], ngImport: i0, template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [ngClass]=\"classList\"\n        [style.min-width]=\"triggerWidth\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n        [@transformDropdown]=\"panelAnimationState\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n    </div>\n</ng-template>\n", styles: [".kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:2px}.kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:2px}.kbq-dropdown-trigger__icon{margin-left:auto}.kbq-dropdown__panel{margin-top:2px;min-width:var(--kbq-dropdown-size-container-width-min, 64px);max-width:var(--kbq-dropdown-size-container-width-max, 640px);border-radius:var(--kbq-dropdown-size-container-border-radius, 8px);padding-top:var(--kbq-dropdown-size-container-padding-vertical, 4px);padding-bottom:var(--kbq-dropdown-size-container-padding-vertical, 4px)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__content{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             kbqDropdownAnimations.transformDropdown,
             kbqDropdownAnimations.fadeInItems
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -551,7 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         kbqDropdownAnimations.fadeInItems
                     ], providers: [
                         { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
-                    ], template: "<ng-template>\n    <div class=\"kbq-dropdown__panel\"\n         [ngClass]=\"classList\"\n         [class.kbq-dropdown__panel_nested]=\"parent\"\n         [style.min-width]=\"triggerWidth\"\n         (keydown)=\"handleKeydown($event)\"\n         (click)=\"close()\"\n         [@transformDropdown]=\"panelAnimationState\"\n         (@transformDropdown.start)=\"onAnimationStart($event)\"\n         (@transformDropdown.done)=\"onAnimationDone($event)\"\n         tabindex=\"-1\">\n\n        <div class=\"kbq-dropdown__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:2px}.kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:2px}.kbq-dropdown-trigger__icon{margin-left:auto}.kbq-dropdown__panel{margin-top:2px;min-width:var(--kbq-dropdown-size-container-width-min, 64px);max-width:var(--kbq-dropdown-size-container-width-max, 640px);border-radius:var(--kbq-dropdown-size-container-border-radius, 8px);padding-top:var(--kbq-dropdown-size-container-padding-vertical, 4px);padding-bottom:var(--kbq-dropdown-size-container-padding-vertical, 4px)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__content{display:flex;flex-direction:column}\n"] }]
+                    ], template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [ngClass]=\"classList\"\n        [style.min-width]=\"triggerWidth\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n        [@transformDropdown]=\"panelAnimationState\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n    </div>\n</ng-template>\n", styles: [".kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:2px}.kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:2px}.kbq-dropdown-trigger__icon{margin-left:auto}.kbq-dropdown__panel{margin-top:2px;min-width:var(--kbq-dropdown-size-container-width-min, 64px);max-width:var(--kbq-dropdown-size-container-width-max, 640px);border-radius:var(--kbq-dropdown-size-container-border-radius, 8px);padding-top:var(--kbq-dropdown-size-container-padding-vertical, 4px);padding-bottom:var(--kbq-dropdown-size-container-padding-vertical, 4px)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__content{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_DROPDOWN_DEFAULT_OPTIONS]
@@ -588,7 +575,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
 /** Injection token that determines the scroll handling while the dropdown is open. */
 const KBQ_DROPDOWN_SCROLL_STRATEGY = new InjectionToken('kbq-dropdown-scroll-strategy');
 /** @docs-private */
-// tslint:disable-next-line:naming-convention
 function KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
 }
@@ -619,9 +605,7 @@ class KbqDropdownTrigger {
         this._dropdown = dropdown;
         this.closeSubscription.unsubscribe();
         if (dropdown) {
-            this.closeSubscription = dropdown.closed
-                .asObservable()
-                .subscribe((reason) => {
+            this.closeSubscription = dropdown.closed.asObservable().subscribe((reason) => {
                 this.destroy(reason);
                 // If a click closed the dropdown, we should close the entire chain of nested dropdowns.
                 if (['click', 'tab'].includes(reason) && this.parent) {
@@ -667,7 +651,7 @@ class KbqDropdownTrigger {
          * Handles touch start events on the trigger.
          * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
          */
-        this.handleTouchStart = () => this.openedBy = 'touch';
+        this.handleTouchStart = () => (this.openedBy = 'touch');
         elementRef.nativeElement.addEventListener('touchstart', this.handleTouchStart, passiveEventListenerOptions);
         if (dropdownItemInstance) {
             dropdownItemInstance.isNested = this.isNested();
@@ -691,7 +675,6 @@ class KbqDropdownTrigger {
     }
     /** Toggles the dropdown between the open and closed states. */
     toggle() {
-        // tslint:disable-next-line:no-void-expression
         return this._opened ? this.close() : this.open();
     }
     /** Opens the dropdown. */
@@ -709,8 +692,7 @@ class KbqDropdownTrigger {
             this.dropdown.lazyContent.detach();
             this.dropdown.lazyContent.attach(this.data);
         }
-        this.closeSubscription = this.closingActions()
-            .subscribe(() => this.close());
+        this.closeSubscription = this.closingActions().subscribe(() => this.close());
         this.init();
         if (this.dropdown instanceof KbqDropdown) {
             this.dropdown.startAnimation();
@@ -745,7 +727,6 @@ class KbqDropdownTrigger {
     }
     /** Handles key presses on the trigger. */
     handleKeydown(event) {
-        // tslint:disable-next-line:deprecation
         const keyCode = event.keyCode;
         if (keyCode === ENTER || keyCode === SPACE) {
             this.openedBy = 'keyboard';
@@ -761,7 +742,7 @@ class KbqDropdownTrigger {
         }
         if ((this.isNested() &&
             ((keyCode === RIGHT_ARROW && this.dir === 'ltr') || (keyCode === LEFT_ARROW && this.dir === 'rtl'))) ||
-            (!this.isNested() && (keyCode === DOWN_ARROW$1 && this.openByArrowDown))) {
+            (!this.isNested() && keyCode === DOWN_ARROW$1 && this.openByArrowDown)) {
             event.preventDefault();
             this.openedBy = 'keyboard';
             this.open();
@@ -793,8 +774,7 @@ class KbqDropdownTrigger {
         this.openedBy = undefined;
         if (this.dropdown instanceof KbqDropdown) {
             this.dropdown.resetAnimation();
-            const animationSubscription = this.dropdown.animationDone
-                .pipe(filter((event) => event.toState === 'void'), take(1));
+            const animationSubscription = this.dropdown.animationDone.pipe(filter((event) => event.toState === 'void'), take(1));
             if (this.dropdown.lazyContent) {
                 // Wait for the exit animation to finish before detaching the content.
                 animationSubscription
@@ -808,8 +788,7 @@ class KbqDropdownTrigger {
                 });
             }
             else {
-                animationSubscription
-                    .subscribe(() => this.setIsOpened(false));
+                animationSubscription.subscribe(() => this.setIsOpened(false));
             }
         }
         else {
@@ -839,7 +818,6 @@ class KbqDropdownTrigger {
             this.changeDetectorRef.markForCheck();
         }
         this._opened = isOpen;
-        // tslint:disable-next-line:no-void-expression
         this._opened ? this.dropdownOpened.emit() : this.dropdownClosed.emit();
         if (this.isNested()) {
             this.dropdownItemInstance.highlighted = isOpen;
@@ -866,8 +844,7 @@ class KbqDropdownTrigger {
             // Consume the `keydownEvents` in order to prevent them from going to another overlay.
             // Ideally we'd also have our keyboard event logic in here, however doing so will
             // break anybody that may have implemented the `KbqDropdownPanel` themselves.
-            this.overlayRef.keydownEvents()
-                .subscribe();
+            this.overlayRef.keydownEvents().subscribe();
         }
         return this.overlayRef;
     }
@@ -877,7 +854,8 @@ class KbqDropdownTrigger {
      */
     getOverlayConfig() {
         return new OverlayConfig({
-            positionStrategy: this.overlay.position()
+            positionStrategy: this.overlay
+                .position()
                 .flexibleConnectedTo(this.elementRef)
                 .withLockedPosition()
                 .withTransformOriginOn('.kbq-dropdown__panel'),
@@ -893,8 +871,7 @@ class KbqDropdownTrigger {
      */
     subscribeToPositions(position) {
         if (this.dropdown.setPositionClasses) {
-            position.positionChanges
-                .subscribe((change) => {
+            position.positionChanges.subscribe((change) => {
                 const posX = change.connectionPair.overlayX === 'start' ? 'after' : 'before';
                 const posY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
                 this.dropdown.setPositionClasses(posX, posY);
@@ -907,13 +884,11 @@ class KbqDropdownTrigger {
      * @param positionStrategy Strategy whose position to update.
      */
     setPosition(positionStrategy) {
-        let [originX, originFallbackX, overlayX, overlayFallbackX] = this.dropdown.xPosition === 'before' ?
-            ['end', 'start', 'end', 'start'] :
-            ['start', 'end', 'start', 'end'];
-        // tslint:disable-next-line:prefer-const
-        let [overlayY, overlayFallbackY, originY, originFallbackY] = this.dropdown.yPosition === 'above' ?
-            ['bottom', 'top', 'bottom', 'top'] :
-            ['top', 'bottom', 'top', 'bottom'];
+        let [originX, originFallbackX, overlayX, overlayFallbackX] = this.dropdown.xPosition === 'before' ? ['end', 'start', 'end', 'start'] : ['start', 'end', 'start', 'end'];
+        // eslint-disable-next-line prefer-const
+        let [overlayY, overlayFallbackY, originY, originFallbackY] = this.dropdown.yPosition === 'above'
+            ? ['bottom', 'top', 'bottom', 'top']
+            : ['top', 'bottom', 'top', 'bottom'];
         let offsetY = 0;
         let offsetX = 0;
         if (this.isNested()) {
@@ -966,8 +941,9 @@ class KbqDropdownTrigger {
         const outsidePointerEvents = this.overlayRef.outsidePointerEvents();
         const detachments = this.overlayRef.detachments();
         const parentClose = this.parent ? this.parent.closed : of();
-        const hover = this.parent ? this.parent.hovered()
-            .pipe(filter((active) => active !== this.dropdownItemInstance), filter(() => this._opened)) : of();
+        const hover = this.parent
+            ? this.parent.hovered().pipe(filter((active) => active !== this.dropdownItemInstance), filter(() => this._opened))
+            : of();
         return merge(backdrop, outsidePointerEvents, parentClose, hover, detachments);
     }
     /** Handles the cases where the user hovers over the trigger. */
@@ -976,7 +952,8 @@ class KbqDropdownTrigger {
         if (!this.isNested()) {
             return;
         }
-        this.hoverSubscription = this.parent.hovered()
+        this.hoverSubscription = this.parent
+            .hovered()
             // Since we might have multiple competing triggers for the same dropdown (e.g. a nested dropdown
             // with different data and triggers), we have to delay it by a tick to ensure that
             // it won't be closed immediately after it is opened.
@@ -991,6 +968,7 @@ class KbqDropdownTrigger {
                 // 'changed after checked' errors in some cases. See #12194.
                 this.dropdown.animationDone
                     .pipe(take(1), delay(0, asapScheduler), takeUntil(this.parent.hovered()))
+                    // eslint-disable-next-line rxjs/no-nested-subscribe
                     .subscribe(() => this.open());
             }
             else {