'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-b7b9d752.js');

const Button = class {
    constructor(hostRef) {
        core.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 = core.createEvent(this, "anjBlur", 7);
        this.anjFocus = core.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 (core.h(core.Host, null, core.h(TagType, Object.assign({ class: "anj-button" }, this.attrs(TagType), { onFocus: () => this.onFocus(), onBlur: () => this.onBlur() }), core.h("slot", { name: "icon-only" }), core.h("slot", { name: "start" }), core.h("slot", null), core.h("slot", { name: "end" }), core.h("div", { class: "anj-focus-overlay" }), core.h("anj-ripple-effect", { start: 0.15, end: this.context === 'free' ? 0.4 : 1 }))));
    }
    get element() { return core.getElement(this); }
    static get style() { return ".sc-anj-button-h {\n  display: inline-block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n}\n.sc-anj-button-h, .sc-anj-button-h::before, .sc-anj-button-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-button-h:focus, .sc-anj-button-h:active, .sc-anj-button-h *.sc-anj-button:focus, .sc-anj-button-h *.sc-anj-button:active {\n  outline: none;\n}\n[type].sc-anj-button-h {\n  -webkit-appearance: none;\n}\n[disabled].sc-anj-button-h {\n  pointer-events: none;\n}\n.sc-anj-button-h[disabled] .sc-anj-button-s > svg {\n  color: var(--anj-text-muted);\n  fill: var(--anj-text-muted);\n}\n[disabled].sc-anj-button-h .anj-button.sc-anj-button {\n  color: var(--anj-text-muted);\n  cursor: default;\n}\n.sc-anj-button-h .anj-button.sc-anj-button {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: 0;\n  cursor: pointer;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n  text-align: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n}\n.sc-anj-button-h .anj-button.sc-anj-button, .sc-anj-button-h .anj-button.sc-anj-button::before, .sc-anj-button-h .anj-button.sc-anj-button::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-button-h .anj-button.sc-anj-button:focus, .sc-anj-button-h .anj-button.sc-anj-button:active, .sc-anj-button-h .anj-button.sc-anj-button *.sc-anj-button:focus, .sc-anj-button-h .anj-button.sc-anj-button *.sc-anj-button:active {\n  outline: none;\n}\n.sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button {\n  bottom: 0;\n  left: 0;\n  opacity: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  -webkit-transition: opacity 0.2s ease;\n  transition: opacity 0.2s ease;\n}\n.sc-anj-button-h a.anj-button.sc-anj-button:hover, .sc-anj-button-h a.anj-button.sc-anj-button:focus, .sc-anj-button-h a.anj-button.sc-anj-button:active {\n  text-decoration: none;\n}\n[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 {\n  border-radius: 0.25rem;\n  height: 2.25rem;\n  letter-spacing: 0.0625rem;\n  line-height: 2.25rem;\n  padding: 0 1rem;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n.sc-anj-button-h[context=primary]:not([disabled]) .sc-anj-button-s > svg {\n  fill: var(--anj-light);\n}\n[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button {\n  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n  background-color: var(--anj-highlight);\n  color: var(--anj-light);\n  -webkit-transition: -webkit-box-shadow 0.2s ease;\n  transition: -webkit-box-shadow 0.2s ease;\n  transition: box-shadow 0.2s ease;\n  transition: box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;\n}\n[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button {\n  background-color: var(--anj-highlight-overlay);\n}\n[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:hover .anj-focus-overlay.sc-anj-button, [context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:focus .anj-focus-overlay.sc-anj-button {\n  opacity: 0.16;\n}\n[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:focus {\n  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n}\n[context=primary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:active {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n[context=primary].sc-anj-button-h:not([disabled])[active] .anj-button.sc-anj-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n[context=primary].sc-anj-button-h:not([disabled])[active] .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button {\n  opacity: 0.16;\n}\n[context=primary][disabled].sc-anj-button-h .anj-button.sc-anj-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background-color: var(--anj-background);\n}\n.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 {\n  fill: var(--anj-highlight);\n}\n[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 {\n  color: var(--anj-link);\n}\n[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 {\n  background-color: var(--anj-highlight);\n}\n[context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button:hover .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.active.sc-anj-button .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, [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.active.sc-anj-button .anj-focus-overlay.sc-anj-button {\n  opacity: 0.24;\n}\n[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 {\n  background-color: var(--anj-highlight);\n}\n[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 {\n  opacity: 0.16;\n}\n[context=secondary].sc-anj-button-h:not([disabled]) .anj-button.sc-anj-button {\n  background-color: transparent;\n  border: 1px solid var(--anj-highlight);\n}\n[context=secondary][disabled].sc-anj-button-h .anj-button.sc-anj-button {\n  background-color: var(--anj-background);\n  border: 1px solid var(--anj-border-dark);\n}\n[context=text].sc-anj-button-h .anj-button.sc-anj-button {\n  background-color: transparent;\n}\n[context=text][disabled][active].sc-anj-button-h .anj-button.sc-anj-button {\n  background-color: var(--anj-background);\n}\n.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] {\n  color: var(--anj-text-medium);\n  fill: var(--anj-text-medium);\n  margin: 0 auto;\n  -webkit-transition: color 0.2s ease, fill 0.2s ease;\n  transition: color 0.2s ease, fill 0.2s ease;\n}\n[context=free].sc-anj-button-h .anj-button.sc-anj-button, [context=icon].sc-anj-button-h .anj-button.sc-anj-button {\n  background-color: transparent;\n  border-radius: 50%;\n  height: 2.5rem;\n  width: 2.5rem;\n}\n[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 {\n  border-radius: 50%;\n}\n[context=free].sc-anj-button-h anj-ripple-effect.sc-anj-button, [context=icon].sc-anj-button-h anj-ripple-effect.sc-anj-button {\n  background-color: var(--anj-highlight);\n}\n.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] {\n  color: var(--anj-text);\n  fill: var(--anj-text);\n}\n[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 {\n  opacity: 0.18;\n}\n.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] {\n  color: var(--anj-text-muted);\n  fill: var(--anj-text-muted);\n}\n.sc-anj-button-h[context=icon]:focus-within .sc-anj-button-s > [slot=icon-only] {\n  color: var(--anj-text-medium);\n  fill: var(--anj-text-medium);\n}\n.sc-anj-button-h[context=icon]:hover .sc-anj-button-s > [slot=icon-only], .sc-anj-button-h[context=icon]:active .sc-anj-button-s > [slot=icon-only] {\n  color: var(--anj-text);\n  fill: var(--anj-text);\n}\n[context=icon].sc-anj-button-h .anj-button.sc-anj-button .anj-focus-overlay.sc-anj-button {\n  background-color: var(--anj-highlight);\n}\n[context=icon].sc-anj-button-h .anj-button.sc-anj-button:hover .anj-focus-overlay.sc-anj-button {\n  opacity: 0.08;\n}\n[context=icon].sc-anj-button-h .anj-button.sc-anj-button:focus .anj-focus-overlay.sc-anj-button {\n  opacity: 0.12;\n}\n.sc-anj-button-h[context=free]:hover .sc-anj-button-s > [slot=icon-only], .sc-anj-button-h[context=free]:focus-within .sc-anj-button-s > [slot=icon-only] {\n  color: var(--anj-text);\n  fill: var(--anj-text);\n}\n.sc-anj-button-h[context=free]:active .sc-anj-button-s > [slot=icon-only] {\n  color: var(--anj-text-medium);\n  fill: var(--anj-text-medium);\n}\n\n.sc-anj-button-s > [slot=icon-only] {\n  margin-left: -0.5rem;\n  margin-right: -0.5rem;\n}\n\n.sc-anj-button-s > [slot=start] {\n  margin-left: -0.25rem;\n  margin-right: 0.5rem;\n}\n\n.sc-anj-button-s > [slot=end] {\n  margin-left: 0.5rem;\n  margin-right: -0.25rem;\n}\n\nanj-calendar[context=icon].sc-anj-button-h, anj-calendar [context=icon].sc-anj-button-h {\n  height: 36px;\n  width: 36px;\n}"; }
};

exports.anj_button = Button;
