pyro/dist/textfield.js

Pyro custom elements

import { i as y, r as h, x as a, t as u } from "./custom-element-CWJsDAat.js";
import { n as t } from "./property-Bf-I6Ep_.js";
import { o as f } from "./unsafe-html-DZSpJPU8.js";
import { C as v } from "./close-Cj_Rmt2D.js";
import { o as i } from "./if-defined-D-M-EmTt.js";
var x = Object.defineProperty, m = Object.getOwnPropertyDescriptor, e = (l, p, n, s) => {
  for (var o = s > 1 ? void 0 : s ? m(p, n) : p, c = l.length - 1, d; c >= 0; c--)
    (d = l[c]) && (o = (s ? d(p, n, o) : d(o)) || o);
  return s && o && x(p, n, o), o;
};
let r = class extends h {
  constructor() {
    super(...arguments), this.type = "text", this.value = "", this.caption = "", this.state = "", this.clear = () => {
      this.value = "";
    };
  }
  /**
   * A listener outside the shadow dom will access e.target.value
   * where target will be pyro-input, thus the value is missing.
   * This with reflects: true will make the value available on pyro-input
   */
  handleInput(l) {
    this.value = l.target.value;
  }
  render() {
    return a`
      ${this.type === "textarea" ? a`<textarea
            @input=${this.handleInput}
            id="textfield"
            .value=${this.value}
            placeholder="${this.placeholder ?? ""}"
          ></textarea>` : a`<input
            @input=${this.handleInput}
            type="${this.type}"
            id="textfield"
            .value=${this.value}
            placeholder="${i(this.placeholder)}"
            autocomplete="${i(this.autocomplete)}"
            form="${i(this.form)}"
            maxlength="${i(this.maxlength)}"
            minlength="${i(this.minlength)}"
            name="${i(this.name)}"
            ?readonly="${this.readonly}"
            pattern="${i(this.pattern)}"
          />`}
      <span class="actions">
        <slot name="action"></slot>
        ${this.clearable ? a`<span class="close">${f(v)}</span>` : a``}
      </span>
      ${this.caption ? a`<span class="caption">${this.caption}</span>` : a``}
    `;
  }
};
r.styles = y`
    :host {
      display: inline-grid;
      grid-template-areas: 'stack';
      color: var(--pyro-textfield-text-color, var(--pyro-text-color));
      min-width: var(--pyro-textfield-min-width, var(--pyro-fields-min-width));
    }
    * {
      box-sizing: border-box;
    }
    input,
    textarea {
      grid-area: stack;
      width: 100%;
      background: var(--pyro-textfield-surface-color, var(--pyro-surface-color));
      font-family: inherit;
      font-size: var(--pyro-textfield-font-size, var(--pyro-font-size));
      color: inherit;
      border: var(--pyro-textfield-border, var(--pyro-border));
      border-radius: var(--pyro-textfield-border-radius, var(--pyro-border-radius));
      padding: var(--pyro-textfield-spacing, var(--pyro-spacing));
    }
    textarea {
      resize: none;
      font-family: inherit;
    }
    :host([state='info']) input {
      border-color: var(--pyro-textfield-info-color, var(--pyro-info-color));
    }
    :host([state='success']) input {
      border-color: var(--pyro-textfield-success-color, var(--pyro-success-color));
    }
    :host([state='warning']) input {
      border-color: var(--pyro-textfield-warning-color, var(--pyro-warning-color));
    }
    :host([state='error']) input {
      border-color: var(--pyro-textfield-error-color, var(--pyro-error-color));
    }
    .caption {
      font-size: 0.75em;
      color: var(--pyro-textfield-caption-text-color, inherit);
    }
    :host([state='info']) .caption {
      color: var(--pyro-textfield-info-color, var(--pyro-info-color));
    }
    :host([state='error']) .caption {
      color: var(--pyro-textfield-error-color, var(--pyro-error-color));
    }
    :host([state='warning']) .caption {
      color: var(--pyro-textfield-warning-color, var(--pyro-warning-color));
    }
    :host([state='success']) .caption {
      color: var(--pyro-textfield-success-color, var(--pyro-success-color));
    }
    :host([disabled]) {
      --internal-background: var(--pyro-textfield-disabled-color, var(--pyro-disabled-color));
      cursor: not-allowed;
    }
    input[type='search']::-webkit-search-decoration,
    input[type='search']::-webkit-search-cancel-button,
    input[type='search']::-webkit-search-results-button,
    input[type='search']::-webkit-search-results-decoration {
      -webkit-appearance: none;
    }
    .actions {
      grid-area: stack;
      justify-self: end;
      align-self: center;
      padding: var(--pyro-spacing);
      display: flex;
      align-items: center;
      cursor: pointer;
      line-height: 1;
      background: var(--pyro-textfield-surface-color, var(--pyro-surface-color));
    }
    :host([clearable]) input,
    textarea {
      padding-right: calc(var(--pyro-alert-dismissible-width, 1em) + var(--pyro-spacing));
    }
    .close {
      color: var(--pyro-alert-text-color, var(--pyro-text-color));
      width: var(--pyro-alert-dismissible-width, 1em);
    }
  `;
e([
  t()
], r.prototype, "type", 2);
e([
  t({ reflect: !0 })
], r.prototype, "value", 2);
e([
  t()
], r.prototype, "caption", 2);
e([
  t({ reflect: !0 })
], r.prototype, "state", 2);
e([
  t()
], r.prototype, "placeholder", 2);
e([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "required", 2);
e([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "disabled", 2);
e([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "clearable", 2);
e([
  t({ reflect: !0 })
], r.prototype, "autocomplete", 2);
e([
  t({ reflect: !0 })
], r.prototype, "form", 2);
e([
  t({ type: Number, reflect: !0 })
], r.prototype, "maxlength", 2);
e([
  t({ type: Number, reflect: !0 })
], r.prototype, "minlength", 2);
e([
  t({ reflect: !0 })
], r.prototype, "name", 2);
e([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "readonly", 2);
e([
  t({ reflect: !0 })
], r.prototype, "pattern", 2);
r = e([
  u("pyro-textfield")
], r);
export {
  r as PyroTextfield
};