/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html, } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-icon-button.css';
import '../nile-icon';
import { classMap } from 'lit/directives/class-map.js';
import { query, state } from 'lit/decorators.js';
import { literal } from 'lit/static-html.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import NileElement from '../internal/nile-element';
/**
 * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
 * @status stable
 * @since 2.0
 *
 * @dependency nile-icon
 *
 * @event nile-blur - Emitted when the icon button loses focus.
 * @event nile-focus - Emitted when the icon button gains focus.
 *
 * @csspart base - The component's base wrapper.
 */
/**
 * Nile icon component.
 *
 * @tag nile-icon-button
 *
 */
let NileIconButton = class NileIconButton extends NileElement {
    constructor() {
        super(...arguments);
        this.hasFocus = false;
        /**
         * A description that gets read by assistive devices. For optimal accessibility, you should always include a label
         * that describes what the icon button does.
         */
        this.label = '';
        /** Disables the button. */
        this.disabled = false;
        this.ishovered = false;
    }
    handleBlur() {
        this.hasFocus = false;
        this.emit('nile-blur');
    }
    handleFocus() {
        this.hasFocus = true;
        this.emit('nile-focus');
    }
    handleClick(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
    /** Simulates a click on the icon button. */
    click() {
        this.button.click();
    }
    /** Sets focus on the icon button. */
    focus(options) {
        this.button.focus(options);
    }
    /** Removes focus from the icon button. */
    blur() {
        this.button.blur();
    }
    handleMouseOver(e) {
        this.ishovered = true;
    }
    handleMouseLeave(e) {
        this.ishovered = false;
    }
    render() {
        const isLink = this.href ? true : false;
        const tag = isLink ? literal `a` : literal `button`;
        /* eslint-disable lit/binding-positions, lit/no-invalid-html */
        if (isLink) {
            return html `
        <a
          part="base"
          class=${classMap({
                'icon-button': true,
                'icon-button--disabled': !isLink && this.disabled,
                'icon-button--focused': this.hasFocus,
            })}
          .disabled=${isLink || this.disabled}
          type=${ifDefined(isLink ? undefined : 'button')}
          href=${ifDefined(isLink ? this.href : undefined)}
          target=${ifDefined(isLink ? this.target : undefined)}
          download=${ifDefined(isLink ? this.download : undefined)}
          rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}
          role=${ifDefined(isLink ? undefined : 'button')}
          aria-disabled=${this.disabled ? 'true' : 'false'}
          aria-label="${this.label}"
          tabindex=${this.disabled ? '-1' : '0'}
          @blur=${this.handleBlur}
          @focus=${this.handleFocus}
          @click=${this.handleClick}
          @mouseover=${this.handleMouseOver}
          @mouseleave=${this.handleMouseLeave}
        >
      
          <nile-icon
            class="icon-button__icon"
            name=${ifDefined(this.name)}
            library=${ifDefined(this.library)}
            src=${ifDefined(this.src)}
            .color=${this.color}
            aria-hidden="true"
            size="var(--nile-icon-size-14, var(--ng-icon-size-12))"
            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
          ></nile-icon>
        </a>
      `;
        }
        else {
            return html `
        <button
          part="base"
          class=${classMap({
                'icon-button': true,
                'icon-button--disabled': !isLink && this.disabled,
                'icon-button--focused': this.hasFocus,
            })}
          .disabled=${isLink || this.disabled}
          type=${ifDefined(isLink ? undefined : 'button')}
          href=${ifDefined(isLink ? this.href : undefined)}
          target=${ifDefined(isLink ? this.target : undefined)}
          download=${ifDefined(isLink ? this.download : undefined)}
          rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}
          role=${ifDefined(isLink ? undefined : 'button')}
          aria-disabled=${this.disabled ? 'true' : 'false'}
          aria-label="${this.label}"
          tabindex=${this.disabled ? '-1' : '0'}
          @blur=${this.handleBlur}
          @focus=${this.handleFocus}
          @click=${this.handleClick}
          @mouseover=${this.handleMouseOver}
          @mouseleave=${this.handleMouseLeave}
        >
      
          <nile-icon
            class="icon-button__icon"
            name=${ifDefined(this.name)}
            library=${ifDefined(this.library)}
            src=${ifDefined(this.src)}
            .color=${this.color}
            aria-hidden="true"
            size="var(--nile-icon-size-14, var(--ng-icon-size-12))"
            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
          ></nile-icon>
        </button>
      `;
        }
    }
};
NileIconButton.styles = styles;
__decorate([
    query('.icon-button')
], NileIconButton.prototype, "button", void 0);
__decorate([
    state()
], NileIconButton.prototype, "hasFocus", void 0);
__decorate([
    property()
], NileIconButton.prototype, "name", void 0);
__decorate([
    property()
], NileIconButton.prototype, "library", void 0);
__decorate([
    property()
], NileIconButton.prototype, "src", void 0);
__decorate([
    property()
], NileIconButton.prototype, "href", void 0);
__decorate([
    property()
], NileIconButton.prototype, "target", void 0);
__decorate([
    property()
], NileIconButton.prototype, "download", void 0);
__decorate([
    property()
], NileIconButton.prototype, "label", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileIconButton.prototype, "disabled", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileIconButton.prototype, "color", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileIconButton.prototype, "ishovered", void 0);
NileIconButton = __decorate([
    customElement('nile-icon-button')
], NileIconButton);
export { NileIconButton };
export default NileIconButton;
//# sourceMappingURL=nile-icon-button.js.map