'use client';
'use strict';

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

var tslib = require('tslib');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var ifDefined_js = require('lit/directives/if-defined.js');
var staticHtml_js = require('lit/static-html.js');
var buttonElement = require('../../base/button-element.cjs.js');
var slot = require('../../utils/slot.cjs.js');
var formSubmitController = require('../../utils/formSubmitController.cjs.js');
var anchor = require('../../styles/anchor.cjs.js');
var button = require('./button.cjs.js');

/**
 * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
 *
 * @slot default - The button's label.
 * @slot leftIcon - The slot for icon to the left of the button text
 * @slot rightIcon - The slot for icon to the right of the button text
 *
 * @event sgds-blur - Emitted when the button is blurred.
 * @event sgds-focus - Emitted when the button is focused.
 *
 *
 */
class SgdsButton extends buttonElement["default"] {
    constructor() {
        super(...arguments);
        /** @internal */
        this.formSubmitController = new formSubmitController.FormSubmitController(this, {
            form: (input) => {
                // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query
                // the form from the same root using its id
                if (input.hasAttribute("form")) {
                    const doc = input.getRootNode();
                    const formId = input.getAttribute("form");
                    return doc.getElementById(formId);
                }
                // Fall back to the closest containing form
                return input.closest("form");
            }
        });
        /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */
        this.type = "button";
        /** When set, the button will be in full width. */
        this.fullWidth = false;
        /** Used only for SSR to indicate the presence of the `leftIcon` slot. */
        this.hasLeftIconSlot = false;
        /** Used only for SSR to indicate the presence of the `rightIcon` slot. */
        this.hasRightIconSlot = false;
        this.hasSlotController = new slot.HasSlotController(this, "leftIcon", "rightIcon");
        this._clickHandler = () => {
            if (this.type === "submit") {
                this.formSubmitController.submit(this);
            }
            if (this.type === "reset") {
                this.formSubmitController.reset(this);
            }
        };
    }
    updated() {
        if (!this.hasLeftIconSlot)
            this.hasLeftIconSlot = this.hasSlotController.test("leftIcon");
        if (!this.hasRightIconSlot)
            this.hasRightIconSlot = this.hasSlotController.test("rightIcon");
    }
    _handleClick(event) {
        if (this.disabled || this.loading) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        this.removeEventListener("click", this._clickHandler);
        this.addEventListener("click", this._clickHandler);
    }
    render() {
        const isLink = this.href;
        const tag = isLink ? staticHtml_js.literal `a` : staticHtml_js.literal `button`;
        const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;
        return staticHtml_js.html `
      <${tag}
        class="btn ${classMap_js.classMap({
            disabled: this.disabled,
            active: this.active,
            "has-left-icon": this.hasLeftIconSlot,
            "has-right-icon": this.hasRightIconSlot,
            "no-icon": noIcon,
            loading: this.loading
        })}"
        ?disabled=${ifDefined_js.ifDefined(isLink ? undefined : this.disabled)}
        type=${ifDefined_js.ifDefined(isLink ? undefined : this.type)}
        href=${ifDefined_js.ifDefined(isLink ? this.href : undefined)}
        target=${ifDefined_js.ifDefined(isLink ? this.target : undefined)}
        download=${ifDefined_js.ifDefined(isLink ? this.download : undefined)}
        rel=${ifDefined_js.ifDefined(isLink && this.target === "_blank" ? "noreferrer noopener" : undefined)}
        role=${ifDefined_js.ifDefined(isLink ? "button" : undefined)}
        aria-disabled=${this.disabled || this.loading ? "true" : "false"}
        tabindex=${this.disabled ? "-1" : "0"}
        @click=${this._handleClick}
        @keydown=${this._handleKeydown}
        @focus=${this._handleFocus}
        @blur=${this._handleBlur}
        aria-label=${ifDefined_js.ifDefined(this.loading ? "Loading" : this.ariaLabel)}
      >
       ${this.loading
            ? staticHtml_js.html `<sgds-spinner
               size=${ifDefined_js.ifDefined(this._assignSpinnerSize(this.size))}
               tone=${ifDefined_js.ifDefined(this._assignSpinnerTone(this.tone, this.variant))}
             ></sgds-spinner>`
            : staticHtml_js.html `<slot name="leftIcon"></slot>
               <span><slot></slot></span>
               <slot name="rightIcon"></slot>`}
      
      </${tag}>
    `;
    }
}
SgdsButton.styles = [...buttonElement["default"].styles, anchor["default"], button["default"]];
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true })
], SgdsButton.prototype, "type", void 0);
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true })
], SgdsButton.prototype, "form", void 0);
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true, attribute: "formaction" })
], SgdsButton.prototype, "formAction", void 0);
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true, attribute: "formmethod" })
], SgdsButton.prototype, "formMethod", void 0);
tslib.__decorate([
    decorators_js.property({ attribute: "formnovalidate", type: Boolean, reflect: true })
], SgdsButton.prototype, "formNoValidate", void 0);
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true, attribute: "formtarget" })
], SgdsButton.prototype, "formTarget", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsButton.prototype, "fullWidth", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean })
], SgdsButton.prototype, "hasLeftIconSlot", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean })
], SgdsButton.prototype, "hasRightIconSlot", void 0);

exports.SgdsButton = SgdsButton;
exports["default"] = SgdsButton;
//# sourceMappingURL=sgds-button.cjs.js.map
