import { Component, Element, h, Host, Prop, State } from '@stencil/core';
const progressScales = {
  small: {
    size: 14,
    strokeWidth: 2,
    marginLeft: 6,
  },
  medium: {
    size: 16,
    strokeWidth: 2,
    marginLeft: 10,
  },
  large: {
    size: 18,
    strokeWidth: 2,
    marginLeft: 14,
  },
};
const getProgressScale = ({ scale = 'medium' }) => progressScales[scale];
export class DvnButton {
  constructor() {
    this.tint = 'neutral';
    this.scale = 'medium';
    this.view = 'solid';
    this.shape = 'rectangular';
    this.disabled = false;
    this.progressing = false;
    this.leaned = false;
    this.fill = false;
    this.htmlType = 'button';
    this.tagMode = false;
  }
  componentDidRender() {
    if (this.htmlType === 'submit' && !this.label) {
      // 'input' tag ignores the <slot /> tag and renders 'Submit Query' by default
      // if there is no 'value' parameter passed to it. we need to set a 'value' parameter in order
      // to show the label properly
      // set time out used for not interrupting the render otherwise stencil prints warning
      setTimeout(() => { var _a; return this.label = (_a = this.el.querySelector('.label')) === null || _a === void 0 ? void 0 : _a.textContent; }, 0);
    }
  }
  render() {
    const Tag = this.htmlType === 'submit' ? 'input' : 'button';
    return (h(Host, { class: {
        [this.tint]: true,
        [this.scale]: true,
        [this.shape]: true,
        [this.view]: true,
        leaned: this.leaned,
        fill: this.fill,
        progressing: this.progressing,
        disabled: this.disabled,
        'tag-mode': this.tagMode
      }, disabled: this.disabled },
      h(Tag, { type: this.htmlType, disabled: this.disabled, value: this.label },
        this.abbrTitle
          ? h("abbr", { class: "label", title: this.abbrTitle },
            h("slot", null))
          : h("slot", null),
        this.progressing &&
          h("dvn-progress", { style: {
              margin: (this.shape !== 'circle' && this.shape !== 'square') ? `0 0 0 ${getProgressScale(this).marginLeft}px` : '0px',
            }, indefinite: true, leaned: true, tint: this.disabled ? 'neutral' : this.tint, size: getProgressScale(this).size, strokeWidth: getProgressScale(this).strokeWidth }))));
  }
  static get is() { return "dvn-button"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-button.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-button.css"]
  }; }
  static get properties() { return {
    "tint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Tint",
        "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"secondary\" | \"warning\"",
        "references": {
          "Tint": {
            "location": "import",
            "path": "../../theme"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "tint",
      "reflect": false,
      "defaultValue": "'neutral'"
    },
    "scale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Scale",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {
          "Scale": {
            "location": "import",
            "path": "../../theme"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scale",
      "reflect": false,
      "defaultValue": "'medium'"
    },
    "view": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ButtonView",
        "resolved": "\"flat\" | \"ghost\" | \"outline\" | \"solid\"",
        "references": {
          "ButtonView": {
            "location": "import",
            "path": "./models"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "view",
      "reflect": false,
      "defaultValue": "'solid'"
    },
    "shape": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ButtonShape",
        "resolved": "\"circle\" | \"rectangular\" | \"rounded\" | \"square\"",
        "references": {
          "ButtonShape": {
            "location": "import",
            "path": "./models"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "shape",
      "reflect": false,
      "defaultValue": "'rectangular'"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "progressing": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "progressing",
      "reflect": false,
      "defaultValue": "false"
    },
    "leaned": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "leaned",
      "reflect": false,
      "defaultValue": "false"
    },
    "fill": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "fill",
      "reflect": false,
      "defaultValue": "false"
    },
    "htmlType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "html-type",
      "reflect": false,
      "defaultValue": "'button'"
    },
    "tagMode": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "tag-mode",
      "reflect": false,
      "defaultValue": "false"
    },
    "abbrTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "abbr-title",
      "reflect": false
    }
  }; }
  static get states() { return {
    "label": {}
  }; }
  static get elementRef() { return "el"; }
}
