@smartsoft001/react 0.0.0-stage → 2.193.0

package/src/lib/components/input/text/preset/preset-classes.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInputTextPresetClasses = getInputTextPresetClasses;
+exports.getInputTextPresetLabelClasses = getInputTextPresetLabelClasses;
+const INPUT_TEXT_PRESET_BASE = [
+    'smart:py-2.5',
+    'smart:sm:py-3',
+    'smart:px-4',
+    '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-700',
+    'smart:dark:focus:border-blue-600',
+    'smart:focus:ring-1',
+    'smart:focus:ring-blue-700',
+    'smart:dark:focus:ring-blue-600',
+    'smart:disabled:opacity-50',
+    'smart:disabled:pointer-events-none',
+].join(' ');
+const INPUT_TEXT_PRESET_LABEL = [
+    'smart:block',
+    'smart:text-sm',
+    'smart:font-medium',
+    'smart:mb-2',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+function getInputTextPresetClasses(cssClass) {
+    return cssClass
+        ? `${INPUT_TEXT_PRESET_BASE} ${cssClass}`
+        : INPUT_TEXT_PRESET_BASE;
+}
+function getInputTextPresetLabelClasses() {
+    return INPUT_TEXT_PRESET_LABEL;
+}
+//# sourceMappingURL=preset-classes.js.map

package/src/lib/components/input/text/preset/preset-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-classes.js","sourceRoot":"","sources":["../../../../../../../../../../packages/shared/react/src/lib/components/input/text/preset/preset-classes.ts"],"names":[],"mappings":";;AAmCA,8DAIC;AAED,wEAEC;AA3CD,MAAM,sBAAsB,GAAG;IAC7B,cAAc;IACd,eAAe;IACf,YAAY;IACZ,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,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,uBAAuB,GAAG;IAC9B,aAAa;IACb,eAAe;IACf,mBAAmB;IACnB,YAAY;IACZ,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,SAAgB,yBAAyB,CAAC,QAAgB;IACxD,OAAO,QAAQ;QACb,CAAC,CAAC,GAAG,sBAAsB,IAAI,QAAQ,EAAE;QACzC,CAAC,CAAC,sBAAsB,CAAC;AAC7B,CAAC;AAED,SAAgB,8BAA8B;IAC5C,OAAO,uBAAuB,CAAC;AACjC,CAAC"}

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * The `video` field (the Angular `InputVideoComponent`,
+ * `<smart-input-video>`): plain add / change, play and delete buttons (they
+ * run the button options directly, so delete asks no confirmation, as in
+ * Angular), a hidden `.mp4` input whose file is uploaded, the upload
+ * progress and the player ({@link useInputVideo}). `className` is appended
+ * to the group's classes.
+ */
+export declare function SmartInputVideo<T>(props: SmartInputFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputVideo = SmartInputVideo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../../providers/hooks");
+const class_names_1 = require("../../../utils/class-names");
+const use_input_video_1 = require("./use-input-video");
+const LABEL_CLASSES = [
+    'smart:block',
+    'smart:text-sm/6',
+    'smart:font-medium',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const GROUP_CLASSES = [
+    'smart:mt-2',
+    'smart:flex',
+    'smart:items-center',
+    'smart:gap-x-2',
+    'smart:flex-wrap',
+].join(' ');
+/**
+ * The `video` field (the Angular `InputVideoComponent`,
+ * `<smart-input-video>`): plain add / change, play and delete buttons (they
+ * run the button options directly, so delete asks no confirmation, as in
+ * Angular), a hidden `.mp4` input whose file is uploaded, the upload
+ * progress and the player ({@link useInputVideo}). `className` is appended
+ * to the group's classes.
+ */
+function SmartInputVideo(props) {
+    const { className } = props;
+    const t = (0, hooks_1.useTranslate)();
+    const { control, value, required, label, inputRef, loading, percent, onFileChange, addButtonOptions, deleteButtonOptions, url, play, onPlay, } = (0, use_input_video_1.useInputVideo)(props);
+    const id = (0, react_1.useId)();
+    if (!control)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: LABEL_CLASSES, children: [label, ' ', required && (0, jsx_runtime_1.jsx)("span", { className: "smart:text-red-500 smart:ml-0.5", children: "*" })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, class_names_1.cn)(GROUP_CLASSES, className), children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => addButtonOptions.click(), className: "smart:rounded-md smart:bg-indigo-600 smart:px-3 smart:py-1.5 smart:text-sm smart:font-semibold smart:text-white smart:hover:bg-indigo-500", children: t(value ? 'change' : 'add') }), value && !play && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onPlay, className: "smart:rounded-md smart:bg-gray-200 smart:px-3 smart:py-1.5 smart:text-sm smart:font-semibold smart:text-gray-900 smart:hover:bg-gray-300 smart:dark:bg-white/10 smart:dark:text-white", children: t('play') })), value && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => deleteButtonOptions.click(), className: "smart:rounded-md smart:bg-red-600 smart:px-3 smart:py-1.5 smart:text-sm smart:font-semibold smart:text-white smart:hover:bg-red-500", children: t('delete') })), loading && ((0, jsx_runtime_1.jsx)("div", { className: "smart:h-1 smart:w-24 smart:overflow-hidden smart:rounded smart:bg-gray-200 smart:dark:bg-gray-700", children: (0, jsx_runtime_1.jsx)("div", { className: "smart:h-full smart:bg-indigo-600", style: { width: `${percent ?? 0}%` } }) })), url && play && ((0, jsx_runtime_1.jsx)("video", { className: "smart:w-full", controls: true, controlsList: "nodownload", children: (0, jsx_runtime_1.jsx)("source", { type: "video/mp4", src: url }) })), (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, type: "file", accept: ".mp4", hidden: true, onChange: onFileChange })] })] }));
+}
+//# sourceMappingURL=input-video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-video.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/video/input-video.tsx"],"names":[],"mappings":";;AA+BA,0CA8EC;;AA7GD,iCAA8B;AAE9B,oDAAwD;AACxD,4DAAgD;AAEhD,uDAAkD;AAElD,MAAM,aAAa,GAAG;IACpB,aAAa;IACb,iBAAiB;IACjB,mBAAmB;IACnB,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,aAAa,GAAG;IACpB,YAAY;IACZ,YAAY;IACZ,oBAAoB;IACpB,eAAe;IACf,iBAAiB;CAClB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;;;;;;GAOG;AACH,SAAgB,eAAe,CAAI,KAA8B;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,CAAC,GAAG,IAAA,oBAAY,GAAE,CAAC;IACzB,MAAM,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,GAAG,EACH,IAAI,EACJ,MAAM,GACP,GAAG,IAAA,+BAAa,EAAC,KAAK,CAAC,CAAC;IACzB,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IAEnB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,6DACE,mCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,aACzC,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,iCAAM,SAAS,EAAC,iCAAiC,kBAAS,IACjE,EACR,iCAAK,SAAS,EAAE,IAAA,gBAAE,EAAC,aAAa,EAAE,SAAS,CAAC,aAC1C,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,EACvC,SAAS,EAAC,2IAA2I,YAEpJ,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,GACrB,EACR,KAAK,IAAI,CAAC,IAAI,IAAI,CACjB,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,uLAAuL,YAEhM,CAAC,CAAC,MAAM,CAAC,GACH,CACV,EACA,KAAK,IAAI,CACR,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,EAC1C,SAAS,EAAC,qIAAqI,YAE9I,CAAC,CAAC,QAAQ,CAAC,GACL,CACV,EACA,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,mGAAmG,YAChH,gCACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,IAAI,CAAC,GAAG,EAAE,GACpC,GACE,CACP,EACA,GAAG,IAAI,IAAI,IAAI,CACd,kCAAO,SAAS,EAAC,cAAc,EAAC,QAAQ,QAAC,YAAY,EAAC,YAAY,YAChE,mCAAQ,IAAI,EAAC,WAAW,EAAC,GAAG,EAAE,GAAG,GAAI,GAC/B,CACT,EACD,kCACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,MAAM,EACb,MAAM,QACN,QAAQ,EAAE,YAAY,GACtB,IACE,IACL,CACJ,CAAC;AACJ,CAAC"}

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

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

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartInputVideoPreset = SmartInputVideoPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../../../providers/hooks");
+const class_names_1 = require("../../../../utils/class-names");
+const button_1 = require("../../../button/button");
+const use_input_file_drop_zone_1 = require("../../file/use-input-file-drop-zone");
+const use_input_video_1 = require("../use-input-video");
+const LABEL_CLASSES = [
+    'smart:block',
+    'smart:text-sm/6',
+    'smart:font-medium',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const GROUP_CLASSES = [
+    'smart:mt-2',
+    'smart:flex',
+    'smart:flex-col',
+    'smart:gap-y-2',
+    'smart:w-full',
+].join(' ');
+const DROP_ZONE_CLASSES = [
+    'smart:cursor-pointer',
+    'smart:p-8',
+    'smart:flex',
+    'smart:justify-center',
+    'smart:bg-white',
+    'smart:dark:bg-gray-800',
+    'smart:border',
+    'smart:border-dashed',
+    'smart:rounded-xl',
+    'smart:transition-colors',
+    'smart:focus:outline-none',
+    'smart:focus:ring-2',
+    'smart:focus:ring-blue-600',
+    'smart:dark:focus:ring-blue-500',
+].join(' ');
+const DROP_ZONE_DRAG_OVER_CLASSES = [
+    'smart:border-blue-600',
+    'smart:dark:border-blue-500',
+    'smart:bg-blue-50',
+    'smart:dark:bg-gray-700',
+].join(' ');
+const DROP_ZONE_IDLE_CLASSES = [
+    'smart:border-gray-300',
+    'smart:dark:border-gray-600',
+].join(' ');
+const PREVIEW_CLASSES = [
+    'smart:p-3',
+    'smart:flex',
+    'smart:justify-between',
+    'smart:items-center',
+    'smart:gap-x-3',
+    'smart:flex-wrap',
+    'smart:bg-white',
+    'smart:dark:bg-gray-800',
+    'smart:border',
+    'smart:border-gray-200',
+    'smart:dark:border-gray-700',
+    'smart:rounded-xl',
+].join(' ');
+/**
+ * Styled `video` field (preset, the Angular `InputVideoPresetComponent`): a
+ * Preline drop zone ("drop file here or browse") that opens the hidden
+ * `.mp4` input on click / Enter / Space and uploads a dropped file
+ * ({@link useInputFileDropZone}), a preview card with the file name and the
+ * play / delete buttons, the upload progress and a framed player
+ * ({@link useInputVideo}). `className` is appended to the group's classes.
+ */
+function SmartInputVideoPreset(props) {
+    const { className } = props;
+    const t = (0, hooks_1.useTranslate)();
+    const { control, value, required, label, inputRef, loading, percent, onFileChange, addButtonOptions, deleteButtonOptions, url, play, onPlay, } = (0, use_input_video_1.useInputVideo)(props);
+    const { dragOver, ...dropZoneHandlers } = (0, use_input_file_drop_zone_1.useInputFileDropZone)({
+        control,
+        inputRef,
+        trigger: addButtonOptions.click,
+    });
+    const id = (0, react_1.useId)();
+    if (!control)
+        return null;
+    const playButtonOptions = {
+        click: onPlay,
+        loading,
+        variant: 'secondary',
+        color: 'gray',
+    };
+    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)(GROUP_CLASSES, className), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, class_names_1.cn)(DROP_ZONE_CLASSES, dragOver ? DROP_ZONE_DRAG_OVER_CLASSES : DROP_ZONE_IDLE_CLASSES), role: "button", tabIndex: 0, "aria-disabled": loading ? true : undefined, ...dropZoneHandlers, children: (0, jsx_runtime_1.jsxs)("div", { className: "smart:text-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "smart:inline-flex smart:justify-center smart:items-center smart:size-12 smart:text-gray-500 smart:dark:text-gray-400", children: (0, jsx_runtime_1.jsxs)("svg", { className: "smart:shrink-0 smart:size-8", 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", children: [(0, jsx_runtime_1.jsx)("path", { d: "m22 8-6 4 6 4V8Z" }), (0, jsx_runtime_1.jsx)("rect", { width: "14", height: "12", x: "2", y: "6", rx: "2", ry: "2" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "smart:mt-2 smart:flex smart:flex-wrap smart:justify-center smart:text-sm/6 smart:text-gray-500 smart:dark:text-gray-400", children: [(0, jsx_runtime_1.jsx)("span", { className: "smart:pe-1 smart:font-medium smart:text-gray-900 smart:dark:text-white", children: t('INPUT.dropFileHereOr') }), (0, jsx_runtime_1.jsx)("span", { className: "smart:font-semibold smart:text-blue-600 smart:dark:text-blue-400 smart:hover:text-blue-700 smart:dark:hover:text-blue-300 smart:underline", children: t('browse') })] })] }) }), value && ((0, jsx_runtime_1.jsxs)("div", { className: PREVIEW_CLASSES, children: [(0, jsx_runtime_1.jsx)("span", { className: "smart:text-sm smart:font-medium smart:text-gray-900 smart:dark:text-white smart:truncate", children: value.fileName }), (0, jsx_runtime_1.jsxs)("div", { className: "smart:flex smart:items-center smart:gap-x-2 smart:flex-wrap", children: [!play && ((0, jsx_runtime_1.jsx)(button_1.SmartButton, { options: playButtonOptions, children: t('play') })), (0, jsx_runtime_1.jsx)(button_1.SmartButton, { options: deleteButtonOptions, children: t('delete') })] })] })), loading && ((0, jsx_runtime_1.jsx)("div", { className: "smart:flex smart:w-full smart:h-2 smart:bg-gray-100 smart:dark:bg-gray-800 smart:rounded-full smart:overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "smart:h-full smart:bg-blue-600 smart:dark:bg-blue-500 smart:transition-all smart:duration-500", style: { width: `${percent ?? 0}%` } }) })), url && play && ((0, jsx_runtime_1.jsx)("video", { className: "smart:w-full smart:rounded-xl smart:border smart:border-gray-200 smart:dark:border-gray-700", controls: true, controlsList: "nodownload", children: (0, jsx_runtime_1.jsx)("source", { type: "video/mp4", src: url }) })), (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, type: "file", accept: ".mp4", hidden: true, onChange: onFileChange })] })] }));
+}
+//# sourceMappingURL=input-video-preset.js.map

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

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

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

@@ -0,0 +1,36 @@
+import { SmartInputFieldProps } from '../input.types';
+/**
+ * {@link useInput} and {@link useInputFile} plus the player of the video
+ * fields (the Angular `InputVideoComponent` `afterSetOptionsHandler`): every
+ * change of the value stops the player (`play` false, no `url`), and five
+ * seconds later the URL of the new attachment is set. As in Angular, the
+ * initial value gets no URL. `onPlay` (the `playButtonOptions.click`) shows
+ * the player.
+ */
+export declare function useInputVideo<T>(props: SmartInputFieldProps<T>): {
+    url: string | null;
+    play: boolean;
+    onPlay: () => void;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    loading: boolean;
+    percent: number | undefined;
+    file: File | null;
+    onFileChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    addButtonOptions: import("../../../models").IButtonOptions;
+    showButtonOptions: import("../../../models").IButtonOptions;
+    deleteButtonOptions: import("../../../models").IButtonOptions;
+    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/video/use-input-video.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputVideo = useInputVideo;
+const react_1 = require("react");
+const smart_context_1 = require("../../../providers/smart-context");
+const use_input_1 = require("../base/use-input");
+const use_input_file_1 = require("../base/use-input-file");
+/** How long after a change the new video gets its URL (`delay(5000)`). */
+const VIDEO_URL_DELAY = 5000;
+/**
+ * {@link useInput} and {@link useInputFile} plus the player of the video
+ * fields (the Angular `InputVideoComponent` `afterSetOptionsHandler`): every
+ * change of the value stops the player (`play` false, no `url`), and five
+ * seconds later the URL of the new attachment is set. As in Angular, the
+ * initial value gets no URL. `onPlay` (the `playButtonOptions.click`) shows
+ * the player.
+ */
+function useInputVideo(props) {
+    const input = (0, use_input_1.useInput)(props);
+    const file = (0, use_input_file_1.useInputFile)(props);
+    const { fileService } = (0, smart_context_1.useSmart)();
+    const { control } = input;
+    const [url, setUrl] = (0, react_1.useState)(null);
+    const [play, setPlay] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!control)
+            return undefined;
+        const timers = new Set();
+        const subscription = control.valueChanges.subscribe((value) => {
+            setUrl(null);
+            setPlay(false);
+            const timer = setTimeout(() => {
+                timers.delete(timer);
+                if (!value?.id)
+                    return;
+                setUrl(fileService?.getUrl(value.id) ?? null);
+            }, VIDEO_URL_DELAY);
+            timers.add(timer);
+        });
+        return () => {
+            subscription.unsubscribe();
+            timers.forEach((timer) => clearTimeout(timer));
+        };
+    }, [control, fileService]);
+    const onPlay = (0, react_1.useCallback)(() => setPlay(true), []);
+    return { ...input, ...file, url, play, onPlay };
+}
+//# sourceMappingURL=use-input-video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-video.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/video/use-input-video.ts"],"names":[],"mappings":";;AAkBA,sCAoCC;AAtDD,iCAAyD;AAEzD,oEAA4D;AAC5D,iDAA6C;AAC7C,2DAAsD;AAGtD,0EAA0E;AAC1E,MAAM,eAAe,GAAG,IAAI,CAAC;AAE7B;;;;;;;GAOG;AACH,SAAgB,aAAa,CAAI,KAA8B;IAC7D,MAAM,KAAK,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAG,IAAA,6BAAY,EAAC,KAAK,CAAC,CAAC;IACjC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,wBAAQ,GAAE,CAAC;IACnC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAE/B,MAAM,MAAM,GAAG,IAAI,GAAG,EAAiC,CAAC;QACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5D,MAAM,CAAC,IAAI,CAAC,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,CAAC;YAEf,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAErB,IAAI,CAAC,KAAK,EAAE,EAAE;oBAAE,OAAO;gBAEvB,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC;YAChD,CAAC,EAAE,eAAe,CAAC,CAAC;YAEpB,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,WAAW,EAAE,CAAC;YAC3B,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3B,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpD,OAAO,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAClD,CAAC"}

package/src/lib/components/list/desktop/list-desktop.d.ts

@@ -0,0 +1,10 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartListModeProps } from '../list.types';
+/**
+ * The desktop list (the Angular `<smart-list-desktop>`,
+ * `ListDesktopComponent`): a table with one column per list field, plus the
+ * multi-select, remove and item columns, the `top` component factory above
+ * it and the paging below it (`PaginationMode.singlePage`). The CDK table is
+ * plain table markup with the same classes; the header row stays sticky.
+ */
+export declare function SmartListDesktop<T extends IEntity<string>>(props: SmartListModeProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/list/desktop/list-desktop.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartListDesktop = SmartListDesktop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const models_1 = require("@smartsoft001/models");
+const use_list_desktop_1 = require("./use-list-desktop");
+const models_2 = require("../../../models");
+const hooks_1 = require("../../../providers/hooks");
+const class_names_1 = require("../../../utils/class-names");
+const hooks_2 = require("../../../utils/hooks");
+const html_1 = require("../../../utils/html");
+const model_1 = require("../../../utils/model");
+const paging_1 = require("../../paging/paging");
+const use_list_1 = require("../use-list");
+/**
+ * The desktop list (the Angular `<smart-list-desktop>`,
+ * `ListDesktopComponent`): a table with one column per list field, plus the
+ * multi-select, remove and item columns, the `top` component factory above
+ * it and the paging below it (`PaginationMode.singlePage`). The CDK table is
+ * plain table markup with the same classes; the header row stays sticky.
+ */
+function SmartListDesktop(props) {
+    const { options, className } = props;
+    const t = (0, hooks_1.useTranslate)();
+    const listHeader = (0, hooks_2.useListHeaderFn)();
+    const fileUrl = (0, use_list_1.useListFileUrl)();
+    const { desktopList, desktopKeys, componentFactories, onChangeMultiselect, cellPipe, type, checkRemoveHandler, removeHandler, itemHandler, loadNextPage, page, totalPages, handlePageChange, infiniteScroll, infiniteScrollRef, } = (0, use_list_desktop_1.useListDesktop)(props);
+    const Top = componentFactories?.top;
+    const rows = desktopList ?? [];
+    const pagination = (last) => last && loadNextPage && totalPages ? ((0, jsx_runtime_1.jsxs)("div", { className: "smart:float-right smart:text-sm smart:text-gray-500", children: [t('page'), ":", ' ', (0, jsx_runtime_1.jsxs)("b", { children: [page, "/", totalPages] })] })) : null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: Top ? (0, jsx_runtime_1.jsx)(Top, {}) : null }), (0, jsx_runtime_1.jsx)("div", { className: "smart:overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: (0, class_names_1.cn)('smart:min-w-full smart:divide-y smart:divide-gray-300 smart:dark:divide-white/10', className), children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "smart:bg-gray-50 smart:dark:bg-gray-800/50", children: desktopKeys.map((key, index) => {
+                                    const last = index === desktopKeys.length - 1;
+                                    switch (key) {
+                                        case 'selectMulti':
+                                            return ((0, jsx_runtime_1.jsx)("th", { className: "smart:w-10 smart:px-3 smart:py-3.5", style: use_list_desktop_1.LIST_DESKTOP_STICKY_HEADER_STYLE }, key));
+                                        case 'removeAction':
+                                        case 'itemAction':
+                                            return ((0, jsx_runtime_1.jsx)("th", { className: "smart:w-10 smart:px-3 smart:py-3.5", style: use_list_desktop_1.LIST_DESKTOP_STICKY_HEADER_STYLE, children: pagination(last) }, key));
+                                        default:
+                                            return ((0, jsx_runtime_1.jsxs)("th", { className: "smart:px-3 smart:py-3.5 smart:text-left smart:text-sm smart:font-semibold smart:text-gray-900 smart:dark:text-white", style: use_list_desktop_1.LIST_DESKTOP_STICKY_HEADER_STYLE, children: [listHeader(desktopList, key, type), pagination(last)] }, key));
+                                    }
+                                }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: rows.map((element) => ((0, jsx_runtime_1.jsx)("tr", { className: "smart:hover:bg-gray-50 smart:dark:hover:bg-gray-800/30", children: desktopKeys.map((key) => {
+                                    switch (key) {
+                                        case 'selectMulti':
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: "smart:w-10 smart:px-3 smart:py-4", children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "smart:rounded smart:border-gray-300 smart:text-indigo-600 smart:focus:ring-indigo-600", onChange: (event) => onChangeMultiselect(event.target.checked, element, rows) }) }, key));
+                                        case 'removeAction':
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: "smart:w-10 smart:px-3 smart:py-4", children: !checkRemoveHandler ||
+                                                    checkRemoveHandler(element) ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "smart:text-red-600 smart:hover:text-red-900 smart:dark:text-red-400 smart:dark:hover:text-red-300", onClick: () => removeHandler?.(element), children: t('remove') })) : null }, key));
+                                        case 'itemAction':
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: "smart:w-10 smart:px-3 smart:py-4", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "smart:text-indigo-600 smart:hover:text-indigo-900 smart:dark:text-indigo-400 smart:dark:hover:text-indigo-300", onClick: () => itemHandler?.(element.id), children: "\u2192" }) }, key));
+                                        default: {
+                                            const cell = (0, model_1.getListCell)(element, key, cellPipe, type, t);
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: "smart:px-3 smart:py-4 smart:text-sm smart:text-gray-700 smart:dark:text-gray-300", "smart-item-key": key, children: cell ? (cell.type === models_1.FieldType.image ? ((0, jsx_runtime_1.jsx)("img", { height: "50", src: fileUrl(cell.value) || undefined, loading: "lazy", alt: "", className: "smart:h-10 smart:w-auto" })) : ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: (0, html_1.toInnerHtml)(cell.value) }))) : null }, key));
+                                        }
+                                    }
+                                }) }, element.id))) })] }) }), options.pagination?.mode === models_2.PaginationMode.singlePage ? ((0, jsx_runtime_1.jsx)(paging_1.SmartPaging, { currentPage: page ?? 1, totalPages: totalPages ?? 1, onPageChange: handlePageChange })) : null, infiniteScroll ? ((0, jsx_runtime_1.jsx)("div", { ref: infiniteScrollRef, "data-role": "infinite-scroll", "aria-hidden": "true" })) : null] }));
+}
+//# sourceMappingURL=list-desktop.js.map

package/src/lib/components/list/desktop/list-desktop.js.map

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

package/src/lib/components/list/desktop/preset/list-desktop-preset.d.ts

@@ -0,0 +1,19 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartListModeProps } from '../../list.types';
+/**
+ * Preline-styled desktop list variation (the Angular
+ * `<smart-list-desktop-preset>`, `ListDesktopPresetComponent`). Drop-in
+ * replacement for `SmartListDesktop`: register it for `ListMode.desktop`
+ * through `listModeComponents` on `SmartProvider` (see
+ * `LIST_PRESET_MODE_COMPONENTS`), or render it directly.
+ *
+ * Keeps every functional branch of the desktop table (top slot, multi
+ * select, remove / item actions, pagination, image cells) and restyles it
+ * with the Preline table look, driven by `options.presentation`: `variant`
+ * (default | striped | bordered | borderless), `hoverable` and `header`
+ * (default | muted | none). `className` goes on the container.
+ *
+ * Like the CDK table, the table ends with an empty hidden `<tfoot>`, so the
+ * dividers also draw a line below the last body row.
+ */
+export declare function SmartListDesktopPreset<T extends IEntity<string>>(props: SmartListModeProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/list/desktop/preset/list-desktop-preset.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartListDesktopPreset = SmartListDesktopPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const models_1 = require("@smartsoft001/models");
+const preset_classes_1 = require("./preset-classes");
+const models_2 = require("../../../../models");
+const hooks_1 = require("../../../../providers/hooks");
+const class_names_1 = require("../../../../utils/class-names");
+const hooks_2 = require("../../../../utils/hooks");
+const html_1 = require("../../../../utils/html");
+const model_1 = require("../../../../utils/model");
+const paging_1 = require("../../../paging/paging");
+const use_list_1 = require("../../use-list");
+const use_list_desktop_1 = require("../use-list-desktop");
+/**
+ * Preline-styled desktop list variation (the Angular
+ * `<smart-list-desktop-preset>`, `ListDesktopPresetComponent`). Drop-in
+ * replacement for `SmartListDesktop`: register it for `ListMode.desktop`
+ * through `listModeComponents` on `SmartProvider` (see
+ * `LIST_PRESET_MODE_COMPONENTS`), or render it directly.
+ *
+ * Keeps every functional branch of the desktop table (top slot, multi
+ * select, remove / item actions, pagination, image cells) and restyles it
+ * with the Preline table look, driven by `options.presentation`: `variant`
+ * (default | striped | bordered | borderless), `hoverable` and `header`
+ * (default | muted | none). `className` goes on the container.
+ *
+ * Like the CDK table, the table ends with an empty hidden `<tfoot>`, so the
+ * dividers also draw a line below the last body row.
+ */
+function SmartListDesktopPreset(props) {
+    const { options, className } = props;
+    const t = (0, hooks_1.useTranslate)();
+    const listHeader = (0, hooks_2.useListHeaderFn)();
+    const fileUrl = (0, use_list_1.useListFileUrl)();
+    const { desktopList, desktopKeys, componentFactories, onChangeMultiselect, cellPipe, type, checkRemoveHandler, removeHandler, itemHandler, loadNextPage, page, totalPages, handlePageChange, infiniteScroll, infiniteScrollRef, } = (0, use_list_desktop_1.useListDesktop)(props);
+    const Top = componentFactories?.top;
+    const rows = desktopList ?? [];
+    const presentation = options?.presentation ?? {};
+    const containerClasses = (0, class_names_1.cn)((0, preset_classes_1.getListDesktopContainerClasses)(presentation.variant), className);
+    const tableClasses = (0, preset_classes_1.getListDesktopTableClasses)(presentation.variant);
+    const headerRowClasses = (0, preset_classes_1.getListDesktopHeaderRowClasses)(presentation.header);
+    const headerCellClasses = (0, preset_classes_1.getListDesktopHeaderCellClasses)();
+    const rowClasses = (0, preset_classes_1.getListDesktopRowClasses)(presentation.variant, Boolean(presentation.hoverable));
+    const cellClasses = (0, preset_classes_1.getListDesktopCellClasses)();
+    const pagination = (last) => last && loadNextPage && totalPages ? ((0, jsx_runtime_1.jsxs)("div", { className: "smart:float-right smart:text-sm smart:text-gray-500", children: [t('page'), ":", ' ', (0, jsx_runtime_1.jsxs)("b", { children: [page, "/", totalPages] })] })) : null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: Top ? (0, jsx_runtime_1.jsx)(Top, {}) : null }), (0, jsx_runtime_1.jsx)("div", { className: containerClasses, children: (0, jsx_runtime_1.jsxs)("table", { "data-role": "table", className: tableClasses, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { "data-role": "header-row", className: headerRowClasses || undefined, children: desktopKeys.map((key, index) => {
+                                    const last = index === desktopKeys.length - 1;
+                                    switch (key) {
+                                        case 'selectMulti':
+                                            return ((0, jsx_runtime_1.jsx)("th", { className: "smart:w-10 smart:px-3 smart:py-3", style: use_list_desktop_1.LIST_DESKTOP_STICKY_HEADER_STYLE }, key));
+                                        case 'removeAction':
+                                        case 'itemAction':
+                                            return ((0, jsx_runtime_1.jsx)("th", { className: (0, class_names_1.cn)(headerCellClasses, 'smart:w-10 smart:text-end'), style: use_list_desktop_1.LIST_DESKTOP_STICKY_HEADER_STYLE, children: pagination(last) }, key));
+                                        default:
+                                            return ((0, jsx_runtime_1.jsxs)("th", { className: headerCellClasses, style: use_list_desktop_1.LIST_DESKTOP_STICKY_HEADER_STYLE, children: [listHeader(desktopList, key, type), pagination(last)] }, key));
+                                    }
+                                }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: rows.map((element) => ((0, jsx_runtime_1.jsx)("tr", { "data-role": "row", className: rowClasses || undefined, children: desktopKeys.map((key) => {
+                                    switch (key) {
+                                        case 'selectMulti':
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: "smart:w-10 smart:px-3 smart:py-4", children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "smart:shrink-0 smart:border-gray-300 smart:rounded-sm smart:text-blue-600 smart:focus:ring-blue-500 smart:dark:bg-gray-800 smart:dark:border-gray-600 smart:dark:checked:bg-blue-500 smart:dark:checked:border-blue-500", onChange: (event) => onChangeMultiselect(event.target.checked, element, rows) }) }, key));
+                                        case 'removeAction':
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: (0, class_names_1.cn)(cellClasses, 'smart:w-10 smart:text-end'), children: !checkRemoveHandler ||
+                                                    checkRemoveHandler(element) ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-role": "remove", className: "smart:inline-flex smart:items-center smart:gap-x-2 smart:text-sm smart:font-semibold smart:rounded-lg smart:text-red-600 smart:hover:text-red-700 smart:dark:text-red-400 smart:dark:hover:text-red-300 smart:focus:outline-hidden smart:disabled:opacity-50 smart:disabled:pointer-events-none", onClick: () => removeHandler?.(element), children: t('remove') })) : null }, key));
+                                        case 'itemAction':
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: (0, class_names_1.cn)(cellClasses, 'smart:w-10 smart:text-end'), children: (0, jsx_runtime_1.jsx)("button", { type: "button", "data-role": "item", className: "smart:inline-flex smart:items-center smart:gap-x-2 smart:text-sm smart:font-semibold smart:rounded-lg smart:text-blue-600 smart:hover:text-blue-700 smart:dark:text-blue-400 smart:dark:hover:text-blue-300 smart:focus:outline-hidden smart:disabled:opacity-50 smart:disabled:pointer-events-none", onClick: () => itemHandler?.(element.id), children: "\u2192" }) }, key));
+                                        default: {
+                                            const cell = (0, model_1.getListCell)(element, key, cellPipe, type, t);
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: cellClasses, "smart-item-key": key, children: cell ? (cell.type === models_1.FieldType.image ? ((0, jsx_runtime_1.jsx)("img", { height: "50", src: fileUrl(cell.value) || undefined, loading: "lazy", alt: "", className: "smart:h-10 smart:w-auto" })) : ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: (0, html_1.toInnerHtml)(cell.value) }))) : null }, key));
+                                        }
+                                    }
+                                }) }, element.id))) }), (0, jsx_runtime_1.jsx)("tfoot", { style: { display: 'none' } })] }) }), options.pagination?.mode === models_2.PaginationMode.singlePage ? ((0, jsx_runtime_1.jsx)(paging_1.SmartPaging, { currentPage: page ?? 1, totalPages: totalPages ?? 1, onPageChange: handlePageChange })) : null, infiniteScroll ? ((0, jsx_runtime_1.jsx)("div", { ref: infiniteScrollRef, "data-role": "infinite-scroll", "aria-hidden": "true" })) : null] }));
+}
+//# sourceMappingURL=list-desktop-preset.js.map

package/src/lib/components/list/desktop/preset/list-desktop-preset.js.map

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

package/src/lib/components/list/desktop/preset/preset-classes.d.ts

@@ -0,0 +1,25 @@
+type ListPresentationVariant = 'default' | 'striped' | 'bordered' | 'borderless';
+type ListPresentationHeader = 'default' | 'muted' | 'none';
+/**
+ * Classes for the container `<div>` that wraps the table. The `bordered`
+ * variant adds a Preline surface border around the whole table.
+ */
+export declare function getListDesktopContainerClasses(variant?: ListPresentationVariant): string;
+/**
+ * Classes for the `<table>` element. Every variant keeps `min-w-full`; the
+ * horizontal dividers are dropped for the `borderless` variant.
+ */
+export declare function getListDesktopTableClasses(variant?: ListPresentationVariant): string;
+/**
+ * Classes for the header row. `muted` gives the Preline gray surface, `none`
+ * hides the header entirely, `default` renders it plain.
+ */
+export declare function getListDesktopHeaderRowClasses(header?: ListPresentationHeader): string;
+export declare function getListDesktopHeaderCellClasses(): string;
+/**
+ * Classes for body rows. `striped` alternates row backgrounds; `hoverable`
+ * adds the Preline hover surface. Both can combine.
+ */
+export declare function getListDesktopRowClasses(variant?: ListPresentationVariant, hoverable?: boolean): string;
+export declare function getListDesktopCellClasses(): string;
+export {};