phx-react 1.3.564 → 1.3.565
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/dist/cjs/components/Combobox/Combobox.d.ts +12 -10
- package/dist/cjs/components/Combobox/Combobox.js +112 -68
- package/dist/cjs/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.d.ts +12 -10
- package/dist/esm/components/Combobox/Combobox.js +112 -68
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
type TSelectItem = Array<{
|
|
3
|
+
id: number;
|
|
4
|
+
name: string;
|
|
5
|
+
}>;
|
|
2
6
|
export interface ComboboxProps {
|
|
3
7
|
className?: string;
|
|
4
8
|
label?: string;
|
|
5
9
|
id?: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
id: number;
|
|
9
|
-
name: string;
|
|
10
|
-
}>;
|
|
11
|
-
defaultValue?: Array<{
|
|
12
|
-
id: number;
|
|
13
|
-
name: string;
|
|
14
|
-
}>;
|
|
10
|
+
listOptions: TSelectItem;
|
|
11
|
+
defaultValue?: TSelectItem;
|
|
15
12
|
placeholder?: string;
|
|
16
13
|
onChange?: any;
|
|
17
14
|
error?: boolean;
|
|
15
|
+
selectFieldPosition?: 'top' | 'bottom';
|
|
16
|
+
selectAllBtn?: boolean;
|
|
17
|
+
optionHeight?: number;
|
|
18
|
+
disabled?: boolean;
|
|
18
19
|
}
|
|
19
|
-
export declare const PHXCombobox: ({
|
|
20
|
+
export declare const PHXCombobox: ({ className, defaultValue, disabled, error, id, label, listOptions, onChange, optionHeight, placeholder, selectAllBtn, selectFieldPosition, }: ComboboxProps) => React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -2,98 +2,142 @@
|
|
|
2
2
|
exports.__esModule = true;
|
|
3
3
|
exports.PHXCombobox = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
|
+
var solid_1 = require("@heroicons/react/24/solid");
|
|
5
6
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
7
|
var Checkbox_1 = require("../Checkbox");
|
|
7
|
-
var react_hook_form_1 = require("react-hook-form");
|
|
8
|
-
var solid_1 = require("@heroicons/react/24/solid");
|
|
9
8
|
var PHXCombobox = function (_a) {
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
9
|
+
var className = _a.className, defaultValue = _a.defaultValue, _b = _a.disabled, disabled = _b === void 0 ? false : _b, error = _a.error, id = _a.id, label = _a.label, listOptions = _a.listOptions, onChange = _a.onChange, _c = _a.optionHeight, optionHeight = _c === void 0 ? 300 : _c, placeholder = _a.placeholder, _d = _a.selectAllBtn, selectAllBtn = _d === void 0 ? false : _d, _e = _a.selectFieldPosition, selectFieldPosition = _e === void 0 ? 'bottom' : _e;
|
|
10
|
+
var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
11
|
+
var _g = (0, react_1.useState)(defaultValue || []), selectedItems = _g[0], setSelectedItems = _g[1];
|
|
12
|
+
var _h = (0, react_1.useState)(listOptions || []), options = _h[0], setOptions = _h[1];
|
|
13
|
+
var _j = (0, react_1.useState)(false), checkedAll = _j[0], setCheckedAll = _j[1];
|
|
14
|
+
var _k = (0, react_1.useState)(selectAllBtn), showSelectAllBtn = _k[0], setShowSelectAllBtn = _k[1];
|
|
14
15
|
var wrapperRef = (0, react_1.useRef)(null);
|
|
15
|
-
var
|
|
16
|
-
(0, react_1.useEffect)(function () {
|
|
16
|
+
var handleChange = function (data) {
|
|
17
17
|
if (onChange) {
|
|
18
|
-
onChange(
|
|
18
|
+
onChange(data);
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
}, [selectedItems]);
|
|
22
|
-
// ẩn hiện khi focus vào input
|
|
23
|
-
(0, react_1.useEffect)(function () {
|
|
24
|
-
var handleClickOutside = function (event) {
|
|
25
|
-
var _a;
|
|
26
|
-
// @ts-ignore
|
|
27
|
-
if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
28
|
-
setIsFocused(false);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
32
|
-
return function () {
|
|
33
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
34
|
-
};
|
|
35
|
-
}, [wrapperRef]);
|
|
20
|
+
};
|
|
36
21
|
var handleItemClick = function (item) {
|
|
37
22
|
var isSelected = selectedItems.some(function (selectedItem) { return selectedItem.id === item.id; });
|
|
38
23
|
if (isSelected) {
|
|
39
|
-
|
|
24
|
+
var newSelectedItem = selectedItems.filter(function (selectedItem) { return selectedItem.id !== item.id; });
|
|
25
|
+
if (selectAllBtn && newSelectedItem.length === options.length) {
|
|
26
|
+
setCheckedAll(true);
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
setCheckedAll(false);
|
|
30
|
+
}
|
|
31
|
+
setSelectedItems(newSelectedItem);
|
|
32
|
+
handleChange(newSelectedItem);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
handleChange(tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedItems, true), [item], false));
|
|
36
|
+
if (selectAllBtn && tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedItems, true), [item], false).length === options.length) {
|
|
37
|
+
setCheckedAll(true);
|
|
40
38
|
}
|
|
41
39
|
else {
|
|
42
|
-
|
|
40
|
+
setCheckedAll(false);
|
|
43
41
|
}
|
|
44
|
-
|
|
42
|
+
setSelectedItems(tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedItems, true), [item], false));
|
|
45
43
|
};
|
|
46
44
|
var handleRemoveItem = function (item) {
|
|
47
45
|
var newSelectedItems = selectedItems.filter(function (selectedItem) { return selectedItem.id !== item.id; });
|
|
46
|
+
if (selectAllBtn) {
|
|
47
|
+
setCheckedAll(false);
|
|
48
|
+
}
|
|
48
49
|
setSelectedItems(newSelectedItems);
|
|
50
|
+
handleChange(newSelectedItems);
|
|
49
51
|
};
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
// tính toán chiều cao của input để chứa các item được chọn
|
|
53
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
54
|
-
(0, react_1.useEffect)(function () {
|
|
55
|
-
// @ts-ignore
|
|
56
|
-
setHeight(heightRef.current.clientHeight);
|
|
57
|
-
});
|
|
58
|
-
var inputValueWatch = watch('main') || '';
|
|
59
|
-
(0, react_1.useEffect)(function () {
|
|
60
|
-
if (inputValueWatch === '') {
|
|
52
|
+
var handleChangeInput = function (value) {
|
|
53
|
+
if (value === '') {
|
|
61
54
|
setOptions(listOptions);
|
|
55
|
+
if (selectAllBtn && !showSelectAllBtn) {
|
|
56
|
+
setShowSelectAllBtn(true);
|
|
57
|
+
}
|
|
62
58
|
}
|
|
63
59
|
else {
|
|
64
60
|
var filteredOptions = listOptions.filter(function (option) {
|
|
65
|
-
return option.name.toLowerCase().includes(
|
|
61
|
+
return option.name.toLowerCase().includes(value.toLowerCase());
|
|
66
62
|
});
|
|
63
|
+
if (selectAllBtn && showSelectAllBtn) {
|
|
64
|
+
setShowSelectAllBtn(false);
|
|
65
|
+
}
|
|
67
66
|
setOptions(filteredOptions);
|
|
68
67
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
68
|
+
};
|
|
69
|
+
var handleCheckAll = function () {
|
|
70
|
+
if (!checkedAll) {
|
|
71
|
+
setSelectedItems(options);
|
|
72
|
+
handleChange(options);
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
setSelectedItems([]);
|
|
76
|
+
handleChange([]);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
(0, react_1.useEffect)(function () {
|
|
80
|
+
var handleClickOutside = function (event) {
|
|
81
|
+
var _a;
|
|
82
|
+
if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
83
|
+
setIsFocused(false);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
87
|
+
return function () {
|
|
88
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
89
|
+
};
|
|
90
|
+
}, [wrapperRef]);
|
|
91
|
+
(0, react_1.useEffect)(function () {
|
|
92
|
+
setOptions(listOptions);
|
|
93
|
+
if ((listOptions === null || listOptions === void 0 ? void 0 : listOptions.length) === (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && selectAllBtn) {
|
|
94
|
+
setCheckedAll(true);
|
|
95
|
+
}
|
|
96
|
+
else {
|
|
97
|
+
setCheckedAll(false);
|
|
98
|
+
}
|
|
99
|
+
}, [listOptions]);
|
|
100
|
+
(0, react_1.useEffect)(function () {
|
|
101
|
+
if (defaultValue) {
|
|
102
|
+
setSelectedItems(defaultValue);
|
|
103
|
+
}
|
|
104
|
+
}, [defaultValue]);
|
|
105
|
+
return (react_1["default"].createElement("div", { className: className, id: id },
|
|
106
|
+
label && react_1["default"].createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
|
|
107
|
+
react_1["default"].createElement("div", { ref: wrapperRef, className: 'relative w-full bg-gray-100' },
|
|
108
|
+
react_1["default"].createElement("div", { className: "".concat(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', " \n ").concat(disabled ? 'bg-[#f9fafb]' : 'bg-white', "\n block w-full space-y-1 rounded-lg border border-gray-500 text-sm shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent ") },
|
|
109
|
+
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && !checkedAll && (react_1["default"].createElement("div", { className: ' ml-2 mt-2 flex flex-wrap items-center gap-2 ' }, selectedItems.map(function (item) { return (react_1["default"].createElement("div", { key: item.id + 'p', className: 'flex items-center whitespace-nowrap rounded-xl bg-gray-200' },
|
|
110
|
+
react_1["default"].createElement("p", { className: 'pl-2 pr-[2px] text-xs text-gray-700' }, item.name),
|
|
111
|
+
react_1["default"].createElement("button", { className: 'rounded-xl p-[3px] hover:cursor-pointer hover:bg-gray-300', onClick: function () { return handleRemoveItem(item); }, type: 'button' },
|
|
112
|
+
react_1["default"].createElement(solid_1.XMarkIcon, { className: 'h-4 w-4' })))); }))),
|
|
113
|
+
react_1["default"].createElement("input", { className: ' w-full rounded-lg border-none border-transparent text-xs outline-none focus:border-none focus:border-transparent focus:ring-0', disabled: disabled, id: 'main', onChange: function (e) { return handleChangeInput(e.target.value); }, onFocus: function () { return setIsFocused(true); }, placeholder: selectedItems.length === options.length && selectedItems.length > 0 ? 'Tất cả' : placeholder })),
|
|
114
|
+
options.length > 0 ? (react_1["default"].createElement("div", {
|
|
115
|
+
// eslint-disable-next-line prettier/prettier
|
|
116
|
+
className: "absolute z-50 mt-2 w-full overflow-y-auto rounded-lg bg-white p-2 shadow-xl ".concat(!isFocused ? 'hidden' : ''), style: tslib_1.__assign({ height: optionHeight }, (selectFieldPosition === 'top' && {
|
|
117
|
+
top: -optionHeight - 10
|
|
118
|
+
})) },
|
|
119
|
+
showSelectAllBtn && (react_1["default"].createElement("div", { key: 'selectAllCheckBox', className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
|
|
120
|
+
react_1["default"].createElement(Checkbox_1.PHXCheckbox, { checked: checkedAll, className: 'mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200', id: "checkbox_".concat(Math.floor(Math.random() * 1000000) + 1), onClick: function () {
|
|
121
|
+
setCheckedAll(!checkedAll);
|
|
122
|
+
handleCheckAll();
|
|
123
|
+
}, title: 'T\u1EA5t c\u1EA3' }),
|
|
124
|
+
react_1["default"].createElement("button", { className: 'absolute inset-0 cursor-pointer', onClick: function () {
|
|
125
|
+
setCheckedAll(!checkedAll);
|
|
126
|
+
handleCheckAll();
|
|
127
|
+
}, type: 'button' }))), options === null || options === void 0 ? void 0 :
|
|
128
|
+
options.map(function (item) {
|
|
129
|
+
var randomNum = Math.floor(Math.random() * 1000000) + 1;
|
|
130
|
+
return (react_1["default"].createElement("div", { key: item.id, className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
|
|
131
|
+
react_1["default"].createElement(Checkbox_1.PHXCheckbox, { checked: selectedItems.some(function (selectedItem) { return selectedItem.id === item.id; }), className: 'mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200', id: "checkbox_".concat(randomNum), onClick: function () { return handleItemClick(item); }, title: item.name }),
|
|
132
|
+
react_1["default"].createElement("button", { className: 'absolute inset-0 cursor-pointer', onClick: function () { return handleItemClick(item); }, type: 'button' })));
|
|
133
|
+
}))) : (react_1["default"].createElement("div", {
|
|
134
|
+
// eslint-disable-next-line prettier/prettier
|
|
135
|
+
className: "absolute z-50 mt-2 w-full overflow-y-auto rounded-lg bg-white p-2 shadow-xl ".concat(!isFocused ? 'hidden' : ''), style: tslib_1.__assign({}, (selectFieldPosition === 'top' && { top: -90 })) },
|
|
136
|
+
react_1["default"].createElement("div", { className: 'mt-3 h-[50px] text-center' },
|
|
137
|
+
react_1["default"].createElement("div", null,
|
|
138
|
+
react_1["default"].createElement("svg", { className: 'mx-auto h-4 w-4 text-gray-700', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
139
|
+
react_1["default"].createElement("path", { d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })),
|
|
140
|
+
react_1["default"].createElement("h3", { className: 'mt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))));
|
|
97
141
|
};
|
|
98
142
|
exports.PHXCombobox = PHXCombobox;
|
|
99
143
|
//# sourceMappingURL=Combobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";;;;AAAA,qDAA0D;AAC1D,wCAAyC;
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
type TSelectItem = Array<{
|
|
3
|
+
id: number;
|
|
4
|
+
name: string;
|
|
5
|
+
}>;
|
|
2
6
|
export interface ComboboxProps {
|
|
3
7
|
className?: string;
|
|
4
8
|
label?: string;
|
|
5
9
|
id?: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
id: number;
|
|
9
|
-
name: string;
|
|
10
|
-
}>;
|
|
11
|
-
defaultValue?: Array<{
|
|
12
|
-
id: number;
|
|
13
|
-
name: string;
|
|
14
|
-
}>;
|
|
10
|
+
listOptions: TSelectItem;
|
|
11
|
+
defaultValue?: TSelectItem;
|
|
15
12
|
placeholder?: string;
|
|
16
13
|
onChange?: any;
|
|
17
14
|
error?: boolean;
|
|
15
|
+
selectFieldPosition?: 'top' | 'bottom';
|
|
16
|
+
selectAllBtn?: boolean;
|
|
17
|
+
optionHeight?: number;
|
|
18
|
+
disabled?: boolean;
|
|
18
19
|
}
|
|
19
|
-
export declare const PHXCombobox: ({
|
|
20
|
+
export declare const PHXCombobox: ({ className, defaultValue, disabled, error, id, label, listOptions, onChange, optionHeight, placeholder, selectAllBtn, selectFieldPosition, }: ComboboxProps) => React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -1,95 +1,139 @@
|
|
|
1
1
|
import { __assign, __spreadArray } from "tslib";
|
|
2
|
+
import { XMarkIcon } from '@heroicons/react/24/solid';
|
|
2
3
|
import React, { useEffect, useRef, useState } from 'react';
|
|
3
4
|
import { PHXCheckbox } from '../Checkbox';
|
|
4
|
-
import { useForm } from 'react-hook-form';
|
|
5
|
-
import { XMarkIcon } from '@heroicons/react/24/solid';
|
|
6
5
|
export var PHXCombobox = function (_a) {
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
6
|
+
var className = _a.className, defaultValue = _a.defaultValue, _b = _a.disabled, disabled = _b === void 0 ? false : _b, error = _a.error, id = _a.id, label = _a.label, listOptions = _a.listOptions, onChange = _a.onChange, _c = _a.optionHeight, optionHeight = _c === void 0 ? 300 : _c, placeholder = _a.placeholder, _d = _a.selectAllBtn, selectAllBtn = _d === void 0 ? false : _d, _e = _a.selectFieldPosition, selectFieldPosition = _e === void 0 ? 'bottom' : _e;
|
|
7
|
+
var _f = useState(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
8
|
+
var _g = useState(defaultValue || []), selectedItems = _g[0], setSelectedItems = _g[1];
|
|
9
|
+
var _h = useState(listOptions || []), options = _h[0], setOptions = _h[1];
|
|
10
|
+
var _j = useState(false), checkedAll = _j[0], setCheckedAll = _j[1];
|
|
11
|
+
var _k = useState(selectAllBtn), showSelectAllBtn = _k[0], setShowSelectAllBtn = _k[1];
|
|
11
12
|
var wrapperRef = useRef(null);
|
|
12
|
-
var
|
|
13
|
-
useEffect(function () {
|
|
13
|
+
var handleChange = function (data) {
|
|
14
14
|
if (onChange) {
|
|
15
|
-
onChange(
|
|
15
|
+
onChange(data);
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
}, [selectedItems]);
|
|
19
|
-
// ẩn hiện khi focus vào input
|
|
20
|
-
useEffect(function () {
|
|
21
|
-
var handleClickOutside = function (event) {
|
|
22
|
-
var _a;
|
|
23
|
-
// @ts-ignore
|
|
24
|
-
if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
25
|
-
setIsFocused(false);
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
29
|
-
return function () {
|
|
30
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
31
|
-
};
|
|
32
|
-
}, [wrapperRef]);
|
|
17
|
+
};
|
|
33
18
|
var handleItemClick = function (item) {
|
|
34
19
|
var isSelected = selectedItems.some(function (selectedItem) { return selectedItem.id === item.id; });
|
|
35
20
|
if (isSelected) {
|
|
36
|
-
|
|
21
|
+
var newSelectedItem = selectedItems.filter(function (selectedItem) { return selectedItem.id !== item.id; });
|
|
22
|
+
if (selectAllBtn && newSelectedItem.length === options.length) {
|
|
23
|
+
setCheckedAll(true);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
setCheckedAll(false);
|
|
27
|
+
}
|
|
28
|
+
setSelectedItems(newSelectedItem);
|
|
29
|
+
handleChange(newSelectedItem);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
handleChange(__spreadArray(__spreadArray([], selectedItems, true), [item], false));
|
|
33
|
+
if (selectAllBtn && __spreadArray(__spreadArray([], selectedItems, true), [item], false).length === options.length) {
|
|
34
|
+
setCheckedAll(true);
|
|
37
35
|
}
|
|
38
36
|
else {
|
|
39
|
-
|
|
37
|
+
setCheckedAll(false);
|
|
40
38
|
}
|
|
41
|
-
|
|
39
|
+
setSelectedItems(__spreadArray(__spreadArray([], selectedItems, true), [item], false));
|
|
42
40
|
};
|
|
43
41
|
var handleRemoveItem = function (item) {
|
|
44
42
|
var newSelectedItems = selectedItems.filter(function (selectedItem) { return selectedItem.id !== item.id; });
|
|
43
|
+
if (selectAllBtn) {
|
|
44
|
+
setCheckedAll(false);
|
|
45
|
+
}
|
|
45
46
|
setSelectedItems(newSelectedItems);
|
|
47
|
+
handleChange(newSelectedItems);
|
|
46
48
|
};
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
// tính toán chiều cao của input để chứa các item được chọn
|
|
50
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
-
useEffect(function () {
|
|
52
|
-
// @ts-ignore
|
|
53
|
-
setHeight(heightRef.current.clientHeight);
|
|
54
|
-
});
|
|
55
|
-
var inputValueWatch = watch('main') || '';
|
|
56
|
-
useEffect(function () {
|
|
57
|
-
if (inputValueWatch === '') {
|
|
49
|
+
var handleChangeInput = function (value) {
|
|
50
|
+
if (value === '') {
|
|
58
51
|
setOptions(listOptions);
|
|
52
|
+
if (selectAllBtn && !showSelectAllBtn) {
|
|
53
|
+
setShowSelectAllBtn(true);
|
|
54
|
+
}
|
|
59
55
|
}
|
|
60
56
|
else {
|
|
61
57
|
var filteredOptions = listOptions.filter(function (option) {
|
|
62
|
-
return option.name.toLowerCase().includes(
|
|
58
|
+
return option.name.toLowerCase().includes(value.toLowerCase());
|
|
63
59
|
});
|
|
60
|
+
if (selectAllBtn && showSelectAllBtn) {
|
|
61
|
+
setShowSelectAllBtn(false);
|
|
62
|
+
}
|
|
64
63
|
setOptions(filteredOptions);
|
|
65
64
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
65
|
+
};
|
|
66
|
+
var handleCheckAll = function () {
|
|
67
|
+
if (!checkedAll) {
|
|
68
|
+
setSelectedItems(options);
|
|
69
|
+
handleChange(options);
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
setSelectedItems([]);
|
|
73
|
+
handleChange([]);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
useEffect(function () {
|
|
77
|
+
var handleClickOutside = function (event) {
|
|
78
|
+
var _a;
|
|
79
|
+
if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
80
|
+
setIsFocused(false);
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
84
|
+
return function () {
|
|
85
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
86
|
+
};
|
|
87
|
+
}, [wrapperRef]);
|
|
88
|
+
useEffect(function () {
|
|
89
|
+
setOptions(listOptions);
|
|
90
|
+
if ((listOptions === null || listOptions === void 0 ? void 0 : listOptions.length) === (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && selectAllBtn) {
|
|
91
|
+
setCheckedAll(true);
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
setCheckedAll(false);
|
|
95
|
+
}
|
|
96
|
+
}, [listOptions]);
|
|
97
|
+
useEffect(function () {
|
|
98
|
+
if (defaultValue) {
|
|
99
|
+
setSelectedItems(defaultValue);
|
|
100
|
+
}
|
|
101
|
+
}, [defaultValue]);
|
|
102
|
+
return (React.createElement("div", { className: className, id: id },
|
|
103
|
+
label && React.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
|
|
104
|
+
React.createElement("div", { ref: wrapperRef, className: 'relative w-full bg-gray-100' },
|
|
105
|
+
React.createElement("div", { className: "".concat(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', " \n ").concat(disabled ? 'bg-[#f9fafb]' : 'bg-white', "\n block w-full space-y-1 rounded-lg border border-gray-500 text-sm shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent ") },
|
|
106
|
+
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && !checkedAll && (React.createElement("div", { className: ' ml-2 mt-2 flex flex-wrap items-center gap-2 ' }, selectedItems.map(function (item) { return (React.createElement("div", { key: item.id + 'p', className: 'flex items-center whitespace-nowrap rounded-xl bg-gray-200' },
|
|
107
|
+
React.createElement("p", { className: 'pl-2 pr-[2px] text-xs text-gray-700' }, item.name),
|
|
108
|
+
React.createElement("button", { className: 'rounded-xl p-[3px] hover:cursor-pointer hover:bg-gray-300', onClick: function () { return handleRemoveItem(item); }, type: 'button' },
|
|
109
|
+
React.createElement(XMarkIcon, { className: 'h-4 w-4' })))); }))),
|
|
110
|
+
React.createElement("input", { className: ' w-full rounded-lg border-none border-transparent text-xs outline-none focus:border-none focus:border-transparent focus:ring-0', disabled: disabled, id: 'main', onChange: function (e) { return handleChangeInput(e.target.value); }, onFocus: function () { return setIsFocused(true); }, placeholder: selectedItems.length === options.length && selectedItems.length > 0 ? 'Tất cả' : placeholder })),
|
|
111
|
+
options.length > 0 ? (React.createElement("div", {
|
|
112
|
+
// eslint-disable-next-line prettier/prettier
|
|
113
|
+
className: "absolute z-50 mt-2 w-full overflow-y-auto rounded-lg bg-white p-2 shadow-xl ".concat(!isFocused ? 'hidden' : ''), style: __assign({ height: optionHeight }, (selectFieldPosition === 'top' && {
|
|
114
|
+
top: -optionHeight - 10
|
|
115
|
+
})) },
|
|
116
|
+
showSelectAllBtn && (React.createElement("div", { key: 'selectAllCheckBox', className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
|
|
117
|
+
React.createElement(PHXCheckbox, { checked: checkedAll, className: 'mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200', id: "checkbox_".concat(Math.floor(Math.random() * 1000000) + 1), onClick: function () {
|
|
118
|
+
setCheckedAll(!checkedAll);
|
|
119
|
+
handleCheckAll();
|
|
120
|
+
}, title: 'T\u1EA5t c\u1EA3' }),
|
|
121
|
+
React.createElement("button", { className: 'absolute inset-0 cursor-pointer', onClick: function () {
|
|
122
|
+
setCheckedAll(!checkedAll);
|
|
123
|
+
handleCheckAll();
|
|
124
|
+
}, type: 'button' }))), options === null || options === void 0 ? void 0 :
|
|
125
|
+
options.map(function (item) {
|
|
126
|
+
var randomNum = Math.floor(Math.random() * 1000000) + 1;
|
|
127
|
+
return (React.createElement("div", { key: item.id, className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
|
|
128
|
+
React.createElement(PHXCheckbox, { checked: selectedItems.some(function (selectedItem) { return selectedItem.id === item.id; }), className: 'mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200', id: "checkbox_".concat(randomNum), onClick: function () { return handleItemClick(item); }, title: item.name }),
|
|
129
|
+
React.createElement("button", { className: 'absolute inset-0 cursor-pointer', onClick: function () { return handleItemClick(item); }, type: 'button' })));
|
|
130
|
+
}))) : (React.createElement("div", {
|
|
131
|
+
// eslint-disable-next-line prettier/prettier
|
|
132
|
+
className: "absolute z-50 mt-2 w-full overflow-y-auto rounded-lg bg-white p-2 shadow-xl ".concat(!isFocused ? 'hidden' : ''), style: __assign({}, (selectFieldPosition === 'top' && { top: -90 })) },
|
|
133
|
+
React.createElement("div", { className: 'mt-3 h-[50px] text-center' },
|
|
134
|
+
React.createElement("div", null,
|
|
135
|
+
React.createElement("svg", { className: 'mx-auto h-4 w-4 text-gray-700', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
136
|
+
React.createElement("path", { d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })),
|
|
137
|
+
React.createElement("h3", { className: 'mt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))));
|
|
94
138
|
};
|
|
95
139
|
//# sourceMappingURL=Combobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAkBzC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAaZ;QAZd,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,EAAE,QAAA,EACF,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,oBAAkB,EAAlB,YAAY,mBAAG,GAAG,KAAA,EAClB,WAAW,iBAAA,EACX,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,2BAA8B,EAA9B,mBAAmB,mBAAG,QAAQ,KAAA;IAExB,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAA;IAC3C,IAAA,KAAoC,QAAQ,CAAc,YAAY,IAAI,EAAE,CAAC,EAA5E,aAAa,QAAA,EAAE,gBAAgB,QAA6C,CAAA;IAC7E,IAAA,KAAwB,QAAQ,CAAM,WAAW,IAAI,EAAE,CAAC,EAAvD,OAAO,QAAA,EAAE,UAAU,QAAoC,CAAA;IACxD,IAAA,KAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAA;IAE7C,IAAA,KAA0C,QAAQ,CAAC,YAAY,CAAC,EAA/D,gBAAgB,QAAA,EAAE,mBAAmB,QAA0B,CAAA;IAEtE,IAAM,UAAU,GAAG,MAAM,CAAM,IAAI,CAAC,CAAA;IAEpC,IAAM,YAAY,GAAG,UAAC,IAAS;QAC7B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,IAAI,CAAC,CAAA;SACf;IACH,CAAC,CAAA;IAED,IAAM,eAAe,GAAG,UAAC,IAAS;QAChC,IAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,UAAC,YAAiB,IAAK,OAAA,YAAY,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAA3B,CAA2B,CAAC,CAAA;QAEzF,IAAI,UAAU,EAAE;YACd,IAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,UAAC,YAAiB,IAAK,OAAA,YAAY,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAA3B,CAA2B,CAAC,CAAA;YAEhG,IAAI,YAAY,IAAI,eAAe,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;gBAC7D,aAAa,CAAC,IAAI,CAAC,CAAA;aACpB;iBAAM;gBACL,aAAa,CAAC,KAAK,CAAC,CAAA;aACrB;YACD,gBAAgB,CAAC,eAAe,CAAC,CAAA;YAEjC,YAAY,CAAC,eAAe,CAAC,CAAA;YAE7B,OAAM;SACP;QAED,YAAY,iCAAK,aAAa,UAAE,IAAI,UAAE,CAAA;QACtC,IAAI,YAAY,IAAI,gCAAI,aAAa,UAAE,IAAI,UAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;YACtE,aAAa,CAAC,IAAI,CAAC,CAAA;SACpB;aAAM;YACL,aAAa,CAAC,KAAK,CAAC,CAAA;SACrB;QACD,gBAAgB,iCAAK,aAAa,UAAE,IAAI,UAAE,CAAA;IAC5C,CAAC,CAAA;IAED,IAAM,gBAAgB,GAAG,UAAC,IAAS;QACjC,IAAM,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,UAAC,YAAiB,IAAK,OAAA,YAAY,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAA3B,CAA2B,CAAC,CAAA;QAEjG,IAAI,YAAY,EAAE;YAChB,aAAa,CAAC,KAAK,CAAC,CAAA;SACrB;QACD,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;QAClC,YAAY,CAAC,gBAAgB,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,IAAM,iBAAiB,GAAG,UAAC,KAAa;QACtC,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,UAAU,CAAC,WAAW,CAAC,CAAA;YACvB,IAAI,YAAY,IAAI,CAAC,gBAAgB,EAAE;gBACrC,mBAAmB,CAAC,IAAI,CAAC,CAAA;aAC1B;SACF;aAAM;YACL,IAAM,eAAe,GAAG,WAAW,CAAC,MAAM,CAAC,UAAC,MAAW;gBACrD,OAAA,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YAAvD,CAAuD,CACxD,CAAA;YACD,IAAI,YAAY,IAAI,gBAAgB,EAAE;gBACpC,mBAAmB,CAAC,KAAK,CAAC,CAAA;aAC3B;YACD,UAAU,CAAC,eAAe,CAAC,CAAA;SAC5B;IACH,CAAC,CAAA;IAED,IAAM,cAAc,GAAG;QACrB,IAAI,CAAC,UAAU,EAAE;YACf,gBAAgB,CAAC,OAAO,CAAC,CAAA;YACzB,YAAY,CAAC,OAAO,CAAC,CAAA;SACtB;aAAM;YACL,gBAAgB,CAAC,EAAE,CAAC,CAAA;YACpB,YAAY,CAAC,EAAE,CAAC,CAAA;SACjB;IACH,CAAC,CAAA;IAED,SAAS,CAAC;QACR,IAAM,kBAAkB,GAAG,UAAC,KAAU;;YACpC,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA,EAAE;gBACrE,YAAY,CAAC,KAAK,CAAC,CAAA;aACpB;QACH,CAAC,CAAA;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC1D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC/D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,SAAS,CAAC;QACR,UAAU,CAAC,WAAW,CAAC,CAAA;QACvB,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,OAAK,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,CAAA,IAAI,YAAY,EAAE;YACjE,aAAa,CAAC,IAAI,CAAC,CAAA;SACpB;aAAM;YACL,aAAa,CAAC,KAAK,CAAC,CAAA;SACrB;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,SAAS,CAAC;QACR,IAAI,YAAY,EAAE;YAChB,gBAAgB,CAAC,YAAY,CAAC,CAAA;SAC/B;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE;QAC9B,KAAK,IAAI,+BAAO,SAAS,EAAC,8CAA8C,IAAE,KAAK,CAAS;QACzF,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,6BAA6B;YAC3D,6BACE,SAAS,EAAE,UAAG,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,0BACxG,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,gPACwL;gBAE/N,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,IAAG,CAAC,IAAI,CAAC,UAAU,IAAI,CAC3C,6BAAK,SAAS,EAAC,+CAA+C,IAC3D,aAAa,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CAChC,6BAAK,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,EAAE,SAAS,EAAC,4DAA4D;oBAC7F,2BAAG,SAAS,EAAC,qCAAqC,IAAE,IAAI,CAAC,IAAI,CAAK;oBAClE,gCACE,SAAS,EAAC,2DAA2D,EACrE,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,IAAI,CAAC,EAAtB,CAAsB,EACrC,IAAI,EAAC,QAAQ;wBAEb,oBAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,CAC1B,CACL,CACP,EAXiC,CAWjC,CAAC,CACE,CACP;gBAED,+BACE,SAAS,EAAC,gIAAgI,EAC1I,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAC,MAAM,EACT,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAjC,CAAiC,EAClD,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,EACjC,WAAW,EAAE,aAAa,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,GACzG,CACE;YAEL,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACpB;gBACE,6CAA6C;gBAC7C,SAAS,EAAE,wFACT,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAC1B,EACF,KAAK,aACH,MAAM,EAAE,YAAY,IACjB,CAAC,mBAAmB,KAAK,KAAK,IAAI;oBACnC,GAAG,EAAE,CAAC,YAAY,GAAG,EAAE;iBACxB,CAAC;gBAGH,gBAAgB,IAAI,CACnB,6BAAK,GAAG,EAAC,mBAAmB,EAAC,SAAS,EAAC,4DAA4D;oBACjG,oBAAC,WAAW,IACV,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,qDAAqD,EAC/D,EAAE,EAAE,mBAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,CAAE,EACzD,OAAO,EAAE;4BACP,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;4BAC1B,cAAc,EAAE,CAAA;wBAClB,CAAC,EACD,KAAK,EAAC,kBAAQ,GACd;oBACF,gCACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE;4BACP,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;4BAC1B,cAAc,EAAE,CAAA;wBAClB,CAAC,EACD,IAAI,EAAC,QAAQ,GACb,CACE,CACP,EACA,OAAO,aAAP,OAAO;gBAAP,OAAO,CAAE,GAAG,CAAC,UAAC,IAAS;oBACtB,IAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;oBACzD,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAC,4DAA4D;wBACvF,oBAAC,WAAW,IACV,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,UAAC,YAAiB,IAAK,OAAA,YAAY,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAA3B,CAA2B,CAAC,EAC/E,SAAS,EAAC,qDAAqD,EAC/D,EAAE,EAAE,mBAAY,SAAS,CAAE,EAC3B,OAAO,EAAE,cAAM,OAAA,eAAe,CAAC,IAAI,CAAC,EAArB,CAAqB,EACpC,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB;wBACF,gCACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,cAAM,OAAA,eAAe,CAAC,IAAI,CAAC,EAArB,CAAqB,EACpC,IAAI,EAAC,QAAQ,GACb,CACE,CACP,CAAA;gBACH,CAAC,CAAC,CACE,CACP,CAAC,CAAC,CAAC,CACF;gBACE,6CAA6C;gBAC7C,SAAS,EAAE,wFACT,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAC1B,EACF,KAAK,eACA,CAAC,mBAAmB,KAAK,KAAK,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;gBAGpD,6BAAK,SAAS,EAAC,2BAA2B;oBACxC;wBACE,6BACE,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;4BAElC,8BACE,CAAC,EAAC,6CAA6C,EAC/C,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACf,CACE;wBACN,4BAAI,SAAS,EAAC,gCAAgC,2CAAsB,CAChE,CACF,CACF,CACP,CACG,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
|