678 lines
31 KiB
JavaScript
678 lines
31 KiB
JavaScript
|
import * as i0 from '@angular/core';
|
||
|
|
import { EventEmitter, Component, Output, Input, Injectable, ContentChildren, ContentChild, HostListener, NgModule } from '@angular/core';
|
||
|
|
import * as i1 from '@angular/common';
|
||
|
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
|
||
|
|
|
||
|
|
class Ng2DropdownButton {
|
||
|
|
constructor(element) {
|
||
|
|
this.element = element;
|
||
|
|
this.onMenuToggled = new EventEmitter();
|
||
|
|
this.showCaret = true;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name toggleMenu
|
||
|
|
* @desc emits event to toggle menu
|
||
|
|
*/
|
||
|
|
toggleMenu() {
|
||
|
|
this.onMenuToggled.emit(true);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name getPosition
|
||
|
|
* @desc returns position of the button
|
||
|
|
*/
|
||
|
|
getPosition() {
|
||
|
|
return this.element.nativeElement.getBoundingClientRect();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Ng2DropdownButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
Ng2DropdownButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: Ng2DropdownButton, selector: "ng2-dropdown-button", inputs: { showCaret: "showCaret" }, outputs: { onMenuToggled: "onMenuToggled" }, ngImport: i0, template: "<button class='ng2-dropdown-button' type=\"button\" (click)=\"toggleMenu()\" tabindex=\"0s\">\n <span class=\"ng2-dropdown-button__label\">\n <ng-content></ng-content>\n </span>\n\n <span class=\"ng2-dropdown-button__caret\" *ngIf=\"showCaret\">\n <svg enable-background=\"new 0 0 32 32\" height=\"16px\" id=\"\u0421\u043B\u043E\u0439_1\" version=\"1.1\" viewBox=\"0 0 32 32\" width=\"16px\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M24.285,11.284L16,19.571l-8.285-8.288c-0.395-0.395-1.034-0.395-1.429,0 c-0.394,0.395-0.394,1.035,0,1.43l8.999,9.002l0,0l0,0c0.394,0.395,1.034,0.395,1.428,0l8.999-9.002 c0.394-0.395,0.394-1.036,0-1.431C25.319,10.889,24.679,10.889,24.285,11.284z\" fill=\"#121313\" id=\"Expand_More\"/><g/><g/><g/><g/><g/><g/></svg>\n </span>\n</button>\n", styles: [".ng2-dropdown-button{font-family:Roboto,Helvetica Neue,Helvetica,Arial;background:#fff;padding:.45rem .25rem;font-size:14px;letter-spacing:.08rem;color:#444;outline:0;cursor:pointer;font-weight:400;border:none;border-bottom:1px solid #efefef;text-align:left;min-width:100px;width:100%;display:flex;flex-direction:row;max-width:150px}.ng2-dropdown-button:hover{color:#222}.ng2-dropdown-button:active,.ng2-dropdown-button:focus{color:#222;border-bottom:2px solid #2196F3}.ng2-dropdown-button__label{flex:1 1 95%}.ng2-dropdown-button__caret{width:12px;height:12px;display:flex;flex:1 1 6%}:host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button{border:none;min-width:40px;width:40px;border-radius:100%;transition:all .2s;text-align:center;height:40px;padding:.5em}:host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button:active{background:rgba(0,0,0,.2)}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownButton, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'ng2-dropdown-button', template: "<button class='ng2-dropdown-button' type=\"button\" (click)=\"toggleMenu()\" tabindex=\"0s\">\n <span class=\"ng2-dropdown-button__label\">\n <ng-content></ng-content>\n </span>\n\n <span class=\"ng2-dropdown-button__caret\" *ngIf=\"showCaret\">\n <svg enable-background=\"new 0 0 32 32\" height=\"16px\" id=\"\u0421\u043B\u043E\u0439_1\" version=\"1.1\" viewBox=\"0 0 32 32\" width=\"16px\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M24.285,11.284L16,19.571l-8.285-8.288c-0.395-0.395-1.034-0.395-1.429,0 c-0.394,0.395-0.394,1.035,0,1.43l8.999,9.002l0,0l0,0c0.394,0.395,1.034,0.395,1.428,0l8.999-9.002 c0.394-0.395,0.394-1.036,0-1.431C25.319,10.889,24.679,10.889,24.285,11.284z\" fill=\"#121313\" id=\"Expand_More\"/><g/><g/><g/><g/><g/><g/></svg>\n </span>\n</button>\n", styles: [".ng2-dropdown-button{font-family:Roboto,Helvetica Neue,Helvetica,Arial;background:#fff;padding:.45rem .25rem;font-size:14px;letter-spacing:.08rem;color:#444;outline:0;cursor:pointer;font-weight:400;border:none;border-bottom:1px solid #efefef;text-align:left;min-width:100px;width:100%;display:flex;flex-direction:row;max-width:150px}.ng2-dropdown-button:hover{color:#222}.ng2-dropdown-button:active,.ng2-dropdown-button:focus{color:#222;border-bottom:2px solid #2196F3}.ng2-dropdown-button__label{flex:1 1 95%}.ng2-dropdown-button__caret{width:12px;height:12px;display:flex;flex:1 1 6%}:host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button{border:none;min-width:40px;width:40px;border-radius:100%;transition:all .2s;text-align:center;height:40px;padding:.5em}:host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button:active{background:rgba(0,0,0,.2)}\n"] }]
|
||
|
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onMenuToggled: [{
|
||
|
|
type: Output
|
||
|
|
}], showCaret: [{
|
||
|
|
type: Input
|
||
|
|
}] } });
|
||
|
|
|
||
|
|
const KEYS = {
|
||
|
|
BACKSPACE: 9,
|
||
|
|
PREV: 38,
|
||
|
|
NEXT: 40,
|
||
|
|
ENTER: 13,
|
||
|
|
ESCAPE: 27
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* @name onSwitchNext
|
||
|
|
* @param index
|
||
|
|
* @param items
|
||
|
|
* @param state
|
||
|
|
*/
|
||
|
|
const onSwitchNext = (index, items, state) => {
|
||
|
|
if (index < items.length - 1) {
|
||
|
|
state.select(items[index + 1], true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* @name onSwitchPrev
|
||
|
|
* @param index
|
||
|
|
* @param items
|
||
|
|
* @param state
|
||
|
|
*/
|
||
|
|
const onSwitchPrev = (index, items, state) => {
|
||
|
|
if (index > 0) {
|
||
|
|
state.select(items[index - 1], true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* @name onBackspace
|
||
|
|
* @param index
|
||
|
|
* @param items
|
||
|
|
* @param state
|
||
|
|
*/
|
||
|
|
const onBackspace = (index, items, state) => {
|
||
|
|
if (index < items.length - 1) {
|
||
|
|
state.select(items[index + 1], true);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
state.select(items[0], true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
function onEscape() {
|
||
|
|
this.hide();
|
||
|
|
}
|
||
|
|
;
|
||
|
|
/**
|
||
|
|
* @name onItemClicked
|
||
|
|
* @param index
|
||
|
|
* @param items
|
||
|
|
* @param state
|
||
|
|
*/
|
||
|
|
const onItemClicked = (index, items, state) => {
|
||
|
|
return state.selectedItem ? state.selectedItem.click() : undefined;
|
||
|
|
};
|
||
|
|
const ACTIONS = {
|
||
|
|
[KEYS.BACKSPACE]: onBackspace,
|
||
|
|
[KEYS.PREV]: onSwitchPrev,
|
||
|
|
[KEYS.NEXT]: onSwitchNext,
|
||
|
|
[KEYS.ENTER]: onItemClicked,
|
||
|
|
[KEYS.ESCAPE]: onEscape
|
||
|
|
};
|
||
|
|
function arrowKeysHandler(event) {
|
||
|
|
if ([38, 40].indexOf(event.keyCode) > -1) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Ng2DropdownState {
|
||
|
|
constructor() {
|
||
|
|
this.onItemSelected = new EventEmitter();
|
||
|
|
this.onItemClicked = new EventEmitter();
|
||
|
|
this.onItemDestroyed = new EventEmitter();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name selectedItem
|
||
|
|
* @desc getter for _selectedItem
|
||
|
|
*/
|
||
|
|
get selectedItem() {
|
||
|
|
return this._selectedItem;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name selects a menu item and emits event
|
||
|
|
* @param item
|
||
|
|
*/
|
||
|
|
select(item, dispatchEvent = true) {
|
||
|
|
this._selectedItem = item;
|
||
|
|
if (!dispatchEvent || !item) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
item.focus();
|
||
|
|
this.onItemSelected.emit(item);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name unselect
|
||
|
|
* @desc sets _selectedItem as undefined
|
||
|
|
*/
|
||
|
|
unselect() {
|
||
|
|
this._selectedItem = undefined;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class DropdownStateService {
|
||
|
|
constructor() {
|
||
|
|
this.menuState = {
|
||
|
|
isVisible: false,
|
||
|
|
toString() {
|
||
|
|
return this.isVisible === true ? 'visible' : 'hidden';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
this.dropdownState = new Ng2DropdownState();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
DropdownStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
||
|
|
DropdownStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownStateService });
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownStateService, decorators: [{
|
||
|
|
type: Injectable
|
||
|
|
}] });
|
||
|
|
|
||
|
|
class Ng2MenuItem {
|
||
|
|
constructor(state, element) {
|
||
|
|
this.state = state;
|
||
|
|
this.element = element;
|
||
|
|
/**
|
||
|
|
* @preventClose
|
||
|
|
* @desc if true, clicking on the item won't close the dropdown
|
||
|
|
*/
|
||
|
|
this.preventClose = false;
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.state.dropdownState.onItemDestroyed.emit(this);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name isSelected
|
||
|
|
* @desc returns current selected item
|
||
|
|
*/
|
||
|
|
get isSelected() {
|
||
|
|
return this === this.state.dropdownState.selectedItem;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name click
|
||
|
|
* @desc emits select event
|
||
|
|
*/
|
||
|
|
select($event) {
|
||
|
|
this.state.dropdownState.select(this, true);
|
||
|
|
if ($event) {
|
||
|
|
$event.stopPropagation();
|
||
|
|
$event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name click
|
||
|
|
* @desc emits click event
|
||
|
|
*/
|
||
|
|
click() {
|
||
|
|
this.state.dropdownState.onItemClicked.emit(this);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name focus
|
||
|
|
*/
|
||
|
|
focus() {
|
||
|
|
this.element.nativeElement.children[0].focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Ng2MenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2MenuItem, deps: [{ token: DropdownStateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
Ng2MenuItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: Ng2MenuItem, selector: "ng2-menu-item", inputs: { preventClose: "preventClose", value: "value" }, ngImport: i0, template: `
|
||
|
|
<div
|
||
|
|
class="ng2-menu-item"
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
[class.ng2-menu-item--selected]="isSelected"
|
||
|
|
(keydown.enter)="click()"
|
||
|
|
(click)="click()"
|
||
|
|
(mouseover)="select()"
|
||
|
|
>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
`, isInline: true, styles: [".ng2-menu-item{font-family:Roboto,Helvetica Neue,Helvetica,Arial;background:#fff;color:#000000de;cursor:pointer;font-size:.9em;text-transform:none;font-weight:400;letter-spacing:.03em;height:48px;line-height:48px;padding:.3em 1.25rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:background .25s}.ng2-menu-item--selected{background:rgba(158,158,158,.2);outline:0}.ng2-menu-item:focus{outline:0}.ng2-menu-item:active{background:rgba(158,158,158,.4)}:host(ng2-menu-item) ::ng-deep [ng2-menu-item-icon]{vertical-align:middle;font-size:28px;width:1.5em;height:30px;color:#00000070}\n"] });
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2MenuItem, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'ng2-menu-item', template: `
|
||
|
|
<div
|
||
|
|
class="ng2-menu-item"
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
[class.ng2-menu-item--selected]="isSelected"
|
||
|
|
(keydown.enter)="click()"
|
||
|
|
(click)="click()"
|
||
|
|
(mouseover)="select()"
|
||
|
|
>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
`, styles: [".ng2-menu-item{font-family:Roboto,Helvetica Neue,Helvetica,Arial;background:#fff;color:#000000de;cursor:pointer;font-size:.9em;text-transform:none;font-weight:400;letter-spacing:.03em;height:48px;line-height:48px;padding:.3em 1.25rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:background .25s}.ng2-menu-item--selected{background:rgba(158,158,158,.2);outline:0}.ng2-menu-item:focus{outline:0}.ng2-menu-item:active{background:rgba(158,158,158,.4)}:host(ng2-menu-item) ::ng-deep [ng2-menu-item-icon]{vertical-align:middle;font-size:28px;width:1.5em;height:30px;color:#00000070}\n"] }]
|
||
|
|
}], ctorParameters: function () { return [{ type: DropdownStateService }, { type: i0.ElementRef }]; }, propDecorators: { preventClose: [{
|
||
|
|
type: Input
|
||
|
|
}], value: [{
|
||
|
|
type: Input
|
||
|
|
}] } });
|
||
|
|
|
||
|
|
class Ng2DropdownMenu {
|
||
|
|
constructor(dropdownState, element, renderer) {
|
||
|
|
this.dropdownState = dropdownState;
|
||
|
|
this.element = element;
|
||
|
|
this.renderer = renderer;
|
||
|
|
/**
|
||
|
|
* @name width
|
||
|
|
*/
|
||
|
|
this.width = 4;
|
||
|
|
/**
|
||
|
|
* @description if set to true, the first element of the dropdown will be automatically focused
|
||
|
|
* @name focusFirstElement
|
||
|
|
*/
|
||
|
|
this.focusFirstElement = true;
|
||
|
|
/**
|
||
|
|
* @name appendToBody
|
||
|
|
*/
|
||
|
|
this.appendToBody = true;
|
||
|
|
/**
|
||
|
|
* @name zIndex
|
||
|
|
*/
|
||
|
|
this.zIndex = 1000;
|
||
|
|
this.listeners = {
|
||
|
|
arrowHandler: undefined,
|
||
|
|
handleKeypress: undefined
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name show
|
||
|
|
* @shows menu and selects first item
|
||
|
|
*/
|
||
|
|
show(position, dynamic = true) {
|
||
|
|
const dc = typeof document !== 'undefined' ? document : undefined;
|
||
|
|
const wd = typeof window !== 'undefined' ? window : undefined;
|
||
|
|
if (!this.dropdownState.menuState.isVisible) {
|
||
|
|
// setting handlers
|
||
|
|
this.listeners.handleKeypress = this.renderer.listen(dc.body, 'keydown', this.handleKeypress.bind(this));
|
||
|
|
this.listeners.arrowHandler = this.renderer.listen(wd, 'keydown', arrowKeysHandler);
|
||
|
|
}
|
||
|
|
// update state
|
||
|
|
this.dropdownState.menuState.isVisible = true;
|
||
|
|
if (position) {
|
||
|
|
this.updatePosition(position, dynamic);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name hide
|
||
|
|
* @desc hides menu
|
||
|
|
*/
|
||
|
|
hide() {
|
||
|
|
this.dropdownState.menuState.isVisible = false;
|
||
|
|
// reset selected item state
|
||
|
|
this.dropdownState.dropdownState.unselect();
|
||
|
|
// call function to unlisten
|
||
|
|
this.listeners.arrowHandler && this.listeners.arrowHandler();
|
||
|
|
this.listeners.handleKeypress && this.listeners.handleKeypress();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name updatePosition
|
||
|
|
* @desc updates the menu position every time it is toggled
|
||
|
|
* @param position {ClientRect}
|
||
|
|
* @param dynamic {boolean}
|
||
|
|
*/
|
||
|
|
updatePosition(position, dynamic) {
|
||
|
|
this.position = position;
|
||
|
|
this.updateOnChange(dynamic);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name handleKeypress
|
||
|
|
* @desc executes functions on keyPress based on the key pressed
|
||
|
|
* @param $event
|
||
|
|
*/
|
||
|
|
handleKeypress($event) {
|
||
|
|
const key = $event.keyCode;
|
||
|
|
const items = this.items.toArray();
|
||
|
|
const index = items.indexOf(this.dropdownState.dropdownState.selectedItem);
|
||
|
|
if (!ACTIONS.hasOwnProperty(key)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
ACTIONS[key].call(this, index, items, this.dropdownState.dropdownState);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name getMenuElement
|
||
|
|
*/
|
||
|
|
getMenuElement() {
|
||
|
|
return this.element.nativeElement.children[0];
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name calcPositionOffset
|
||
|
|
* @param position
|
||
|
|
*/
|
||
|
|
calcPositionOffset(position) {
|
||
|
|
const wd = typeof window !== 'undefined' ? window : undefined;
|
||
|
|
const dc = typeof document !== 'undefined' ? document : undefined;
|
||
|
|
if (!wd || !dc || !position) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const element = this.getMenuElement();
|
||
|
|
const supportPageOffset = wd.pageXOffset !== undefined;
|
||
|
|
const isCSS1Compat = (dc.compatMode || '') === 'CSS1Compat';
|
||
|
|
const x = supportPageOffset
|
||
|
|
? wd.pageXOffset
|
||
|
|
: isCSS1Compat
|
||
|
|
? dc.documentElement.scrollLeft
|
||
|
|
: dc.body.scrollLeft;
|
||
|
|
const y = supportPageOffset
|
||
|
|
? wd.pageYOffset
|
||
|
|
: isCSS1Compat
|
||
|
|
? dc.documentElement.scrollTop
|
||
|
|
: dc.body.scrollTop;
|
||
|
|
let { top, left } = this.applyOffset(`${position.top + (this.appendToBody ? y - 15 : 0)}px`, `${position.left + x - 5}px`);
|
||
|
|
const clientWidth = element.clientWidth;
|
||
|
|
const clientHeight = element.clientHeight;
|
||
|
|
const marginFromBottom = parseInt(top) + clientHeight + (this.appendToBody ? 0 : y - 15);
|
||
|
|
const marginFromRight = parseInt(left) + clientWidth;
|
||
|
|
const windowScrollHeight = wd.innerHeight + wd.scrollY;
|
||
|
|
const windowScrollWidth = wd.innerWidth + wd.scrollX;
|
||
|
|
if (marginFromBottom >= windowScrollHeight) {
|
||
|
|
top = `${parseInt(top.replace('px', '')) - clientHeight}px`;
|
||
|
|
}
|
||
|
|
if (marginFromRight >= windowScrollWidth) {
|
||
|
|
const marginRight = marginFromRight - windowScrollWidth + 30;
|
||
|
|
left = `${parseInt(left.replace('px', '')) - marginRight}px`;
|
||
|
|
}
|
||
|
|
return { top, left };
|
||
|
|
}
|
||
|
|
applyOffset(top, left) {
|
||
|
|
if (!this.offset) {
|
||
|
|
return { top, left };
|
||
|
|
}
|
||
|
|
const offset = this.offset.split(' ');
|
||
|
|
if (!offset[1]) {
|
||
|
|
offset[1] = '0';
|
||
|
|
}
|
||
|
|
top = `${parseInt(top.replace('px', '')) + parseInt(offset[0])}px`;
|
||
|
|
left = `${parseInt(left.replace('px', '')) + parseInt(offset[1])}px`;
|
||
|
|
return { top, left };
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
const dc = typeof document !== 'undefined' ? document : undefined;
|
||
|
|
if (this.appendToBody) {
|
||
|
|
// append menu element to the body
|
||
|
|
dc.body.appendChild(this.element.nativeElement);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updateOnChange(dynamic = true) {
|
||
|
|
const element = this.getMenuElement();
|
||
|
|
const position = this.calcPositionOffset(this.position);
|
||
|
|
if (position) {
|
||
|
|
this.renderer.setStyle(element, 'top', position.top.toString());
|
||
|
|
this.renderer.setStyle(element, 'left', position.left.toString());
|
||
|
|
}
|
||
|
|
// select first item unless user disabled this option
|
||
|
|
if (this.focusFirstElement &&
|
||
|
|
this.items.first &&
|
||
|
|
!this.dropdownState.dropdownState.selectedItem) {
|
||
|
|
this.dropdownState.dropdownState.select(this.items.first, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
const elem = this.element.nativeElement;
|
||
|
|
elem.parentNode.removeChild(elem);
|
||
|
|
if (this.listeners.handleKeypress) {
|
||
|
|
this.listeners.handleKeypress();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Ng2DropdownMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownMenu, deps: [{ token: DropdownStateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
Ng2DropdownMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: Ng2DropdownMenu, selector: "ng2-dropdown-menu", inputs: { width: "width", focusFirstElement: "focusFirstElement", offset: "offset", appendToBody: "appendToBody", zIndex: "zIndex" }, queries: [{ propertyName: "items", predicate: Ng2MenuItem, descendants: true }], ngImport: i0, template: `
|
||
|
|
<!-- MENU -->
|
||
|
|
<div
|
||
|
|
class="ng2-dropdown-menu ng2-dropdown-menu---width--{{ width }}"
|
||
|
|
[class.ng2-dropdown-menu--inside-element]="!appendToBody"
|
||
|
|
[class.ng2-dropdown-menu--open]="dropdownState.menuState.isVisible"
|
||
|
|
[style.z-index]="zIndex"
|
||
|
|
[@fade]="dropdownState.menuState.toString()"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="ng2-dropdown-menu__options-container"
|
||
|
|
[@opacity]="dropdownState.menuState.toString()"
|
||
|
|
>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BACKDROP -->
|
||
|
|
<div
|
||
|
|
class="ng2-dropdown-backdrop"
|
||
|
|
*ngIf="dropdownState.menuState.isVisible"
|
||
|
|
(click)="hide()"
|
||
|
|
></div>
|
||
|
|
`, isInline: true, styles: [":host{display:block}.ng2-dropdown-menu{overflow-y:auto;box-shadow:0 1px 2px #0000004d;position:absolute;padding:.5em 0;background:#fff;border-radius:1px;max-height:400px;width:260px;min-height:0;display:block}.ng2-dropdown-menu.ng2-dropdown-menu--inside-element{position:fixed}.ng2-dropdown-menu.ng2-dropdown-menu--width--2{width:200px}.ng2-dropdown-menu.ng2-dropdown-menu--width--4{width:260px}.ng2-dropdown-menu.ng2-dropdown-menu--width--6{width:320px}.ng2-dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden}:host ::ng-deep .ng2-menu-divider{height:1px;min-height:1px;max-height:1px;width:100%;display:block;background:#f9f9f9}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
||
|
|
trigger('fade', [
|
||
|
|
state('visible', style({ opacity: 1, height: '*', width: '*' })),
|
||
|
|
state('hidden', style({ opacity: 0, overflow: 'hidden', height: 0, width: 0 })),
|
||
|
|
transition('hidden => visible', [
|
||
|
|
animate('250ms ease-in', style({ opacity: 1, height: '*', width: '*' }))
|
||
|
|
]),
|
||
|
|
transition('visible => hidden', [
|
||
|
|
animate('350ms ease-out', style({ opacity: 0, width: 0, height: 0 }))
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
trigger('opacity', [
|
||
|
|
transition('hidden => visible', [
|
||
|
|
animate('450ms ease-in', keyframes([
|
||
|
|
style({ opacity: 0, offset: 0 }),
|
||
|
|
style({ opacity: 1, offset: 1 })
|
||
|
|
]))
|
||
|
|
]),
|
||
|
|
transition('visible => hidden', [
|
||
|
|
animate('250ms ease-out', keyframes([
|
||
|
|
style({ opacity: 1, offset: 0 }),
|
||
|
|
style({ opacity: 0.5, offset: 0.3 }),
|
||
|
|
style({ opacity: 0, offset: 1 })
|
||
|
|
]))
|
||
|
|
])
|
||
|
|
])
|
||
|
|
] });
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownMenu, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'ng2-dropdown-menu', template: `
|
||
|
|
<!-- MENU -->
|
||
|
|
<div
|
||
|
|
class="ng2-dropdown-menu ng2-dropdown-menu---width--{{ width }}"
|
||
|
|
[class.ng2-dropdown-menu--inside-element]="!appendToBody"
|
||
|
|
[class.ng2-dropdown-menu--open]="dropdownState.menuState.isVisible"
|
||
|
|
[style.z-index]="zIndex"
|
||
|
|
[@fade]="dropdownState.menuState.toString()"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="ng2-dropdown-menu__options-container"
|
||
|
|
[@opacity]="dropdownState.menuState.toString()"
|
||
|
|
>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BACKDROP -->
|
||
|
|
<div
|
||
|
|
class="ng2-dropdown-backdrop"
|
||
|
|
*ngIf="dropdownState.menuState.isVisible"
|
||
|
|
(click)="hide()"
|
||
|
|
></div>
|
||
|
|
`, animations: [
|
||
|
|
trigger('fade', [
|
||
|
|
state('visible', style({ opacity: 1, height: '*', width: '*' })),
|
||
|
|
state('hidden', style({ opacity: 0, overflow: 'hidden', height: 0, width: 0 })),
|
||
|
|
transition('hidden => visible', [
|
||
|
|
animate('250ms ease-in', style({ opacity: 1, height: '*', width: '*' }))
|
||
|
|
]),
|
||
|
|
transition('visible => hidden', [
|
||
|
|
animate('350ms ease-out', style({ opacity: 0, width: 0, height: 0 }))
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
trigger('opacity', [
|
||
|
|
transition('hidden => visible', [
|
||
|
|
animate('450ms ease-in', keyframes([
|
||
|
|
style({ opacity: 0, offset: 0 }),
|
||
|
|
style({ opacity: 1, offset: 1 })
|
||
|
|
]))
|
||
|
|
]),
|
||
|
|
transition('visible => hidden', [
|
||
|
|
animate('250ms ease-out', keyframes([
|
||
|
|
style({ opacity: 1, offset: 0 }),
|
||
|
|
style({ opacity: 0.5, offset: 0.3 }),
|
||
|
|
style({ opacity: 0, offset: 1 })
|
||
|
|
]))
|
||
|
|
])
|
||
|
|
])
|
||
|
|
], styles: [":host{display:block}.ng2-dropdown-menu{overflow-y:auto;box-shadow:0 1px 2px #0000004d;position:absolute;padding:.5em 0;background:#fff;border-radius:1px;max-height:400px;width:260px;min-height:0;display:block}.ng2-dropdown-menu.ng2-dropdown-menu--inside-element{position:fixed}.ng2-dropdown-menu.ng2-dropdown-menu--width--2{width:200px}.ng2-dropdown-menu.ng2-dropdown-menu--width--4{width:260px}.ng2-dropdown-menu.ng2-dropdown-menu--width--6{width:320px}.ng2-dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden}:host ::ng-deep .ng2-menu-divider{height:1px;min-height:1px;max-height:1px;width:100%;display:block;background:#f9f9f9}\n"] }]
|
||
|
|
}], ctorParameters: function () { return [{ type: DropdownStateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { width: [{
|
||
|
|
type: Input
|
||
|
|
}], focusFirstElement: [{
|
||
|
|
type: Input
|
||
|
|
}], offset: [{
|
||
|
|
type: Input
|
||
|
|
}], appendToBody: [{
|
||
|
|
type: Input
|
||
|
|
}], zIndex: [{
|
||
|
|
type: Input
|
||
|
|
}], items: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [Ng2MenuItem, { descendants: true }]
|
||
|
|
}] } });
|
||
|
|
|
||
|
|
class Ng2Dropdown {
|
||
|
|
constructor(state) {
|
||
|
|
this.state = state;
|
||
|
|
this.dynamicUpdate = true;
|
||
|
|
// outputs
|
||
|
|
this.onItemClicked = new EventEmitter();
|
||
|
|
this.onItemSelected = new EventEmitter();
|
||
|
|
this.onShow = new EventEmitter();
|
||
|
|
this.onHide = new EventEmitter();
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
this.state.dropdownState.onItemClicked.subscribe(item => {
|
||
|
|
this.onItemClicked.emit(item);
|
||
|
|
if (item.preventClose) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.hide.call(this);
|
||
|
|
});
|
||
|
|
if (this.button) {
|
||
|
|
this.button.onMenuToggled.subscribe(() => {
|
||
|
|
this.toggleMenu();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.state.dropdownState.onItemSelected.subscribe(item => {
|
||
|
|
this.onItemSelected.emit(item);
|
||
|
|
});
|
||
|
|
this.state.dropdownState.onItemDestroyed.subscribe((item) => {
|
||
|
|
let newSelectedItem;
|
||
|
|
const items = this.menu.items.toArray();
|
||
|
|
if (item !== this.state.dropdownState.selectedItem) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.menu.focusFirstElement) {
|
||
|
|
newSelectedItem =
|
||
|
|
item === items[0] && items.length > 1
|
||
|
|
? items[1]
|
||
|
|
: items[0];
|
||
|
|
}
|
||
|
|
this.state.dropdownState.select(newSelectedItem);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name toggleMenu
|
||
|
|
* @desc toggles menu visibility
|
||
|
|
*/
|
||
|
|
toggleMenu(position = this.button.getPosition()) {
|
||
|
|
this.state.menuState.isVisible ? this.hide() : this.show(position);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* - hides dropdown
|
||
|
|
* @name hide
|
||
|
|
*/
|
||
|
|
hide() {
|
||
|
|
this.menu.hide();
|
||
|
|
this.onHide.emit(this);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* - shows dropdown
|
||
|
|
* @name show
|
||
|
|
* @param position
|
||
|
|
*/
|
||
|
|
show(position = this.button.getPosition()) {
|
||
|
|
this.menu.show(position, this.dynamicUpdate);
|
||
|
|
this.onShow.emit(this);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @name scrollListener
|
||
|
|
*/
|
||
|
|
scrollListener() {
|
||
|
|
if (this.button && this.dynamicUpdate) {
|
||
|
|
this.menu.updatePosition(this.button.getPosition(), true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Ng2Dropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2Dropdown, deps: [{ token: DropdownStateService }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
Ng2Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: Ng2Dropdown, selector: "ng2-dropdown", inputs: { dynamicUpdate: "dynamicUpdate" }, outputs: { onItemClicked: "onItemClicked", onItemSelected: "onItemSelected", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "window:scroll": "scrollListener()" } }, providers: [DropdownStateService], queries: [{ propertyName: "button", first: true, predicate: Ng2DropdownButton, descendants: true, static: true }, { propertyName: "menu", first: true, predicate: Ng2DropdownMenu, descendants: true, static: true }], ngImport: i0, template: `
|
||
|
|
<div class="ng2-dropdown-container">
|
||
|
|
<ng-content select="ng2-dropdown-button"></ng-content>
|
||
|
|
<ng-content select="ng2-dropdown-menu"></ng-content>
|
||
|
|
</div>
|
||
|
|
`, isInline: true });
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2Dropdown, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'ng2-dropdown',
|
||
|
|
template: `
|
||
|
|
<div class="ng2-dropdown-container">
|
||
|
|
<ng-content select="ng2-dropdown-button"></ng-content>
|
||
|
|
<ng-content select="ng2-dropdown-menu"></ng-content>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
providers: [DropdownStateService]
|
||
|
|
}]
|
||
|
|
}], ctorParameters: function () { return [{ type: DropdownStateService }]; }, propDecorators: { button: [{
|
||
|
|
type: ContentChild,
|
||
|
|
args: [Ng2DropdownButton, { static: true }]
|
||
|
|
}], menu: [{
|
||
|
|
type: ContentChild,
|
||
|
|
args: [Ng2DropdownMenu, { static: true }]
|
||
|
|
}], dynamicUpdate: [{
|
||
|
|
type: Input
|
||
|
|
}], onItemClicked: [{
|
||
|
|
type: Output
|
||
|
|
}], onItemSelected: [{
|
||
|
|
type: Output
|
||
|
|
}], onShow: [{
|
||
|
|
type: Output
|
||
|
|
}], onHide: [{
|
||
|
|
type: Output
|
||
|
|
}], scrollListener: [{
|
||
|
|
type: HostListener,
|
||
|
|
args: ['window:scroll']
|
||
|
|
}] } });
|
||
|
|
|
||
|
|
class Ng2DropdownModule {
|
||
|
|
}
|
||
|
|
Ng2DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
Ng2DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownModule, declarations: [Ng2Dropdown,
|
||
|
|
Ng2MenuItem,
|
||
|
|
Ng2DropdownButton,
|
||
|
|
Ng2DropdownMenu], imports: [CommonModule], exports: [Ng2MenuItem,
|
||
|
|
Ng2DropdownButton,
|
||
|
|
Ng2DropdownMenu,
|
||
|
|
Ng2Dropdown] });
|
||
|
|
Ng2DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownModule, imports: [[
|
||
|
|
CommonModule
|
||
|
|
]] });
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Ng2DropdownModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
exports: [
|
||
|
|
Ng2MenuItem,
|
||
|
|
Ng2DropdownButton,
|
||
|
|
Ng2DropdownMenu,
|
||
|
|
Ng2Dropdown
|
||
|
|
],
|
||
|
|
declarations: [
|
||
|
|
Ng2Dropdown,
|
||
|
|
Ng2MenuItem,
|
||
|
|
Ng2DropdownButton,
|
||
|
|
Ng2DropdownMenu,
|
||
|
|
],
|
||
|
|
imports: [
|
||
|
|
CommonModule
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generated bundle index. Do not edit.
|
||
|
|
*/
|
||
|
|
|
||
|
|
export { DropdownStateService, Ng2Dropdown, Ng2DropdownButton, Ng2DropdownMenu, Ng2DropdownModule, Ng2MenuItem };
|
||
|
|
//# sourceMappingURL=ng2-material-dropdown.mjs.map
|