import { __decorate, __metadata } from "tslib";
import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
import { addClassToOrigin, AppendToBodyDirectionsConfig, DevConfigService, fadeInOut, formWithDropDown, removeClassFromOrigin, WithConfig } from 'ng-devui/utils';
import { WindowRef } from 'ng-devui/window-ref';
import { ToggleMenuListComponent } from './toggle-menu-list.component';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/window-ref";
import * as i2 from "ng-devui/utils";
import * as i3 from "@angular/common";
import * as i4 from "@angular/cdk/overlay";
export class ToggleMenuContainerComponent {
    constructor(element, windowRef, ngZone, renderer, changeDetectorRef, devConfigService, doc) {
        this.element = element;
        this.windowRef = windowRef;
        this.ngZone = ngZone;
        this.renderer = renderer;
        this.changeDetectorRef = changeDetectorRef;
        this.devConfigService = devConfigService;
        this.doc = doc;
        /**
         * 【可选】是否appendToBody
         */
        this.appendToBody = false;
        this.appendToBodyDirections = ['rightDown', 'leftDown', 'rightUp', 'leftUp'];
        /**
         * 【可选】是否禁用下拉框
         */
        this.disabled = false;
        /**
         * 【可选】是否展示动效
         */
        this.showAnimation = true;
        /**
         * 【可选】是否支持聚焦自动展开下拉
         */
        this.toggleOnFocus = false;
        this.closeScope = 'all';
        this.direction = 'down';
        /**
         * select下拉toggle事件，值为true或false
         */
        this.toggleChange = new EventEmitter();
        this.passEvent = new EventEmitter();
        this._isOpen = false;
        this.isInit = true;
        this.isMouseEvent = false;
        this.startAnimation = false;
        this.labelMinHeight = 20; // position.top小于20px时候，表示光标在第一行
        this.popDirection = 'bottom';
        this.menuPosition = 'bottom';
        this.onDocumentClick = (event) => {
            if (this.listInstance && this.isOpen && this.selectBoxElement && !this.selectBoxElement.nativeElement.contains(event.target)) {
                this.isOpen = false;
                this.listInstance.selectIndex = this.listInstance.activeIndex ? this.listInstance.activeIndex : -1;
                this.changeDetectorRef.detectChanges();
            }
        };
        this.document = this.doc;
    }
    set isOpen(value) {
        if (this._isOpen === value) {
            // 如果toggle-container自身触发开关，父级组件的isOpen随toggleChange改变，会通过input再次返回导致重复触发，通过值是否变化屏蔽该次触发
            return;
        }
        this._isOpen = value;
        this.toggleChange.emit(value);
        this.setDocumentClickListener();
        if (this.selectWrapper) {
            this.dropDownWidth = this.width ? this.width : this.selectWrapper.nativeElement.offsetWidth;
        }
        if (value) {
            addClassToOrigin(this.selectWrapper);
            setTimeout(() => {
                this.startAnimation = true;
                this.changeDetectorRef.detectChanges();
            });
        }
        else {
            removeClassFromOrigin(this.selectWrapper);
        }
    }
    get isOpen() {
        return this._isOpen;
    }
    ngOnInit() {
        this.isInit = false;
        this.setPositions();
    }
    ngOnChanges(changes) {
        if (changes['appendToBodyDirections']) {
            this.setPositions();
        }
    }
    animationEnd() {
        if (!this.isOpen && this.selectMenuElement && this.showAnimation) {
            const targetElement = this.selectMenuElement.nativeElement;
            this.startAnimation = false;
            setTimeout(() => {
                // 动画会覆盖导致display还是block， 所以要等动画覆盖完
                this.renderer.setStyle(targetElement, 'display', 'none');
            });
        }
    }
    setPositions() {
        if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) {
            this.overlayPositions = this.appendToBodyDirections
                .map((position) => {
                if (typeof position === 'string') {
                    return AppendToBodyDirectionsConfig[position];
                }
                else {
                    return position;
                }
            })
                .filter((position) => position !== undefined);
        }
        else {
            this.overlayPositions = undefined;
        }
    }
    updatePosition() {
        if (this.appendToBody) {
            setTimeout(() => {
                if (this.connectedOverlay && this.connectedOverlay.overlayRef) {
                    this.connectedOverlay.overlayRef.updatePosition();
                }
            });
        }
    }
    setPassEvent(event, type) {
        if (this.isOpen) {
            this.passEvent.emit({ event, type });
        }
    }
    onPositionChange(position) {
        this.menuPosition = position.connectionPair.originY;
    }
    setDocumentClickListener() {
        this.ngZone.runOutsideAngular(() => {
            if (this.isOpen) {
                this.document.addEventListener('click', this.onDocumentClick);
            }
            else {
                this.document.removeEventListener('click', this.onDocumentClick);
            }
        });
    }
    // mousedown mouseup解决focus与click冲突问题
    setMouseEventTrue(event) {
        this.isMouseEvent = true;
    }
    setMouseEventFalse(event) {
        this.isMouseEvent = false;
    }
    autoToggle(event) {
        event.preventDefault();
        event.stopPropagation();
        if (this.toggleOnFocus && !this.disabled && !this.isOpen && !this.isMouseEvent) {
            this.toggle();
        }
    }
    toggle(event) {
        if (this.disabled) {
            this.isOpen = false;
            return;
        }
        if (!this.isOpen) {
            if (!this.appendToBody) {
                let direction = '';
                switch (this.direction) {
                    case 'auto':
                        direction = this.isBottomRectEnough() ? 'bottom' : 'top';
                        break;
                    case 'down':
                        direction = 'bottom';
                        break;
                    case 'up':
                        direction = 'top';
                        break;
                    default:
                        direction = 'bottom';
                }
                this.popDirection = direction;
            }
            else {
                this.updateCdkConnectedOverlayOrigin();
            }
        }
        else {
            if (!this.showAnimation) {
                this.startAnimation = false;
            }
            if (this.closeScope === 'none' || (this.closeScope === 'blank' && this.element.nativeElement.contains(event.target))) {
                return;
            }
        }
        this.isOpen = !this.isOpen;
    }
    isBottomRectEnough() {
        const selectMenuElement = this.selectWrapper.nativeElement;
        const selectInputElement = this.selectBoxElement;
        const displayStyle = selectMenuElement.style['display'] || window.getComputedStyle(selectMenuElement).display;
        let tempStyle;
        if (displayStyle === 'none') {
            // 必要， 否则首次展开必有问题， 如果animationEnd之后设置为none也会有问题
            tempStyle = {
                visibility: selectMenuElement.style.visibility,
                display: selectMenuElement.style.display,
                transform: selectMenuElement.style.transform,
            };
            this.renderer.setStyle(selectMenuElement, 'visibility', 'hidden');
            this.renderer.setStyle(selectMenuElement, 'display', 'block');
            this.renderer.setStyle(selectMenuElement, 'transform', 'translate(0, -9999)');
        }
        const elementHeight = selectMenuElement.offsetHeight;
        const bottomDistance = this.windowRef.innerHeight - selectInputElement.nativeElement.getBoundingClientRect().bottom;
        const isBottomEnough = bottomDistance >= elementHeight;
        if (displayStyle === 'none') {
            this.renderer.setStyle(selectMenuElement, 'visibility', tempStyle.visibility);
            this.renderer.setStyle(selectMenuElement, 'display', tempStyle.display);
            this.renderer.setStyle(selectMenuElement, 'transform', tempStyle.transform);
        }
        return isBottomEnough;
    }
    updateCdkConnectedOverlayOrigin() {
        if (this.selectWrapper?.nativeElement) {
            this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(formWithDropDown(this.selectWrapper) || this.selectWrapper.nativeElement);
        }
    }
    toggleChangeFn(event) {
        this.isOpen = event;
    }
}
ToggleMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ToggleMenuContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1.WindowRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i2.DevConfigService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
ToggleMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ToggleMenuContainerComponent, selector: "d-toggle-menu-container", inputs: { isOpen: "isOpen", appendToBody: "appendToBody", appendToBodyDirections: "appendToBodyDirections", width: "width", size: "size", overview: "overview", position: "position", disabled: "disabled", showAnimation: "showAnimation", toggleOnFocus: "toggleOnFocus", closeScope: "closeScope", direction: "direction", selectWrapper: "selectWrapper" }, outputs: { toggleChange: "toggleChange", passEvent: "passEvent" }, host: { listeners: { "mousedown": "setMouseEventTrue($event)", "mouseup": "setMouseEventFalse($event)" } }, queries: [{ propertyName: "listInstance", first: true, predicate: ToggleMenuListComponent, descendants: true }], viewQueries: [{ propertyName: "selectBoxElement", first: true, predicate: ["selectBox"], descendants: true, static: true }, { propertyName: "selectMenuElement", first: true, predicate: ["selectMenu"], descendants: true, static: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #selectBox\n  class=\"devui-toggle-menu-container devui-toggle-menu{{ size ? '-' + size : '' }} {{ disabled ? 'disabled' : '' }}\"\n  [tabindex]=\"0\"\n  (click)=\"toggle($event)\"\n  (focus)=\"autoToggle($event); setPassEvent($event, 'focus')\"\n  (blur)=\"setPassEvent($event, 'blur')\"\n  (keydown.esc)=\"setPassEvent($event, 'keydown.esc')\"\n  (keydown.ArrowUp)=\"setPassEvent($event, 'keydown.ArrowUp')\"\n  (keydown.ArrowDown)=\"setPassEvent($event, 'keydown.ArrowDown')\"\n  (keydown.enter)=\"setPassEvent($event, 'keydown.enter')\"\n  (keydown)=\"setPassEvent($event, 'keydown')\"\n>\n  <ng-content></ng-content>\n  <ng-container *ngIf=\"appendToBody; else selectDropdownTpl\">\n    <ng-template\n      cdk-connected-overlay\n      [cdkConnectedOverlayOrigin]=\"cdkConnectedOverlayOrigin\"\n      [cdkConnectedOverlayWidth]=\"dropDownWidth\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n      (positionChange)=\"onPositionChange($event)\"\n      (backdropClick)=\"toggleChangeFn(false)\"\n    >\n      <ng-template [ngTemplateOutlet]=\"selectDropdownTpl\"></ng-template>\n    </ng-template>\n  </ng-container>\n  <ng-template #selectDropdownTpl>\n    <div\n      #selectMenu\n      class=\"devui-dropdown-menu\"\n      [ngClass]=\"{\n        'devui-dropdown-menu-cdk': appendToBody,\n        'devui-custom-right': listInstance?.customViewDirection === 'right',\n        'devui-custom-left': listInstance?.customViewDirection === 'left',\n        'devui-custom-top': listInstance?.customViewDirection === 'top',\n        'devui-dropdown-menu-multiple': listInstance?.multiple,\n        'devui-reset-min-width': width\n      }\"\n      [@fadeInOut]=\"isOpen && startAnimation ? (appendToBody ? menuPosition : popDirection) : 'void'\"\n      (@fadeInOut.done)=\"animationEnd()\"\n      [@.disabled]=\"!showAnimation\"\n    >\n      <ng-content select=\"d-toggle-menu-list\"></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host .devui-toggle-menu-container{padding:0;width:100%;height:auto;outline:none;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-radius:2px;border-radius:var(--devui-border-radius, 2px);border:solid 1px #d7d8da;border:solid 1px var(--devui-form-control-line, #d7d8da);background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}:host .devui-toggle-menu-container.disabled{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}:host ::ng-deep d-toggle-menu-label{max-width:100%}:host ::ng-deep .devui-toggle-menu{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px}:host ::ng-deep .devui-toggle-menu d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu d-toggle-menu-search{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px;line-height:18px}:host ::ng-deep .devui-toggle-menu-lg{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px}:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-search{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px;line-height:46px}:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-list-item{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px}:host ::ng-deep .devui-toggle-menu-sm{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px}:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-search,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-list-item{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px;line-height:14px}:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-list-item{min-height:26px}.devui-dropdown-menu{width:100%;padding-bottom:0}.devui-dropdown-menu:not(.devui-dropdown-menu-cdk){width:calc(100% + 2px);left:-1px;margin:4px 0}.devui-dropdown-menu-cdk{position:static;display:block;width:100%}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-search{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px;line-height:18px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-search{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px;line-height:46px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-list-item{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-search,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-list-item{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px;line-height:14px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-list-item{min-height:26px}::ng-deep .devui-dropdown-menu.devui-custom-right,::ng-deep .devui-dropdown-menu.devui-custom-left,::ng-deep .devui-dropdown-menu.devui-custom-top{min-width:400px}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list{width:100%;display:flex!important}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list .devui-dropdown-menu-wrap{display:inline-block}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list .devui-select-custom-area{display:inline-block;overflow:auto}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap{width:calc(50% - 1px)}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area{width:50%}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before{display:none}::ng-deep .devui-dropdown-menu.devui-custom-top{flex-direction:column-reverse}::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-select-custom-area{border-right:1px solid #f2f2f3;border-right:1px solid var(--devui-dividing-line, #f2f2f3);order:-1}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-select-custom-area{border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}::ng-deep .devui-dropdown-menu.devui-custom-top>.devui-select-custom-area{border-bottom:1px solid #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}::ng-deep .devui-dropdown-menu.devui-reset-min-width{min-width:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], animations: [fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], ToggleMenuContainerComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ToggleMenuContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-toggle-menu-container', animations: [fadeInOut], changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<div\n  #selectBox\n  class=\"devui-toggle-menu-container devui-toggle-menu{{ size ? '-' + size : '' }} {{ disabled ? 'disabled' : '' }}\"\n  [tabindex]=\"0\"\n  (click)=\"toggle($event)\"\n  (focus)=\"autoToggle($event); setPassEvent($event, 'focus')\"\n  (blur)=\"setPassEvent($event, 'blur')\"\n  (keydown.esc)=\"setPassEvent($event, 'keydown.esc')\"\n  (keydown.ArrowUp)=\"setPassEvent($event, 'keydown.ArrowUp')\"\n  (keydown.ArrowDown)=\"setPassEvent($event, 'keydown.ArrowDown')\"\n  (keydown.enter)=\"setPassEvent($event, 'keydown.enter')\"\n  (keydown)=\"setPassEvent($event, 'keydown')\"\n>\n  <ng-content></ng-content>\n  <ng-container *ngIf=\"appendToBody; else selectDropdownTpl\">\n    <ng-template\n      cdk-connected-overlay\n      [cdkConnectedOverlayOrigin]=\"cdkConnectedOverlayOrigin\"\n      [cdkConnectedOverlayWidth]=\"dropDownWidth\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n      (positionChange)=\"onPositionChange($event)\"\n      (backdropClick)=\"toggleChangeFn(false)\"\n    >\n      <ng-template [ngTemplateOutlet]=\"selectDropdownTpl\"></ng-template>\n    </ng-template>\n  </ng-container>\n  <ng-template #selectDropdownTpl>\n    <div\n      #selectMenu\n      class=\"devui-dropdown-menu\"\n      [ngClass]=\"{\n        'devui-dropdown-menu-cdk': appendToBody,\n        'devui-custom-right': listInstance?.customViewDirection === 'right',\n        'devui-custom-left': listInstance?.customViewDirection === 'left',\n        'devui-custom-top': listInstance?.customViewDirection === 'top',\n        'devui-dropdown-menu-multiple': listInstance?.multiple,\n        'devui-reset-min-width': width\n      }\"\n      [@fadeInOut]=\"isOpen && startAnimation ? (appendToBody ? menuPosition : popDirection) : 'void'\"\n      (@fadeInOut.done)=\"animationEnd()\"\n      [@.disabled]=\"!showAnimation\"\n    >\n      <ng-content select=\"d-toggle-menu-list\"></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host .devui-toggle-menu-container{padding:0;width:100%;height:auto;outline:none;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-radius:2px;border-radius:var(--devui-border-radius, 2px);border:solid 1px #d7d8da;border:solid 1px var(--devui-form-control-line, #d7d8da);background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}:host .devui-toggle-menu-container.disabled{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}:host ::ng-deep d-toggle-menu-label{max-width:100%}:host ::ng-deep .devui-toggle-menu{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px}:host ::ng-deep .devui-toggle-menu d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu d-toggle-menu-search{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px;line-height:18px}:host ::ng-deep .devui-toggle-menu-lg{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px}:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-search{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px;line-height:46px}:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-list-item{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px}:host ::ng-deep .devui-toggle-menu-sm{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px}:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-search,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-list-item{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px;line-height:14px}:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-list-item{min-height:26px}.devui-dropdown-menu{width:100%;padding-bottom:0}.devui-dropdown-menu:not(.devui-dropdown-menu-cdk){width:calc(100% + 2px);left:-1px;margin:4px 0}.devui-dropdown-menu-cdk{position:static;display:block;width:100%}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-search{font-size:12px;font-size:var(--devui-font-size-md, 12px);min-height:26px;line-height:18px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-search{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:46px;line-height:46px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-list-item{font-size:14px;font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-search,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-list-item{font-size:12px;font-size:var(--devui-font-size-sm, 12px);min-height:24px;line-height:14px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-list-item{min-height:26px}::ng-deep .devui-dropdown-menu.devui-custom-right,::ng-deep .devui-dropdown-menu.devui-custom-left,::ng-deep .devui-dropdown-menu.devui-custom-top{min-width:400px}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list{width:100%;display:flex!important}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list .devui-dropdown-menu-wrap{display:inline-block}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list .devui-select-custom-area{display:inline-block;overflow:auto}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap{width:calc(50% - 1px)}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area{width:50%}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before{display:none}::ng-deep .devui-dropdown-menu.devui-custom-top{flex-direction:column-reverse}::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-select-custom-area{border-right:1px solid #f2f2f3;border-right:1px solid var(--devui-dividing-line, #f2f2f3);order:-1}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-select-custom-area{border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}::ng-deep .devui-dropdown-menu.devui-custom-top>.devui-select-custom-area{border-bottom:1px solid #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}::ng-deep .devui-dropdown-menu.devui-reset-min-width{min-width:auto}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.WindowRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i2.DevConfigService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; }, propDecorators: { isOpen: [{
                type: Input
            }], appendToBody: [{
                type: Input
            }], appendToBodyDirections: [{
                type: Input
            }], width: [{
                type: Input
            }], size: [{
                type: Input
            }], overview: [{
                type: Input
            }], position: [{
                type: Input
            }], disabled: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], toggleOnFocus: [{
                type: Input
            }], closeScope: [{
                type: Input
            }], direction: [{
                type: Input
            }], selectWrapper: [{
                type: Input
            }], toggleChange: [{
                type: Output
            }], passEvent: [{
                type: Output
            }], selectBoxElement: [{
                type: ViewChild,
                args: ['selectBox', { static: true }]
            }], selectMenuElement: [{
                type: ViewChild,
                args: ['selectMenu', { static: true }]
            }], connectedOverlay: [{
                type: ViewChild,
                args: [CdkConnectedOverlay]
            }], listInstance: [{
                type: ContentChild,
                args: [ToggleMenuListComponent]
            }], setMouseEventTrue: [{
                type: HostListener,
                args: ['mousedown', ['$event']]
            }], setMouseEventFalse: [{
                type: HostListener,
                args: ['mouseup', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 