primenglab 22.0.0-beta.1

package/fesm2022/primenglab-speeddial.mjs

@@ -0,0 +1,892 @@
+export * from 'primenglab/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 'primenglab/basecomponent';
+import * as i1 from 'primenglab/bind';
+import { Bind } from 'primenglab/bind';
+import { ButtonDirective } from 'primenglab/button';
+import { Plus } from '@primeicons/angular/plus';
+import * as i2 from 'primenglab/tooltip';
+import { TooltipModule } from 'primenglab/tooltip';
+import { asapScheduler } from 'rxjs';
+import { style } from '@primeuix/styles/speeddial';
+import { BaseStyle } from 'primenglab/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.3", ngImport: i0, type: SpeedDialStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SpeedDialStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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.3", ngImport: i0, type: SpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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() }">
+            @if (!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)"
+                >
+                    @if (buttonIconClass()) {
+                        <span [pBind]="ptm('pcButton')['icon']" [class]="buttonIconClass()"></span>
+                    }
+                    @if (showDefaultIcon()) {
+                        <svg data-p-icon="plus" [pBind]="ptm('pcButton')['icon']" />
+                    }
+                    @if (iconTemplate()) {
+                        <ng-container *ngTemplateOutlet="iconTemplate()" />
+                    }
+                </button>
+            } @else {
+                <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')"
+            >
+                @for (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))"
+                    >
+                        @if (itemTemplate()) {
+                            <ng-container *ngTemplateOutlet="itemTemplate(); context: getItemTemplateContext(item, i)" />
+                        } @else {
+                            <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)"
+                            >
+                                @if (item.icon) {
+                                    <span [pBind]="getPTOptions(getItemId(i), 'actionIcon')" [class]="item.icon"></span>
+                                }
+                            </button>
+                        }
+                    </li>
+                }
+            </ul>
+        </div>
+        @if (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.3", 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() }">
+            @if (!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)"
+                >
+                    @if (buttonIconClass()) {
+                        <span [pBind]="ptm('pcButton')['icon']" [class]="buttonIconClass()"></span>
+                    }
+                    @if (showDefaultIcon()) {
+                        <svg data-p-icon="plus" [pBind]="ptm('pcButton')['icon']" />
+                    }
+                    @if (iconTemplate()) {
+                        <ng-container *ngTemplateOutlet="iconTemplate()" />
+                    }
+                </button>
+            } @else {
+                <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')"
+            >
+                @for (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))"
+                    >
+                        @if (itemTemplate()) {
+                            <ng-container *ngTemplateOutlet="itemTemplate(); context: getItemTemplateContext(item, i)" />
+                        } @else {
+                            <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)"
+                            >
+                                @if (item.icon) {
+                                    <span [pBind]="getPTOptions(getItemId(i), 'actionIcon')" [class]="item.icon"></span>
+                                }
+                            </button>
+                        }
+                    </li>
+                }
+            </ul>
+        </div>
+        @if (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.3", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial], exports: [SpeedDial] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SpeedDialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SpeedDial],
+                    exports: [SpeedDial]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpeedDial, SpeedDialClasses, SpeedDialModule, SpeedDialStyle };
+//# sourceMappingURL=primenglab-speeddial.mjs.map