@mittwald/flow-react-components 0.2.0-alpha.61 → 0.2.0-alpha.611

package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs

@@ -0,0 +1,257 @@
+"use client"
+/* */
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useDeferredValue } from 'react';
+import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import styles from './PasswordCreationField.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+import clsx from 'clsx';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import '../Action/Action.mjs';
+import 'react-aria';
+import '@react-aria/live-announcer';
+import { getStateFromLatestPolicyValidationResult } from './lib/getStateFromLatestPolicyValidationResult.mjs';
+import locales from '../../../../_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs';
+import { generateValidationTranslation } from './lib/generateValidationTranslation.mjs';
+import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
+import { ComplexityIndicator } from './components/ComplexityIndicator/ComplexityIndicator.mjs';
+import { generatePassword } from './worker/generatePassword.mjs';
+import { TogglePasswordVisibilityButton } from './components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.mjs';
+import { ValidationResultButton } from './components/ValidationResultButton/ValidationResultButton.mjs';
+import { PasswordGenerateButton } from './components/PasswordGenerateButton/PasswordGenerateButton.mjs';
+import { useLocalizedContextStringFormatter } from '../TranslationProvider/useLocalizedContextStringFormatter.mjs';
+import { defaultPasswordCreationPolicy } from '../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs';
+import { Policy } from '@mittwald/password-tools-js/policy';
+import '@mittwald/password-tools-js/rules';
+import '@mittwald/password-tools-js/generator';
+import { usePolicyValidationResult } from './lib/usePolicyValidationResult.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { FieldError } from '../FieldError/FieldError.mjs';
+import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
+
+const PasswordCreationField = flowComponent(
+  "PasswordCreationField",
+  (props) => {
+    const {
+      children,
+      className,
+      ref,
+      isDisabled,
+      onValidationResult,
+      isInvalid: invalidFromProps,
+      validationPolicy: validationPolicyFromProps = defaultPasswordCreationPolicy,
+      isRequired,
+      value,
+      onChange,
+      ...rest
+    } = useControlledHostValueProps(props);
+    const {
+      FieldErrorView,
+      FieldErrorCaptureContext,
+      fieldProps,
+      fieldPropsContext
+    } = useFieldComponent(props);
+    const [isLoading, setIsLoading] = useState(false);
+    const translate = useLocalizedContextStringFormatter(locales);
+    const validationPolicy = useMemo(
+      () => Policy.fromDeclaration(validationPolicyFromProps),
+      [validationPolicyFromProps]
+    );
+    const deferredValue = useDeferredValue(value ?? "");
+    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
+    const initialPolicyValidationState = {
+      isValid: true,
+      complexity: {
+        min: validationPolicy.minComplexity,
+        actual: 4,
+        warning: null
+      },
+      ruleResults: []
+    };
+    const [policyValidationResult, setPolicyValidationResult] = useState(
+      initialPolicyValidationState
+    );
+    usePolicyValidationResult(
+      validationPolicy,
+      deferredValue,
+      () => {
+        if (isEmptyValue) {
+          return;
+        }
+        setIsLoading(() => true);
+      },
+      ({ password, isValid, results }) => {
+        if (isEmptyValue) {
+          setPolicyValidationResult(() => ({
+            ...results,
+            isValid: true
+          }));
+          return;
+        }
+        setIsLoading(() => false);
+        setPolicyValidationResult(() => results);
+        onValidationResult?.({ password, isValid });
+      }
+    );
+    const isEmptyValue = !value;
+    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(
+      isEmptyValue,
+      policyValidationResult
+    );
+    let latestValidationErrorText = void 0;
+    if (stateFromValidationResult) {
+      const [translationKey, translationValues] = generateValidationTranslation(
+        stateFromValidationResult
+      );
+      latestValidationErrorText = translate.format(
+        translationKey,
+        translationValues
+      );
+    }
+    const isValidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid;
+    const isInvalidFromValidationResult = !isEmptyValue && !stateFromValidationResult?.isValid;
+    const isInvalid = invalidFromProps || isInvalidFromValidationResult;
+    const setOptimisticPolicyValidationResult = (state = {}) => {
+      setIsLoading(() => false);
+      setPolicyValidationResult(() => ({
+        ...initialPolicyValidationState,
+        ...state,
+        isValid: true
+      }));
+    };
+    const onPasswordGenerateHandler = async () => {
+      const generatedPassword = await generatePassword(validationPolicy);
+      setOptimisticPolicyValidationResult();
+      setIsPasswordRevealed(true);
+      onChange(generatedPassword);
+    };
+    const onPasswordPasteHandler = (event) => {
+      const pastedValue = event.clipboardData.getData("text");
+      if (pastedValue !== value) {
+        setOptimisticPolicyValidationResult({
+          isValid: "indeterminate"
+        });
+      }
+    };
+    const togglePasswordVisibilityHandler = () => {
+      setIsPasswordRevealed((old) => !old);
+    };
+    const propsContext = {
+      ...fieldPropsContext,
+      Button: {
+        tunnelId: "button",
+        size: "m",
+        variant: "plain",
+        color: "secondary",
+        isDisabled,
+        className: styles.button
+      },
+      CopyButton: {
+        tunnelId: "button",
+        size: "m",
+        variant: "plain",
+        color: "secondary",
+        isDisabled,
+        className: styles.button,
+        text: value
+      },
+      Label: {
+        ...fieldPropsContext.Label,
+        children: dynamic((localProps) => {
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            localProps.children,
+            /* @__PURE__ */ jsx(
+              PasswordGenerateButton,
+              {
+                isDisabled,
+                onGeneratePasswordAction: onPasswordGenerateHandler
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ValidationResultButton,
+              {
+                isEmptyValue,
+                isDisabled,
+                policyValidationResult
+              }
+            )
+          ] });
+        })
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Aria.TextField,
+      {
+        ...rest,
+        value,
+        type: isPasswordRevealed ? "text" : "password",
+        onChange,
+        onPaste: onPasswordPasteHandler,
+        className: clsx(className, fieldProps.className),
+        isDisabled,
+        isInvalid,
+        isRequired,
+        children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+          /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+            /* @__PURE__ */ jsx(FieldError, { children: latestValidationErrorText }),
+            /* @__PURE__ */ jsxs(
+              PropsContextProvider,
+              {
+                props: propsContext,
+                dependencies: [
+                  isDisabled,
+                  isRequired,
+                  value,
+                  policyValidationResult,
+                  isEmptyValue
+                ],
+                children: [
+                  children,
+                  /* @__PURE__ */ jsxs(
+                    Aria.Group,
+                    {
+                      isDisabled,
+                      className: clsx(styles.inputGroup),
+                      children: [
+                        /* @__PURE__ */ jsx(Aria.Input, { ref, className: styles.input }),
+                        /* @__PURE__ */ jsxs(Aria.Group, { className: styles.buttonContainer, children: [
+                          /* @__PURE__ */ jsx(
+                            TogglePasswordVisibilityButton,
+                            {
+                              className: styles.button,
+                              isVisible: isPasswordRevealed,
+                              isDisabled,
+                              onPress: togglePasswordVisibilityHandler
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(TunnelExit, { id: "button" })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          ComplexityIndicator,
+                          {
+                            isEmptyValue,
+                            isLoading,
+                            policyValidationResult,
+                            validationResultState: stateFromValidationResult
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  isValidFromValidationResult && /* @__PURE__ */ jsx(FieldDescription, { children: latestValidationErrorText })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(FieldErrorView, {})
+        ] })
+      }
+    );
+  }
+);
+
+export { PasswordCreationField, PasswordCreationField as default };
+//# sourceMappingURL=PasswordCreationField.mjs.map

package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useDeferredValue,\n  useMemo,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface PasswordCreationFieldProps\n  extends PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  value?: string;\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  defaultValue?: string;\n  placeholder?: string;\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult\n  extends Omit<PolicyValidationResult, \"isValid\"> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props);\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props);\n\n    const [isLoading, setIsLoading] = useState(false);\n    const translate = useLocalizedContextStringFormatter(locales);\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const deferredValue = useDeferredValue(value ?? \"\");\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: true,\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n    usePolicyValidationResult(\n      validationPolicy,\n      deferredValue,\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        setIsLoading(() => true);\n      },\n      ({ password, isValid, results }) => {\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setIsLoading(() => false);\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n    const isInvalidFromValidationResult =\n      !isEmptyValue && !stateFromValidationResult?.isValid;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setIsLoading(() => false);\n      setPolicyValidationResult(() => ({\n        ...initialPolicyValidationState,\n        ...state,\n        isValid: true,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      setOptimisticPolicyValidationResult();\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData.getData(\"text\");\n      if (pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnelId: \"button\",\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnelId: \"button\",\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, fieldProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <TunnelProvider>\n          <FieldErrorCaptureContext>\n            <FieldError>{latestValidationErrorText}</FieldError>\n            <PropsContextProvider\n              props={propsContext}\n              dependencies={[\n                isDisabled,\n                isRequired,\n                value,\n                policyValidationResult,\n                isEmptyValue,\n              ]}\n            >\n              {children}\n              <Aria.Group\n                isDisabled={isDisabled}\n                className={clsx(styles.inputGroup)}\n              >\n                <Aria.Input ref={ref} className={styles.input} />\n                <Aria.Group className={styles.buttonContainer}>\n                  <TogglePasswordVisibilityButton\n                    className={styles.button}\n                    isVisible={isPasswordRevealed}\n                    isDisabled={isDisabled}\n                    onPress={togglePasswordVisibilityHandler}\n                  />\n                  <TunnelExit id=\"button\" />\n                </Aria.Group>\n                <ComplexityIndicator\n                  isEmptyValue={isEmptyValue}\n                  isLoading={isLoading}\n                  policyValidationResult={policyValidationResult}\n                  validationResultState={stateFromValidationResult}\n                />\n              </Aria.Group>\n              {isValidFromValidationResult && (\n                <FieldDescription>{latestValidationErrorText}</FieldDescription>\n              )}\n            </PropsContextProvider>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEO,MAAM,qBAAA,GAAwB,aAAA;AAAA,EACnC,uBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,SAAA,EAAW,gBAAA;AAAA,MACX,kBACE,yBAAA,GAA4B,6BAAA;AAAA,MAC9B,UAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,IAAA,MAAM;AAAA,MACJ,cAAA;AAAA,MACA,wBAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,IAAA,MAAM,SAAA,GAAY,mCAAmC,OAAO,CAAA;AAE5D,IAAA,MAAM,gBAAA,GAAmB,OAAA;AAAA,MACvB,MAAM,MAAA,CAAO,eAAA,CAAgB,yBAAyB,CAAA;AAAA,MACtD,CAAC,yBAAyB;AAAA,KAC5B;AAEA,IAAA,MAAM,aAAA,GAAgB,gBAAA,CAAiB,KAAA,IAAS,EAAE,CAAA;AAElD,IAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAAS,KAAK,CAAA;AAClE,IAAA,MAAM,4BAAA,GAA+D;AAAA,MACnE,OAAA,EAAS,IAAA;AAAA,MACT,UAAA,EAAY;AAAA,QACV,KAAK,gBAAA,CAAiB,aAAA;AAAA,QACtB,MAAA,EAAQ,CAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACX;AAAA,MACA,aAAa;AAAC,KAChB;AAEA,IAAA,MAAM,CAAC,sBAAA,EAAwB,yBAAyB,CAAA,GAAI,QAAA;AAAA,MAC1D;AAAA,KACF;AACA,IAAA,yBAAA;AAAA,MACE,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAM;AACJ,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA;AAAA,QACF;AAEA,QAAA,YAAA,CAAa,MAAM,IAAI,CAAA;AAAA,MACzB,CAAA;AAAA,MACA,CAAC,EAAE,QAAA,EAAU,OAAA,EAAS,SAAQ,KAAM;AAClC,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA,yBAAA,CAA0B,OAAO;AAAA,YAC/B,GAAG,OAAA;AAAA,YACH,OAAA,EAAS;AAAA,WACX,CAAE,CAAA;AACF,UAAA;AAAA,QACF;AAEA,QAAA,YAAA,CAAa,MAAM,KAAK,CAAA;AACxB,QAAA,yBAAA,CAA0B,MAAM,OAAO,CAAA;AACvC,QAAA,kBAAA,GAAqB,EAAE,QAAA,EAAU,OAAA,EAAS,CAAA;AAAA,MAC5C;AAAA,KACF;AAEA,IAAA,MAAM,eAAe,CAAC,KAAA;AACtB,IAAA,MAAM,yBAAA,GAA4B,wCAAA;AAAA,MAChC,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,IAAI,yBAAA,GAA4B,MAAA;AAChC,IAAA,IAAI,yBAAA,EAA2B;AAC7B,MAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,6BAAA;AAAA,QAC1C;AAAA,OACF;AACA,MAAA,yBAAA,GAA4B,SAAA,CAAU,MAAA;AAAA,QACpC,cAAA;AAAA,QACA;AAAA,OACF;AAAA,IACF;AAEA,IAAA,MAAM,2BAAA,GACJ,CAAC,YAAA,IAAgB,yBAAA,EAA2B,OAAA;AAC9C,IAAA,MAAM,6BAAA,GACJ,CAAC,YAAA,IAAgB,CAAC,yBAAA,EAA2B,OAAA;AAC/C,IAAA,MAAM,YAAY,gBAAA,IAAoB,6BAAA;AAEtC,IAAA,MAAM,mCAAA,GAAsC,CAC1C,KAAA,GAAiD,EAAC,KAC/C;AACH,MAAA,YAAA,CAAa,MAAM,KAAK,CAAA;AACxB,MAAA,yBAAA,CAA0B,OAAO;AAAA,QAC/B,GAAG,4BAAA;AAAA,QACH,GAAG,KAAA;AAAA,QACH,OAAA,EAAS;AAAA,OACX,CAAE,CAAA;AAAA,IACJ,CAAA;AAEA,IAAA,MAAM,4BAAsC,YAAY;AACtD,MAAA,MAAM,iBAAA,GAAoB,MAAM,gBAAA,CAAiB,gBAAgB,CAAA;AACjE,MAAA,mCAAA,EAAoC;AACpC,MAAA,qBAAA,CAAsB,IAAI,CAAA;AAC1B,MAAA,QAAA,CAAS,iBAAiB,CAAA;AAAA,IAC5B,CAAA;AAEA,IAAA,MAAM,sBAAA,GAAyB,CAAC,KAAA,KAA0B;AACxD,MAAA,MAAM,WAAA,GAAc,KAAA,CAAM,aAAA,CAAc,OAAA,CAAQ,MAAM,CAAA;AACtD,MAAA,IAAI,gBAAgB,KAAA,EAAO;AACzB,QAAA,mCAAA,CAAoC;AAAA,UAClC,OAAA,EAAS;AAAA,SACV,CAAA;AAAA,MACH;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,kCAAkC,MAAM;AAC5C,MAAA,qBAAA,CAAsB,CAAC,GAAA,KAAQ,CAAC,GAAG,CAAA;AAAA,IACrC,CAAA;AAEA,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,GAAG,iBAAA;AAAA,MACH,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU,QAAA;AAAA,QACV,IAAA,EAAM,GAAA;AAAA,QACN,OAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,WAAA;AAAA,QACP,UAAA;AAAA,QACA,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,UAAA,EAAY;AAAA,QACV,QAAA,EAAU,QAAA;AAAA,QACV,IAAA,EAAM,GAAA;AAAA,QACN,OAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,WAAA;AAAA,QACP,UAAA;AAAA,QACA,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,GAAG,iBAAA,CAAkB,KAAA;AAAA,QACrB,QAAA,EAAU,OAAA,CAAQ,CAAC,UAAA,KAAe;AAChC,UAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,YAAA,UAAA,CAAW,QAAA;AAAA,4BACZ,GAAA;AAAA,cAAC,sBAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,wBAAA,EAA0B;AAAA;AAAA,aAC5B;AAAA,4BACA,GAAA;AAAA,cAAC,sBAAA;AAAA,cAAA;AAAA,gBACC,YAAA;AAAA,gBACA,UAAA;AAAA,gBACA;AAAA;AAAA;AACF,WAAA,EACF,CAAA;AAAA,QAEJ,CAAC;AAAA;AACH,KACF;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA,CAAK,SAAA;AAAA,MAAL;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,KAAA;AAAA,QACA,IAAA,EAAM,qBAAqB,MAAA,GAAS,UAAA;AAAA,QACpC,QAAA;AAAA,QACA,OAAA,EAAS,sBAAA;AAAA,QACT,SAAA,EAAW,IAAA,CAAK,SAAA,EAAW,UAAA,CAAW,SAAS,CAAA;AAAA,QAC/C,UAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QAEA,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,cAAY,QAAA,EAAA,yBAAA,EAA0B,CAAA;AAAA,4BACvC,IAAA;AAAA,cAAC,oBAAA;AAAA,cAAA;AAAA,gBACC,KAAA,EAAO,YAAA;AAAA,gBACP,YAAA,EAAc;AAAA,kBACZ,UAAA;AAAA,kBACA,UAAA;AAAA,kBACA,KAAA;AAAA,kBACA,sBAAA;AAAA,kBACA;AAAA,iBACF;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,QAAA;AAAA,kCACD,IAAA;AAAA,oBAAC,IAAA,CAAK,KAAA;AAAA,oBAAL;AAAA,sBACC,UAAA;AAAA,sBACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,UAAU,CAAA;AAAA,sBAEjC,QAAA,EAAA;AAAA,wCAAA,GAAA,CAAC,KAAK,KAAA,EAAL,EAAW,GAAA,EAAU,SAAA,EAAW,OAAO,KAAA,EAAO,CAAA;AAAA,6CAC9C,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,eAAA,EAC5B,QAAA,EAAA;AAAA,0CAAA,GAAA;AAAA,4BAAC,8BAAA;AAAA,4BAAA;AAAA,8BACC,WAAW,MAAA,CAAO,MAAA;AAAA,8BAClB,SAAA,EAAW,kBAAA;AAAA,8BACX,UAAA;AAAA,8BACA,OAAA,EAAS;AAAA;AAAA,2BACX;AAAA,0CACA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS;AAAA,yBAAA,EAC1B,CAAA;AAAA,wCACA,GAAA;AAAA,0BAAC,mBAAA;AAAA,0BAAA;AAAA,4BACC,YAAA;AAAA,4BACA,SAAA;AAAA,4BACA,sBAAA;AAAA,4BACA,qBAAA,EAAuB;AAAA;AAAA;AACzB;AAAA;AAAA,mBACF;AAAA,kBACC,2BAAA,oBACC,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAA,yBAAA,EAA0B;AAAA;AAAA;AAAA;AAEjD,WAAA,EACF,CAAA;AAAA,8BACC,cAAA,EAAA,EAAe;AAAA,SAAA,EAClB;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.module.scss.mjs

@@ -0,0 +1,15 @@
+"use client"
+/* */
+const inputGroup = "flow--password-creation-field--input-group";
+const input = "flow--password-creation-field--input";
+const buttonContainer = "flow--password-creation-field--button-container";
+const button = "flow--password-creation-field--button";
+const styles = {
+	inputGroup: inputGroup,
+	input: input,
+	buttonContainer: buttonContainer,
+	button: button
+};
+
+export { button, buttonContainer, styles as default, input, inputGroup };
+//# sourceMappingURL=PasswordCreationField.module.scss.mjs.map

package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordCreationField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/js/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs

@@ -0,0 +1,85 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { useState, useLayoutEffect } from 'react';
+import styles from './ComplexityIndicator.module.scss.mjs';
+import { getStatusFromPolicyValidationResult } from '../../lib/getStatusFromPolicyValidationResult.mjs';
+import clsx from 'clsx';
+
+const ComplexityIndicator = (props) => {
+  const {
+    policyValidationResult,
+    validationResultState,
+    isLoading,
+    isEmptyValue
+  } = props;
+  const complexityScore = policyValidationResult?.complexity;
+  const [state, setState] = useState({
+    percentage: 0,
+    status: "success",
+    visible: false
+  });
+  useLayoutEffect(() => {
+    if (isEmptyValue) {
+      setState({
+        status: "success",
+        percentage: 0,
+        visible: false
+      });
+      return;
+    }
+    let complexityFulfilledPercentage = 0;
+    if (policyValidationResult?.isValid === "indeterminate") {
+      complexityFulfilledPercentage = 100;
+    } else if (complexityScore && !isEmptyValue) {
+      complexityFulfilledPercentage = Math.min(
+        100 / (complexityScore.min + 1) * (complexityScore.actual + 1),
+        100
+      );
+    }
+    const policyValidationStatus = getStatusFromPolicyValidationResult(
+      validationResultState?.isValid ?? policyValidationResult.isValid,
+      policyValidationResult
+    );
+    setState({
+      status: policyValidationStatus,
+      percentage: complexityFulfilledPercentage,
+      visible: true
+    });
+  }, [policyValidationResult, isEmptyValue]);
+  const complexityVisible = state.visible;
+  const complexityFulfilled = state.percentage === 100;
+  const percentageClassName = clsx(
+    styles.bar,
+    !isEmptyValue && styles[`bar-background-status-${state.status}`],
+    {
+      [styles.loading]: isLoading,
+      [styles.running]: !complexityFulfilled
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      "data-container": "complexity",
+      "data-complexity-visible": complexityVisible,
+      "data-complexity-status": state.status,
+      "data-complexity-percentage": state.percentage,
+      className: clsx(styles.complexityIndicator, {
+        [styles.hide]: !complexityVisible
+      }),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: `${state.percentage}%`
+          },
+          className: percentageClassName
+        }
+      )
+    }
+  );
+};
+
+export { ComplexityIndicator, ComplexityIndicator as default };
+//# sourceMappingURL=ComplexityIndicator.mjs.map

package/dist/js/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComplexityIndicator.mjs","sources":["../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import React, { type FC, useLayoutEffect, useState } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> | \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n  isLoading: boolean;\n  isEmptyValue: boolean;\n  validationResultState: StateFromLatestPolicyValidationResult;\n  policyValidationResult: ResolvedPolicyValidationResult;\n}\n\n/** @internal */\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n  const {\n    policyValidationResult,\n    validationResultState,\n    isLoading,\n    isEmptyValue,\n  } = props;\n  const complexityScore = policyValidationResult?.complexity;\n\n  const [state, setState] = useState<{\n    status: ComplexityStatus;\n    percentage: number;\n    visible: boolean;\n  }>({\n    percentage: 0,\n    status: \"success\",\n    visible: false,\n  });\n\n  useLayoutEffect(() => {\n    if (isEmptyValue) {\n      setState({\n        status: \"success\",\n        percentage: 0,\n        visible: false,\n      });\n      return;\n    }\n\n    let complexityFulfilledPercentage = 0;\n    if (policyValidationResult?.isValid === \"indeterminate\") {\n      complexityFulfilledPercentage = 100;\n    } else if (complexityScore && !isEmptyValue) {\n      complexityFulfilledPercentage = Math.min(\n        (100 / (complexityScore.min + 1)) * (complexityScore.actual + 1),\n        100,\n      );\n    }\n\n    const policyValidationStatus = getStatusFromPolicyValidationResult(\n      validationResultState?.isValid ?? policyValidationResult.isValid,\n      policyValidationResult,\n    );\n\n    setState({\n      status: policyValidationStatus,\n      percentage: complexityFulfilledPercentage,\n      visible: true,\n    });\n  }, [policyValidationResult, isEmptyValue]);\n\n  const complexityVisible = state.visible;\n  const complexityFulfilled = state.percentage === 100;\n\n  const percentageClassName = clsx(\n    styles.bar,\n    !isEmptyValue && styles[`bar-background-status-${state.status}`],\n    {\n      [styles.loading as string]: isLoading,\n      [styles.running as string]: !complexityFulfilled,\n    },\n  );\n\n  return (\n    <div\n      aria-hidden={true}\n      data-container=\"complexity\"\n      data-complexity-visible={complexityVisible}\n      data-complexity-status={state.status}\n      data-complexity-percentage={state.percentage}\n      className={clsx(styles.complexityIndicator, {\n        [styles.hide as string]: !complexityVisible,\n      })}\n    >\n      <div\n        style={{\n          width: `${state.percentage}%`,\n        }}\n        className={percentageClassName}\n      />\n    </div>\n  );\n};\n\nexport default ComplexityIndicator;\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,mBAAA,GAAoD,CAAC,KAAA,KAAU;AAC1E,EAAA,MAAM;AAAA,IACJ,sBAAA;AAAA,IACA,qBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,kBAAkB,sBAAA,EAAwB,UAAA;AAEhD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA,CAIvB;AAAA,IACD,UAAA,EAAY,CAAA;AAAA,IACZ,MAAA,EAAQ,SAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACV,CAAA;AAED,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,QAAA,CAAS;AAAA,QACP,MAAA,EAAQ,SAAA;AAAA,QACR,UAAA,EAAY,CAAA;AAAA,QACZ,OAAA,EAAS;AAAA,OACV,CAAA;AACD,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,6BAAA,GAAgC,CAAA;AACpC,IAAA,IAAI,sBAAA,EAAwB,YAAY,eAAA,EAAiB;AACvD,MAAA,6BAAA,GAAgC,GAAA;AAAA,IAClC,CAAA,MAAA,IAAW,eAAA,IAAmB,CAAC,YAAA,EAAc;AAC3C,MAAA,6BAAA,GAAgC,IAAA,CAAK,GAAA;AAAA,QAClC,GAAA,IAAO,eAAA,CAAgB,GAAA,GAAM,CAAA,CAAA,IAAO,gBAAgB,MAAA,GAAS,CAAA,CAAA;AAAA,QAC9D;AAAA,OACF;AAAA,IACF;AAEA,IAAA,MAAM,sBAAA,GAAyB,mCAAA;AAAA,MAC7B,qBAAA,EAAuB,WAAW,sBAAA,CAAuB,OAAA;AAAA,MACzD;AAAA,KACF;AAEA,IAAA,QAAA,CAAS;AAAA,MACP,MAAA,EAAQ,sBAAA;AAAA,MACR,UAAA,EAAY,6BAAA;AAAA,MACZ,OAAA,EAAS;AAAA,KACV,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,sBAAA,EAAwB,YAAY,CAAC,CAAA;AAEzC,EAAA,MAAM,oBAAoB,KAAA,CAAM,OAAA;AAChC,EAAA,MAAM,mBAAA,GAAsB,MAAM,UAAA,KAAe,GAAA;AAEjD,EAAA,MAAM,mBAAA,GAAsB,IAAA;AAAA,IAC1B,MAAA,CAAO,GAAA;AAAA,IACP,CAAC,YAAA,IAAgB,MAAA,CAAO,CAAA,sBAAA,EAAyB,KAAA,CAAM,MAAM,CAAA,CAAE,CAAA;AAAA,IAC/D;AAAA,MACE,CAAC,MAAA,CAAO,OAAiB,GAAG,SAAA;AAAA,MAC5B,CAAC,MAAA,CAAO,OAAiB,GAAG,CAAC;AAAA;AAC/B,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,IAAA;AAAA,MACb,gBAAA,EAAe,YAAA;AAAA,MACf,yBAAA,EAAyB,iBAAA;AAAA,MACzB,0BAAwB,KAAA,CAAM,MAAA;AAAA,MAC9B,8BAA4B,KAAA,CAAM,UAAA;AAAA,MAClC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,mBAAA,EAAqB;AAAA,QAC1C,CAAC,MAAA,CAAO,IAAc,GAAG,CAAC;AAAA,OAC3B,CAAA;AAAA,MAED,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO;AAAA,YACL,KAAA,EAAO,CAAA,EAAG,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,WAC5B;AAAA,UACA,SAAA,EAAW;AAAA;AAAA;AACb;AAAA,GACF;AAEJ;;;;"}

package/dist/js/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+const complexityIndicator = "flow--password-creation-field--complexity-indicator";
+const hide = "flow--password-creation-field--complexity-indicator--hide";
+const bar = "flow--password-creation-field--complexity-indicator--bar";
+const running = "flow--password-creation-field--complexity-indicator--running";
+const loading = "flow--password-creation-field--complexity-indicator--loading";
+const shimmer = "flow--password-creation-field--complexity-indicator--shimmer";
+const styles = {
+	complexityIndicator: complexityIndicator,
+	hide: hide,
+	bar: bar,
+	running: running,
+	"bar-background-status-danger": "flow--password-creation-field--complexity-indicator--bar-background-status-danger",
+	"bar-background-status-success": "flow--password-creation-field--complexity-indicator--bar-background-status-success",
+	"bar-background-status-warning": "flow--password-creation-field--complexity-indicator--bar-background-status-warning",
+	"bar-background-status-indeterminate": "flow--password-creation-field--complexity-indicator--bar-background-status-indeterminate",
+	loading: loading,
+	shimmer: shimmer
+};
+
+export { bar, complexityIndicator, styles as default, hide, loading, running, shimmer };
+//# sourceMappingURL=ComplexityIndicator.module.scss.mjs.map

package/dist/js/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComplexityIndicator.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../../_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs';
+import { Button } from '../../../Button/Button.mjs';
+import { Action } from '../../../Action/Action.mjs';
+import '@react-aria/live-announcer';
+
+const PasswordGenerateButton = (props) => {
+  const { isDisabled, onGeneratePasswordAction } = props;
+  const translate = useLocalizedStringFormatter(locales);
+  return /* @__PURE__ */ jsx(Action, { action: onGeneratePasswordAction, showFeedback: false, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-component": "generatePassword",
+      isDisabled,
+      variant: "plain",
+      color: "dark",
+      children: translate.format("button.generate")
+    }
+  ) });
+};
+
+export { PasswordGenerateButton };
+//# sourceMappingURL=PasswordGenerateButton.mjs.map

package/dist/js/components/src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordGenerateButton.mjs","sources":["../../../../../../../../src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { Action, type ActionFn } from \"@/components/Action\";\n\ninterface Props {\n  isDisabled?: boolean;\n  onGeneratePasswordAction?: ActionFn;\n}\n\nexport const PasswordGenerateButton: FC<Props> = (props) => {\n  const { isDisabled, onGeneratePasswordAction } = props;\n  const translate = useLocalizedStringFormatter(locales);\n\n  return (\n    <Action action={onGeneratePasswordAction} showFeedback={false}>\n      <Button\n        data-component=\"generatePassword\"\n        isDisabled={isDisabled}\n        variant=\"plain\"\n        color=\"dark\"\n      >\n        {translate.format(\"button.generate\")}\n      </Button>\n    </Action>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAY,wBAAA,EAAyB,GAAI,KAAA;AACjD,EAAA,MAAM,SAAA,GAAY,4BAA4B,OAAO,CAAA;AAErD,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,MAAA,EAAQ,wBAAA,EAA0B,cAAc,KAAA,EACtD,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAe,kBAAA;AAAA,MACf,UAAA;AAAA,MACA,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,MAAA;AAAA,MAEL,QAAA,EAAA,SAAA,CAAU,OAAO,iBAAiB;AAAA;AAAA,GACrC,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.mjs

@@ -0,0 +1,49 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { TooltipTrigger } from '../../../Tooltip/components/TooltipTrigger/TooltipTrigger.mjs';
+import { Tooltip } from '../../../Tooltip/Tooltip.mjs';
+import { Button } from '../../../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import { IconHide } from '../../../Icon/components/icons/IconHide.mjs';
+import { IconShow } from '../../../Icon/components/icons/IconShow.mjs';
+import { Action } from '../../../Action/Action.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import '@react-aria/live-announcer';
+import locales from '../../../../../../_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs';
+
+const TogglePasswordVisibilityButton = ({
+  isVisible,
+  isDisabled = false,
+  onPress,
+  className
+}) => {
+  const translate = useLocalizedStringFormatter(locales);
+  const icon = isVisible ? /* @__PURE__ */ jsx(IconHide, {}) : /* @__PURE__ */ jsx(IconShow, {});
+  const tooltipText = translate.format(
+    "button.generate.tooltip." + (isVisible ? "hide" : "show")
+  );
+  return /* @__PURE__ */ jsx(Action, { action: onPress, children: /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className,
+      size: "m",
+      tunnelId: null,
+      variant: "plain",
+      color: "secondary",
+      isDisabled,
+      "data-component": "toggleRevealPassword",
+      "aria-label": tooltipText,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx(Tooltip, { children: tooltipText })
+      ]
+    }
+  ) }) });
+};
+
+export { TogglePasswordVisibilityButton, TogglePasswordVisibilityButton as default };
+//# sourceMappingURL=TogglePasswordVisibilityButton.mjs.map

package/dist/js/components/src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TogglePasswordVisibilityButton.mjs","sources":["../../../../../../../../src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport Button from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport { Action, type ActionFn } from \"@/components/Action\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n  isDisabled?: boolean;\n  isVisible: boolean;\n  onPress: ActionFn;\n}\n\n/** @internal */\nexport const TogglePasswordVisibilityButton: FC<Props> = ({\n  isVisible,\n  isDisabled = false,\n  onPress,\n  className,\n}) => {\n  const translate = useLocalizedStringFormatter(locales);\n\n  const icon = isVisible ? <IconHide /> : <IconShow />;\n  const tooltipText = translate.format(\n    \"button.generate.tooltip.\" + (isVisible ? \"hide\" : \"show\"),\n  );\n\n  return (\n    <Action action={onPress}>\n      <TooltipTrigger>\n        <Button\n          className={className}\n          size=\"m\"\n          tunnelId={null}\n          variant=\"plain\"\n          color=\"secondary\"\n          isDisabled={isDisabled}\n          data-component=\"toggleRevealPassword\"\n          aria-label={tooltipText}\n        >\n          {icon}\n          <Tooltip>{tooltipText}</Tooltip>\n        </Button>\n      </TooltipTrigger>\n    </Action>\n  );\n};\n\nexport default TogglePasswordVisibilityButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,iCAA4C,CAAC;AAAA,EACxD,SAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,OAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GAAY,4BAA4B,OAAO,CAAA;AAErD,EAAA,MAAM,OAAO,SAAA,mBAAY,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,uBAAM,QAAA,EAAA,EAAS,CAAA;AAClD,EAAA,MAAM,cAAc,SAAA,CAAU,MAAA;AAAA,IAC5B,0BAAA,IAA8B,YAAY,MAAA,GAAS,MAAA;AAAA,GACrD;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,MAAA,EAAQ,OAAA,EACd,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,IAAA,EAAK,GAAA;AAAA,MACL,QAAA,EAAU,IAAA;AAAA,MACV,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,WAAA;AAAA,MACN,UAAA;AAAA,MACA,gBAAA,EAAe,sBAAA;AAAA,MACf,YAAA,EAAY,WAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,wBACD,GAAA,CAAC,WAAS,QAAA,EAAA,WAAA,EAAY;AAAA;AAAA;AAAA,KAE1B,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs

@@ -0,0 +1,49 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../../_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs';
+import { ValidationResultEntry } from '../ValidationResultEntry/ValidationResultEntry.mjs';
+import { Button } from '../../../Button/Button.mjs';
+import { ContextualHelp } from '../../../ContextualHelp/ContextualHelp.mjs';
+import { ContextualHelpTrigger } from '../../../ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs';
+import { Heading } from '../../../Heading/Heading.mjs';
+
+const ValidationResultButton = (props) => {
+  const { policyValidationResult, isDisabled, isEmptyValue, className } = props;
+  const translate = useLocalizedStringFormatter(locales);
+  let validationResults = policyValidationResult?.ruleResults?.filter((r) => {
+    return isEmptyValue ? !r.isValid : true;
+  });
+  if (validationResults && validationResults.length === 0 && isEmptyValue) {
+    validationResults = policyValidationResult?.ruleResults;
+  }
+  const validationResultComponents = validationResults?.map((result, index) => {
+    return /* @__PURE__ */ jsx(
+      ValidationResultEntry,
+      {
+        result
+      },
+      `${result.identifier}-${index}`
+    );
+  }) ?? [];
+  return /* @__PURE__ */ jsxs(ContextualHelpTrigger, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-component": "showPasswordRules",
+        isDisabled,
+        className
+      }
+    ),
+    /* @__PURE__ */ jsxs(ContextualHelp, { children: [
+      /* @__PURE__ */ jsx(Heading, { children: translate.format("password.requirements.heading") }),
+      validationResultComponents.length === 0 && /* @__PURE__ */ jsx(ValidationResultEntry, { result: { isValid: true }, unspecifiedRules: true }),
+      validationResultComponents
+    ] })
+  ] });
+};
+
+export { ValidationResultButton };
+//# sourceMappingURL=ValidationResultButton.mjs.map

package/dist/js/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationResultButton.mjs","sources":["../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nimport locales from \"./../../locales/*.locale.json\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport ValidationResultEntry from \"@/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry\";\nimport { Button } from \"@/components/Button\";\nimport {\n  ContextualHelp,\n  ContextualHelpTrigger,\n} from \"@/components/ContextualHelp\";\nimport { Heading } from \"@/components/Heading\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n  policyValidationResult?: ResolvedPolicyValidationResult;\n  isDisabled?: boolean;\n  isEmptyValue: boolean;\n}\n\nexport const ValidationResultButton: FC<Props> = (props) => {\n  const { policyValidationResult, isDisabled, isEmptyValue, className } = props;\n\n  const translate = useLocalizedStringFormatter(locales);\n\n  let validationResults = policyValidationResult?.ruleResults?.filter((r) => {\n    return isEmptyValue ? !r.isValid : true;\n  });\n  if (validationResults && validationResults.length === 0 && isEmptyValue) {\n    // if we have no rules to show on first info - just list them all\n    validationResults = policyValidationResult?.ruleResults;\n  }\n\n  const validationResultComponents =\n    validationResults?.map((result, index) => {\n      return (\n        <ValidationResultEntry\n          key={`${result.identifier}-${index}`}\n          result={result}\n        />\n      );\n    }) ?? [];\n\n  return (\n    <ContextualHelpTrigger>\n      <Button\n        data-component=\"showPasswordRules\"\n        isDisabled={isDisabled}\n        className={className}\n      />\n      <ContextualHelp>\n        <Heading>{translate.format(\"password.requirements.heading\")}</Heading>\n        {validationResultComponents.length === 0 && (\n          <ValidationResultEntry result={{ isValid: true }} unspecifiedRules />\n        )}\n        {validationResultComponents}\n      </ContextualHelp>\n    </ContextualHelpTrigger>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAoBO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,sBAAA,EAAwB,UAAA,EAAY,YAAA,EAAc,WAAU,GAAI,KAAA;AAExE,EAAA,MAAM,SAAA,GAAY,4BAA4B,OAAO,CAAA;AAErD,EAAA,IAAI,iBAAA,GAAoB,sBAAA,EAAwB,WAAA,EAAa,MAAA,CAAO,CAAC,CAAA,KAAM;AACzE,IAAA,OAAO,YAAA,GAAe,CAAC,CAAA,CAAE,OAAA,GAAU,IAAA;AAAA,EACrC,CAAC,CAAA;AACD,EAAA,IAAI,iBAAA,IAAqB,iBAAA,CAAkB,MAAA,KAAW,CAAA,IAAK,YAAA,EAAc;AAEvE,IAAA,iBAAA,GAAoB,sBAAA,EAAwB,WAAA;AAAA,EAC9C;AAEA,EAAA,MAAM,0BAAA,GACJ,iBAAA,EAAmB,GAAA,CAAI,CAAC,QAAQ,KAAA,KAAU;AACxC,IAAA,uBACE,GAAA;AAAA,MAAC,qBAAA;AAAA,MAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MADK,CAAA,EAAG,MAAA,CAAO,UAAU,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,KAEpC;AAAA,EAEJ,CAAC,KAAK,EAAC;AAET,EAAA,4BACG,qBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,gBAAA,EAAe,mBAAA;AAAA,QACf,UAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,yBACC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAA,EAAA,EAAS,QAAA,EAAA,SAAA,CAAU,MAAA,CAAO,+BAA+B,CAAA,EAAE,CAAA;AAAA,MAC3D,0BAAA,CAA2B,MAAA,KAAW,CAAA,oBACrC,GAAA,CAAC,qBAAA,EAAA,EAAsB,MAAA,EAAQ,EAAE,OAAA,EAAS,IAAA,EAAK,EAAG,gBAAA,EAAgB,IAAA,EAAC,CAAA;AAAA,MAEpE;AAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.mjs

@@ -0,0 +1,40 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Text } from '../../../Text/Text.mjs';
+import { IconCircleCheck, IconCircleMinus } from '@tabler/icons-react';
+import { generateValidationTranslation } from '../../lib/generateValidationTranslation.mjs';
+import locales from '../../../../../../_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs';
+import styles from './ValidationResultEntry.module.scss.mjs';
+import { useLocalizedContextStringFormatter } from '../../../TranslationProvider/useLocalizedContextStringFormatter.mjs';
+
+const ValidationResultEntry = (props) => {
+  const { result, unspecifiedRules = false } = props;
+  const translate = useLocalizedContextStringFormatter(locales);
+  const icon = result.isValid ? /* @__PURE__ */ jsx(IconCircleCheck, { color: "green" }) : /* @__PURE__ */ jsx(IconCircleMinus, { color: "red" });
+  let [translationKey, translationValues] = generateValidationTranslation(
+    result,
+    true
+  );
+  if (unspecifiedRules) {
+    translationKey = `${translationKey}.unspecified`;
+    translationValues = {};
+  }
+  return /* @__PURE__ */ jsxs(
+    Text,
+    {
+      className: styles.validationResultEntry,
+      "data-rule": result.ruleType,
+      "data-rule-valid": result.isValid,
+      children: [
+        icon,
+        translate.format(translationKey, translationValues)
+      ]
+    },
+    translationKey
+  );
+};
+
+export { ValidationResultEntry, ValidationResultEntry as default };
+//# sourceMappingURL=ValidationResultEntry.mjs.map

package/dist/js/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationResultEntry.mjs","sources":["../../../../../../../../src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Text } from \"@/components/Text\";\nimport { IconCircleCheck, IconCircleMinus } from \"@tabler/icons-react\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport locales from \"./../../locales/*.locale.json\";\nimport styles from \"./ValidationResultEntry.module.scss\";\nimport type { RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\n\ninterface Props {\n  result: Partial<RuleValidationResult>;\n  unspecifiedRules?: boolean;\n}\n\n/** @internal */\nexport const ValidationResultEntry: FC<Props> = (props) => {\n  const { result, unspecifiedRules = false } = props;\n  const translate = useLocalizedContextStringFormatter(locales);\n\n  const icon = result.isValid ? (\n    <IconCircleCheck color=\"green\" />\n  ) : (\n    <IconCircleMinus color=\"red\" />\n  );\n\n  let [translationKey, translationValues] = generateValidationTranslation(\n    result,\n    true,\n  );\n\n  if (unspecifiedRules) {\n    translationKey = `${translationKey}.unspecified`;\n    translationValues = {};\n  }\n\n  return (\n    <Text\n      className={styles.validationResultEntry}\n      data-rule={result.ruleType}\n      data-rule-valid={result.isValid}\n      key={translationKey}\n    >\n      {icon}\n      {translate.format(translationKey, translationValues)}\n    </Text>\n  );\n};\n\nexport default ValidationResultEntry;\n"],"names":[],"mappings":";;;;;;;;;AAgBO,MAAM,qBAAA,GAAmC,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,MAAA,EAAQ,gBAAA,GAAmB,KAAA,EAAM,GAAI,KAAA;AAC7C,EAAA,MAAM,SAAA,GAAY,mCAAmC,OAAO,CAAA;AAE5D,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,OAAA,mBAClB,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAM,OAAA,EAAQ,CAAA,mBAE/B,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAM,KAAA,EAAM,CAAA;AAG/B,EAAA,IAAI,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,6BAAA;AAAA,IACxC,MAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,cAAA,GAAiB,GAAG,cAAc,CAAA,YAAA,CAAA;AAClC,IAAA,iBAAA,GAAoB,EAAC;AAAA,EACvB;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,qBAAA;AAAA,MAClB,aAAW,MAAA,CAAO,QAAA;AAAA,MAClB,mBAAiB,MAAA,CAAO,OAAA;AAAA,MAGvB,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA,SAAA,CAAU,MAAA,CAAO,cAAA,EAAgB,iBAAiB;AAAA;AAAA,KAAA;AAAA,IAH9C;AAAA,GAIP;AAEJ;;;;"}