@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
139 lines • 11.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: dropdown.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Host, Input, ViewEncapsulation, ElementRef } from '@angular/core';
import { CdkOverlayOrigin } from '@angular/cdk/overlay';
import { AppendToBodyDirectionsConfig } from '@duoduo-oba/ng-devui/utils';
import { fadeInOut } from '@duoduo-oba/ng-devui/utils';
import { DropDownDirective } from './dropdown.directive';
export class DropDownAppendToBodyComponent {
/**
* @param {?} dropDown
*/
constructor(dropDown) {
this.dropDown = dropDown;
this.menuPosition = 'bottom';
this.appendToBodyDirections = [
'rightDown', 'leftDown', 'rightUp', 'leftUp'
];
this.dropDown.appendToBody = true;
}
/**
* @return {?}
*/
ngOnInit() {
this.setPositions();
this.setOrigin();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes['appendToBodyDirections']) {
this.setPositions();
}
if (changes['alignOrigin']) {
this.setOrigin();
}
}
/**
* @return {?}
*/
setOrigin() {
if (this.alignOrigin) {
this.origin = new CdkOverlayOrigin(this.alignOrigin);
}
else {
this.origin = undefined;
}
}
/**
* @return {?}
*/
setPositions() {
if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) {
this.positions = this.appendToBodyDirections.map((/**
* @param {?} position
* @return {?}
*/
position => {
if (typeof position === 'string') {
return AppendToBodyDirectionsConfig[position];
}
else {
return position;
}
})).filter((/**
* @param {?} position
* @return {?}
*/
position => position !== undefined));
}
else {
this.positions = undefined;
}
}
/**
* @param {?} position
* @return {?}
*/
onPositionChange(position) {
switch (position.connectionPair.overlayY) {
case 'top':
case 'center':
this.menuPosition = 'bottom';
break;
case 'bottom':
this.menuPosition = 'top';
}
}
}
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 []="(dropDown.isOpen ? menuPosition : 'void')">
<ng-content select="[dDropDownMenu]"></ng-content>
</div>
</ng-template>
`,
encapsulation: ViewEncapsulation.None,
animations: [
fadeInOut
],
styles: [".cdk-overlay-pane .devui-dropdown-menu{position:relative;top:0;left:0;border:none}.devui-dropdown span.icon-chevron-down{display:inline-block;-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-dropdown.open span.icon-chevron-down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}"]
}] }
];
/** @nocollapse */
DropDownAppendToBodyComponent.ctorParameters = () => [
{ type: DropDownDirective, decorators: [{ type: Host }] }
];
DropDownAppendToBodyComponent.propDecorators = {
alignOrigin: [{ type: Input }],
appendToBodyDirections: [{ type: Input }]
};
if (false) {
/** @type {?} */
DropDownAppendToBodyComponent.prototype.menuPosition;
/** @type {?} */
DropDownAppendToBodyComponent.prototype.positions;
/** @type {?} */
DropDownAppendToBodyComponent.prototype.origin;
/** @type {?} */
DropDownAppendToBodyComponent.prototype.alignOrigin;
/** @type {?} */
DropDownAppendToBodyComponent.prototype.appendToBodyDirections;
/** @type {?} */
DropDownAppendToBodyComponent.prototype.dropDown;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctZGV2dWkvZHJvcGRvd24vIiwic291cmNlcyI6WyJkcm9wZG93bi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLElBQUksRUFBVSxLQUFLLEVBQTRCLGlCQUFpQixFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0SCxPQUFPLEVBQW9CLGdCQUFnQixFQUF3RCxNQUFNLHNCQUFzQixDQUFDO0FBQ2hJLE9BQU8sRUFBd0IsNEJBQTRCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNwRixPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDekMsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUF1QnZELE1BQU0sT0FBTyw2QkFBNkI7Ozs7SUFReEMsWUFBMkIsUUFBMkI7UUFBM0IsYUFBUSxHQUFSLFFBQVEsQ0FBbUI7UUFQdEQsaUJBQVksR0FBMEIsUUFBUSxDQUFDO1FBSXRDLDJCQUFzQixHQUFxRDtZQUNsRixXQUFXLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxRQUFRO1NBQzdDLENBQUM7UUFFQSxJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7SUFDcEMsQ0FBQzs7OztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7Ozs7O0lBQ0QsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLHdCQUF3QixDQUFDLEVBQUU7WUFDckMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1NBQ3JCO1FBQ0QsSUFBSSxPQUFPLENBQUMsYUFBYSxDQUFDLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQzs7OztJQUNELFNBQVM7UUFDUCxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLGdCQUFnQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUN0RDthQUFNO1lBQ0wsSUFBSSxDQUFDLE1BQU0sR0FBRyxTQUFTLENBQUM7U0FDekI7SUFDSCxDQUFDOzs7O0lBQ0QsWUFBWTtRQUNWLElBQUksSUFBSSxDQUFDLHNCQUFzQixJQUFJLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ3pFLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixDQUFDLEdBQUc7Ozs7WUFBQyxRQUFRLENBQUMsRUFBRTtnQkFDMUQsSUFBSSxPQUFPLFFBQVEsS0FBSyxRQUFRLEVBQUU7b0JBQ2hDLE9BQU8sNEJBQTRCLENBQUMsUUFBUSxDQUFDLENBQUM7aUJBQy9DO3FCQUFNO29CQUNMLE9BQU8sUUFBUSxDQUFDO2lCQUNqQjtZQUNILENBQUMsRUFBQyxDQUFDLE1BQU07Ozs7WUFBQyxRQUFRLENBQUMsRUFBRSxDQUFDLFFBQVEsS0FBSyxTQUFTLEVBQUMsQ0FBQztTQUMvQzthQUFNO1lBQ0wsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7U0FDNUI7SUFDSCxDQUFDOzs7OztJQUVELGdCQUFnQixDQUFDLFFBQXdDO1FBQ3ZELFFBQVEsUUFBUSxDQUFDLGNBQWMsQ0FBQyxRQUFRLEVBQUU7WUFDeEMsS0FBSyxLQUFLLENBQUM7WUFDWCxLQUFLLFFBQVE7Z0JBQ1gsSUFBSSxDQUFDLFlBQVksR0FBRyxRQUFRLENBQUM7Z0JBQy9CLE1BQU07WUFDTixLQUFLLFFBQVE7Z0JBQ1gsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7U0FDN0I7SUFDSCxDQUFDOzs7WUEzRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSwyQkFBMkI7Z0JBQ3JDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7O0dBWVQ7Z0JBRUQsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7Z0JBQ3JDLFVBQVUsRUFBRTtvQkFDVixTQUFTO2lCQUNWOzthQUNGOzs7O1lBdEJPLGlCQUFpQix1QkErQlYsSUFBSTs7OzBCQUpoQixLQUFLO3FDQUNMLEtBQUs7Ozs7SUFKTixxREFBK0M7O0lBQy9DLGtEQUFVOztJQUNWLCtDQUFPOztJQUNQLG9EQUFzQzs7SUFDdEMsK0RBRUU7O0lBQ1UsaURBQTBDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEhvc3QsIE9uSW5pdCwgSW5wdXQsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcywgVmlld0VuY2Fwc3VsYXRpb24sIEVsZW1lbnRSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0Nvbm5lY3RlZFBvc2l0aW9uLCBDZGtPdmVybGF5T3JpZ2luLCBDb25uZWN0ZWRPdmVybGF5UG9zaXRpb25DaGFuZ2UsIFZlcnRpY2FsQ29ubmVjdGlvblBvc30gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xyXG5pbXBvcnQge0FwcGVuZFRvQm9keURpcmVjdGlvbiwgQXBwZW5kVG9Cb2R5RGlyZWN0aW9uc0NvbmZpZyB9IGZyb20gJ25nLWRldnVpL3V0aWxzJztcclxuaW1wb3J0IHtmYWRlSW5PdXR9IGZyb20gJ25nLWRldnVpL3V0aWxzJztcclxuaW1wb3J0IHtEcm9wRG93bkRpcmVjdGl2ZX0gZnJvbSAnLi9kcm9wZG93bi5kaXJlY3RpdmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdbZERyb3BEb3duXVthcHBlbmRUb0JvZHldJyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPG5nLXRlbXBsYXRlIGNkay1jb25uZWN0ZWQtb3ZlcmxheVxyXG4gICAgICBbY2RrQ29ubmVjdGVkT3ZlcmxheU9yaWdpbl09XCJvcmlnaW4gfHwgZHJvcERvd24uY2RrQ29ubmVjdGVkT3ZlcmxheU9yaWdpblwiXHJcbiAgICAgIFtjZGtDb25uZWN0ZWRPdmVybGF5T3Blbl09XCJkcm9wRG93bi5pc09wZW5cIlxyXG4gICAgICBbY2RrQ29ubmVjdGVkT3ZlcmxheVBvc2l0aW9uc109XCJwb3NpdGlvbnNcIlxyXG4gICAgICAoYmFja2Ryb3BDbGljayk9XCJkcm9wRG93bi5pc09wZW49ZmFsc2VcIlxyXG4gICAgICAocG9zaXRpb25DaGFuZ2UpPVwib25Qb3NpdGlvbkNoYW5nZSgkZXZlbnQpXCI+XHJcbiAgICAgIDxkaXYgW0BmYWRlSW5PdXRdPVwiKGRyb3BEb3duLmlzT3BlbiA/IG1lbnVQb3NpdGlvbiA6ICd2b2lkJylcIj5cclxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZERyb3BEb3duTWVudV1cIj48L25nLWNvbnRlbnQ+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuICBgLFxyXG4gIHN0eWxlVXJsczogWydkcm9wZG93bi5jb21wb25lbnQuc2NzcyddLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcbiAgYW5pbWF0aW9uczogW1xyXG4gICAgZmFkZUluT3V0XHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRHJvcERvd25BcHBlbmRUb0JvZHlDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XHJcbiAgbWVudVBvc2l0aW9uOiBWZXJ0aWNhbENvbm5lY3Rpb25Qb3MgPSAnYm90dG9tJztcclxuICBwb3NpdGlvbnM7XHJcbiAgb3JpZ2luO1xyXG4gIEBJbnB1dCgpIGFsaWduT3JpZ2luOiBFbGVtZW50UmVmPGFueT47XHJcbiAgQElucHV0KCkgYXBwZW5kVG9Cb2R5RGlyZWN0aW9uczogQXJyYXk8QXBwZW5kVG9Cb2R5RGlyZWN0aW9uIHwgQ29ubmVjdGVkUG9zaXRpb24+ID0gW1xyXG4gICAgJ3JpZ2h0RG93bicsICdsZWZ0RG93bicsICdyaWdodFVwJywgJ2xlZnRVcCdcclxuICBdO1xyXG4gIGNvbnN0cnVjdG9yKEBIb3N0KCkgcHVibGljIGRyb3BEb3duOiBEcm9wRG93bkRpcmVjdGl2ZSkge1xyXG4gICAgdGhpcy5kcm9wRG93bi5hcHBlbmRUb0JvZHkgPSB0cnVlO1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICB0aGlzLnNldFBvc2l0aW9ucygpO1xyXG4gICAgdGhpcy5zZXRPcmlnaW4oKTtcclxuICB9XHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xyXG4gICAgaWYgKGNoYW5nZXNbJ2FwcGVuZFRvQm9keURpcmVjdGlvbnMnXSkge1xyXG4gICAgICB0aGlzLnNldFBvc2l0aW9ucygpO1xyXG4gICAgfVxyXG4gICAgaWYgKGNoYW5nZXNbJ2FsaWduT3JpZ2luJ10pIHtcclxuICAgICAgdGhpcy5zZXRPcmlnaW4oKTtcclxuICAgIH1cclxuICB9XHJcbiAgc2V0T3JpZ2luKCkge1xyXG4gICAgaWYgKHRoaXMuYWxpZ25PcmlnaW4pIHtcclxuICAgICAgdGhpcy5vcmlnaW4gPSBuZXcgQ2RrT3ZlcmxheU9yaWdpbih0aGlzLmFsaWduT3JpZ2luKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMub3JpZ2luID0gdW5kZWZpbmVkO1xyXG4gICAgfVxyXG4gIH1cclxuICBzZXRQb3NpdGlvbnMoKSB7XHJcbiAgICBpZiAodGhpcy5hcHBlbmRUb0JvZHlEaXJlY3Rpb25zICYmIHRoaXMuYXBwZW5kVG9Cb2R5RGlyZWN0aW9ucy5sZW5ndGggPiAwKSB7XHJcbiAgICAgIHRoaXMucG9zaXRpb25zID0gdGhpcy5hcHBlbmRUb0JvZHlEaXJlY3Rpb25zLm1hcChwb3NpdGlvbiA9PiB7XHJcbiAgICAgICAgaWYgKHR5cGVvZiBwb3NpdGlvbiA9PT0gJ3N0cmluZycpIHtcclxuICAgICAgICAgIHJldHVybiBBcHBlbmRUb0JvZHlEaXJlY3Rpb25zQ29uZmlnW3Bvc2l0aW9uXTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgcmV0dXJuIHBvc2l0aW9uO1xyXG4gICAgICAgIH1cclxuICAgICAgfSkuZmlsdGVyKHBvc2l0aW9uID0+IHBvc2l0aW9uICE9PSB1bmRlZmluZWQpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5wb3NpdGlvbnMgPSB1bmRlZmluZWQ7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBvblBvc2l0aW9uQ2hhbmdlKHBvc2l0aW9uOiBDb25uZWN0ZWRPdmVybGF5UG9zaXRpb25DaGFuZ2UpIHtcclxuICAgIHN3aXRjaCAocG9zaXRpb24uY29ubmVjdGlvblBhaXIub3ZlcmxheVkpIHtcclxuICAgICAgY2FzZSAndG9wJzpcclxuICAgICAgY2FzZSAnY2VudGVyJzpcclxuICAgICAgICB0aGlzLm1lbnVQb3NpdGlvbiA9ICdib3R0b20nO1xyXG4gICAgICBicmVhaztcclxuICAgICAgY2FzZSAnYm90dG9tJzpcclxuICAgICAgICB0aGlzLm1lbnVQb3NpdGlvbiA9ICd0b3AnO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=