@stihl-design-system/components/chunks/InputPassword.DcdMjsXr.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as i, jsx as t } from "react/jsx-runtime";
import { c as e } from "./index.DL9mof6u.js";
import { forwardRef as F, useState as M, useRef as U } from "react";
import { u as I } from "./useBreakpoint.1txsny17.js";
import { Asterisk as G } from "../asterisk.B2ih8VwF.js";
import { D as J } from "./Button.Cn5yg7dG.js";
import { D as K } from "./Popover.D7McfVaH.js";
import { D as Q } from "./SystemFeedback.CjlARKki.js";
import { g as f } from "./helpers.CexwVao7.js";
import "./index.D-sRdssb.js";
import '../assets/InputPassword.DZENjxJ9.css';const X = "ds-input-password_input_l2ovg_1", Y = "ds-input-password_input--small_l2ovg_9", Z = "ds-input-password_input--invalid_l2ovg_121", z = "ds-input-password_input--has-action-button_l2ovg_182", ss = "ds-input-password_root_l2ovg_218", as = "ds-input-password_hint_l2ovg_218", ts = "ds-input-password_label-wrapper_l2ovg_218", os = "ds-input-password_wrapper_l2ovg_222", es = "ds-input-password_action-button_l2ovg_228", ns = "ds-input-password_label_l2ovg_218", rs = "ds-input-password_label--disabled_l2ovg_247", ls = "ds-input-password_label-wrapper--hidden_l2ovg_259", is = "ds-input-password_feedback_l2ovg_287", s = {
  input: X,
  inputSmall: Y,
  inputInvalid: Z,
  inputHasActionButton: z,
  root: ss,
  hint: as,
  labelWrapper: ts,
  wrapper: os,
  actionButton: es,
  label: ns,
  labelDisabled: rs,
  labelWrapperHidden: ls,
  feedback: is
}, ps = ({
  id: a,
  label: n,
  hideLabel: p,
  popoverContent: d
}) => {
  if (!a)
    throw new Error(f("DSInputPassword", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputPassword component.'));
  if (!n)
    throw new Error(f("DSInputPassword", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputPassword component. If you don't want to display a label, set hideLabel={true}.`));
  p && d && console.warn(f("DSInputPassword", "Using a popover when hideLabel is set to true is not supported."));
}, ds = F(({
  id: a,
  label: n,
  autoComplete: p = "new-password",
  className: d,
  disabled: c = !1,
  hint: u,
  hideLabel: h = !1,
  invalid: r = !1,
  popoverContent: w,
  popoverInfoButtonProps: B,
  readonly: v = !1,
  required: g = !1,
  togglePasswordVisibilityButtonProps: N,
  size: b = "medium",
  systemFeedback: m,
  ...k
}, l) => {
  process.env.NODE_ENV !== "production" && ps({
    id: a,
    label: n,
    hideLabel: I(h),
    popoverContent: w
  });
  const {
    hidePasswordText: H = "Hide password",
    showPasswordText: A = "Show password",
    ...W
  } = N || {}, [_, x] = M(!1), P = `${a}-label`, D = `${a}-feedback`, S = `${a}-hint`, L = u ? ` ${S}` : "", $ = [r && m && D].filter(Boolean).join(" ") || void 0, y = I(h), C = e(s.root, d), E = e(s.input, {
    // small input
    [s.inputSmall]: b === "small",
    // invalid state
    [s.inputInvalid]: r,
    // action button - input password always has an action button
    [s.inputHasActionButton]: !0
  }), R = e(s.label, {
    [s.labelDisabled]: c
  }), T = e(s.labelWrapper, {
    // hide label only visually to keep them available for assistive technologies
    [s.labelWrapperHidden]: y
  }), V = e(s.actionButton, {
    [s.actionButtonSmall]: b === "small"
  }), j = U(null), q = (o) => {
    j.current = o, typeof l == "function" ? l(o) : l && (l.current = o);
  }, O = () => {
    x((o) => !o);
  };
  return /* @__PURE__ */ i("div", { className: C, children: [
    /* @__PURE__ */ i("div", { className: T, children: [
      /* @__PURE__ */ i("label", { className: R, id: P, htmlFor: a, children: [
        n,
        g && /* @__PURE__ */ t(G, {})
      ] }),
      w && !y && /* @__PURE__ */ t(K, { placement: "top", defaultAnchorButtonProps: B, children: w })
    ] }),
    u && /* @__PURE__ */ t("div", { className: s.hint, id: S, children: u }),
    /* @__PURE__ */ i("div", { className: s.wrapper, children: [
      /* @__PURE__ */ t(
        "input",
        {
          className: E,
          id: a,
          ...k,
          ref: q,
          "aria-labelledby": `${P}${L}`,
          "aria-describedby": $,
          "aria-invalid": r,
          "aria-disabled": v,
          readOnly: v,
          required: g,
          disabled: c,
          autoComplete: p,
          type: _ ? "text" : "password"
        }
      ),
      /* @__PURE__ */ t(J, { ...W, hideLabel: !0, theme: "light", iconName: _ ? "eye-closed" : "eye", variant: "ghost", className: V, size: b, onClick: O, type: "button", disabled: c, children: _ ? H : A })
    ] }),
    r && m && /* @__PURE__ */ t(Q, { className: s.feedback, message: m, variant: "error", id: D })
  ] });
});
ds.displayName = "DSInputPassword";
export {
  ds as D,
  ps as v
};