import * as i0 from '@angular/core'; import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import * as i3 from 'primeng/button'; import { ButtonModule } from 'primeng/button'; import * as i2 from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple'; import * as i4 from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip'; import { DomHandler } from 'primeng/dom'; import * as i5 from '@angular/router'; import { RouterModule } from '@angular/router'; class SpeedDial { constructor(el, cd) { this.el = el; this.cd = cd; this.model = null; this.direction = 'up'; this.transitionDelay = 30; this.type = 'linear'; this.radius = 0; this.mask = false; this.disabled = false; this.hideOnClickOutside = true; this.showIcon = 'pi pi-plus'; this.rotateAnimation = true; this.onVisibleChange = new EventEmitter(); this.visibleChange = new EventEmitter(); this.onClick = new EventEmitter(); this.onShow = new EventEmitter(); this.onHide = new EventEmitter(); this.isItemClicked = false; this._visible = false; } get visible() { return this._visible; } set visible(value) { this._visible = value; if (this._visible) { this.bindDocumentClickListener(); } else { this.unbindDocumentClickListener(); } } ngAfterViewInit() { if (this.type !== 'linear') { const button = DomHandler.findSingle(this.container.nativeElement, '.p-speeddial-button'); const firstItem = DomHandler.findSingle(this.list.nativeElement, '.p-speeddial-item'); if (button && firstItem) { const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth); const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight); this.list.nativeElement.style.setProperty('--item-diff-x', `${wDiff / 2}px`); this.list.nativeElement.style.setProperty('--item-diff-y', `${hDiff / 2}px`); } } } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'button': this.buttonTemplate = item.template; break; } }); } show() { this.onVisibleChange.emit(true); this.visibleChange.emit(true); this._visible = true; this.onShow.emit(); this.bindDocumentClickListener(); this.cd.markForCheck(); } hide() { this.onVisibleChange.emit(false); this.visibleChange.emit(false); this._visible = false; this.onHide.emit(); this.unbindDocumentClickListener(); this.cd.markForCheck(); } onButtonClick(event) { this.visible ? this.hide() : this.show(); this.onClick.emit(event); this.isItemClicked = true; } onItemClick(e, item) { if (item.command) { item.command({ originalEvent: e, item }); } this.hide(); this.isItemClicked = true; } calculatePointStyle(index) { const type = this.type; if (type !== 'linear') { const length = this.model.length; const radius = this.radius || (length * 20); if (type === 'circle') { const step = 2 * Math.PI / length; return { left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`, top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`, }; } else if (type === 'semi-circle') { const direction = this.direction; const step = Math.PI / (length - 1); const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`; const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`; if (direction === 'up') { return { left: x, bottom: y }; } else if (direction === 'down') { return { left: x, top: y }; } else if (direction === 'left') { return { right: y, top: x }; } else if (direction === 'right') { return { left: y, top: x }; } } else if (type === 'quarter-circle') { const direction = this.direction; const step = Math.PI / (2 * (length - 1)); const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`; const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`; if (direction === 'up-left') { return { right: x, bottom: y }; } else if (direction === 'up-right') { return { left: x, bottom: y }; } else if (direction === 'down-left') { return { right: y, top: x }; } else if (direction === 'down-right') { return { left: y, top: x }; } } } return {}; } calculateTransitionDelay(index) { const length = this.model.length; return (this.visible ? index : length - index - 1) * this.transitionDelay; } containerClass() { return { ['p-speeddial p-component' + ` p-speeddial-${this.type}`]: true, [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle', 'p-speeddial-opened': this.visible, 'p-disabled': this.disabled }; } buttonClass() { return { 'p-speeddial-button p-button-rounded': true, 'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon, [this.buttonClassName]: true }; } get buttonIconClass() { return ((!this.visible && this.showIcon) || !this.hideIcon) ? this.showIcon : this.hideIcon; } getItemStyle(index) { const transitionDelay = this.calculateTransitionDelay(index); const pointStyle = this.calculatePointStyle(index); return Object.assign({ transitionDelay: `${transitionDelay}ms` }, pointStyle); } isClickableRouterLink(item) { return item.routerLink && !this.disabled && !item.disabled; } isOutsideClicked(event) { return this.container && !(this.container.nativeElement.isSameNode(event.target) || this.container.nativeElement.contains(event.target) || this.isItemClicked); } bindDocumentClickListener() { if (!this.documentClickListener && this.hideOnClickOutside) { this.documentClickListener = (event) => { if (this.visible && this.isOutsideClicked(event)) { this.hide(); } this.isItemClicked = false; }; document.addEventListener('click', this.documentClickListener); } } unbindDocumentClickListener() { if (this.documentClickListener) { document.removeEventListener('click', this.documentClickListener); this.documentClickListener = null; } } ngOnDestroy() { this.unbindDocumentClickListener(); } } SpeedDial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); SpeedDial.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SpeedDial, selector: "p-speedDial", inputs: { id: "id", model: "model", visible: "visible", style: "style", className: "className", direction: "direction", transitionDelay: "transitionDelay", type: "type", radius: "radius", mask: "mask", disabled: "disabled", hideOnClickOutside: "hideOnClickOutside", buttonStyle: "buttonStyle", buttonClassName: "buttonClassName", maskStyle: "maskStyle", maskClassName: "maskClassName", showIcon: "showIcon", hideIcon: "hideIcon", rotateAnimation: "rotateAnimation" }, outputs: { onVisibleChange: "onVisibleChange", visibleChange: "visibleChange", onClick: "onClick", onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: `
`, isInline: true, styles: [".p-speeddial{position:absolute;display:flex;z-index:1}.p-speeddial-list{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;transition:top 0s linear .2s;pointer-events:none}.p-speeddial-item{transform:scale(0);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1) 0ms,opacity .8s;will-change:transform}.p-speeddial-action{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;overflow:hidden;cursor:pointer}.p-speeddial-circle .p-speeddial-item,.p-speeddial-semi-circle .p-speeddial-item,.p-speeddial-quarter-circle .p-speeddial-item{position:absolute}.p-speeddial-rotate{transition:transform .25s cubic-bezier(.4,0,.2,1) 0ms;will-change:transform}.p-speeddial-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .25s cubic-bezier(.25,.8,.25,1)}.p-speeddial-mask-visible{pointer-events:none;opacity:1;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.p-speeddial-opened .p-speeddial-list{pointer-events:auto}.p-speeddial-opened .p-speeddial-item{transform:scale(1);opacity:1}.p-speeddial-opened .p-speeddial-rotate{transform:rotate(45deg)}.p-speeddial-direction-up{align-items:center;flex-direction:column-reverse}.p-speeddial-direction-up .p-speeddial-list{flex-direction:column-reverse}.p-speeddial-direction-down{align-items:center;flex-direction:column}.p-speeddial-direction-down .p-speeddial-list{flex-direction:column}.p-speeddial-direction-left{justify-content:center;flex-direction:row-reverse}.p-speeddial-direction-left .p-speeddial-list{flex-direction:row-reverse}.p-speeddial-direction-right{justify-content:center;flex-direction:row}.p-speeddial-direction-right .p-speeddial-list{flex-direction:row}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.Ripple, selector: "[pRipple]" }, { type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDial, decorators: [{ type: Component, args: [{ selector: 'p-speedDial', template: `
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-speeddial{position:absolute;display:flex;z-index:1}.p-speeddial-list{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;transition:top 0s linear .2s;pointer-events:none}.p-speeddial-item{transform:scale(0);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1) 0ms,opacity .8s;will-change:transform}.p-speeddial-action{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;overflow:hidden;cursor:pointer}.p-speeddial-circle .p-speeddial-item,.p-speeddial-semi-circle .p-speeddial-item,.p-speeddial-quarter-circle .p-speeddial-item{position:absolute}.p-speeddial-rotate{transition:transform .25s cubic-bezier(.4,0,.2,1) 0ms;will-change:transform}.p-speeddial-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .25s cubic-bezier(.25,.8,.25,1)}.p-speeddial-mask-visible{pointer-events:none;opacity:1;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.p-speeddial-opened .p-speeddial-list{pointer-events:auto}.p-speeddial-opened .p-speeddial-item{transform:scale(1);opacity:1}.p-speeddial-opened .p-speeddial-rotate{transform:rotate(45deg)}.p-speeddial-direction-up{align-items:center;flex-direction:column-reverse}.p-speeddial-direction-up .p-speeddial-list{flex-direction:column-reverse}.p-speeddial-direction-down{align-items:center;flex-direction:column}.p-speeddial-direction-down .p-speeddial-list{flex-direction:column}.p-speeddial-direction-left{justify-content:center;flex-direction:row-reverse}.p-speeddial-direction-left .p-speeddial-list{flex-direction:row-reverse}.p-speeddial-direction-right{justify-content:center;flex-direction:row}.p-speeddial-direction-right .p-speeddial-list{flex-direction:row}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{ type: Input }], model: [{ type: Input }], visible: [{ type: Input }], style: [{ type: Input }], className: [{ type: Input }], direction: [{ type: Input }], transitionDelay: [{ type: Input }], type: [{ type: Input }], radius: [{ type: Input }], mask: [{ type: Input }], disabled: [{ type: Input }], hideOnClickOutside: [{ type: Input }], buttonStyle: [{ type: Input }], buttonClassName: [{ type: Input }], maskStyle: [{ type: Input }], maskClassName: [{ type: Input }], showIcon: [{ type: Input }], hideIcon: [{ type: Input }], rotateAnimation: [{ type: Input }], onVisibleChange: [{ type: Output }], visibleChange: [{ type: Output }], onClick: [{ type: Output }], onShow: [{ type: Output }], onHide: [{ type: Output }], container: [{ type: ViewChild, args: ['container'] }], list: [{ type: ViewChild, args: ['list'] }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }] } }); class SpeedDialModule { } SpeedDialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); SpeedDialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, declarations: [SpeedDial], imports: [CommonModule, ButtonModule, RippleModule, TooltipModule, RouterModule], exports: [SpeedDial, SharedModule, ButtonModule, TooltipModule, RouterModule] }); SpeedDialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, imports: [[CommonModule, ButtonModule, RippleModule, TooltipModule, RouterModule], SharedModule, ButtonModule, TooltipModule, RouterModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, ButtonModule, RippleModule, TooltipModule, RouterModule], exports: [SpeedDial, SharedModule, ButtonModule, TooltipModule, RouterModule], declarations: [SpeedDial] }] }] }); /** * Generated bundle index. Do not edit. */ export { SpeedDial, SpeedDialModule };