import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';
import { d as defineCustomElement$4 } from './component.js';
import { d as defineCustomElement$3 } from './component4.js';
import { d as defineCustomElement$2 } from './component2.js';

const styleCss = "x-fab{position:relative;-webkit-transition:0.4s opacity, 0.4s background-color, 0.4s padding, 0.4s -webkit-transform, 0.4s -webkit-box-shadow;transition:0.4s opacity, 0.4s background-color, 0.4s padding, 0.4s -webkit-transform, 0.4s -webkit-box-shadow;transition:0.4s transform, 0.4s opacity, 0.4s box-shadow, 0.4s background-color, 0.4s padding;transition:0.4s transform, 0.4s opacity, 0.4s box-shadow, 0.4s background-color, 0.4s padding, 0.4s -webkit-transform, 0.4s -webkit-box-shadow;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-box-sizing:border-box;box-sizing:border-box;text-decoration:none;color:var(--color-primary, #4275F2);width:50px;height:50px;border:none;text-align:center;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:5px;line-height:1em;margin:0px;outline:none;font-weight:700;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}x-fab x-button{border-radius:50%}x-fab x-button button,x-fab x-button a{border-radius:50%}x-fab.fab-fixed{position:fixed !important}x-fab.fab-float,x-fab.fab-fixed{position:absolute}x-fab.fab-float.fab-position-top-left,x-fab.fab-fixed.fab-position-top-left{top:1rem;left:1rem}x-fab.fab-float.fab-position-top-right,x-fab.fab-fixed.fab-position-top-right{top:1rem;right:1rem}x-fab.fab-float.fab-position-bottom-left,x-fab.fab-fixed.fab-position-bottom-left{bottom:1rem;left:1rem}x-fab.fab-float.fab-position-bottom-right,x-fab.fab-fixed.fab-position-bottom-right{bottom:1rem;right:1rem}x-fab.fab-loading x-icon{animation:cycle 0.8s infinite linear reverse}@-webkit-keyframes cycle{0%{-webkit-animation-timing-function:cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667);animation-timing-function:cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes cycle{0%{-webkit-animation-timing-function:cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667);animation-timing-function:cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
const XFabStyle0 = styleCss;

const XFab$1 = /*@__PURE__*/ proxyCustomElement(class XFab extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.icon = undefined;
        this.url = undefined;
        this.loading = false;
        this.disabled = false;
        this.float = false;
        this.fixed = false;
        this.position = 'top-right';
        this.color = 'default';
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '650afc9fb86589da87fba2668963f65072d1ec54', class: cls(`fab-position-${this.position}`, { 'fab-disabled': this.disabled, 'fab-float': this.float, 'fab-fixed': this.fixed, 'fab-loading': this.loading }) }, h("x-button", { key: '5846adf94b98b9d095c9c1a441e7af28fd3db52e', href: this.url, icon: this.loading ? 'update' : this.icon, disabled: this.disabled || this.loading, color: this.color }));
    }
    static get style() { return XFabStyle0; }
}, [0, "x-fab", {
        "icon": [1],
        "url": [1],
        "loading": [4],
        "disabled": [4],
        "float": [4],
        "fixed": [4],
        "position": [1],
        "color": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-fab", "x-animate", "x-button", "x-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "x-fab":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XFab$1);
            }
            break;
        case "x-animate":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "x-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XFab = XFab$1;
const defineCustomElement = defineCustomElement$1;

export { XFab, defineCustomElement };
