{"mappings":"AAEA,cAAc,sBAA0C;AAIxD,SAAS,kBAAkB;KAGtB,YACD,SACA,WACA,QACA,QACA,UACA,aACA,aACA,SACA,UACA,SACA,SACA,mBACA,WACA,UACA,UACA,SACA;;;;;;;;AAWJ,cA6CM,cAAc,WAAW;CAC7B,AACA,MAAM;CAEN;;;;CAKA,AACA,SAAS,YAAY;CAErB,UACU,QAAQ;CAElB;CAUA,UAAU,UAAU,eAAe;CA4BnC,UAAU,iBAAiB,eAAe;CAiB1C,UAAU,iBAAiB,UAAU,KAAK;;AAO5C,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/input/component.ts"],"sourcesContent":["import { attr, godown, styles, StyleController, htmlSlot } from \"@godown/element\";\nimport iconEyeSlash from \"../../internal/icons/eye-slash.js\";\nimport { type TemplateResult, css, html, nothing } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\n\nimport { cssGlobalVars } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { RingBuilder } from \"../../internal/ring.js\";\n\ntype InputType =\n  | \"text\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"password\"\n  | \"datetime\"\n  | \"date\"\n  | \"month\"\n  | \"week\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"number\"\n  | \"range\"\n  | \"color\"\n  | \"file\"\n  | \"image\";\n\nconst protoName = \"input\";\n\n/**\n * {@linkcode Input} renders a input.\n *\n * @fires input - Fires when the input value changes.\n * @fires change - Fires when the input value changes.\n * @category input\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: block;\n    ${cssGlobalVars.input}-icon-color: hsl(0, 0%, 50%);\n  }\n\n  :host(:focus-within),\n  :host(:active) {\n    ${cssGlobalVars.ringColor}: currentColor;\n    ${cssGlobalVars.input}-icon-color: currentColor;\n  }\n\n  [part=\"root\"] {\n    padding-inline: 0.75em;\n    padding-block: 0.5em;\n    display: flex;\n    position: relative;\n    align-items: center;\n    border-radius: inherit;\n  }\n\n  [part=\"input\"] {\n    width: 100%;\n    height: 100%;\n    flex-grow: 1;\n  }\n\n  [part=\"prefix\"],\n  [part=\"suffix\"] {\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(${cssGlobalVars.input}-icon-color);\n  }\n\n  [part=\"suffix\"] slot svg {\n    margin-inline-start: 0.25em;\n  }\n\n  [part=\"prefix\"] slot svg {\n    margin-inline-end: 0.25em;\n  }\n`)\nclass Input extends SuperInput {\n  @property({ reflect: true })\n  type: InputType = \"text\";\n\n  value: string;\n\n  /**\n   * If outline, the outline is always present.\n   */\n  @property()\n  variant: \"default\" | \"outline\" = \"default\";\n\n  @query(\"[part=input]\")\n  protected _input: HTMLInputElement;\n\n  constructor() {\n    super();\n    new StyleController(\n      this,\n      () =>\n        new RingBuilder({ type: this.ringType }).css +\n        (this.variant === \"outline\" ? `:host{${cssGlobalVars.ringColor}:currentColor}` : \"\"),\n    );\n  }\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <label\n        part=\"root\"\n        ${attr(this.observedRecord)}\n      >\n        ${[\n          this._renderPrefix(),\n          html`\n            <input\n              part=\"input\"\n              type=\"${this.type}\"\n              .value=\"${this.value}\"\n              ?autofocus=\"${this.autofocus}\"\n              ?disabled=\"${this.disabled}\"\n              autocapitalize=\"${this.autocapitalize || nothing}\"\n              autocomplete=\"${this.autocomplete || nothing}\"\n              placeholder=\"${this.placeholder || nothing}\"\n              @input=\"${this._handleInput}\"\n              @change=\"${this._handleChange}\"\n            />\n          `,\n          this._renderSuffix(),\n        ]}\n      </label>\n    `;\n  }\n\n  protected _renderSuffix(): TemplateResult<1> {\n    const PASSWORD = \"password\";\n    if (this.type === PASSWORD) {\n      return html`\n        <i\n          part=\"suffix\"\n          @mousedown=\"${() => this._changeInputType(\"text\")}\"\n          @mouseup=\"${() => this._changeInputType(PASSWORD)}\"\n          @mouseleave=\"${() => this._changeInputType(PASSWORD)}\"\n        >\n          ${htmlSlot(\"suffix\", iconEyeSlash())}\n        </i>\n      `;\n    }\n    return super._renderSuffix();\n  }\n\n  protected _changeInputType(t: typeof this.type): void {\n    if (this._input) {\n      this._input.type = t;\n    }\n  }\n}\n\nexport default Input;\nexport { Input };\n"],"version":3,"file":"component.d.ts"}