@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-speeddial.mjs

@@ -0,0 +1,775 @@
+export * from '@gravionlabs/helix-core/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, computed, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, contentChildren, signal, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { uuid, findSingle, find, focus, hasClass } from '@gravionlabs/helix-core/uix/utils';
+import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
+import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import * as i1 from '@gravionlabs/helix-core/bind';
+import { Bind } from '@gravionlabs/helix-core/bind';
+import * as i3 from '@gravionlabs/helix-core/button';
+import { ButtonModule } from '@gravionlabs/helix-core/button';
+import { PlusIcon } from '@gravionlabs/helix-core/icons';
+import { Ripple } from '@gravionlabs/helix-core/ripple';
+import * as i4 from '@gravionlabs/helix-core/tooltip';
+import { TooltipModule } from '@gravionlabs/helix-core/tooltip';
+import { asapScheduler } from 'rxjs';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style = /*css*/ `
+    .h-speeddial {
+        position: static;
+        display: flex;
+        gap: dt('speeddial.gap');
+    }
+
+    .h-speeddial-button {
+        z-index: 1;
+    }
+
+    .h-speeddial-button.h-speeddial-rotate {
+        transition:
+            transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+            background dt('speeddial.transition.duration'),
+            color dt('speeddial.transition.duration'),
+            border-color dt('speeddial.transition.duration'),
+            box-shadow dt('speeddial.transition.duration'),
+            outline-color dt('speeddial.transition.duration');
+        will-change: transform;
+    }
+
+    .h-speeddial-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: inset-block-start 0s linear dt('speeddial.transition.duration');
+        pointer-events: none;
+        outline: 0 none;
+        z-index: 2;
+        gap: dt('speeddial.gap');
+    }
+
+    .h-speeddial-item {
+        transform: scale(0);
+        opacity: 0;
+        transition:
+            transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+            opacity 0.8s;
+        will-change: transform;
+    }
+
+    .h-speeddial-circle .h-speeddial-item,
+    .h-speeddial-semi-circle .h-speeddial-item,
+    .h-speeddial-quarter-circle .h-speeddial-item {
+        position: absolute;
+    }
+
+    .h-speeddial-mask {
+        position: absolute;
+        border-radius: dt('content.border.radius');
+    }
+
+    .h-speeddial-open .h-speeddial-list {
+        pointer-events: auto;
+    }
+
+    .h-speeddial-open .h-speeddial-item {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .h-speeddial-open .h-speeddial-rotate {
+        transform: rotate(45deg);
+    }
+`;
+
+/* 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 }) => [
+        `h-speeddial h-component h-speeddial-${instance.type()}`,
+        {
+            [`h-speeddial-direction-${instance.direction()}`]: instance.type() !== 'circle',
+            'h-speeddial-open': instance.visible(),
+            'h-disabled': instance.disabled()
+        }
+    ],
+    pcButton: ({ instance }) => [
+        'h-button-icon-only h-speeddial-button h-button-rounded',
+        {
+            'h-speeddial-rotate': instance.rotateAnimation() && !instance.hideIcon()
+        }
+    ],
+    list: 'h-speeddial-list',
+    item: ({ instance, item, i }) => ['h-speeddial-item', { 'h-hidden': item.visible === false, 'h-focus': instance.focusedOptionId == instance.$id() + '_' + i }],
+    pcAction: 'h-speeddial-action',
+    actionIcon: 'h-speeddial-action-icon',
+    mask: 'h-speeddial-mask h-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.6", ngImport: i0, type: SpeedDialStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SpeedDialStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SpeedDialStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * When pressed, a floating action button can display multiple primary actions that can be performed on a page.
+ *
+ * [Live Demo](https://www.primeng.org/speeddial/)
+ *
+ * @module speeddialstyle
+ *
+ */
+var SpeedDialClasses;
+(function (SpeedDialClasses) {
+    /**
+     * Class name of the root element
+     */
+    SpeedDialClasses["root"] = "h-speeddial";
+    /**
+     * Class name of the button element
+     */
+    SpeedDialClasses["pcButton"] = "h-speeddial-button";
+    /**
+     * Class name of the list element
+     */
+    SpeedDialClasses["list"] = "h-speeddial-list";
+    /**
+     * Class name of the item element
+     */
+    SpeedDialClasses["item"] = "h-speeddial-item";
+    /**
+     * Class name of the action element
+     */
+    SpeedDialClasses["pcAction"] = "h-speeddial-action";
+    /**
+     * Class name of the action icon element
+     */
+    SpeedDialClasses["actionIcon"] = "h-speeddial-action-icon";
+    /**
+     * Class name of the mask element
+     */
+    SpeedDialClasses["mask"] = "h-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 */ []));
+    autoId = uuid('pn_id_');
+    $id = computed(() => this.id() || this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ 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(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    buttonProps = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ 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 = viewChild('container', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    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 });
+    templates = contentChildren(HelixTemplate, /* @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);
+    constructor() {
+        super();
+        effect(() => {
+            if (this.visible()) {
+                untracked(() => this.bindDocumentClickListener());
+            }
+            else {
+                untracked(() => this.unbindDocumentClickListener());
+            }
+        });
+    }
+    get focusedOptionId() {
+        return this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : null;
+    }
+    getTooltipOptions(item) {
+        return { ...this.tooltipOptions(), tooltipLabel: item.label, disabled: !this.tooltipOptions() };
+    }
+    getPTOptions(id, key) {
+        return this.ptm(key, {
+            context: {
+                active: this.isItemActive(id),
+                hidden: !this.visible()
+            }
+        });
+    }
+    isItemActive(id) {
+        return id === this.focusedOptionId;
+    }
+    onInit() {
+    }
+    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(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            default:
+                break;
+        }
+    }
+    onFocus(event) {
+        this.focused = true;
+    }
+    onBlur(event) {
+        this.focused = false;
+        asapScheduler.schedule(() => this.focusedOptionIndex.set(-1));
+    }
+    onArrowUp(event) {
+        const direction = this.direction();
+        if (direction === 'up') {
+            this.navigateNextItem(event);
+        }
+        else if (direction === 'down') {
+            this.navigatePrevItem(event);
+        }
+        else {
+            this.navigateNextItem(event);
+        }
+    }
+    onArrowDown(event) {
+        const direction = this.direction();
+        if (direction === 'up') {
+            this.navigatePrevItem(event);
+        }
+        else if (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'];
+        const direction = this.direction();
+        if (leftValidDirections.includes(direction || '')) {
+            this.navigateNextItem(event);
+        }
+        else if (rightValidDirections.includes(direction || '')) {
+            this.navigatePrevItem(event);
+        }
+        else {
+            this.navigatePrevItem(event);
+        }
+    }
+    onArrowRight(event) {
+        const leftValidDirections = ['left', 'up-right', 'down-left'];
+        const rightValidDirections = ['right', 'up-left', 'down-right'];
+        const direction = this.direction();
+        if (leftValidDirections.includes(direction || '')) {
+            this.navigatePrevItem(event);
+        }
+        else if (rightValidDirections.includes(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 container = this.container();
+        const items = find(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(event);
+        const buttonEl = findSingle(container?.nativeElement, 'button');
+        buttonEl && focus(buttonEl);
+    }
+    onEscapeKey(event) {
+        this.hide();
+        const buttonEl = findSingle(this.container()?.nativeElement, 'button');
+        buttonEl && focus(buttonEl);
+    }
+    onTogglerKeydown(event) {
+        switch (event.code) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                this.onTogglerArrowDown(event);
+                break;
+            case 'ArrowUp':
+            case 'ArrowRight':
+                this.onTogglerArrowUp(event);
+                break;
+            case 'Escape':
+                this.onEscapeKey(event);
+                break;
+            default:
+                break;
+        }
+    }
+    onTogglerArrowUp(event) {
+        this.focused = true;
+        focus(this.list()?.nativeElement);
+        this.show();
+        this.navigatePrevItem(event);
+        event.preventDefault();
+    }
+    onTogglerArrowDown(event) {
+        this.focused = true;
+        focus(this.list()?.nativeElement);
+        this.show();
+        this.navigateNextItem(event);
+        event.preventDefault();
+    }
+    navigateNextItem(event) {
+        const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex());
+        this.changeFocusedOptionIndex(optionIndex);
+        event.preventDefault();
+    }
+    navigatePrevItem(event) {
+        const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex());
+        this.changeFocusedOptionIndex(optionIndex);
+        event.preventDefault();
+    }
+    findPrevOptionIndex(index) {
+        const items = find(this.container()?.nativeElement, '[data-pc-section="item"]');
+        const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'h-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'), 'h-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'), 'h-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() {
+        const showIcon = this.showIcon();
+        if (!this.visible() && showIcon) {
+            return showIcon;
+        }
+        const hideIcon = this.hideIcon();
+        if (this.visible() && hideIcon) {
+            return hideIcon;
+        }
+        return 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) {
+        const container = this.container();
+        return container && !(container.nativeElement.isSameNode(event.target) || 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.6", ngImport: i0, type: SpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SpeedDial, isStandalone: true, selector: "h-speeddial, h-speedDial, h-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: "buttonTemplate", first: true, predicate: ["button"], isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<div #container [hBind]=\"ptm('root')\" [class]=\"cn(cx('root'), className())\" [style]=\"style()\" [ngStyle]=\"sx('root')\">\n  @if (!buttonTemplate() && !_buttonTemplate) {\n    <button\n      type=\"button\"\n      hButton\n      hRipple\n      [style]=\"buttonStyle()\"\n      [icon]=\"buttonIconClass\"\n      [class]=\"cn(cx('pcButton'), buttonClassName())\"\n      [disabled]=\"disabled()\"\n      [attr.aria-expanded]=\"visible()\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-controls]=\"$id() + '_list'\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      (click)=\"onButtonClick($event)\"\n      (keydown)=\"onTogglerKeydown($event)\"\n      [buttonProps]=\"buttonProps()\"\n      [pt]=\"ptm('pcButton')\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!buttonIconClass && !iconTemplate() && !_iconTemplate) {\n        <svg data-h-icon=\"plus\" hButtonIcon [pt]=\"ptm('pcButton')['icon']\" />\n      }\n      <ng-container *ngTemplateOutlet=\"iconTemplate() || _iconTemplate\"></ng-container>\n    </button>\n  }\n  @if (buttonTemplate() || _buttonTemplate) {\n    <ng-container *ngTemplateOutlet=\"buttonTemplate() || _buttonTemplate; context: { toggleCallback: onButtonClick.bind(this) }\"></ng-container>\n  }\n  <ul\n    #list\n    [hBind]=\"ptm('list')\"\n    [class]=\"cx('list')\"\n    role=\"menu\"\n    [id]=\"$id() + '_list'\"\n    (focus)=\"onFocus($event)\"\n    (focusout)=\"onBlur($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n    [tabindex]=\"-1\"\n    [ngStyle]=\"sx('list')\"\n    >\n    @for (item of model(); track item; let i = $index) {\n      <li\n        [hBind]=\"getPTOptions($id() + '_' + i, 'item')\"\n        [ngStyle]=\"getItemStyle(i)\"\n        [class]=\"cx('item', { item, i })\"\n        hTooltip\n        [pTooltipUnstyled]=\"unstyled()\"\n        [tooltipOptions]=\"item.tooltipOptions || getTooltipOptions(item)\"\n        [id]=\"$id() + '_' + i\"\n        [attr.aria-controls]=\"$id() + '_item'\"\n        role=\"menuitem\"\n        [attr.data-h-active]=\"isItemActive($id() + '_' + i)\"\n        >\n        @if (itemTemplate() || _itemTemplate) {\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }\"></ng-container>\n        }\n        @if (!itemTemplate() && !_itemTemplate) {\n          <button\n            type=\"button\"\n            hButton\n            hRipple\n            [class]=\"cx('pcAction')\"\n            severity=\"secondary\"\n            [rounded]=\"true\"\n            size=\"small\"\n            role=\"menuitem\"\n            (click)=\"onItemClick($event, item)\"\n            [disabled]=\"$safeNavigationMigration(item?.disabled)\"\n            (keydown.enter)=\"onItemClick($event, item)\"\n            [attr.aria-label]=\"item.label\"\n            [attr.tabindex]=\"item.disabled || !visible() ? null : item.tabindex ? item.tabindex : '0'\"\n            [pt]=\"getPTOptions($id() + '_' + i, 'pcAction')\"\n            [unstyled]=\"unstyled()\"\n            >\n            @if (item.icon) {\n              <span hButtonIcon [pt]=\"getPTOptions($id() + '_' + i, 'actionIcon')\" [class]=\"item.icon\"></span>\n            }\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</div>\n@if (mask() && visible()) {\n  <div [hBind]=\"ptm('mask')\" [class]=\"cn(cx('mask'), maskClassName())\" [ngStyle]=\"maskStyle()\" animate.enter=\"h-overlay-mask-enter-active\" animate.leave=\"h-overlay-mask-leave-active\"></div>\n}\n", 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: "[hButton]", 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: "[hButtonIcon]", inputs: ["ptButtonIcon", "pButtonIconPT", "pButtonUnstyled"] }, { kind: "directive", type: Ripple, selector: "[hRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[hTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "hTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: PlusIcon, selector: "[data-h-icon=\"plus\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SpeedDial, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-speeddial, h-speedDial, h-speed-dial', standalone: true, imports: [CommonModule, ButtonModule, Ripple, TooltipModule, RouterModule, PlusIcon, SharedModule, Bind], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [SpeedDialStyle, { provide: SPEED_DIAL_INSTANCE, useExisting: SpeedDial }, { provide: PARENT_INSTANCE, useExisting: SpeedDial }], hostDirectives: [Bind], template: "<div #container [hBind]=\"ptm('root')\" [class]=\"cn(cx('root'), className())\" [style]=\"style()\" [ngStyle]=\"sx('root')\">\n  @if (!buttonTemplate() && !_buttonTemplate) {\n    <button\n      type=\"button\"\n      hButton\n      hRipple\n      [style]=\"buttonStyle()\"\n      [icon]=\"buttonIconClass\"\n      [class]=\"cn(cx('pcButton'), buttonClassName())\"\n      [disabled]=\"disabled()\"\n      [attr.aria-expanded]=\"visible()\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-controls]=\"$id() + '_list'\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      (click)=\"onButtonClick($event)\"\n      (keydown)=\"onTogglerKeydown($event)\"\n      [buttonProps]=\"buttonProps()\"\n      [pt]=\"ptm('pcButton')\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!buttonIconClass && !iconTemplate() && !_iconTemplate) {\n        <svg data-h-icon=\"plus\" hButtonIcon [pt]=\"ptm('pcButton')['icon']\" />\n      }\n      <ng-container *ngTemplateOutlet=\"iconTemplate() || _iconTemplate\"></ng-container>\n    </button>\n  }\n  @if (buttonTemplate() || _buttonTemplate) {\n    <ng-container *ngTemplateOutlet=\"buttonTemplate() || _buttonTemplate; context: { toggleCallback: onButtonClick.bind(this) }\"></ng-container>\n  }\n  <ul\n    #list\n    [hBind]=\"ptm('list')\"\n    [class]=\"cx('list')\"\n    role=\"menu\"\n    [id]=\"$id() + '_list'\"\n    (focus)=\"onFocus($event)\"\n    (focusout)=\"onBlur($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n    [tabindex]=\"-1\"\n    [ngStyle]=\"sx('list')\"\n    >\n    @for (item of model(); track item; let i = $index) {\n      <li\n        [hBind]=\"getPTOptions($id() + '_' + i, 'item')\"\n        [ngStyle]=\"getItemStyle(i)\"\n        [class]=\"cx('item', { item, i })\"\n        hTooltip\n        [pTooltipUnstyled]=\"unstyled()\"\n        [tooltipOptions]=\"item.tooltipOptions || getTooltipOptions(item)\"\n        [id]=\"$id() + '_' + i\"\n        [attr.aria-controls]=\"$id() + '_item'\"\n        role=\"menuitem\"\n        [attr.data-h-active]=\"isItemActive($id() + '_' + i)\"\n        >\n        @if (itemTemplate() || _itemTemplate) {\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }\"></ng-container>\n        }\n        @if (!itemTemplate() && !_itemTemplate) {\n          <button\n            type=\"button\"\n            hButton\n            hRipple\n            [class]=\"cx('pcAction')\"\n            severity=\"secondary\"\n            [rounded]=\"true\"\n            size=\"small\"\n            role=\"menuitem\"\n            (click)=\"onItemClick($event, item)\"\n            [disabled]=\"$safeNavigationMigration(item?.disabled)\"\n            (keydown.enter)=\"onItemClick($event, item)\"\n            [attr.aria-label]=\"item.label\"\n            [attr.tabindex]=\"item.disabled || !visible() ? null : item.tabindex ? item.tabindex : '0'\"\n            [pt]=\"getPTOptions($id() + '_' + i, 'pcAction')\"\n            [unstyled]=\"unstyled()\"\n            >\n            @if (item.icon) {\n              <span hButtonIcon [pt]=\"getPTOptions($id() + '_' + i, 'actionIcon')\" [class]=\"item.icon\"></span>\n            }\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</div>\n@if (mask() && visible()) {\n  <div [hBind]=\"ptm('mask')\" [class]=\"cn(cx('mask'), maskClassName())\" [ngStyle]=\"maskStyle()\" animate.enter=\"h-overlay-mask-enter-active\" animate.leave=\"h-overlay-mask-leave-active\"></div>\n}\n" }]
+        }], 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: i0.ViewChild, args: ['container', { isSignal: true }] }], 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 }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
+class SpeedDialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule], exports: [SpeedDial, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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=gravionlabs-helix-core-speeddial.mjs.map