@royaltics/ui 1.5.14 → 1.5.16
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/forms/SelectSearch.d.ts +14 -0
- package/dist/forms/SelectSearch.d.ts.map +1 -0
- package/dist/forms/SelectSearch.js +112 -0
- package/dist/forms/SelectSearch.js.map +1 -0
- package/dist/forms/SelectSearch.stories.d.ts +18 -0
- package/dist/forms/SelectSearch.stories.d.ts.map +1 -0
- package/dist/forms/SelectSearch.stories.js +46 -0
- package/dist/forms/SelectSearch.stories.js.map +1 -0
- package/dist/forms/index.d.ts +1 -0
- package/dist/forms/index.d.ts.map +1 -1
- package/dist/forms/index.js +1 -0
- package/dist/forms/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ComponentInputBase } from "../types/global.js";
|
|
3
|
+
export interface SelectSearchProps extends ComponentInputBase {
|
|
4
|
+
api?: string;
|
|
5
|
+
data?: any[];
|
|
6
|
+
keyText?: string | string[];
|
|
7
|
+
keyValue?: string;
|
|
8
|
+
KeyFindItem?: string;
|
|
9
|
+
onKeyDown?: (e: any) => void;
|
|
10
|
+
state: [any] | [any, React.Dispatch<any>];
|
|
11
|
+
}
|
|
12
|
+
declare const _default: React.MemoExoticComponent<({ id, lb, state, onKeyDown, api, data, referer, keyText, keyValue, required, readOnly, className, KeyFindItem, size, variant, placeholder }: SelectSearchProps) => JSX.Element>;
|
|
13
|
+
export default _default;
|
|
14
|
+
//# sourceMappingURL=SelectSearch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../src/forms/SelectSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAKxD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAC7C;gMAiB8M,iBAAiB,KAAG,GAAG,CAAC,OAAO;AAqI9O,wBAAkC"}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import React, { memo, useEffect, useState, useCallback } from "react";
|
|
2
|
+
import { cn, cvaMix } from "../utils/index.js";
|
|
3
|
+
import { Variants } from "../constants/Variants.js";
|
|
4
|
+
import useHttpState from "../hooks/useHttpState.js";
|
|
5
|
+
const classNamesProps = cvaMix("flex flex-col items-stretch justify-start", {
|
|
6
|
+
size: Variants.size,
|
|
7
|
+
variant: {
|
|
8
|
+
fill: 'bg-input-options text-input-foreground',
|
|
9
|
+
outline: 'text-input-foreground'
|
|
10
|
+
}
|
|
11
|
+
}, {
|
|
12
|
+
size: 'xs',
|
|
13
|
+
width: 'full',
|
|
14
|
+
variant: 'fill'
|
|
15
|
+
});
|
|
16
|
+
const SelectSearch = ({ id, lb, state, onKeyDown, api, data, referer, keyText = 'names', keyValue = 'id', required = false, readOnly, className, KeyFindItem, size = 'xs', variant = 'outline', placeholder }) => {
|
|
17
|
+
const [inputs, setInputs] = state;
|
|
18
|
+
const [searchTerm, setSearchTerm] = useState('');
|
|
19
|
+
const [filteredData, setFilteredData] = useState([]);
|
|
20
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
21
|
+
const { get, isLoading: httpLoading } = useHttpState();
|
|
22
|
+
const isObject = (item) => typeof item === 'object';
|
|
23
|
+
const getDisplayText = (item) => {
|
|
24
|
+
if (!isObject(item))
|
|
25
|
+
return item;
|
|
26
|
+
if (Array.isArray(keyText))
|
|
27
|
+
return `${item[keyText[0]]} - ${item[keyText[1]]}`;
|
|
28
|
+
return item[keyText];
|
|
29
|
+
};
|
|
30
|
+
const fetchData = useCallback(async (query) => {
|
|
31
|
+
if (!api)
|
|
32
|
+
return;
|
|
33
|
+
get(`${api}`, {
|
|
34
|
+
query: { search: query, limit: 30 },
|
|
35
|
+
onSuccess: (result) => {
|
|
36
|
+
setFilteredData(Array.isArray(result) ? result : []);
|
|
37
|
+
},
|
|
38
|
+
onError: (message, error) => {
|
|
39
|
+
console.error('Error fetching data:', message, error);
|
|
40
|
+
setFilteredData([]);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}, [api]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (api) {
|
|
46
|
+
const debounceTimer = setTimeout(() => {
|
|
47
|
+
if (searchTerm) {
|
|
48
|
+
fetchData(searchTerm);
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
setFilteredData([]);
|
|
52
|
+
}
|
|
53
|
+
}, 300); // debounce 300ms
|
|
54
|
+
return () => clearTimeout(debounceTimer);
|
|
55
|
+
}
|
|
56
|
+
else if (data) {
|
|
57
|
+
if (searchTerm) {
|
|
58
|
+
const filtered = data.filter((item) => {
|
|
59
|
+
const text = getDisplayText(item).toLowerCase();
|
|
60
|
+
return text.includes(searchTerm.toLowerCase());
|
|
61
|
+
});
|
|
62
|
+
setFilteredData(filtered);
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
setFilteredData(data);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}, [searchTerm, data, api, fetchData]);
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
if (inputs?.[id] && data && !api) {
|
|
71
|
+
const selectedItem = data.find((item) => item === inputs[id] || item[keyValue] === inputs[id]);
|
|
72
|
+
if (selectedItem) {
|
|
73
|
+
setSearchTerm(getDisplayText(selectedItem));
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}, [inputs?.[id], data, api, keyValue, id]);
|
|
77
|
+
const _onSelect = (item) => {
|
|
78
|
+
const value = isObject(item) ? item[keyValue] : item;
|
|
79
|
+
if (KeyFindItem) {
|
|
80
|
+
setInputs?.({ [id]: value, [KeyFindItem]: item });
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
setInputs?.({ [id]: value });
|
|
84
|
+
}
|
|
85
|
+
setSearchTerm(getDisplayText(item));
|
|
86
|
+
setIsOpen(false);
|
|
87
|
+
};
|
|
88
|
+
const _onInputChange = (e) => {
|
|
89
|
+
setSearchTerm(e.target.value);
|
|
90
|
+
setIsOpen(true);
|
|
91
|
+
};
|
|
92
|
+
const _onFocus = () => {
|
|
93
|
+
setIsOpen(true);
|
|
94
|
+
if (!api && data) {
|
|
95
|
+
setFilteredData(data);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
const _onBlur = () => {
|
|
99
|
+
setTimeout(() => setIsOpen(false), 150); // delay to allow click on options
|
|
100
|
+
};
|
|
101
|
+
return (React.createElement("div", { className: cn("flex flex-col items-stretch justify-start relative", className) },
|
|
102
|
+
lb && React.createElement("label", { htmlFor: id, className: cn(`font-medium text-input-label`) },
|
|
103
|
+
lb,
|
|
104
|
+
":"),
|
|
105
|
+
React.createElement("input", { ref: referer, type: "text", required: required, disabled: readOnly, name: id, placeholder: placeholder, value: searchTerm, enterKeyHint: "search", onChange: _onInputChange, onFocus: _onFocus, onBlur: _onBlur, onKeyDown: onKeyDown, className: cn('rounded-md h-auto w-full border-1 border-input-border outline-none', classNamesProps({ variant, size }), "select-ui") }),
|
|
106
|
+
isOpen && (React.createElement("div", { className: "absolute top-full mt-1 w-full bg-input border border-input-border rounded-md shadow-lg max-h-60 overflow-y-auto z-10 text-input-foreground" },
|
|
107
|
+
httpLoading && React.createElement("div", { className: "p-2 text-center" }, "Cargando..."),
|
|
108
|
+
!httpLoading && filteredData.length === 0 && searchTerm && React.createElement("div", { className: "p-2 text-center" }, "No se encontraron resultados"),
|
|
109
|
+
!httpLoading && filteredData.map((item, index) => (React.createElement("div", { key: index, className: "p-2 cursor-pointer hover:bg-input-foreground/10 ", onClick: () => _onSelect(item) }, getDisplayText(item))))))));
|
|
110
|
+
};
|
|
111
|
+
export default memo(SelectSearch);
|
|
112
|
+
//# sourceMappingURL=SelectSearch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectSearch.js","sourceRoot":"","sources":["../../src/forms/SelectSearch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { SelectSearchProps } from './SelectSearch.js';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: React.MemoExoticComponent<({ id, lb, state, onKeyDown, api, data, referer, keyText, keyValue, required, readOnly, className, KeyFindItem, size, variant, placeholder }: SelectSearchProps) => JSX.Element>;
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
tags: string[];
|
|
11
|
+
argTypes: {
|
|
12
|
+
[x: string]: any;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
export declare const SelectSearchWithData: StoryObj<typeof meta>;
|
|
17
|
+
export declare const SelectSearchWithApi: StoryObj<typeof meta>;
|
|
18
|
+
//# sourceMappingURL=SelectSearch.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectSearch.stories.d.ts","sourceRoot":"","sources":["../../src/forms/SelectSearch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAqB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,IAAI;;;;;;;;;;CAUyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AAGpB,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,OAAO,IAAI,CA0BtD,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,OAAO,IAAI,CA2BrD,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import SelectSearch from './SelectSearch.js';
|
|
2
|
+
import { ArgumentsInputs } from '../types/StoriesArguments.js';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
// Configuración general para el componente en Storybook
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'UI/Forms/SelectSearch',
|
|
7
|
+
component: SelectSearch,
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
},
|
|
11
|
+
tags: ['autodocs'],
|
|
12
|
+
argTypes: {
|
|
13
|
+
...ArgumentsInputs,
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
export default meta;
|
|
17
|
+
// Historias individuales
|
|
18
|
+
export const SelectSearchWithData = {
|
|
19
|
+
render: (args) => {
|
|
20
|
+
const [inputs, setInputs] = React.useState({});
|
|
21
|
+
return (React.createElement("div", { className: 'flex gap-3 text-white' },
|
|
22
|
+
React.createElement(SelectSearch, { data: args.data, id: "option_id", lb: args.lb, state: [inputs, setInputs], variant: args.variant, size: args.size, readOnly: args.readOnly, placeholder: "Buscar opci\u00F3n..." })));
|
|
23
|
+
},
|
|
24
|
+
args: {
|
|
25
|
+
id: 'option_id',
|
|
26
|
+
lb: 'Buscar Opción',
|
|
27
|
+
state: [{}],
|
|
28
|
+
readOnly: false,
|
|
29
|
+
data: [{ id: 1, names: "Opción 1" }, { id: 2, names: "Opción 2" }, { id: 3, names: "Opción 3" }, { id: 4, names: "Otra Opción" }]
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
export const SelectSearchWithApi = {
|
|
33
|
+
render: (args) => {
|
|
34
|
+
const [inputs, setInputs] = React.useState({});
|
|
35
|
+
return (React.createElement("div", { className: 'flex gap-3 text-white' },
|
|
36
|
+
React.createElement(SelectSearch, { api: "https://jsonplaceholder.typicode.com/users" // Example API
|
|
37
|
+
, id: "user_id", lb: args.lb, state: [inputs, setInputs], variant: args.variant, size: args.size, readOnly: args.readOnly, placeholder: "Buscar usuario...", keyText: "name", keyValue: "id" })));
|
|
38
|
+
},
|
|
39
|
+
args: {
|
|
40
|
+
id: 'user_id',
|
|
41
|
+
lb: 'Buscar Usuario',
|
|
42
|
+
state: [{}],
|
|
43
|
+
readOnly: false,
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=SelectSearch.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectSearch.stories.js","sourceRoot":"","sources":["../../src/forms/SelectSearch.stories.tsx"],"names":[],"mappings":"AACA,OAAO,YAAmC,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wDAAwD;AACxD,MAAM,IAAI,GAAG;IACT,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACR,MAAM,EAAE,UAAU;KACrB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,GAAG,eAAe;KACrB;CAC8B,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,yBAAyB;AACzB,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACvD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAE/C,OAAO,CACH,6BAAK,SAAS,EAAC,uBAAuB;YAClC,oBAAC,YAAY,IACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAC,uBAAkB,GAChC,CACA,CACT,CAAC;IACN,CAAC;IACD,IAAI,EAAE;QACF,EAAE,EAAE,WAAW;QACf,EAAE,EAAE,eAAe;QACnB,KAAK,EAAE,CAAC,EAAE,CAAC;QACX,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;KACpI;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAA0B;IACtD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAE/C,OAAO,CACH,6BAAK,SAAS,EAAC,uBAAuB;YAClC,oBAAC,YAAY,IACT,GAAG,EAAC,4CAA4C,CAAC,cAAc;kBAC/D,EAAE,EAAE,SAAS,EACb,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAC,mBAAmB,EAC/B,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,IAAI,GACf,CACA,CACT,CAAC;IACN,CAAC;IACD,IAAI,EAAE;QACF,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,CAAC,EAAE,CAAC;QACX,QAAQ,EAAE,KAAK;KAClB;CACJ,CAAC"}
|
package/dist/forms/index.d.ts
CHANGED
|
@@ -9,5 +9,6 @@ export { default as Button } from "./Button.js";
|
|
|
9
9
|
export { default as LinkButtonSmall } from "./LinkButton.js";
|
|
10
10
|
export { default as ToggleSwitch } from "./ToggleSwitch.js";
|
|
11
11
|
export { default as SwitchButton } from "./SwitchButton.js";
|
|
12
|
+
export { default as SelectSearch } from "./SelectSearch.js";
|
|
12
13
|
export type { ButtonProps } from './Button.js';
|
|
13
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAEhD,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE5D,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAEhD,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE5D,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}
|
package/dist/forms/index.js
CHANGED
|
@@ -9,4 +9,5 @@ export { default as Button } from "./Button.js";
|
|
|
9
9
|
export { default as LinkButtonSmall } from "./LinkButton.js";
|
|
10
10
|
export { default as ToggleSwitch } from "./ToggleSwitch.js";
|
|
11
11
|
export { default as SwitchButton } from "./SwitchButton.js";
|
|
12
|
+
export { default as SelectSearch } from "./SelectSearch.js";
|
|
12
13
|
//# sourceMappingURL=index.js.map
|
package/dist/forms/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAEhD,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAEhD,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
|