dap-design-system/dist/components/password-input/password-input.component.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as f, html as n } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as b } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as w } from "../../node_modules/lit-html/directives/if-defined.js";
import "../../localization/localization.js";
import g from "../icon/icon.component.js";
import y from "../icon-button/icon-button.component.js";
import { InputBaseElement as d } from "../input/input-base-element.js";
import x from "../spinner/spinner.component.js";
import $ from "../stack/stack.component.js";
import V from "./password-input.scss.js";
import { unsafeCSS as c, css as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
import { translate as l } from "../../node_modules/lit-i18n/src/lit-i18n.js";
var k = Object.defineProperty, h = (r, t, a, v) => {
  for (var s = void 0, e = r.length - 1, p; e >= 0; e--)
    (p = r[e]) && (s = p(t, a, s) || s);
  return s && k(t, a, s), s;
};
const i = class i extends d {
  constructor() {
    super(), this.passwordVisibile = !1, this.toggleButtonTestId = "password-input-toggle-button", this.type = "password";
  }
  _toggleVisibility() {
    this.passwordVisibile = !this.passwordVisibile, this.type = this.passwordVisibile ? "text" : "password";
  }
  getIconSize(t) {
    return t === "sm" ? "md" : t;
  }
  render() {
    return this.renderInput(
      n` <span
        part="postfix"
        class=${m("input__addon-postfix password-input", {
        "password-input--visible": this.passwordVisibile
      })}>
        <dap-ds-stack direction="row" slot="postfix">
          ${this.loading ? n`<dap-ds-spinner size="lg"></dap-ds-spinner>` : f}
          <dap-ds-icon-button
            part="show-button"
            data-testid=${this.toggleButtonTestId}
            exportparts="base:show-button-base, content: show-button-content"
            size=${w(this.getIconSize(this.size))}
            role="switch"
            arialabel="${this.passwordVisibile ? l("hide") : l("show")}"
            aria-checked=${this.passwordVisibile === !0 ? "true" : "false"}
            .disabled=${this.disabled}
            @click=${this._toggleVisibility}>
            <slot name="icon">
              <dap-ds-icon
                name="eye-line"
                class="input__icon-show"
                part="show-icon"
                exportparts="icon: show-icon, base: show-icon-base"></dap-ds-icon>
              <dap-ds-icon
                name="eye-off-line"
                class="input__icon-hide"
                part="hide-icon"
                exportparts="icon: hide-icon, base: hide-icon-base"></dap-ds-icon>
            </slot>
          </dap-ds-icon-button>
        </dap-ds-stack>
      </span>`
    );
  }
};
i.tagName = "dap-ds-password-input", i.dependencies = {
  "dap-ds-stack": $,
  "dap-ds-spinner": x,
  "dap-ds-icon-button": y,
  "dap-ds-icon": g
}, i.styles = _`
    ${c(d.styles)}
    ${c(V)}
  `;
let o = i;
h([
  u()
], o.prototype, "passwordVisibile");
h([
  b()
], o.prototype, "toggleButtonTestId");
export {
  o as default
};
//# sourceMappingURL=password-input.component.js.map