@alfalab/core-components-input-autocomplete 14.0.6 → 14.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete-field/Component.js +9 -19
- package/autocomplete-field/Component.js.map +1 -1
- package/autocomplete-field/index.css +1 -1
- package/autocomplete-field/index.module.css.js +1 -1
- package/autocomplete-mobile-field/Component.js +10 -35
- package/autocomplete-mobile-field/Component.js.map +1 -1
- package/autocomplete-mobile-field/index.css +10 -10
- package/autocomplete-mobile-field/index.module.css.js +1 -1
- package/cssm/autocomplete-field/Component.js +9 -19
- package/cssm/autocomplete-field/Component.js.map +1 -1
- package/cssm/autocomplete-mobile-field/Component.js +13 -38
- package/cssm/autocomplete-mobile-field/Component.js.map +1 -1
- package/esm/autocomplete-field/Component.js +10 -20
- package/esm/autocomplete-field/Component.js.map +1 -1
- package/esm/autocomplete-field/index.css +1 -1
- package/esm/autocomplete-field/index.module.css.js +1 -1
- package/esm/autocomplete-mobile-field/Component.js +12 -37
- package/esm/autocomplete-mobile-field/Component.js.map +1 -1
- package/esm/autocomplete-mobile-field/index.css +10 -10
- package/esm/autocomplete-mobile-field/index.module.css.js +1 -1
- package/esm/mobile/mobile.css +1 -1
- package/esm/mobile/mobile.module.css.js +1 -1
- package/mobile/mobile.css +1 -1
- package/mobile/mobile.module.css.js +1 -1
- package/modern/autocomplete-field/Component.js +7 -17
- package/modern/autocomplete-field/Component.js.map +1 -1
- package/modern/autocomplete-field/index.css +1 -1
- package/modern/autocomplete-field/index.module.css.js +1 -1
- package/modern/autocomplete-mobile-field/Component.js +12 -37
- package/modern/autocomplete-mobile-field/Component.js.map +1 -1
- package/modern/autocomplete-mobile-field/index.css +10 -10
- package/modern/autocomplete-mobile-field/index.module.css.js +1 -1
- package/modern/mobile/mobile.css +1 -1
- package/modern/mobile/mobile.module.css.js +1 -1
- package/moderncssm/autocomplete-field/Component.js +7 -17
- package/moderncssm/autocomplete-field/Component.js.map +1 -1
- package/moderncssm/autocomplete-mobile-field/Component.js +12 -37
- package/moderncssm/autocomplete-mobile-field/Component.js.map +1 -1
- package/package.json +5 -5
- package/src/autocomplete-field/Component.tsx +9 -16
- package/src/autocomplete-mobile-field/Component.tsx +17 -37
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { __rest, __assign } from 'tslib';
|
|
2
|
-
import React, { useState, useRef } from 'react';
|
|
2
|
+
import React, { useState, useRef, Fragment } from 'react';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { FormControlMobile } from '@alfalab/core-components-form-control/esm/mobile';
|
|
5
|
-
import {
|
|
5
|
+
import { ClearButton, LockIcon } from '@alfalab/core-components-input/esm/shared';
|
|
6
6
|
import { getDataTestId } from '@alfalab/core-components-shared/esm';
|
|
7
7
|
import { StatusBadge } from '@alfalab/core-components-status-badge/esm';
|
|
8
8
|
import { useFocus } from '@alfalab/hooks';
|
|
@@ -27,47 +27,22 @@ var AutocompleteMobileField = function (_a) {
|
|
|
27
27
|
* [1] - Indicators (eye, calendar, chevron, stepper e.g.)
|
|
28
28
|
* [0] - Lock
|
|
29
29
|
*/
|
|
30
|
-
var
|
|
31
|
-
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
render: function () { return (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
|
|
40
|
-
React.createElement(StatusBadge, { view: 'negative-alert', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'error-icon') }))); },
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
priority: 3,
|
|
44
|
-
predicate: Boolean(success && !error),
|
|
45
|
-
render: function () { return (React.createElement("div", { className: styles.successIcon },
|
|
46
|
-
React.createElement(StatusBadge, { view: 'positive-checkmark', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'success-icon') }))); },
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
priority: 2,
|
|
50
|
-
predicate: Boolean(rightAddons),
|
|
51
|
-
render: function () { return rightAddons; },
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
priority: 1,
|
|
55
|
-
predicate: Boolean(Arrow) && !disabled && !readOnly,
|
|
56
|
-
render: function () { return Arrow; },
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
priority: 0,
|
|
60
|
-
predicate: Boolean(disabled || readOnly),
|
|
61
|
-
render: function () { return React.createElement(LockIcon, { colors: colors, size: size }); },
|
|
62
|
-
},
|
|
63
|
-
]);
|
|
30
|
+
var renderRightAddons = function () { return (React.createElement(Fragment, null,
|
|
31
|
+
clear && filled && !disabled && !readOnly && (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
|
|
32
|
+
error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
|
|
33
|
+
React.createElement(StatusBadge, { view: 'negative-alert', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
|
|
34
|
+
success && !error && (React.createElement("div", { className: styles.successIcon },
|
|
35
|
+
React.createElement(StatusBadge, { view: 'positive-checkmark', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'success-icon') }))),
|
|
36
|
+
rightAddons,
|
|
37
|
+
!disabled && !readOnly && Arrow,
|
|
38
|
+
(disabled || readOnly) && React.createElement(LockIcon, { colors: colors, size: size }))); };
|
|
64
39
|
return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
|
|
65
40
|
React.createElement(FormControlMobile, __assign({ fieldClassName: cn(styles.field, fieldClassName, (_b = {},
|
|
66
41
|
_b[styles.disabled] = disabled,
|
|
67
42
|
_b[styles.focusVisible] = focusVisible,
|
|
68
43
|
_b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: getDataTestId(dataTestId, 'form-control'),
|
|
69
44
|
// downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
|
|
70
|
-
tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps, { readOnly: readOnly, colors: colors, error: error, rightAddons:
|
|
45
|
+
tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps, { readOnly: readOnly, colors: colors, error: error, rightAddons: renderRightAddons() }),
|
|
71
46
|
React.createElement("div", { className: styles.contentWrapper },
|
|
72
47
|
showPlaceholder && React.createElement("span", { className: styles.placeholder }, placeholder),
|
|
73
48
|
filled && React.createElement("div", { className: styles.value }, value)))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-mobile-field/Component.tsx"],"sourcesContent":["import React, { type ElementType, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n FormControlMobile,\n type FormControlMobileProps,\n} from '@alfalab/core-components-form-control/mobile';\nimport { ClearButton,
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-mobile-field/Component.tsx"],"sourcesContent":["import React, { type ElementType, Fragment, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n FormControlMobile,\n type FormControlMobileProps,\n} from '@alfalab/core-components-form-control/mobile';\nimport { ClearButton, LockIcon } from '@alfalab/core-components-input/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { StatusBadge } from '@alfalab/core-components-status-badge';\nimport { useFocus } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n /**\n * Компонент FormControl\n */\n FormControlComponent?: ElementType;\n};\n\nexport type AutocompleteMobileFieldProps = FormControlMobileProps &\n Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {\n /**\n * Значение поля ввода\n */\n value?: string;\n };\n\n// eslint-disable-next-line complexity\nexport const AutocompleteMobileField = ({\n size = 56,\n open,\n disabled,\n value,\n innerProps,\n dataTestId,\n fieldClassName,\n labelView = 'inner',\n placeholder,\n Arrow,\n valueRenderer,\n toggleMenu,\n setSelectedItems,\n selectedMultiple,\n FormControlComponent,\n rightAddons,\n error,\n readOnly,\n clear,\n success,\n onClear,\n onInput,\n colors = 'default',\n ...restProps\n}: AutocompleteMobileFieldProps & FieldProps) => {\n const [focused, setFocused] = useState(false);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n const filled = Boolean(value);\n const showPlaceholder = placeholder && !filled && labelView === 'outer';\n\n const statusBadgeSize = size === 40 ? 16 : 20;\n\n const { tabIndex, ...restInnerProps } = innerProps;\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {clear && filled && !disabled && !readOnly && (\n <ClearButton onClick={onClear} disabled={disabled} colors={colors} />\n )}\n {error && (\n <div className={styles.errorIcon} data-addon='error-icon'>\n <StatusBadge\n view='negative-alert'\n size={statusBadgeSize}\n dataTestId={getDataTestId(dataTestId, 'error-icon')}\n />\n </div>\n )}\n {success && !error && (\n <div className={styles.successIcon}>\n <StatusBadge\n view='positive-checkmark'\n size={statusBadgeSize}\n dataTestId={getDataTestId(dataTestId, 'success-icon')}\n />\n </div>\n )}\n {rightAddons}\n {!disabled && !readOnly && Arrow}\n {(disabled || readOnly) && <LockIcon colors={colors} size={size} />}\n </Fragment>\n );\n\n return (\n <div\n className={styles.component}\n ref={wrapperRef}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n >\n <FormControlMobile\n fieldClassName={cn(styles.field, fieldClassName, {\n [styles.disabled]: disabled,\n [styles.focusVisible]: focusVisible,\n })}\n block={true}\n size={size}\n focused={focused}\n disabled={disabled}\n filled={filled}\n labelView={labelView}\n dataTestId={getDataTestId(dataTestId, 'form-control')}\n // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус\n tabIndex={open ? undefined : tabIndex}\n {...restProps}\n {...restInnerProps}\n readOnly={readOnly}\n colors={colors}\n error={error}\n rightAddons={renderRightAddons()}\n >\n <div className={styles.contentWrapper}>\n {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}\n {filled && <div className={styles.value}>{value}</div>}\n </div>\n </FormControlMobile>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -15,29 +15,29 @@
|
|
|
15
15
|
--input-success-icon-display: flex;
|
|
16
16
|
--input-error-icon-not-alone-display: none;
|
|
17
17
|
}
|
|
18
|
-
.input-
|
|
18
|
+
.input-autocomplete__component_1s96h {
|
|
19
19
|
width: 100%;
|
|
20
20
|
outline: none;
|
|
21
21
|
}
|
|
22
|
-
.input-
|
|
22
|
+
.input-autocomplete__field_1s96h:not(.input-autocomplete__disabled_1s96h) {
|
|
23
23
|
cursor: pointer;
|
|
24
24
|
}
|
|
25
|
-
.input-
|
|
25
|
+
.input-autocomplete__errorIcon_1s96h {
|
|
26
26
|
display: var(--input-error-icon-display);
|
|
27
27
|
}
|
|
28
|
-
* + .input-
|
|
28
|
+
* + .input-autocomplete__errorIcon_1s96h {
|
|
29
29
|
display: var(--input-error-icon-not-alone-display);
|
|
30
30
|
}
|
|
31
|
-
.input-
|
|
31
|
+
.input-autocomplete__successIcon_1s96h {
|
|
32
32
|
display: var(--input-success-icon-display);
|
|
33
33
|
}
|
|
34
|
-
.input-
|
|
34
|
+
.input-autocomplete__disabled_1s96h {
|
|
35
35
|
cursor: var(--disabled-cursor);
|
|
36
36
|
}
|
|
37
|
-
.input-
|
|
37
|
+
.input-autocomplete__placeholder_1s96h {
|
|
38
38
|
color: var(--color-light-text-secondary);
|
|
39
39
|
}
|
|
40
|
-
.input-
|
|
40
|
+
.input-autocomplete__contentWrapper_1s96h {
|
|
41
41
|
font-size: 16px;
|
|
42
42
|
line-height: 20px;
|
|
43
43
|
font-weight: 400;
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
overflow: hidden;
|
|
49
49
|
width: 100%;
|
|
50
50
|
}
|
|
51
|
-
.input-
|
|
51
|
+
.input-autocomplete__value_1s96h {
|
|
52
52
|
overflow: hidden;
|
|
53
53
|
text-overflow: ellipsis;
|
|
54
54
|
text-align: left;
|
|
55
55
|
}
|
|
56
|
-
.input-
|
|
56
|
+
.input-autocomplete__focusVisible_1s96h {
|
|
57
57
|
outline: 2px solid var(--focus-color);
|
|
58
58
|
outline-offset: 2px;
|
|
59
59
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"input-
|
|
3
|
+
var styles = {"component":"input-autocomplete__component_1s96h","field":"input-autocomplete__field_1s96h","disabled":"input-autocomplete__disabled_1s96h","errorIcon":"input-autocomplete__errorIcon_1s96h","successIcon":"input-autocomplete__successIcon_1s96h","placeholder":"input-autocomplete__placeholder_1s96h","contentWrapper":"input-autocomplete__contentWrapper_1s96h","value":"input-autocomplete__value_1s96h","focusVisible":"input-autocomplete__focusVisible_1s96h"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/esm/mobile/mobile.css
CHANGED
package/mobile/mobile.css
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import React, { useRef, useCallback } from 'react';
|
|
1
|
+
import React, { useRef, useCallback, Fragment } from 'react';
|
|
2
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { InputDesktop } from '@alfalab/core-components-input/modern/desktop';
|
|
5
|
-
import { getAddonsByPriority } from '@alfalab/core-components-input/modern/helpers/get-addons-by-priority';
|
|
6
5
|
import { OnInputReason } from '../enums.js';
|
|
7
6
|
import styles from './index.module.css.js';
|
|
8
7
|
|
|
@@ -26,24 +25,15 @@ const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arro
|
|
|
26
25
|
* [1] - Indicators (eye, calendar, chevron, stepper e.g.)
|
|
27
26
|
* [0] - Lock
|
|
28
27
|
*/
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
priority: 1,
|
|
37
|
-
predicate: Boolean(Arrow) && !inputDisabled,
|
|
38
|
-
render: () => (React.createElement("span", { className: cn(styles.arrow, {
|
|
39
|
-
[styles.error]: error,
|
|
40
|
-
}) }, Arrow)),
|
|
41
|
-
},
|
|
42
|
-
]);
|
|
28
|
+
const renderRightAddons = () => (React.createElement(Fragment, null,
|
|
29
|
+
inputProps.rightAddons,
|
|
30
|
+
Arrow && !inputDisabled && (React.createElement("span", { className: cn(styles.arrow, {
|
|
31
|
+
[styles.error]: error,
|
|
32
|
+
}) }, Arrow))));
|
|
43
33
|
return (React.createElement(Input, { dataTestId: dataTestId, ...inputProps, ...innerProps, wrapperRef: mergeRefs([
|
|
44
34
|
innerProps.ref,
|
|
45
35
|
inputProps.wrapperRef,
|
|
46
|
-
]), ref: mergeRefs([inputRef, inputProps.ref]), disabled: disabled, readOnly: readOnly, block: true, label: label, labelView: labelView, placeholder: placeholder, size: size, error: error, success: success, hint: hint, onChange: handleInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons:
|
|
36
|
+
]), ref: mergeRefs([inputRef, inputProps.ref]), disabled: disabled, readOnly: readOnly, block: true, label: label, labelView: labelView, placeholder: placeholder, size: size, error: error, success: success, hint: hint, onChange: handleInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons: renderRightAddons() }));
|
|
47
37
|
};
|
|
48
38
|
|
|
49
39
|
export { AutocompleteField };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport {
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n label,\n labelView = 'inner',\n placeholder,\n size,\n Arrow,\n Input = DefaultInput,\n value,\n error,\n success,\n hint,\n disabled,\n readOnly,\n onInput,\n inputProps = {},\n innerProps,\n dataTestId,\n}: AutocompleteFieldProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { onClick, onFocus } = innerProps;\n\n const inputDisabled = disabled || readOnly;\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onClick) onClick(event);\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n },\n [onClick],\n );\n\n const handleInput: InputProps['onChange'] = (_, payload) =>\n onInput?.(payload.value, OnInputReason.Change);\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {inputProps.rightAddons}\n {Arrow && !inputDisabled && (\n <span\n className={cn(styles.arrow, {\n [styles.error]: error,\n })}\n >\n {Arrow}\n </span>\n )}\n </Fragment>\n );\n\n return (\n <Input\n dataTestId={dataTestId}\n {...inputProps}\n {...innerProps}\n wrapperRef={mergeRefs([\n innerProps.ref as React.Ref<HTMLElement>,\n inputProps.wrapperRef as React.Ref<HTMLElement>,\n ])}\n ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n disabled={disabled}\n readOnly={readOnly}\n block={true}\n label={label}\n labelView={labelView}\n placeholder={placeholder}\n size={size}\n error={error}\n success={success}\n hint={hint}\n onChange={handleInput}\n onClick={inputDisabled ? undefined : handleClick}\n onFocus={inputDisabled ? undefined : onFocus}\n autoComplete='off'\n value={value}\n rightAddons={renderRightAddons()}\n />\n );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;MAgBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;QAE3B,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;AAC3B;AACL,KAAC,EACD,CAAC,OAAO,CAAC,CACZ;IAED,MAAM,WAAW,GAA2B,CAAC,CAAC,EAAE,OAAO,KACnD,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAElD;;;;;;;AAOG;AACH,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,UAAU,CAAC,WAAW;AACtB,QAAA,KAAK,IAAI,CAAC,aAAa,KACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,gBAAA,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK;AACxB,aAAA,CAAC,IAED,KAAK,CACH,CACV,CACM,CACd;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,KACV,UAAU,EACd,UAAU,EAAE,SAAS,CAAC;AAClB,YAAA,UAAU,CAAC,GAA6B;AACxC,YAAA,UAAU,CAAC,UAAoC;SAClD,CAAC,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,GAA6B,CAAC,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,WAAW,EAChD,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,EAC5C,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAAE,EAClC,CAAA;AAEV;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"arrow":"input-
|
|
3
|
+
const styles = {"arrow":"input-autocomplete__arrow_1vetf","error":"input-autocomplete__error_1vetf"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { useState, useRef } from 'react';
|
|
1
|
+
import React, { useState, useRef, Fragment } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { FormControlMobile } from '@alfalab/core-components-form-control/modern/mobile';
|
|
4
|
-
import {
|
|
4
|
+
import { ClearButton, LockIcon } from '@alfalab/core-components-input/modern/shared';
|
|
5
5
|
import { getDataTestId } from '@alfalab/core-components-shared/modern';
|
|
6
6
|
import { StatusBadge } from '@alfalab/core-components-status-badge/modern';
|
|
7
7
|
import { useFocus } from '@alfalab/hooks';
|
|
@@ -24,47 +24,22 @@ const AutocompleteMobileField = ({ size = 56, open, disabled, value, innerProps,
|
|
|
24
24
|
* [1] - Indicators (eye, calendar, chevron, stepper e.g.)
|
|
25
25
|
* [0] - Lock
|
|
26
26
|
*/
|
|
27
|
-
const
|
|
28
|
-
{
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
render: () => (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
|
|
37
|
-
React.createElement(StatusBadge, { view: 'negative-alert', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
priority: 3,
|
|
41
|
-
predicate: Boolean(success && !error),
|
|
42
|
-
render: () => (React.createElement("div", { className: styles.successIcon },
|
|
43
|
-
React.createElement(StatusBadge, { view: 'positive-checkmark', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'success-icon') }))),
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
priority: 2,
|
|
47
|
-
predicate: Boolean(rightAddons),
|
|
48
|
-
render: () => rightAddons,
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
priority: 1,
|
|
52
|
-
predicate: Boolean(Arrow) && !disabled && !readOnly,
|
|
53
|
-
render: () => Arrow,
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
priority: 0,
|
|
57
|
-
predicate: Boolean(disabled || readOnly),
|
|
58
|
-
render: () => React.createElement(LockIcon, { colors: colors, size: size }),
|
|
59
|
-
},
|
|
60
|
-
]);
|
|
27
|
+
const renderRightAddons = () => (React.createElement(Fragment, null,
|
|
28
|
+
clear && filled && !disabled && !readOnly && (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
|
|
29
|
+
error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
|
|
30
|
+
React.createElement(StatusBadge, { view: 'negative-alert', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
|
|
31
|
+
success && !error && (React.createElement("div", { className: styles.successIcon },
|
|
32
|
+
React.createElement(StatusBadge, { view: 'positive-checkmark', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'success-icon') }))),
|
|
33
|
+
rightAddons,
|
|
34
|
+
!disabled && !readOnly && Arrow,
|
|
35
|
+
(disabled || readOnly) && React.createElement(LockIcon, { colors: colors, size: size })));
|
|
61
36
|
return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: () => setFocused(true), onBlur: () => setFocused(false) },
|
|
62
37
|
React.createElement(FormControlMobile, { fieldClassName: cn(styles.field, fieldClassName, {
|
|
63
38
|
[styles.disabled]: disabled,
|
|
64
39
|
[styles.focusVisible]: focusVisible,
|
|
65
40
|
}), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: getDataTestId(dataTestId, 'form-control'),
|
|
66
41
|
// downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
|
|
67
|
-
tabIndex: open ? undefined : tabIndex, ...restProps, ...restInnerProps, readOnly: readOnly, colors: colors, error: error, rightAddons:
|
|
42
|
+
tabIndex: open ? undefined : tabIndex, ...restProps, ...restInnerProps, readOnly: readOnly, colors: colors, error: error, rightAddons: renderRightAddons() },
|
|
68
43
|
React.createElement("div", { className: styles.contentWrapper },
|
|
69
44
|
showPlaceholder && React.createElement("span", { className: styles.placeholder }, placeholder),
|
|
70
45
|
filled && React.createElement("div", { className: styles.value }, value)))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-mobile-field/Component.tsx"],"sourcesContent":["import React, { type ElementType, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n FormControlMobile,\n type FormControlMobileProps,\n} from '@alfalab/core-components-form-control/mobile';\nimport { ClearButton,
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-mobile-field/Component.tsx"],"sourcesContent":["import React, { type ElementType, Fragment, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n FormControlMobile,\n type FormControlMobileProps,\n} from '@alfalab/core-components-form-control/mobile';\nimport { ClearButton, LockIcon } from '@alfalab/core-components-input/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { StatusBadge } from '@alfalab/core-components-status-badge';\nimport { useFocus } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n /**\n * Компонент FormControl\n */\n FormControlComponent?: ElementType;\n};\n\nexport type AutocompleteMobileFieldProps = FormControlMobileProps &\n Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {\n /**\n * Значение поля ввода\n */\n value?: string;\n };\n\n// eslint-disable-next-line complexity\nexport const AutocompleteMobileField = ({\n size = 56,\n open,\n disabled,\n value,\n innerProps,\n dataTestId,\n fieldClassName,\n labelView = 'inner',\n placeholder,\n Arrow,\n valueRenderer,\n toggleMenu,\n setSelectedItems,\n selectedMultiple,\n FormControlComponent,\n rightAddons,\n error,\n readOnly,\n clear,\n success,\n onClear,\n onInput,\n colors = 'default',\n ...restProps\n}: AutocompleteMobileFieldProps & FieldProps) => {\n const [focused, setFocused] = useState(false);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n const filled = Boolean(value);\n const showPlaceholder = placeholder && !filled && labelView === 'outer';\n\n const statusBadgeSize = size === 40 ? 16 : 20;\n\n const { tabIndex, ...restInnerProps } = innerProps;\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {clear && filled && !disabled && !readOnly && (\n <ClearButton onClick={onClear} disabled={disabled} colors={colors} />\n )}\n {error && (\n <div className={styles.errorIcon} data-addon='error-icon'>\n <StatusBadge\n view='negative-alert'\n size={statusBadgeSize}\n dataTestId={getDataTestId(dataTestId, 'error-icon')}\n />\n </div>\n )}\n {success && !error && (\n <div className={styles.successIcon}>\n <StatusBadge\n view='positive-checkmark'\n size={statusBadgeSize}\n dataTestId={getDataTestId(dataTestId, 'success-icon')}\n />\n </div>\n )}\n {rightAddons}\n {!disabled && !readOnly && Arrow}\n {(disabled || readOnly) && <LockIcon colors={colors} size={size} />}\n </Fragment>\n );\n\n return (\n <div\n className={styles.component}\n ref={wrapperRef}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n >\n <FormControlMobile\n fieldClassName={cn(styles.field, fieldClassName, {\n [styles.disabled]: disabled,\n [styles.focusVisible]: focusVisible,\n })}\n block={true}\n size={size}\n focused={focused}\n disabled={disabled}\n filled={filled}\n labelView={labelView}\n dataTestId={getDataTestId(dataTestId, 'form-control')}\n // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус\n tabIndex={open ? undefined : tabIndex}\n {...restProps}\n {...restInnerProps}\n readOnly={readOnly}\n colors={colors}\n error={error}\n rightAddons={renderRightAddons()}\n >\n <div className={styles.contentWrapper}>\n {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}\n {filled && <div className={styles.value}>{value}</div>}\n </div>\n </FormControlMobile>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -15,29 +15,29 @@
|
|
|
15
15
|
--input-success-icon-display: flex;
|
|
16
16
|
--input-error-icon-not-alone-display: none;
|
|
17
17
|
}
|
|
18
|
-
.input-
|
|
18
|
+
.input-autocomplete__component_1s96h {
|
|
19
19
|
width: 100%;
|
|
20
20
|
outline: none;
|
|
21
21
|
}
|
|
22
|
-
.input-
|
|
22
|
+
.input-autocomplete__field_1s96h:not(.input-autocomplete__disabled_1s96h) {
|
|
23
23
|
cursor: pointer;
|
|
24
24
|
}
|
|
25
|
-
.input-
|
|
25
|
+
.input-autocomplete__errorIcon_1s96h {
|
|
26
26
|
display: var(--input-error-icon-display);
|
|
27
27
|
}
|
|
28
|
-
* + .input-
|
|
28
|
+
* + .input-autocomplete__errorIcon_1s96h {
|
|
29
29
|
display: var(--input-error-icon-not-alone-display);
|
|
30
30
|
}
|
|
31
|
-
.input-
|
|
31
|
+
.input-autocomplete__successIcon_1s96h {
|
|
32
32
|
display: var(--input-success-icon-display);
|
|
33
33
|
}
|
|
34
|
-
.input-
|
|
34
|
+
.input-autocomplete__disabled_1s96h {
|
|
35
35
|
cursor: var(--disabled-cursor);
|
|
36
36
|
}
|
|
37
|
-
.input-
|
|
37
|
+
.input-autocomplete__placeholder_1s96h {
|
|
38
38
|
color: var(--color-light-text-secondary);
|
|
39
39
|
}
|
|
40
|
-
.input-
|
|
40
|
+
.input-autocomplete__contentWrapper_1s96h {
|
|
41
41
|
font-size: 16px;
|
|
42
42
|
line-height: 20px;
|
|
43
43
|
font-weight: 400;
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
overflow: hidden;
|
|
49
49
|
width: 100%;
|
|
50
50
|
}
|
|
51
|
-
.input-
|
|
51
|
+
.input-autocomplete__value_1s96h {
|
|
52
52
|
overflow: hidden;
|
|
53
53
|
text-overflow: ellipsis;
|
|
54
54
|
text-align: left;
|
|
55
55
|
}
|
|
56
|
-
.input-
|
|
56
|
+
.input-autocomplete__focusVisible_1s96h {
|
|
57
57
|
outline: 2px solid var(--focus-color);
|
|
58
58
|
outline-offset: 2px;
|
|
59
59
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"input-
|
|
3
|
+
const styles = {"component":"input-autocomplete__component_1s96h","field":"input-autocomplete__field_1s96h","disabled":"input-autocomplete__disabled_1s96h","errorIcon":"input-autocomplete__errorIcon_1s96h","successIcon":"input-autocomplete__successIcon_1s96h","placeholder":"input-autocomplete__placeholder_1s96h","contentWrapper":"input-autocomplete__contentWrapper_1s96h","value":"input-autocomplete__value_1s96h","focusVisible":"input-autocomplete__focusVisible_1s96h"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/modern/mobile/mobile.css
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import React, { useRef, useCallback } from 'react';
|
|
1
|
+
import React, { useRef, useCallback, Fragment } from 'react';
|
|
2
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { InputDesktop } from '@alfalab/core-components-input/moderncssm/desktop';
|
|
5
|
-
import { getAddonsByPriority } from '@alfalab/core-components-input/moderncssm/helpers/get-addons-by-priority';
|
|
6
5
|
import { OnInputReason } from '../enums.js';
|
|
7
6
|
import styles from './index.module.css';
|
|
8
7
|
|
|
@@ -26,24 +25,15 @@ const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arro
|
|
|
26
25
|
* [1] - Indicators (eye, calendar, chevron, stepper e.g.)
|
|
27
26
|
* [0] - Lock
|
|
28
27
|
*/
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
priority: 1,
|
|
37
|
-
predicate: Boolean(Arrow) && !inputDisabled,
|
|
38
|
-
render: () => (React.createElement("span", { className: cn(styles.arrow, {
|
|
39
|
-
[styles.error]: error,
|
|
40
|
-
}) }, Arrow)),
|
|
41
|
-
},
|
|
42
|
-
]);
|
|
28
|
+
const renderRightAddons = () => (React.createElement(Fragment, null,
|
|
29
|
+
inputProps.rightAddons,
|
|
30
|
+
Arrow && !inputDisabled && (React.createElement("span", { className: cn(styles.arrow, {
|
|
31
|
+
[styles.error]: error,
|
|
32
|
+
}) }, Arrow))));
|
|
43
33
|
return (React.createElement(Input, { dataTestId: dataTestId, ...inputProps, ...innerProps, wrapperRef: mergeRefs([
|
|
44
34
|
innerProps.ref,
|
|
45
35
|
inputProps.wrapperRef,
|
|
46
|
-
]), ref: mergeRefs([inputRef, inputProps.ref]), disabled: disabled, readOnly: readOnly, block: true, label: label, labelView: labelView, placeholder: placeholder, size: size, error: error, success: success, hint: hint, onChange: handleInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons:
|
|
36
|
+
]), ref: mergeRefs([inputRef, inputProps.ref]), disabled: disabled, readOnly: readOnly, block: true, label: label, labelView: labelView, placeholder: placeholder, size: size, error: error, success: success, hint: hint, onChange: handleInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons: renderRightAddons() }));
|
|
47
37
|
};
|
|
48
38
|
|
|
49
39
|
export { AutocompleteField };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport {
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n label,\n labelView = 'inner',\n placeholder,\n size,\n Arrow,\n Input = DefaultInput,\n value,\n error,\n success,\n hint,\n disabled,\n readOnly,\n onInput,\n inputProps = {},\n innerProps,\n dataTestId,\n}: AutocompleteFieldProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { onClick, onFocus } = innerProps;\n\n const inputDisabled = disabled || readOnly;\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onClick) onClick(event);\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n },\n [onClick],\n );\n\n const handleInput: InputProps['onChange'] = (_, payload) =>\n onInput?.(payload.value, OnInputReason.Change);\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {inputProps.rightAddons}\n {Arrow && !inputDisabled && (\n <span\n className={cn(styles.arrow, {\n [styles.error]: error,\n })}\n >\n {Arrow}\n </span>\n )}\n </Fragment>\n );\n\n return (\n <Input\n dataTestId={dataTestId}\n {...inputProps}\n {...innerProps}\n wrapperRef={mergeRefs([\n innerProps.ref as React.Ref<HTMLElement>,\n inputProps.wrapperRef as React.Ref<HTMLElement>,\n ])}\n ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n disabled={disabled}\n readOnly={readOnly}\n block={true}\n label={label}\n labelView={labelView}\n placeholder={placeholder}\n size={size}\n error={error}\n success={success}\n hint={hint}\n onChange={handleInput}\n onClick={inputDisabled ? undefined : handleClick}\n onFocus={inputDisabled ? undefined : onFocus}\n autoComplete='off'\n value={value}\n rightAddons={renderRightAddons()}\n />\n );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;MAgBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;QAE3B,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;AAC3B;AACL,KAAC,EACD,CAAC,OAAO,CAAC,CACZ;IAED,MAAM,WAAW,GAA2B,CAAC,CAAC,EAAE,OAAO,KACnD,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAElD;;;;;;;AAOG;AACH,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,UAAU,CAAC,WAAW;AACtB,QAAA,KAAK,IAAI,CAAC,aAAa,KACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,gBAAA,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK;AACxB,aAAA,CAAC,IAED,KAAK,CACH,CACV,CACM,CACd;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,KACV,UAAU,EACd,UAAU,EAAE,SAAS,CAAC;AAClB,YAAA,UAAU,CAAC,GAA6B;AACxC,YAAA,UAAU,CAAC,UAAoC;SAClD,CAAC,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,GAA6B,CAAC,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,WAAW,EAChD,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,EAC5C,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAAE,EAClC,CAAA;AAEV;;;;"}
|