import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
import { inheritAriaAttributes } from '../../utils/helpers';
import { createColorClasses } from '../../utils/theme';
// The interfaces are used to make sure our components
// have the correct properties defined that are needed to pass to
// the native HTML elements they render
/**
 * @slot - Content is placed between the named slots if provided without a slot.
 * @part native - The native HTML button or anchor element that wraps all child elements.
 */
export class GascoButtonIcon {
  constructor() {
    this.inItem = false;
    this.inheritedAttributes = {};
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`.
     */
    this.color = 'primary';
    /**
     * The type of button.
     */
    this.buttonType = 'button';
    /**
     * If `true`, the user cannot interact with the button.
     */
    this.disabled = false;
    /**
     * If `true`, the user cannot interact with the button in progress.
     */
    this.progress = false;
    /**
     * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
     * button with a border, or to `"solid"`.
     */
    this.fill = 'solid';
    /**
     * The type of the button.
     */
    this.type = 'button';
    this.onFocus = () => this.gascoFocus.emit();
    this.onBlur = () => this.gascoBlur.emit();
  }
  componentWillLoad() {
    this.inheritedAttributes = inheritAriaAttributes(this.el);
  }
  render() {
    const { type, size, fill, color, shape, disabled, progress, buttonType, inheritedAttributes, } = this;
    const finalSize = size === undefined && this.inItem ? 'small' : size;
    const attrs = { type };
    return (h(Host, { "aria-disabled": disabled ? 'true' : null, "aria-progress": progress ? 'true' : null, class: createColorClasses(color, {
        [`${buttonType}-${finalSize}`]: finalSize !== undefined,
        [`${buttonType}-${shape}`]: shape !== undefined,
        [`${buttonType}-${fill}`]: true,
        'button-disabled': disabled,
        'gasco-activatable': true,
        'gasco-button-icon': true,
        'gasco-focusable': true,
      }) },
      h("button", Object.assign({}, attrs, { class: `button-native icon-only ${progress ? 'progress' : ''}`, part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes),
        h("span", { class: "button-inner" }, progress ? (h("span", { class: "button-progress" })) : (h("slot", null))))));
  }
  static get is() { return "gasco-button-icon"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-button-icon.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-button-icon.css"]
  }; }
  static get properties() { return {
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never>",
        "references": {
          "Color": {
            "location": "import",
            "path": "../../interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`."
      },
      "attribute": "color",
      "reflect": true,
      "defaultValue": "'primary'"
    },
    "buttonType": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The type of button."
      },
      "attribute": "button-type",
      "reflect": false,
      "defaultValue": "'button'"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the button."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "progress": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the button in progress."
      },
      "attribute": "progress",
      "reflect": true,
      "defaultValue": "false"
    },
    "fill": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "| 'outline' | 'solid' | 'clear'",
        "resolved": "\"clear\" | \"outline\" | \"solid\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`."
      },
      "attribute": "fill",
      "reflect": true,
      "defaultValue": "'solid'"
    },
    "shape": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'round'",
        "resolved": "\"round\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The button shape."
      },
      "attribute": "shape",
      "reflect": true
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'default' | 'large'",
        "resolved": "\"default\" | \"large\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The button size."
      },
      "attribute": "size",
      "reflect": true
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'submit' | 'reset' | 'button'",
        "resolved": "\"button\" | \"reset\" | \"submit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The type of the button."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'button'"
    }
  }; }
  static get events() { return [{
      "method": "gascoFocus",
      "name": "gascoFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the button has focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "gascoBlur",
      "name": "gascoBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the button loses focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
