import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-58de451e.js';

const Alert = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Sets the alert context
         * Options are: `"info"`, "success"`, `"danger"`, `"warning"`, and `"primary"`.
         * Default value is: 'info'
         */
        this.context = 'info';
        this.anjAlertWillDismiss = createEvent(this, "anjAlertWillDismiss", 7);
    }
    onDismiss() {
        this.anjAlertWillDismiss.emit();
        this.element.remove();
    }
    onCollapseEvent(collapse) {
        this.collapsedClass = (collapse.detail) ? 'anj-collapsed' : undefined;
    }
    render() {
        return (h(Host, { class: this.collapsedClass }, h("slot", null)));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-alert-h{font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;border-radius:0;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);padding:1rem;background-color:var(--anj-light);display:block;background-color:#f1f5f6;max-height:1000px;overflow:hidden;position:relative;-webkit-transition:max-height .4s ease-in;transition:max-height .4s ease-in}.sc-anj-alert-h, .sc-anj-alert-h:after, .sc-anj-alert-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-alert-h:active, .sc-anj-alert-h .sc-anj-alert:active, .sc-anj-alert-h:focus, .sc-anj-alert-h .sc-anj-alert:focus{outline:none}.anj-collapsed.sc-anj-alert-h{max-height:56px;-webkit-transition:max-height .4s ease-out;transition:max-height .4s ease-out}[context=primary].sc-anj-alert-h{background-color:#e9f1f8}[context=danger].sc-anj-alert-h{background-color:#f6ebeb}[context=success].sc-anj-alert-h{background-color:#f0f4f0}[context=warning].sc-anj-alert-h{background-color:#fff1ec}.sc-anj-alert-s > p:last-child{margin-bottom:0}"; }
};

const Button = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Sets the button to active. This lets you keep the hover state look even when the focus is lost
         */
        this.active = false;
        /**
         * Accessible label for the button
         */
        this.ariaLabel = '';
        /**
         * The button context
         * Options are: `"primary"`, `"secondary"`, "text"`, `"icon"`, and `"free"`.
         * Default is "primary".
         */
        this.context = 'primary';
        /**
         * The type of the button matching the native button types.
         * Possible values are: `"submit"`, `"reset"` and `"button"`.
         * Default value is: `"button"`
         */
        this.type = 'button';
        this.anjBlur = createEvent(this, "anjBlur", 7);
        this.anjFocus = createEvent(this, "anjFocus", 7);
    }
    onBlur() {
        this.anjBlur.emit();
    }
    onFocus() {
        this.anjFocus.emit();
    }
    attrs(tag) {
        const baseAttrs = (tag === 'button')
            ? {
                type: this.type
            }
            : {
                download: this.download,
                href: this.href,
                rel: this.rel,
                target: this.target
            };
        // Always set the aria label to avoid it repeating for reasons I can't figure out https://git.zias.io/ui-foundation/anjuna/issues/595 -r
        baseAttrs['aria-label'] = this.ariaLabel ? this.ariaLabel : this.element.textContent;
        const disabledAttrs = this.disabled ?
            {
                'aria-disabled': 'true',
                disabled: true,
                tabindex: -1,
            } : {};
        return Object.assign(this.dataAttributes(), disabledAttrs, baseAttrs);
    }
    dataAttributes() {
        const attrMap = {};
        for (const key in this.element.attributes) {
            if (this.element.attributes[key].nodeName) {
                const name = this.element.attributes[key].nodeName;
                const value = this.element.attributes[key].nodeValue;
                if (name.includes('data-')) {
                    attrMap[name] = value;
                }
            }
        }
        return attrMap;
    }
    render() {
        const TagType = this.href === undefined ? 'button' : 'a';
        return (h(Host, null, h(TagType, Object.assign({ class: "anj-button" }, this.attrs(TagType), { onFocus: () => this.onFocus(), onBlur: () => this.onBlur() }), h("slot", { name: "icon-only" }), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" }), h("div", { class: "anj-focus-overlay" }), h("anj-ripple-effect", { start: 0.15, end: this.context === 'free' ? 0.4 : 1 }))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-button-h{display:inline-block;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none}.sc-anj-button-h, .sc-anj-button-h:after, .sc-anj-button-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-button-h:active, .sc-anj-button-h .sc-anj-button:active, .sc-anj-button-h:focus, .sc-anj-button-h .sc-anj-button:focus{outline:none}[type].sc-anj-button-h{-webkit-appearance:none}[disabled].sc-anj-button-h{pointer-events:none}.sc-anj-button-h[disabled] .sc-anj-button-s > svg{color:var(--anj-text-muted);fill:var(--anj-text-muted)}[disabled].sc-anj-button-h .anj-button.sc-anj-button{color:var(--anj-text-muted);cursor:default}.sc-anj-button-h .anj-button.sc-anj-button{display:-ms-inline-flexbox;display:inline-flex;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;-ms-flex-align:center;align-items:center;border:0;cursor:pointer;overflow:hidden;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.sc-anj-button-h .anj-button.sc-anj-button, .sc-anj-button-h .anj-button.sc-anj-button:after, .sc-anj-button-h .anj-button.sc-anj-button:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-button-h .anj-button.sc-anj-button:active, .sc-anj-button-h .anj-button.sc-anj-button .sc-anj-button:active, .sc-anj-button-h .anj-button.sc-anj-button:focus, .sc-anj-button-h .anj-button.sc-anj-button .sc-anj-button:focus{outline:none}.sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.sc-anj-button-h a.anj-button.sc-anj-button:active, .sc-anj-button-h a.anj-button.sc-anj-button:focus, .sc-anj-button-h a.anj-button.sc-anj-button:hover{text-decoration:none}[context=primary].sc-anj-button-h .anj-button.sc-anj-button, [context=secondary].sc-anj-button-h .anj-button.sc-anj-button, [context=text].sc-anj-button-h .anj-button.sc-anj-button{border-radius:.25rem;height:2.25rem;letter-spacing:.0625rem;line-height:2.25rem;padding:0 1rem;text-transform:uppercase;white-space:nowrap}.sc-anj-button-h[context=primary]:not([disabled]) .sc-anj-button-s > svg{fill:var(--anj-light)}[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button{-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12),0 1px 3px 0 rgba(0,0,0,.2);box-shadow:0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12),0 1px 3px 0 rgba(0,0,0,.2);background-color:var(--anj-highlight);color:var(--anj-light);-webkit-transition:-webkit-box-shadow .2s ease;transition:-webkit-box-shadow .2s ease;transition:box-shadow .2s ease;transition:box-shadow .2s ease,-webkit-box-shadow .2s ease}[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{background-color:var(--anj-highlight-overlay)}[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:focus .anj-focus-overlay.sc-anj-button, [context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:hover .anj-focus-overlay.sc-anj-button{opacity:.16}[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:focus{-webkit-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:active, [context=primary].sc-anj-button-h:not([disabled])[active] .anj-button.sc-anj-button{-webkit-box-shadow:none;box-shadow:none}[context=primary].sc-anj-button-h:not([disabled])[active] .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{opacity:.16}[context=primary][disabled].sc-anj-button-h .anj-button.sc-anj-button{-webkit-box-shadow:none;box-shadow:none;background-color:var(--anj-background)}.sc-anj-button-h[context=secondary]:not([disabled]) .sc-anj-button-s > svg, .sc-anj-button-h[context=text]:not([disabled]) .sc-anj-button-s > svg{fill:var(--anj-highlight)}[context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button, [context=text].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button{color:var(--anj-link)}[context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button, [context=text].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{background-color:var(--anj-highlight)}[context=secondary].sc-anj-button-h:not([disabled]) .anj-button.active.sc-anj-button .anj-focus-overlay.sc-anj-button, [context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:focus .anj-focus-overlay.sc-anj-button, [context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:hover .anj-focus-overlay.sc-anj-button, [context=text].sc-anj-button-h:not([disabled]) .anj-button.active.sc-anj-button .anj-focus-overlay.sc-anj-button, [context=text].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:focus .anj-focus-overlay.sc-anj-button, [context=text].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:hover .anj-focus-overlay.sc-anj-button{opacity:.24}[context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button anj-ripple-effect.sc-anj-button, [context=text].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button anj-ripple-effect.sc-anj-button{background-color:var(--anj-highlight)}[context=secondary].sc-anj-button-h:not([disabled])[active] .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button, [context=text].sc-anj-button-h:not([disabled])[active] .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{opacity:.16}[context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button{background-color:transparent;border:1px solid var(--anj-highlight)}[context=secondary][disabled].sc-anj-button-h .anj-button.sc-anj-button{background-color:var(--anj-background);border:1px solid var(--anj-border-dark)}[context=text].sc-anj-button-h .anj-button.sc-anj-button{background-color:transparent}[context=text][disabled][active].sc-anj-button-h .anj-button.sc-anj-button{background-color:var(--anj-background)}.sc-anj-button-h[context=free] .sc-anj-button-s > [slot=icon-only], .sc-anj-button-h[context=icon] .sc-anj-button-s > [slot=icon-only]{color:var(--anj-text-medium);fill:var(--anj-text-medium);margin:0 auto;-webkit-transition:color .2s ease,fill .2s ease;transition:color .2s ease,fill .2s ease}[context=free].sc-anj-button-h .anj-button.sc-anj-button, [context=icon].sc-anj-button-h .anj-button.sc-anj-button{background-color:transparent;border-radius:50%;height:2.5rem;width:2.5rem}[context=free].sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button, [context=icon].sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{border-radius:50%}[context=free].sc-anj-button-h anj-ripple-effect.sc-anj-button, [context=icon].sc-anj-button-h anj-ripple-effect.sc-anj-button{background-color:var(--anj-highlight)}.sc-anj-button-h[context=free][active] .sc-anj-button-s > [slot=icon-only], .sc-anj-button-h[context=icon][active] .sc-anj-button-s > [slot=icon-only]{color:var(--anj-text);fill:var(--anj-text)}[context=free][active].sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button, [context=icon][active].sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{opacity:.18}.sc-anj-button-h[context=free][disabled] .sc-anj-button-s > [slot=icon-only], .sc-anj-button-h[context=icon][disabled] .sc-anj-button-s > [slot=icon-only]{color:var(--anj-text-muted);fill:var(--anj-text-muted)}.sc-anj-button-h[context=icon]:focus-within .sc-anj-button-s > [slot=icon-only]{color:var(--anj-text-medium);fill:var(--anj-text-medium)}.sc-anj-button-h[context=icon]:active .sc-anj-button-s > [slot=icon-only], .sc-anj-button-h[context=icon]:hover .sc-anj-button-s > [slot=icon-only]{color:var(--anj-text);fill:var(--anj-text)}[context=icon].sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button{background-color:var(--anj-highlight)}[context=icon].sc-anj-button-h .anj-button.sc-anj-button:hover .anj-focus-overlay.sc-anj-button{opacity:.08}[context=icon].sc-anj-button-h .anj-button.sc-anj-button:focus .anj-focus-overlay.sc-anj-button{opacity:.12}.sc-anj-button-h[context=free]:focus-within .sc-anj-button-s > [slot=icon-only], .sc-anj-button-h[context=free]:hover .sc-anj-button-s > [slot=icon-only]{color:var(--anj-text);fill:var(--anj-text)}.sc-anj-button-h[context=free]:active .sc-anj-button-s > [slot=icon-only]{color:var(--anj-text-medium);fill:var(--anj-text-medium)}.sc-anj-button-s > [slot=icon-only]{margin-left:-.5rem;margin-right:-.5rem}.sc-anj-button-s > [slot=start]{margin-left:-.25rem;margin-right:.5rem}.sc-anj-button-s > [slot=end]{margin-left:.5rem;margin-right:-.25rem}anj-calendar[context=icon].sc-anj-button-h, anj-calendar [context=icon].sc-anj-button-h{height:36px;width:36px}"; }
};

const ButtonClose = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * If true will render as a free button instead of the standard icon.
         */
        this.free = false;
        this.anjClose = createEvent(this, "anjClose", 7);
    }
    onClick() {
        if (this.context !== 'clear') {
            this.anjClose.emit();
        }
    }
    render() {
        return (h("anj-button", { context: this.free ? 'free' : 'icon', onClick: () => this.onClick(), ariaLabel: this.context === 'clear' ? 'Clear' : 'Close' }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }))));
    }
    static get style() { return ".sc-anj-button-close-h{display:block}[context=floating].sc-anj-button-close-h{position:absolute;right:.5rem;top:.5rem;z-index:1}"; }
};

const ButtonCollapse = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.expanded = true;
        /**
         * If true will render as a free button instead of the standard icon.
         */
        this.free = false;
        this.anjCollapse = createEvent(this, "anjCollapse", 7);
    }
    onClick() {
        if (this.context !== 'clear') {
            this.anjCollapse.emit(this.expanded);
        }
        this.expanded = !this.expanded;
    }
    render() {
        return (h("anj-button", { context: this.free ? 'free' : 'icon', onClick: () => this.onClick(), ariaLabel: this.expanded ? 'Collapse' : 'Expand' }, this.expanded
            ? h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { fill: "none", d: "M0 0h24v24H0V0z" }), h("path", { d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z" }))
            : h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { fill: "none", d: "M0 0h24v24H0V0z" }), h("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }))));
    }
    static get style() { return ".sc-anj-button-collapse-h{display:block}[context=floating].sc-anj-button-collapse-h{position:absolute;right:.5rem;top:.5rem;z-index:1}"; }
};

const ButtonGroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * If true, the buttons connect to form Mechabutton and destroy the world.
         * Does not apply to the only applies to center, left, and right alignment.
         */
        this.concat = false;
    }
    static get style() { return "anj-button-group{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}anj-button-group[align=center]{-ms-flex-pack:center;justify-content:center}anj-button-group[align=center]:not([concat]) anj-button:not([context=icon]):not([context=free]){margin:0 .5rem}anj-button-group[align=even]{-ms-flex-pack:space-evenly;justify-content:space-evenly}anj-button-group[align=left]{-ms-flex-pack:start;justify-content:flex-start}anj-button-group[align=left]:not([concat]) anj-button:not([context=icon]):not([context=free]):not(:last-child){margin-right:1rem}anj-button-group[align=right]{-ms-flex-pack:end;justify-content:flex-end}anj-button-group[align=right]:not([concat]) anj-button:not([context=icon]):not([context=free]):not(:first-child){margin-left:1rem}anj-button-group[context=floating]{position:absolute;right:.5rem;top:.5rem;z-index:1}anj-button-group:not([concat]) anj-button:not([context=icon]):not([context=free]):not(:first-child){margin-left:.25rem}anj-button-group:not([concat]) anj-button:not([context=icon]):not([context=free]):not(:last-child){margin-right:.25rem}anj-button-group[concat] anj-button{margin:0}anj-button-group[concat][align=center] anj-button:last-child:not(:first-child) .anj-button,anj-button-group[concat][align=left] anj-button:last-child:not(:first-child) .anj-button,anj-button-group[concat][align=right] anj-button:last-child:not(:first-child) .anj-button{border-top-left-radius:0;border-bottom-left-radius:0}anj-button-group[concat][align=center] anj-button:first-child:not(:last-child) .anj-button,anj-button-group[concat][align=left] anj-button:first-child:not(:last-child) .anj-button,anj-button-group[concat][align=right] anj-button:first-child:not(:last-child) .anj-button{border-top-right-radius:0;border-bottom-right-radius:0}"; }
};

const Container = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The elevation of the container using 0 - 4 values of the design system elevation specs.
         * Default is 2.
         */
        this.elevation = 2;
        /**
         * If true the container will display as flex instead of block
         */
        this.flex = false;
        /**
         * The padding of the container using the container padding specs 0 - 5.
         * Default is 1.
         */
        this.gutter = 1;
        /**
         * The border radius using the container radius specs from 0 - 2.
         * Default is 0.
         */
        this.radius = 0;
    }
    static get style() { return ".sc-anj-container-h{font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;border-radius:0;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);padding:1rem;background-color:var(--anj-light);display:block}.sc-anj-container-h, .sc-anj-container-h:after, .sc-anj-container-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-container-h:active, .sc-anj-container-h .sc-anj-container:active, .sc-anj-container-h:focus, .sc-anj-container-h .sc-anj-container:focus{outline:none}[elevation=\"0\"].sc-anj-container-h{-webkit-box-shadow:none;box-shadow:none}[elevation=\"1\"].sc-anj-container-h{-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12),0 1px 3px 0 rgba(0,0,0,.2);box-shadow:0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12),0 1px 3px 0 rgba(0,0,0,.2)}[elevation=\"2\"].sc-anj-container-h{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}[elevation=\"3\"].sc-anj-container-h{-webkit-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}[elevation=\"4\"].sc-anj-container-h{-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)}[elevation=\"5\"].sc-anj-container-h{-webkit-box-shadow:0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12),0 7px 8px -4px rgba(0,0,0,.2);box-shadow:0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12),0 7px 8px -4px rgba(0,0,0,.2)}[flex].sc-anj-container-h{display:-ms-flexbox;display:flex}[gutter=\"0\"].sc-anj-container-h{padding:.5rem}[gutter=\"1\"].sc-anj-container-h{padding:1rem}[gutter=\"2\"].sc-anj-container-h{padding:1.5rem}[gutter=\"3\"].sc-anj-container-h{padding:2rem}[gutter=\"4\"].sc-anj-container-h{padding:2.5rem}[gutter=\"5\"].sc-anj-container-h{padding:3rem}[radius=\"1\"].sc-anj-container-h{border-radius:.125rem}[radius=\"2\"].sc-anj-container-h{border-radius:.25rem}"; }
};

const Divider = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    static get style() { return "anj-divider{display:block;border-top:1px solid var(--anj-border);margin-bottom:.5rem;margin-top:.5rem}"; }
};

const Headline = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    static get style() { return "anj-headline{display:-ms-flexbox;display:flex;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}anj-headline,anj-headline:after,anj-headline:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}anj-headline:active,anj-headline :active,anj-headline:focus,anj-headline :focus{outline:none}anj-headline[align=center]{-ms-flex-pack:center;justify-content:center}anj-headline[align=even]{-ms-flex-pack:space-evenly;justify-content:space-evenly}anj-headline[align=left]{-ms-flex-pack:start;justify-content:flex-start}anj-headline[align=right]{-ms-flex-pack:end;justify-content:flex-end}anj-headline[context=title]{margin-bottom:1.5rem}anj-headline h1,anj-headline h2,anj-headline h3,anj-headline h4,anj-headline h5,anj-headline h6{-ms-flex-align:center;align-items:center;color:var(--anj-text);display:-ms-flexbox;display:flex;font-weight:400;line-height:1.5;padding:0;margin:0!important}anj-headline h2{font-size:1.5rem}anj-headline h3{font-size:1.25rem}anj-headline h4{font-size:1rem}anj-headline h5,anj-headline h6{font-size:.875rem}anj-headline anj-headline{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}anj-headline anj-headline :first-child{color:var(--anj-neutral-dark)}"; }
};

const Icon = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return h(Host, { class: "anjuna-icon" });
    }
    static get style() { return "anj-icon{display:inline-block}"; }
};

const IconOpener = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.open = false;
    }
    render() {
        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" }, this.open ? h("path", { d: "M9 6l-4 4h8z" }) : h("path", { d: "M5 8l4 4 4-4z" })));
    }
    static get style() { return ".sc-anj-icon-opener-h{display:inline-block;text-decoration:none}.sc-anj-icon-opener-h svg.sc-anj-icon-opener{fill:currentColor}anj-select.sc-anj-icon-opener-h svg.sc-anj-icon-opener, anj-select .sc-anj-icon-opener-h svg.sc-anj-icon-opener{vertical-align:baseline}"; }
};

const Link = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.hasAnchor = false;
        /**
         * If true, displays the element as block rather than inline
         */
        this.stacked = false;
    }
    componentWillLoad() {
        this.hasAnchor = this.element.firstElementChild && this.element.firstElementChild.tagName === 'A';
    }
    onKeyUp(event) {
        if (this.hasAnchor || event.key !== 'Enter')
            return;
        this.element.click();
    }
    render() {
        return h(Host, { tabindex: this.hasAnchor ? undefined : 0 });
    }
    get element() { return getElement(this); }
    static get style() { return "anj-link{display:inline;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;cursor:pointer}anj-link,anj-link:after,anj-link:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}anj-link:active,anj-link :active,anj-link:focus,anj-link :focus{outline:none}anj-link[stacked]{display:block}anj-link,anj-link a{color:var(--anj-link);text-decoration:none}anj-link:focus,anj-link:hover,anj-link a:focus,anj-link a:hover{color:var(--anj-link-hover);text-decoration:underline;outline:none}anj-link:focus anj-icon,anj-link:hover anj-icon,anj-link a:focus anj-icon,anj-link a:hover anj-icon{text-decoration:none!important}anj-link:active,anj-link a:active{text-decoration:none}anj-link anj-icon{position:relative;top:-1.5px;vertical-align:middle}anj-link anj-icon[slot=start]{margin-right:.25rem}anj-link anj-icon[slot=end]{margin-left:.25rem}"; }
};

const RippleEffect = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.clickListener = () => this.ripple();
        this.active = false;
        this.ready = false;
        /**
         * The end magnification by percent
         */
        this.end = 2;
        /**
         * The start by percent
         */
        this.start = 1;
    }
    connectedCallback() {
        this.element.parentElement.addEventListener('click', this.clickListener);
        this.setScale();
    }
    disconnectedCallback() {
        this.element.parentElement.removeEventListener('click', this.clickListener);
        this.active = false;
        if (this.timer) {
            window.clearTimeout(this.timer);
            this.timer = undefined;
        }
    }
    async ripple() {
        this.ready = true;
        return new Promise((resolve) => {
            this.active = true;
            window.setTimeout(() => {
                this.setScale(this.end);
                resolve(this.onEnd());
            });
        });
    }
    async onEnd() {
        return new Promise(resolve => {
            this.timer = window.setTimeout(() => {
                this.active = false;
                this.setScale();
                this.timer = undefined;
                resolve();
            }, 500);
        });
    }
    setScale(scale) {
        this.element.style.transform = `scale(${scale ? scale : this.start})`;
    }
    render() {
        return h(Host, { role: "presentation", class: { 'anj-active': this.active, 'anj-animate': this.ready } });
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-ripple-effect-h{background-color:var(--anj-highlight-overlay);border-radius:50%;display:block;height:100%;left:-50%;opacity:0;padding:100%;position:absolute}.anj-animate.sc-anj-ripple-effect-h{-webkit-transition:opacity .1s ease-in,-webkit-transform .5s ease-out;transition:opacity .1s ease-in,-webkit-transform .5s ease-out;transition:opacity .1s ease-in,transform .5s ease-out;transition:opacity .1s ease-in,transform .5s ease-out,-webkit-transform .5s ease-out}.anj-active.sc-anj-ripple-effect-h{opacity:.16}"; }
};

const Spinner = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    static toPixelSize(size) {
        switch (size) {
            case 'xsmall': {
                return 16;
            }
            case 'small': {
                return 24;
            }
            case 'large': {
                return 60;
            }
            default: {
                return 48;
            }
        }
    }
    render() {
        const size = `${Spinner.toPixelSize(this.size)}px`;
        return (h(Host, { style: { height: size, width: size } }, h("div", { class: "anj-fading-circle" }, h("div", { class: "anj-circle1 anj-circle" }), h("div", { class: "anj-circle2 anj-circle" }), h("div", { class: "anj-circle3 anj-circle" }), h("div", { class: "anj-circle4 anj-circle" }), h("div", { class: "anj-circle5 anj-circle" }), h("div", { class: "anj-circle6 anj-circle" }), h("div", { class: "anj-circle7 anj-circle" }), h("div", { class: "anj-circle8 anj-circle" }), h("div", { class: "anj-circle9 anj-circle" }), h("div", { class: "anj-circle10 anj-circle" }), h("div", { class: "anj-circle11 anj-circle" }), h("div", { class: "anj-circle12 anj-circle" }))));
    }
    static get style() { return "anj-spinner{display:block}anj-spinner[fixed]{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1030}\@-webkit-keyframes anj-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\@keyframes anj-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}anj-spinner .anj-fading-circle{margin:0 auto;width:100%;height:100%;position:relative}anj-spinner .anj-fading-circle .anj-circle{width:100%;height:100%;position:absolute;left:0;top:0}anj-spinner .anj-fading-circle .anj-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--anj-primary);border-radius:100%;-webkit-animation:anj-circleFadeDelay 1.2s ease-in-out infinite both;animation:anj-circleFadeDelay 1.2s ease-in-out infinite both}anj-spinner .anj-fading-circle .anj-circle2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}anj-spinner .anj-fading-circle .anj-circle3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}anj-spinner .anj-fading-circle .anj-circle4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}anj-spinner .anj-fading-circle .anj-circle5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}anj-spinner .anj-fading-circle .anj-circle6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}anj-spinner .anj-fading-circle .anj-circle7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}anj-spinner .anj-fading-circle .anj-circle8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}anj-spinner .anj-fading-circle .anj-circle9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}anj-spinner .anj-fading-circle .anj-circle10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}anj-spinner .anj-fading-circle .anj-circle11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}anj-spinner .anj-fading-circle .anj-circle12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}anj-spinner .anj-fading-circle .anj-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}anj-spinner .anj-fading-circle .anj-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}anj-spinner .anj-fading-circle .anj-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}anj-spinner .anj-fading-circle .anj-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}anj-spinner .anj-fading-circle .anj-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}anj-spinner .anj-fading-circle .anj-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}anj-spinner .anj-fading-circle .anj-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}anj-spinner .anj-fading-circle .anj-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}anj-spinner .anj-fading-circle .anj-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}anj-spinner .anj-fading-circle .anj-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}anj-spinner .anj-fading-circle .anj-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}"; }
};

const SpinnerController = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    componentDidLoad() {
        this.targetEl = this.element.parentElement;
    }
    componentDidUnload() {
        if (this.spinner && this.spinner.parentElement) {
            this.spinner.parentElement.removeChild(this.spinner);
            this.spinner = undefined;
        }
    }
    /**
     * Spins while an arbitrary promise completes.
     * Returns the value of the promise
     */
    async spinWhile(work, target) {
        if (!this.spinner) {
            await this.spin(target);
        }
        const completed = await work;
        await this.stop();
        return completed;
    }
    /**
     * Loads the spinner
     */
    async spin(target) {
        const targetEl = target || this.targetEl;
        this.spinner = document.createElement('anj-spinner');
        this.spinner.setAttribute('fixed', 'true');
        targetEl.appendChild(this.spinner);
        return this.spinner;
    }
    /**
     * Unload the spinner
     */
    async stop() {
        return this.componentDidUnload();
    }
    get element() { return getElement(this); }
};

const Tab = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Is the tab active
         */
        this.active = false;
        this.anjTabSelect = createEvent(this, "anjTabSelect", 7);
    }
    onClick() {
        this.anjTabSelect.emit();
    }
    render() {
        return (h(Host, { "aria-selected": (this.active) ? this.active.toString() : undefined, class: { 'anj-active': this.active }, role: "tab" }, this.href ? h("a", { href: this.href, class: "anj-tab" }, h("slot", null)) : h("span", { class: "anj-tab", tabindex: "0" }, h("slot", null))));
    }
    static get style() { return ".sc-anj-tab-h{border-bottom:2px solid transparent;cursor:pointer;letter-spacing:var(--anj-spacing-wider);margin:0 .75rem;-webkit-transition:border-color .3s ease;transition:border-color .3s ease}.sc-anj-tab-h:first-child{margin-left:0}.sc-anj-tab-h:last-child{margin-right:0}.sc-anj-tab-h:focus, .sc-anj-tab-h:focus-within, .sc-anj-tab-h:hover{border-color:var(--anj-highlight);outline:none}.anj-active.sc-anj-tab-h, .anj-active.sc-anj-tab-h:active, .anj-active.sc-anj-tab-h:hover{border-color:var(--anj-primary);font-weight:600}.anj-active.sc-anj-tab-h .anj-tab.sc-anj-tab, .anj-active.sc-anj-tab-h:active .anj-tab.sc-anj-tab, .anj-active.sc-anj-tab-h:hover .anj-tab.sc-anj-tab{color:var(--anj-primary)}.sc-anj-tab-h .anj-tab.sc-anj-tab, .sc-anj-tab-h .sc-anj-tab-s > .anj-tab{color:var(--anj-highlight);display:block;padding:.5rem 1rem}.sc-anj-tab-h .anj-tab.sc-anj-tab:hover, .sc-anj-tab-h .sc-anj-tab-s > .anj-tab:hover{color:var(--anj-highlight);text-decoration:none}.sc-anj-tab-h .anj-tab.sc-anj-tab:focus, .sc-anj-tab-h .sc-anj-tab-s > .anj-tab:focus{outline:none;text-decoration:none}"; }
};

const Tabs = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return h(Host, { role: "tablist" });
    }
    static get style() { return ".sc-anj-tabs-h{display:-ms-flexbox;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;border-bottom:1px solid var(--anj-border);display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.sc-anj-tabs-h, .sc-anj-tabs-h:after, .sc-anj-tabs-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-tabs-h:active, .sc-anj-tabs-h .sc-anj-tabs:active, .sc-anj-tabs-h:focus, .sc-anj-tabs-h .sc-anj-tabs:focus{outline:none}"; }
};

const Text = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    static get style() { return "anj-text{color:var(--anj-text);display:block;-ms-flex:1;flex:1;font-family:var(--anj-font-family);font-size:.875rem;line-height:1.5}"; }
};

const Title = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    static get style() { return "anj-title{display:block;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none}anj-title,anj-title:after,anj-title:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}anj-title:active,anj-title :active,anj-title:focus,anj-title :focus{outline:none}anj-title h1,anj-title h2,anj-title h3{font-weight:200}anj-title h1{font-size:4rem;line-height:1.2}anj-title h2{font-size:3rem;line-height:1.333}anj-title h3{font-size:2.5rem;line-height:1.4}"; }
};

const TOAST_CONTEXT_ICONS = {
    danger: 'M24 4C12.96 4 4 12.95 4 24s8.96 20 20 20 20-8.95 20-20S35.04 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z',
    info: 'M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z',
    success: 'M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z',
    warn: 'M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z'
};
const Toast = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The toast context which defaults to intro.
         * Options are: "success"`, `"danger"`, `"warn"`, and `"info"`.
         */
        this.context = 'info';
        this.autoDismiss = null;
        this.anjToastDidDismiss = createEvent(this, "anjToastDidDismiss", 7);
    }
    async componentDidLoad() {
        if (this.context !== 'danger' && this.context !== 'warn') {
            this.autoDismiss = new Promise(resolve => {
                this.autoTimer = window.setTimeout(() => {
                    resolve(this.dismiss());
                }, Toast.toastTime);
            });
        }
    }
    async componentDidRender() {
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.active = true;
                const closeBtn = this.element.querySelector('anj-button button');
                closeBtn.focus();
                resolve();
            });
        });
    }
    /**
     * Dismiss the toast
     */
    async dismiss() {
        this.active = false;
        window.clearTimeout(this.autoTimer);
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.anjToastDidDismiss.emit(this.toConfig());
                this.element.remove();
                resolve();
            }, Toast.closeDelay);
        });
    }
    toConfig() {
        return {
            header: this.header,
            message: this.message,
            context: this.context
        };
    }
    render() {
        return (h(Host, { class: { 'anj-active': true } }, h("div", { class: "anj-toast-content" }, this.header ? h("h5", { class: "anj-toast-header" }, this.header) : '', this.message), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48" }, h("path", { d: TOAST_CONTEXT_ICONS[this.context] })), h("anj-button-close", { free: true, context: "floating", onClick: () => this.dismiss() })));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-toast-h{display:block;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);background-color:var(--anj-tertiary);border:4px solid var(--anj-tertiary);border-radius:.25rem;margin-bottom:1rem;opacity:0;padding-left:3.2rem;position:relative;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;z-index:1060}.sc-anj-toast-h, .sc-anj-toast-h:after, .sc-anj-toast-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-toast-h:active, .sc-anj-toast-h .sc-anj-toast:active, .sc-anj-toast-h:focus, .sc-anj-toast-h .sc-anj-toast:focus{outline:none}.anj-active.sc-anj-toast-h{opacity:1}[context=danger].sc-anj-toast-h{background-color:var(--anj-danger);border-color:var(--anj-danger)}[context=success].sc-anj-toast-h{background-color:var(--anj-success);border-color:var(--anj-success)}[context=warn].sc-anj-toast-h{background-color:var(--anj-warning);border-color:var(--anj-warning)}.sc-anj-toast-h .anj-toast-content.sc-anj-toast{background-color:var(--anj-light);border-radius:.25rem;font-size:.75rem;padding:1rem 1.75rem 1rem 1rem;word-wrap:break-word}.sc-anj-toast-h .anj-toast-content.sc-anj-toast .anj-toast-header.sc-anj-toast{font-weight:600;letter-spacing:var(--anj-spacing-wide);margin:0 0 .25rem}.sc-anj-toast-h svg.sc-anj-toast{fill:var(--anj-light);left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.sc-anj-toast-h anj-button-close.sc-anj-toast{position:absolute;right:-.25rem;top:-.25rem}"; }
};
Toast.closeDelay = 350;
Toast.toastTime = 4000;

const ToastController = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    /**
     * Dismiss all toasts.
     */
    async dismissAll() {
        Array.from(this.element.querySelectorAll('anj-toast')).forEach(toast => {
            toast.dismiss();
        });
    }
    /**
     * Pop a toast for bad things.
     * The first argument is the message, and the second is an optional header.
     */
    async error(message, header) {
        return this.createToast({ message, header, context: 'danger' });
    }
    /**
     * Pop a toast for whatever, we're all nihilists with neutral toasts
     * The first argument is the message, and the second is an optional header.
     */
    async message(message, header) {
        return this.createToast({ message, header });
    }
    /**
     * Pop a toast for good things.
     * The first argument is the message, and the second is an optional header.
     */
    async success(message, header) {
        return this.createToast({ message, header, context: 'success' });
    }
    /**
     * Pop a toast for things that aren't awful, but not great either.
     * The first argument is the message, and the second is an optional header.
     */
    async warn(message, header) {
        return this.createToast({ message, header, context: 'warn' });
    }
    createToast(config) {
        const toast = Object.assign(this.element.ownerDocument.createElement('anj-toast'), config);
        this.element.insertBefore(toast, this.element.firstElementChild);
        return toast;
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-toast-controller-h{position:fixed;top:1rem;right:1rem;width:350px;z-index:1070}"; }
};

export { Alert as anj_alert, Button as anj_button, ButtonClose as anj_button_close, ButtonCollapse as anj_button_collapse, ButtonGroup as anj_button_group, Container as anj_container, Divider as anj_divider, Headline as anj_headline, Icon as anj_icon, IconOpener as anj_icon_opener, Link as anj_link, RippleEffect as anj_ripple_effect, Spinner as anj_spinner, SpinnerController as anj_spinner_controller, Tab as anj_tab, Tabs as anj_tabs, Text as anj_text, Title as anj_title, Toast as anj_toast, ToastController as anj_toast_controller };
