@inseefr/lunatic 2.7.21 → 3.0.0-rc.10

package/lib/components/shared/suggester-loader-widget/widget.js

@@ -0,0 +1,133 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _function = require("../../../utils/function");
+var _dragger = _interopRequireDefault(require("./dragger"));
+var _isNetwork = require("./is-network");
+var _Icons = require("../Icons");
+var _loaderRow = _interopRequireDefault(require("./loader-row"));
+var _tools = require("./tools");
+var _widgetContainer = _interopRequireDefault(require("./widget-container"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function SuggesterLoaderWidget(_ref) {
+  var source = _ref.source,
+    workersBasePath = _ref.workersBasePath,
+    getStoreInfo = _ref.getStoreInfo,
+    _ref$onRefresh = _ref.onRefresh,
+    onRefresh = _ref$onRefresh === void 0 ? _function.voidFunction : _ref$onRefresh,
+    absolute = _ref.absolute;
+  var suggesters = source.suggesters;
+  var containerEl = (0, _react.useRef)(null);
+  var current = containerEl.current;
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    stores = _useState2[0],
+    setStores = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rows = _useState4[0],
+    setRows = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    disabled = _useState6[0],
+    setDisabled = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    drag = _useState8[0],
+    setDrag = _useState8[1];
+  (0, _react.useEffect)(function () {
+    if (suggesters) {
+      var str = suggesters.reduce(function (current, storeInfo) {
+        var name = storeInfo.name;
+        return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, name, _objectSpread({
+          storeInfo: storeInfo
+        }, getStoreInfo(name))));
+      }, {});
+      setStores(str);
+    }
+  }, [suggesters, getStoreInfo]);
+  var notify = (0, _react.useCallback)(function (online) {
+    setDisabled(!online);
+  }, []);
+  var onDrag = (0, _react.useCallback)(function (status) {
+    if (!drag && status) {
+      setDrag(true);
+    } else if (drag && !status) {
+      setDrag(false);
+    }
+  }, [drag]);
+  (0, _react.useEffect)(function () {
+    if (stores) {
+      setRows(Object.entries(stores).map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          name = _ref3[0],
+          _ref3$ = _ref3[1],
+          storeInfo = _ref3$.storeInfo,
+          idbVersion = _ref3$.idbVersion,
+          fetchStore = _ref3$.fetch;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_loaderRow["default"], {
+          storeInfo: storeInfo,
+          workersBasePath: workersBasePath,
+          idbVersion: idbVersion,
+          fetchStore: fetchStore,
+          onRefresh: onRefresh,
+          disabled: disabled
+        }, name);
+      }));
+    }
+  }, [stores, disabled, onRefresh, workersBasePath]);
+  (0, _react.useEffect)(function () {
+    if (current && absolute) {
+      current.style.top = '30px';
+      current.style.left = '30px';
+    }
+  }, [current, absolute]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_widgetContainer["default"], {
+    ref: containerEl,
+    drag: drag,
+    absolute: absolute,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tools.Tools, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tools.ActionTool, {
+        className: (0, _classnames["default"])('', {
+          drag: drag
+        }),
+        ariaLabel: "drag",
+        display: absolute,
+        title: "drag",
+        children: current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragger["default"], {
+          el: current,
+          onDrag: onDrag,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.OnDragIcon, {
+            className: (0, _classnames["default"])('on-drag-icon', {
+              drag: drag
+            })
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_isNetwork.IsNetwork, {
+      className: (0, _classnames["default"])('suggester-widget-network', {
+        drag: drag
+      }),
+      notify: notify
+    }), rows]
+  });
+}
+var _default = exports["default"] = SuggesterLoaderWidget;

package/lib/constants/indexedDBStore.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.STORE_INFO_NAME = exports.STORE_INDEX_PATH = exports.STORE_INDEX_NAME = exports.STORE_DATA_NAME = exports.SEARCH_TYPES = exports.MAX_STRING = void 0;
+var STORE_DATA_NAME = exports.STORE_DATA_NAME = 'store/entities';
+var STORE_INFO_NAME = exports.STORE_INFO_NAME = 'store/info';
+var STORE_INDEX_NAME = exports.STORE_INDEX_NAME = 'store/entities/index';
+var STORE_INDEX_PATH = exports.STORE_INDEX_PATH = 'searching';
+var MAX_STRING = exports.MAX_STRING = String.fromCharCode(65535);
+var SEARCH_TYPES = exports.SEARCH_TYPES = {
+  prefix: 'search/prefix',
+  tokens: 'search/tokens'
+};
+var IndexedDBStore = {
+  STORE_DATA_NAME: STORE_DATA_NAME,
+  STORE_INDEX_NAME: STORE_INDEX_NAME,
+  STORE_INDEX_PATH: STORE_INDEX_PATH,
+  MAX_STRING: MAX_STRING,
+  SEARCH_TYPES: SEARCH_TYPES,
+  STORE_INFO_NAME: STORE_INFO_NAME
+};
+var _default = exports["default"] = IndexedDBStore;

package/lib/css/components/Button.scss

@@ -0,0 +1,24 @@
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.2em;
+	font-weight: bold;
+	padding: 0.4em;
+	&:hover,
+	&:focus:hover {
+		color: var(--color-primary-dark);
+		background-color: white;
+		border-color: var(--color-primary-dark);
+	}
+	&:focus {
+		outline: none;
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary-light);
+	}
+	&:disabled {
+		background: var(--color-disabled);
+		color: var(--color-primary-dark);
+	}
+}

package/lib/css/components/CheckboxGroup.scss

@@ -0,0 +1,13 @@
+
+.lunatic-checkbox-group {
+  legend {
+    .label-description {
+      font-weight: lighter;
+      display: block;
+    }
+  }
+  .lunatic-checkbox-group-option {
+    display: flex;
+    font-size: 13px;
+  }
+}

package/lib/css/components/CheckboxOne.scss

@@ -0,0 +1,19 @@
+.lunatic-checkbox-one {
+	legend {
+		.label-description {
+			font-weight: lighter;
+		}
+	}
+	.lunatic-input-radio {
+		display: flex;
+
+		label {
+			display: flex;
+			gap:0.5em;
+			align-items: center;
+			.label-description {
+				font-weight: lighter;
+			}
+		}
+	}
+}

package/lib/css/components/CheckboxOption.scss

@@ -0,0 +1,19 @@
+.checkbox-modality {
+	.lunatic-input-checkbox {
+		display: flex;
+		.label-description {
+			font-weight: lighter;
+		}
+
+		.lunatic-label {
+			font-weight: normal;
+			display: flex;
+			gap: 0.5em;
+			align-items: center;
+		}
+	}
+}
+.lunatic-checkbox-label {
+	gap: 0.5em;
+	align-items: center;
+}

package/lib/css/components/Combobox.scss

@@ -0,0 +1,206 @@
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin placeholder {
+	color: gray;
+	@include defaultFont();
+	font-size: 15px;
+	line-height: 34px;
+	vertical-align: middle;
+	font-weight: normal;
+}
+
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin selection() {
+	@include defaultFont();
+}
+
+.lunatic-combo-box-container {
+	position: relative;
+	width: 100%;
+
+	&.default-style {
+		--color-combo-box-selected: Cornsilk;
+		--color-primary-dark: DarkGreen;
+		--color-primary-main: FloralWhite;
+		--color-combo-box-background: snow;
+		--color-disabled: Gainsboro;
+		--color-primary-light: GreenYellow;
+
+		margin-bottom: 10px;
+		.lunatic-combo-box {
+			min-height: 30px;
+			min-width: 260px;
+			width: 100%;
+			.lunatic-combo-box-content {
+				.lunatic-combo-box-selection {
+					border-radius: 5px;
+					border: 2px solid var(--color-primary-dark);
+					background-color: var(--color-combo-box-background);
+					&:hover {
+						border-color: var(--color-primary-main);
+					}
+					.lunatic-combo-box-input {
+						height: 34px;
+						line-height: 34px;
+						font-size: 15px;
+						padding-left: 4px;
+						@include selection();
+
+						&::placeholder {
+							@include placeholder();
+						}
+					}
+
+					.lunatic-combo-box-selected {
+						height: 42px;
+						line-height: 34px;
+						background-color: var(--color-combo-box-background);
+						border-radius: 5px;
+						padding-left: 4px;
+						@include selection();
+						outline: none;
+						overflow-y: hidden;
+						display: block;
+						@include placeholder();
+
+						.selection {
+							display: inline-block;
+							line-height: 34px;
+							font-size: 15px;
+						}
+
+						&.disabled {
+							background-color: var(--color-disabled);
+						}
+					}
+				}
+
+				.lunatic-combo-box-panel {
+					@include defaultFont();
+					height: 0;
+					opacity: 0;
+					background-color: var(--color-combo-box-background);
+					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+					&.expanded {
+						border: solid 1px var(--color-primary-light);
+						opacity: 1;
+						min-height: 30px;
+						height: max-content;
+						box-shadow: 0 2px 2px grey;
+						border-radius: 4px;
+					}
+					.lunatic-combo-box-option {
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+						margin-bottom: 0.1em;
+						line-height: 2rem;
+						display: block;
+
+						&.selected {
+							color: var(--color-primary-dark);
+							background-color: var(--color-combo-box-selected);
+						}
+						&:hover {
+							background-color: var(--color-primary-main);
+							color: var(--color-combo-box-background);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.lunatic-combo-box-fab {
+		position: absolute;
+		right: 4px;
+		top: 8px;
+		z-index: 0;
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-icon {
+			svg {
+				fill: white;
+				width: 16px;
+				height: 16px;
+				margin: auto;
+			}
+		}
+	}
+
+	.lunatic-combo-box {
+		position: relative;
+		z-index: 0;
+
+		&:focus {
+			outline: none;
+		}
+
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-combo-box-content {
+			position: absolute;
+			width: 100%;
+
+			.lunatic-combo-box-selection {
+				position: relative;
+				.lunatic-combo-box-input {
+					border: none;
+					margin: 0;
+					padding: 0;
+					background-color: transparent;
+					&:focus {
+						outline: none;
+					}
+
+					width: 100%;
+				}
+
+				.lunatic-combo-box-selected {
+					// position: absolute;
+					top: 0;
+					white-space: nowrap;
+					overflow-x: hidden;
+					width: 100%;
+					display: none;
+					&.displayed {
+						display: block;
+					}
+				}
+			}
+
+			ul,
+			li,
+			div,
+			span {
+				margin: 0;
+				padding: 0;
+				border: none;
+				list-style: none;
+			}
+
+			.lunatic-combo-box-panel {
+				&:focus {
+					outline: none;
+				}
+				.lunatic-combo-box-option {
+					white-space: nowrap;
+					@include preventSelect();
+				}
+			}
+		}
+	}
+}

package/lib/css/components/ComponentErrors.scss

@@ -0,0 +1,5 @@
+.lunatic-errors {
+	.lunatic-error {
+		color: red;
+	}
+}

package/lib/css/components/Datepicker.scss

@@ -0,0 +1,19 @@
+.lunaticDatepickerFields {
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.lunaticDatepickerField input {
+  width: 3.5em;
+}
+
+.lunaticDatepickerFieldLarge input {
+  width: 4.5em;
+}
+
+.lunaticDatepickerHint {
+  display: block;
+  font-weight: 400;
+  font-size: .9em;
+}

package/lib/css/components/Declarations.scss

@@ -0,0 +1,42 @@
+.lunatic-component {
+	.lunatic-declarations {
+		margin-bottom: 0.4rem;
+	}
+
+	.declaration-instruction {
+		font-style: italic;
+		font-size: 80%;
+	}
+
+	.declaration-statement {
+		font-style: italic;
+		font-size: 80%;
+		color: blue;
+	}
+
+	.declaration-help {
+		font-style: italic;
+		font-size: 80%;
+		color: green;
+	}
+
+	.CODECARD {
+		font-style: bold;
+		font-size: 80%;
+		color: grey;
+		border: solid 1px grey;
+		width: fit-content;
+		padding: 1em;
+		&:before {
+			content: "→ "
+		}
+	}
+
+	.declaration-message_filter {
+		font-size: 100%;
+		color: rgb(73, 66, 66);
+		&:before {
+			content: '→ ';
+		}
+	}
+}

package/lib/css/components/Dragger.scss

@@ -0,0 +1,8 @@
+.lunatic-dragger {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+}

package/lib/css/components/Dropdown.scss

@@ -0,0 +1,38 @@
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin disableSelect {
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* Internet Explorer */
+	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
+	-webkit-user-select: none; /* Chrome, Safari, and Opera */
+	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
+}
+
+.lunatic-component {
+	.lunatic-dropdown {
+		.lunatic-dropdown-option {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			margin-bottom: 0.1em;
+			line-height: 2rem;
+			display: block;
+
+			&.selected {
+				color: var(--color-primary-dark);
+				background-color: goldenrod;
+			}
+
+			&:hover {
+				background-color: var(--color-primary-main);
+				color: white;
+			}
+
+			.prefix {
+				color: red;
+			}
+		}
+	}
+}

package/lib/css/components/Duration.scss

@@ -0,0 +1,9 @@
+.duration-fields,
+.duration-field {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.duration-field {
+  gap: .5rem;
+}

package/lib/css/components/Fieldset.scss

@@ -0,0 +1,5 @@
+fieldset {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

package/lib/css/components/IconButton.scss

@@ -0,0 +1,38 @@
+.lunatic-icon {
+	display: flex;
+	align-items: center;
+}
+
+// floating action button
+.lunatic-fab {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	margin: 0;
+	padding: 0;
+	outline: inherit;
+	border: none;
+	background-color: royalblue;
+	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
+		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+
+	&:hover {
+		cursor: pointer;
+		background-color: navy;
+		transition: background-color 1s;
+	}
+
+	&.mini {
+		width: 18px;
+		height: 18px;
+	}
+
+	&:focus {
+		border: solid 1px black;
+	}
+
+	&:disabled {
+		cursor: default;
+		background-color: darkgray;
+	}
+}

package/lib/css/components/Input.scss

@@ -0,0 +1,42 @@
+.lunatic-component {
+	.lunatic-input,
+	.lunatic-datepicker,
+	.lunatic-textarea,
+	.lunatic-input-number {
+		label {
+			font-size: 12px;
+			.label-description {
+				font-size: 12px;
+				font-weight: lighter;
+				display: block;
+			}
+		}
+		input {
+			font: inherit;
+			border: 0;
+			border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);
+			margin: 0;
+			padding: 0.375rem 0 0.375rem 0.4375rem;
+			display: inline-block;
+			min-width: 0;
+			box-sizing: content-box;
+			background: none;
+			&:focus {
+				outline: none;
+				border-bottom: 0.125rem solid var(--color-primary-main);
+			}
+			&:hover {
+				border-bottom: 0.125rem solid black;
+			}
+			&:read-only {
+				background-color: var(--color-disabled);
+			}
+		}
+
+		.warning {
+			box-sizing: border-box;
+			border: solid 2px var(--color-error);
+			background-color: var(--color-error);
+		}
+	}
+}

package/lib/css/components/InputNumber.scss

@@ -0,0 +1,11 @@
+// see input.scss
+
+.lunatic-component {
+	.lunatic-input-number {
+		display: inline-block;
+
+		.label-description {
+			display: block;
+		}
+	}
+}

package/lib/css/components/Label.scss

@@ -0,0 +1,6 @@
+.lunatic-label {
+	.label-description {
+		font-weight: lighter;
+		display: block;
+	}
+}