@fctc/sme-widget-ui 1.7.4 → 1.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +120 -66
  2. package/dist/index.mjs +121 -67
  3. package/dist/widgets.js +120 -66
  4. package/dist/widgets.mjs +121 -67
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
4297
4297
  var ContextProvider = REACT_PROVIDER_TYPE;
4298
4298
  var Element2 = REACT_ELEMENT_TYPE;
4299
4299
  var ForwardRef = REACT_FORWARD_REF_TYPE;
4300
- var Fragment32 = REACT_FRAGMENT_TYPE;
4300
+ var Fragment33 = REACT_FRAGMENT_TYPE;
4301
4301
  var Lazy = REACT_LAZY_TYPE;
4302
4302
  var Memo = REACT_MEMO_TYPE;
4303
4303
  var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
4356
4356
  exports2.ContextProvider = ContextProvider;
4357
4357
  exports2.Element = Element2;
4358
4358
  exports2.ForwardRef = ForwardRef;
4359
- exports2.Fragment = Fragment32;
4359
+ exports2.Fragment = Fragment33;
4360
4360
  exports2.Lazy = Lazy;
4361
4361
  exports2.Memo = Memo;
4362
4362
  exports2.Portal = Portal2;
@@ -35034,7 +35034,7 @@ var Many2OneField = (props) => {
35034
35034
  className: "cursor-pointer",
35035
35035
  "data-tooltip-id": String(name2) + index4,
35036
35036
  id: name2,
35037
- children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
35037
+ children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue?.id || propValue
35038
35038
  }
35039
35039
  )
35040
35040
  ] });
@@ -35276,82 +35276,136 @@ var import_jsx_runtime105 = require("react/jsx-runtime");
35276
35276
  var StatusBarOptionField = (props) => {
35277
35277
  const { selection, defaultValue } = props;
35278
35278
  const memoizedStatusOptions = (0, import_react66.useMemo)(() => selection, [selection]);
35279
+ const indexInProgress = memoizedStatusOptions?.findIndex(
35280
+ (option) => option?.[0] === defaultValue
35281
+ );
35279
35282
  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35280
35283
  "div",
35281
35284
  {
35282
35285
  style: {
35283
35286
  display: "flex",
35284
35287
  alignItems: "center",
35285
- flexWrap: "wrap",
35286
- overflow: "hidden"
35288
+ flexWrap: "wrap"
35287
35289
  },
35288
35290
  children: memoizedStatusOptions?.map((option, index4) => {
35289
- const value = option?.[0] === defaultValue;
35290
- return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
35291
- "label",
35292
- {
35293
- style: {
35294
- position: "relative",
35295
- flexShrink: 0,
35296
- cursor: "default",
35297
- height: "36px",
35298
- display: "flex",
35299
- alignItems: "center",
35300
- paddingLeft: "32px",
35301
- // pl-8
35302
- paddingRight: "20px",
35303
- // pr-[20px]
35304
- fontWeight: 600,
35305
- // font-semibold
35306
- fontSize: "14px",
35307
- background: value ? "var(--color-primary)" : "#FAFAFA",
35308
- color: value ? "#fff" : "#121212",
35309
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
35310
- // rounded-l-xl
35311
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
35312
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
35313
- // rounded-r-xl
35314
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
35315
- },
35316
- children: [
35317
- /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35318
- "input",
35319
- {
35320
- type: "radio",
35321
- checked: value,
35322
- style: { display: "none" },
35323
- disabled: true
35324
- }
35325
- ),
35326
- option[1],
35327
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35328
- "div",
35329
- {
35330
- style: {
35331
- position: "absolute",
35332
- top: "50%",
35333
- transform: "translateY(-50%) rotate(45deg)",
35334
- zIndex: 2,
35335
- width: "26px",
35336
- height: "26px",
35337
- right: "-13px",
35338
- background: value ? "var(--color-primary)" : "#FAFAFA",
35339
- border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
35340
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
35341
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
35342
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
35343
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
35291
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
35292
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
35293
+ "div",
35294
+ {
35295
+ style: {
35296
+ position: "relative",
35297
+ flexShrink: 0,
35298
+ cursor: "default",
35299
+ padding: "4px",
35300
+ display: "flex",
35301
+ alignItems: "center",
35302
+ fontWeight: 600,
35303
+ fontSize: "12px",
35304
+ background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
35305
+ color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
35306
+ borderRadius: "16px",
35307
+ boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
35308
+ },
35309
+ children: [
35310
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35311
+ "span",
35312
+ {
35313
+ style: {
35314
+ backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
35315
+ width: 20,
35316
+ height: 20,
35317
+ display: "flex",
35318
+ justifyContent: "center",
35319
+ alignItems: "center",
35320
+ borderRadius: "100%"
35321
+ },
35322
+ children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICMinus, {})
35344
35323
  }
35345
- }
35346
- )
35347
- ]
35348
- },
35349
- option?.[0]
35350
- );
35324
+ ),
35325
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35326
+ "span",
35327
+ {
35328
+ style: {
35329
+ padding: "0 6px"
35330
+ },
35331
+ children: option[1]
35332
+ }
35333
+ )
35334
+ ]
35335
+ },
35336
+ option?.[0]
35337
+ ),
35338
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35339
+ "div",
35340
+ {
35341
+ style: {
35342
+ height: "3px",
35343
+ width: "6px",
35344
+ backgroundColor: "#F3F3F3"
35345
+ }
35346
+ }
35347
+ )
35348
+ ] });
35351
35349
  })
35352
35350
  }
35353
35351
  );
35354
35352
  };
35353
+ var ICMinus = () => {
35354
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35355
+ "svg",
35356
+ {
35357
+ xmlns: "http://www.w3.org/2000/svg",
35358
+ width: "16",
35359
+ height: "16",
35360
+ viewBox: "0 0 16 16",
35361
+ fill: "none",
35362
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35363
+ "path",
35364
+ {
35365
+ d: "M4 8H12",
35366
+ stroke: "#C3C3C3",
35367
+ "stroke-width": "1.5",
35368
+ "stroke-linecap": "round",
35369
+ "stroke-linejoin": "round"
35370
+ }
35371
+ )
35372
+ }
35373
+ );
35374
+ };
35375
+ var ICCircle = () => {
35376
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35377
+ "svg",
35378
+ {
35379
+ xmlns: "http://www.w3.org/2000/svg",
35380
+ width: "8",
35381
+ height: "8",
35382
+ viewBox: "0 0 8 8",
35383
+ fill: "none",
35384
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
35385
+ }
35386
+ );
35387
+ };
35388
+ var ICCheck = () => {
35389
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35390
+ "svg",
35391
+ {
35392
+ xmlns: "http://www.w3.org/2000/svg",
35393
+ width: "16",
35394
+ height: "16",
35395
+ viewBox: "0 0 16 16",
35396
+ fill: "none",
35397
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35398
+ "path",
35399
+ {
35400
+ d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
35401
+ fill: "white",
35402
+ stroke: "white",
35403
+ "stroke-width": "0.25"
35404
+ }
35405
+ )
35406
+ }
35407
+ );
35408
+ };
35355
35409
 
35356
35410
  // src/widgets/basic/date-option-field/date-option.tsx
35357
35411
  var import_jsx_runtime106 = require("react/jsx-runtime");
package/dist/index.mjs CHANGED
@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
4297
4297
  var ContextProvider = REACT_PROVIDER_TYPE;
4298
4298
  var Element2 = REACT_ELEMENT_TYPE;
4299
4299
  var ForwardRef = REACT_FORWARD_REF_TYPE;
4300
- var Fragment32 = REACT_FRAGMENT_TYPE;
4300
+ var Fragment33 = REACT_FRAGMENT_TYPE;
4301
4301
  var Lazy = REACT_LAZY_TYPE;
4302
4302
  var Memo = REACT_MEMO_TYPE;
4303
4303
  var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
4356
4356
  exports.ContextProvider = ContextProvider;
4357
4357
  exports.Element = Element2;
4358
4358
  exports.ForwardRef = ForwardRef;
4359
- exports.Fragment = Fragment32;
4359
+ exports.Fragment = Fragment33;
4360
4360
  exports.Lazy = Lazy;
4361
4361
  exports.Memo = Memo;
4362
4362
  exports.Portal = Portal2;
@@ -34913,7 +34913,7 @@ var Many2OneField = (props) => {
34913
34913
  className: "cursor-pointer",
34914
34914
  "data-tooltip-id": String(name2) + index4,
34915
34915
  id: name2,
34916
- children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
34916
+ children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue?.id || propValue
34917
34917
  }
34918
34918
  )
34919
34919
  ] });
@@ -35151,86 +35151,140 @@ var StatusbarDurationField = (props) => {
35151
35151
 
35152
35152
  // src/widgets/basic/status-bar-field/option/option.tsx
35153
35153
  import { useMemo as useMemo11 } from "react";
35154
- import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
35154
+ import { Fragment as Fragment32, jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
35155
35155
  var StatusBarOptionField = (props) => {
35156
35156
  const { selection, defaultValue } = props;
35157
35157
  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
35158
+ const indexInProgress = memoizedStatusOptions?.findIndex(
35159
+ (option) => option?.[0] === defaultValue
35160
+ );
35158
35161
  return /* @__PURE__ */ jsx107(
35159
35162
  "div",
35160
35163
  {
35161
35164
  style: {
35162
35165
  display: "flex",
35163
35166
  alignItems: "center",
35164
- flexWrap: "wrap",
35165
- overflow: "hidden"
35167
+ flexWrap: "wrap"
35166
35168
  },
35167
35169
  children: memoizedStatusOptions?.map((option, index4) => {
35168
- const value = option?.[0] === defaultValue;
35169
- return /* @__PURE__ */ jsxs73(
35170
- "label",
35171
- {
35172
- style: {
35173
- position: "relative",
35174
- flexShrink: 0,
35175
- cursor: "default",
35176
- height: "36px",
35177
- display: "flex",
35178
- alignItems: "center",
35179
- paddingLeft: "32px",
35180
- // pl-8
35181
- paddingRight: "20px",
35182
- // pr-[20px]
35183
- fontWeight: 600,
35184
- // font-semibold
35185
- fontSize: "14px",
35186
- background: value ? "var(--color-primary)" : "#FAFAFA",
35187
- color: value ? "#fff" : "#121212",
35188
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
35189
- // rounded-l-xl
35190
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
35191
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
35192
- // rounded-r-xl
35193
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
35194
- },
35195
- children: [
35196
- /* @__PURE__ */ jsx107(
35197
- "input",
35198
- {
35199
- type: "radio",
35200
- checked: value,
35201
- style: { display: "none" },
35202
- disabled: true
35203
- }
35204
- ),
35205
- option[1],
35206
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
35207
- "div",
35208
- {
35209
- style: {
35210
- position: "absolute",
35211
- top: "50%",
35212
- transform: "translateY(-50%) rotate(45deg)",
35213
- zIndex: 2,
35214
- width: "26px",
35215
- height: "26px",
35216
- right: "-13px",
35217
- background: value ? "var(--color-primary)" : "#FAFAFA",
35218
- border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
35219
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
35220
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
35221
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
35222
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
35170
+ return /* @__PURE__ */ jsxs73(Fragment32, { children: [
35171
+ /* @__PURE__ */ jsxs73(
35172
+ "div",
35173
+ {
35174
+ style: {
35175
+ position: "relative",
35176
+ flexShrink: 0,
35177
+ cursor: "default",
35178
+ padding: "4px",
35179
+ display: "flex",
35180
+ alignItems: "center",
35181
+ fontWeight: 600,
35182
+ fontSize: "12px",
35183
+ background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
35184
+ color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
35185
+ borderRadius: "16px",
35186
+ boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
35187
+ },
35188
+ children: [
35189
+ /* @__PURE__ */ jsx107(
35190
+ "span",
35191
+ {
35192
+ style: {
35193
+ backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
35194
+ width: 20,
35195
+ height: 20,
35196
+ display: "flex",
35197
+ justifyContent: "center",
35198
+ alignItems: "center",
35199
+ borderRadius: "100%"
35200
+ },
35201
+ children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx107(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx107(ICCircle, {}) : /* @__PURE__ */ jsx107(ICMinus, {})
35223
35202
  }
35224
- }
35225
- )
35226
- ]
35227
- },
35228
- option?.[0]
35229
- );
35203
+ ),
35204
+ /* @__PURE__ */ jsx107(
35205
+ "span",
35206
+ {
35207
+ style: {
35208
+ padding: "0 6px"
35209
+ },
35210
+ children: option[1]
35211
+ }
35212
+ )
35213
+ ]
35214
+ },
35215
+ option?.[0]
35216
+ ),
35217
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
35218
+ "div",
35219
+ {
35220
+ style: {
35221
+ height: "3px",
35222
+ width: "6px",
35223
+ backgroundColor: "#F3F3F3"
35224
+ }
35225
+ }
35226
+ )
35227
+ ] });
35230
35228
  })
35231
35229
  }
35232
35230
  );
35233
35231
  };
35232
+ var ICMinus = () => {
35233
+ return /* @__PURE__ */ jsx107(
35234
+ "svg",
35235
+ {
35236
+ xmlns: "http://www.w3.org/2000/svg",
35237
+ width: "16",
35238
+ height: "16",
35239
+ viewBox: "0 0 16 16",
35240
+ fill: "none",
35241
+ children: /* @__PURE__ */ jsx107(
35242
+ "path",
35243
+ {
35244
+ d: "M4 8H12",
35245
+ stroke: "#C3C3C3",
35246
+ "stroke-width": "1.5",
35247
+ "stroke-linecap": "round",
35248
+ "stroke-linejoin": "round"
35249
+ }
35250
+ )
35251
+ }
35252
+ );
35253
+ };
35254
+ var ICCircle = () => {
35255
+ return /* @__PURE__ */ jsx107(
35256
+ "svg",
35257
+ {
35258
+ xmlns: "http://www.w3.org/2000/svg",
35259
+ width: "8",
35260
+ height: "8",
35261
+ viewBox: "0 0 8 8",
35262
+ fill: "none",
35263
+ children: /* @__PURE__ */ jsx107("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
35264
+ }
35265
+ );
35266
+ };
35267
+ var ICCheck = () => {
35268
+ return /* @__PURE__ */ jsx107(
35269
+ "svg",
35270
+ {
35271
+ xmlns: "http://www.w3.org/2000/svg",
35272
+ width: "16",
35273
+ height: "16",
35274
+ viewBox: "0 0 16 16",
35275
+ fill: "none",
35276
+ children: /* @__PURE__ */ jsx107(
35277
+ "path",
35278
+ {
35279
+ d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
35280
+ fill: "white",
35281
+ stroke: "white",
35282
+ "stroke-width": "0.25"
35283
+ }
35284
+ )
35285
+ }
35286
+ );
35287
+ };
35234
35288
 
35235
35289
  // src/widgets/basic/date-option-field/date-option.tsx
35236
35290
  import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";
package/dist/widgets.js CHANGED
@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
4297
4297
  var ContextProvider = REACT_PROVIDER_TYPE;
4298
4298
  var Element2 = REACT_ELEMENT_TYPE;
4299
4299
  var ForwardRef = REACT_FORWARD_REF_TYPE;
4300
- var Fragment32 = REACT_FRAGMENT_TYPE;
4300
+ var Fragment33 = REACT_FRAGMENT_TYPE;
4301
4301
  var Lazy = REACT_LAZY_TYPE;
4302
4302
  var Memo = REACT_MEMO_TYPE;
4303
4303
  var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
4356
4356
  exports2.ContextProvider = ContextProvider;
4357
4357
  exports2.Element = Element2;
4358
4358
  exports2.ForwardRef = ForwardRef;
4359
- exports2.Fragment = Fragment32;
4359
+ exports2.Fragment = Fragment33;
4360
4360
  exports2.Lazy = Lazy;
4361
4361
  exports2.Memo = Memo;
4362
4362
  exports2.Portal = Portal2;
@@ -34658,7 +34658,7 @@ var Many2OneField = (props) => {
34658
34658
  className: "cursor-pointer",
34659
34659
  "data-tooltip-id": String(name2) + index4,
34660
34660
  id: name2,
34661
- children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
34661
+ children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue?.id || propValue
34662
34662
  }
34663
34663
  )
34664
34664
  ] });
@@ -34900,82 +34900,136 @@ var import_jsx_runtime105 = require("react/jsx-runtime");
34900
34900
  var StatusBarOptionField = (props) => {
34901
34901
  const { selection, defaultValue } = props;
34902
34902
  const memoizedStatusOptions = (0, import_react66.useMemo)(() => selection, [selection]);
34903
+ const indexInProgress = memoizedStatusOptions?.findIndex(
34904
+ (option) => option?.[0] === defaultValue
34905
+ );
34903
34906
  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34904
34907
  "div",
34905
34908
  {
34906
34909
  style: {
34907
34910
  display: "flex",
34908
34911
  alignItems: "center",
34909
- flexWrap: "wrap",
34910
- overflow: "hidden"
34912
+ flexWrap: "wrap"
34911
34913
  },
34912
34914
  children: memoizedStatusOptions?.map((option, index4) => {
34913
- const value = option?.[0] === defaultValue;
34914
- return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
34915
- "label",
34916
- {
34917
- style: {
34918
- position: "relative",
34919
- flexShrink: 0,
34920
- cursor: "default",
34921
- height: "36px",
34922
- display: "flex",
34923
- alignItems: "center",
34924
- paddingLeft: "32px",
34925
- // pl-8
34926
- paddingRight: "20px",
34927
- // pr-[20px]
34928
- fontWeight: 600,
34929
- // font-semibold
34930
- fontSize: "14px",
34931
- background: value ? "var(--color-primary)" : "#FAFAFA",
34932
- color: value ? "#fff" : "#121212",
34933
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34934
- // rounded-l-xl
34935
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34936
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34937
- // rounded-r-xl
34938
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34939
- },
34940
- children: [
34941
- /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34942
- "input",
34943
- {
34944
- type: "radio",
34945
- checked: value,
34946
- style: { display: "none" },
34947
- disabled: true
34948
- }
34949
- ),
34950
- option[1],
34951
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34952
- "div",
34953
- {
34954
- style: {
34955
- position: "absolute",
34956
- top: "50%",
34957
- transform: "translateY(-50%) rotate(45deg)",
34958
- zIndex: 2,
34959
- width: "26px",
34960
- height: "26px",
34961
- right: "-13px",
34962
- background: value ? "var(--color-primary)" : "#FAFAFA",
34963
- border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34964
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34965
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34966
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34967
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34915
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
34916
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
34917
+ "div",
34918
+ {
34919
+ style: {
34920
+ position: "relative",
34921
+ flexShrink: 0,
34922
+ cursor: "default",
34923
+ padding: "4px",
34924
+ display: "flex",
34925
+ alignItems: "center",
34926
+ fontWeight: 600,
34927
+ fontSize: "12px",
34928
+ background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
34929
+ color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
34930
+ borderRadius: "16px",
34931
+ boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
34932
+ },
34933
+ children: [
34934
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34935
+ "span",
34936
+ {
34937
+ style: {
34938
+ backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
34939
+ width: 20,
34940
+ height: 20,
34941
+ display: "flex",
34942
+ justifyContent: "center",
34943
+ alignItems: "center",
34944
+ borderRadius: "100%"
34945
+ },
34946
+ children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICMinus, {})
34968
34947
  }
34969
- }
34970
- )
34971
- ]
34972
- },
34973
- option?.[0]
34974
- );
34948
+ ),
34949
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34950
+ "span",
34951
+ {
34952
+ style: {
34953
+ padding: "0 6px"
34954
+ },
34955
+ children: option[1]
34956
+ }
34957
+ )
34958
+ ]
34959
+ },
34960
+ option?.[0]
34961
+ ),
34962
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34963
+ "div",
34964
+ {
34965
+ style: {
34966
+ height: "3px",
34967
+ width: "6px",
34968
+ backgroundColor: "#F3F3F3"
34969
+ }
34970
+ }
34971
+ )
34972
+ ] });
34975
34973
  })
34976
34974
  }
34977
34975
  );
34978
34976
  };
34977
+ var ICMinus = () => {
34978
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34979
+ "svg",
34980
+ {
34981
+ xmlns: "http://www.w3.org/2000/svg",
34982
+ width: "16",
34983
+ height: "16",
34984
+ viewBox: "0 0 16 16",
34985
+ fill: "none",
34986
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34987
+ "path",
34988
+ {
34989
+ d: "M4 8H12",
34990
+ stroke: "#C3C3C3",
34991
+ "stroke-width": "1.5",
34992
+ "stroke-linecap": "round",
34993
+ "stroke-linejoin": "round"
34994
+ }
34995
+ )
34996
+ }
34997
+ );
34998
+ };
34999
+ var ICCircle = () => {
35000
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35001
+ "svg",
35002
+ {
35003
+ xmlns: "http://www.w3.org/2000/svg",
35004
+ width: "8",
35005
+ height: "8",
35006
+ viewBox: "0 0 8 8",
35007
+ fill: "none",
35008
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
35009
+ }
35010
+ );
35011
+ };
35012
+ var ICCheck = () => {
35013
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35014
+ "svg",
35015
+ {
35016
+ xmlns: "http://www.w3.org/2000/svg",
35017
+ width: "16",
35018
+ height: "16",
35019
+ viewBox: "0 0 16 16",
35020
+ fill: "none",
35021
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35022
+ "path",
35023
+ {
35024
+ d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
35025
+ fill: "white",
35026
+ stroke: "white",
35027
+ "stroke-width": "0.25"
35028
+ }
35029
+ )
35030
+ }
35031
+ );
35032
+ };
34979
35033
 
34980
35034
  // src/widgets/basic/date-option-field/date-option.tsx
34981
35035
  var import_jsx_runtime106 = require("react/jsx-runtime");
package/dist/widgets.mjs CHANGED
@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
4297
4297
  var ContextProvider = REACT_PROVIDER_TYPE;
4298
4298
  var Element2 = REACT_ELEMENT_TYPE;
4299
4299
  var ForwardRef = REACT_FORWARD_REF_TYPE;
4300
- var Fragment32 = REACT_FRAGMENT_TYPE;
4300
+ var Fragment33 = REACT_FRAGMENT_TYPE;
4301
4301
  var Lazy = REACT_LAZY_TYPE;
4302
4302
  var Memo = REACT_MEMO_TYPE;
4303
4303
  var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
4356
4356
  exports.ContextProvider = ContextProvider;
4357
4357
  exports.Element = Element2;
4358
4358
  exports.ForwardRef = ForwardRef;
4359
- exports.Fragment = Fragment32;
4359
+ exports.Fragment = Fragment33;
4360
4360
  exports.Lazy = Lazy;
4361
4361
  exports.Memo = Memo;
4362
4362
  exports.Portal = Portal2;
@@ -34595,7 +34595,7 @@ var Many2OneField = (props) => {
34595
34595
  className: "cursor-pointer",
34596
34596
  "data-tooltip-id": String(name2) + index4,
34597
34597
  id: name2,
34598
- children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
34598
+ children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue?.id || propValue
34599
34599
  }
34600
34600
  )
34601
34601
  ] });
@@ -34833,86 +34833,140 @@ var StatusbarDurationField = (props) => {
34833
34833
 
34834
34834
  // src/widgets/basic/status-bar-field/option/option.tsx
34835
34835
  import { useMemo as useMemo11 } from "react";
34836
- import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
34836
+ import { Fragment as Fragment32, jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
34837
34837
  var StatusBarOptionField = (props) => {
34838
34838
  const { selection, defaultValue } = props;
34839
34839
  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
34840
+ const indexInProgress = memoizedStatusOptions?.findIndex(
34841
+ (option) => option?.[0] === defaultValue
34842
+ );
34840
34843
  return /* @__PURE__ */ jsx107(
34841
34844
  "div",
34842
34845
  {
34843
34846
  style: {
34844
34847
  display: "flex",
34845
34848
  alignItems: "center",
34846
- flexWrap: "wrap",
34847
- overflow: "hidden"
34849
+ flexWrap: "wrap"
34848
34850
  },
34849
34851
  children: memoizedStatusOptions?.map((option, index4) => {
34850
- const value = option?.[0] === defaultValue;
34851
- return /* @__PURE__ */ jsxs73(
34852
- "label",
34853
- {
34854
- style: {
34855
- position: "relative",
34856
- flexShrink: 0,
34857
- cursor: "default",
34858
- height: "36px",
34859
- display: "flex",
34860
- alignItems: "center",
34861
- paddingLeft: "32px",
34862
- // pl-8
34863
- paddingRight: "20px",
34864
- // pr-[20px]
34865
- fontWeight: 600,
34866
- // font-semibold
34867
- fontSize: "14px",
34868
- background: value ? "var(--color-primary)" : "#FAFAFA",
34869
- color: value ? "#fff" : "#121212",
34870
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34871
- // rounded-l-xl
34872
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34873
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34874
- // rounded-r-xl
34875
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34876
- },
34877
- children: [
34878
- /* @__PURE__ */ jsx107(
34879
- "input",
34880
- {
34881
- type: "radio",
34882
- checked: value,
34883
- style: { display: "none" },
34884
- disabled: true
34885
- }
34886
- ),
34887
- option[1],
34888
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
34889
- "div",
34890
- {
34891
- style: {
34892
- position: "absolute",
34893
- top: "50%",
34894
- transform: "translateY(-50%) rotate(45deg)",
34895
- zIndex: 2,
34896
- width: "26px",
34897
- height: "26px",
34898
- right: "-13px",
34899
- background: value ? "var(--color-primary)" : "#FAFAFA",
34900
- border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34901
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34902
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34903
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34904
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34852
+ return /* @__PURE__ */ jsxs73(Fragment32, { children: [
34853
+ /* @__PURE__ */ jsxs73(
34854
+ "div",
34855
+ {
34856
+ style: {
34857
+ position: "relative",
34858
+ flexShrink: 0,
34859
+ cursor: "default",
34860
+ padding: "4px",
34861
+ display: "flex",
34862
+ alignItems: "center",
34863
+ fontWeight: 600,
34864
+ fontSize: "12px",
34865
+ background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
34866
+ color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
34867
+ borderRadius: "16px",
34868
+ boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
34869
+ },
34870
+ children: [
34871
+ /* @__PURE__ */ jsx107(
34872
+ "span",
34873
+ {
34874
+ style: {
34875
+ backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
34876
+ width: 20,
34877
+ height: 20,
34878
+ display: "flex",
34879
+ justifyContent: "center",
34880
+ alignItems: "center",
34881
+ borderRadius: "100%"
34882
+ },
34883
+ children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx107(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx107(ICCircle, {}) : /* @__PURE__ */ jsx107(ICMinus, {})
34905
34884
  }
34906
- }
34907
- )
34908
- ]
34909
- },
34910
- option?.[0]
34911
- );
34885
+ ),
34886
+ /* @__PURE__ */ jsx107(
34887
+ "span",
34888
+ {
34889
+ style: {
34890
+ padding: "0 6px"
34891
+ },
34892
+ children: option[1]
34893
+ }
34894
+ )
34895
+ ]
34896
+ },
34897
+ option?.[0]
34898
+ ),
34899
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
34900
+ "div",
34901
+ {
34902
+ style: {
34903
+ height: "3px",
34904
+ width: "6px",
34905
+ backgroundColor: "#F3F3F3"
34906
+ }
34907
+ }
34908
+ )
34909
+ ] });
34912
34910
  })
34913
34911
  }
34914
34912
  );
34915
34913
  };
34914
+ var ICMinus = () => {
34915
+ return /* @__PURE__ */ jsx107(
34916
+ "svg",
34917
+ {
34918
+ xmlns: "http://www.w3.org/2000/svg",
34919
+ width: "16",
34920
+ height: "16",
34921
+ viewBox: "0 0 16 16",
34922
+ fill: "none",
34923
+ children: /* @__PURE__ */ jsx107(
34924
+ "path",
34925
+ {
34926
+ d: "M4 8H12",
34927
+ stroke: "#C3C3C3",
34928
+ "stroke-width": "1.5",
34929
+ "stroke-linecap": "round",
34930
+ "stroke-linejoin": "round"
34931
+ }
34932
+ )
34933
+ }
34934
+ );
34935
+ };
34936
+ var ICCircle = () => {
34937
+ return /* @__PURE__ */ jsx107(
34938
+ "svg",
34939
+ {
34940
+ xmlns: "http://www.w3.org/2000/svg",
34941
+ width: "8",
34942
+ height: "8",
34943
+ viewBox: "0 0 8 8",
34944
+ fill: "none",
34945
+ children: /* @__PURE__ */ jsx107("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
34946
+ }
34947
+ );
34948
+ };
34949
+ var ICCheck = () => {
34950
+ return /* @__PURE__ */ jsx107(
34951
+ "svg",
34952
+ {
34953
+ xmlns: "http://www.w3.org/2000/svg",
34954
+ width: "16",
34955
+ height: "16",
34956
+ viewBox: "0 0 16 16",
34957
+ fill: "none",
34958
+ children: /* @__PURE__ */ jsx107(
34959
+ "path",
34960
+ {
34961
+ d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
34962
+ fill: "white",
34963
+ stroke: "white",
34964
+ "stroke-width": "0.25"
34965
+ }
34966
+ )
34967
+ }
34968
+ );
34969
+ };
34916
34970
 
34917
34971
  // src/widgets/basic/date-option-field/date-option.tsx
34918
34972
  import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fctc/sme-widget-ui",
3
- "version": "1.7.4",
3
+ "version": "1.7.6",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",