atomicuilibrary 0.0.1

package/dist/collection/components/fab/fab.js

@@ -0,0 +1,1124 @@
+import { h, Host } from "@stencil/core";
+export class Fab {
+    el;
+    isExpanded = false;
+    defaultOpen = false;
+    position = 'bottom-right';
+    direction = 'top';
+    variant = 'primary';
+    size = 'md';
+    type = 'standard';
+    icon;
+    label;
+    disabled = false;
+    loading = false;
+    toggle = false;
+    isDraggable = false;
+    hideOnScroll = false;
+    showOnScrollUp = false;
+    offsetX = 24;
+    offsetY = 24;
+    zIndex = 1000;
+    expandOnHover = false;
+    expandOnClick = true;
+    closeOnAction = true;
+    backdrop = false;
+    backdropClose = true;
+    persistent = false;
+    animation = 'scale';
+    panel = false;
+    panelTitle;
+    panelWidth = '320px';
+    panelHeight;
+    panelMaxHeight = '480px';
+    isDragging = false;
+    isHidden = false;
+    currentX = 0;
+    currentY = 0;
+    uiFabClick;
+    uiFabOpen;
+    uiFabClose;
+    uiFabToggle;
+    uiFabActionClick;
+    dragStartX = 0;
+    dragStartY = 0;
+    lastScrollY = 0;
+    internalOpen = false;
+    componentWillLoad() {
+        this.internalOpen = this.defaultOpen || this.isExpanded;
+        this.currentX = this.offsetX;
+        this.currentY = this.offsetY;
+    }
+    componentDidLoad() {
+        if (this.hideOnScroll || this.showOnScrollUp) {
+            this.lastScrollY = window.scrollY;
+        }
+    }
+    openChanged(newValue) {
+        this.internalOpen = newValue;
+        if (newValue) {
+            this.uiFabOpen.emit();
+            this.calculateRadial();
+        }
+        else {
+            this.uiFabClose.emit();
+        }
+    }
+    async openFab() {
+        this.isExpanded = true;
+    }
+    async closeFab() {
+        this.isExpanded = false;
+    }
+    async toggleFab() {
+        this.isExpanded = !this.internalOpen;
+        this.uiFabToggle.emit({ isExpanded: this.internalOpen });
+    }
+    async show() {
+        this.isHidden = false;
+    }
+    async hide() {
+        this.isHidden = true;
+    }
+    handleScroll() {
+        if (!this.hideOnScroll && !this.showOnScrollUp)
+            return;
+        const currentScrollY = window.scrollY;
+        const scrollingDown = currentScrollY > this.lastScrollY;
+        if (this.showOnScrollUp && !scrollingDown && currentScrollY > 100) {
+            this.isHidden = false;
+        }
+        else if (this.hideOnScroll && scrollingDown && currentScrollY > 100) {
+            this.isHidden = true;
+            if (this.internalOpen)
+                this.closeFab();
+        }
+        this.lastScrollY = currentScrollY;
+    }
+    handleKeyDown(ev) {
+        if (this.disabled || this.loading)
+            return;
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.handleClick(new MouseEvent('click'));
+        }
+        else if (ev.key === 'Escape' && this.internalOpen) {
+            this.closeFab();
+            this.focusTrigger();
+        }
+    }
+    focusTrigger() {
+        const trigger = this.el.shadowRoot?.querySelector('.fab-trigger');
+        if (trigger)
+            trigger.focus();
+    }
+    handleClick = (e) => {
+        if (this.disabled || this.loading)
+            return;
+        if (this.type === 'speed-dial' || this.toggle || this.panel) {
+            if (this.expandOnClick) {
+                this.toggleFab();
+            }
+        }
+        else {
+            this.uiFabClick.emit(e);
+        }
+    };
+    handleBackdropClick = () => {
+        if (this.backdropClose && this.internalOpen && !this.persistent) {
+            this.closeFab();
+        }
+    };
+    handleMouseEnter = () => {
+        if (this.expandOnHover && !this.disabled && !this.loading) {
+            this.openFab();
+        }
+    };
+    handleMouseLeave = () => {
+        if (this.expandOnHover && !this.persistent) {
+            this.closeFab();
+        }
+    };
+    handlePointerDown = (e) => {
+        if (!this.isDraggable || this.disabled)
+            return;
+        this.isDragging = true;
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+        this.el.setPointerCapture(e.pointerId);
+    };
+    handlePointerMove = (e) => {
+        if (!this.isDragging || !this.isDraggable)
+            return;
+        const dx = e.clientX - this.dragStartX;
+        const dy = e.clientY - this.dragStartY;
+        if (this.position.includes('right'))
+            this.currentX -= dx;
+        else if (this.position.includes('left'))
+            this.currentX += dx;
+        if (this.position.includes('bottom'))
+            this.currentY -= dy;
+        else if (this.position.includes('top'))
+            this.currentY += dy;
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+    };
+    handlePointerUp = (e) => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        this.el.releasePointerCapture(e.pointerId);
+    };
+    onActionClick() {
+        if (this.closeOnAction && this.internalOpen && !this.persistent) {
+            this.closeFab();
+        }
+    }
+    calculateRadial() {
+        if (this.direction !== 'radial')
+            return;
+        const items = Array.from(this.el.querySelectorAll('ui-fab-item'));
+        if (!items.length)
+            return;
+        // Dynamically adjust distance based on item count to prevent overlap
+        const baseDistance = 80;
+        const distancePadding = Math.max(0, (items.length - 4) * 15);
+        const distance = baseDistance + distancePadding;
+        // For corner positions, we start with 90 but can expand to 100 or 110 if many items
+        const baseArc = 90;
+        const arcPadding = Math.max(0, (items.length - 3) * 10);
+        const totalAngles = Math.min(120, baseArc + arcPadding);
+        const step = items.length === 1 ? 0 : totalAngles / (items.length - 1);
+        items.forEach((item, index) => {
+            const angle = step * index;
+            const rad = angle * (Math.PI / 180);
+            let dx = Math.abs(Math.sin(rad) * distance);
+            let dy = Math.abs(Math.cos(rad) * distance);
+            // Determine expansion direction based on anchor
+            if (this.position.includes('right'))
+                dx = -dx;
+            if (this.position.includes('bottom'))
+                dy = -dy;
+            // Handle center edge cases dynamically
+            if (this.position.includes('-center')) {
+                const fullArc = Math.min(220, 180 + (items.length - 3) * 15);
+                const centeredStep = items.length === 1 ? 0 : fullArc / (items.length - 1);
+                const centeredAngle = (centeredStep * index) - (fullArc / 2);
+                const centeredRad = centeredAngle * (Math.PI / 180);
+                dx = Math.sin(centeredRad) * distance;
+                dy = this.position.includes('bottom') ? -Math.cos(centeredRad) * distance : Math.cos(centeredRad) * distance;
+            }
+            // Handle cental vertically aligned cases (center-left, center-right)
+            if (this.position.includes('center-')) {
+                const fullArc = Math.min(180, 120 + (items.length - 3) * 15);
+                const centeredStep = items.length === 1 ? 0 : fullArc / (items.length - 1);
+                const centeredAngle = (centeredStep * index) - (fullArc / 2);
+                const centeredRad = centeredAngle * (Math.PI / 180);
+                dy = Math.sin(centeredRad) * distance;
+                dx = this.position.includes('right') ? -Math.cos(centeredRad) * distance : Math.cos(centeredRad) * distance;
+            }
+            item.style.setProperty('--radial-x', `${dx}px`);
+            item.style.setProperty('--radial-y', `${dy}px`);
+        });
+    }
+    render() {
+        const isExtended = !!(this.type === 'extended' || (this.label && this.type !== 'speed-dial'));
+        const isSpeedDial = this.type === 'speed-dial';
+        const hostClasses = {
+            'fab-container': true,
+            [`pos-${this.position}`]: true,
+            [`dir-${this.direction}`]: true,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            [`anim-${this.animation}`]: true,
+            'is-open': this.internalOpen,
+            'is-hidden': this.isHidden,
+            'is-extended': isExtended,
+            'is-speed-dial': isSpeedDial,
+            'is-dragging': this.isDragging,
+            'is-disabled': this.disabled,
+            'is-loading': this.loading
+        };
+        const hostStyles = {
+            '--fab-offset-x': `${this.currentX}px`,
+            '--fab-offset-y': `${this.currentY}px`,
+            'z-index': this.zIndex.toString()
+        };
+        return (h(Host, { key: '3134d7c95b289f7ba1fbe491e2381a39ab33cd90', class: hostClasses, style: hostStyles }, this.backdrop && this.internalOpen && (h("div", { key: '65ab05d3229cdd3c50436461400a93dfbdc79f89', class: "fab-backdrop", onClick: this.handleBackdropClick })), h("div", { key: '095790fe29d7b5110679b9e83af15e16654b5f9c', class: "fab-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, isSpeedDial && (h("div", { key: 'cd098ce374a0f59635d9e36f94cc8873225a35c7', class: "fab-actions", "aria-hidden": !this.internalOpen ? 'true' : 'false' }, h("slot", { key: '22573c4f39319b8c438265035c7062eabd31a0dd', name: "actions" }))), this.panel && (h("div", { key: 'eba8176fc2531f4984f1a15db4439d739d72c364', class: {
+                'fab-panel': true,
+                'has-header': !!this.panelTitle
+            }, role: "dialog", "aria-hidden": !this.internalOpen ? 'true' : 'false', style: {
+                width: this.panelWidth,
+                height: this.panelHeight,
+                maxHeight: this.panelMaxHeight
+            } }, this.panelTitle && (h("div", { key: '32f400ac44e2559bc42857c5f953c8339749747b', class: "fab-panel-header" }, h("span", { key: 'a8ab67880b596cf3ac7ee9608ed69533da83a164', class: "fab-panel-title" }, this.panelTitle), h("ui-button", { key: '8258cd221bf4f1ce486f2e789ffa160609385c1f', variant: "ghost", class: "fab-panel-close", onClick: () => this.closeFab(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" }))), h("div", { key: 'b934937a301cfa9f759644679a5b42b88bdfb956', class: "fab-panel-body" }, h("slot", { key: 'd0583bd15b3a49b9d0d78698464811cd7d3ddccf', name: "panel" })), h("div", { key: '628ff324c833159612e523ca14c8b34ee591d23f', class: "fab-panel-footer" }, h("slot", { key: '4d738a08683eae8f5ad3d96397b65983c9f00deb', name: "panel-footer" })))), h("ui-button", { key: '40f831f7769b5918779a74100aab35ebe87d46ae', variant: this.variant, shape: this.type === 'extended' || (this.label && this.type !== 'speed-dial') ? 'rounded' : 'circle', class: "fab-trigger", disabled: this.disabled || this.loading, loading: this.loading, ariaLabel: this.label || 'Floating Action Button', onClick: this.handleClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, label: isExtended && this.label ? this.label : undefined, icon: this.icon, iconOnly: !isExtended, size: this.size === 'mini' ? 'sm' : (this.size === 'lg' ? 'lg' : 'md') }, isSpeedDial && this.toggle && this.internalOpen && (h("ui-icon", { key: '46fdd3e22ff4ae11f0fa3b27166db77bb0ca4a38', slot: "icon", class: "fab-icon close-icon", name: "x", size: this.size === 'mini' ? '18' : '24' })), !this.icon && !isExtended && h("slot", { key: '045dd7944e14501a0a703754ee21bc1f2d77fdff', name: "trigger" })))));
+    }
+    static get is() { return "ui-fab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["fab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["fab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expanded",
+                "defaultValue": "false"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourCornerPosition | CenterSidePosition",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"center-left\" | \"center-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        },
+                        "CenterSidePosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::CenterSidePosition",
+                            "referenceLocation": "CenterSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom-right'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition | 'radial'",
+                    "resolved": "\"bottom\" | \"left\" | \"radial\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'top'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'mini' | BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"mini\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FabType",
+                    "resolved": "\"extended\" | \"speed-dial\" | \"standard\"",
+                    "references": {
+                        "FabType": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FabType",
+                            "referenceLocation": "FabType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'standard'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "toggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle",
+                "defaultValue": "false"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            },
+            "hideOnScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-on-scroll",
+                "defaultValue": "false"
+            },
+            "showOnScrollUp": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-on-scroll-up",
+                "defaultValue": "false"
+            },
+            "offsetX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-x",
+                "defaultValue": "24"
+            },
+            "offsetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-y",
+                "defaultValue": "24"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "z-index",
+                "defaultValue": "1000"
+            },
+            "expandOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-on-hover",
+                "defaultValue": "false"
+            },
+            "expandOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-on-click",
+                "defaultValue": "true"
+            },
+            "closeOnAction": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-action",
+                "defaultValue": "true"
+            },
+            "backdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop",
+                "defaultValue": "false"
+            },
+            "backdropClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop-close",
+                "defaultValue": "true"
+            },
+            "persistent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persistent",
+                "defaultValue": "false"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FabAnimation",
+                    "resolved": "\"fade\" | \"rotate\" | \"scale\" | \"slide-down\" | \"slide-left\" | \"slide-right\" | \"slide-up\"",
+                    "references": {
+                        "FabAnimation": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FabAnimation",
+                            "referenceLocation": "FabAnimation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'scale'"
+            },
+            "panel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel",
+                "defaultValue": "false"
+            },
+            "panelTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-title"
+            },
+            "panelWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-width",
+                "defaultValue": "'320px'"
+            },
+            "panelHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-height"
+            },
+            "panelMaxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-max-height",
+                "defaultValue": "'480px'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragging": {},
+            "isHidden": {},
+            "currentX": {},
+            "currentY": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiFabClick",
+                "name": "uiFabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "uiFabOpen",
+                "name": "uiFabOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "uiFabClose",
+                "name": "uiFabClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "uiFabToggle",
+                "name": "uiFabToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ isExpanded: boolean }",
+                    "resolved": "{ isExpanded: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "uiFabActionClick",
+                "name": "uiFabActionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: any }",
+                    "resolved": "{ value: any; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openFab": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeFab": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggleFab": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isExpanded",
+                "methodName": "openChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "uiFabActionClick",
+                "method": "onActionClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}