import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
import { Component, ElementRef, Host, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { AppendToBodyDirectionsConfig, fadeInOut } from 'ng-devui/utils';
import { DropDownDirective } from './dropdown.directive';
import * as i0 from "@angular/core";
import * as i1 from "./dropdown.directive";
import * as i2 from "@angular/cdk/overlay";
export class DropDownAppendToBodyComponent {
    constructor(dropDown) {
        this.dropDown = dropDown;
        this.menuPosition = 'bottom';
        this.appendToBodyDirections = [
            'rightDown', 'leftDown', 'rightUp', 'leftUp'
        ];
        this.dropDown.appendToBody = true;
    }
    ngOnInit() {
        this.setPositions();
        this.setOrigin();
    }
    ngOnChanges(changes) {
        if (changes['appendToBodyDirections']) {
            this.setPositions();
        }
        if (changes['alignOrigin']) {
            this.setOrigin();
        }
    }
    setOrigin() {
        if (this.alignOrigin) {
            this.origin = new CdkOverlayOrigin(this.alignOrigin);
        }
        else {
            this.origin = undefined;
        }
    }
    setPositions() {
        if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) {
            this.positions = this.appendToBodyDirections.map(position => {
                if (typeof position === 'string') {
                    return AppendToBodyDirectionsConfig[position];
                }
                else {
                    return position;
                }
            }).filter(position => position !== undefined);
        }
        else {
            this.positions = undefined;
        }
    }
    reposition() {
        if (this.overlay && this.overlay.overlayRef) {
            setTimeout(() => {
                this.setPositions();
                this.overlay.overlayRef.updatePosition();
            }, 0);
        }
    }
    onPositionChange(position) {
        switch (position.connectionPair.overlayY) {
            case 'top':
            case 'center':
                this.menuPosition = 'bottom';
                break;
            case 'bottom':
                this.menuPosition = 'top';
        }
    }
}
DropDownAppendToBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DropDownAppendToBodyComponent, deps: [{ token: i1.DropDownDirective, host: true }], target: i0.ɵɵFactoryTarget.Component });
DropDownAppendToBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DropDownAppendToBodyComponent, selector: "[dDropDown][appendToBody]", inputs: { alignOrigin: "alignOrigin", appendToBodyDirections: "appendToBodyDirections" }, viewQueries: [{ propertyName: "dropDownWrapper", first: true, predicate: ["dropDownWrapper"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
    <ng-content></ng-content>
    <ng-template cdk-connected-overlay
      [cdkConnectedOverlayOrigin]="origin || dropDown.cdkConnectedOverlayOrigin"
      [cdkConnectedOverlayOpen]="dropDown.isOpen"
      [cdkConnectedOverlayPositions]="positions"
      (backdropClick)="dropDown.isOpen=false"
      (positionChange)="onPositionChange($event)">
      <div [@fadeInOut]="dropDown.startAnimation ? menuPosition : 'void'" #dropDownWrapper
        [@.disabled]="!dropDown.showAnimation">
        <ng-content select="[dDropDownMenu]"></ng-content>
      </div>
    </ng-template>
  `, isInline: true, styles: [".cdk-overlay-pane>div>.devui-dropdown-menu{position:relative;top:0;left:0;border:none}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i2.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
    ], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DropDownAppendToBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: '[dDropDown][appendToBody]', template: `
    <ng-content></ng-content>
    <ng-template cdk-connected-overlay
      [cdkConnectedOverlayOrigin]="origin || dropDown.cdkConnectedOverlayOrigin"
      [cdkConnectedOverlayOpen]="dropDown.isOpen"
      [cdkConnectedOverlayPositions]="positions"
      (backdropClick)="dropDown.isOpen=false"
      (positionChange)="onPositionChange($event)">
      <div [@fadeInOut]="dropDown.startAnimation ? menuPosition : 'void'" #dropDownWrapper
        [@.disabled]="!dropDown.showAnimation">
        <ng-content select="[dDropDownMenu]"></ng-content>
      </div>
    </ng-template>
  `, encapsulation: ViewEncapsulation.None, animations: [
                        fadeInOut
                    ], preserveWhitespaces: false, styles: [".cdk-overlay-pane>div>.devui-dropdown-menu{position:relative;top:0;left:0;border:none}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DropDownDirective, decorators: [{
                    type: Host
                }] }]; }, propDecorators: { dropDownWrapper: [{
                type: ViewChild,
                args: ['dropDownWrapper']
            }], overlay: [{
                type: ViewChild,
                args: [CdkConnectedOverlay, { static: true }]
            }], alignOrigin: [{
                type: Input
            }], appendToBodyDirections: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 