@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-speeddial.mjs

@@ -0,0 +1,894 @@
+export * from '@wawjs/ngx-prime/types/speeddial';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, contentChildren, signal, effect, ContentChild, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { uuid, findSingle, find, focus, hasClass } from '@wawjs/css-prime-utils';
+import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import * as i3 from '@wawjs/ngx-prime/button';
+import { ButtonModule } from '@wawjs/ngx-prime/button';
+import { PlusIcon } from '@wawjs/ngx-prime/icons';
+import { Ripple } from '@wawjs/ngx-prime/ripple';
+import * as i4 from '@wawjs/ngx-prime/tooltip';
+import { TooltipModule } from '@wawjs/ngx-prime/tooltip';
+import { asapScheduler } from 'rxjs';
+import { style } from '@wawjs/css-prime-styles/speeddial';
+import { BaseStyle } from '@wawjs/ngx-prime/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.resolvedId + '_' + 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.1.2", ngImport: i0, type: SpeedDialStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SpeedDialStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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.ngx-prime.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 */ []));
+    /**
+     * MenuModel instance to define the action items.
+     * @group Props
+     */
+    model = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the visibility of the overlay.
+     * @defaultValue false
+     * @group Props
+     */
+    visible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* 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 */ []));
+    /**
+     * 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 */ []));
+    /**
+     * Used to pass all properties of the ButtonProps 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();
+    container;
+    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;
+    /**
+     * Custom item template.
+     * @param {SpeedDialItemTemplateContext} context - item context.
+     * @see {@link SpeedDialItemTemplateContext}
+     * @group Templates
+     */
+    itemTemplate;
+    /**
+     * Custom icon template.
+     * @group Templates
+     */
+    iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    _buttonTemplate;
+    _itemTemplate;
+    _iconTemplate;
+    isItemClicked = false;
+    documentClickListener;
+    focusedOptionIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : /* istanbul ignore next */ []));
+    focused = false;
+    _componentStyle = inject(SpeedDialStyle);
+    _generatedId;
+    get resolvedId() {
+        return this.id() || (this._generatedId ??= uuid('pn_id_'));
+    }
+    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;
+    }
+    constructor() {
+        super();
+        effect(() => {
+            if (this.visible()) {
+                this.bindDocumentClickListener();
+            }
+            else {
+                this.unbindDocumentClickListener();
+            }
+        });
+    }
+    onAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (this.type() !== 'linear') {
+                const button = findSingle(this.container?.nativeElement, '[data-pc-name="pcbutton"]');
+                const list = this.list();
+                const firstItem = findSingle(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);
+                    list?.nativeElement.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
+                    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.visible.set(true);
+        this.onShow.emit(undefined);
+        this.bindDocumentClickListener();
+        this.cd.markForCheck();
+    }
+    hide() {
+        this.onVisibleChange.emit(false);
+        this.visible.set(false);
+        this.onHide.emit(undefined);
+        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();
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            default:
+                break;
+        }
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onBlur() {
+        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());
+        const model = this.model();
+        if (itemIndex !== -1 && model && model[itemIndex]) {
+            this.onItemClick(event, model[itemIndex]);
+        }
+        this.onBlur();
+        const buttonEl = findSingle(this.container?.nativeElement, 'button');
+        buttonEl && focus(buttonEl);
+    }
+    onEscapeKey() {
+        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();
+                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: "22.1.2", ngImport: i0, type: SpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SpeedDial, isStandalone: true, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", 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" }, providers: [SpeedDialStyle, { provide: SPEED_DIAL_INSTANCE, useExisting: SpeedDial }, { provide: PARENT_INSTANCE, useExisting: SpeedDial }], queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "buttonTemplate", first: true, predicate: ["button"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], 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')">
+            @if (!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]="resolvedId + '_list'"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    (click)="onButtonClick($event)"
+                    (keydown)="onTogglerKeydown($event)"
+                    [buttonProps]="buttonProps()"
+                    [pt]="ptm('pcButton')"
+                    [unstyled]="unstyled()"
+                >
+                    @if (!buttonIconClass && !iconTemplate() && !_iconTemplate) {
+                        <svg data-p-icon="plus" pButtonIcon [pt]="ptm('pcButton')['icon']" />
+                    }
+                    <ng-container *ngTemplateOutlet="iconTemplate() || _iconTemplate"></ng-container>
+                </button>
+            }
+            @if (buttonTemplate || _buttonTemplate) {
+                <ng-container *ngTemplateOutlet="buttonTemplate || _buttonTemplate; context: { toggleCallback: onButtonClick.bind(this) }"></ng-container>
+            }
+            <ul
+                #list
+                [pBind]="ptm('list')"
+                [class]="cx('list')"
+                role="menu"
+                [id]="resolvedId + '_list'"
+                (focus)="onFocus()"
+                (focusout)="onBlur()"
+                (keydown)="onKeyDown($event)"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                [tabindex]="-1"
+                [ngStyle]="sx('list')"
+            >
+                @for (item of model(); track item; let i = $index) {
+                    <li
+                        [pBind]="getPTOptions(resolvedId + '_' + i, 'item')"
+                        [ngStyle]="getItemStyle(i)"
+                        [class]="cx('item', { item, i })"
+                        pTooltip
+                        [pTooltipUnstyled]="unstyled()"
+                        [tooltipOptions]="item.tooltipOptions || getTooltipOptions(item)"
+                        [id]="resolvedId + '_' + i"
+                        [attr.aria-controls]="resolvedId + '_item'"
+                        role="menuitem"
+                        [attr.data-p-active]="isItemActive(resolvedId + '_' + i)"
+                    >
+                        @if (itemTemplate || _itemTemplate) {
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }"></ng-container>
+                        }
+                        @if (!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(resolvedId + '_' + i, 'pcAction')"
+                                [unstyled]="unstyled()"
+                            >
+                                @if (item.icon) {
+                                    <span pButtonIcon [pt]="getPTOptions(resolvedId + '_' + i, 'actionIcon')" [class]="item.icon"></span>
+                                }
+                            </button>
+                        }
+                    </li>
+                }
+            </ul>
+        </div>
+        @if (mask() && visible()) {
+            <div [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.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: "22.1.2", 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')">
+            @if (!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]="resolvedId + '_list'"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    (click)="onButtonClick($event)"
+                    (keydown)="onTogglerKeydown($event)"
+                    [buttonProps]="buttonProps()"
+                    [pt]="ptm('pcButton')"
+                    [unstyled]="unstyled()"
+                >
+                    @if (!buttonIconClass && !iconTemplate() && !_iconTemplate) {
+                        <svg data-p-icon="plus" pButtonIcon [pt]="ptm('pcButton')['icon']" />
+                    }
+                    <ng-container *ngTemplateOutlet="iconTemplate() || _iconTemplate"></ng-container>
+                </button>
+            }
+            @if (buttonTemplate || _buttonTemplate) {
+                <ng-container *ngTemplateOutlet="buttonTemplate || _buttonTemplate; context: { toggleCallback: onButtonClick.bind(this) }"></ng-container>
+            }
+            <ul
+                #list
+                [pBind]="ptm('list')"
+                [class]="cx('list')"
+                role="menu"
+                [id]="resolvedId + '_list'"
+                (focus)="onFocus()"
+                (focusout)="onBlur()"
+                (keydown)="onKeyDown($event)"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                [tabindex]="-1"
+                [ngStyle]="sx('list')"
+            >
+                @for (item of model(); track item; let i = $index) {
+                    <li
+                        [pBind]="getPTOptions(resolvedId + '_' + i, 'item')"
+                        [ngStyle]="getItemStyle(i)"
+                        [class]="cx('item', { item, i })"
+                        pTooltip
+                        [pTooltipUnstyled]="unstyled()"
+                        [tooltipOptions]="item.tooltipOptions || getTooltipOptions(item)"
+                        [id]="resolvedId + '_' + i"
+                        [attr.aria-controls]="resolvedId + '_item'"
+                        role="menuitem"
+                        [attr.data-p-active]="isItemActive(resolvedId + '_' + i)"
+                    >
+                        @if (itemTemplate || _itemTemplate) {
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }"></ng-container>
+                        }
+                        @if (!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(resolvedId + '_' + i, 'pcAction')"
+                                [unstyled]="unstyled()"
+                            >
+                                @if (item.icon) {
+                                    <span pButtonIcon [pt]="getPTOptions(resolvedId + '_' + i, 'actionIcon')" [class]="item.icon"></span>
+                                }
+                            </button>
+                        }
+                    </li>
+                }
+            </ul>
+        </div>
+        @if (mask() && visible()) {
+            <div [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]
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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"] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], 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"] }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], buttonTemplate: [{
+                type: ContentChild,
+                args: ['button', { descendants: false }]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { descendants: false }]
+            }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+class SpeedDialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule], exports: [SpeedDial, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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=wawjs-ngx-prime-speeddial.mjs.map