@smartsoft001/react 0.0.0-stage → 2.193.0

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

@@ -0,0 +1,8 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * The colour field (`<smart-input-color>`, Angular `InputColorComponent`): a
+ * swatch of the colour, a picker and a `×` button that clears it. Angular
+ * opened the `ngx-color-picker` popup on the input; this uses the browser's
+ * native `<input type="color">` instead.
+ */
+export declare function SmartInputColor<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputColor = SmartInputColor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_names_1 = require("../../../utils/class-names");
+const use_input_color_1 = require("./use-input-color");
+const LABEL_CLASSES = 'smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white';
+/**
+ * The colour field (`<smart-input-color>`, Angular `InputColorComponent`): a
+ * swatch of the colour, a picker and a `×` button that clears it. Angular
+ * opened the `ngx-color-picker` popup on the input; this uses the browser's
+ * native `<input type="color">` instead.
+ */
+function SmartInputColor(props) {
+    const { className } = props;
+    const id = (0, react_1.useId)();
+    const { control, required, label, color, selectColor, clear } = (0, use_input_color_1.useInputColor)(props);
+    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)('smart:mt-2 smart:flex smart:items-center smart:gap-x-2', className), children: [(0, jsx_runtime_1.jsx)("span", { className: "smart:inline-block smart:h-8 smart:w-8 smart:rounded smart:border smart:border-gray-300 smart:dark:border-gray-600", style: color ? { background: color } : undefined }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "color", value: color || '#000000', onChange: (e) => selectColor(e.target.value), className: "smart:h-8 smart:w-8 smart:cursor-pointer smart:rounded smart:border-0 smart:bg-transparent" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clear, className: "smart:rounded-md smart:bg-red-600 smart:px-2 smart:py-1 smart:text-xs smart:font-semibold smart:text-white smart:hover:bg-red-500", children: "\u00D7" })] })] }));
+}
+//# sourceMappingURL=input-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-color.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/color/input-color.tsx"],"names":[],"mappings":";;AAeA,0CAyCC;;AAxDD,iCAA8B;AAE9B,4DAAgD;AAEhD,uDAAkD;AAElD,MAAM,aAAa,GACjB,yFAAyF,CAAC;AAE5F;;;;;GAKG;AACH,SAAgB,eAAe,CAAI,KAA8B;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAC3D,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IAEvB,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,iCACE,SAAS,EAAE,IAAA,gBAAE,EACX,wDAAwD,EACxD,SAAS,CACV,aAED,iCACE,SAAS,EAAC,oHAAoH,EAC9H,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,GAChD,EACF,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,SAAS,EAAC,4FAA4F,GACtG,EACF,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,EACd,SAAS,EAAC,mIAAmI,uBAGtI,IACL,IACL,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,7 @@
+import { SmartInputFieldProps } from '../../input.types';
+/**
+ * Preline-styled colour field (preset, Angular `InputColorPresetComponent`):
+ * a framed swatch (white without a colour), the native colour picker, the
+ * colour's hex code and a clear button.
+ */
+export declare function SmartInputColorPreset<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputColorPreset = SmartInputColorPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_names_1 = require("../../../../utils/class-names");
+const use_input_color_1 = require("../use-input-color");
+const LABEL_CLASSES = 'smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white';
+const FRAME_CLASSES = [
+    'smart:mt-2',
+    'smart:flex',
+    'smart:items-center',
+    'smart:gap-x-3',
+    'smart:p-2',
+    'smart:bg-white',
+    'smart:dark:bg-gray-800',
+    'smart:border',
+    'smart:border-gray-200',
+    'smart:dark:border-gray-700',
+    'smart:rounded-lg',
+    'smart:focus-within:ring-1',
+    'smart:focus-within:ring-blue-500',
+    'smart:dark:focus-within:ring-blue-600',
+];
+const SWATCH_CLASSES = 'smart:inline-block smart:size-8 smart:rounded-md smart:border smart:border-gray-200 smart:dark:border-gray-700';
+const PICKER_CLASSES = 'smart:size-8 smart:cursor-pointer smart:rounded-md smart:border-0 smart:bg-transparent';
+const HEX_CLASSES = 'smart:flex-1 smart:text-sm smart:font-medium smart:text-gray-900 smart:dark:text-white smart:uppercase';
+const CLEAR_CLASSES = 'smart:rounded-md smart:bg-red-600 smart:px-2 smart:py-1 smart:text-xs smart:font-semibold smart:text-white smart:hover:bg-red-500';
+/**
+ * Preline-styled colour field (preset, Angular `InputColorPresetComponent`):
+ * a framed swatch (white without a colour), the native colour picker, the
+ * colour's hex code and a clear button.
+ */
+function SmartInputColorPreset(props) {
+    const { className } = props;
+    const id = (0, react_1.useId)();
+    const { control, required, label, color, selectColor, clear } = (0, use_input_color_1.useInputColor)(props);
+    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, "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)(FRAME_CLASSES, className), "data-role": "color-frame", children: [(0, jsx_runtime_1.jsx)("span", { className: SWATCH_CLASSES, style: { background: color || '#ffffff' }, "data-role": "swatch" }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "color", value: color || '#000000', onChange: (e) => selectColor(e.target.value), className: PICKER_CLASSES, "data-role": "color-input" }), (0, jsx_runtime_1.jsx)("span", { className: HEX_CLASSES, "data-role": "hex", children: color || '' }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clear, className: CLEAR_CLASSES, "data-role": "clear", children: "\u00D7" })] })] }));
+}
+//# sourceMappingURL=input-color-preset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-color-preset.js","sourceRoot":"","sources":["../../../../../../../../../../packages/shared/react/src/lib/components/input/color/preset/input-color-preset.tsx"],"names":[],"mappings":";;AA2CA,sDA0CC;;AArFD,iCAA8B;AAE9B,+DAAmD;AAEnD,wDAAmD;AAEnD,MAAM,aAAa,GACjB,yFAAyF,CAAC;AAE5F,MAAM,aAAa,GAAG;IACpB,YAAY;IACZ,YAAY;IACZ,oBAAoB;IACpB,eAAe;IACf,WAAW;IACX,gBAAgB;IAChB,wBAAwB;IACxB,cAAc;IACd,uBAAuB;IACvB,4BAA4B;IAC5B,kBAAkB;IAClB,2BAA2B;IAC3B,kCAAkC;IAClC,uCAAuC;CACxC,CAAC;AAEF,MAAM,cAAc,GAClB,gHAAgH,CAAC;AAEnH,MAAM,cAAc,GAClB,wFAAwF,CAAC;AAE3F,MAAM,WAAW,GACf,wGAAwG,CAAC;AAE3G,MAAM,aAAa,GACjB,mIAAmI,CAAC;AAEtI;;;;GAIG;AACH,SAAgB,qBAAqB,CAAI,KAA8B;IACrE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAC3D,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IAEvB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,6DACE,mCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,eAAY,OAAO,aAC5D,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,iCAAM,SAAS,EAAC,iCAAiC,kBAAS,IACjE,EACR,iCAAK,SAAS,EAAE,IAAA,gBAAE,EAAC,aAAa,EAAE,SAAS,CAAC,eAAY,aAAa,aACnE,iCACE,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,IAAI,SAAS,EAAE,eAC/B,QAAQ,GAClB,EACF,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,SAAS,EAAE,cAAc,eACf,aAAa,GACvB,EACF,iCAAM,SAAS,EAAE,WAAW,eAAY,KAAK,YAC1C,KAAK,IAAI,EAAE,GACP,EACP,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,EACd,SAAS,EAAE,aAAa,eACd,OAAO,uBAGV,IACL,IACL,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,26 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * The colour logic shared by `SmartInputColor` and `SmartInputColorPreset`
+ * (the Angular components held it twice): the shown colour is read from the
+ * control when the control is set, then follows the picker. Picking or
+ * clearing marks the control dirty and touched; clearing sets `null`.
+ */
+export declare function useInputColor<T>(props: SmartInputFieldProps<T>): {
+    color: string | null;
+    selectColor: (value: string) => void;
+    clear: () => void;
+    control: import("../../../forms").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: import("dist/packages/shared/models/src").IFieldOptions | undefined;
+    setValue: (value: unknown) => void;
+    markAsTouched: () => void | undefined;
+    autoFocus: boolean;
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputColor = useInputColor;
+const react_1 = require("react");
+const use_input_1 = require("../base/use-input");
+/**
+ * The colour logic shared by `SmartInputColor` and `SmartInputColorPreset`
+ * (the Angular components held it twice): the shown colour is read from the
+ * control when the control is set, then follows the picker. Picking or
+ * clearing marks the control dirty and touched; clearing sets `null`.
+ */
+function useInputColor(props) {
+    const input = (0, use_input_1.useInput)(props);
+    const { control } = input;
+    const [color, setColor] = (0, react_1.useState)(control?.value ?? null);
+    const [colorControl, setColorControl] = (0, react_1.useState)(control);
+    // Angular's `afterSetOptionsHandler`: a new control resets the colour.
+    if (colorControl !== control) {
+        setColorControl(control);
+        setColor(control?.value ?? null);
+    }
+    const selectColor = (value) => {
+        if (!control)
+            return;
+        control.markAsDirty();
+        control.markAllAsTouched();
+        control.setValue(value);
+        setColor(value);
+    };
+    const clear = () => {
+        if (!control)
+            return;
+        setColor('');
+        control.markAsDirty();
+        control.markAllAsTouched();
+        control.setValue(null);
+    };
+    return { ...input, color, selectColor, clear };
+}
+//# sourceMappingURL=use-input-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-color.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/color/use-input-color.ts"],"names":[],"mappings":";;AAWA,sCA+BC;AA1CD,iCAAiC;AAEjC,iDAA6C;AAG7C;;;;;GAKG;AACH,SAAgB,aAAa,CAAI,KAA8B;IAC7D,MAAM,KAAK,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAgB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAAC;IAE1D,uEAAuE;IACvE,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;QAC7B,eAAe,CAAC,OAAO,CAAC,CAAC;QACzB,QAAQ,CAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QACpC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,CAAC,WAAW,EAAE,CAAC;QACtB,OAAO,CAAC,gBAAgB,EAAE,CAAC;QAC3B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACxB,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,OAAO,CAAC,WAAW,EAAE,CAAC;QACtB,OAAO,CAAC,gBAAgB,EAAE,CAAC;QAC3B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;AACjD,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/currency/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC;AACjC,yEAA+C"}

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

@@ -0,0 +1,8 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * The amount field (`<smart-input-currency>`, Angular
+ * `InputCurrencyComponent`): a number input with `step="0.01"`. As in
+ * Angular, nothing is formatted: an empty field sets `null`, anything else the
+ * parsed number.
+ */
+export declare function SmartInputCurrency<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputCurrency = SmartInputCurrency;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_names_1 = require("../../../utils/class-names");
+const use_input_1 = require("../base/use-input");
+const number_value_1 = require("../int/number-value");
+const LABEL_CLASSES = 'smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white';
+const INPUT_CLASSES = [
+    'smart:mt-2',
+    'smart:block',
+    'smart:w-full',
+    'smart:rounded-md',
+    'smart:bg-white',
+    'smart:px-3',
+    'smart:py-1.5',
+    'smart:text-base',
+    'smart:text-gray-900',
+    'smart:outline-1',
+    '-outline-offset-1',
+    'smart:outline-gray-300',
+    'smart:placeholder:text-gray-400',
+    'smart:focus:outline-2',
+    'smart:focus:outline-offset-2',
+    'smart:focus:outline-indigo-600',
+    'smart:sm:text-sm/6',
+    'smart:dark:bg-white/5',
+    'smart:dark:text-white',
+    'smart:dark:outline-white/10',
+    'smart:dark:placeholder:text-gray-500',
+    'smart:dark:focus:outline-indigo-500',
+];
+/**
+ * The amount field (`<smart-input-currency>`, Angular
+ * `InputCurrencyComponent`): a number input with `step="0.01"`. As in
+ * Angular, nothing is formatted: an empty field sets `null`, anything else the
+ * parsed number.
+ */
+function SmartInputCurrency(props) {
+    const { className } = props;
+    const id = (0, react_1.useId)();
+    const { control, value, required, disabled, label, autoFocus, setValue, markAsTouched, } = (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", { 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.jsx)("input", { id: id, type: "number", step: "0.01", className: (0, class_names_1.cn)(INPUT_CLASSES, className), value: value ?? '', disabled: disabled, autoFocus: autoFocus, onChange: (e) => setValue((0, number_value_1.toNumberValue)(e.target.value)), onBlur: markAsTouched })] }));
+}
+//# sourceMappingURL=input-currency.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-currency.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/currency/input-currency.tsx"],"names":[],"mappings":";;AAyCA,gDAmCC;;AA5ED,iCAA8B;AAE9B,4DAAgD;AAChD,iDAA6C;AAE7C,sDAAoD;AAEpD,MAAM,aAAa,GACjB,yFAAyF,CAAC;AAE5F,MAAM,aAAa,GAAG;IACpB,YAAY;IACZ,aAAa;IACb,cAAc;IACd,kBAAkB;IAClB,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,iBAAiB;IACjB,qBAAqB;IACrB,iBAAiB;IACjB,mBAAmB;IACnB,wBAAwB;IACxB,iCAAiC;IACjC,uBAAuB;IACvB,8BAA8B;IAC9B,gCAAgC;IAChC,oBAAoB;IACpB,uBAAuB;IACvB,uBAAuB;IACvB,6BAA6B;IAC7B,sCAAsC;IACtC,qCAAqC;CACtC,CAAC;AAEF;;;;;GAKG;AACH,SAAgB,kBAAkB,CAAI,KAA8B;IAClE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,aAAa,GACd,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpB,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,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAA,gBAAE,EAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAA,4BAAa,EAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACxD,MAAM,EAAE,aAAa,GACrB,IACD,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,7 @@
+import { SmartInputFieldProps } from '../../input.types';
+/**
+ * Preline-styled amount field (preset, Angular
+ * `InputCurrencyPresetComponent`): the number input of `SmartInputCurrency`
+ * with a leading currency icon.
+ */
+export declare function SmartInputCurrencyPreset<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputCurrencyPreset = SmartInputCurrencyPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_names_1 = require("../../../../utils/class-names");
+const use_input_1 = require("../../base/use-input");
+const number_value_1 = require("../../int/number-value");
+const LABEL_CLASSES = 'smart:block smart:text-sm smart:font-medium smart:mb-2 smart:text-gray-800 smart:dark:text-gray-200';
+const ADORNMENT_CLASSES = 'smart:absolute smart:inset-y-0 smart:start-0 smart:flex smart:items-center smart:pointer-events-none smart:ps-4 smart:peer-disabled:opacity-50 smart:peer-disabled:pointer-events-none';
+const INPUT_CLASSES = [
+    'smart:peer',
+    'smart:py-2.5',
+    'smart:sm:py-3',
+    'smart:px-4',
+    'smart:ps-11',
+    'smart:block',
+    'smart:w-full',
+    '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:placeholder:text-gray-500',
+    'smart:dark:placeholder:text-gray-400',
+    'smart:focus:border-blue-600',
+    'smart:dark:focus:border-blue-500',
+    'smart:focus:ring-1',
+    'smart:focus:ring-blue-600',
+    'smart:dark:focus:ring-blue-500',
+    'smart:disabled:opacity-50',
+    'smart:disabled:pointer-events-none',
+];
+/**
+ * Preline-styled amount field (preset, Angular
+ * `InputCurrencyPresetComponent`): the number input of `SmartInputCurrency`
+ * with a leading currency icon.
+ */
+function SmartInputCurrencyPreset(props) {
+    const { className } = props;
+    const id = (0, react_1.useId)();
+    const { control, value, required, disabled, label, autoFocus, setValue, markAsTouched, } = (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", { 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: "smart:relative", children: [(0, jsx_runtime_1.jsx)("div", { className: ADORNMENT_CLASSES, "data-role": "currency-adornment", children: (0, jsx_runtime_1.jsxs)("svg", { className: "smart:shrink-0 smart:size-4 smart:text-gray-500 smart:dark:text-gray-400", 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)("line", { x1: "12", x2: "12", y1: "2", y2: "22" }), (0, jsx_runtime_1.jsx)("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })] }) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "number", step: "0.01", className: (0, class_names_1.cn)(INPUT_CLASSES, className), value: value ?? '', disabled: disabled, autoFocus: autoFocus, onChange: (e) => setValue((0, number_value_1.toNumberValue)(e.target.value)), onBlur: markAsTouched })] })] }));
+}
+//# sourceMappingURL=input-currency-preset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-currency-preset.js","sourceRoot":"","sources":["../../../../../../../../../../packages/shared/react/src/lib/components/input/currency/preset/input-currency-preset.tsx"],"names":[],"mappings":";;AA8CA,4DAuDC;;AArGD,iCAA8B;AAE9B,+DAAmD;AACnD,oDAAgD;AAEhD,yDAAuD;AAEvD,MAAM,aAAa,GACjB,qGAAqG,CAAC;AAExG,MAAM,iBAAiB,GACrB,wLAAwL,CAAC;AAE3L,MAAM,aAAa,GAAG;IACpB,YAAY;IACZ,cAAc;IACd,eAAe;IACf,YAAY;IACZ,aAAa;IACb,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,wBAAwB;IACxB,cAAc;IACd,uBAAuB;IACvB,4BAA4B;IAC5B,kBAAkB;IAClB,kBAAkB;IAClB,qBAAqB;IACrB,uBAAuB;IACvB,iCAAiC;IACjC,sCAAsC;IACtC,6BAA6B;IAC7B,kCAAkC;IAClC,oBAAoB;IACpB,2BAA2B;IAC3B,gCAAgC;IAChC,2BAA2B;IAC3B,oCAAoC;CACrC,CAAC;AAEF;;;;GAIG;AACH,SAAgB,wBAAwB,CAAI,KAA8B;IACxE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,aAAa,GACd,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpB,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,EAAC,gBAAgB,aAC7B,gCAAK,SAAS,EAAE,iBAAiB,eAAY,oBAAoB,YAC/D,iCACE,SAAS,EAAC,0EAA0E,EACpF,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,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACvC,iCAAM,CAAC,EAAC,mDAAmD,GAAG,IAC1D,GACF,EACN,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAA,gBAAE,EAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAA,4BAAa,EAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACxD,MAAM,EAAE,aAAa,GACrB,IACE,IACL,CACJ,CAAC;AACJ,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/date/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B;AAC7B,qEAA2C"}

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

@@ -0,0 +1,12 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * The `date` field (the Angular `InputDateComponent`,
+ * `<smart-input-date>`): the model label and a native `type="date"` input
+ * bound to the control (`YYYY-MM-DD`). `className` is appended to the input's
+ * classes.
+ *
+ * The Angular component's `valueChanges` subscription re-formatted a value
+ * that is not 10 characters long with moment, but that call is commented out
+ * there (`TODO: re-enable moment`), so the value is bound as it is here too.
+ */
+export declare function SmartInputDate<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputDate = SmartInputDate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_names_1 = require("../../../utils/class-names");
+const use_input_1 = require("../base/use-input");
+const LABEL_CLASSES = [
+    'smart:block',
+    'smart:text-sm/6',
+    'smart:font-medium',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const INPUT_CLASSES = [
+    'smart:mt-2',
+    'smart:block',
+    'smart:w-full',
+    'smart:rounded-md',
+    'smart:bg-white',
+    'smart:px-3',
+    'smart:py-1.5',
+    'smart:text-base',
+    'smart:text-gray-900',
+    'smart:outline-1',
+    '-outline-offset-1',
+    'smart:outline-gray-300',
+    'smart:placeholder:text-gray-400',
+    'smart:focus:outline-2',
+    'smart:focus:outline-offset-2',
+    'smart:focus:outline-indigo-600',
+    'smart:sm:text-sm/6',
+    'smart:dark:bg-white/5',
+    'smart:dark:text-white',
+    'smart:dark:outline-white/10',
+    'smart:dark:placeholder:text-gray-500',
+    'smart:dark:focus:outline-indigo-500',
+].join(' ');
+/**
+ * The `date` field (the Angular `InputDateComponent`,
+ * `<smart-input-date>`): the model label and a native `type="date"` input
+ * bound to the control (`YYYY-MM-DD`). `className` is appended to the input's
+ * classes.
+ *
+ * The Angular component's `valueChanges` subscription re-formatted a value
+ * that is not 10 characters long with moment, but that call is commented out
+ * there (`TODO: re-enable moment`), so the value is bound as it is here too.
+ */
+function SmartInputDate(props) {
+    const { className } = props;
+    const { control, value, required, disabled, label, setValue, markAsTouched, autoFocus, } = (0, use_input_1.useInput)(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.jsx)("input", { id: id, type: "date", className: (0, class_names_1.cn)(INPUT_CLASSES, className), value: value ?? '', disabled: disabled, autoFocus: autoFocus, onChange: (e) => setValue(e.target.value), onBlur: markAsTouched })] }));
+}
+//# sourceMappingURL=input-date.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-date.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/date/input-date.tsx"],"names":[],"mappings":";;AAiDA,wCAkCC;;AAnFD,iCAA8B;AAE9B,4DAAgD;AAChD,iDAA6C;AAG7C,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,aAAa;IACb,cAAc;IACd,kBAAkB;IAClB,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,iBAAiB;IACjB,qBAAqB;IACrB,iBAAiB;IACjB,mBAAmB;IACnB,wBAAwB;IACxB,iCAAiC;IACjC,uBAAuB;IACvB,8BAA8B;IAC9B,gCAAgC;IAChC,oBAAoB;IACpB,uBAAuB;IACvB,uBAAuB;IACvB,6BAA6B;IAC7B,sCAAsC;IACtC,qCAAqC;CACtC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;;;;;;;;GASG;AACH,SAAgB,cAAc,CAAI,KAA8B;IAC9D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAS,GACV,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IACpB,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,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAA,gBAAE,EAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,MAAM,EAAE,aAAa,GACrB,IACD,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,12 @@
+import { SmartInputFieldProps } from '../../input.types';
+/**
+ * Styled `date` field (preset, the Angular `InputDatePresetComponent`,
+ * `<smart-input-date-preset>`): the Preline datepicker input look of
+ * {@link SmartInputDate}. Register it as `inputFieldComponents[FieldType.date]`
+ * on `SmartProvider`.
+ *
+ * Like the Angular preset it renders a native `type="date"` input: the
+ * Preline advanced datepicker needs Vanilla Calendar Pro and the Preline JS
+ * plugin, which the library does not ship.
+ */
+export declare function SmartInputDatePreset<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputDatePreset = SmartInputDatePreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_names_1 = require("../../../../utils/class-names");
+const use_input_1 = require("../../base/use-input");
+const LABEL_CLASSES = [
+    'smart:block',
+    'smart:mb-2',
+    'smart:text-sm',
+    'smart:font-medium',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const INPUT_CLASSES = [
+    // Preline: py-3 px-4 block w-full
+    'smart:py-3',
+    'smart:px-4',
+    'smart:block',
+    'smart:w-full',
+    // Preline: bg-layer
+    'smart:bg-white',
+    'smart:dark:bg-gray-800',
+    // Preline: border-layer-line
+    'smart:border',
+    'smart:border-gray-200',
+    'smart:dark:border-gray-700',
+    // Preline: rounded-lg sm:text-sm
+    'smart:rounded-lg',
+    'smart:sm:text-sm',
+    // Preline: text-foreground
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+    // Preline: placeholder:text-muted-foreground-1
+    'smart:placeholder:text-gray-500',
+    'smart:dark:placeholder:text-gray-400',
+    // Preline: focus:border-primary-focus focus:ring-primary-focus
+    'smart:focus:border-blue-700',
+    'smart:dark:focus:border-blue-600',
+    'smart:focus:ring-1',
+    'smart:focus:ring-blue-700',
+    'smart:dark:focus:ring-blue-600',
+    // Preline: disabled:opacity-50 disabled:pointer-events-none
+    'smart:disabled:opacity-50',
+    'smart:disabled:pointer-events-none',
+].join(' ');
+/**
+ * Styled `date` field (preset, the Angular `InputDatePresetComponent`,
+ * `<smart-input-date-preset>`): the Preline datepicker input look of
+ * {@link SmartInputDate}. Register it as `inputFieldComponents[FieldType.date]`
+ * on `SmartProvider`.
+ *
+ * Like the Angular preset it renders a native `type="date"` input: the
+ * Preline advanced datepicker needs Vanilla Calendar Pro and the Preline JS
+ * plugin, which the library does not ship.
+ */
+function SmartInputDatePreset(props) {
+    const { className } = props;
+    const { control, value, required, disabled, label, setValue, markAsTouched, autoFocus, } = (0, use_input_1.useInput)(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.jsx)("input", { id: id, type: "date", className: (0, class_names_1.cn)(INPUT_CLASSES, className), value: value ?? '', disabled: disabled, autoFocus: autoFocus, onChange: (e) => setValue(e.target.value), onBlur: markAsTouched })] }));
+}
+//# sourceMappingURL=input-date-preset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-date-preset.js","sourceRoot":"","sources":["../../../../../../../../../../packages/shared/react/src/lib/components/input/date/preset/input-date-preset.tsx"],"names":[],"mappings":";;AA0DA,oDAkCC;;AA5FD,iCAA8B;AAE9B,+DAAmD;AACnD,oDAAgD;AAGhD,MAAM,aAAa,GAAG;IACpB,aAAa;IACb,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,aAAa,GAAG;IACpB,kCAAkC;IAClC,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,cAAc;IACd,oBAAoB;IACpB,gBAAgB;IAChB,wBAAwB;IACxB,6BAA6B;IAC7B,cAAc;IACd,uBAAuB;IACvB,4BAA4B;IAC5B,iCAAiC;IACjC,kBAAkB;IAClB,kBAAkB;IAClB,2BAA2B;IAC3B,qBAAqB;IACrB,uBAAuB;IACvB,+CAA+C;IAC/C,iCAAiC;IACjC,sCAAsC;IACtC,+DAA+D;IAC/D,6BAA6B;IAC7B,kCAAkC;IAClC,oBAAoB;IACpB,2BAA2B;IAC3B,gCAAgC;IAChC,4DAA4D;IAC5D,2BAA2B;IAC3B,oCAAoC;CACrC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;;;;;;;;GASG;AACH,SAAgB,oBAAoB,CAAI,KAA8B;IACpE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAS,GACV,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IACpB,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,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAA,gBAAE,EAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,MAAM,EAAE,aAAa,GACrB,IACD,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/input/date-range/index.d.ts

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

package/src/lib/components/input/date-range/index.js

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

package/src/lib/components/input/date-range/index.js.map

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

package/src/lib/components/input/date-range/input-date-range.d.ts

@@ -0,0 +1,13 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * The `dateRange` field (the Angular `InputDateRangeComponent`,
+ * `<smart-input-date-range>`): the model label and the `<SmartDateRange>`
+ * picker showing the control's range. A picked or cleared range sets the
+ * value and marks the control dirty (the Angular `ngModel` binding).
+ * `className` is appended to the picker's classes.
+ *
+ * Angular marked the control touched on a click on the `<smart-date-range>`
+ * host element; the picker renders no such element here, so it is wrapped in
+ * a box-less (`display: contents`) element that does it.
+ */
+export declare function SmartInputDateRange<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/input/date-range/input-date-range.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputDateRange = SmartInputDateRange;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_names_1 = require("../../../utils/class-names");
+const date_range_1 = require("../../date-range/date-range");
+const use_input_1 = require("../base/use-input");
+const LABEL_CLASSES = [
+    'smart:block',
+    'smart:text-sm/6',
+    'smart:font-medium',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const WIDGET_CLASSES = ['smart:mt-2', 'smart:block', 'smart:w-full'].join(' ');
+/**
+ * The `dateRange` field (the Angular `InputDateRangeComponent`,
+ * `<smart-input-date-range>`): the model label and the `<SmartDateRange>`
+ * picker showing the control's range. A picked or cleared range sets the
+ * value and marks the control dirty (the Angular `ngModel` binding).
+ * `className` is appended to the picker's classes.
+ *
+ * Angular marked the control touched on a click on the `<smart-date-range>`
+ * host element; the picker renders no such element here, so it is wrapped in
+ * a box-less (`display: contents`) element that does it.
+ */
+function SmartInputDateRange(props) {
+    const { className } = props;
+    const { control, value, required, label, setValue, markAsTouched } = (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.jsx)("div", { className: "smart:contents", onClick: markAsTouched, children: (0, jsx_runtime_1.jsx)(date_range_1.SmartDateRange, { className: (0, class_names_1.cn)(WIDGET_CLASSES, className), value: value ?? null, onValueChange: setValue }) })] }));
+}
+//# sourceMappingURL=input-date-range.js.map

package/src/lib/components/input/date-range/input-date-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-date-range.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/date-range/input-date-range.tsx"],"names":[],"mappings":";;AA4BA,kDAsBC;;AAhDD,4DAAgD;AAChD,4DAA6D;AAC7D,iDAA6C;AAG7C,MAAM,aAAa,GAAG;IACpB,aAAa;IACb,iBAAiB;IACjB,mBAAmB;IACnB,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,cAAc,GAAG,CAAC,YAAY,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE/E;;;;;;;;;;GAUG;AACH,SAAgB,mBAAmB,CAAI,KAA8B;IACnE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,GAChE,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAElB,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,gCAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,aAAa,YACpD,uBAAC,2BAAc,IACb,SAAS,EAAE,IAAA,gBAAE,EAAC,cAAc,EAAE,SAAS,CAAC,EACxC,KAAK,EAAG,KAAuC,IAAI,IAAI,EACvD,aAAa,EAAE,QAAQ,GACvB,GACE,IACL,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/input/date-range/preset/input-date-range-preset.d.ts

@@ -0,0 +1,16 @@
+import { SmartInputFieldProps } from '../../input.types';
+/**
+ * Styled `dateRange` field (preset, the Angular
+ * `InputDateRangePresetComponent`, `<smart-input-date-range-preset>`): the
+ * Preline label and two native `type="date"` inputs (start – end). Register
+ * it as `inputFieldComponents[FieldType.dateRange]` on `SmartProvider`.
+ *
+ * The control value stays the `IDateRange` shape (`{ start, end }`,
+ * `YYYY-MM-DD`): a changed input sets it and marks the control dirty, and
+ * clearing both ends sets `null`; leaving either input marks the control
+ * touched. `className` is appended to the classes of the inputs' row. As in
+ * Angular the Preline range datepicker (Vanilla Calendar Pro and the Preline
+ * JS plugin) is not used, and the inputs are not bound to the control's
+ * disabled state.
+ */
+export declare function SmartInputDateRangePreset<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;