@smartsoft001/crud-shell-react 0.0.0-stage → 2.193.0

package/src/lib/components/filter/check/filter-check.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterCheck = SmartCrudFilterCheck;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const use_crud_filter_1 = require("../base/use-crud-filter");
+/**
+ * A checkbox with the Angular `[checked]` property binding: the box follows
+ * the user's click right away, and `checked` is written to it whenever it
+ * changes (the read is debounced, so the value follows 500 ms later).
+ */
+function FilterCheckbox({ checked, onCheckedChange, }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current)
+            ref.current.checked = checked;
+    }, [checked]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: ref, type: "checkbox", defaultChecked: checked, onChange: (e) => onCheckedChange(e.target.checked), className: "smart:h-4 smart:w-4 smart:rounded smart:border-gray-300 smart:text-indigo-600 smart:focus:ring-indigo-500" }));
+}
+/**
+ * `<smart-crud-filter-check>` (Angular `FilterCheckComponent`): a checkbox
+ * per possibility, checked when its id is among the item's values, and a
+ * clear button while any is checked. Each value is its own query entry.
+ */
+function SmartCrudFilterCheck(props) {
+    const t = (0, react_2.useTranslate)();
+    const { value, possibilities, setValue, refresh } = (0, use_crud_filter_1.useCrudFilter)(props);
+    const values = value ?? [];
+    const hasCheckedValues = Array.isArray(value) && value.length > 0;
+    const list = (possibilities ?? []).map((pos) => ({
+        value: pos,
+        isCheck: values.some((r) => r === pos.id),
+    }));
+    const onCheckChange = (checked, entry) => {
+        if (checked && !values.some((r) => r === entry.id)) {
+            setValue([...values, entry.id]);
+        }
+        if (!checked && values.some((r) => r === entry.id)) {
+            setValue(value?.filter((r) => r !== entry.id));
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "smart:block smart:w-full", children: (0, jsx_runtime_1.jsxs)("fieldset", { className: "smart:w-full", children: [(0, jsx_runtime_1.jsxs)("legend", { className: "smart:flex smart:items-center smart:justify-between smart:text-sm smart:font-medium smart:text-gray-900", children: [(0, jsx_runtime_1.jsx)("span", { children: t(props.item?.label || '') }), hasCheckedValues && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => refresh([]), "aria-label": "clear", className: "smart:rounded smart:px-2 smart:py-1 smart:text-red-600 smart:hover:bg-red-50", children: "\u00D7" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "smart:mt-2 smart:space-y-2", children: list.map((entry) => ((0, jsx_runtime_1.jsxs)("label", { className: "smart:flex smart:items-center smart:gap-x-2", children: [(0, jsx_runtime_1.jsx)(FilterCheckbox, { checked: entry.isCheck, onCheckedChange: (checked) => onCheckChange(checked, entry.value) }), (0, jsx_runtime_1.jsx)("span", { className: "smart:text-sm smart:text-gray-900", children: t(entry.value.text) })] }, entry.value.id))) })] }) }));
+}
+//# sourceMappingURL=filter-check.js.map

package/src/lib/components/filter/check/filter-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-check.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/check/filter-check.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { SmartCrudFilterProps } from '../filter.types';
+/**
+ * `<smart-crud-filter-date>` (Angular `FilterDateComponent`): the item label,
+ * the shared date editor bound to the item's value (`YYYY-MM-DD`) and a
+ * clear button while it has one.
+ */
+export declare function SmartCrudFilterDate(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterDate = SmartCrudFilterDate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@smartsoft001/react");
+const use_crud_filter_date_1 = require("./use-crud-filter-date");
+const use_crud_filter_ng_model_1 = require("./use-crud-filter-ng-model");
+/**
+ * `<smart-crud-filter-date>` (Angular `FilterDateComponent`): the item label,
+ * the shared date editor bound to the item's value (`YYYY-MM-DD`) and a
+ * clear button while it has one.
+ */
+function SmartCrudFilterDate(props) {
+    const t = (0, react_1.useTranslate)();
+    const { customValue, setCustomValue, hasValue, refresh } = (0, use_crud_filter_date_1.useCrudFilterDate)(props);
+    const [date, setDate] = (0, use_crud_filter_ng_model_1.useCrudFilterNgModel)(customValue || '', setCustomValue);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "smart:block smart:w-full", children: [(0, jsx_runtime_1.jsx)("label", { className: "smart:mb-1 smart:block smart:text-sm smart:font-medium", children: t(props.item?.label || '') }), (0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:items-end smart:gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "smart:flex-1", children: (0, jsx_runtime_1.jsx)(react_1.SmartDateEdit, { className: "smart:flex-1", value: date, onValueChange: setDate }) }), hasValue && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => refresh(null), "aria-label": "clear", className: "smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50", children: "\u00D7" }))] })] }));
+}
+//# sourceMappingURL=filter-date.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-date.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/date/filter-date.tsx"],"names":[],"mappings":";;AAWA,kDAmCC;;AA9CD,+CAAkE;AAElE,iEAA2D;AAC3D,yEAAkE;AAGlE;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,KAA2B;IAC7D,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,GACtD,IAAA,wCAAiB,EAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,+CAAoB,EAC1C,WAAW,IAAI,EAAE,EACjB,cAAc,CACf,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,0BAA0B,aACvC,kCAAO,SAAS,EAAC,wDAAwD,YACtE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,GACrB,EACR,iCAAK,SAAS,EAAC,qDAAqD,aAClE,gCAAK,SAAS,EAAC,cAAc,YAC3B,uBAAC,qBAAa,IACZ,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,OAAO,GACtB,GACE,EACL,QAAQ,IAAI,CACX,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,gBACjB,OAAO,EAClB,SAAS,EAAC,6FAA6F,uBAGhG,CACV,IACG,IACF,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/filter/date/use-crud-filter-date.d.ts

@@ -0,0 +1,23 @@
+import { UseCrudFilterResult } from '../base/use-crud-filter';
+import { SmartCrudFilterProps } from '../filter.types';
+/** What `useCrudFilterDate` returns. */
+export interface UseCrudFilterDateResult extends UseCrudFilterResult {
+    /** The advanced from / to range is offered for an `=` item. */
+    allowAdvanced: boolean;
+    customValue: any;
+    customMinValue: any;
+    customMaxValue: any;
+    /** Sets the value as a `YYYY-MM-DD` date (debounced). */
+    setCustomValue: (val: any) => void;
+    /** Sets the `>=` value as a `YYYY-MM-DD` date (debounced). */
+    setCustomMinValue: (val: any) => void;
+    /** Sets the `<=` value as a `YYYY-MM-DD` date (debounced). */
+    setCustomMaxValue: (val: any) => void;
+}
+/**
+ * What the date filters share (the Angular `FilterDateComponent`, which the
+ * date-time and date-with-edit filters extend): `useCrudFilter` with the
+ * `customValue` / `customMinValue` / `customMaxValue` accessors, whose
+ * setters store a valid date as `YYYY-MM-DD`.
+ */
+export declare function useCrudFilterDate(props: SmartCrudFilterProps): UseCrudFilterDateResult;

package/src/lib/components/filter/date/use-crud-filter-date.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrudFilterDate = useCrudFilterDate;
+const tslib_1 = require("tslib");
+const moment_1 = tslib_1.__importDefault(require("moment"));
+const react_1 = require("react");
+const use_crud_filter_1 = require("../base/use-crud-filter");
+/**
+ * A date the user entered as the filter stores it: a valid date of at least
+ * ten characters (e.g. a `datetime-local` value) as `YYYY-MM-DD`, anything
+ * else as it is.
+ */
+function toFilterDate(val) {
+    return val?.length >= 10 && (0, moment_1.default)(val).isValid()
+        ? (0, moment_1.default)(val).format('YYYY-MM-DD')
+        : val;
+}
+/**
+ * What the date filters share (the Angular `FilterDateComponent`, which the
+ * date-time and date-with-edit filters extend): `useCrudFilter` with the
+ * `customValue` / `customMinValue` / `customMaxValue` accessors, whose
+ * setters store a valid date as `YYYY-MM-DD`.
+ */
+function useCrudFilterDate(props) {
+    const filter = (0, use_crud_filter_1.useCrudFilter)(props);
+    const { setValue, setMinValue, setMaxValue } = filter;
+    const setCustomValue = (0, react_1.useCallback)((val) => setValue(toFilterDate(val)), [setValue]);
+    const setCustomMinValue = (0, react_1.useCallback)((val) => setMinValue(toFilterDate(val)), [setMinValue]);
+    const setCustomMaxValue = (0, react_1.useCallback)((val) => setMaxValue(toFilterDate(val)), [setMaxValue]);
+    return {
+        ...filter,
+        allowAdvanced: props.item?.type === '=',
+        customValue: filter.value,
+        customMinValue: filter.minValue,
+        customMaxValue: filter.maxValue,
+        setCustomValue,
+        setCustomMinValue,
+        setCustomMaxValue,
+    };
+}
+//# sourceMappingURL=use-crud-filter-date.js.map

package/src/lib/components/filter/date/use-crud-filter-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-crud-filter-date.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/date/use-crud-filter-date.ts"],"names":[],"mappings":";;AAsCA,8CA6BC;;AAnED,4DAA4B;AAC5B,iCAAoC;AAEpC,6DAA6E;AAG7E;;;;GAIG;AACH,SAAS,YAAY,CAAC,GAAQ;IAC5B,OAAO,GAAG,EAAE,MAAM,IAAI,EAAE,IAAI,IAAA,gBAAM,EAAC,GAAG,CAAC,CAAC,OAAO,EAAE;QAC/C,CAAC,CAAC,IAAA,gBAAM,EAAC,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;QAClC,CAAC,CAAC,GAAG,CAAC;AACV,CAAC;AAiBD;;;;;GAKG;AACH,SAAgB,iBAAiB,CAC/B,KAA2B;IAE3B,MAAM,MAAM,GAAG,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IACpC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC;IAEtD,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,GAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EACzC,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,CAAC,GAAQ,EAAE,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAC5C,CAAC,WAAW,CAAC,CACd,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,CAAC,GAAQ,EAAE,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAC5C,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO;QACL,GAAG,MAAM;QACT,aAAa,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,KAAK,GAAG;QACvC,WAAW,EAAE,MAAM,CAAC,KAAK;QACzB,cAAc,EAAE,MAAM,CAAC,QAAQ;QAC/B,cAAc,EAAE,MAAM,CAAC,QAAQ;QAC/B,cAAc;QACd,iBAAiB;QACjB,iBAAiB;KAClB,CAAC;AACJ,CAAC"}

package/src/lib/components/filter/date/use-crud-filter-ng-model.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The `[ngModel]="model"` + `(ngModelChange)` binding of the Angular date
+ * filters: the editor shows what the user entered (the filter is read 500 ms
+ * later) until the bound model changes, and then shows the model.
+ */
+export declare function useCrudFilterNgModel<T>(model: T, onModelChange: (value: T) => void): [T, (value: T) => void];

package/src/lib/components/filter/date/use-crud-filter-ng-model.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrudFilterNgModel = useCrudFilterNgModel;
+const react_1 = require("react");
+/**
+ * The `[ngModel]="model"` + `(ngModelChange)` binding of the Angular date
+ * filters: the editor shows what the user entered (the filter is read 500 ms
+ * later) until the bound model changes, and then shows the model.
+ */
+function useCrudFilterNgModel(model, onModelChange) {
+    const [view, setView] = (0, react_1.useState)(model);
+    const [prevModel, setPrevModel] = (0, react_1.useState)(model);
+    let current = view;
+    if (!Object.is(prevModel, model)) {
+        setPrevModel(model);
+        setView(model);
+        current = model;
+    }
+    const onViewChange = (0, react_1.useCallback)((value) => {
+        setView(value);
+        onModelChange(value);
+    }, [onModelChange]);
+    return [current, onViewChange];
+}
+//# sourceMappingURL=use-crud-filter-ng-model.js.map

package/src/lib/components/filter/date/use-crud-filter-ng-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-crud-filter-ng-model.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/date/use-crud-filter-ng-model.ts"],"names":[],"mappings":";;AAOA,oDAuBC;AA9BD,iCAA8C;AAE9C;;;;GAIG;AACH,SAAgB,oBAAoB,CAClC,KAAQ,EACR,aAAiC;IAEjC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,IAAI,OAAO,GAAG,IAAI,CAAC;IAEnB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;QACjC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,OAAO,GAAG,KAAK,CAAC;IAClB,CAAC;IAED,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,KAAQ,EAAE,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;AACjC,CAAC"}

package/src/lib/components/filter/date-time/filter-date-time.d.ts

@@ -0,0 +1,8 @@
+import { SmartCrudFilterProps } from '../filter.types';
+/**
+ * `<smart-crud-filter-date-time>` (Angular `FilterDateTimeComponent`): the
+ * item label and a "from" / "to" pair of native `datetime-local` inputs for
+ * the `>=` / `<=` values, each with its clear button. As in Angular, a valid
+ * date-time is stored as its `YYYY-MM-DD` day.
+ */
+export declare function SmartCrudFilterDateTime(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filter/date-time/filter-date-time.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterDateTime = SmartCrudFilterDateTime;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const use_crud_filter_date_1 = require("../date/use-crud-filter-date");
+const use_crud_filter_ng_model_1 = require("../date/use-crud-filter-ng-model");
+/** One end of the range: a label, a `datetime-local` input and its clear. */
+function DateTimeRangeRow({ label, model, onModelChange, clearLabel, showClear, onClear, }) {
+    const t = (0, react_2.useTranslate)();
+    const id = (0, react_1.useId)();
+    const [value, setValue] = (0, use_crud_filter_ng_model_1.useCrudFilterNgModel)(model, onModelChange);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:items-end smart:gap-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "smart:text-sm", children: t(label) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "datetime-local", className: "smart:flex-1 smart:rounded smart:border smart:border-gray-300 smart:px-2 smart:py-1", value: value, onChange: (e) => setValue(e.target.value) }), showClear && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClear, "aria-label": clearLabel, className: "smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50", children: "\u00D7" }))] }));
+}
+/**
+ * `<smart-crud-filter-date-time>` (Angular `FilterDateTimeComponent`): the
+ * item label and a "from" / "to" pair of native `datetime-local` inputs for
+ * the `>=` / `<=` values, each with its clear button. As in Angular, a valid
+ * date-time is stored as its `YYYY-MM-DD` day.
+ */
+function SmartCrudFilterDateTime(props) {
+    const t = (0, react_2.useTranslate)();
+    const { customMinValue, customMaxValue, setCustomMinValue, setCustomMaxValue, hasMinValue, hasMaxValue, refresh, } = (0, use_crud_filter_date_1.useCrudFilterDate)(props);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "smart:block smart:w-full", children: [(0, jsx_runtime_1.jsx)("label", { className: "smart:mb-1 smart:block smart:text-sm smart:font-medium", children: t(props.item?.label || '') }), (0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:flex-col smart:gap-2", children: [(0, jsx_runtime_1.jsx)(DateTimeRangeRow, { label: "from", model: customMinValue || '', onModelChange: setCustomMinValue, clearLabel: "clear-from", showClear: hasMinValue, onClear: () => refresh(null, '>=') }), (0, jsx_runtime_1.jsx)(DateTimeRangeRow, { label: "to", model: customMaxValue || '', onModelChange: setCustomMaxValue, clearLabel: "clear-to", showClear: hasMaxValue, onClear: () => refresh(null, '<=') })] })] }));
+}
+//# sourceMappingURL=filter-date-time.js.map

package/src/lib/components/filter/date-time/filter-date-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-date-time.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/date-time/filter-date-time.tsx"],"names":[],"mappings":";;AA4DA,0DAqCC;;AAjGD,iCAA8B;AAE9B,+CAAmD;AAEnD,uEAAiE;AACjE,+EAAwE;AAGxE,6EAA6E;AAC7E,SAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,KAAK,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,OAAO,GAQR;IACC,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,+CAAoB,EAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAErE,OAAO,CACL,iCAAK,SAAS,EAAC,qDAAqD,aAClE,kCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAC,eAAe,YAC1C,CAAC,CAAC,KAAK,CAAC,GACH,EACR,kCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,gBAAgB,EACrB,SAAS,EAAC,qFAAqF,EAC/F,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACzC,EACD,SAAS,IAAI,CACZ,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACJ,UAAU,EACtB,SAAS,EAAC,6FAA6F,uBAGhG,CACV,IACG,CACP,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAgB,uBAAuB,CAAC,KAA2B;IACjE,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EACJ,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,OAAO,GACR,GAAG,IAAA,wCAAiB,EAAC,KAAK,CAAC,CAAC;IAE7B,OAAO,CACL,iCAAK,SAAS,EAAC,0BAA0B,aACvC,kCAAO,SAAS,EAAC,wDAAwD,YACtE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,GACrB,EACR,iCAAK,SAAS,EAAC,oDAAoD,aACjE,uBAAC,gBAAgB,IACf,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,cAAc,IAAI,EAAE,EAC3B,aAAa,EAAE,iBAAiB,EAChC,UAAU,EAAC,YAAY,EACvB,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,GAClC,EACF,uBAAC,gBAAgB,IACf,KAAK,EAAC,IAAI,EACV,KAAK,EAAE,cAAc,IAAI,EAAE,EAC3B,aAAa,EAAE,iBAAiB,EAChC,UAAU,EAAC,UAAU,EACrB,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,GAClC,IACE,IACF,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/filter/date-with-edit/filter-date-with-edit.d.ts

@@ -0,0 +1,9 @@
+import { SmartCrudFilterProps } from '../filter.types';
+/**
+ * `<smart-crud-filter-date-with-edit>` (Angular
+ * `FilterDateWithEditComponent`): the item label and the shared date editor
+ * for the item's value; for an `=` item an "advanced" button switches to a
+ * "from" / "to" pair of editors for the `>=` / `<=` values (removing the
+ * value), shown as well while a range value is set.
+ */
+export declare function SmartCrudFilterDateWithEdit(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filter/date-with-edit/filter-date-with-edit.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterDateWithEdit = SmartCrudFilterDateWithEdit;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const use_crud_filter_date_1 = require("../date/use-crud-filter-date");
+const use_crud_filter_ng_model_1 = require("../date/use-crud-filter-ng-model");
+const CLEAR_CLASSES = 'smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50';
+/**
+ * `<smart-date-edit class="smart:flex-1" [ngModel] (ngModelChange)>`: the
+ * shared date editor showing what the user entered until `model` changes.
+ */
+function BoundDateEdit({ model, onModelChange, }) {
+    const [value, setValue] = (0, use_crud_filter_ng_model_1.useCrudFilterNgModel)(model, onModelChange);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "smart:flex-1", children: (0, jsx_runtime_1.jsx)(react_2.SmartDateEdit, { className: "smart:flex-1", value: value, onValueChange: setValue }) }));
+}
+/** One end of the advanced range: a label, a date editor and its clear. */
+function DateRangeRow({ label, model, onModelChange, clearLabel, showClear, onClear, }) {
+    const t = (0, react_2.useTranslate)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:items-end smart:gap-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "smart:text-sm", children: t(label) }), (0, jsx_runtime_1.jsx)(BoundDateEdit, { model: model, onModelChange: onModelChange }), showClear && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClear, "aria-label": clearLabel, className: CLEAR_CLASSES, children: "\u00D7" }))] }));
+}
+/**
+ * `<smart-crud-filter-date-with-edit>` (Angular
+ * `FilterDateWithEditComponent`): the item label and the shared date editor
+ * for the item's value; for an `=` item an "advanced" button switches to a
+ * "from" / "to" pair of editors for the `>=` / `<=` values (removing the
+ * value), shown as well while a range value is set.
+ */
+function SmartCrudFilterDateWithEdit(props) {
+    const t = (0, react_2.useTranslate)();
+    const { allowAdvanced, customValue, customMinValue, customMaxValue, setCustomValue, setCustomMinValue, setCustomMaxValue, hasValue, hasMinValue, hasMaxValue, setValue, refresh, } = (0, use_crud_filter_date_1.useCrudFilterDate)(props);
+    const [advanced, setAdvanced] = (0, react_1.useState)(false);
+    const toggleAdvanced = () => {
+        const next = !advanced;
+        setAdvanced(next);
+        if (next)
+            setValue(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "smart:block smart:w-full", children: [(0, jsx_runtime_1.jsx)("label", { className: "smart:mb-1 smart:block smart:text-sm smart:font-medium", children: t(props.item?.label || '') }), !advanced ? ((0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:items-end smart:gap-2", children: [(0, jsx_runtime_1.jsx)(BoundDateEdit, { model: customValue || '', onModelChange: setCustomValue }), allowAdvanced && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleAdvanced, "aria-label": "advanced", className: "smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:hover:bg-gray-100", children: "\u2699" })), hasValue && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => refresh(null), "aria-label": "clear", className: CLEAR_CLASSES, children: "\u00D7" }))] })) : (allowAdvanced && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleAdvanced, "aria-label": "advanced", className: "smart:mb-2 smart:rounded smart:px-2 smart:py-2 smart:hover:bg-gray-100", children: "\u2699" }))), (advanced || hasMinValue || hasMaxValue) && allowAdvanced && ((0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:flex-col smart:gap-2", children: [(0, jsx_runtime_1.jsx)(DateRangeRow, { label: "from", model: customMinValue || '', onModelChange: setCustomMinValue, clearLabel: "clear-from", showClear: hasMinValue, onClear: () => refresh(null, '>=') }), (0, jsx_runtime_1.jsx)(DateRangeRow, { label: "to", model: customMaxValue || '', onModelChange: setCustomMaxValue, clearLabel: "clear-to", showClear: hasMaxValue, onClear: () => refresh(null, '<=') })] }))] }));
+}
+//# sourceMappingURL=filter-date-with-edit.js.map

package/src/lib/components/filter/date-with-edit/filter-date-with-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-date-with-edit.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/date-with-edit/filter-date-with-edit.tsx"],"names":[],"mappings":"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"}

package/src/lib/components/filter/filter.d.ts

@@ -0,0 +1,8 @@
+import { SmartCrudFilterProps } from './filter.types';
+/**
+ * `<smart-crud-filter>` (Angular `FilterComponent`): the filter field of the
+ * item's field type (date, date with edit, date-time, radio, check, flag,
+ * int; text otherwise), reading and writing the list filter through the
+ * feature's facade.
+ */
+export declare function SmartCrudFilter(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filter/filter.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilter = SmartCrudFilter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const models_1 = require("@smartsoft001/models");
+const filter_check_1 = require("./check/filter-check");
+const filter_date_1 = require("./date/filter-date");
+const filter_date_time_1 = require("./date-time/filter-date-time");
+const filter_date_with_edit_1 = require("./date-with-edit/filter-date-with-edit");
+const filter_flag_1 = require("./flag/filter-flag");
+const filter_int_1 = require("./int/filter-int");
+const filter_radio_1 = require("./radio/filter-radio");
+const filter_text_1 = require("./text/filter-text");
+function SmartCrudFilterField(props) {
+    switch (props.item?.fieldType) {
+        case models_1.FieldType.date:
+            return (0, jsx_runtime_1.jsx)(filter_date_1.SmartCrudFilterDate, { ...props });
+        case models_1.FieldType.dateWithEdit:
+            return (0, jsx_runtime_1.jsx)(filter_date_with_edit_1.SmartCrudFilterDateWithEdit, { ...props });
+        case models_1.FieldType.dateTime:
+            return (0, jsx_runtime_1.jsx)(filter_date_time_1.SmartCrudFilterDateTime, { ...props });
+        case models_1.FieldType.radio:
+            return (0, jsx_runtime_1.jsx)(filter_radio_1.SmartCrudFilterRadio, { ...props });
+        case models_1.FieldType.check:
+            return (0, jsx_runtime_1.jsx)(filter_check_1.SmartCrudFilterCheck, { ...props });
+        case models_1.FieldType.flag:
+            return (0, jsx_runtime_1.jsx)(filter_flag_1.SmartCrudFilterFlag, { ...props });
+        case models_1.FieldType.int:
+            return (0, jsx_runtime_1.jsx)(filter_int_1.SmartCrudFilterInt, { ...props });
+        default:
+            return (0, jsx_runtime_1.jsx)(filter_text_1.SmartCrudFilterText, { ...props });
+    }
+}
+/**
+ * `<smart-crud-filter>` (Angular `FilterComponent`): the filter field of the
+ * item's field type (date, date with edit, date-time, radio, check, flag,
+ * int; text otherwise), reading and writing the list filter through the
+ * feature's facade.
+ */
+function SmartCrudFilter(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "smart:py-1", children: (0, jsx_runtime_1.jsx)(SmartCrudFilterField, { ...props }) }));
+}
+//# sourceMappingURL=filter.js.map

package/src/lib/components/filter/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/filter.tsx"],"names":[],"mappings":";;AAuCA,0CAMC;;AA7CD,iDAAiD;AAEjD,uDAA4D;AAC5D,oDAAyD;AACzD,mEAAuE;AACvE,kFAAqF;AAErF,oDAAyD;AACzD,iDAAsD;AACtD,uDAA4D;AAC5D,oDAAyD;AAEzD,SAAS,oBAAoB,CAAC,KAA2B;IACvD,QAAQ,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC;QAC9B,KAAK,kBAAS,CAAC,IAAI;YACjB,OAAO,uBAAC,iCAAmB,OAAK,KAAK,GAAI,CAAC;QAC5C,KAAK,kBAAS,CAAC,YAAY;YACzB,OAAO,uBAAC,mDAA2B,OAAK,KAAK,GAAI,CAAC;QACpD,KAAK,kBAAS,CAAC,QAAQ;YACrB,OAAO,uBAAC,0CAAuB,OAAK,KAAK,GAAI,CAAC;QAChD,KAAK,kBAAS,CAAC,KAAK;YAClB,OAAO,uBAAC,mCAAoB,OAAK,KAAK,GAAI,CAAC;QAC7C,KAAK,kBAAS,CAAC,KAAK;YAClB,OAAO,uBAAC,mCAAoB,OAAK,KAAK,GAAI,CAAC;QAC7C,KAAK,kBAAS,CAAC,IAAI;YACjB,OAAO,uBAAC,iCAAmB,OAAK,KAAK,GAAI,CAAC;QAC5C,KAAK,kBAAS,CAAC,GAAG;YAChB,OAAO,uBAAC,+BAAkB,OAAK,KAAK,GAAI,CAAC;QAC3C;YACE,OAAO,uBAAC,iCAAmB,OAAK,KAAK,GAAI,CAAC;IAC9C,CAAC;AACH,CAAC;AAED;;;;;GAKG;AACH,SAAgB,eAAe,CAAC,KAA2B;IACzD,OAAO,CACL,gCAAK,SAAS,EAAC,YAAY,YACzB,uBAAC,oBAAoB,OAAK,KAAK,GAAI,GAC/B,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/filter/filter.types.d.ts

@@ -0,0 +1,17 @@
+import { IModelFilter } from '@smartsoft001/models';
+import { ICrudFilter } from '../../models';
+/**
+ * The props of `SmartCrudFilter` and of every filter field (the inputs of the
+ * Angular filter `BaseComponent`).
+ */
+export interface SmartCrudFilterProps {
+    /** The filter definition of the model (`IModelOptions.filters` item). */
+    item?: IModelFilter;
+    /** The current filter of the list, e.g. `useCrudState(s => s.filter)`. */
+    filter?: ICrudFilter | null;
+}
+/** An option of a radio / check filter. */
+export interface CrudFilterPossibility {
+    id: any;
+    text: string;
+}

package/src/lib/components/filter/filter.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=filter.types.js.map

package/src/lib/components/filter/filter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/filter.types.ts"],"names":[],"mappings":""}

package/src/lib/components/filter/flag/filter-flag.d.ts

@@ -0,0 +1,7 @@
+import { SmartCrudFilterProps } from '../filter.types';
+/**
+ * `<smart-crud-filter-flag>` (Angular `FilterFlagComponent`): the shared flag
+ * field bound to the item's value, and a clear button while the value is
+ * `true` or `false`.
+ */
+export declare function SmartCrudFilterFlag(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filter/flag/filter-flag.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterFlag = SmartCrudFilterFlag;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const use_crud_filter_1 = require("../base/use-crud-filter");
+/**
+ * `<smart-crud-filter-flag>` (Angular `FilterFlagComponent`): the shared flag
+ * field bound to the item's value, and a clear button while the value is
+ * `true` or `false`.
+ */
+function SmartCrudFilterFlag(props) {
+    const filter = (0, use_crud_filter_1.useCrudFilter)(props);
+    const control = (0, use_crud_filter_1.useCrudFilterControl)(filter);
+    const { buildInputOptions, value, refresh } = filter;
+    const options = (0, react_1.useMemo)(() => buildInputOptions(control), [buildInputOptions, control]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "smart:block smart:w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:items-center smart:gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "smart:flex-1", children: (0, jsx_runtime_1.jsx)(react_2.SmartInputFlag, { className: "smart:flex-1", options: options }) }), (value === true || value === false) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => refresh(null), "aria-label": "clear", className: "smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50", children: "\u00D7" }))] }) }));
+}
+//# sourceMappingURL=filter-flag.js.map

package/src/lib/components/filter/flag/filter-flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-flag.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/flag/filter-flag.tsx"],"names":[],"mappings":";;AAYA,kDA4BC;;AAxCD,iCAAgC;AAEhC,+CAAqD;AAErD,6DAA8E;AAG9E;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,KAA2B;IAC7D,MAAM,MAAM,GAAG,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IACpC,MAAM,OAAO,GAAG,IAAA,sCAAoB,EAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IACrD,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAChC,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAC7B,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAC,0BAA0B,YACvC,iCAAK,SAAS,EAAC,wDAAwD,aACrE,gCAAK,SAAS,EAAC,cAAc,YAC3B,uBAAC,sBAAc,IAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,GAAI,GACzD,EACL,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,IAAI,CACtC,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,gBACjB,OAAO,EAClB,SAAS,EAAC,6FAA6F,uBAGhG,CACV,IACG,GACF,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/filter/index.d.ts

@@ -0,0 +1,13 @@
+export * from './base/use-crud-filter';
+export * from './check/filter-check';
+export * from './date/filter-date';
+export * from './date/use-crud-filter-date';
+export * from './date/use-crud-filter-ng-model';
+export * from './date-time/filter-date-time';
+export * from './date-with-edit/filter-date-with-edit';
+export * from './filter';
+export * from './filter.types';
+export * from './flag/filter-flag';
+export * from './int/filter-int';
+export * from './radio/filter-radio';
+export * from './text/filter-text';

package/src/lib/components/filter/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./base/use-crud-filter"), exports);
+tslib_1.__exportStar(require("./check/filter-check"), exports);
+tslib_1.__exportStar(require("./date/filter-date"), exports);
+tslib_1.__exportStar(require("./date/use-crud-filter-date"), exports);
+tslib_1.__exportStar(require("./date/use-crud-filter-ng-model"), exports);
+tslib_1.__exportStar(require("./date-time/filter-date-time"), exports);
+tslib_1.__exportStar(require("./date-with-edit/filter-date-with-edit"), exports);
+tslib_1.__exportStar(require("./filter"), exports);
+tslib_1.__exportStar(require("./filter.types"), exports);
+tslib_1.__exportStar(require("./flag/filter-flag"), exports);
+tslib_1.__exportStar(require("./int/filter-int"), exports);
+tslib_1.__exportStar(require("./radio/filter-radio"), exports);
+tslib_1.__exportStar(require("./text/filter-text"), exports);
+//# sourceMappingURL=index.js.map

package/src/lib/components/filter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/index.ts"],"names":[],"mappings":";;;AAAA,iEAAuC;AACvC,+DAAqC;AACrC,6DAAmC;AACnC,sEAA4C;AAC5C,0EAAgD;AAChD,uEAA6C;AAC7C,iFAAuD;AACvD,mDAAyB;AACzB,yDAA+B;AAC/B,6DAAmC;AACnC,2DAAiC;AACjC,+DAAqC;AACrC,6DAAmC"}

package/src/lib/components/filter/int/filter-int.d.ts

@@ -0,0 +1,12 @@
+import { SmartCrudFilterProps } from '../filter.types';
+/**
+ * `<smart-crud-filter-int>` (Angular `FilterIntComponent`): the shared int
+ * field for the item's value; for an `=` item a settings button switches to
+ * the advanced "from" / "to" range (removing the value), shown as well while
+ * a range value is set. The clear button removes every entry of the item at
+ * once, the range ones only their own.
+ *
+ * As in Angular, the range controls are seeded once and not re-synced when
+ * the filter changes elsewhere (TODO GAP-19).
+ */
+export declare function SmartCrudFilterInt(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filter/int/filter-int.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterInt = SmartCrudFilterInt;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const use_crud_filter_1 = require("../base/use-crud-filter");
+const CLEAR_CLASSES = 'smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50';
+/**
+ * One end of the advanced range: a translated label and a native number
+ * input bound to the slot's control (Angular `[formControl]`: an emptied
+ * input is `null`).
+ */
+function RangeInput({ label, control, }) {
+    const t = (0, react_2.useTranslate)();
+    const id = (0, react_1.useId)();
+    const { value, onChange, onBlur } = (0, react_2.useControlBinding)(control);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "smart:flex-1", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white", children: t(label) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "number", step: "1", value: value ?? '', onChange: (e) => onChange((0, react_2.toNumberValue)(e.target.value)), onBlur: onBlur, className: "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:focus:outline-2 smart:focus:outline-offset-2 smart:focus:outline-indigo-600 smart:dark:bg-white/5 smart:dark:text-white smart:dark:outline-white/10" })] }));
+}
+/**
+ * `<smart-crud-filter-int>` (Angular `FilterIntComponent`): the shared int
+ * field for the item's value; for an `=` item a settings button switches to
+ * the advanced "from" / "to" range (removing the value), shown as well while
+ * a range value is set. The clear button removes every entry of the item at
+ * once, the range ones only their own.
+ *
+ * As in Angular, the range controls are seeded once and not re-synced when
+ * the filter changes elsewhere (TODO GAP-19).
+ */
+function SmartCrudFilterInt(props) {
+    const filter = (0, use_crud_filter_1.useCrudFilter)(props);
+    const valueControl = (0, use_crud_filter_1.useCrudFilterControl)(filter, null);
+    const minControl = (0, use_crud_filter_1.useCrudFilterControl)(filter, '>=');
+    const maxControl = (0, use_crud_filter_1.useCrudFilterControl)(filter, '<=');
+    const [advanced, setAdvanced] = (0, react_1.useState)(false);
+    const { buildInputOptions, hasValue, hasMinValue, hasMaxValue, setValue, refresh, clear, } = filter;
+    const valueOptions = (0, react_1.useMemo)(() => buildInputOptions(valueControl), [buildInputOptions, valueControl]);
+    const allowAdvanced = props.item?.type === '=';
+    const toggleAdvanced = () => {
+        const next = !advanced;
+        setAdvanced(next);
+        if (next)
+            setValue(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "smart:block smart:w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:items-end smart:gap-2", children: [!advanced && ((0, jsx_runtime_1.jsx)("div", { className: "smart:flex-1", children: (0, jsx_runtime_1.jsx)(react_2.SmartInputInt, { className: "smart:flex-1", options: valueOptions }) })), allowAdvanced && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleAdvanced, disabled: hasMinValue || hasMaxValue, "aria-label": "settings", className: "smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-gray-600 smart:hover:bg-gray-100 smart:disabled:opacity-40", children: "\u2699" })), (hasValue || hasMinValue || hasMaxValue) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clear, "aria-label": "clear", className: CLEAR_CLASSES, children: "\u00D7" }))] }), (advanced || hasMinValue || hasMaxValue) && allowAdvanced && ((0, jsx_runtime_1.jsxs)("div", { className: "smart:mt-2 smart:flex smart:w-full smart:items-end smart:gap-2", children: [(0, jsx_runtime_1.jsx)(RangeInput, { label: "from", control: minControl }), hasMinValue && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => refresh(null, '>='), "aria-label": "clear-from", className: CLEAR_CLASSES, children: "\u00D7" })), (0, jsx_runtime_1.jsx)(RangeInput, { label: "to", control: maxControl }), hasMaxValue && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => refresh(null, '<='), "aria-label": "clear-to", className: CLEAR_CLASSES, children: "\u00D7" }))] }))] }));
+}
+//# sourceMappingURL=filter-int.js.map

package/src/lib/components/filter/int/filter-int.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-int.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/int/filter-int.tsx"],"names":[],"mappings":"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"}

package/src/lib/components/filter/radio/filter-radio.d.ts

@@ -0,0 +1,7 @@
+import { SmartCrudFilterProps } from '../filter.types';
+/**
+ * `<smart-crud-filter-radio>` (Angular `FilterRadioComponent`): the shared
+ * radio field with the filter's possibilities, bound to the item's value, and
+ * a clear button while the value is truthy or `false`.
+ */
+export declare function SmartCrudFilterRadio(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filter/radio/filter-radio.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterRadio = SmartCrudFilterRadio;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const use_crud_filter_1 = require("../base/use-crud-filter");
+/**
+ * `<smart-crud-filter-radio>` (Angular `FilterRadioComponent`): the shared
+ * radio field with the filter's possibilities, bound to the item's value, and
+ * a clear button while the value is truthy or `false`.
+ */
+function SmartCrudFilterRadio(props) {
+    const filter = (0, use_crud_filter_1.useCrudFilter)(props);
+    const control = (0, use_crud_filter_1.useCrudFilterControl)(filter);
+    const { buildInputOptions, value, refresh } = filter;
+    const options = (0, react_1.useMemo)(() => buildInputOptions(control, true), [buildInputOptions, control]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "smart:mb-5 smart:block smart:w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:w-full smart:items-start smart:gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "smart:flex-1", children: (0, jsx_runtime_1.jsx)(react_2.SmartInputRadio, { className: "smart:flex-1", options: options }) }), (value || value === false) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => refresh(null), "aria-label": "clear", className: "smart:shrink-0 smart:rounded smart:px-2 smart:py-1 smart:text-red-600 smart:hover:bg-red-50", children: "\u00D7" }))] }) }));
+}
+//# sourceMappingURL=filter-radio.js.map

package/src/lib/components/filter/radio/filter-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-radio.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/radio/filter-radio.tsx"],"names":[],"mappings":";;AAYA,oDA4BC;;AAxCD,iCAAgC;AAEhC,+CAAsD;AAEtD,6DAA8E;AAG9E;;;;GAIG;AACH,SAAgB,oBAAoB,CAAC,KAA2B;IAC9D,MAAM,MAAM,GAAG,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IACpC,MAAM,OAAO,GAAG,IAAA,sCAAoB,EAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IACrD,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC,EACtC,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAC7B,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAC,qCAAqC,YAClD,iCAAK,SAAS,EAAC,uDAAuD,aACpE,gCAAK,SAAS,EAAC,cAAc,YAC3B,uBAAC,uBAAe,IAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,GAAI,GAC1D,EACL,CAAC,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC,IAAI,CAC7B,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,gBACjB,OAAO,EAClB,SAAS,EAAC,6FAA6F,uBAGhG,CACV,IACG,GACF,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/filter/text/filter-text.d.ts

@@ -0,0 +1,7 @@
+import { SmartCrudFilterProps } from '../filter.types';
+/**
+ * `<smart-crud-filter-text>` (Angular `FilterTextComponent`): the shared text
+ * field bound to the item's value, and a clear button while it has one.
+ * Typing reads the list 500 ms after the last change.
+ */
+export declare function SmartCrudFilterText(props: SmartCrudFilterProps): import("react/jsx-runtime").JSX.Element;