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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilterText = SmartCrudFilterText;
+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-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.
+ */
+function SmartCrudFilterText(props) {
+    const filter = (0, use_crud_filter_1.useCrudFilter)(props);
+    const control = (0, use_crud_filter_1.useCrudFilterControl)(filter);
+    const { buildInputOptions, hasValue, 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-end smart:gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "smart:flex-1", children: (0, jsx_runtime_1.jsx)(react_2.SmartInputText, { className: "smart:flex-1", options: options }) }), 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-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-text.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/components/filter/text/filter-text.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,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IACxD,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,qDAAqD,aAClE,gCAAK,SAAS,EAAC,cAAc,YAC3B,uBAAC,sBAAc,IAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,GAAI,GACzD,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,GACF,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,10 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartCrudFiltersProps } from './filters.types';
+/**
+ * `<smart-crud-filters>`: the filters panel of the CRUD feature (the Angular
+ * `FiltersComponent`), opened in the end menu — a header with the title and
+ * a close button (unless `hideMenu`), then a `SmartCrudFilter` for every
+ * filter of the model: the `filters` of `@Model` and the fields with
+ * `list.filter`. Render it inside `<CrudProvider>`.
+ */
+export declare function SmartCrudFilters<T extends IEntity<string>>(props: SmartCrudFiltersProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/filters.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFilters = SmartCrudFilters;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@smartsoft001/react");
+const use_crud_filters_1 = require("./use-crud-filters");
+const filter_1 = require("../filter/filter");
+/**
+ * `<smart-crud-filters>`: the filters panel of the CRUD feature (the Angular
+ * `FiltersComponent`), opened in the end menu — a header with the title and
+ * a close button (unless `hideMenu`), then a `SmartCrudFilter` for every
+ * filter of the model: the `filters` of `@Model` and the fields with
+ * `list.filter`. Render it inside `<CrudProvider>`.
+ */
+function SmartCrudFilters(props) {
+    const t = (0, react_1.useTranslate)();
+    const { elementRef, hideMenu, list, filter, onClose } = (0, use_crud_filters_1.useCrudFilters)(props);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: elementRef, className: "smart:flex smart:h-full smart:flex-col", children: [!hideMenu && ((0, jsx_runtime_1.jsxs)("header", { className: "smart:flex smart:items-center smart:justify-between smart:border-b smart:border-gray-200 smart:px-4 smart:py-3", children: [(0, jsx_runtime_1.jsx)("h2", { className: "smart:text-lg smart:font-semibold smart:text-gray-900", children: t('filters') }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, "aria-label": "close", className: "smart:rounded smart:p-1 smart:text-gray-500 smart:hover:bg-gray-100", children: "\u2715" })] })), (0, jsx_runtime_1.jsx)("div", { className: "smart:flex-1 smart:overflow-y-auto smart:px-4 smart:py-3", children: list.map((item, index) => ((0, jsx_runtime_1.jsx)(filter_1.SmartCrudFilter, { item: item, filter: filter }, `${index}:${item.key}`))) })] }));
+}
+//# sourceMappingURL=filters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filters/filters.tsx"],"names":[],"mappings":";;AAcA,4CAsCC;;AAnDD,+CAAmD;AAGnD,yDAAoD;AACpD,6CAAmD;AAEnD;;;;;;GAMG;AACH,SAAgB,gBAAgB,CAC9B,KAA4B;IAE5B,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GACnD,IAAA,iCAAc,EAAI,KAAK,CAAC,CAAC;IAE3B,OAAO,CACL,iCAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,wCAAwC,aACrE,CAAC,QAAQ,IAAI,CACZ,oCAAQ,SAAS,EAAC,gHAAgH,aAChI,+BAAI,SAAS,EAAC,uDAAuD,YAClE,CAAC,CAAC,SAAS,CAAC,GACV,EACL,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACL,OAAO,EAClB,SAAS,EAAC,qEAAqE,uBAGxE,IACF,CACV,EAID,gCAAK,SAAS,EAAC,0DAA0D,YACtE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,uBAAC,wBAAe,IAEd,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IAFT,GAAG,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,CAG3B,CACH,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,5 @@
+/** The props of `<SmartCrudFilters>` (`<smart-crud-filters>`). */
+export interface SmartCrudFiltersProps {
+    /** Hides the header with the title and the close button (`MenuService`). */
+    hideMenu?: boolean;
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './filters';
+export * from './filters.types';
+export * from './use-crud-filters';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filters/index.ts"],"names":[],"mappings":";;;AAAA,oDAA0B;AAC1B,0DAAgC;AAChC,6DAAmC"}

package/src/lib/components/filters/use-crud-filters.d.ts

@@ -0,0 +1,17 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { IModelFilter } from '@smartsoft001/models';
+import { SmartCrudFiltersProps } from './filters.types';
+/**
+ * The behaviour of the filters panel (the Angular `FiltersBaseComponent`):
+ * `list` holds the filters of `config.type`, `filter` the current filter of
+ * the feature, and `onClose` closes the end menu the panel is shown in.
+ * Attach `elementRef` to the root element: it gets the application style
+ * (the Angular `styleService.init(elementRef)`).
+ */
+export declare function useCrudFilters<T extends IEntity<string>>({ hideMenu, }?: SmartCrudFiltersProps): {
+    elementRef: import("react").RefObject<HTMLDivElement | null>;
+    hideMenu: boolean;
+    list: IModelFilter[];
+    filter: import("../../models").ICrudFilter | null | undefined;
+    onClose: () => Promise<void>;
+};

package/src/lib/components/filters/use-crud-filters.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrudFilters = useCrudFilters;
+const react_1 = require("react");
+const models_1 = require("@smartsoft001/models");
+const react_2 = require("@smartsoft001/react");
+const crud_context_1 = require("../../crud.context");
+const hooks_1 = require("../../hooks");
+/**
+ * The filters of the model `type`: the model's `filters` (labelled
+ * `MODEL.<key>` when they have no label — set on the model's filter, as in
+ * Angular), then a filter for each field with `list.filter`: `~=` for text
+ * fields, `=` for the others.
+ */
+function getFilters(type) {
+    const modelFilters = (0, models_1.getModelOptions)(type)?.filters;
+    return [
+        ...(modelFilters
+            ? modelFilters.map((item) => {
+                if (!item.label) {
+                    item.label = 'MODEL.' + item.key;
+                }
+                return item;
+            })
+            : []),
+        ...(0, models_1.getModelFieldsWithOptions)(new type())
+            .filter((item) => item.options?.list?.filter)
+            .map((item) => ({
+            key: item.key,
+            type: item.options.type === models_1.FieldType.text ||
+                item.options.type === models_1.FieldType.longText
+                ? '~='
+                : '=',
+            label: 'MODEL.' + item.key,
+            fieldType: item.options.type,
+        })),
+    ];
+}
+/**
+ * The behaviour of the filters panel (the Angular `FiltersBaseComponent`):
+ * `list` holds the filters of `config.type`, `filter` the current filter of
+ * the feature, and `onClose` closes the end menu the panel is shown in.
+ * Attach `elementRef` to the root element: it gets the application style
+ * (the Angular `styleService.init(elementRef)`).
+ */
+function useCrudFilters({ hideMenu = false, } = {}) {
+    const config = (0, crud_context_1.useCrudConfig)();
+    const menuService = (0, react_2.useMenuService)();
+    const styleService = (0, react_2.useStyleService)();
+    const elementRef = (0, react_1.useRef)(null);
+    const filter = (0, hooks_1.useCrudState)((state) => state.filter);
+    const list = (0, react_1.useMemo)(() => getFilters(config.type), [config.type]);
+    // A local service writes the style, so the shared one is not redirected
+    // to this element.
+    (0, react_1.useEffect)(() => {
+        new react_2.StyleService().init(elementRef.current, styleService.get());
+    }, [styleService]);
+    const onClose = (0, react_1.useCallback)(async () => {
+        await menuService.closeEnd();
+    }, [menuService]);
+    return { elementRef, hideMenu, list, filter, onClose };
+}
+//# sourceMappingURL=use-crud-filters.js.map

package/src/lib/components/filters/use-crud-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-crud-filters.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filters/use-crud-filters.ts"],"names":[],"mappings":";;AA4DA,wCAsBC;AAlFD,iCAAgE;AAGhE,iDAM8B;AAC9B,+CAI6B;AAG7B,qDAAmD;AACnD,uCAA2C;AAE3C;;;;;GAKG;AACH,SAAS,UAAU,CAAC,IAAsB;IACxC,MAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEpD,OAAO;QACL,GAAG,CAAC,YAAY;YACd,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;oBAChB,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;gBACnC,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QACP,GAAG,IAAA,kCAAyB,EAAC,IAAI,IAAI,EAAE,CAAC;aACrC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAE,IAAI,CAAC,OAAO,EAAE,IAA2B,EAAE,MAAM,CAAC;aACpE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACd,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EACF,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,kBAAS,CAAC,IAAI;gBACpC,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,kBAAS,CAAC,QAAQ;gBACtC,CAAC,CAAE,IAAc;gBACjB,CAAC,CAAE,GAAa;YACpB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC,GAAG;YAC1B,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;SAC7B,CAAC,CAAC;KACN,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,cAAc,CAA4B,EACxD,QAAQ,GAAG,KAAK,MACS,EAAE;IAC3B,MAAM,MAAM,GAAG,IAAA,4BAAa,GAAK,CAAC;IAClC,MAAM,WAAW,GAAG,IAAA,sBAAc,GAAE,CAAC;IACrC,MAAM,YAAY,GAAG,IAAA,uBAAe,GAAE,CAAC;IACvC,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,IAAA,oBAAY,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAErD,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAEnE,wEAAwE;IACxE,mBAAmB;IACnB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,oBAAY,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAmB,EAAE;QACpD,MAAM,WAAW,CAAC,QAAQ,EAAE,CAAC;IAC/B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;AACzD,CAAC"}

package/src/lib/components/filters-config/filters-config.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `<smart-crud-filters-config>`: the active filters of the CRUD feature
+ * (the visible items of `filter.query`) as chips; clicking a chip removes the
+ * item and reads the list again. Render it inside `<CrudProvider>`.
+ */
+export declare function SmartCrudFiltersConfig(): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/filters-config/filters-config.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudFiltersConfig = SmartCrudFiltersConfig;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const crud_context_1 = require("../../crud.context");
+const hooks_1 = require("../../hooks");
+// The Angular `{{ item.value | translate }}`: a text is translated, any other
+// value is shown as it is.
+function translateValue(t, value) {
+    if (value === null || value === undefined)
+        return '';
+    if (typeof value === 'string')
+        return t(value);
+    return String(value);
+}
+/**
+ * `<smart-crud-filters-config>`: the active filters of the CRUD feature
+ * (the visible items of `filter.query`) as chips; clicking a chip removes the
+ * item and reads the list again. Render it inside `<CrudProvider>`.
+ */
+function SmartCrudFiltersConfig() {
+    const t = (0, react_2.useTranslate)();
+    const facade = (0, crud_context_1.useCrudFacade)();
+    const filter = (0, hooks_1.useCrudState)((state) => state.filter);
+    const query = (0, react_1.useMemo)(() => filter?.query?.filter((i) => !i.hidden) || [], [filter]);
+    const onRemoveQuery = (item) => {
+        const current = facade.filter;
+        facade.read(current?.query
+            ? { ...current, query: current.query.filter((i) => i !== item) }
+            : current);
+    };
+    if (!query.length)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "smart:flex smart:flex-wrap smart:gap-2 smart:px-4 smart:py-2", children: query.map((item, index) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onRemoveQuery(item), className: "smart:inline-flex smart:items-center smart:gap-1 smart:rounded-full smart:border smart:border-gray-300 smart:bg-gray-50 smart:px-3 smart:py-1 smart:text-sm smart:text-gray-700 smart:hover:bg-gray-100", "aria-label": t('remove') + ' ' + t('MODEL.' + item.key), children: [(0, jsx_runtime_1.jsxs)("span", { children: [t('MODEL.' + item.key), " ", item.type, " ", translateValue(t, item.value)] }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "smart:text-red-600", children: "\u2715" })] }, `${index}:${item.key}:${item.type}`))) }));
+}
+//# sourceMappingURL=filters-config.js.map

package/src/lib/components/filters-config/filters-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters-config.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filters-config/filters-config.tsx"],"names":[],"mappings":";;AAuBA,wDA0CC;;AAjED,iCAAgC;AAEhC,+CAAmD;AAGnD,qDAAmD;AACnD,uCAA2C;AAG3C,8EAA8E;AAC9E,2BAA2B;AAC3B,SAAS,cAAc,CAAC,CAAmB,EAAE,KAAc;IACzD,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,EAAE,CAAC;IACrD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC;IAE/C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC;AAED;;;;GAIG;AACH,SAAgB,sBAAsB;IACpC,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,MAAM,GAAG,IAAA,4BAAa,GAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,IAAA,oBAAY,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAErD,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EACnD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,IAA0B,EAAQ,EAAE;QACzD,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;QAE9B,MAAM,CAAC,IAAI,CACT,OAAO,EAAE,KAAK;YACZ,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,EAAE;YAChE,CAAC,CAAC,OAAO,CACZ,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,CACL,gCAAK,SAAS,EAAC,8DAA8D,YAC1E,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oCAEE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,SAAS,EAAC,yMAAyM,gBACvM,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,aAEtD,6CACG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,OAAG,IAAI,CAAC,IAAI,OAAG,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAC9D,EACP,gDAAkB,MAAM,EAAC,SAAS,EAAC,oBAAoB,uBAEhD,KAXF,GAAG,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAYjC,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/filters-config/index.d.ts

@@ -0,0 +1 @@
+export * from './filters-config';

package/src/lib/components/filters-config/index.js

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

package/src/lib/components/filters-config/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/filters-config/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC"}

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

@@ -0,0 +1,10 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartCrudGroupProps } from './group.types';
+/**
+ * `<smart-crud-group>`: the list grouped by `groups` (the Angular
+ * `GroupComponent`), each group an accessible disclosure — a button with
+ * `aria-expanded` / `aria-controls` and its region. An open group shows the
+ * list with `listOptions`, or its `children` groups. Render it inside
+ * `<CrudProvider>`.
+ */
+export declare function SmartCrudGroup<T extends IEntity<string>>(props: SmartCrudGroupProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/group/group.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudGroup = SmartCrudGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@smartsoft001/react");
+const use_crud_group_1 = require("./use-crud-group");
+/**
+ * `<smart-crud-group>`: the list grouped by `groups` (the Angular
+ * `GroupComponent`), each group an accessible disclosure — a button with
+ * `aria-expanded` / `aria-controls` and its region. An open group shows the
+ * list with `listOptions`, or its `children` groups. Render it inside
+ * `<CrudProvider>`.
+ */
+function SmartCrudGroup(props) {
+    const t = (0, react_1.useTranslate)();
+    const { groups, listOptions, change } = (0, use_crud_group_1.useCrudGroup)(props);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: groups?.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "smart:border-b smart:border-gray-200", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => change(!item.show, item), "aria-expanded": item.show || false, "aria-controls": 'smart-crud-group-' + item.key, className: (0, react_1.cn)('smart:flex smart:w-full smart:items-center smart:justify-between smart:py-3 smart:text-left smart:text-sm', item.show && 'smart:font-bold'), children: [(0, jsx_runtime_1.jsx)("span", { children: t(item.text) }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "smart:text-gray-500", children: item.show ? '▾' : '▸' })] }), item.show && ((0, jsx_runtime_1.jsxs)("div", { id: 'smart-crud-group-' + item.key, className: "smart:pb-3", children: [!item.children && listOptions && ((0, jsx_runtime_1.jsx)(react_1.SmartList, { options: listOptions })), item.children && ((0, jsx_runtime_1.jsx)("div", { className: "smart:ml-12", children: (0, jsx_runtime_1.jsx)(SmartCrudGroup, { groups: item.children, listOptions: listOptions }) }))] }))] }, item.key))) }));
+}
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/group/group.tsx"],"names":[],"mappings":";;AAaA,wCA4CC;;AAxDD,+CAAkE;AAGlE,qDAAgD;AAEhD;;;;;;GAMG;AACH,SAAgB,cAAc,CAC5B,KAA6B;IAE7B,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAA,6BAAY,EAAI,KAAK,CAAC,CAAC;IAE/D,OAAO,CACL,2DACG,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrB,iCAAoB,SAAS,EAAC,sCAAsC,aAClE,oCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,mBACxB,IAAI,CAAC,IAAI,IAAI,KAAK,mBAClB,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAC7C,SAAS,EAAE,IAAA,UAAE,EACX,2GAA2G,EAC3G,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAC/B,aAED,2CAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAQ,EAC3B,gDAAkB,MAAM,EAAC,SAAS,EAAC,qBAAqB,YACrD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GACjB,IACA,EACR,IAAI,CAAC,IAAI,IAAI,CACZ,iCAAK,EAAE,EAAE,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,YAAY,aAC5D,CAAC,IAAI,CAAC,QAAQ,IAAI,WAAW,IAAI,CAChC,uBAAC,iBAAS,IAAC,OAAO,EAAE,WAAW,GAAI,CACpC,EACA,IAAI,CAAC,QAAQ,IAAI,CAChB,gCAAK,SAAS,EAAC,aAAa,YAC1B,uBAAC,cAAc,IACb,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,WAAW,EAAE,WAAW,GACxB,GACE,CACP,IACG,CACP,KA9BO,IAAI,CAAC,GAAG,CA+BZ,CACP,CAAC,GACD,CACJ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,8 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { IListOptions } from '@smartsoft001/react';
+import { ICrudListGroup } from '../../models';
+/** The props of `<SmartCrudGroup>` (`<smart-crud-group>`). */
+export interface SmartCrudGroupProps<T extends IEntity<string>> {
+    groups?: Array<ICrudListGroup> | null;
+    listOptions?: IListOptions<T> | null;
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './group';
+export * from './group.types';
+export * from './use-crud-group';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/group/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB;AACxB,wDAA8B;AAC9B,2DAAiC"}

package/src/lib/components/group/use-crud-group.d.ts

@@ -0,0 +1,17 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartCrudGroupProps } from './group.types';
+import { ICrudListGroup } from '../../models';
+/**
+ * The behaviour of the list groups (the Angular `GroupBaseComponent`).
+ * `change(val, item)` closes the other groups, filters the list by the group
+ * through `CrudListGroupService` and sets `item.show` — on the next tick when
+ * opening (the list reads first), at once when closing. The groups are
+ * plain objects changed in place, as in Angular; the hook re-renders after
+ * each change. When the component goes away, the service drops the query
+ * items of the groups again.
+ */
+export declare function useCrudGroup<T extends IEntity<string>>({ groups, listOptions, }: SmartCrudGroupProps<T>): {
+    groups: ICrudListGroup[] | null;
+    listOptions: import("dist/packages/shared/react/src").IListOptions<T> | null;
+    change: (val: boolean, item: ICrudListGroup, force?: boolean) => void;
+};

package/src/lib/components/group/use-crud-group.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrudGroup = useCrudGroup;
+const react_1 = require("react");
+const crud_context_1 = require("../../crud.context");
+/**
+ * The behaviour of the list groups (the Angular `GroupBaseComponent`).
+ * `change(val, item)` closes the other groups, filters the list by the group
+ * through `CrudListGroupService` and sets `item.show` — on the next tick when
+ * opening (the list reads first), at once when closing. The groups are
+ * plain objects changed in place, as in Angular; the hook re-renders after
+ * each change. When the component goes away, the service drops the query
+ * items of the groups again.
+ */
+function useCrudGroup({ groups = null, listOptions = null, }) {
+    const groupService = (0, crud_context_1.useCrudListGroupService)();
+    // The Angular `cd.detectChanges()`.
+    const [, detectChanges] = (0, react_1.useReducer)((tick) => tick + 1, 0);
+    const latest = (0, react_1.useRef)({ groups, groupService });
+    (0, react_1.useEffect)(() => {
+        latest.current = { groups, groupService };
+    });
+    (0, react_1.useEffect)(() => () => {
+        const current = latest.current;
+        if (current.groups)
+            current.groupService.destroy(current.groups);
+    }, []);
+    const change = (0, react_1.useCallback)((val, item, force = false) => {
+        if (groups) {
+            groups
+                .filter((i) => i.value !== item.value || i.key !== item.key)
+                .forEach((i) => {
+                i.show = false;
+            });
+        }
+        groupService.change(val, item, force);
+        if (val) {
+            setTimeout(() => {
+                item.show = val;
+                detectChanges();
+            });
+        }
+        else {
+            item.show = val;
+            detectChanges();
+        }
+    }, [groups, groupService]);
+    return { groups, listOptions, change };
+}
+//# sourceMappingURL=use-crud-group.js.map

package/src/lib/components/group/use-crud-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-crud-group.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/group/use-crud-group.ts"],"names":[],"mappings":";;AAiBA,oCAgDC;AAjED,iCAAmE;AAKnE,qDAA6D;AAG7D;;;;;;;;GAQG;AACH,SAAgB,YAAY,CAA4B,EACtD,MAAM,GAAG,IAAI,EACb,WAAW,GAAG,IAAI,GACK;IACvB,MAAM,YAAY,GAAG,IAAA,sCAAuB,GAAK,CAAC;IAClD,oCAAoC;IACpC,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG,IAAA,kBAAU,EAAC,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,IAAA,iBAAS,EACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAE/B,IAAI,OAAO,CAAC,MAAM;YAAE,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACnE,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,MAAM,GAAG,IAAA,mBAAW,EACxB,CAAC,GAAY,EAAE,IAAoB,EAAE,KAAK,GAAG,KAAK,EAAQ,EAAE;QAC1D,IAAI,MAAM,EAAE,CAAC;YACX,MAAM;iBACH,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC;iBAC3D,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC;YACjB,CAAC,CAAC,CAAC;QACP,CAAC;QAED,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAEtC,IAAI,GAAG,EAAE,CAAC;YACR,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;gBAChB,aAAa,EAAE,CAAC;YAClB,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;YAChB,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AACzC,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './multiselect';
+export * from './use-crud-multiselect';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/multiselect/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,iEAAuC"}

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

@@ -0,0 +1,10 @@
+import { IEntity } from '@smartsoft001/domain-core';
+/**
+ * `<smart-crud-multiselect>`: the panel of the items selected in the list
+ * (the Angular `MultiselectComponent`), opened in the end menu. A header
+ * with the count and a close button, the `config.list.components.multi`
+ * component with the selected `items`, and the `multiUpdate` form of the
+ * model with the button applying it to every selected item. Render it inside
+ * `<CrudProvider>`.
+ */
+export declare function SmartCrudMultiselect<T extends IEntity<string>>(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/multiselect/multiselect.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudMultiselect = SmartCrudMultiselect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const use_crud_multiselect_1 = require("./use-crud-multiselect");
+const form_options_1 = require("../../factories/form-options");
+/**
+ * `<smart-crud-multiselect>`: the panel of the items selected in the list
+ * (the Angular `MultiselectComponent`), opened in the end menu. A header
+ * with the count and a close button, the `config.list.components.multi`
+ * component with the selected `items`, and the `multiUpdate` form of the
+ * model with the button applying it to every selected item. Render it inside
+ * `<CrudProvider>`.
+ */
+function SmartCrudMultiselect() {
+    const t = (0, react_2.useTranslate)();
+    const { config, list, item, showForm, lock, valid, buttonOptions, onClose, onPartialChange, onValidChange, } = (0, use_crud_multiselect_1.useCrudMultiselect)();
+    const Multi = config?.list?.components?.multi;
+    // The Angular `item | smartFormOptions: 'multiUpdate' : config.type`.
+    const formOptions = (0, react_1.useMemo)(() => (0, form_options_1.getCrudFormOptions)(item, 'multiUpdate', config.type), [item, config.type]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("header", { className: "smart:flex smart:items-center smart:justify-between smart:border-b smart:border-gray-200 smart:px-4 smart:py-3", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "smart:text-lg smart:font-semibold smart:text-gray-900", children: [t('selected'), ": ", list.length] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, "aria-label": "close", className: "smart:rounded smart:p-1 smart:text-gray-500 smart:hover:bg-gray-100", children: "\u2715" })] }), Multi && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Multi, { items: list }) })), showForm && item && formOptions && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_2.SmartForm, { options: formOptions, onValuePartialChange: (changes) => onPartialChange(changes, list), onValidChange: onValidChange }), (0, jsx_runtime_1.jsx)(react_2.SmartButton, { className: "smart:float-right", disabled: lock || !valid, options: buttonOptions, children: t('change') })] }))] }));
+}
+//# sourceMappingURL=multiselect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/components/multiselect/multiselect.tsx"],"names":[],"mappings":";;AAgBA,oDAgEC;;AAhFD,iCAAgC;AAGhC,+CAA2E;AAE3E,iEAA4D;AAC5D,+DAAkE;AAElE;;;;;;;GAOG;AACH,SAAgB,oBAAoB;IAClC,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,aAAa,EACb,OAAO,EACP,eAAe,EACf,aAAa,GACd,GAAG,IAAA,yCAAkB,GAAK,CAAC;IAE5B,MAAM,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC;IAE9C,sEAAsE;IACtE,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,IAAA,iCAAkB,EAAC,IAAI,EAAE,aAAa,EAAE,MAAM,CAAC,IAAI,CAAC,EAC1D,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CACpB,CAAC;IAEF,OAAO,CACL,6DACE,oCAAQ,SAAS,EAAC,gHAAgH,aAChI,gCAAI,SAAS,EAAC,uDAAuD,aAClE,CAAC,CAAC,UAAU,CAAC,QAAI,IAAI,CAAC,MAAM,IAC1B,EACL,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACL,OAAO,EAClB,SAAS,EAAC,qEAAqE,uBAGxE,IACF,EAER,KAAK,IAAI,CACR,0CACE,uBAAC,KAAK,IAAC,KAAK,EAAE,IAAI,GAAI,GAClB,CACP,EAEA,QAAQ,IAAI,IAAI,IAAI,WAAW,IAAI,CAClC,4CACE,uBAAC,iBAAS,IACR,OAAO,EAAE,WAAW,EACpB,oBAAoB,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,EACjE,aAAa,EAAE,aAAa,GAC5B,EAEF,uBAAC,mBAAW,IACV,SAAS,EAAC,mBAAmB,EAC7B,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,EACxB,OAAO,EAAE,aAAa,YAErB,CAAC,CAAC,QAAQ,CAAC,GACA,IACV,CACP,IACA,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/components/multiselect/use-crud-multiselect.d.ts

@@ -0,0 +1,24 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { IButtonOptions } from '@smartsoft001/react';
+/**
+ * The behaviour of the multi-selection panel (the Angular
+ * `MultiselectBaseComponent`): `list` is the selection, `item` a model of
+ * `config.type` holding the values the selected items share in the fields
+ * with `update.multi` (`showForm` when there is such a field). The form
+ * reports its changes with `onPartialChange(changes, list)` and its validity
+ * with `onValidChange`; `buttonOptions` (with confirmation) apply the changes
+ * to every selected item and close the end menu. `lock` is set again
+ * whenever the selection changes, until the form reports.
+ */
+export declare function useCrudMultiselect<T extends IEntity<string>>(): {
+    config: import("../../crud.config").CrudConfig<T> & Partial<import("../../crud.config").CrudFullConfig<T>>;
+    list: T[];
+    item: T;
+    showForm: boolean;
+    lock: boolean;
+    valid: boolean;
+    buttonOptions: IButtonOptions;
+    onClose: () => Promise<void>;
+    onPartialChange: (changes: Partial<T>, current: Array<T>) => void;
+    onValidChange: (value: boolean) => void;
+};

package/src/lib/components/multiselect/use-crud-multiselect.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrudMultiselect = useCrudMultiselect;
+const react_1 = require("react");
+const models_1 = require("@smartsoft001/models");
+const react_2 = require("@smartsoft001/react");
+const crud_context_1 = require("../../crud.context");
+const hooks_1 = require("../../hooks");
+/**
+ * The behaviour of the multi-selection panel (the Angular
+ * `MultiselectBaseComponent`): `list` is the selection, `item` a model of
+ * `config.type` holding the values the selected items share in the fields
+ * with `update.multi` (`showForm` when there is such a field). The form
+ * reports its changes with `onPartialChange(changes, list)` and its validity
+ * with `onValidChange`; `buttonOptions` (with confirmation) apply the changes
+ * to every selected item and close the end menu. `lock` is set again
+ * whenever the selection changes, until the form reports.
+ */
+function useCrudMultiselect() {
+    const facade = (0, crud_context_1.useCrudFacade)();
+    const config = (0, crud_context_1.useCrudConfig)();
+    const menuService = (0, react_2.useMenuService)();
+    const multiSelected = (0, hooks_1.useCrudState)((state) => state.multiSelected);
+    const list = (0, react_1.useMemo)(() => multiSelected || [], [multiSelected]);
+    const [partial, setPartial] = (0, react_1.useState)(null);
+    const [valid, setValid] = (0, react_1.useState)(false);
+    const { item, showForm } = (0, react_1.useMemo)(() => {
+        const model = new config.type();
+        const fieldsWithOptions = (0, models_1.getModelFieldsWithOptions)(model)?.filter((f) => f.options.update?.multi);
+        fieldsWithOptions.forEach(({ key }) => {
+            const uniques = Array.from(new Set(list.map((i) => i[key])));
+            if (uniques.length === 1) {
+                model[key] = uniques[0];
+            }
+        });
+        return { item: model, showForm: !!fieldsWithOptions.length };
+    }, [list, config.type]);
+    const lock = partial?.list !== list;
+    const buttonOptions = {
+        click: async () => {
+            const result = (partial?.list ?? []).map((i) => ({
+                ...partial?.changes,
+                id: i.id,
+            }));
+            facade.updatePartialMany(result);
+            await menuService.closeEnd();
+        },
+        confirm: true,
+    };
+    const onClose = (0, react_1.useCallback)(async () => {
+        await menuService.closeEnd();
+    }, [menuService]);
+    const onPartialChange = (0, react_1.useCallback)((changes, current) => {
+        setPartial({ list: current, changes });
+    }, []);
+    const onValidChange = (0, react_1.useCallback)((value) => {
+        setValid(value);
+    }, []);
+    return {
+        config,
+        list,
+        item,
+        showForm,
+        lock,
+        valid,
+        buttonOptions,
+        onClose,
+        onPartialChange,
+        onValidChange,
+    };
+}
+//# sourceMappingURL=use-crud-multiselect.js.map

package/src/lib/components/multiselect/use-crud-multiselect.js.map

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