@koobiq/components 16.0.0-beta.1

package/fesm2022/koobiq-components-toggle.mjs

@@ -0,0 +1,182 @@
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, Output, NgModule } from '@angular/core';
+import { mixinTabIndex, mixinColor, mixinDisabled, KbqComponentColors, KbqCommonModule } from '@koobiq/components/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+let nextUniqueId = 0;
+/** @docs-private */
+class KbqToggleBase {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+/** @docs-private */
+const KbqToggleMixinBase = mixinTabIndex(mixinColor(mixinDisabled(KbqToggleBase), KbqComponentColors.Theme));
+class KbqToggleChange {
+}
+class KbqToggleComponent extends KbqToggleMixinBase {
+    get inputId() {
+        return `${this.id || this.uniqueId}-input`;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (value !== this._disabled) {
+            this._disabled = value;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        if (value !== this._checked) {
+            this._checked = value;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    constructor(elementRef, _focusMonitor, _changeDetectorRef) {
+        super(elementRef);
+        this.elementRef = elementRef;
+        this._focusMonitor = _focusMonitor;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.big = false;
+        this.labelPosition = 'right';
+        this.ariaLabel = '';
+        this.ariaLabelledby = null;
+        this.name = null;
+        this._disabled = false;
+        this._checked = false;
+        this.change = new EventEmitter();
+        this.uniqueId = `kbq-toggle-${++nextUniqueId}`;
+        // tslint:disable-next-line:no-empty
+        this.onTouchedCallback = () => { };
+        // tslint:disable-next-line:no-empty
+        this.onChangeCallback = (_) => { };
+        this.id = this.uniqueId;
+        this._focusMonitor.monitor(this.elementRef.nativeElement, true);
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    focus() {
+        this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');
+    }
+    getAriaChecked() {
+        return this.checked;
+    }
+    onChangeEvent(event) {
+        event.stopPropagation();
+        this.updateModelValue();
+        this.emitChangeEvent();
+    }
+    onLabelTextChange() {
+        this._changeDetectorRef.markForCheck();
+    }
+    onInputClick(event) {
+        event.stopPropagation();
+    }
+    writeValue(value) {
+        this.checked = !!value;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    updateModelValue() {
+        this._checked = !this.checked;
+        this.onTouchedCallback();
+    }
+    emitChangeEvent() {
+        const event = new KbqToggleChange();
+        event.source = this;
+        event.checked = this.checked;
+        this.onChangeCallback(this.checked);
+        this.change.emit(event);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToggleComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqToggleComponent, selector: "kbq-toggle", inputs: { color: "color", tabIndex: "tabIndex", big: "big", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], id: "id", name: "name", value: "value", disabled: "disabled", checked: "checked" }, outputs: { change: "change" }, host: { properties: { "class.kbq-toggle_big": "big", "id": "id", "attr.id": "id", "class.kbq-disabled": "disabled", "class.kbq-active": "checked" }, classAttribute: "kbq-toggle" }, providers: [{
+                provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => KbqToggleComponent)), multi: true
+            }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["mcToggle"], usesInheritance: true, ngImport: i0, template: "<label\n    [attr.for]=\"inputId\"\n    class=\"kbq-toggle-layout\"\n    [class.left]=\"labelPosition === 'left'\">\n\n    <input #input\n           type=\"checkbox\"\n           role=\"switch\"\n           class=\"kbq-toggle-input cdk-visually-hidden\"\n           [id]=\"inputId\"\n           [checked]=\"checked\"\n           [attr.value]=\"value\"\n           [disabled]=\"disabled\"\n           [attr.name]=\"name\"\n           [tabIndex]=\"tabIndex\"\n           [attr.aria-label]=\"ariaLabel || null\"\n           [attr.aria-labelledby]=\"ariaLabelledby\"\n           [attr.aria-checked]=\"getAriaChecked()\"\n           (click)=\"onInputClick($event)\"\n           (change)=\"onChangeEvent($event)\"/>\n    <div class=\"kbq-toggle-bar\">\n        <div class=\"kbq-toggle__circle\" [@switch]=\"checked\"></div>\n    </div>\n\n    <div class=\"kbq-toggle__content\"\n         [class.left]=\"labelPosition === 'left'\"\n         [class.right]=\"labelPosition === 'right'\">\n        <span class=\"kbq-toggle-label\" (cdkObserveContent)=\"onLabelTextChange()\">\n            <ng-content></ng-content>\n        </span>\n\n        <ng-content select=\"kbq-hint\"></ng-content>\n    </div>\n</label>\n", styles: [".kbq-toggle{display:inline-block}.kbq-toggle .kbq-toggle__circle{position:absolute;border-radius:50%;transform:translate(-1px);height:10px;width:10px}.kbq-toggle .kbq-toggle-layout{display:flex;flex-direction:row;align-items:flex-start;cursor:inherit}.kbq-toggle .kbq-toggle-layout.left{flex-direction:row-reverse}.kbq-toggle .kbq-toggle-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-style:solid;border-radius:8px;height:var(--kbq-toggle-size-normal-height, 16px);width:var(--kbq-toggle-size-normal-width, 28px)}.kbq-toggle .kbq-hint{margin-top:var(--kbq-toggle-size-normal-vertical-content-padding, 8px)}.kbq-toggle__content{display:flex;flex-direction:column;flex:1}.kbq-toggle__content.left{margin-right:var(--kbq-toggle-size-normal-horizontal-content-padding, 8px)}.kbq-toggle__content.right{margin-left:var(--kbq-toggle-size-normal-horizontal-content-padding, 8px)}.kbq-toggle.kbq-toggle_big .kbq-toggle-bar{margin-top:2px;height:var(--kbq-toggle-size-big-height, 16px);width:var(--kbq-toggle-size-big-width, 28px)}.kbq-toggle.kbq-toggle_big .kbq-hint{margin-top:var(--kbq-toggle-size-big-vertical-content-padding, 8px)}.kbq-toggle:not(.kbq-disabled){cursor:pointer}\n"], animations: [
+            trigger('switch', [
+                state('true', style({ left: 'calc(100% - 11px)' })),
+                state('false', style({ left: '3px' })),
+                transition('true <=> false', animate('150ms'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-toggle', exportAs: 'mcToggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'tabIndex'], host: {
+                        class: 'kbq-toggle',
+                        '[class.kbq-toggle_big]': 'big',
+                        '[id]': 'id',
+                        '[attr.id]': 'id',
+                        '[class.kbq-disabled]': 'disabled',
+                        '[class.kbq-active]': 'checked'
+                    }, animations: [
+                        trigger('switch', [
+                            state('true', style({ left: 'calc(100% - 11px)' })),
+                            state('false', style({ left: '3px' })),
+                            transition('true <=> false', animate('150ms'))
+                        ])
+                    ], providers: [{
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => KbqToggleComponent)), multi: true
+                        }], template: "<label\n    [attr.for]=\"inputId\"\n    class=\"kbq-toggle-layout\"\n    [class.left]=\"labelPosition === 'left'\">\n\n    <input #input\n           type=\"checkbox\"\n           role=\"switch\"\n           class=\"kbq-toggle-input cdk-visually-hidden\"\n           [id]=\"inputId\"\n           [checked]=\"checked\"\n           [attr.value]=\"value\"\n           [disabled]=\"disabled\"\n           [attr.name]=\"name\"\n           [tabIndex]=\"tabIndex\"\n           [attr.aria-label]=\"ariaLabel || null\"\n           [attr.aria-labelledby]=\"ariaLabelledby\"\n           [attr.aria-checked]=\"getAriaChecked()\"\n           (click)=\"onInputClick($event)\"\n           (change)=\"onChangeEvent($event)\"/>\n    <div class=\"kbq-toggle-bar\">\n        <div class=\"kbq-toggle__circle\" [@switch]=\"checked\"></div>\n    </div>\n\n    <div class=\"kbq-toggle__content\"\n         [class.left]=\"labelPosition === 'left'\"\n         [class.right]=\"labelPosition === 'right'\">\n        <span class=\"kbq-toggle-label\" (cdkObserveContent)=\"onLabelTextChange()\">\n            <ng-content></ng-content>\n        </span>\n\n        <ng-content select=\"kbq-hint\"></ng-content>\n    </div>\n</label>\n", styles: [".kbq-toggle{display:inline-block}.kbq-toggle .kbq-toggle__circle{position:absolute;border-radius:50%;transform:translate(-1px);height:10px;width:10px}.kbq-toggle .kbq-toggle-layout{display:flex;flex-direction:row;align-items:flex-start;cursor:inherit}.kbq-toggle .kbq-toggle-layout.left{flex-direction:row-reverse}.kbq-toggle .kbq-toggle-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-style:solid;border-radius:8px;height:var(--kbq-toggle-size-normal-height, 16px);width:var(--kbq-toggle-size-normal-width, 28px)}.kbq-toggle .kbq-hint{margin-top:var(--kbq-toggle-size-normal-vertical-content-padding, 8px)}.kbq-toggle__content{display:flex;flex-direction:column;flex:1}.kbq-toggle__content.left{margin-right:var(--kbq-toggle-size-normal-horizontal-content-padding, 8px)}.kbq-toggle__content.right{margin-left:var(--kbq-toggle-size-normal-horizontal-content-padding, 8px)}.kbq-toggle.kbq-toggle_big .kbq-toggle-bar{margin-top:2px;height:var(--kbq-toggle-size-big-height, 16px);width:var(--kbq-toggle-size-big-width, 28px)}.kbq-toggle.kbq-toggle_big .kbq-hint{margin-top:var(--kbq-toggle-size-big-vertical-content-padding, 8px)}.kbq-toggle:not(.kbq-disabled){cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { big: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], labelPosition: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class KbqToggleModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqToggleModule, declarations: [KbqToggleComponent], imports: [CommonModule, A11yModule, KbqCommonModule], exports: [KbqToggleComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToggleModule, imports: [CommonModule, A11yModule, KbqCommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, A11yModule, KbqCommonModule],
+                    exports: [KbqToggleComponent],
+                    declarations: [KbqToggleComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqToggleBase, KbqToggleChange, KbqToggleComponent, KbqToggleMixinBase, KbqToggleModule };
+//# sourceMappingURL=koobiq-components-toggle.mjs.map

package/fesm2022/koobiq-components-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koobiq-components-toggle.mjs","sources":["../../../packages/components/toggle/toggle.component.ts","../../../packages/components/toggle/toggle.component.html","../../../packages/components/toggle/toggle.module.ts","../../../packages/components/toggle/koobiq-components-toggle.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n    CanColor,\n    CanColorCtor,\n    CanDisable,\n    CanDisableCtor,\n    HasTabIndex,\n    HasTabIndexCtor,\n    mixinColor,\n    mixinDisabled,\n    mixinTabIndex,\n    KbqComponentColors\n} from '@koobiq/components/core';\n\n\nlet nextUniqueId = 0;\n\ntype ToggleLabelPositionType = 'left' | 'right';\n\n/** @docs-private */\nexport class KbqToggleBase {\n    constructor(public elementRef: ElementRef) {}\n}\n\n/** @docs-private */\nexport const KbqToggleMixinBase:\n    HasTabIndexCtor &\n    CanDisableCtor &\n    CanColorCtor &\n    typeof KbqToggleBase = mixinTabIndex(mixinColor(mixinDisabled(KbqToggleBase), KbqComponentColors.Theme));\n\nexport class KbqToggleChange {\n    source: KbqToggleComponent;\n    checked: boolean;\n}\n\n@Component({\n    selector: 'kbq-toggle',\n    exportAs: 'mcToggle',\n    templateUrl: './toggle.component.html',\n    styleUrls: ['./toggle.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    inputs: ['color', 'tabIndex'],\n    host: {\n        class: 'kbq-toggle',\n        '[class.kbq-toggle_big]': 'big',\n        '[id]': 'id',\n        '[attr.id]': 'id',\n        '[class.kbq-disabled]': 'disabled',\n        '[class.kbq-active]': 'checked'\n    },\n    animations: [\n        trigger('switch', [\n            state('true' , style({ left: 'calc(100% - 11px)' })),\n            state('false', style({ left: '3px' })),\n            transition('true <=> false', animate('150ms'))\n        ])\n    ],\n    providers: [{\n        provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => KbqToggleComponent), multi: true\n    }]\n})\nexport class KbqToggleComponent extends KbqToggleMixinBase\n    implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex {\n\n    @Input() big: boolean = false;\n\n    @ViewChild('input', { static: false }) inputElement: ElementRef;\n\n    @Input() labelPosition: ToggleLabelPositionType = 'right';\n\n    @Input('aria-label') ariaLabel: string = '';\n    @Input('aria-labelledby') ariaLabelledby: string | null = null;\n\n    @Input() id: string;\n\n    get inputId(): string {\n        return `${this.id || this.uniqueId}-input`;\n    }\n\n    @Input() name: string | null = null;\n\n    @Input() value: string;\n\n    @Input()\n    get disabled() {\n        return this._disabled;\n    }\n\n    set disabled(value: any) {\n        if (value !== this._disabled) {\n            this._disabled = value;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _disabled: boolean = false;\n\n    get checked() {\n        return this._checked;\n    }\n\n    @Input()\n    set checked(value: boolean) {\n        if (value !== this._checked) {\n            this._checked = value;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _checked: boolean = false;\n\n    @Output() readonly change: EventEmitter<KbqToggleChange> = new EventEmitter<KbqToggleChange>();\n\n    private uniqueId: string = `kbq-toggle-${++nextUniqueId}`;\n\n    constructor(\n        public elementRef: ElementRef,\n        private _focusMonitor: FocusMonitor,\n        private _changeDetectorRef: ChangeDetectorRef\n    ) {\n        super(elementRef);\n\n        this.id =  this.uniqueId;\n\n        this._focusMonitor.monitor(this.elementRef.nativeElement, true);\n    }\n\n    ngOnDestroy() {\n        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n    }\n\n    focus(): void {\n        this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');\n    }\n\n    getAriaChecked(): boolean {\n        return this.checked;\n    }\n\n    onChangeEvent(event: Event) {\n        event.stopPropagation();\n\n        this.updateModelValue();\n        this.emitChangeEvent();\n    }\n\n    onLabelTextChange() {\n        this._changeDetectorRef.markForCheck();\n    }\n\n    onInputClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    writeValue(value: any) {\n        this.checked = !!value;\n    }\n\n    registerOnChange(fn: any) {\n        this.onChangeCallback = fn;\n    }\n\n    registerOnTouched(fn: any) {\n        this.onTouchedCallback = fn;\n    }\n\n    setDisabledState(isDisabled: boolean) {\n        this.disabled = isDisabled;\n    }\n\n    // tslint:disable-next-line:no-empty\n    private onTouchedCallback = () => {};\n\n    // tslint:disable-next-line:no-empty\n    private onChangeCallback = (_: any) => {};\n\n    private updateModelValue() {\n        this._checked = !this.checked;\n        this.onTouchedCallback();\n    }\n\n    private emitChangeEvent() {\n        const event = new KbqToggleChange();\n        event.source = this;\n        event.checked = this.checked;\n\n        this.onChangeCallback(this.checked);\n        this.change.emit(event);\n    }\n}\n","<label\n    [attr.for]=\"inputId\"\n    class=\"kbq-toggle-layout\"\n    [class.left]=\"labelPosition === 'left'\">\n\n    <input #input\n           type=\"checkbox\"\n           role=\"switch\"\n           class=\"kbq-toggle-input cdk-visually-hidden\"\n           [id]=\"inputId\"\n           [checked]=\"checked\"\n           [attr.value]=\"value\"\n           [disabled]=\"disabled\"\n           [attr.name]=\"name\"\n           [tabIndex]=\"tabIndex\"\n           [attr.aria-label]=\"ariaLabel || null\"\n           [attr.aria-labelledby]=\"ariaLabelledby\"\n           [attr.aria-checked]=\"getAriaChecked()\"\n           (click)=\"onInputClick($event)\"\n           (change)=\"onChangeEvent($event)\"/>\n    <div class=\"kbq-toggle-bar\">\n        <div class=\"kbq-toggle__circle\" [@switch]=\"checked\"></div>\n    </div>\n\n    <div class=\"kbq-toggle__content\"\n         [class.left]=\"labelPosition === 'left'\"\n         [class.right]=\"labelPosition === 'right'\">\n        <span class=\"kbq-toggle-label\" (cdkObserveContent)=\"onLabelTextChange()\">\n            <ng-content></ng-content>\n        </span>\n\n        <ng-content select=\"kbq-hint\"></ng-content>\n    </div>\n</label>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { KbqCommonModule } from '@koobiq/components/core';\n\nimport { KbqToggleComponent } from './toggle.component';\n\n\n@NgModule({\n    imports: [CommonModule, A11yModule, KbqCommonModule],\n    exports: [KbqToggleComponent],\n    declarations: [KbqToggleComponent]\n})\nexport class KbqToggleModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-tooltip.mjs

@@ -0,0 +1,370 @@
+import * as i2 from '@angular/cdk/overlay';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, EventEmitter, Directive, Optional, Input, Output, NgModule } from '@angular/core';
+import * as i3 from '@angular/cdk/bidi';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { KbqPopUp, KbqPopUpTrigger, PopUpTriggers, KbqComponentColors, POSITION_TO_CSS_MAP } from '@koobiq/components/core';
+import { merge, EMPTY } from 'rxjs';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+
+/**
+ * Animations used by KbqTooltip.
+ * @docs-private
+ */
+const mcTooltipAnimations = {
+    /** Animation that transitions a tooltip in and out. */
+    tooltipState: trigger('state', [
+        state('initial, void, hidden', style({ opacity: 0, transform: 'scale(0)' })),
+        state('visible', style({ transform: 'scale(0.99)' })),
+        transition('* => visible', animate('200ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+            style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
+            style({ opacity: 0.5, transform: 'scale(0.9)', offset: 0.5 }),
+            style({ opacity: 1, transform: 'scale(0.99)', offset: 1 })
+        ]))),
+        transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0 })))
+    ])
+};
+
+var TooltipModifier;
+(function (TooltipModifier) {
+    TooltipModifier["Default"] = "default";
+    TooltipModifier["Warning"] = "warning";
+    TooltipModifier["Extended"] = "extended";
+})(TooltipModifier || (TooltipModifier = {}));
+const KBQ_TOOLTIP_OPEN_TIME = new InjectionToken('kbq-tooltip-open-time');
+/** @docs-private */
+const KBQ_TOOLTIP_OPEN_TIME_PROVIDER = {
+    provide: KBQ_TOOLTIP_OPEN_TIME,
+    useValue: { value: 0 }
+};
+const MIN_TIME_FOR_DELAY = 2000;
+class KbqTooltipComponent extends KbqPopUp {
+    constructor(changeDetectorRef, openTime) {
+        super(changeDetectorRef);
+        this.openTime = openTime;
+        this.prefix = 'kbq-tooltip';
+    }
+    show(delay) {
+        if (!this.content) {
+            return;
+        }
+        // tslint:disable-next-line:no-magic-numbers
+        super.show(Date.now() - this.openTime.value < MIN_TIME_FOR_DELAY ? 0 : delay);
+        this.openTime.value = Date.now();
+    }
+    updateClassMap(placement, customClass, { modifier }) {
+        const classMap = {
+            [`${this.prefix}_${modifier}`]: true
+        };
+        super.updateClassMap(placement, customClass, classMap);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: KBQ_TOOLTIP_OPEN_TIME }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTooltipComponent, selector: "kbq-tooltip-component", providers: [KBQ_TOOLTIP_OPEN_TIME_PROVIDER], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tooltip\"\n     [ngClass]=\"classMap\"\n     [@state]=\"visibility\"\n     (@state.start)=\"animationStart()\"\n     (@state.done)=\"animationDone($event)\">\n\n    <div class=\"kbq-tooltip__inner\">\n        <div class=\"kbq-tooltip__arrow\"></div>\n\n        <div class=\"kbq-tooltip__header\" *ngIf=\"header\">\n            <ng-container *ngIf=\"isTemplateRef(header)\" [ngTemplateOutlet]=\"$any(header)\"></ng-container>\n            <ng-container *ngIf=\"!isTemplateRef(header)\">\n                <div>{{ header }}</div>\n            </ng-container>\n        </div>\n        <div class=\"kbq-tooltip__content\">\n            <ng-container *ngIf=\"isTemplateRef(content)\" [ngTemplateOutlet]=\"$any(content)\"></ng-container>\n            <ng-container *ngIf=\"!isTemplateRef(content)\">\n                <div>{{ content }}</div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [".kbq-tooltip__inner{border-radius:var(--kbq-tooltip-size-border-radius, 8px);word-break:break-word}.kbq-tooltip{box-sizing:border-box;border-radius:var(--kbq-tooltip-size-border-radius, 8px);z-index:1060;white-space:pre-line;max-width:var(--kbq-tooltip-size-max-width, 300px)}.kbq-tooltip.kbq-tooltip_placement-top,.kbq-tooltip.kbq-tooltip_placement-top-left,.kbq-tooltip.kbq-tooltip_placement-top-right{margin-bottom:8px}.kbq-tooltip.kbq-tooltip_placement-right,.kbq-tooltip.kbq-tooltip_placement-right-top,.kbq-tooltip.kbq-tooltip_placement-right-bottom{margin-left:8px}.kbq-tooltip.kbq-tooltip_placement-bottom,.kbq-tooltip.kbq-tooltip_placement-bottom-left,.kbq-tooltip.kbq-tooltip_placement-bottom-right{margin-top:8px}.kbq-tooltip.kbq-tooltip_placement-left,.kbq-tooltip.kbq-tooltip_placement-left-top,.kbq-tooltip.kbq-tooltip_placement-left-bottom{margin-right:8px}.kbq-tooltip .kbq-tooltip__inner{padding:var(--kbq-tooltip-size-padding-vertical, 8px) var(--kbq-tooltip-size-padding-horizontal, 16px)}.kbq-tooltip__arrow{position:absolute;width:var(--kbq-tooltip-size-arrow-size, 12px);height:var(--kbq-tooltip-size-arrow-size, 12px);transform:rotate(45deg);z-index:-1}.kbq-tooltip_placement-top .kbq-tooltip__arrow{bottom:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:50%;margin-left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-top-left .kbq-tooltip__arrow{bottom:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:13px}.kbq-tooltip_placement-top-right .kbq-tooltip__arrow{bottom:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);right:13px}.kbq-tooltip_placement-right .kbq-tooltip__arrow{left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:50%;margin-top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-right-top .kbq-tooltip__arrow{left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:13px}.kbq-tooltip_placement-right-bottom .kbq-tooltip__arrow{left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);bottom:13px}.kbq-tooltip_placement-left .kbq-tooltip__arrow{right:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:50%;margin-top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-left-top .kbq-tooltip__arrow{right:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:13px}.kbq-tooltip_placement-left-bottom .kbq-tooltip__arrow{right:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);bottom:13px}.kbq-tooltip_placement-bottom .kbq-tooltip__arrow{top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:50%;margin-left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-bottom-left .kbq-tooltip__arrow{top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:13px}.kbq-tooltip_placement-bottom-right .kbq-tooltip__arrow{top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);right:13px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [mcTooltipAnimations.tooltipState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-tooltip-component', animations: [mcTooltipAnimations.tooltipState], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [KBQ_TOOLTIP_OPEN_TIME_PROVIDER], template: "<div class=\"kbq-tooltip\"\n     [ngClass]=\"classMap\"\n     [@state]=\"visibility\"\n     (@state.start)=\"animationStart()\"\n     (@state.done)=\"animationDone($event)\">\n\n    <div class=\"kbq-tooltip__inner\">\n        <div class=\"kbq-tooltip__arrow\"></div>\n\n        <div class=\"kbq-tooltip__header\" *ngIf=\"header\">\n            <ng-container *ngIf=\"isTemplateRef(header)\" [ngTemplateOutlet]=\"$any(header)\"></ng-container>\n            <ng-container *ngIf=\"!isTemplateRef(header)\">\n                <div>{{ header }}</div>\n            </ng-container>\n        </div>\n        <div class=\"kbq-tooltip__content\">\n            <ng-container *ngIf=\"isTemplateRef(content)\" [ngTemplateOutlet]=\"$any(content)\"></ng-container>\n            <ng-container *ngIf=\"!isTemplateRef(content)\">\n                <div>{{ content }}</div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [".kbq-tooltip__inner{border-radius:var(--kbq-tooltip-size-border-radius, 8px);word-break:break-word}.kbq-tooltip{box-sizing:border-box;border-radius:var(--kbq-tooltip-size-border-radius, 8px);z-index:1060;white-space:pre-line;max-width:var(--kbq-tooltip-size-max-width, 300px)}.kbq-tooltip.kbq-tooltip_placement-top,.kbq-tooltip.kbq-tooltip_placement-top-left,.kbq-tooltip.kbq-tooltip_placement-top-right{margin-bottom:8px}.kbq-tooltip.kbq-tooltip_placement-right,.kbq-tooltip.kbq-tooltip_placement-right-top,.kbq-tooltip.kbq-tooltip_placement-right-bottom{margin-left:8px}.kbq-tooltip.kbq-tooltip_placement-bottom,.kbq-tooltip.kbq-tooltip_placement-bottom-left,.kbq-tooltip.kbq-tooltip_placement-bottom-right{margin-top:8px}.kbq-tooltip.kbq-tooltip_placement-left,.kbq-tooltip.kbq-tooltip_placement-left-top,.kbq-tooltip.kbq-tooltip_placement-left-bottom{margin-right:8px}.kbq-tooltip .kbq-tooltip__inner{padding:var(--kbq-tooltip-size-padding-vertical, 8px) var(--kbq-tooltip-size-padding-horizontal, 16px)}.kbq-tooltip__arrow{position:absolute;width:var(--kbq-tooltip-size-arrow-size, 12px);height:var(--kbq-tooltip-size-arrow-size, 12px);transform:rotate(45deg);z-index:-1}.kbq-tooltip_placement-top .kbq-tooltip__arrow{bottom:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:50%;margin-left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-top-left .kbq-tooltip__arrow{bottom:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:13px}.kbq-tooltip_placement-top-right .kbq-tooltip__arrow{bottom:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);right:13px}.kbq-tooltip_placement-right .kbq-tooltip__arrow{left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:50%;margin-top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-right-top .kbq-tooltip__arrow{left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:13px}.kbq-tooltip_placement-right-bottom .kbq-tooltip__arrow{left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);bottom:13px}.kbq-tooltip_placement-left .kbq-tooltip__arrow{right:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:50%;margin-top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-left-top .kbq-tooltip__arrow{right:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);top:13px}.kbq-tooltip_placement-left-bottom .kbq-tooltip__arrow{right:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);bottom:13px}.kbq-tooltip_placement-bottom .kbq-tooltip__arrow{top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:50%;margin-left:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2)}.kbq-tooltip_placement-bottom-left .kbq-tooltip__arrow{top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);left:13px}.kbq-tooltip_placement-bottom-right .kbq-tooltip__arrow{top:calc((var(--kbq-tooltip-size-arrow-size, 12px) - 1px) / -2);right:13px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KBQ_TOOLTIP_OPEN_TIME]
+                }] }]; } });
+const KBQ_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('kbq-tooltip-scroll-strategy');
+/** @docs-private */
+function mcTooltipScrollStrategyFactory(overlay) {
+    return () => overlay.scrollStrategies.close();
+}
+/** @docs-private */
+const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: KBQ_TOOLTIP_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: mcTooltipScrollStrategyFactory
+};
+class KbqTooltipTrigger extends KbqPopUpTrigger {
+    get tooltipVisible() {
+        return this.visible;
+    }
+    set tooltipVisible(value) {
+        super.updateVisible(value);
+    }
+    get tooltipPlacement() {
+        return this.placement;
+    }
+    set tooltipPlacement(value) {
+        super.updatePlacement(value);
+    }
+    get tooltipPlacementPriority() {
+        return this.placementPriority;
+    }
+    set tooltipPlacementPriority(value) {
+        super.updatePlacementPriority(value);
+    }
+    get content() {
+        return this._content;
+    }
+    set content(content) {
+        this._content = content;
+        this.updateData();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    get trigger() {
+        return this._trigger;
+    }
+    set trigger(value) {
+        if (value) {
+            this._trigger = value;
+        }
+        else {
+            this._trigger = `${PopUpTriggers.Hover}, ${PopUpTriggers.Focus}`;
+        }
+        this.initListeners();
+    }
+    get customClass() {
+        return this._customClass || '';
+    }
+    set customClass(value) {
+        if (value) {
+            this._customClass = value;
+            this.updateClassMap();
+        }
+        else {
+            this._customClass = '';
+        }
+    }
+    get color() {
+        return `kbq-${this._color}`;
+    }
+    set color(value) {
+        this._color = value || KbqComponentColors.Contrast;
+    }
+    get hasClickInTrigger() {
+        return this.trigger.includes(PopUpTriggers.Click);
+    }
+    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction) {
+        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
+        this.enterDelay = 400;
+        this.leaveDelay = 0;
+        // tslint:disable-next-line:naming-convention
+        this._trigger = `${PopUpTriggers.Hover}, ${PopUpTriggers.Focus}`;
+        this._color = KbqComponentColors.Contrast;
+        this.placementChange = new EventEmitter();
+        this.visibleChange = new EventEmitter();
+        this.originSelector = '.kbq-tooltip';
+        this.overlayConfig = {
+            panelClass: 'kbq-tooltip-panel'
+        };
+        this.modifier = TooltipModifier.Default;
+    }
+    updateData() {
+        if (!this.instance) {
+            return;
+        }
+        this.instance.content = this.content;
+        this.instance.detectChanges();
+    }
+    closingActions() {
+        return merge(this.hasClickInTrigger ? this.overlayRef.outsidePointerEvents() : EMPTY, this.overlayRef.detachments());
+    }
+    getOverlayHandleComponentType() {
+        return KbqTooltipComponent;
+    }
+    updateClassMap(newPlacement = this.placement) {
+        if (!this.instance) {
+            return;
+        }
+        this.instance.updateClassMap(POSITION_TO_CSS_MAP[newPlacement], `${this.customClass} ${this.color}`, { modifier: this.modifier });
+        this.instance.markForCheck();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTooltipTrigger, deps: [{ token: i2.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTooltipTrigger, selector: "[mcTooltip]", inputs: { tooltipVisible: ["mcVisible", "tooltipVisible"], tooltipPlacement: ["mcPlacement", "tooltipPlacement"], tooltipPlacementPriority: ["mcPlacementPriority", "tooltipPlacementPriority"], content: ["mcTooltip", "content"], disabled: ["mcTooltipDisabled", "disabled"], enterDelay: ["mcEnterDelay", "enterDelay"], leaveDelay: ["mcLeaveDelay", "leaveDelay"], trigger: ["mcTrigger", "trigger"], customClass: ["mcTooltipClass", "customClass"], color: "color" }, outputs: { placementChange: "mcPlacementChange", visibleChange: "mcVisibleChange" }, host: { listeners: { "keydown": "handleKeydown($event)", "touchend": "handleTouchend()" }, properties: { "class.kbq-tooltip_open": "isOpen" } }, exportAs: ["mcTooltip"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcTooltip]',
+                    exportAs: 'mcTooltip',
+                    host: {
+                        '[class.kbq-tooltip_open]': 'isOpen',
+                        '(keydown)': 'handleKeydown($event)',
+                        '(touchend)': 'handleTouchend()'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
+                }] }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { tooltipVisible: [{
+                type: Input,
+                args: ['mcVisible']
+            }], tooltipPlacement: [{
+                type: Input,
+                args: ['mcPlacement']
+            }], tooltipPlacementPriority: [{
+                type: Input,
+                args: ['mcPlacementPriority']
+            }], content: [{
+                type: Input,
+                args: ['mcTooltip']
+            }], disabled: [{
+                type: Input,
+                args: ['mcTooltipDisabled']
+            }], enterDelay: [{
+                type: Input,
+                args: ['mcEnterDelay']
+            }], leaveDelay: [{
+                type: Input,
+                args: ['mcLeaveDelay']
+            }], trigger: [{
+                type: Input,
+                args: ['mcTrigger']
+            }], customClass: [{
+                type: Input,
+                args: ['mcTooltipClass']
+            }], color: [{
+                type: Input
+            }], placementChange: [{
+                type: Output,
+                args: ['mcPlacementChange']
+            }], visibleChange: [{
+                type: Output,
+                args: ['mcVisibleChange']
+            }] } });
+class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
+    get content() {
+        return this._content;
+    }
+    set content(content) {
+        this._content = content;
+        this.updateData();
+    }
+    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction) {
+        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
+        this.modifier = TooltipModifier.Warning;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqWarningTooltipTrigger, deps: [{ token: i2.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqWarningTooltipTrigger, selector: "[mcWarningTooltip]", inputs: { content: ["mcWarningTooltip", "content"] }, host: { listeners: { "keydown": "handleKeydown($event)", "touchend": "handleTouchend()" }, properties: { "class.kbq-tooltip_open": "isOpen" } }, exportAs: ["mcWarningTooltip"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqWarningTooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcWarningTooltip]',
+                    exportAs: 'mcWarningTooltip',
+                    host: {
+                        '[class.kbq-tooltip_open]': 'isOpen',
+                        '(keydown)': 'handleKeydown($event)',
+                        '(touchend)': 'handleTouchend()'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
+                }] }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { content: [{
+                type: Input,
+                args: ['mcWarningTooltip']
+            }] } });
+class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
+    get content() {
+        return this._content;
+    }
+    set content(content) {
+        this._content = content;
+        this.updateData();
+    }
+    get header() {
+        return this._header;
+    }
+    set header(header) {
+        this._header = header;
+        this.updateData();
+    }
+    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction) {
+        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
+        this.modifier = TooltipModifier.Extended;
+    }
+    updateData() {
+        if (!this.instance) {
+            return;
+        }
+        super.updateData();
+        this.instance.header = this.header;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqExtendedTooltipTrigger, deps: [{ token: i2.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqExtendedTooltipTrigger, selector: "[mcExtendedTooltip]", inputs: { content: ["mcExtendedTooltip", "content"], header: ["mcTooltipHeader", "header"] }, host: { listeners: { "keydown": "handleKeydown($event)", "touchend": "handleTouchend()" }, properties: { "class.kbq-tooltip_open": "isOpen" } }, exportAs: ["mcExtendedTooltip"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqExtendedTooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcExtendedTooltip]',
+                    exportAs: 'mcExtendedTooltip',
+                    host: {
+                        '[class.kbq-tooltip_open]': 'isOpen',
+                        '(keydown)': 'handleKeydown($event)',
+                        '(touchend)': 'handleTouchend()'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
+                }] }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { content: [{
+                type: Input,
+                args: ['mcExtendedTooltip']
+            }], header: [{
+                type: Input,
+                args: ['mcTooltipHeader']
+            }] } });
+
+class KbqToolTipModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToolTipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqToolTipModule, declarations: [KbqTooltipComponent,
+            KbqTooltipTrigger,
+            KbqExtendedTooltipTrigger,
+            KbqWarningTooltipTrigger], imports: [CommonModule, OverlayModule], exports: [KbqTooltipComponent,
+            KbqTooltipTrigger,
+            KbqExtendedTooltipTrigger,
+            KbqWarningTooltipTrigger] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToolTipModule, providers: [
+            KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
+            KBQ_TOOLTIP_OPEN_TIME_PROVIDER
+        ], imports: [CommonModule, OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqToolTipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KbqTooltipComponent,
+                        KbqTooltipTrigger,
+                        KbqExtendedTooltipTrigger,
+                        KbqWarningTooltipTrigger
+                    ],
+                    exports: [
+                        KbqTooltipComponent,
+                        KbqTooltipTrigger,
+                        KbqExtendedTooltipTrigger,
+                        KbqWarningTooltipTrigger
+                    ],
+                    imports: [CommonModule, OverlayModule],
+                    providers: [
+                        KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
+                        KBQ_TOOLTIP_OPEN_TIME_PROVIDER
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KBQ_TOOLTIP_OPEN_TIME, KBQ_TOOLTIP_OPEN_TIME_PROVIDER, KBQ_TOOLTIP_SCROLL_STRATEGY, KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqExtendedTooltipTrigger, KbqToolTipModule, KbqTooltipComponent, KbqTooltipTrigger, KbqWarningTooltipTrigger, MIN_TIME_FOR_DELAY, TooltipModifier, mcTooltipScrollStrategyFactory };
+//# sourceMappingURL=koobiq-components-tooltip.mjs.map