@kubit-ui-web/react-components 1.7.0 → 1.8.0

package/dist/esm/components/inputDigitSequence/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useAnimation';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/inputDigitSequence/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/inputDigitSequence/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/inputDigitSequence/hooks/useAnimation.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'react';
+type UseAnimationParamsType = {
+    animated: boolean;
+};
+type UseAnimationResponseType = {
+    boxesAnimationDone: boolean;
+    labelAnimationDone: boolean;
+    ref?: Ref<HTMLDivElement> | undefined;
+};
+export declare const useAnimation: (props: UseAnimationParamsType) => UseAnimationResponseType;
+export {};

package/dist/esm/components/inputDigitSequence/hooks/useAnimation.js

@@ -0,0 +1,96 @@
+import { useCallback, useRef, useState } from 'react';
+export const useAnimation = (props) => {
+    const [boxesAnimationDone, setBoxesAnimationDone] = useState(false);
+    const [labelAnimationDone, setLabelAnimationDone] = useState(false);
+    const moveBoxesToTheirPosition = useCallback(() => {
+        const rootElement = innerRef.current;
+        // Do no continue if the root element is not present
+        if (!rootElement) {
+            return;
+        }
+        // Retrieve original input container
+        const inputContainer = rootElement.querySelector('[data-id="input-container"]');
+        // Retrieve animated input container
+        const inputContainerAnimated = rootElement.querySelector('[data-id="input-container-animated"]');
+        // Do not continue if the animated input container is not present
+        if (!inputContainerAnimated?.children) {
+            return;
+        }
+        // Do not continue if the original input container child has no width
+        const innerElementWidth = inputContainerAnimated?.firstElementChild?.clientWidth;
+        if (!innerElementWidth) {
+            return;
+        }
+        // For each animated container child
+        // * Fix the width
+        // * Initialise position as absolute
+        // * Set transition
+        for (let i = 0; i < inputContainerAnimated.childNodes.length; i++) {
+            const inputContainer = inputContainerAnimated.childNodes[i];
+            if (inputContainer.style) {
+                inputContainer.style.width = `${innerElementWidth}px`;
+                inputContainer.style.position = 'absolute';
+                inputContainer.style.left = '0px';
+                inputContainer.style.top = '0px';
+                inputContainer.style.transition = 'left 250ms ease-in';
+            }
+        }
+        // There is a diff between the left of the first element in the original container and the left of the first element in the animated container
+        const elementsGap = inputContainer?.firstElementChild?.getBoundingClientRect().left ?? 0;
+        // For each animated container child set the left as its respective in the original container
+        for (let i = 0; i < inputContainerAnimated.childNodes.length; i++) {
+            const originalElement = inputContainer?.childNodes[i];
+            if (!originalElement) {
+                break;
+            }
+            // Original element left
+            const originalElementLeft = originalElement.getBoundingClientRect().left;
+            const element = inputContainerAnimated.childNodes[i];
+            if (element.style) {
+                element.style.left = `${originalElementLeft - elementsGap}px`;
+            }
+        }
+    }, []);
+    const moveBoxesFinished = useRef(false);
+    const handleFinishMovingBoxes = useCallback(() => {
+        if (moveBoxesFinished.current) {
+            return;
+        }
+        moveBoxesFinished.current = true;
+        setBoxesAnimationDone(true);
+    }, []);
+    const increaseLabelHeightFinished = useRef(false);
+    const handleFinishIncreasingLabelHeight = useCallback(() => {
+        if (increaseLabelHeightFinished.current) {
+            return;
+        }
+        increaseLabelHeightFinished.current = true;
+        setLabelAnimationDone(true);
+    }, []);
+    const innerRef = useRef(null);
+    const initialiseRef = useCallback((node) => {
+        if (!props.animated) {
+            return;
+        }
+        if (innerRef.current) {
+            // remove event listeners
+            const inputContainerAnimated = innerRef.current.querySelector('[data-id="input-container-animated"]')?.firstElementChild;
+            inputContainerAnimated?.removeEventListener('transitionend', handleFinishMovingBoxes);
+            inputContainerAnimated?.removeEventListener('animationend', handleFinishIncreasingLabelHeight);
+        }
+        innerRef.current = node;
+        if (innerRef.current) {
+            // add event listeners
+            const inputContainerAnimated = innerRef.current.querySelector('[data-id="input-container-animated"]');
+            inputContainerAnimated?.addEventListener('transitionend', handleFinishMovingBoxes);
+            inputContainerAnimated?.addEventListener('animationend', handleFinishIncreasingLabelHeight);
+            moveBoxesToTheirPosition();
+        }
+    }, []);
+    return {
+        boxesAnimationDone,
+        labelAnimationDone,
+        ref: initialiseRef,
+    };
+};
+//# sourceMappingURL=useAnimation.js.map

package/dist/esm/components/inputDigitSequence/hooks/useAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimation.js","sourceRoot":"","sources":["../../../../../src/components/inputDigitSequence/hooks/useAnimation.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/inputDigitSequence/index.d.ts

@@ -0,0 +1,2 @@
+export { InputDigitSequenceUncontrolled as InputDigitSequence } from './inputDigitSequenceUncontrolled';
+export * from './types';

package/dist/esm/components/inputDigitSequence/index.js

@@ -0,0 +1,3 @@
+export { InputDigitSequenceUncontrolled as InputDigitSequence } from './inputDigitSequenceUncontrolled';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/inputDigitSequence/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputDigitSequence/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,IAAI,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACxG,cAAc,SAAS,CAAC"}

package/dist/esm/components/inputDigitSequence/inputDigitSequence.styled.d.ts

@@ -0,0 +1,39 @@
+import { InputDigitSequenceStyles } from './types';
+export declare const ParentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+}>> & string;
+export declare const TitleTooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+}>> & string;
+export declare const AnimationInputsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+}>> & string;
+export declare const InputDigitsContainerAnimated: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+    animated: boolean;
+    boxesAnimationDone: boolean;
+}>> & string;
+export declare const InputDigitsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+    animated: boolean;
+    boxesAnimationDone: boolean;
+    labelAnimationDone: boolean;
+}>> & string;
+export declare const InputDigitAndNumberContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+    animated: boolean;
+    boxesAnimationDone: boolean;
+}>> & string;
+export declare const InputDigitStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    styles?: InputDigitSequenceStyles;
+    error?: boolean;
+}>> & string;
+export declare const IconAndErrorTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+}>> & string;
+export declare const HelpTextContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+}>> & string;
+export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    styles?: InputDigitSequenceStyles;
+}>> & string;

package/dist/esm/components/inputDigitSequence/inputDigitSequence.styled.js

@@ -0,0 +1,130 @@
+import styled, { css, keyframes } from 'styled-components';
+import { inputFocusWidthMixin } from '../../styles/mixins';
+import { getStyles, getTypographyStyles } from '../../utils';
+export const ParentContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  ${({ styles }) => getStyles(styles?.rootContainer)};
+`;
+export const TitleTooltipContainer = styled.div `
+  ${({ styles }) => getStyles(styles?.titleTooltipContainer)};
+`;
+export const AnimationInputsContainer = styled.div `
+  ${({ styles }) => getStyles(styles?.animationInputsContainer)};
+`;
+const increaseLabelHeight = (props) => keyframes `
+  0% {
+    height: 0rem;
+  }
+  100% {
+    height: ${props.height};
+  }
+`;
+export const InputDigitsContainerAnimated = styled.div `
+  display: flex;
+  align-items: end;
+  ${({ styles }) => getStyles(styles?.inputDigitsContainer)};
+  ${({ animated }) => animated &&
+    css `
+      p,
+      label {
+        height: 0rem;
+        overflow: hidden;
+      }
+    `};
+  ${({ boxesAnimationDone, styles }) => boxesAnimationDone &&
+    css `
+      p,
+      label {
+        animation: ${increaseLabelHeight({ height: styles?.inputNumber?.line_height })} 250ms
+          forwards;
+      }
+    `};
+`;
+export const InputDigitsContainer = styled.div `
+  display: flex;
+  align-items: end;
+  ${({ styles }) => getStyles(styles?.inputDigitsContainer)};
+  ${({ animated }) => animated &&
+    css `
+      visibility: hidden;
+      p,
+      label {
+        height: 0rem;
+        overflow: hidden;
+      }
+    `};
+  ${({ boxesAnimationDone, styles }) => boxesAnimationDone &&
+    css `
+      p,
+      label {
+        animation: ${increaseLabelHeight({ height: styles?.inputNumber?.line_height })} 250ms
+          forwards;
+      }
+    `};
+
+  ${({ labelAnimationDone }) => labelAnimationDone &&
+    css `
+      visibility: visible;
+    `};
+`;
+const increaseGap = (props) => keyframes `
+  0% {
+    row-gap: 0rem;
+    gap: 0rem;
+  }
+  100% {
+    gap: ${props.gap};
+    row-gap: ${props.row_gap};
+  }
+`;
+export const InputDigitAndNumberContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+  ${({ styles }) => getStyles(styles?.inputDigitAndNumberContainer)};
+  ${({ animated }) => animated &&
+    css `
+      row-gap: 0rem;
+      gap: 0rem;
+    `};
+  ${({ boxesAnimationDone, styles }) => boxesAnimationDone &&
+    css `
+      animation: ${increaseGap({
+        row_gap: styles?.inputDigitAndNumberContainer?.row_gap,
+        gap: styles?.inputDigitAndNumberContainer?.gap,
+    })}
+        250ms forwards;
+    `};
+`;
+export const InputDigitStyled = styled.input `
+  text-align: center;
+  border-style: solid;
+  ${({ styles }) => getTypographyStyles(styles?.inputDigitText)};
+  ${({ styles }) => getStyles(styles?.inputDigitContainer)};
+
+  ${({ styles, error }) => error && getStyles(styles?.inputDigitContainerError)};
+
+  :focus {
+    ${({ styles }) => getStyles(styles?.inputDigitContainerfocus)};
+  }
+  &:focus-visible {
+    ${inputFocusWidthMixin}
+  }
+
+  &[type='password'] {
+    ${({ styles }) => getTypographyStyles(styles?.inputDigitTextTypePassword)}
+  }
+`;
+export const IconAndErrorTextContainer = styled.div `
+  display: flex;
+  ${({ styles }) => getStyles(styles?.errorContainer)};
+`;
+export const HelpTextContainerStyled = styled.div `
+  ${({ styles }) => getStyles(styles?.helpTextContainer)};
+`;
+export const ButtonContainer = styled.div `
+  ${({ styles }) => getStyles(styles?.actionButtonContainer)};
+`;
+//# sourceMappingURL=inputDigitSequence.styled.js.map

package/dist/esm/components/inputDigitSequence/inputDigitSequence.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputDigitSequence.styled.js","sourceRoot":"","sources":["../../../../src/components/inputDigitSequence/inputDigitSequence.styled.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/inputDigitSequence/inputDigitSequenceControlled.d.ts

@@ -0,0 +1,2 @@
+import { IInputDigitSequenceControlled } from './types';
+export declare const InputDigitSequenceControlled: (props: IInputDigitSequenceControlled) => JSX.Element;

package/dist/esm/components/inputDigitSequence/inputDigitSequenceControlled.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useId } from '../../hooks/useId/useId';
+import { useStyles } from '../../hooks/useStyles/useStyles';
+import { ErrorBoundary, FallbackComponent } from '../../provider/errorBoundary';
+import { InputDropdownStandAlone } from '../inputDropdown/inputDropdownStandAlone';
+import { useAnimation } from './hooks';
+import { InputDigitSequenceStandAlone } from './inputDigitSequenceStandAlone';
+import { InputDigitSequenceStateType, } from './types';
+//constants
+const INPUT_DIGIT_SEQUENCE_STYLES = 'INPUT_DIGIT_SEQUENCE_STYLES';
+const NUMBER_REGEX = /^[0-9]*$/;
+const ON_CHANGE_VALUE_VISIBLE_TIMEOUT = 500;
+const InputDigitSequenceControlledComponet = ({ variant, inputsArray, disabled = false, showDigitAfterWrite = true, showDigitTimeMiliseconds = ON_CHANGE_VALUE_VISIBLE_TIMEOUT, animated = false, ctv, ...props }) => {
+    const styles = useStyles(INPUT_DIGIT_SEQUENCE_STYLES, variant, ctv);
+    const digitId = useId('digit');
+    const [showPassword, setShowPassword] = React.useState(false);
+    const [inputDigits, setInputDigits] = React.useState(inputsArray.map((input, index) => {
+        return {
+            index: index,
+            value: input.value ?? '',
+            blockedBySystem: input.blockedBySystem,
+            ['aria-label']: input['aria-label'],
+        };
+    }));
+    const { ref, boxesAnimationDone, labelAnimationDone } = useAnimation({
+        animated,
+    });
+    const getNextInput = (index) => {
+        //we need to find the next input not BloquedBySystem
+        //we get a new array from the actual index + 1
+        const slicedInputDigits = inputDigits.slice(index + 1);
+        //we get the first element with isBloquedBySystem=false
+        const nextInputNotDisabled = slicedInputDigits.find(input => !input.blockedBySystem);
+        if (nextInputNotDisabled) {
+            const inputElement = document.getElementById(`${digitId}-${nextInputNotDisabled.index}`);
+            inputElement?.focus();
+        }
+    };
+    const [passwordIndex, setPasswordIndex] = React.useState();
+    const displayDigitTimeOut = React.useRef(null);
+    // When unmount, delete displayDigitTimeOut
+    React.useEffect(() => {
+        return () => {
+            if (displayDigitTimeOut.current) {
+                clearTimeout(displayDigitTimeOut.current);
+            }
+        };
+    }, []);
+    const showDigit = (index) => {
+        if (!showDigitAfterWrite) {
+            return;
+        }
+        // Set visible the current index showDigitTimeMiliseconds (or change)
+        if (displayDigitTimeOut.current) {
+            clearTimeout(displayDigitTimeOut.current);
+        }
+        setPasswordIndex(index);
+        displayDigitTimeOut.current = setTimeout(() => {
+            setPasswordIndex(undefined);
+        }, showDigitTimeMiliseconds);
+    };
+    const handleInputChange = (index) => {
+        return event => {
+            const { value } = event.target;
+            //we only allow number values
+            if (NUMBER_REGEX.test(value)) {
+                showDigit(index);
+                const newDigits = [...inputDigits];
+                newDigits[index].value = value;
+                setInputDigits(newDigits);
+                //when the user writes a new digit, we send the new array in case they want to check something
+                props.onInputChange?.(newDigits, event);
+                if (value !== '') {
+                    getNextInput(index);
+                }
+            }
+        };
+    };
+    const handleClickActionButton = event => {
+        setShowPassword(prevValue => !prevValue);
+        props.actionButton?.onClick?.(event);
+    };
+    const state = !disabled
+        ? InputDigitSequenceStateType.DEFAULT
+        : InputDigitSequenceStateType.DISABLED;
+    return (_jsx(InputDigitSequenceStandAlone, { ...props, ref: ref, animated: animated, boxesAnimationDone: boxesAnimationDone, digitId: digitId, disabled: disabled, inputDigits: inputDigits, labelAnimationDone: labelAnimationDone, passwordIndex: passwordIndex, showPassword: showPassword, state: state, styles: styles, onActionButtonClick: handleClickActionButton, onInputChange: handleInputChange }));
+};
+const InputDigitSequenceBoundary = (props) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(InputDropdownStandAlone, { ...props }) }), children: _jsx(InputDigitSequenceControlledComponet, { ...props }) }));
+export const InputDigitSequenceControlled = InputDigitSequenceBoundary;
+//# sourceMappingURL=inputDigitSequenceControlled.js.map

package/dist/esm/components/inputDigitSequence/inputDigitSequenceControlled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputDigitSequenceControlled.js","sourceRoot":"","sources":["../../../../src/components/inputDigitSequence/inputDigitSequenceControlled.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/inputDigitSequence/inputDigitSequenceStandAlone.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IInputDigitSequenceStandAlone } from './types';
+export declare const InputDigitSequenceStandAlone: React.ForwardRefExoticComponent<IInputDigitSequenceStandAlone & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/inputDigitSequence/inputDigitSequenceStandAlone.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button, IconPositionType } from '../../components/button';
+import { ElementOrIcon } from '../../components/elementOrIcon';
+import { Text, TextComponentType } from '../../components/text';
+import { AriaLiveOptionType } from '../../types';
+import { InputDigit, InputDigitSequenceHelpText, InputDigitSequenceTooltip } from './components';
+import { AnimationInputsContainer, ButtonContainer, IconAndErrorTextContainer, InputDigitsContainer, InputDigitsContainerAnimated, ParentContainer, TitleTooltipContainer, } from './inputDigitSequence.styled';
+const InputDigitSequenceStandAloneComponent = ({ error = false, inputMode = 'numeric', dataTestId = 'inputDigitSequence', ...props }, ref) => {
+    const stateStyles = props.styles?.[props.state];
+    return (_jsxs(ParentContainer, { ref: ref, "data-testid": dataTestId, styles: stateStyles, children: [_jsxs(TitleTooltipContainer, { styles: stateStyles, children: [_jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: stateStyles?.title, ...props.title, children: props.title?.content }), _jsx(InputDigitSequenceTooltip, { stateStyles: stateStyles, tooltip: props.tooltip, tooltipIcon: props.tooltipIcon })] }), _jsxs(AnimationInputsContainer, { styles: stateStyles, children: [props.animated && !props.labelAnimationDone && (_jsx(InputDigitsContainerAnimated, { animated: props.animated, "aria-hidden": true, boxesAnimationDone: props.boxesAnimationDone, "data-id": "input-container-animated", styles: stateStyles, children: props.inputDigits.map((_, index) => {
+                            return (_jsx(InputDigit, { animated: props.animated, ariaHidden: true, boxesAnimationDone: props.boxesAnimationDone, disabled: true, label: index + 1, state: props.state, styles: props.styles, tabIndex: -1 }, index));
+                        }) })), _jsx(InputDigitsContainer, { animated: props.animated, boxesAnimationDone: props.boxesAnimationDone, "data-id": "input-container", labelAnimationDone: props.labelAnimationDone, styles: stateStyles, children: props.inputDigits.map((inputDigit, index) => {
+                            return (_jsx(InputDigit, { animated: props.animated, boxesAnimationDone: props.boxesAnimationDone, disabled: props.disabled, error: error, inputDigit: inputDigit, inputId: `${props.digitId}-${index}`, inputMode: inputMode, label: index + 1, showPassword: props.showPassword || props.passwordIndex === index, state: props.state, styles: props.styles, onChange: props.onInputChange(index) }, index));
+                        }) })] }), _jsx(IconAndErrorTextContainer, { "aria-live": AriaLiveOptionType.POLITE, styles: stateStyles, children: error && !!props.errorText && (_jsxs(_Fragment, { children: [_jsx(ElementOrIcon, { customIconStyles: stateStyles?.errorIcon, ...props.errorIcon }), _jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: stateStyles?.errorText, ...props.errorText, children: props.errorText.content })] })) }), _jsx(InputDigitSequenceHelpText, { dataTestId: `${dataTestId}HelpText`, helpText: props.helpText, styles: stateStyles }), props.actionButton?.content &&
+                (stateStyles?.actionButtonSize || props.actionButton?.size) && (_jsx(ButtonContainer, { styles: stateStyles, children: _jsx(Button, { disabled: props.disabled, iconPosition: IconPositionType.LEFT, size: stateStyles?.actionButtonSize, ...props.actionButton, onClick: props.onActionButtonClick, children: props.actionButton?.content }) }))] }));
+};
+export const InputDigitSequenceStandAlone = React.forwardRef(InputDigitSequenceStandAloneComponent);
+//# sourceMappingURL=inputDigitSequenceStandAlone.js.map

package/dist/esm/components/inputDigitSequence/inputDigitSequenceStandAlone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputDigitSequenceStandAlone.js","sourceRoot":"","sources":["../../../../src/components/inputDigitSequence/inputDigitSequenceStandAlone.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/inputDigitSequence/inputDigitSequenceUncontrolled.d.ts

@@ -0,0 +1,2 @@
+import { IInputDigitSequenceUncontrolled } from './types';
+export declare const InputDigitSequenceUncontrolled: ({ ...props }: IInputDigitSequenceUncontrolled) => JSX.Element;

package/dist/esm/components/inputDigitSequence/inputDigitSequenceUncontrolled.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputDigitSequenceControlled } from './inputDigitSequenceControlled';
+export const InputDigitSequenceUncontrolled = ({ ...props }) => {
+    return _jsx(InputDigitSequenceControlled, { ...props });
+};
+//# sourceMappingURL=inputDigitSequenceUncontrolled.js.map

package/dist/esm/components/inputDigitSequence/inputDigitSequenceUncontrolled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputDigitSequenceUncontrolled.js","sourceRoot":"","sources":["../../../../src/components/inputDigitSequence/inputDigitSequenceUncontrolled.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAG9E,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,EAC7C,GAAG,KAAK,EACwB,EAAe,EAAE;IACjD,OAAO,KAAC,4BAA4B,OAAK,KAAK,GAAI,CAAC;AACrD,CAAC,CAAC"}

package/dist/esm/components/inputDigitSequence/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './inputDigitSequenceTheme';
+export * from './inputDigitSequence';
+export * from './state';

package/dist/esm/components/inputDigitSequence/types/index.js

@@ -0,0 +1,4 @@
+export * from './inputDigitSequenceTheme';
+export * from './inputDigitSequence';
+export * from './state';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/inputDigitSequence/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/inputDigitSequence/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC"}

package/dist/esm/components/inputDigitSequence/types/inputDigitSequence.d.ts

@@ -0,0 +1,63 @@
+import { IButton } from '../../../components/button';
+import { IElementOrIcon } from '../../../components/elementOrIcon';
+import { IText } from '../../../components/text';
+import { ITooltipUnControlled } from '../../../components/tooltip/types';
+import { CustomTokenTypes, InputModeType } from '../../../types';
+import { InputDigitSequenceStateStyles } from './inputDigitSequenceTheme';
+import { InputDigitSequenceStateType } from './state';
+export type InputDigitSequenceTooltipType = Omit<ITooltipUnControlled, 'children' | 'variant'> & {
+    variant?: string;
+};
+export type InputDigitSequenceTextType = Omit<IText<string>, 'children'> & {
+    content?: React.ReactNode;
+};
+export type InputDigiSequenceButtonType = Omit<IButton, 'children' | 'size'> & {
+    content: string;
+    size?: string;
+};
+export type InputsArrayType = {
+    blockedBySystem: boolean;
+    ['aria-label']?: string;
+    value?: string;
+};
+export type UseStateInputDigitsType = {
+    index: number;
+    value: string;
+    blockedBySystem: boolean;
+    ['aria-label']?: string;
+};
+export interface IInputDigitSequenceStandAlone {
+    styles?: InputDigitSequenceStateStyles;
+    state: InputDigitSequenceStateType;
+    inputDigits: UseStateInputDigitsType[];
+    title?: InputDigitSequenceTextType;
+    tooltipIcon?: IElementOrIcon;
+    tooltip?: InputDigitSequenceTooltipType;
+    actionButton?: InputDigiSequenceButtonType;
+    disabled?: boolean;
+    error?: boolean;
+    errorText?: InputDigitSequenceTextType;
+    helpText?: InputDigitSequenceTextType;
+    errorIcon?: IElementOrIcon;
+    showPassword: boolean;
+    passwordIndex?: number;
+    digitId: string;
+    onInputChange: (index: number) => React.ChangeEventHandler<HTMLInputElement>;
+    onActionButtonClick: React.MouseEventHandler<HTMLButtonElement>;
+    inputMode?: InputModeType;
+    animated: boolean;
+    boxesAnimationDone: boolean;
+    labelAnimationDone: boolean;
+    dataTestId?: string;
+}
+type propsToOmit = 'styles' | 'state' | 'inputDigits' | 'getNextInput' | 'onInputChange' | 'onActionButtonClick' | 'showPassword' | 'passwordIndex' | 'digitId' | 'animated' | 'boxesAnimationDone' | 'labelAnimationDone';
+export interface IInputDigitSequenceControlled extends Omit<IInputDigitSequenceStandAlone, propsToOmit>, Omit<CustomTokenTypes<InputDigitSequenceStateStyles>, 'cts' | 'extraCt'> {
+    variant: string;
+    animated?: boolean;
+    inputsArray: InputsArrayType[];
+    showDigitAfterWrite?: boolean;
+    showDigitTimeMiliseconds?: number;
+    onInputChange?: (value: UseStateInputDigitsType[], event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export type IInputDigitSequenceUncontrolled = IInputDigitSequenceControlled;
+export {};

package/dist/esm/components/inputDigitSequence/types/inputDigitSequence.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inputDigitSequence.js.map

package/dist/esm/components/inputDigitSequence/types/inputDigitSequence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputDigitSequence.js","sourceRoot":"","sources":["../../../../../src/components/inputDigitSequence/types/inputDigitSequence.ts"],"names":[],"mappings":""}

package/dist/esm/components/inputDigitSequence/types/inputDigitSequenceTheme.d.ts

@@ -0,0 +1,33 @@
+import { CommonStyleType, IconGenericType, IconTypes, TypographyTypes } from '../../../types';
+import { InputDigitSequenceStateType } from './state';
+export type InputDigitSequenceStyles = {
+    rootContainer?: CommonStyleType;
+    titleTooltipContainer?: CommonStyleType;
+    title?: TypographyTypes;
+    tooltipIcon?: IconTypes;
+    tooltip?: {
+        variant?: string;
+    };
+    animationInputsContainer?: CommonStyleType;
+    inputDigitsContainer?: CommonStyleType;
+    inputDigitAndNumberContainer?: CommonStyleType;
+    inputDigitContainer?: CommonStyleType;
+    inputDigitContainerError?: CommonStyleType;
+    inputDigitContainerfocus?: CommonStyleType;
+    inputDigitText?: TypographyTypes;
+    inputDigitTextTypePassword?: TypographyTypes;
+    inputNumber?: TypographyTypes;
+    errorContainer?: CommonStyleType;
+    errorText?: TypographyTypes;
+    errorIcon?: IconGenericType;
+    helpTextContainer?: CommonStyleType;
+    helpText?: TypographyTypes;
+    actionButtonContainer?: CommonStyleType;
+    actionButtonSize?: string;
+};
+export type InputDigitSequenceStateStyles = {
+    [state in InputDigitSequenceStateType]?: InputDigitSequenceStyles;
+};
+export type InputDigitSequenceStylesType<P extends string | number | symbol> = {
+    [key in P]: InputDigitSequenceStateStyles;
+};

package/dist/esm/components/inputDigitSequence/types/inputDigitSequenceTheme.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inputDigitSequenceTheme.js.map

package/dist/esm/components/inputDigitSequence/types/inputDigitSequenceTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputDigitSequenceTheme.js","sourceRoot":"","sources":["../../../../../src/components/inputDigitSequence/types/inputDigitSequenceTheme.ts"],"names":[],"mappings":""}

package/dist/esm/components/inputDigitSequence/types/state.d.ts

@@ -0,0 +1,5 @@
+export declare enum InputDigitSequenceStateType {
+    DEFAULT = "DEFAULT",
+    DISABLED = "DISABLED",
+    BLOCKED_BY_SYSTEM = "BLOCKED_BY_SYSTEM"
+}

package/dist/esm/components/inputDigitSequence/types/state.js

@@ -0,0 +1,7 @@
+export var InputDigitSequenceStateType;
+(function (InputDigitSequenceStateType) {
+    InputDigitSequenceStateType["DEFAULT"] = "DEFAULT";
+    InputDigitSequenceStateType["DISABLED"] = "DISABLED";
+    InputDigitSequenceStateType["BLOCKED_BY_SYSTEM"] = "BLOCKED_BY_SYSTEM";
+})(InputDigitSequenceStateType || (InputDigitSequenceStateType = {}));
+//# sourceMappingURL=state.js.map

package/dist/esm/components/inputDigitSequence/types/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../../../src/components/inputDigitSequence/types/state.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,2BAIX;AAJD,WAAY,2BAA2B;IACrC,kDAAmB,CAAA;IACnB,oDAAqB,CAAA;IACrB,sEAAuC,CAAA;AACzC,CAAC,EAJW,2BAA2B,KAA3B,2BAA2B,QAItC"}