primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
893 lines (888 loc) • 45.6 kB
JavaScript
export * from 'primeng/types/speeddial';
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { uuid, findSingle, find, focus, hasClass } from '@primeuix/utils';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ButtonDirective } from 'primeng/button';
import { Plus } from '@primeicons/angular/plus';
import * as i2 from 'primeng/tooltip';
import { TooltipModule } from 'primeng/tooltip';
import { asapScheduler } from 'rxjs';
import { style } from '@primeuix/styles/speeddial';
import { BaseStyle } from 'primeng/base';
/* Direction */
const inlineStyles = {
root: ({ instance }) => {
const direction = instance.direction();
return {
alignItems: (direction === 'up' || direction === 'down') && 'center',
justifyContent: (direction === 'left' || direction === 'right') && 'center',
flexDirection: direction === 'up' ? 'column-reverse' : direction === 'down' ? 'column' : direction === 'left' ? 'row-reverse' : direction === 'right' ? 'row' : null
};
},
list: ({ instance }) => {
const direction = instance.direction();
return {
flexDirection: direction === 'up' ? 'column-reverse' : direction === 'down' ? 'column' : direction === 'left' ? 'row-reverse' : direction === 'right' ? 'row' : null
};
}
};
const classes = {
root: ({ instance }) => {
const type = instance.type();
const direction = instance.direction();
return [
`p-speeddial p-component p-speeddial-${type}`,
{
[`p-speeddial-direction-${direction}`]: type !== 'circle',
'p-speeddial-open': instance.visible(),
'p-disabled': instance.disabled()
}
];
},
pcButton: ({ instance }) => [
'p-button-icon-only p-speeddial-button p-button-rounded',
{
'p-speeddial-rotate': instance.rotateAnimation() && !instance.hideIcon()
}
],
list: 'p-speeddial-list',
item: ({ instance, item, i }) => ['p-speeddial-item', { 'p-hidden': item.visible === false, 'p-focus': instance.focusedOptionId() == instance.$id() + '_' + i }],
pcAction: 'p-speeddial-action',
actionIcon: 'p-speeddial-action-icon',
mask: 'p-speeddial-mask p-overlay-mask'
};
class SpeedDialStyle extends BaseStyle {
name = 'speeddial';
style = style;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialStyle, decorators: [{
type: Injectable
}] });
/**
*
* When pressed, a floating action button can display multiple primary actions that can be performed on a page.
*
* [Live Demo](https://www.primeng.org/speeddial/)
*
* @module speeddialstyle
*
*/
var SpeedDialClasses;
(function (SpeedDialClasses) {
/**
* Class name of the root element
*/
SpeedDialClasses["root"] = "p-speeddial";
/**
* Class name of the button element
*/
SpeedDialClasses["pcButton"] = "p-speeddial-button";
/**
* Class name of the list element
*/
SpeedDialClasses["list"] = "p-speeddial-list";
/**
* Class name of the item element
*/
SpeedDialClasses["item"] = "p-speeddial-item";
/**
* Class name of the action element
*/
SpeedDialClasses["pcAction"] = "p-speeddial-action";
/**
* Class name of the action icon element
*/
SpeedDialClasses["actionIcon"] = "p-speeddial-action-icon";
/**
* Class name of the mask element
*/
SpeedDialClasses["mask"] = "p-speeddial-mask";
})(SpeedDialClasses || (SpeedDialClasses = {}));
const SPEED_DIAL_INSTANCE = new InjectionToken('SPEED_DIAL_INSTANCE');
/**
* When pressed, a floating action button can display multiple primary actions that can be performed on a page.
* @group Components
*/
class SpeedDial extends BaseComponent {
componentName = 'SpeedDial';
$pcSpeedDial = inject(SPEED_DIAL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('host'));
}
/**
* List of items id.
* @group Props
*/
id = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
/**
* Inline style of the element.
* @group Props
*/
style = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
/**
* Style class of the element.
* @group Props
*/
className = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
/**
* MenuModel instance to define the action items.
* @group Props
*/
$model = input(null, { ...(ngDevMode ? { debugName: "$model" } : /* istanbul ignore next */ {}), alias: 'model' });
/**
* Specifies the visibility of the overlay.
* @defaultValue false
* @group Props
*/
visible = model(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
/**
* Specifies the opening direction of actions.
* @gruop Props
*/
direction = input('up', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
/**
* Transition delay step for each action item.
* @group Props
*/
transitionDelay = input(30, { ...(ngDevMode ? { debugName: "transitionDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Specifies the opening type of actions.
* @group Props
*/
type = input('linear', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
/**
* Radius for *circle types.
* @group Props
*/
radius = input(0, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Whether to show a mask element behind the speeddial.
* @group Props
*/
mask = input(false, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether the component is disabled.
* @group Props
*/
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether the actions close when clicked outside.
* @group Props
*/
hideOnClickOutside = input(true, { ...(ngDevMode ? { debugName: "hideOnClickOutside" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Inline style of the button element.
* @group Props
*/
buttonStyle = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
/**
* Style class of the button element.
* @group Props
*/
buttonClassName = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "buttonClassName" }] : /* istanbul ignore next */ []));
/**
* Inline style of the mask element.
* @group Props
*/
maskStyle = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "maskStyle" }] : /* istanbul ignore next */ []));
/**
* Style class of the mask element.
* @group Props
*/
maskClassName = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "maskClassName" }] : /* istanbul ignore next */ []));
/**
* Show icon of the button element.
* @group Props
*/
showIcon = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showIcon" }] : /* istanbul ignore next */ []));
/**
* Hide icon of the button element.
* @group Props
*/
hideIcon = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "hideIcon" }] : /* istanbul ignore next */ []));
/**
* Defined to rotate showIcon when hideIcon is not present.
* @group Props
*/
rotateAnimation = input(true, { ...(ngDevMode ? { debugName: "rotateAnimation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Defines a string value that labels an interactive element.
* @group Props
*/
ariaLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
/**
* Identifier of the underlying input element.
* @group Props
*/
ariaLabelledBy = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
/**
* Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'.
* @group Props
*/
tooltipOptions = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "tooltipOptions" }] : /* istanbul ignore next */ []));
/**
* Configuration object forwarded to the Button component.
* @group Props
*/
buttonProps = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "buttonProps" }] : /* istanbul ignore next */ []));
/**
* Fired when the visibility of element changed.
* @param {boolean} boolean - Visibility value.
* @group Emits
*/
onVisibleChange = output();
/**
* Fired when the button element clicked.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
onClick = output();
/**
* Fired when the actions are visible.
* @param {Event} event - Browser event.
* @group Emits
*/
onShow = output();
/**
* Fired when the actions are hidden.
* @param {Event} event - Browser event.
* @group Emits
*/
onHide = output();
list = viewChild('list', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
/**
* Custom button template.
* @param {SpeedDialButtonTemplateContext} context - button context.
* @see {@link SpeedDialButtonTemplateContext}
* @group Templates
*/
buttonTemplate = contentChild('button', { ...(ngDevMode ? { debugName: "buttonTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom item template.
* @param {SpeedDialItemTemplateContext} context - item context.
* @see {@link SpeedDialItemTemplateContext}
* @group Templates
*/
itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom icon template.
* @group Templates
*/
iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
isItemClicked = false;
documentClickListener;
focusedOptionIndex = signal(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : /* istanbul ignore next */ []));
focused = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
_componentStyle = inject(SpeedDialStyle);
generatedId = uuid('pn_id_');
$id = computed(() => this.id() || this.generatedId, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$id" }] : /* istanbul ignore next */ []));
listId = computed(() => this.$id() + '_list', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
itemAriaControls = computed(() => this.$id() + '_item', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "itemAriaControls" }] : /* istanbul ignore next */ []));
focusedOptionId = computed(() => (this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focusedOptionId" }] : /* istanbul ignore next */ []));
ariaActivedescendant = computed(() => (this.focused() ? this.focusedOptionId() : undefined), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "ariaActivedescendant" }] : /* istanbul ignore next */ []));
buttonIconClass = computed(() => {
if (!this.visible() && this.showIcon())
return this.showIcon();
if (this.visible() && this.hideIcon())
return this.hideIcon();
return this.showIcon();
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "buttonIconClass" }] : /* istanbul ignore next */ []));
showDefaultIcon = computed(() => !this.buttonIconClass() && !this.iconTemplate(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showDefaultIcon" }] : /* istanbul ignore next */ []));
buttonClass = computed(() => this.cn(this.cx('pcButton'), this.buttonClassName()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
maskVisible = computed(() => this.mask() && this.visible(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "maskVisible" }] : /* istanbul ignore next */ []));
maskClass = computed(() => this.cn(this.cx('mask'), this.maskClassName()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "maskClass" }] : /* istanbul ignore next */ []));
buttonTemplateContext = { toggleCallback: this.onButtonClick.bind(this) };
onItemClickBound = this.onItemClick.bind(this);
constructor() {
super();
effect(() => {
const v = this.visible();
if (v) {
this.bindDocumentClickListener();
}
else {
this.unbindDocumentClickListener();
}
});
}
getItemId(index) {
return this.$id() + '_' + index;
}
getItemTemplateContext(item, index) {
return { $implicit: item, index, toggleCallback: this.onItemClickBound };
}
getItemTooltipOptions(item) {
return item.tooltipOptions || { ...this.tooltipOptions(), tooltipLabel: item.label, disabled: !this.tooltipOptions() };
}
getItemTabindex(item) {
return item.disabled || !this.visible() ? null : item.tabindex ? item.tabindex : '0';
}
getPTOptions(id, key) {
return this.ptm(key, {
context: {
active: this.isItemActive(id),
hidden: !this.visible()
}
});
}
isItemActive(id) {
return id === this.focusedOptionId();
}
onAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
if (this.type() !== 'linear') {
const button = findSingle(this.el?.nativeElement, '[data-pc-name="pcbutton"]');
const firstItem = findSingle(this.list()?.nativeElement, '[data-pc-section="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('--px-item-diff-x', `${wDiff / 2}px`);
this.list()?.nativeElement.style.setProperty('--px-item-diff-y', `${hDiff / 2}px`);
}
}
}
}
show() {
this.onVisibleChange.emit(true);
this.visible.set(true);
this.onShow.emit();
}
hide() {
this.onVisibleChange.emit(false);
this.visible.set(false);
this.onHide.emit();
}
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;
}
onKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
this.onArrowDown(event);
break;
case 'ArrowUp':
this.onArrowUp(event);
break;
case 'ArrowLeft':
this.onArrowLeft(event);
break;
case 'ArrowRight':
this.onArrowRight(event);
break;
case 'Enter':
case 'Space':
this.onEnterKey(event);
break;
case 'Escape':
this.onEscapeKey(event);
break;
case 'Home':
this.onHomeKey(event);
break;
case 'End':
this.onEndKey(event);
break;
default:
break;
}
}
onFocus(event) {
this.focused.set(true);
}
onBlur(event) {
this.focused.set(false);
asapScheduler.schedule(() => this.focusedOptionIndex.set(-1));
}
onArrowUp(event) {
if (this.direction() === 'up') {
this.navigateNextItem(event);
}
else if (this.direction() === 'down') {
this.navigatePrevItem(event);
}
else {
this.navigateNextItem(event);
}
}
onArrowDown(event) {
if (this.direction() === 'up') {
this.navigatePrevItem(event);
}
else if (this.direction() === 'down') {
this.navigateNextItem(event);
}
else {
this.navigatePrevItem(event);
}
}
onArrowLeft(event) {
const leftValidDirections = ['left', 'up-right', 'down-left'];
const rightValidDirections = ['right', 'up-left', 'down-right'];
if (leftValidDirections.includes(this.direction())) {
this.navigateNextItem(event);
}
else if (rightValidDirections.includes(this.direction())) {
this.navigatePrevItem(event);
}
else {
this.navigatePrevItem(event);
}
}
onArrowRight(event) {
const leftValidDirections = ['left', 'up-right', 'down-left'];
const rightValidDirections = ['right', 'up-left', 'down-right'];
if (leftValidDirections.includes(this.direction())) {
this.navigatePrevItem(event);
}
else if (rightValidDirections.includes(this.direction())) {
this.navigateNextItem(event);
}
else {
this.navigateNextItem(event);
}
}
onEndKey(event) {
event.preventDefault();
this.focusedOptionIndex.set(-1);
this.navigatePrevItem(event);
}
onHomeKey(event) {
event.preventDefault();
this.focusedOptionIndex.set(-1);
this.navigateNextItem(event);
}
onEnterKey(event) {
const items = find(this.el?.nativeElement, '[data-pc-section="item"]');
const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex());
if (itemIndex !== -1 && this.$model() && this.$model()[itemIndex]) {
this.onItemClick(event, this.$model()[itemIndex]);
}
this.onBlur(event);
const buttonEl = findSingle(this.el?.nativeElement, 'button');
buttonEl && focus(buttonEl);
}
onEscapeKey(event) {
this.hide();
const buttonEl = findSingle(this.el?.nativeElement, 'button');
buttonEl && focus(buttonEl);
}
onTogglerKeydown(event) {
switch (event.code) {
case 'ArrowDown':
case 'ArrowLeft':
this.onTogglerArrowDown(event);
break;
case 'ArrowUp':
case 'ArrowRight':
this.onTogglerArrowUp(event);
break;
case 'Escape':
this.onEscapeKey(event);
break;
default:
break;
}
}
onTogglerArrowUp(event) {
this.focused.set(true);
focus(this.list()?.nativeElement);
this.show();
this.navigatePrevItem(event);
event.preventDefault();
}
onTogglerArrowDown(event) {
this.focused.set(true);
focus(this.list()?.nativeElement);
this.show();
this.navigateNextItem(event);
event.preventDefault();
}
navigateNextItem(event) {
const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex());
this.changeFocusedOptionIndex(optionIndex);
event.preventDefault();
}
navigatePrevItem(event) {
const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex());
this.changeFocusedOptionIndex(optionIndex);
event.preventDefault();
}
findPrevOptionIndex(index) {
const items = find(this.el?.nativeElement, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
matchedOptionIndex = index === -1 ? filteredItems.length - 1 : matchedOptionIndex - 1;
return matchedOptionIndex;
}
findNextOptionIndex(index) {
const items = find(this.el?.nativeElement, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
const newIndex = index === -1 ? filteredItems[0].id : index;
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
matchedOptionIndex = index === -1 ? 0 : matchedOptionIndex + 1;
return matchedOptionIndex;
}
changeFocusedOptionIndex(index) {
const items = find(this.el?.nativeElement, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
if (filteredItems[index]) {
this.focusedOptionIndex.set(filteredItems[index].getAttribute('id'));
}
}
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(--px-item-diff-x, 0px))`,
top: `calc(${radius * Math.sin(step * index)}px + var(--px-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(--px-item-diff-x, 0px))`;
const y = `calc(${radius * Math.sin(step * index)}px + var(--px-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(--px-item-diff-x, 0px))`;
const y = `calc(${radius * Math.sin(step * index)}px + var(--px-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();
}
getItemStyle(index) {
const transitionDelay = this.calculateTransitionDelay(index);
const pointStyle = this.calculatePointStyle(index);
return {
transitionDelay: `${transitionDelay}ms`,
...pointStyle
};
}
isClickableRouterLink(item) {
return item.routerLink && !this.disabled() && !item.disabled;
}
isOutsideClicked(event) {
return this.el && !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || this.isItemClicked);
}
bindDocumentClickListener() {
if (isPlatformBrowser(this.platformId)) {
if (!this.documentClickListener && this.hideOnClickOutside()) {
this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => {
if (this.visible() && this.isOutsideClicked(event)) {
this.hide();
}
this.isItemClicked = false;
});
}
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
onDestroy() {
this.unbindDocumentClickListener();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpeedDial, isStandalone: true, selector: "p-speeddial, p-speed-dial", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, $model: { classPropertyName: "$model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, transitionDelay: { classPropertyName: "transitionDelay", publicName: "transitionDelay", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideOnClickOutside: { classPropertyName: "hideOnClickOutside", publicName: "hideOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, buttonClassName: { classPropertyName: "buttonClassName", publicName: "buttonClassName", isSignal: true, isRequired: false, transformFunction: null }, maskStyle: { classPropertyName: "maskStyle", publicName: "maskStyle", isSignal: true, isRequired: false, transformFunction: null }, maskClassName: { classPropertyName: "maskClassName", publicName: "maskClassName", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, rotateAnimation: { classPropertyName: "rotateAnimation", publicName: "rotateAnimation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, tooltipOptions: { classPropertyName: "tooltipOptions", publicName: "tooltipOptions", isSignal: true, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onVisibleChange: "onVisibleChange", onClick: "onClick", onShow: "onShow", onHide: "onHide" }, host: { properties: { "attr.id": "$id()" } }, providers: [SpeedDialStyle, { provide: SPEED_DIAL_INSTANCE, useExisting: SpeedDial }, { provide: PARENT_INSTANCE, useExisting: SpeedDial }], queries: [{ propertyName: "buttonTemplate", first: true, predicate: ["button"], isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<div [pBind]="ptm('root')" [class]="cn(cx('root'), className())" [style]="{ ...sx('root'), ...style() }">
(!buttonTemplate()) {
<button
type="button"
iconOnly
[pButton]="buttonProps()"
[disabled]="disabled()"
[style]="buttonStyle()"
[class]="buttonClass()"
[attr.aria-label]="ariaLabel()"
[attr.aria-expanded]="visible()"
[attr.aria-haspopup]="true"
[attr.aria-controls]="listId()"
[attr.aria-labelledby]="ariaLabelledBy()"
[pButtonPT]="ptm('pcButton')"
[pButtonUnstyled]="unstyled()"
(click)="onButtonClick($event)"
(keydown)="onTogglerKeydown($event)"
>
(buttonIconClass()) {
<span [pBind]="ptm('pcButton')['icon']" [class]="buttonIconClass()"></span>
}
(showDefaultIcon()) {
<svg data-p-icon="plus" [pBind]="ptm('pcButton')['icon']" />
}
(iconTemplate()) {
<ng-container *ngTemplateOutlet="iconTemplate()" />
}
</button>
} {
<ng-container *ngTemplateOutlet="buttonTemplate(); context: buttonTemplateContext" />
}
<ul
#list
[pBind]="ptm('list')"
[class]="cx('list')"
role="menu"
[id]="listId()"
(focus)="onFocus($event)"
(focusout)="onBlur($event)"
(keydown)="onKeyDown($event)"
[attr.aria-activedescendant]="ariaActivedescendant()"
[tabindex]="-1"
[style]="sx('list')"
>
(item of $model(); track item; let i = $index) {
<li
[pBind]="getPTOptions(getItemId(i), 'item')"
[style]="getItemStyle(i)"
[class]="cx('item', { item, i })"
pTooltip
[pTooltipUnstyled]="unstyled()"
[tooltipOptions]="getItemTooltipOptions(item)"
[id]="getItemId(i)"
[attr.aria-controls]="itemAriaControls()"
role="menuitem"
[attr.data-p-active]="isItemActive(getItemId(i))"
>
(itemTemplate()) {
<ng-container *ngTemplateOutlet="itemTemplate(); context: getItemTemplateContext(item, i)" />
} {
<button
type="button"
pButton
severity="secondary"
rounded
iconOnly
size="small"
[class]="cx('pcAction')"
[disabled]="item?.disabled"
[tabindex]="getItemTabindex(item)"
[attr.aria-label]="item.label"
[attr.role]="'menuitem'"
[pButtonPT]="getPTOptions(getItemId(i), 'pcAction')"
[pButtonUnstyled]="unstyled()"
(click)="onItemClick($event, item)"
(keydown.enter)="onItemClick($event, item)"
>
(item.icon) {
<span [pBind]="getPTOptions(getItemId(i), 'actionIcon')" [class]="item.icon"></span>
}
</button>
}
</li>
}
</ul>
</div>
(maskVisible()) {
<div [pBind]="ptm('mask')" [class]="maskClass()" [style]="maskStyle()" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active"></div>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: Plus, selector: "svg[data-p-icon=\"plus\"]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDial, decorators: [{
type: Component,
args: [{
selector: 'p-speeddial, p-speed-dial',
standalone: true,
imports: [NgTemplateOutlet, ButtonDirective, TooltipModule, RouterModule, Plus, Bind],
template: `
<div [pBind]="ptm('root')" [class]="cn(cx('root'), className())" [style]="{ ...sx('root'), ...style() }">
(!buttonTemplate()) {
<button
type="button"
iconOnly
[pButton]="buttonProps()"
[disabled]="disabled()"
[style]="buttonStyle()"
[class]="buttonClass()"
[attr.aria-label]="ariaLabel()"
[attr.aria-expanded]="visible()"
[attr.aria-haspopup]="true"
[attr.aria-controls]="listId()"
[attr.aria-labelledby]="ariaLabelledBy()"
[pButtonPT]="ptm('pcButton')"
[pButtonUnstyled]="unstyled()"
(click)="onButtonClick($event)"
(keydown)="onTogglerKeydown($event)"
>
(buttonIconClass()) {
<span [pBind]="ptm('pcButton')['icon']" [class]="buttonIconClass()"></span>
}
(showDefaultIcon()) {
<svg data-p-icon="plus" [pBind]="ptm('pcButton')['icon']" />
}
(iconTemplate()) {
<ng-container *ngTemplateOutlet="iconTemplate()" />
}
</button>
} {
<ng-container *ngTemplateOutlet="buttonTemplate(); context: buttonTemplateContext" />
}
<ul
#list
[pBind]="ptm('list')"
[class]="cx('list')"
role="menu"
[id]="listId()"
(focus)="onFocus($event)"
(focusout)="onBlur($event)"
(keydown)="onKeyDown($event)"
[attr.aria-activedescendant]="ariaActivedescendant()"
[tabindex]="-1"
[style]="sx('list')"
>
(item of $model(); track item; let i = $index) {
<li
[pBind]="getPTOptions(getItemId(i), 'item')"
[style]="getItemStyle(i)"
[class]="cx('item', { item, i })"
pTooltip
[pTooltipUnstyled]="unstyled()"
[tooltipOptions]="getItemTooltipOptions(item)"
[id]="getItemId(i)"
[attr.aria-controls]="itemAriaControls()"
role="menuitem"
[attr.data-p-active]="isItemActive(getItemId(i))"
>
(itemTemplate()) {
<ng-container *ngTemplateOutlet="itemTemplate(); context: getItemTemplateContext(item, i)" />
} {
<button
type="button"
pButton
severity="secondary"
rounded
iconOnly
size="small"
[class]="cx('pcAction')"
[disabled]="item?.disabled"
[tabindex]="getItemTabindex(item)"
[attr.aria-label]="item.label"
[attr.role]="'menuitem'"
[pButtonPT]="getPTOptions(getItemId(i), 'pcAction')"
[pButtonUnstyled]="unstyled()"
(click)="onItemClick($event, item)"
(keydown.enter)="onItemClick($event, item)"
>
(item.icon) {
<span [pBind]="getPTOptions(getItemId(i), 'actionIcon')" [class]="item.icon"></span>
}
</button>
}
</li>
}
</ul>
</div>
(maskVisible()) {
<div [pBind]="ptm('mask')" [class]="maskClass()" [style]="maskStyle()" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active"></div>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SpeedDialStyle, { provide: SPEED_DIAL_INSTANCE, useExisting: SpeedDial }, { provide: PARENT_INSTANCE, useExisting: SpeedDial }],
host: {
'[attr.id]': '$id()'
},
hostDirectives: [Bind]
}]
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], $model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], transitionDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDelay", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnClickOutside", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], buttonClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassName", required: false }] }], maskStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskStyle", required: false }] }], maskClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskClassName", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], rotateAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateAnimation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], tooltipOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOptions", required: false }] }], buttonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonProps", required: false }] }], onVisibleChange: [{ type: i0.Output, args: ["onVisibleChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], buttonTemplate: [{ type: i0.ContentChild, args: ['button', { ...{ descendants: false }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }] } });
class SpeedDialModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial], exports: [SpeedDial] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialModule, decorators: [{
type: NgModule,
args: [{
imports: [SpeedDial],
exports: [SpeedDial]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SpeedDial, SpeedDialClasses, SpeedDialModule, SpeedDialStyle };
//# sourceMappingURL=primeng-speeddial.mjs.map