@smartsoft001/react 0.0.0-stage → 2.193.0

package/src/lib/components/input/address/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./input-address"), exports);
+tslib_1.__exportStar(require("./preset/input-address-preset"), exports);
+tslib_1.__exportStar(require("./use-input-address"), exports);
+//# sourceMappingURL=index.js.map

package/src/lib/components/input/address/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/address/index.ts"],"names":[],"mappings":";;;AAAA,0DAAgC;AAChC,wEAA8C;AAC9C,8DAAoC"}

package/src/lib/components/input/address/input-address.d.ts

@@ -0,0 +1,8 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * `<smart-input-address>` (Angular `InputAddressComponent`): the control is
+ * the address group the form factory builds; each part (city, zip code,
+ * street, building and flat number) has its own labelled text input bound to
+ * its control. `className` goes on the container of the parts.
+ */
+export declare function SmartInputAddress<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/input/address/input-address.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputAddress = SmartInputAddress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../../providers/hooks");
+const class_names_1 = require("../../../utils/class-names");
+const use_input_1 = require("../base/use-input");
+const use_input_address_1 = require("./use-input-address");
+const LABEL_CLASSES = 'smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white';
+const FIELD_INPUT_CLASSES = 'smart:mt-1 smart:block smart:w-full smart:rounded-md smart:bg-white smart:px-2 smart:py-1 smart:text-sm smart:text-gray-900 smart:outline-1 smart:outline-gray-300 smart:focus:outline-2 smart:focus:outline-indigo-600 smart:dark:bg-white/5 smart:dark:text-white smart:dark:outline-white/10';
+function AddressPart({ group, name, }) {
+    const t = (0, hooks_1.useTranslate)();
+    const { id, value, disabled, onChange, onBlur } = (0, use_input_address_1.useInputAddressPart)(group, name);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "smart:block smart:text-xs smart:text-gray-600 smart:dark:text-gray-400", children: t('MODEL.' + name) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", value: value, disabled: disabled, onChange: onChange, onBlur: onBlur, className: FIELD_INPUT_CLASSES })] }));
+}
+/**
+ * `<smart-input-address>` (Angular `InputAddressComponent`): the control is
+ * the address group the form factory builds; each part (city, zip code,
+ * street, building and flat number) has its own labelled text input bound to
+ * its control. `className` goes on the container of the parts.
+ */
+function SmartInputAddress(props) {
+    const { className } = props;
+    const { control, required, label } = (0, use_input_1.useInput)(props);
+    if (!control)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { className: LABEL_CLASSES, children: [label, ' ', required && (0, jsx_runtime_1.jsx)("span", { className: "smart:text-red-500 smart:ml-0.5", children: "*" })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, class_names_1.cn)('smart:mt-2', 'smart:space-y-2', className), children: [(0, jsx_runtime_1.jsx)(AddressPart, { group: control, name: "city" }), (0, jsx_runtime_1.jsx)(AddressPart, { group: control, name: "zipCode" }), (0, jsx_runtime_1.jsx)(AddressPart, { group: control, name: "street" }), (0, jsx_runtime_1.jsxs)("div", { className: "smart:grid smart:grid-cols-2 smart:gap-2", children: [(0, jsx_runtime_1.jsx)(AddressPart, { group: control, name: "buildingNumber" }), (0, jsx_runtime_1.jsx)(AddressPart, { group: control, name: "flatNumber" })] })] })] }));
+}
+//# sourceMappingURL=input-address.js.map

package/src/lib/components/input/address/input-address.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-address.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/address/input-address.tsx"],"names":[],"mappings":";;AAwDA,8CAuBC;;AA9ED,oDAAwD;AACxD,4DAAgD;AAChD,iDAA6C;AAE7C,2DAG6B;AAE7B,MAAM,aAAa,GACjB,yFAAyF,CAAC;AAE5F,MAAM,mBAAmB,GACvB,iSAAiS,CAAC;AAEpS,SAAS,WAAW,CAAC,EACnB,KAAK,EACL,IAAI,GAIL;IACC,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAA,uCAAmB,EACnE,KAAK,EACL,IAAI,CACL,CAAC;IAEF,OAAO,CACL,4CACE,kCACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAC,wEAAwE,YAEjF,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GACb,EACR,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,mBAAmB,GAC9B,IACE,CACP,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAI,KAA8B;IACjE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAErD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,6DACE,mCAAO,SAAS,EAAE,aAAa,aAC5B,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,iCAAM,SAAS,EAAC,iCAAiC,kBAAS,IACjE,EACR,iCAAK,SAAS,EAAE,IAAA,gBAAE,EAAC,YAAY,EAAE,iBAAiB,EAAE,SAAS,CAAC,aAC5D,uBAAC,WAAW,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,GAAG,EAC3C,uBAAC,WAAW,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,SAAS,GAAG,EAC9C,uBAAC,WAAW,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC7C,iCAAK,SAAS,EAAC,0CAA0C,aACvD,uBAAC,WAAW,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,gBAAgB,GAAG,EACrD,uBAAC,WAAW,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,YAAY,GAAG,IAC7C,IACF,IACL,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/input/address/preset/input-address-preset.d.ts

@@ -0,0 +1,9 @@
+import { SmartInputFieldProps } from '../../input.types';
+/**
+ * Styled address field (preset, Angular `InputAddressPresetComponent`): the
+ * parts of the address group as Preline text inputs in a two-column grid
+ * (street across both columns, then building and flat number, zip code and
+ * city), each labelled and bound to its control. `className` goes on the
+ * grid.
+ */
+export declare function SmartInputAddressPreset<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/input/address/preset/input-address-preset.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputAddressPreset = SmartInputAddressPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../../../providers/hooks");
+const class_names_1 = require("../../../../utils/class-names");
+const use_input_1 = require("../../base/use-input");
+const use_input_address_1 = require("../use-input-address");
+const LABEL_CLASSES = 'smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white';
+const SUB_LABEL_CLASSES = 'smart:block smart:text-xs smart:font-medium smart:text-gray-500 smart:dark:text-gray-400 smart:mb-1';
+// Preline text-input look reused for every address sub-field.
+const FIELD_INPUT_CLASSES = 'smart:block smart:w-full smart:py-2.5 smart:sm:py-3 smart:px-4 smart:bg-white smart:dark:bg-gray-800 smart:border smart:border-gray-200 smart:dark:border-gray-700 smart:rounded-lg smart:sm:text-sm smart:text-gray-900 smart:dark:text-white smart:focus:border-blue-700 smart:dark:focus:border-blue-600 smart:focus:ring-blue-700 smart:dark:focus:ring-blue-600 smart:disabled:opacity-50 smart:disabled:pointer-events-none';
+function AddressPresetPart({ group, name, className, }) {
+    const t = (0, hooks_1.useTranslate)();
+    const { id, value, disabled, onChange, onBlur } = (0, use_input_address_1.useInputAddressPart)(group, name);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: SUB_LABEL_CLASSES, children: t('MODEL.' + name) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", value: value, disabled: disabled, onChange: onChange, onBlur: onBlur, className: FIELD_INPUT_CLASSES, "data-role": name })] }));
+}
+/**
+ * Styled address field (preset, Angular `InputAddressPresetComponent`): the
+ * parts of the address group as Preline text inputs in a two-column grid
+ * (street across both columns, then building and flat number, zip code and
+ * city), each labelled and bound to its control. `className` goes on the
+ * grid.
+ */
+function SmartInputAddressPreset(props) {
+    const { className } = props;
+    const { control, required, label } = (0, use_input_1.useInput)(props);
+    if (!control)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { className: LABEL_CLASSES, "data-role": "label", children: [label, ' ', required && (0, jsx_runtime_1.jsx)("span", { className: "smart:text-red-500 smart:ml-0.5", children: "*" })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, class_names_1.cn)('smart:mt-2', 'smart:grid', 'smart:grid-cols-1', 'smart:sm:grid-cols-2', 'smart:gap-3', className), "data-role": "address-grid", children: [(0, jsx_runtime_1.jsx)(AddressPresetPart, { group: control, name: "street", className: "smart:sm:col-span-2" }), (0, jsx_runtime_1.jsx)(AddressPresetPart, { group: control, name: "buildingNumber" }), (0, jsx_runtime_1.jsx)(AddressPresetPart, { group: control, name: "flatNumber" }), (0, jsx_runtime_1.jsx)(AddressPresetPart, { group: control, name: "zipCode" }), (0, jsx_runtime_1.jsx)(AddressPresetPart, { group: control, name: "city" })] })] }));
+}
+//# sourceMappingURL=input-address-preset.js.map

package/src/lib/components/input/address/preset/input-address-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-address-preset.js","sourceRoot":"","sources":["../../../../../../../../../../packages/shared/react/src/lib/components/input/address/preset/input-address-preset.tsx"],"names":[],"mappings":";;AA6DA,0DAmCC;;AA/FD,uDAA2D;AAC3D,+DAAmD;AACnD,oDAAgD;AAEhD,4DAG8B;AAE9B,MAAM,aAAa,GACjB,yFAAyF,CAAC;AAE5F,MAAM,iBAAiB,GACrB,qGAAqG,CAAC;AAExG,8DAA8D;AAC9D,MAAM,mBAAmB,GACvB,maAAma,CAAC;AAEta,SAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,SAAS,GAKV;IACC,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAA,uCAAmB,EACnE,KAAK,EACL,IAAI,CACL,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAE,SAAS,aACvB,kCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,iBAAiB,YAC7C,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GACb,EACR,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,mBAAmB,eACnB,IAAI,GACf,IACE,CACP,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,uBAAuB,CAAI,KAA8B;IACvE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAErD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,6DACE,mCAAO,SAAS,EAAE,aAAa,eAAY,OAAO,aAC/C,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,iCAAM,SAAS,EAAC,iCAAiC,kBAAS,IACjE,EACR,iCACE,SAAS,EAAE,IAAA,gBAAE,EACX,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,SAAS,CACV,eACS,cAAc,aAExB,uBAAC,iBAAiB,IAChB,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,GAC/B,EACF,uBAAC,iBAAiB,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,gBAAgB,GAAG,EAC3D,uBAAC,iBAAiB,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,YAAY,GAAG,EACvD,uBAAC,iBAAiB,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,SAAS,GAAG,EACpD,uBAAC,iBAAiB,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,GAAG,IAC7C,IACL,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/input/address/use-input-address.d.ts

@@ -0,0 +1,18 @@
+import type { ChangeEvent } from 'react';
+import { SmartAbstractControl } from '../../../forms/abstract-control';
+/** The parts of the address group the form factory builds. */
+export type SmartInputAddressPart = 'city' | 'zipCode' | 'street' | 'buildingNumber' | 'flatNumber';
+/**
+ * Binds the input of one part of an address group to its control, as the
+ * Angular `formControlName` did: the input shows the part's value, typing
+ * sets it and marks it dirty, leaving the input marks it touched, and the
+ * input is disabled with the part. `id` is for the input, so its label can
+ * point at it.
+ */
+export declare function useInputAddressPart(group: SmartAbstractControl | null, name: SmartInputAddressPart): {
+    id: string;
+    value: any;
+    disabled: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur: () => void | undefined;
+};

package/src/lib/components/input/address/use-input-address.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputAddressPart = useInputAddressPart;
+const react_1 = require("react");
+const hooks_1 = require("../../../forms/hooks");
+/**
+ * Binds the input of one part of an address group to its control, as the
+ * Angular `formControlName` did: the input shows the part's value, typing
+ * sets it and marks it dirty, leaving the input marks it touched, and the
+ * input is disabled with the part. `id` is for the input, so its label can
+ * point at it.
+ */
+function useInputAddressPart(group, name) {
+    const id = (0, react_1.useId)();
+    const control = group?.get(name) ?? null;
+    const state = (0, hooks_1.useControlState)(control);
+    const onChange = (0, react_1.useCallback)((event) => {
+        if (!control)
+            return;
+        control.setValue(event.target.value);
+        control.markAsDirty();
+    }, [control]);
+    const onBlur = (0, react_1.useCallback)(() => control?.markAsTouched(), [control]);
+    return {
+        id,
+        value: state?.value ?? '',
+        disabled: state?.disabled ?? false,
+        onChange,
+        onBlur,
+    };
+}
+//# sourceMappingURL=use-input-address.js.map

package/src/lib/components/input/address/use-input-address.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-address.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/address/use-input-address.ts"],"names":[],"mappings":";;AAiBA,kDA2BC;AA5CD,iCAA2C;AAI3C,gDAAuD;AAMvD;;;;;;GAMG;AACH,SAAgB,mBAAmB,CACjC,KAAkC,EAClC,IAA2B;IAE3B,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,OAAO,GAAG,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;IACzC,MAAM,KAAK,GAAG,IAAA,uBAAe,EAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,KAAoC,EAAE,EAAE;QACvC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,CAAC,WAAW,EAAE,CAAC;IACxB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEtE,OAAO;QACL,EAAE;QACF,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE;QACzB,QAAQ,EAAE,KAAK,EAAE,QAAQ,IAAI,KAAK;QAClC,QAAQ;QACR,MAAM;KACP,CAAC;AACJ,CAAC"}

package/src/lib/components/input/array/index.d.ts

@@ -0,0 +1,3 @@
+export * from './input-array';
+export * from './preset/input-array-preset';
+export * from './use-input-array';

package/src/lib/components/input/array/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./input-array"), exports);
+tslib_1.__exportStar(require("./preset/input-array-preset"), exports);
+tslib_1.__exportStar(require("./use-input-array"), exports);
+//# sourceMappingURL=index.js.map

package/src/lib/components/input/array/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/array/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,sEAA4C;AAC5C,4DAAkC"}

package/src/lib/components/input/array/input-array.d.ts

@@ -0,0 +1,9 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * `<smart-input-array>`: the label of an `array` field, a nested `SmartForm`
+ * per item and an add button (hidden for `possibilities.static`). Items are
+ * reordered by dragging one onto another (native drag and drop, where the
+ * Angular field used the CDK). Like the Angular template, this variant has no
+ * remove button; `SmartInputArrayPreset` has one.
+ */
+export declare function SmartInputArray<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/input/array/input-array.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputArray = SmartInputArray;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_input_array_1 = require("./use-input-array");
+const hooks_1 = require("../../../providers/hooks");
+const class_names_1 = require("../../../utils/class-names");
+const button_1 = require("../../button/button");
+const form_1 = require("../../form/form");
+/**
+ * `<smart-input-array>`: the label of an `array` field, a nested `SmartForm`
+ * per item and an add button (hidden for `possibilities.static`). Items are
+ * reordered by dragging one onto another (native drag and drop, where the
+ * Angular field used the CDK). Like the Angular template, this variant has no
+ * remove button; `SmartInputArrayPreset` has one.
+ */
+function SmartInputArray(props) {
+    const { className } = props;
+    const t = (0, hooks_1.useTranslate)();
+    const { control, label, required, items, add, isStatic, getItemKey, getItemDragProps, } = (0, use_input_array_1.useInputArray)(props);
+    if (!control)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { className: "smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white", children: [label, ' ', required && (0, jsx_runtime_1.jsx)("span", { className: "smart:text-red-500 smart:ml-0.5", children: "*" })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, class_names_1.cn)('smart:mt-2 smart:space-y-2', className), children: [items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: "smart:rounded smart:border smart:border-gray-200 smart:p-2 smart:dark:border-gray-700", ...getItemDragProps(index), children: (0, jsx_runtime_1.jsx)(form_1.SmartForm, { options: item }) }, getItemKey(item.control)))), !isStatic && ((0, jsx_runtime_1.jsx)(button_1.SmartButton, { options: { variant: 'primary', click: add }, children: t('add') }))] })] }));
+}
+//# sourceMappingURL=input-array.js.map

package/src/lib/components/input/array/input-array.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-array.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/array/input-array.tsx"],"names":[],"mappings":";;AAcA,0CAwCC;;AAtDD,uDAAkD;AAClD,oDAAwD;AACxD,4DAAgD;AAChD,gDAAkD;AAClD,0CAA4C;AAG5C;;;;;;GAMG;AACH,SAAgB,eAAe,CAAI,KAA8B;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAQ,EACR,UAAU,EACV,gBAAgB,GACjB,GAAG,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IAEzB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,6DACE,mCAAO,SAAS,EAAC,yFAAyF,aACvG,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,iCAAM,SAAS,EAAC,iCAAiC,kBAAS,IACjE,EACR,iCAAK,SAAS,EAAE,IAAA,gBAAE,EAAC,4BAA4B,EAAE,SAAS,CAAC,aACxD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,gCAEE,SAAS,EAAC,uFAAuF,KAC7F,gBAAgB,CAAC,KAAK,CAAC,YAE3B,uBAAC,gBAAS,IAAC,OAAO,EAAE,IAAI,GAAI,IAJvB,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAKzB,CACP,CAAC,EACD,CAAC,QAAQ,IAAI,CACZ,uBAAC,oBAAW,IAAC,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,YACrD,CAAC,CAAC,KAAK,CAAC,GACG,CACf,IACG,IACL,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/input/array/preset/input-array-preset.d.ts

@@ -0,0 +1,7 @@
+import { SmartInputFieldProps } from '../../input.types';
+/**
+ * Styled array field variation (preset), `<smart-input-array-preset>`: every
+ * item is a card with its nested `SmartForm` and a remove button, an empty
+ * array shows a dash, and items are added with an outline button.
+ */
+export declare function SmartInputArrayPreset<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/input/array/preset/input-array-preset.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputArrayPreset = SmartInputArrayPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../../../providers/hooks");
+const class_names_1 = require("../../../../utils/class-names");
+const form_1 = require("../../../form/form");
+const use_input_array_1 = require("../use-input-array");
+/**
+ * Styled array field variation (preset), `<smart-input-array-preset>`: every
+ * item is a card with its nested `SmartForm` and a remove button, an empty
+ * array shows a dash, and items are added with an outline button.
+ */
+function SmartInputArrayPreset(props) {
+    const { className } = props;
+    const t = (0, hooks_1.useTranslate)();
+    const { control, label, required, items, add, remove, isStatic, getItemKey, getItemDragProps, } = (0, use_input_array_1.useInputArray)(props);
+    if (!control)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { className: "smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white", "data-role": "label", children: [label, ' ', required && (0, jsx_runtime_1.jsx)("span", { className: "smart:text-red-500 smart:ml-0.5", children: "*" })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, class_names_1.cn)('smart:mt-2 smart:space-y-2', className), "data-role": "array", children: [items.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:items-start smart:gap-x-2 smart:rounded-lg smart:border smart:border-gray-200 smart:dark:border-gray-700 smart:bg-white smart:dark:bg-gray-800 smart:p-3", "data-role": "item", ...getItemDragProps(index), children: [(0, jsx_runtime_1.jsx)("div", { className: "smart:grow", children: (0, jsx_runtime_1.jsx)(form_1.SmartForm, { options: item }) }), !isStatic && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "smart:inline-flex smart:shrink-0 smart:items-center smart:justify-center smart:size-7 smart:rounded-lg smart:text-sm smart:font-medium smart:leading-none smart:text-red-600 smart:dark:text-red-500 smart:hover:bg-red-100 smart:dark:hover:bg-red-800/30 smart:focus:outline-hidden smart:focus:bg-red-100 smart:dark:focus:bg-red-800/30", onClick: () => remove(index), "aria-label": t('remove'), "data-role": "remove", children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u00D7" }) }))] }, getItemKey(item.control)))), !items.length && ((0, jsx_runtime_1.jsx)("span", { className: "smart:block smart:text-sm smart:text-gray-400 smart:dark:text-gray-500", "data-role": "empty", children: "\u2014" })), !isStatic && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "smart:inline-flex smart:items-center smart:gap-x-1.5 smart:py-2 smart:px-3 smart:rounded-lg smart:border smart:border-gray-200 smart:dark:border-gray-700 smart:text-sm smart:font-medium smart:text-gray-800 smart:dark:text-gray-200 smart:hover:bg-gray-100 smart:dark:hover:bg-gray-700 smart:focus:outline-hidden smart:focus:ring-1 smart:focus:ring-blue-600 smart:dark:focus:ring-blue-500 smart:disabled:opacity-50 smart:disabled:pointer-events-none", onClick: () => void add(), "data-role": "add", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "smart:shrink-0 smart:size-3.5", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M5 12h14" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 5v14" })] }), t('add')] }))] })] }));
+}
+//# sourceMappingURL=input-array-preset.js.map

package/src/lib/components/input/array/preset/input-array-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-array-preset.js","sourceRoot":"","sources":["../../../../../../../../../../packages/shared/react/src/lib/components/input/array/preset/input-array-preset.tsx"],"names":[],"mappings":";;AAWA,sDA0FC;;AArGD,uDAA2D;AAC3D,+DAAmD;AACnD,6CAA+C;AAE/C,wDAAmD;AAEnD;;;;GAIG;AACH,SAAgB,qBAAqB,CAAI,KAA8B;IACrE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,EACH,MAAM,EACN,QAAQ,EACR,UAAU,EACV,gBAAgB,GACjB,GAAG,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IAEzB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,6DACE,mCACE,SAAS,EAAC,yFAAyF,eACzF,OAAO,aAEhB,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,iCAAM,SAAS,EAAC,iCAAiC,kBAAS,IACjE,EACR,iCACE,SAAS,EAAE,IAAA,gBAAE,EAAC,4BAA4B,EAAE,SAAS,CAAC,eAC5C,OAAO,aAEhB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,iCAEE,SAAS,EAAC,2KAA2K,eAC3K,MAAM,KACZ,gBAAgB,CAAC,KAAK,CAAC,aAE3B,gCAAK,SAAS,EAAC,YAAY,YACzB,uBAAC,gBAAS,IAAC,OAAO,EAAE,IAAI,GAAI,GACxB,EACL,CAAC,QAAQ,IAAI,CACZ,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6UAA6U,EACvV,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,gBAChB,CAAC,CAAC,QAAQ,CAAC,eACb,QAAQ,YAElB,gDAAkB,MAAM,uBAAe,GAChC,CACV,KAlBI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAmBzB,CACP,CAAC,EACD,CAAC,KAAK,CAAC,MAAM,IAAI,CAChB,iCACE,SAAS,EAAC,wEAAwE,eACxE,OAAO,uBAGZ,CACR,EACA,CAAC,QAAQ,IAAI,CACZ,oCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,icAAic,EAC3c,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,GAAG,EAAE,eACf,KAAK,aAEf,iCACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,iBACV,MAAM,aAElB,iCAAM,CAAC,EAAC,UAAU,GAAG,EACrB,iCAAM,CAAC,EAAC,UAAU,GAAG,IACjB,EACL,CAAC,CAAC,KAAK,CAAC,IACF,CACV,IACG,IACL,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/input/array/use-input-array.d.ts

@@ -0,0 +1,64 @@
+import type { DragEvent } from 'react';
+import { IFieldOptions, IModelOptions } from '@smartsoft001/models';
+import { SmartAbstractControl } from '../../../forms/abstract-control';
+import { SmartFormArray } from '../../../forms/form-array';
+import { IFormOptions } from '../../../models';
+import { SmartInputFieldProps } from '../input.types';
+/** The options of the nested form of one array item. */
+export type SmartInputArrayItemOptions<TChild> = IFormOptions<TChild> & {
+    control: SmartAbstractControl;
+    fieldOptions: IFieldOptions;
+    modelOptions: IModelOptions;
+};
+/**
+ * What the array field variants share (the Angular `InputArrayComponent`
+ * logic):
+ *
+ * - `items`: the options of the nested form of every item, one tree level
+ *   deeper, with a model of the field's `classType` made from the item value;
+ * - `add()`: builds a new item with the form factory (for the form's mode,
+ *   under the form's root) and appends it, shown;
+ * - `remove(index)`: removes the item, as the preset's remove button does;
+ * - `move(from, to)` and `getItemDragProps(index)`: reordering, which the
+ *   Angular field did with CDK drag and drop and is done here with native
+ *   drag and drop;
+ * - `isStatic`: `possibilities.static`, no add / remove / reordering.
+ *
+ * Every change of the array's value marks it as dirty, as in Angular.
+ */
+export declare function useInputArray<T, TChild = unknown>(props: SmartInputFieldProps<T>): {
+    array: SmartFormArray<any> | null;
+    items: SmartInputArrayItemOptions<TChild>[];
+    add: () => Promise<void>;
+    remove: (index: number) => void;
+    move: (from: number, to: number) => void;
+    getItemKey: (item: SmartAbstractControl) => number;
+    getItemDragProps: (index: number) => {
+        draggable?: undefined;
+        onDragStart?: undefined;
+        onDragOver?: undefined;
+        onDrop?: undefined;
+        onDragEnd?: undefined;
+    } | {
+        draggable: boolean;
+        onDragStart: (event: DragEvent<HTMLElement>) => void;
+        onDragOver: (event: DragEvent<HTMLElement>) => void;
+        onDrop: (event: DragEvent<HTMLElement>) => void;
+        onDragEnd: () => void;
+    };
+    isStatic: boolean;
+    control: SmartAbstractControl<any> | null;
+    state: import("../../../forms").SmartControlState<any> | null;
+    value: any;
+    required: boolean;
+    disabled: boolean;
+    label: string;
+    fieldKey: string;
+    model: T | undefined;
+    mode: string | undefined;
+    treeLevel: number;
+    fieldOptions: IFieldOptions | undefined;
+    setValue: (value: unknown) => void;
+    markAsTouched: () => void | undefined;
+    autoFocus: boolean;
+};

package/src/lib/components/input/array/use-input-array.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputArray = useInputArray;
+const react_1 = require("react");
+const models_1 = require("@smartsoft001/models");
+const utils_1 = require("@smartsoft001/utils");
+const hooks_1 = require("../../../providers/hooks");
+const use_input_1 = require("../base/use-input");
+/**
+ * The options of the array field on the model, read through its first item
+ * when the model is itself an array (the Angular `getOptions`).
+ */
+function getArrayFieldOptions(model, fieldKey) {
+    if (!model)
+        return undefined;
+    const first = model[0];
+    return first && first[fieldKey]
+        ? (0, models_1.getModelFieldOptions)(first, fieldKey)
+        : (0, models_1.getModelFieldOptions)(model, fieldKey);
+}
+/**
+ * What the array field variants share (the Angular `InputArrayComponent`
+ * logic):
+ *
+ * - `items`: the options of the nested form of every item, one tree level
+ *   deeper, with a model of the field's `classType` made from the item value;
+ * - `add()`: builds a new item with the form factory (for the form's mode,
+ *   under the form's root) and appends it, shown;
+ * - `remove(index)`: removes the item, as the preset's remove button does;
+ * - `move(from, to)` and `getItemDragProps(index)`: reordering, which the
+ *   Angular field did with CDK drag and drop and is done here with native
+ *   drag and drop;
+ * - `isStatic`: `possibilities.static`, no add / remove / reordering.
+ *
+ * Every change of the array's value marks it as dirty, as in Angular.
+ */
+function useInputArray(props) {
+    const input = (0, use_input_1.useInput)(props);
+    const { control, treeLevel, mode, model, fieldKey, fieldOptions } = input;
+    const array = control;
+    const factory = (0, hooks_1.useFormFactory)();
+    const isStatic = !!fieldOptions?.possibilities?.static;
+    // The item models are made once per control, from its value at the time,
+    // as the Angular `initData` did; the items added here are shown.
+    const models = (0, react_1.useRef)(new WeakMap());
+    const shown = (0, react_1.useRef)(new WeakSet());
+    // A stable React key per item control (the Angular `track option`).
+    const keys = (0, react_1.useRef)({
+        next: 0,
+        ids: new WeakMap(),
+    });
+    // The index of the item being dragged, while a drag started on this array.
+    const dragged = (0, react_1.useRef)(null);
+    const arrayOptions = getArrayFieldOptions(model, fieldKey);
+    const classType = arrayOptions?.classType;
+    const modelOptions = classType ? (0, models_1.getModelOptions)(classType) : undefined;
+    const items = (array?.controls ?? []).map((item) => {
+        if (!models.current.has(item)) {
+            models.current.set(item, classType
+                ? utils_1.ObjectService.createByType(item.value, classType)
+                : item.value);
+        }
+        return {
+            treeLevel: treeLevel + 1,
+            mode,
+            control: item,
+            model: models.current.get(item),
+            fieldOptions: arrayOptions,
+            modelOptions: modelOptions,
+            show: shown.current.has(item),
+        };
+    });
+    const getItemKey = (0, react_1.useCallback)((item) => {
+        const { ids } = keys.current;
+        if (!ids.has(item))
+            ids.set(item, keys.current.next++);
+        return ids.get(item);
+    }, []);
+    const add = (0, react_1.useCallback)(async () => {
+        if (!array)
+            return;
+        const ItemType = fieldOptions?.classType;
+        const item = await factory.create(new ItemType(), {
+            mode,
+            root: array.root,
+        });
+        shown.current.add(item);
+        array.push(item);
+        array.markAsDirty();
+    }, [array, factory, fieldOptions, mode]);
+    const remove = (0, react_1.useCallback)((index) => {
+        if (!array)
+            return;
+        array.removeAt(index);
+        // The remaining items are read anew (`initData`).
+        models.current = new WeakMap();
+        shown.current = new WeakSet();
+        array.markAsDirty();
+        array.setValue(array.controls.map((item) => item.value));
+    }, [array]);
+    const move = (0, react_1.useCallback)((from, to) => {
+        if (!array)
+            return;
+        array.markAsDirty();
+        array.move(from, to);
+    }, [array]);
+    (0, react_1.useEffect)(() => {
+        if (!array)
+            return undefined;
+        const subscription = array.valueChanges.subscribe(() => array.markAsDirty());
+        return () => subscription.unsubscribe();
+    }, [array]);
+    /**
+     * The native drag and drop props of the item at `index`: an item dropped on
+     * another one of the same array moves to its place.
+     */
+    const getItemDragProps = (0, react_1.useCallback)((index) => {
+        if (isStatic)
+            return {};
+        return {
+            draggable: true,
+            onDragStart: (event) => {
+                // A nested array's item must not start a drag of the outer one.
+                event.stopPropagation();
+                dragged.current = index;
+                event.dataTransfer?.setData('text/plain', String(index));
+                if (event.dataTransfer)
+                    event.dataTransfer.effectAllowed = 'move';
+            },
+            onDragOver: (event) => {
+                if (dragged.current === null)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+            },
+            onDrop: (event) => {
+                const from = dragged.current;
+                if (from === null)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                dragged.current = null;
+                if (from !== index)
+                    move(from, index);
+            },
+            onDragEnd: () => {
+                dragged.current = null;
+            },
+        };
+    }, [isStatic, move]);
+    return {
+        ...input,
+        array,
+        items,
+        add,
+        remove,
+        move,
+        getItemKey,
+        getItemDragProps,
+        isStatic,
+    };
+}
+//# sourceMappingURL=use-input-array.js.map

package/src/lib/components/input/array/use-input-array.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-array.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/array/use-input-array.ts"],"names":[],"mappings":"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"}

package/src/lib/components/input/attachment/index.d.ts

@@ -0,0 +1,2 @@
+export * from './input-attachment';
+export * from './preset/input-attachment-preset';

package/src/lib/components/input/attachment/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./input-attachment"), exports);
+tslib_1.__exportStar(require("./preset/input-attachment-preset"), exports);
+//# sourceMappingURL=index.js.map

package/src/lib/components/input/attachment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/attachment/index.ts"],"names":[],"mappings":";;;AAAA,6DAAmC;AACnC,2EAAiD"}

package/src/lib/components/input/attachment/input-attachment.d.ts

@@ -0,0 +1,10 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * The `attachment` field (the Angular `InputAttachmentComponent`,
+ * `<smart-input-attachment>`): an add / change button opening a hidden file
+ * input (`accept` = `fieldOptions.possibilities`) whose file is uploaded
+ * ({@link useInputFile}), download / delete buttons and the file name once
+ * there is a value, and the upload progress. `className` is appended to the
+ * group's classes.
+ */
+export declare function SmartInputAttachment<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/input/attachment/input-attachment.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputAttachment = SmartInputAttachment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../../providers/hooks");
+const class_names_1 = require("../../../utils/class-names");
+const button_1 = require("../../button/button");
+const use_input_1 = require("../base/use-input");
+const use_input_file_1 = require("../base/use-input-file");
+const LABEL_CLASSES = [
+    'smart:block',
+    'smart:text-sm/6',
+    'smart:font-medium',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const GROUP_CLASSES = [
+    'smart:mt-2',
+    'smart:flex',
+    'smart:items-center',
+    'smart:gap-x-2',
+    'smart:flex-wrap',
+].join(' ');
+/**
+ * The `attachment` field (the Angular `InputAttachmentComponent`,
+ * `<smart-input-attachment>`): an add / change button opening a hidden file
+ * input (`accept` = `fieldOptions.possibilities`) whose file is uploaded
+ * ({@link useInputFile}), download / delete buttons and the file name once
+ * there is a value, and the upload progress. `className` is appended to the
+ * group's classes.
+ */
+function SmartInputAttachment(props) {
+    const { className, fieldOptions } = props;
+    const t = (0, hooks_1.useTranslate)();
+    const { control, value, required, label } = (0, use_input_1.useInput)(props);
+    const { inputRef, loading, percent, onFileChange, addButtonOptions, showButtonOptions, deleteButtonOptions, } = (0, use_input_file_1.useInputFile)(props);
+    const id = (0, react_1.useId)();
+    if (!control)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: LABEL_CLASSES, children: [label, ' ', required && (0, jsx_runtime_1.jsx)("span", { className: "smart:text-red-500 smart:ml-0.5", children: "*" })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, class_names_1.cn)(GROUP_CLASSES, className), children: [(0, jsx_runtime_1.jsx)(button_1.SmartButton, { options: addButtonOptions, children: t(value ? 'change' : 'add') }), value && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.SmartButton, { options: showButtonOptions, children: t('download') }), (0, jsx_runtime_1.jsx)(button_1.SmartButton, { options: deleteButtonOptions, children: t('delete') }), (0, jsx_runtime_1.jsx)("span", { className: "smart:text-sm smart:text-gray-700 smart:dark:text-gray-300", children: value.fileName })] })), loading && ((0, jsx_runtime_1.jsx)("div", { className: "smart:h-1 smart:w-24 smart:overflow-hidden smart:rounded smart:bg-gray-200 smart:dark:bg-gray-700", children: (0, jsx_runtime_1.jsx)("div", { className: "smart:h-full smart:bg-indigo-600", style: { width: `${percent ?? 0}%` } }) })), (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, type: "file", accept: fieldOptions?.possibilities, hidden: true, onChange: onFileChange })] })] }));
+}
+//# sourceMappingURL=input-attachment.js.map

package/src/lib/components/input/attachment/input-attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-attachment.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/attachment/input-attachment.tsx"],"names":[],"mappings":";;AAiCA,oDA2DC;;AA5FD,iCAA8B;AAE9B,oDAAwD;AACxD,4DAAgD;AAChD,gDAAkD;AAClD,iDAA6C;AAC7C,2DAAsD;AAGtD,MAAM,aAAa,GAAG;IACpB,aAAa;IACb,iBAAiB;IACjB,mBAAmB;IACnB,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,aAAa,GAAG;IACpB,YAAY;IACZ,YAAY;IACZ,oBAAoB;IACpB,eAAe;IACf,iBAAiB;CAClB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;;;;;;GAOG;AACH,SAAgB,oBAAoB,CAAI,KAA8B;IACpE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,GACpB,GAAG,IAAA,6BAAY,EAAC,KAAK,CAAC,CAAC;IACxB,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IAEnB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,6DACE,mCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,aACzC,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,iCAAM,SAAS,EAAC,iCAAiC,kBAAS,IACjE,EACR,iCAAK,SAAS,EAAE,IAAA,gBAAE,EAAC,aAAa,EAAE,SAAS,CAAC,aAC1C,uBAAC,oBAAW,IAAC,OAAO,EAAE,gBAAgB,YACnC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,GAChB,EACb,KAAK,IAAI,CACR,6DACE,uBAAC,oBAAW,IAAC,OAAO,EAAE,iBAAiB,YACpC,CAAC,CAAC,UAAU,CAAC,GACF,EACd,uBAAC,oBAAW,IAAC,OAAO,EAAE,mBAAmB,YACtC,CAAC,CAAC,QAAQ,CAAC,GACA,EACd,iCAAM,SAAS,EAAC,4DAA4D,YACzE,KAAK,CAAC,QAAQ,GACV,IACN,CACJ,EACA,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,mGAAmG,YAChH,gCACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,IAAI,CAAC,GAAG,EAAE,GACpC,GACE,CACP,EACD,kCACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,YAAY,EAAE,aAAa,EACnC,MAAM,QACN,QAAQ,EAAE,YAAY,GACtB,IACE,IACL,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/input/attachment/preset/input-attachment-preset.d.ts

@@ -0,0 +1,10 @@
+import { SmartInputFieldProps } from '../../input.types';
+/**
+ * Styled `attachment` field (preset, the Angular
+ * `InputAttachmentPresetComponent`): a Preline drop zone ("drop file here or
+ * browse") that opens the hidden file input on click / Enter / Space and
+ * uploads a dropped file ({@link useInputFileDropZone}), a preview card with
+ * the file name and the download / delete buttons, and the upload progress.
+ * `className` is appended to the group's classes.
+ */
+export declare function SmartInputAttachmentPreset<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;