import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './pds-icon2.js';

const hasShadowDom = (el) => {
    return !!el.shadowRoot && !!el.attachShadow;
};

const pdsButtonCss = ":host{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-disabled:transparent;--background-color-primary:var(--pine-color-neutral-charcoal-400);--background-color-hover-primary:var(--pine-color-neutral-charcoal-500);--background-color-disabled-primary:var(--pine-color-neutral-grey-300);--color-primary:var(--pine-color-base-white);--color-disabled-primary:var(--pine-color-neutral-charcoal-100);--outline-color-primary:var(--pine-color-primary-200);--border-color-secondary:var(--pine-color-neutral-grey-400);--border-color-hover-secondary:var(--pine-color-neutral-grey-500);--border-color-focus-secondary:var(--pine-color-neutral-grey-300);--border-color-disabled-secondary:var(--pine-color-neutral-grey-300);--color-secondary:var(--pine-color-neutral-charcoal-400);--color-disabled-secondary:var(--pine-color-neutral-charcoal-100);--outline-color-secondary:var(--pine-color-primary-200);--background-color-accent:var(--pine-color-primary-300);--background-color-hover-accent:var(--pine-color-primary-400);--background-color-disabled-accent:var(--pine-color-primary-100);--color-accent:var(--pine-color-base-white);--color-disabled-accent:var(--pine-color-primary-200);--outline-color-accent:var(--pine-color-primary-200);--background-color-destructive:var(--pine-color-red-300);--background-color-hover-destructive:var(--pine-color-red-400);--background-color-disabled-destructive:var(--pine-color-red-100);--color-destructive:var(--pine-color-base-white);--color-disabled-destructive:var(--pine-color-red-200);--outline-color-destructive:var(--pine-color-red-200);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:10px;color:var(--color);display:-ms-flexbox;display:flex;font-family:inherit;font-size:1rem;font-weight:500;min-height:40px;padding:0.5rem 1rem}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.pds-button:hover{background-color:var(--background-color-hover);border-color:var(--border-color-hover)}.pds-button:focus{border-color:var(--border-color-focus);outline:4px solid var(--outline-color)}.pds-button:disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled);color:var(--color-disabled)}.pds-button--primary{--background-color:var(--background-color-primary);--background-color-hover:var(--background-color-hover-primary);--background-color-disabled:var(--background-color-disabled-primary);--color:var(--color-primary);--color-disabled:var(--color-disabled-primary);--outline-color:var(--outline-color-primary)}.pds-button--accent{--background-color:var(--background-color-accent);--background-color-hover:var(--background-color-hover-accent);--background-color-disabled:var(--background-color-disabled-accent);--color:var(--color-accent);--color-disabled:var(--color-disabled-accent);--outline-color:var(--outline-color-accent)}.pds-button--destructive{--background-color:var(--background-color-destructive);--background-color-hover:var(--background-color-hover-destructive);--background-color-disabled:var(--background-color-disabled-destructive);--color:var(--color-destructive);--color-disabled:var(--color-disabled-destructive);--outline-color:var(--outline-color-destructive)}.pds-button--secondary,.pds-button--disclosure{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--border-color-disabled:var(--border-color-disabled-secondary);--border-color-focus:var(--border-color-focus-secondary);--border-color-hover:var(--border-color-hover-secondary);--border-color:var(--border-color-secondary);--color:var(--color-secondary);--color-disabled:var(--color-disabled-secondary);--outline-color:var(--outline-color-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.pds-button--unstyled{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--color:inherit;border:0;margin:0;min-height:auto;padding:0;width:inherit}";
const PdsButtonStyle0 = pdsButtonCss;

const PdsButton = /*@__PURE__*/ proxyCustomElement(class PdsButton extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.handleClick = (ev) => {
            if (this.type != 'button') {
                // If button clicked IS NOT associated with a form
                if (hasShadowDom(this.el)) {
                    const form = this.el.closest('form');
                    if (form) {
                        ev.preventDefault();
                        const fakeButton = document.createElement('button');
                        fakeButton.type = this.type;
                        fakeButton.style.display = 'none';
                        form.appendChild(fakeButton);
                        fakeButton.click();
                        fakeButton.remove();
                    }
                }
            }
        };
        this.componentId = undefined;
        this.disabled = false;
        this.icon = null;
        this.name = undefined;
        this.value = undefined;
        this.type = 'button';
        this.variant = 'primary';
    }
    classNames() {
        const classNames = ['pds-button'];
        if (this.variant) {
            classNames.push('pds-button--' + this.variant);
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: '6ee21dab19b15ab02142d892e7a2f42d6f93a919', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'aa804a22ca56bff055e939e1bd72d4fd55c8bcd8', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon, part: "icon" }), h("slot", { key: '049cdc31676637dbe106ec153d66c4964f1f5ee9' }), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down", part: "caret" }))));
    }
    get el() { return this; }
    static get style() { return PdsButtonStyle0; }
}, [1, "pds-button", {
        "componentId": [1, "component-id"],
        "disabled": [4],
        "icon": [1],
        "name": [1],
        "value": [1],
        "type": [1],
        "variant": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-button", "pds-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-button":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsButton);
            }
            break;
        case "pds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PdsButton as P, defineCustomElement as d };

//# sourceMappingURL=pds-button2.js.map