import { Component, h, Prop, Element, Watch } from '@stencil/core';
import { openWormhole } from 'stencil-wormhole';
import { isRtl } from '../../../functions/page-align';
/**
 * @part form-control - The elements base wrapper.
 * @part label - The label.
 * @part input - The input wrapper.
 * @part help-text - Help text.
 * @part tooltip - Tooltip
 * @part tooltip-text - Tooltip text.
 */
export class ScFormControl {
  constructor() {
    /** Size of the label */
    this.size = 'medium';
    /** Show the label. */
    this.showLabel = true;
    /** Whether the input is required. */
    this.required = false;
  }
  handleErrors() {
    var _a;
    this.errorMessage = (_a = this === null || this === void 0 ? void 0 : this.errors) === null || _a === void 0 ? void 0 : _a[this === null || this === void 0 ? void 0 : this.name];
  }
  render() {
    return (h("div", { part: "form-control", class: {
        'form-control': true,
        'form-control--small': this.size === 'small',
        'form-control--medium': this.size === 'medium',
        'form-control--large': this.size === 'large',
        'form-control--has-label': !!this.label && this.showLabel,
        'form-control--has-help-text': !!this.help,
        'form-control--is-required': !!this.required,
        'form-control--is-rtl': isRtl()
      } },
      h("label", { part: "label", id: this.labelId, class: "form-control__label", htmlFor: this.inputId, "aria-hidden": !!this.label ? 'false' : 'true' },
        h("slot", { name: "label" }, this.label),
        h("slot", { name: "label-end" })),
      h("div", { part: "input", class: "form-control__input" }, !!this.errorMessage ? (h("sc-tooltip", { exportparts: "base:tooltip, text:tooltip-text", text: this.errorMessage, type: "danger", padding: 10, freeze: true, open: true, onClick: () => (this.errorMessage = '') },
        h("slot", null))) : (h("slot", null))),
      this.help && (h("div", { part: "help-text", id: this.helpId, class: "form-control__help-text" },
        h("slot", { name: "help-text" }, this.help)))));
  }
  static get is() { return "sc-form-control"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-form-control.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-form-control.css"]
  }; }
  static get properties() { return {
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'medium' | 'large'",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Size of the label"
      },
      "attribute": "size",
      "reflect": true,
      "defaultValue": "'medium'"
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Name for the input. Used for validation errors."
      },
      "attribute": "name",
      "reflect": false
    },
    "errors": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Display server-side validation errors."
      },
      "attribute": "errors",
      "reflect": false
    },
    "showLabel": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Show the label."
      },
      "attribute": "show-label",
      "reflect": false,
      "defaultValue": "true"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input label."
      },
      "attribute": "label",
      "reflect": false
    },
    "labelId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input label id."
      },
      "attribute": "label-id",
      "reflect": false
    },
    "inputId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input id."
      },
      "attribute": "input-id",
      "reflect": false
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Whether the input is required."
      },
      "attribute": "required",
      "reflect": false,
      "defaultValue": "false"
    },
    "help": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Help text"
      },
      "attribute": "help",
      "reflect": false
    },
    "helpId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Help id"
      },
      "attribute": "help-id",
      "reflect": false
    },
    "errorMessage": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Store the error message"
      },
      "attribute": "error-message",
      "reflect": false
    }
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "errors",
      "methodName": "handleErrors"
    }]; }
}
openWormhole(ScFormControl, ['errors'], false);
