@ops-prime/primeng 0.0.0-stage → 21.1.10

package/fesm2022/primeng-speeddial.mjs

@@ -0,0 +1,937 @@
+export * from 'primeng/types/speeddial';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, EventEmitter, signal, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { uuid, findSingle, find, focus, hasClass } from '@primeuix/utils';
+import { SharedModule, PrimeTemplate } from 'primeng/api';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind } from 'primeng/bind';
+import * as i3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { PlusIcon } from 'primeng/icons';
+import { Ripple } from 'primeng/ripple';
+import * as i4 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 }) => ({
+        alignItems: (instance.direction === 'up' || instance.direction === 'down') && 'center',
+        justifyContent: (instance.direction === 'left' || instance.direction === 'right') && 'center',
+        flexDirection: instance.direction === 'up' ? 'column-reverse' : instance.direction === 'down' ? 'column' : instance.direction === 'left' ? 'row-reverse' : instance.direction === 'right' ? 'row' : null
+    }),
+    list: ({ instance }) => ({
+        flexDirection: instance.direction === 'up' ? 'column-reverse' : instance.direction === 'down' ? 'column' : instance.direction === 'left' ? 'row-reverse' : instance.direction === 'right' ? 'row' : null
+    })
+};
+const classes = {
+    root: ({ instance }) => [
+        `p-speeddial p-component p-speeddial-${instance.type}`,
+        {
+            [`p-speeddial-direction-${instance.direction}`]: instance.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: "21.2.22", ngImport: i0, type: SpeedDialStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SpeedDialStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", 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;
+    /**
+     * MenuModel instance to define the action items.
+     * @group Props
+     */
+    model = null;
+    /**
+     * Specifies the visibility of the overlay.
+     * @defaultValue false
+     * @group Props
+     */
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        this._visible = value;
+        if (this._visible) {
+            this.bindDocumentClickListener();
+        }
+        else {
+            this.unbindDocumentClickListener();
+        }
+    }
+    /**
+     * Inline style of the element.
+     * @group Props
+     */
+    style;
+    /**
+     * Style class of the element.
+     * @group Props
+     */
+    className;
+    /**
+     * Specifies the opening direction of actions.
+     * @gruop Props
+     */
+    direction = 'up';
+    /**
+     * Transition delay step for each action item.
+     * @group Props
+     */
+    transitionDelay = 30;
+    /**
+     * Specifies the opening type of actions.
+     * @group Props
+     */
+    type = 'linear';
+    /**
+     * Radius for *circle types.
+     * @group Props
+     */
+    radius = 0;
+    /**
+     * Whether to show a mask element behind the speeddial.
+     * @group Props
+     */
+    mask = false;
+    /**
+     * Whether the component is disabled.
+     * @group Props
+     */
+    disabled = false;
+    /**
+     * Whether the actions close when clicked outside.
+     * @group Props
+     */
+    hideOnClickOutside = true;
+    /**
+     * Inline style of the button element.
+     * @group Props
+     */
+    buttonStyle;
+    /**
+     * Style class of the button element.
+     * @group Props
+     */
+    buttonClassName;
+    /**
+     * Inline style of the mask element.
+     * @group Props
+     */
+    maskStyle;
+    /**
+     * Style class of the mask element.
+     * @group Props
+     */
+    maskClassName;
+    /**
+     * Show icon of the button element.
+     * @group Props
+     */
+    showIcon;
+    /**
+     * Hide icon of the button element.
+     * @group Props
+     */
+    hideIcon;
+    /**
+     * Defined to rotate showIcon when hideIcon is not present.
+     * @group Props
+     */
+    rotateAnimation = true;
+    /**
+     * Defines a string value that labels an interactive element.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Identifier of the underlying input element.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * 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;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    buttonProps;
+    /**
+     * Fired when the visibility of element changed.
+     * @param {boolean} boolean - Visibility value.
+     * @group Emits
+     */
+    onVisibleChange = new EventEmitter();
+    /**
+     * Fired when the visibility of element changed.
+     * @param {boolean} boolean - Visibility value.
+     * @group Emits
+     */
+    visibleChange = new EventEmitter();
+    /**
+     * Fired when the button element clicked.
+     * @param {MouseEvent} event - Mouse event.
+     * @group Emits
+     */
+    onClick = new EventEmitter();
+    /**
+     * Fired when the actions are visible.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onShow = new EventEmitter();
+    /**
+     * Fired when the actions are hidden.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onHide = new EventEmitter();
+    container;
+    list;
+    /**
+     * Custom button template.
+     * @param {SpeedDialButtonTemplateContext} context - button context.
+     * @see {@link SpeedDialButtonTemplateContext}
+     * @group Templates
+     */
+    buttonTemplate;
+    /**
+     * Custom item template.
+     * @param {SpeedDialItemTemplateContext} context - item context.
+     * @see {@link SpeedDialItemTemplateContext}
+     * @group Templates
+     */
+    itemTemplate;
+    /**
+     * Custom icon template.
+     * @group Templates
+     */
+    iconTemplate;
+    templates;
+    _buttonTemplate;
+    _itemTemplate;
+    _iconTemplate;
+    isItemClicked = false;
+    _visible = false;
+    documentClickListener;
+    focusedOptionIndex = signal(null, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : /* istanbul ignore next */ []));
+    focused = false;
+    _componentStyle = inject(SpeedDialStyle);
+    get focusedOptionId() {
+        return this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : null;
+    }
+    getTooltipOptions(item) {
+        return { ...this.tooltipOptions, tooltipLabel: item.label, disabled: !this.tooltipOptions };
+    }
+    getPTOptions(id, key) {
+        return this.ptm(key, {
+            context: {
+                active: this.isItemActive(id),
+                hidden: !this.visible
+            }
+        });
+    }
+    isItemActive(id) {
+        return id === this.focusedOptionId;
+    }
+    onInit() {
+        this.id = this.id || uuid('pn_id_');
+    }
+    onAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (this.type !== 'linear') {
+                const button = findSingle(this.container?.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('--item-diff-x', `${wDiff / 2}px`);
+                    this.list?.nativeElement.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
+                }
+            }
+        }
+    }
+    onAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'button':
+                    this._buttonTemplate = item.template;
+                    break;
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+                case 'icon':
+                    this._iconTemplate = 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;
+    }
+    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 = true;
+    }
+    onBlur(event) {
+        this.focused = 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.container?.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.container?.nativeElement, 'button');
+        buttonEl && focus(buttonEl);
+    }
+    onEscapeKey(event) {
+        this.hide();
+        const buttonEl = findSingle(this.container?.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 = true;
+        focus(this.list?.nativeElement);
+        this.show();
+        this.navigatePrevItem(event);
+        event.preventDefault();
+    }
+    onTogglerArrowDown(event) {
+        this.focused = 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.container?.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.container?.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.container?.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(--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;
+    }
+    get buttonIconClass() {
+        if (!this.visible && this.showIcon) {
+            return this.showIcon;
+        }
+        if (this.visible && this.hideIcon) {
+            return this.hideIcon;
+        }
+        return this.showIcon;
+    }
+    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.container && !(this.container.nativeElement.isSameNode(event.target) || this.container.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: "21.2.22", ngImport: i0, type: SpeedDial, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.22", type: SpeedDial, isStandalone: true, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: { id: "id", model: "model", visible: "visible", style: "style", className: "className", direction: "direction", transitionDelay: ["transitionDelay", "transitionDelay", numberAttribute], type: "type", radius: ["radius", "radius", numberAttribute], mask: ["mask", "mask", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideOnClickOutside: ["hideOnClickOutside", "hideOnClickOutside", booleanAttribute], buttonStyle: "buttonStyle", buttonClassName: "buttonClassName", maskStyle: "maskStyle", maskClassName: "maskClassName", showIcon: "showIcon", hideIcon: "hideIcon", rotateAnimation: ["rotateAnimation", "rotateAnimation", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tooltipOptions: "tooltipOptions", buttonProps: "buttonProps" }, outputs: { onVisibleChange: "onVisibleChange", visibleChange: "visibleChange", onClick: "onClick", onShow: "onShow", onHide: "onHide" }, providers: [SpeedDialStyle, { provide: SPEED_DIAL_INSTANCE, useExisting: SpeedDial }, { provide: PARENT_INSTANCE, useExisting: SpeedDial }], queries: [{ propertyName: "buttonTemplate", first: true, predicate: ["button"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "iconTemplate", first: true, predicate: ["icon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div #container [pBind]="ptm('root')" [class]="cn(cx('root'), className)" [style]="style" [ngStyle]="sx('root')">
+            <ng-container *ngIf="!buttonTemplate && !_buttonTemplate">
+                <button
+                    type="button"
+                    pButton
+                    pRipple
+                    [style]="buttonStyle"
+                    [icon]="buttonIconClass"
+                    [class]="cn(cx('pcButton'), buttonClassName)"
+                    [disabled]="disabled"
+                    [attr.aria-expanded]="visible"
+                    [attr.aria-haspopup]="true"
+                    [attr.aria-controls]="id + '_list'"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    (click)="onButtonClick($event)"
+                    (keydown)="onTogglerKeydown($event)"
+                    [buttonProps]="buttonProps"
+                    [pt]="ptm('pcButton')"
+                    [unstyled]="unstyled()"
+                >
+                    <svg data-p-icon="plus" pButtonIcon [pt]="ptm('pcButton')['icon']" *ngIf="!buttonIconClass && !iconTemplate && !_iconTemplate" />
+                    <ng-container *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-container>
+                </button>
+            </ng-container>
+            <ng-container *ngIf="buttonTemplate || _buttonTemplate">
+                <ng-container *ngTemplateOutlet="buttonTemplate || _buttonTemplate; context: { toggleCallback: onButtonClick.bind(this) }"></ng-container>
+            </ng-container>
+            <ul
+                #list
+                [pBind]="ptm('list')"
+                [class]="cx('list')"
+                role="menu"
+                [id]="id + '_list'"
+                (focus)="onFocus($event)"
+                (focusout)="onBlur($event)"
+                (keydown)="onKeyDown($event)"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                [tabindex]="-1"
+                [ngStyle]="sx('list')"
+            >
+                <li
+                    *ngFor="let item of model; let i = index"
+                    [pBind]="getPTOptions(id + '_' + i, 'item')"
+                    [ngStyle]="getItemStyle(i)"
+                    [class]="cx('item', { item, i })"
+                    pTooltip
+                    [pTooltipUnstyled]="unstyled()"
+                    [tooltipOptions]="item.tooltipOptions || getTooltipOptions(item)"
+                    [id]="id + '_' + i"
+                    [attr.aria-controls]="id + '_item'"
+                    role="menuitem"
+                    [attr.data-p-active]="isItemActive(id + '_' + i)"
+                >
+                    <ng-container *ngIf="itemTemplate || _itemTemplate">
+                        <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }"></ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="!itemTemplate && !_itemTemplate">
+                        <button
+                            type="button"
+                            pButton
+                            pRipple
+                            [class]="cx('pcAction')"
+                            severity="secondary"
+                            [rounded]="true"
+                            size="small"
+                            role="menuitem"
+                            (click)="onItemClick($event, item)"
+                            [disabled]="item?.disabled"
+                            (keydown.enter)="onItemClick($event, item)"
+                            [attr.aria-label]="item.label"
+                            [attr.tabindex]="item.disabled || !visible ? null : item.tabindex ? item.tabindex : '0'"
+                            [pt]="getPTOptions(id + '_' + i, 'pcAction')"
+                            [unstyled]="unstyled()"
+                        >
+                            <span *ngIf="item.icon" pButtonIcon [pt]="getPTOptions(id + '_' + i, 'actionIcon')" [class]="item.icon"></span>
+                        </button>
+                    </ng-container>
+                </li>
+            </ul>
+        </div>
+        <div *ngIf="mask && visible" [pBind]="ptm('mask')" [class]="cn(cx('mask'), maskClassName)" [ngStyle]="maskStyle" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active"></div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3.ButtonIcon, selector: "[pButtonIcon]", inputs: ["ptButtonIcon", "pButtonIconPT", "pButtonUnstyled"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: PlusIcon, selector: "[data-p-icon=\"plus\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SpeedDial, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-speeddial, p-speedDial, p-speed-dial',
+                    standalone: true,
+                    imports: [CommonModule, ButtonModule, Ripple, TooltipModule, RouterModule, PlusIcon, SharedModule, Bind],
+                    template: `
+        <div #container [pBind]="ptm('root')" [class]="cn(cx('root'), className)" [style]="style" [ngStyle]="sx('root')">
+            <ng-container *ngIf="!buttonTemplate && !_buttonTemplate">
+                <button
+                    type="button"
+                    pButton
+                    pRipple
+                    [style]="buttonStyle"
+                    [icon]="buttonIconClass"
+                    [class]="cn(cx('pcButton'), buttonClassName)"
+                    [disabled]="disabled"
+                    [attr.aria-expanded]="visible"
+                    [attr.aria-haspopup]="true"
+                    [attr.aria-controls]="id + '_list'"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    (click)="onButtonClick($event)"
+                    (keydown)="onTogglerKeydown($event)"
+                    [buttonProps]="buttonProps"
+                    [pt]="ptm('pcButton')"
+                    [unstyled]="unstyled()"
+                >
+                    <svg data-p-icon="plus" pButtonIcon [pt]="ptm('pcButton')['icon']" *ngIf="!buttonIconClass && !iconTemplate && !_iconTemplate" />
+                    <ng-container *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-container>
+                </button>
+            </ng-container>
+            <ng-container *ngIf="buttonTemplate || _buttonTemplate">
+                <ng-container *ngTemplateOutlet="buttonTemplate || _buttonTemplate; context: { toggleCallback: onButtonClick.bind(this) }"></ng-container>
+            </ng-container>
+            <ul
+                #list
+                [pBind]="ptm('list')"
+                [class]="cx('list')"
+                role="menu"
+                [id]="id + '_list'"
+                (focus)="onFocus($event)"
+                (focusout)="onBlur($event)"
+                (keydown)="onKeyDown($event)"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                [tabindex]="-1"
+                [ngStyle]="sx('list')"
+            >
+                <li
+                    *ngFor="let item of model; let i = index"
+                    [pBind]="getPTOptions(id + '_' + i, 'item')"
+                    [ngStyle]="getItemStyle(i)"
+                    [class]="cx('item', { item, i })"
+                    pTooltip
+                    [pTooltipUnstyled]="unstyled()"
+                    [tooltipOptions]="item.tooltipOptions || getTooltipOptions(item)"
+                    [id]="id + '_' + i"
+                    [attr.aria-controls]="id + '_item'"
+                    role="menuitem"
+                    [attr.data-p-active]="isItemActive(id + '_' + i)"
+                >
+                    <ng-container *ngIf="itemTemplate || _itemTemplate">
+                        <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }"></ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="!itemTemplate && !_itemTemplate">
+                        <button
+                            type="button"
+                            pButton
+                            pRipple
+                            [class]="cx('pcAction')"
+                            severity="secondary"
+                            [rounded]="true"
+                            size="small"
+                            role="menuitem"
+                            (click)="onItemClick($event, item)"
+                            [disabled]="item?.disabled"
+                            (keydown.enter)="onItemClick($event, item)"
+                            [attr.aria-label]="item.label"
+                            [attr.tabindex]="item.disabled || !visible ? null : item.tabindex ? item.tabindex : '0'"
+                            [pt]="getPTOptions(id + '_' + i, 'pcAction')"
+                            [unstyled]="unstyled()"
+                        >
+                            <span *ngIf="item.icon" pButtonIcon [pt]="getPTOptions(id + '_' + i, 'actionIcon')" [class]="item.icon"></span>
+                        </button>
+                    </ng-container>
+                </li>
+            </ul>
+        </div>
+        <div *ngIf="mask && visible" [pBind]="ptm('mask')" [class]="cn(cx('mask'), maskClassName)" [ngStyle]="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 }],
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], transitionDelay: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], type: [{
+                type: Input
+            }], radius: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], mask: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideOnClickOutside: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], buttonStyle: [{
+                type: Input
+            }], buttonClassName: [{
+                type: Input
+            }], maskStyle: [{
+                type: Input
+            }], maskClassName: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], hideIcon: [{
+                type: Input
+            }], rotateAnimation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], tooltipOptions: [{
+                type: Input
+            }], buttonProps: [{
+                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']
+            }], buttonTemplate: [{
+                type: ContentChild,
+                args: ['button', { descendants: false }]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { descendants: false }]
+            }], iconTemplate: [{
+                type: ContentChild,
+                args: ['icon', { descendants: false }]
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
+class SpeedDialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule], exports: [SpeedDial, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SpeedDialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SpeedDial, SharedModule],
+                    exports: [SpeedDial, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpeedDial, SpeedDialClasses, SpeedDialModule, SpeedDialStyle };
+//# sourceMappingURL=primeng-speeddial.mjs.map