@dspworkplace/ui 2.0.1 → 2.1.0
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.
- package/dist/index.es.js +535 -447
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +536 -446
- package/dist/index.js.map +1 -1
- package/dist/tokens.css +42 -0
- package/package.json +4 -2
package/dist/index.js
CHANGED
|
@@ -8,7 +8,9 @@ var React = require('react');
|
|
|
8
8
|
var React__default = _interopDefault(React);
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
var styled__default = _interopDefault(styled);
|
|
11
|
+
var reactDom = require('react-dom');
|
|
11
12
|
var reactAutocomplete = require('@szhsin/react-autocomplete');
|
|
13
|
+
var reactPopper = require('react-popper');
|
|
12
14
|
|
|
13
15
|
var defaultRadius = '4px';
|
|
14
16
|
var colors = {
|
|
@@ -368,7 +370,7 @@ function _templateObject5() {
|
|
|
368
370
|
}
|
|
369
371
|
|
|
370
372
|
function _templateObject4() {
|
|
371
|
-
var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family
|
|
373
|
+
var data = taggedTemplateLiteral(["\n font-size:", ";\n line-height: ", ";\n font-weight:normal;\n font-family: ", ";\n display:block;\n color: ", ";\n margin-top:4px;\n"]);
|
|
372
374
|
|
|
373
375
|
_templateObject4 = function _templateObject4() {
|
|
374
376
|
return data;
|
|
@@ -430,7 +432,7 @@ var InputBase = styled__default.input(_templateObject3(), theme.colors.neutrals.
|
|
|
430
432
|
var size = _ref.size;
|
|
431
433
|
return handleSize(size);
|
|
432
434
|
}, theme.colors.extra.whiteSmoke, borderDefault, theme.colors.neutrals.silver, theme.colors.neutrals.medium, borderDefault, borderDefault, borderDefault, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small);
|
|
433
|
-
var SpanHelp = styled__default.span(_templateObject4(), theme.font.
|
|
435
|
+
var SpanHelp = styled__default.span(_templateObject4(), theme.font.small.size, theme.font.small.lineHeight, theme.font.main, theme.colors.info.text);
|
|
434
436
|
var SpanError = styled__default(SpanHelp)(_templateObject5(), theme.colors.error.text);
|
|
435
437
|
|
|
436
438
|
var RequiredText = function RequiredText() {
|
|
@@ -467,28 +469,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
467
469
|
|
|
468
470
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
469
471
|
|
|
470
|
-
function _templateObject4$1() {
|
|
471
|
-
var data = taggedTemplateLiteral(["\n width:", "\n display:inline-block;\n vertical-align:top;\n\n svg path {\n fill: ", ";\n }\n"]);
|
|
472
|
-
|
|
473
|
-
_templateObject4$1 = function _templateObject4() {
|
|
474
|
-
return data;
|
|
475
|
-
};
|
|
476
|
-
|
|
477
|
-
return data;
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
function _templateObject3$1() {
|
|
481
|
-
var data = taggedTemplateLiteral(["\n color:", "\n"]);
|
|
482
|
-
|
|
483
|
-
_templateObject3$1 = function _templateObject3() {
|
|
484
|
-
return data;
|
|
485
|
-
};
|
|
486
|
-
|
|
487
|
-
return data;
|
|
488
|
-
}
|
|
489
|
-
|
|
490
472
|
function _templateObject2$1() {
|
|
491
|
-
var data = taggedTemplateLiteral(["\n
|
|
473
|
+
var data = taggedTemplateLiteral(["\n width:", "\n display:inline-block;\n vertical-align:top;\n\n svg path {\n fill: ", ";\n }\n"]);
|
|
492
474
|
|
|
493
475
|
_templateObject2$1 = function _templateObject2() {
|
|
494
476
|
return data;
|
|
@@ -558,9 +540,7 @@ var InputBase$1 = styled__default.input(_templateObject$2(), theme.colors.neutra
|
|
|
558
540
|
}, borderDefault$1, function (props) {
|
|
559
541
|
return handlerColor(props.validation);
|
|
560
542
|
}, borderDefault$1, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small, theme.colors.info.bg, theme.colors.neutrals.silver);
|
|
561
|
-
var
|
|
562
|
-
var SpanError$1 = styled__default(Span)(_templateObject3$1(), theme.colors.error.text);
|
|
563
|
-
var Frag$1 = styled__default.div(_templateObject4$1(), function (_ref2) {
|
|
543
|
+
var Frag$1 = styled__default.div(_templateObject2$1(), function (_ref2) {
|
|
564
544
|
var size = _ref2.size;
|
|
565
545
|
return handleSize$1(size);
|
|
566
546
|
}, theme.colors.secondary);
|
|
@@ -649,7 +629,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
649
629
|
validation: validationType,
|
|
650
630
|
ref: ref,
|
|
651
631
|
onChange: handleChange
|
|
652
|
-
})), iconAction && iconAction), help && /*#__PURE__*/React__default.createElement(
|
|
632
|
+
})), iconAction && iconAction), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
653
633
|
src: Ex,
|
|
654
634
|
style: {
|
|
655
635
|
marginRight: '6px'
|
|
@@ -4183,20 +4163,30 @@ var mergeRefs = function mergeRefs(refs) {
|
|
|
4183
4163
|
};
|
|
4184
4164
|
};
|
|
4185
4165
|
|
|
4186
|
-
function
|
|
4166
|
+
function _templateObject5$1() {
|
|
4167
|
+
var data = taggedTemplateLiteral(["\n font-family: ", ";\n"]);
|
|
4168
|
+
|
|
4169
|
+
_templateObject5$1 = function _templateObject5() {
|
|
4170
|
+
return data;
|
|
4171
|
+
};
|
|
4172
|
+
|
|
4173
|
+
return data;
|
|
4174
|
+
}
|
|
4175
|
+
|
|
4176
|
+
function _templateObject4$1() {
|
|
4187
4177
|
var data = taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n\n ", "\n}\n"]);
|
|
4188
4178
|
|
|
4189
|
-
_templateObject4$
|
|
4179
|
+
_templateObject4$1 = function _templateObject4() {
|
|
4190
4180
|
return data;
|
|
4191
4181
|
};
|
|
4192
4182
|
|
|
4193
4183
|
return data;
|
|
4194
4184
|
}
|
|
4195
4185
|
|
|
4196
|
-
function _templateObject3$
|
|
4186
|
+
function _templateObject3$1() {
|
|
4197
4187
|
var data = taggedTemplateLiteral(["\n font-size: 16px;\n line-height: 20px;\n"]);
|
|
4198
4188
|
|
|
4199
|
-
_templateObject3$
|
|
4189
|
+
_templateObject3$1 = function _templateObject3() {
|
|
4200
4190
|
return data;
|
|
4201
4191
|
};
|
|
4202
4192
|
|
|
@@ -4224,34 +4214,19 @@ function _templateObject$5() {
|
|
|
4224
4214
|
}
|
|
4225
4215
|
var Title = styled__default.h1(_templateObject$5(), theme.colors.info.text);
|
|
4226
4216
|
var SubTitle = styled__default.h3(_templateObject2$2(), theme.colors.info.text);
|
|
4227
|
-
var ThirdTitle = styled__default(SubTitle)(_templateObject3$
|
|
4228
|
-
var Text = styled__default.p(_templateObject4$
|
|
4217
|
+
var ThirdTitle = styled__default(SubTitle)(_templateObject3$1());
|
|
4218
|
+
var Text = styled__default.p(_templateObject4$1(), theme.colors.neutrals.gray, function (_ref) {
|
|
4229
4219
|
var subtle = _ref.subtle;
|
|
4230
4220
|
return subtle && "\n color:".concat(theme.colors.neutrals.medium, ";\n ");
|
|
4231
4221
|
});
|
|
4222
|
+
var Emphasis = styled__default.span(_templateObject5$1(), theme.font.main);
|
|
4232
4223
|
|
|
4233
|
-
function
|
|
4234
|
-
var data = taggedTemplateLiteral(["\n border: 0;\n padding-right: 8px;\n background: transparent;\n cursor: inherit;\n display: flex;\n align-items: center;\n height: 100%;\n"]);
|
|
4235
|
-
|
|
4236
|
-
_templateObject14 = function _templateObject14() {
|
|
4237
|
-
return data;
|
|
4238
|
-
};
|
|
4239
|
-
|
|
4240
|
-
return data;
|
|
4241
|
-
}
|
|
4242
|
-
|
|
4243
|
-
function _templateObject13() {
|
|
4244
|
-
var data = taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n border: 0;\n outline: 0;\n padding: 0;\n background: transparent;\n cursor: inherit;\n font-family: inherit;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n padding-left: 8px;\n\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n"]);
|
|
4245
|
-
|
|
4246
|
-
_templateObject13 = function _templateObject13() {
|
|
4247
|
-
return data;
|
|
4248
|
-
};
|
|
4224
|
+
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
4249
4225
|
|
|
4250
|
-
|
|
4251
|
-
}
|
|
4226
|
+
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
4252
4227
|
|
|
4253
4228
|
function _templateObject12() {
|
|
4254
|
-
var data = taggedTemplateLiteral(["\n
|
|
4229
|
+
var data = taggedTemplateLiteral(["\n border: 0;\n padding-right: 8px;\n background: transparent;\n cursor: inherit;\n display: flex;\n align-items: center;\n height: 100%;\n"]);
|
|
4255
4230
|
|
|
4256
4231
|
_templateObject12 = function _templateObject12() {
|
|
4257
4232
|
return data;
|
|
@@ -4261,7 +4236,7 @@ function _templateObject12() {
|
|
|
4261
4236
|
}
|
|
4262
4237
|
|
|
4263
4238
|
function _templateObject11() {
|
|
4264
|
-
var data = taggedTemplateLiteral(["\n
|
|
4239
|
+
var data = taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n border: 0;\n outline: 0;\n padding: 0;\n background: transparent;\n cursor: inherit;\n font-family: inherit;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n padding-left: 8px;\n\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n"]);
|
|
4265
4240
|
|
|
4266
4241
|
_templateObject11 = function _templateObject11() {
|
|
4267
4242
|
return data;
|
|
@@ -4271,7 +4246,7 @@ function _templateObject11() {
|
|
|
4271
4246
|
}
|
|
4272
4247
|
|
|
4273
4248
|
function _templateObject10() {
|
|
4274
|
-
var data = taggedTemplateLiteral(["\n
|
|
4249
|
+
var data = taggedTemplateLiteral(["\n height: 24px;\n width: 24px;\n box-sizing: border-box;\n margin-right: 5px;\n border-radius: 100%;\n border: 2px solid white;\n background: ", "\n z-index: ", ";\n margin-left: ", "\n margin-top: 8px;\n margin-bottom: 8px;\n display: inline-block;\n"]);
|
|
4275
4250
|
|
|
4276
4251
|
_templateObject10 = function _templateObject10() {
|
|
4277
4252
|
return data;
|
|
@@ -4281,7 +4256,7 @@ function _templateObject10() {
|
|
|
4281
4256
|
}
|
|
4282
4257
|
|
|
4283
4258
|
function _templateObject9$1() {
|
|
4284
|
-
var data = taggedTemplateLiteral(["\n
|
|
4259
|
+
var data = taggedTemplateLiteral(["\n color: #707070;\n font-size: 12px;\n padding: 8px;\n font-weight: bold;\n cursor: default;\n white-space: nowrap;\n"]);
|
|
4285
4260
|
|
|
4286
4261
|
_templateObject9$1 = function _templateObject9() {
|
|
4287
4262
|
return data;
|
|
@@ -4291,7 +4266,7 @@ function _templateObject9$1() {
|
|
|
4291
4266
|
}
|
|
4292
4267
|
|
|
4293
4268
|
function _templateObject8$1() {
|
|
4294
|
-
var data = taggedTemplateLiteral(["\n
|
|
4269
|
+
var data = taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n border: 1px solid ", ";\n height: 16px;\n width: 16px;\n border-radius: ", ";\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-right: 9px;\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 6px ", ";\n }\n\n"]);
|
|
4295
4270
|
|
|
4296
4271
|
_templateObject8$1 = function _templateObject8() {
|
|
4297
4272
|
return data;
|
|
@@ -4301,7 +4276,7 @@ function _templateObject8$1() {
|
|
|
4301
4276
|
}
|
|
4302
4277
|
|
|
4303
4278
|
function _templateObject7$1() {
|
|
4304
|
-
var data = taggedTemplateLiteral(["\n
|
|
4279
|
+
var data = taggedTemplateLiteral(["\n height: 22px;\n width: 22px;\n overflow: hidden;\n border-radius: 100%;\n border: 1px solid #516F90;\n background: #EAF0F6;\n margin-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n > svg {\n margin-top: 2px;\n }\n\n > img {\n width: 25px;\n height: 25px;\n object-fit: cover;\n object-position: center;\n }\n"]);
|
|
4305
4280
|
|
|
4306
4281
|
_templateObject7$1 = function _templateObject7() {
|
|
4307
4282
|
return data;
|
|
@@ -4311,7 +4286,7 @@ function _templateObject7$1() {
|
|
|
4311
4286
|
}
|
|
4312
4287
|
|
|
4313
4288
|
function _templateObject6$1() {
|
|
4314
|
-
var data = taggedTemplateLiteral(["\n
|
|
4289
|
+
var data = taggedTemplateLiteral(["\n position: absolute;\n height: 1px;\n width: 1px;\n z-index: -1;\n opacity: 0;\n"]);
|
|
4315
4290
|
|
|
4316
4291
|
_templateObject6$1 = function _templateObject6() {
|
|
4317
4292
|
return data;
|
|
@@ -4320,30 +4295,30 @@ function _templateObject6$1() {
|
|
|
4320
4295
|
return data;
|
|
4321
4296
|
}
|
|
4322
4297
|
|
|
4323
|
-
function _templateObject5$
|
|
4298
|
+
function _templateObject5$2() {
|
|
4324
4299
|
var data = taggedTemplateLiteral(["\n max-height: ", "px;\n overflow-y: scroll;\n\n > li {\n padding-right: 8px;\n height: auto;\n min-height: 32px;\n justify-content: flex-start;\n }\n"]);
|
|
4325
4300
|
|
|
4326
|
-
_templateObject5$
|
|
4301
|
+
_templateObject5$2 = function _templateObject5() {
|
|
4327
4302
|
return data;
|
|
4328
4303
|
};
|
|
4329
4304
|
|
|
4330
4305
|
return data;
|
|
4331
4306
|
}
|
|
4332
4307
|
|
|
4333
|
-
function _templateObject4$
|
|
4334
|
-
var data = taggedTemplateLiteral(["\n padding: 0;\n margin: 4px 0;\n background: white;\n border: 1px solid ", ";\n box-shadow: 0 0 6px ", ";\n border-radius: ", ";\n list-style: none;\n width: auto;\n display: inline-block;\n position: absolute;\n top: 100%;\n ", "\n left: -1px;\n z-index: 10;\n\n ", "\n ", "\n li {\n font-size: ", ";\n color: #707070;\n height: 32px;\n cursor: pointer;\n padding: 0px 4px 0 8px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > ul {\n display: none;\n }\n\n &::before {\n content: \" \";\n height: 100%;\n width: 6px;\n background: transparent;\n display: block;\n position: absolute;\n right: -7px;\n }\n\n\n &:hover {\n background: ", ";\n\n > ul {\n display: inline-block;\n }\n }\n\n &.alone {\n border-top: 1px solid ", ";\n }\n\n }\n"]);
|
|
4308
|
+
function _templateObject4$2() {
|
|
4309
|
+
var data = taggedTemplateLiteral(["\n padding: 0;\n margin: 4px 0;\n background: white;\n border: 1px solid ", ";\n box-shadow: 0 0 6px ", ";\n border-radius: ", ";\n list-style: none;\n width: auto;\n display: inline-block;\n position: absolute;\n top: 100%;\n ", "\n left: -1px;\n z-index: 10;\n\n ", "\n ", "\n li {\n font-size: ", ";\n color: #707070;\n height: 32px;\n cursor: pointer;\n padding: 0px 4px 0 8px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > ul {\n display: none;\n }\n\n &::before {\n content: \" \";\n height: 100%;\n width: 6px;\n background: transparent;\n display: block;\n position: absolute;\n right: -7px;\n }\n\n\n &:hover,\n &.active {\n background: ", ";\n\n > ul {\n display: inline-block;\n }\n }\n\n &.alone {\n border-top: 1px solid ", ";\n }\n\n }\n"]);
|
|
4335
4310
|
|
|
4336
|
-
_templateObject4$
|
|
4311
|
+
_templateObject4$2 = function _templateObject4() {
|
|
4337
4312
|
return data;
|
|
4338
4313
|
};
|
|
4339
4314
|
|
|
4340
4315
|
return data;
|
|
4341
4316
|
}
|
|
4342
4317
|
|
|
4343
|
-
function _templateObject3$
|
|
4318
|
+
function _templateObject3$2() {
|
|
4344
4319
|
var data = taggedTemplateLiteral(["\n white-space: nowrap;\n overflow: hidden;\n color: ", ";\n\n ", "\n > span {\n color: #707070;\n }\n"]);
|
|
4345
4320
|
|
|
4346
|
-
_templateObject3$
|
|
4321
|
+
_templateObject3$2 = function _templateObject3() {
|
|
4347
4322
|
return data;
|
|
4348
4323
|
};
|
|
4349
4324
|
|
|
@@ -4398,12 +4373,12 @@ var Value$1 = styled__default(Text).attrs(function (props) {
|
|
|
4398
4373
|
return {
|
|
4399
4374
|
as: 'span'
|
|
4400
4375
|
};
|
|
4401
|
-
})(_templateObject3$
|
|
4376
|
+
})(_templateObject3$2(), theme.colors.neutrals.medium, function (props) {
|
|
4402
4377
|
return props.option && "\n display:inline-block;\n flex:1;\n ";
|
|
4403
4378
|
});
|
|
4404
4379
|
var maxOptions = 3;
|
|
4405
4380
|
var optionsSize = 32;
|
|
4406
|
-
var Options$1 = styled__default.ul(_templateObject4$
|
|
4381
|
+
var Options$1 = styled__default.ul(_templateObject4$2(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
|
|
4407
4382
|
return props.openTo === 'top' && "\n top:unset;\n bottom: 100%;\n ";
|
|
4408
4383
|
}, function (props) {
|
|
4409
4384
|
return !props.hasChildren && "\n max-height: ".concat(props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : maxOptions * optionsSize, "px;\n overflow-x:hidden;\n overflow-y:scroll;\n ");
|
|
@@ -4411,16 +4386,14 @@ var Options$1 = styled__default.ul(_templateObject4$3(), theme.colors.neutrals.s
|
|
|
4411
4386
|
return props.isChild && "\n position:absolute;\n left:100%;\n margin-left:4px;\n top:-4px;\n ";
|
|
4412
4387
|
}, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
|
|
4413
4388
|
var optionsSizeCustom = 42;
|
|
4414
|
-
var OptionsPeople = styled__default(Options$1)(_templateObject5$
|
|
4389
|
+
var OptionsPeople = styled__default(Options$1)(_templateObject5$2(), function (props) {
|
|
4415
4390
|
return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : optionsSizeCustom * optionsSize;
|
|
4416
4391
|
});
|
|
4417
|
-
var
|
|
4418
|
-
var
|
|
4419
|
-
var
|
|
4420
|
-
var
|
|
4421
|
-
var
|
|
4422
|
-
var OptionGroup$1 = styled__default.div(_templateObject11());
|
|
4423
|
-
var ColorOption = styled__default.span(_templateObject12(), function (props) {
|
|
4392
|
+
var SelectHidden = styled__default.select(_templateObject6$1());
|
|
4393
|
+
var PhotoCover = styled__default.div(_templateObject7$1());
|
|
4394
|
+
var CustomCheckBox = styled__default.div(_templateObject8$1(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.defaultRadius, theme.colors.secondary, theme.colors.action);
|
|
4395
|
+
var OptionGroup$1 = styled__default.div(_templateObject9$1());
|
|
4396
|
+
var ColorOption = styled__default.span(_templateObject10(), function (props) {
|
|
4424
4397
|
return props.color ? props.color : 'black';
|
|
4425
4398
|
}, function (props) {
|
|
4426
4399
|
return props.index > 0 ? 10 - props.index : 10;
|
|
@@ -4436,10 +4409,10 @@ var getSelected = function getSelected(options, defaultValue) {
|
|
|
4436
4409
|
return selected;
|
|
4437
4410
|
};
|
|
4438
4411
|
|
|
4439
|
-
var SearchInput = styled__default.input(
|
|
4412
|
+
var SearchInput = styled__default.input(_templateObject11(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
|
|
4440
4413
|
return props.hasSelection ? theme.colors.neutrals.gray : theme.colors.neutrals.medium;
|
|
4441
4414
|
});
|
|
4442
|
-
var ToggleButton = styled__default.button(
|
|
4415
|
+
var ToggleButton = styled__default.button(_templateObject12());
|
|
4443
4416
|
|
|
4444
4417
|
var isOption = function isOption(item) {
|
|
4445
4418
|
return item.value !== undefined && item.value !== null;
|
|
@@ -4461,36 +4434,83 @@ var optionText = function optionText(node) {
|
|
|
4461
4434
|
if (typeof node === 'string' || typeof node === 'number') return node.toString();
|
|
4462
4435
|
if (Array.isArray(node)) return node.map(optionText).join('');
|
|
4463
4436
|
return node.props ? optionText(node.props.children) : '';
|
|
4464
|
-
};
|
|
4465
|
-
|
|
4466
|
-
var keepInViewport = function keepInViewport(node) {
|
|
4467
|
-
if (node && node.getBoundingClientRect().right > window.innerWidth) {
|
|
4468
|
-
node.style.left = 'unset';
|
|
4469
|
-
node.style.right = '0px';
|
|
4470
|
-
}
|
|
4471
|
-
}; // eslint-disable-next-line react/prop-types
|
|
4437
|
+
}; // rendered in document.body so overflow on any ancestor cannot clip it; popper flips and shifts it to stay in the viewport
|
|
4438
|
+
// eslint-disable-next-line react/prop-types
|
|
4472
4439
|
|
|
4473
4440
|
|
|
4474
|
-
var
|
|
4475
|
-
var
|
|
4476
|
-
selectedOpt = _ref3.selectedOpt,
|
|
4477
|
-
setSelected = _ref3.setSelected,
|
|
4478
|
-
onChange = _ref3.onChange,
|
|
4479
|
-
onSelect = _ref3.onSelect,
|
|
4480
|
-
placeholder = _ref3.placeholder,
|
|
4481
|
-
error = _ref3.error,
|
|
4482
|
-
valid = _ref3.valid,
|
|
4483
|
-
noOptions = _ref3.noOptions,
|
|
4484
|
-
visibleOptionsQty = _ref3.visibleOptionsQty,
|
|
4441
|
+
var FloatingOptions = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
4442
|
+
var anchor = _ref3.anchor,
|
|
4485
4443
|
openTo = _ref3.openTo,
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
props = objectWithoutProperties(_ref3, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
|
|
4444
|
+
style = _ref3.style,
|
|
4445
|
+
props = objectWithoutProperties(_ref3, ["anchor", "openTo", "style"]);
|
|
4489
4446
|
|
|
4490
|
-
var _useState = React.useState(),
|
|
4447
|
+
var _useState = React.useState(null),
|
|
4491
4448
|
_useState2 = slicedToArray(_useState, 2),
|
|
4492
|
-
|
|
4493
|
-
|
|
4449
|
+
list = _useState2[0],
|
|
4450
|
+
setList = _useState2[1];
|
|
4451
|
+
|
|
4452
|
+
var listRef = React.useCallback(mergeRefs([setList, ref]), [ref]);
|
|
4453
|
+
|
|
4454
|
+
var _usePopper = reactPopper.usePopper(anchor, list, {
|
|
4455
|
+
strategy: 'fixed',
|
|
4456
|
+
placement: openTo === 'top' ? 'top-start' : 'bottom-start',
|
|
4457
|
+
modifiers: [{
|
|
4458
|
+
name: 'offset',
|
|
4459
|
+
options: {
|
|
4460
|
+
offset: [0, 4]
|
|
4461
|
+
}
|
|
4462
|
+
}]
|
|
4463
|
+
}),
|
|
4464
|
+
styles = _usePopper.styles,
|
|
4465
|
+
attributes = _usePopper.attributes,
|
|
4466
|
+
update = _usePopper.update; // popper repositions only on scroll and resize; follow size changes of the anchor and the list
|
|
4467
|
+
|
|
4468
|
+
|
|
4469
|
+
React.useEffect(function () {
|
|
4470
|
+
if (!anchor || !list || !update) return;
|
|
4471
|
+
var observer = new window.ResizeObserver(function () {
|
|
4472
|
+
return update();
|
|
4473
|
+
});
|
|
4474
|
+
observer.observe(anchor);
|
|
4475
|
+
observer.observe(list);
|
|
4476
|
+
return function () {
|
|
4477
|
+
return observer.disconnect();
|
|
4478
|
+
};
|
|
4479
|
+
}, [anchor, list, update]);
|
|
4480
|
+
return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default.createElement(Options$1, _extends_1({
|
|
4481
|
+
ref: listRef,
|
|
4482
|
+
style: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, style), styles.popper), {}, {
|
|
4483
|
+
margin: 0,
|
|
4484
|
+
zIndex: 1000000
|
|
4485
|
+
})
|
|
4486
|
+
}, attributes.popper, props)), document.body);
|
|
4487
|
+
}); // eslint-disable-next-line react/prop-types
|
|
4488
|
+
|
|
4489
|
+
var AutocompleteSelect = function AutocompleteSelect(_ref4) {
|
|
4490
|
+
var options = _ref4.options,
|
|
4491
|
+
selectedOpt = _ref4.selectedOpt,
|
|
4492
|
+
setSelected = _ref4.setSelected,
|
|
4493
|
+
onChange = _ref4.onChange,
|
|
4494
|
+
onSelect = _ref4.onSelect,
|
|
4495
|
+
placeholder = _ref4.placeholder,
|
|
4496
|
+
error = _ref4.error,
|
|
4497
|
+
valid = _ref4.valid,
|
|
4498
|
+
noOptions = _ref4.noOptions,
|
|
4499
|
+
visibleOptionsQty = _ref4.visibleOptionsQty,
|
|
4500
|
+
openTo = _ref4.openTo,
|
|
4501
|
+
startOpen = _ref4.startOpen,
|
|
4502
|
+
resetCallback = _ref4.resetCallback,
|
|
4503
|
+
props = objectWithoutProperties(_ref4, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
|
|
4504
|
+
|
|
4505
|
+
var _useState3 = React.useState(),
|
|
4506
|
+
_useState4 = slicedToArray(_useState3, 2),
|
|
4507
|
+
search = _useState4[0],
|
|
4508
|
+
setSearch = _useState4[1];
|
|
4509
|
+
|
|
4510
|
+
var _useState5 = React.useState(null),
|
|
4511
|
+
_useState6 = slicedToArray(_useState5, 2),
|
|
4512
|
+
anchor = _useState6[0],
|
|
4513
|
+
setAnchor = _useState6[1];
|
|
4494
4514
|
|
|
4495
4515
|
var rows = flattenOptions(options);
|
|
4496
4516
|
var selectable = rows.filter(function (row) {
|
|
@@ -4533,8 +4553,8 @@ var AutocompleteSelect = function AutocompleteSelect(_ref3) {
|
|
|
4533
4553
|
},
|
|
4534
4554
|
disabled: props.disabled,
|
|
4535
4555
|
feature: reactAutocomplete.supercomplete({
|
|
4536
|
-
onRequestItem: function onRequestItem(
|
|
4537
|
-
var value =
|
|
4556
|
+
onRequestItem: function onRequestItem(_ref5, res) {
|
|
4557
|
+
var value = _ref5.value;
|
|
4538
4558
|
var matches = filterItems(value);
|
|
4539
4559
|
if (matches.length > 0) res({
|
|
4540
4560
|
index: 0,
|
|
@@ -4558,6 +4578,7 @@ var AutocompleteSelect = function AutocompleteSelect(_ref3) {
|
|
|
4558
4578
|
}, []);
|
|
4559
4579
|
var index = -1;
|
|
4560
4580
|
return /*#__PURE__*/React__default.createElement(SelectUi$1, _extends_1({
|
|
4581
|
+
ref: setAnchor,
|
|
4561
4582
|
className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
|
|
4562
4583
|
}, props, {
|
|
4563
4584
|
title: selectedText
|
|
@@ -4570,10 +4591,10 @@ var AutocompleteSelect = function AutocompleteSelect(_ref3) {
|
|
|
4570
4591
|
}) : /*#__PURE__*/React__default.createElement(Icons.ArrowDown, {
|
|
4571
4592
|
size: "15px",
|
|
4572
4593
|
color: theme.colors.info.border
|
|
4573
|
-
})), open && /*#__PURE__*/React__default.createElement(
|
|
4594
|
+
})), open && /*#__PURE__*/React__default.createElement(FloatingOptions, _extends_1({
|
|
4595
|
+
anchor: anchor,
|
|
4574
4596
|
visibleOptionsQty: visibleOptionsQty,
|
|
4575
|
-
openTo: openTo
|
|
4576
|
-
ref: keepInViewport
|
|
4597
|
+
openTo: openTo
|
|
4577
4598
|
}, getListProps()), items.length === 0 && /*#__PURE__*/React__default.createElement("li", {
|
|
4578
4599
|
style: {
|
|
4579
4600
|
paddingRight: '8px'
|
|
@@ -4583,9 +4604,9 @@ var AutocompleteSelect = function AutocompleteSelect(_ref3) {
|
|
|
4583
4604
|
item: item,
|
|
4584
4605
|
depth: 0
|
|
4585
4606
|
};
|
|
4586
|
-
}) : rows).map(function (
|
|
4587
|
-
var item =
|
|
4588
|
-
depth =
|
|
4607
|
+
}) : rows).map(function (_ref6, key) {
|
|
4608
|
+
var item = _ref6.item,
|
|
4609
|
+
depth = _ref6.depth;
|
|
4589
4610
|
|
|
4590
4611
|
if (!isOption(item)) {
|
|
4591
4612
|
return /*#__PURE__*/React__default.createElement(OptionGroup$1, {
|
|
@@ -4623,33 +4644,42 @@ var summarizeSelection = function summarizeSelection(names) {
|
|
|
4623
4644
|
}; // eslint-disable-next-line react/prop-types
|
|
4624
4645
|
|
|
4625
4646
|
|
|
4626
|
-
var MultiAutocompleteSelect = function MultiAutocompleteSelect(
|
|
4627
|
-
var options =
|
|
4628
|
-
selectedValues =
|
|
4629
|
-
onToggle =
|
|
4630
|
-
placeholder =
|
|
4631
|
-
error =
|
|
4632
|
-
valid =
|
|
4633
|
-
noOptions =
|
|
4634
|
-
visibleOptionsQty =
|
|
4635
|
-
openTo =
|
|
4636
|
-
startOpen =
|
|
4637
|
-
props = objectWithoutProperties(
|
|
4647
|
+
var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
|
|
4648
|
+
var options = _ref7.options,
|
|
4649
|
+
selectedValues = _ref7.selectedValues,
|
|
4650
|
+
onToggle = _ref7.onToggle,
|
|
4651
|
+
placeholder = _ref7.placeholder,
|
|
4652
|
+
error = _ref7.error,
|
|
4653
|
+
valid = _ref7.valid,
|
|
4654
|
+
noOptions = _ref7.noOptions,
|
|
4655
|
+
visibleOptionsQty = _ref7.visibleOptionsQty,
|
|
4656
|
+
openTo = _ref7.openTo,
|
|
4657
|
+
startOpen = _ref7.startOpen,
|
|
4658
|
+
props = objectWithoutProperties(_ref7, ["options", "selectedValues", "onToggle", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen"]);
|
|
4659
|
+
|
|
4660
|
+
var _useState7 = React.useState(''),
|
|
4661
|
+
_useState8 = slicedToArray(_useState7, 2),
|
|
4662
|
+
search = _useState8[0],
|
|
4663
|
+
setSearch = _useState8[1];
|
|
4638
4664
|
|
|
4639
|
-
var
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4665
|
+
var _useState9 = React.useState(startOpen),
|
|
4666
|
+
_useState10 = slicedToArray(_useState9, 2),
|
|
4667
|
+
open = _useState10[0],
|
|
4668
|
+
setOpen = _useState10[1];
|
|
4643
4669
|
|
|
4644
|
-
var
|
|
4645
|
-
|
|
4646
|
-
|
|
4647
|
-
|
|
4670
|
+
var _useState11 = React.useState(null),
|
|
4671
|
+
_useState12 = slicedToArray(_useState11, 2),
|
|
4672
|
+
anchor = _useState12[0],
|
|
4673
|
+
setAnchor = _useState12[1];
|
|
4648
4674
|
|
|
4649
4675
|
var nodeRef = React.useRef();
|
|
4676
|
+
var listRef = React.useRef();
|
|
4677
|
+
var setNode = React.useCallback(mergeRefs([nodeRef, setAnchor]), []);
|
|
4650
4678
|
React.useEffect(function () {
|
|
4651
4679
|
var closeOnOutsideClick = function closeOnOutsideClick(e) {
|
|
4652
|
-
|
|
4680
|
+
var inList = listRef.current && listRef.current.contains(e.target);
|
|
4681
|
+
|
|
4682
|
+
if (nodeRef.current && !nodeRef.current.contains(e.target) && !inList) {
|
|
4653
4683
|
setOpen(false);
|
|
4654
4684
|
setSearch('');
|
|
4655
4685
|
}
|
|
@@ -4675,7 +4705,7 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref6) {
|
|
|
4675
4705
|
return optionText(item.name);
|
|
4676
4706
|
}));
|
|
4677
4707
|
return /*#__PURE__*/React__default.createElement(SelectUi$1, _extends_1({
|
|
4678
|
-
ref:
|
|
4708
|
+
ref: setNode,
|
|
4679
4709
|
className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
|
|
4680
4710
|
}, props, {
|
|
4681
4711
|
title: summary,
|
|
@@ -4710,10 +4740,11 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref6) {
|
|
|
4710
4740
|
}) : /*#__PURE__*/React__default.createElement(Icons.ArrowDown, {
|
|
4711
4741
|
size: "15px",
|
|
4712
4742
|
color: theme.colors.info.border
|
|
4713
|
-
})), open && /*#__PURE__*/React__default.createElement(
|
|
4743
|
+
})), open && /*#__PURE__*/React__default.createElement(FloatingOptions, {
|
|
4744
|
+
anchor: anchor,
|
|
4714
4745
|
visibleOptionsQty: visibleOptionsQty,
|
|
4715
4746
|
openTo: openTo,
|
|
4716
|
-
ref:
|
|
4747
|
+
ref: listRef
|
|
4717
4748
|
}, items.length === 0 && /*#__PURE__*/React__default.createElement("li", {
|
|
4718
4749
|
style: {
|
|
4719
4750
|
paddingRight: '8px'
|
|
@@ -4723,9 +4754,9 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref6) {
|
|
|
4723
4754
|
item: item,
|
|
4724
4755
|
depth: 0
|
|
4725
4756
|
};
|
|
4726
|
-
}) : rows).map(function (
|
|
4727
|
-
var item =
|
|
4728
|
-
depth =
|
|
4757
|
+
}) : rows).map(function (_ref8, key) {
|
|
4758
|
+
var item = _ref8.item,
|
|
4759
|
+
depth = _ref8.depth;
|
|
4729
4760
|
|
|
4730
4761
|
if (!isOption(item)) {
|
|
4731
4762
|
return /*#__PURE__*/React__default.createElement(OptionGroup$1, {
|
|
@@ -4760,27 +4791,27 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref6) {
|
|
|
4760
4791
|
})));
|
|
4761
4792
|
};
|
|
4762
4793
|
|
|
4763
|
-
var MultiDropdown = /*#__PURE__*/React.forwardRef(function (
|
|
4764
|
-
var name =
|
|
4765
|
-
label =
|
|
4766
|
-
help =
|
|
4767
|
-
error =
|
|
4768
|
-
valid =
|
|
4769
|
-
options =
|
|
4770
|
-
placeholder =
|
|
4771
|
-
onChange =
|
|
4772
|
-
defaultValue =
|
|
4773
|
-
visibleOptionsQty =
|
|
4774
|
-
openTo =
|
|
4775
|
-
|
|
4776
|
-
startOpen =
|
|
4777
|
-
resetCallback =
|
|
4778
|
-
props = objectWithoutProperties(
|
|
4779
|
-
|
|
4780
|
-
var
|
|
4781
|
-
|
|
4782
|
-
selectedValues =
|
|
4783
|
-
setSelectedValues =
|
|
4794
|
+
var MultiDropdown = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
|
|
4795
|
+
var name = _ref9.name,
|
|
4796
|
+
label = _ref9.label,
|
|
4797
|
+
help = _ref9.help,
|
|
4798
|
+
error = _ref9.error,
|
|
4799
|
+
valid = _ref9.valid,
|
|
4800
|
+
options = _ref9.options,
|
|
4801
|
+
placeholder = _ref9.placeholder,
|
|
4802
|
+
onChange = _ref9.onChange,
|
|
4803
|
+
defaultValue = _ref9.defaultValue,
|
|
4804
|
+
visibleOptionsQty = _ref9.visibleOptionsQty,
|
|
4805
|
+
openTo = _ref9.openTo,
|
|
4806
|
+
_ref9$startOpen = _ref9.startOpen,
|
|
4807
|
+
startOpen = _ref9$startOpen === void 0 ? false : _ref9$startOpen,
|
|
4808
|
+
resetCallback = _ref9.resetCallback,
|
|
4809
|
+
props = objectWithoutProperties(_ref9, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
|
|
4810
|
+
|
|
4811
|
+
var _useState13 = React.useState([]),
|
|
4812
|
+
_useState14 = slicedToArray(_useState13, 2),
|
|
4813
|
+
selectedValues = _useState14[0],
|
|
4814
|
+
setSelectedValues = _useState14[1];
|
|
4784
4815
|
|
|
4785
4816
|
var valueRef = React.useRef();
|
|
4786
4817
|
var selectable = flattenOptions(options).filter(function (row) {
|
|
@@ -4849,7 +4880,7 @@ var MultiDropdown = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
|
|
|
4849
4880
|
visibleOptionsQty: visibleOptionsQty,
|
|
4850
4881
|
openTo: openTo,
|
|
4851
4882
|
startOpen: startOpen
|
|
4852
|
-
}, props)), help && /*#__PURE__*/React__default.createElement(
|
|
4883
|
+
}, props)), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
4853
4884
|
src: Ex,
|
|
4854
4885
|
style: {
|
|
4855
4886
|
marginRight: '6px'
|
|
@@ -4867,31 +4898,31 @@ var MultiDropdown = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
|
|
|
4867
4898
|
}, optionText(item.name));
|
|
4868
4899
|
})));
|
|
4869
4900
|
});
|
|
4870
|
-
var SingleDropdown = /*#__PURE__*/React.forwardRef(function (
|
|
4871
|
-
var name =
|
|
4872
|
-
label =
|
|
4873
|
-
help =
|
|
4874
|
-
error =
|
|
4875
|
-
valid =
|
|
4876
|
-
options =
|
|
4877
|
-
placeholder =
|
|
4878
|
-
onChange =
|
|
4879
|
-
defaultValue =
|
|
4880
|
-
visibleOptionsQty =
|
|
4881
|
-
openTo =
|
|
4882
|
-
|
|
4883
|
-
startOpen =
|
|
4884
|
-
props = objectWithoutProperties(
|
|
4901
|
+
var SingleDropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
|
|
4902
|
+
var name = _ref10.name,
|
|
4903
|
+
label = _ref10.label,
|
|
4904
|
+
help = _ref10.help,
|
|
4905
|
+
error = _ref10.error,
|
|
4906
|
+
valid = _ref10.valid,
|
|
4907
|
+
options = _ref10.options,
|
|
4908
|
+
placeholder = _ref10.placeholder,
|
|
4909
|
+
onChange = _ref10.onChange,
|
|
4910
|
+
defaultValue = _ref10.defaultValue,
|
|
4911
|
+
visibleOptionsQty = _ref10.visibleOptionsQty,
|
|
4912
|
+
openTo = _ref10.openTo,
|
|
4913
|
+
_ref10$startOpen = _ref10.startOpen,
|
|
4914
|
+
startOpen = _ref10$startOpen === void 0 ? false : _ref10$startOpen,
|
|
4915
|
+
props = objectWithoutProperties(_ref10, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
|
|
4885
4916
|
|
|
4886
4917
|
var defaultSelected = {
|
|
4887
4918
|
value: '',
|
|
4888
4919
|
desc: ''
|
|
4889
4920
|
};
|
|
4890
4921
|
|
|
4891
|
-
var
|
|
4892
|
-
|
|
4893
|
-
selectedOpt =
|
|
4894
|
-
setSelected =
|
|
4922
|
+
var _useState15 = React.useState(defaultSelected),
|
|
4923
|
+
_useState16 = slicedToArray(_useState15, 2),
|
|
4924
|
+
selectedOpt = _useState16[0],
|
|
4925
|
+
setSelected = _useState16[1];
|
|
4895
4926
|
|
|
4896
4927
|
var valueRef = React.useRef();
|
|
4897
4928
|
|
|
@@ -4961,7 +4992,7 @@ var SingleDropdown = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
|
|
|
4961
4992
|
visibleOptionsQty: visibleOptionsQty,
|
|
4962
4993
|
openTo: openTo,
|
|
4963
4994
|
startOpen: startOpen
|
|
4964
|
-
}, props)), help && /*#__PURE__*/React__default.createElement(
|
|
4995
|
+
}, props)), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
4965
4996
|
src: Ex,
|
|
4966
4997
|
style: {
|
|
4967
4998
|
marginRight: '6px'
|
|
@@ -4973,9 +5004,9 @@ var SingleDropdown = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
|
|
|
4973
5004
|
disabled: props.disabled
|
|
4974
5005
|
}));
|
|
4975
5006
|
});
|
|
4976
|
-
var Dropdown = /*#__PURE__*/React.forwardRef(function (
|
|
4977
|
-
var multiple =
|
|
4978
|
-
props = objectWithoutProperties(
|
|
5007
|
+
var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
|
|
5008
|
+
var multiple = _ref11.multiple,
|
|
5009
|
+
props = objectWithoutProperties(_ref11, ["multiple"]);
|
|
4979
5010
|
|
|
4980
5011
|
return multiple ? /*#__PURE__*/React__default.createElement(MultiDropdown, _extends_1({
|
|
4981
5012
|
ref: ref
|
|
@@ -4984,17 +5015,17 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
|
|
|
4984
5015
|
}, props));
|
|
4985
5016
|
}); // eslint-disable-next-line react/prop-types
|
|
4986
5017
|
|
|
4987
|
-
var BoxOptions = function BoxOptions(
|
|
4988
|
-
var options =
|
|
4989
|
-
isChild =
|
|
4990
|
-
setSelected =
|
|
4991
|
-
onChange =
|
|
4992
|
-
noOptions =
|
|
4993
|
-
selectedOpt =
|
|
4994
|
-
setOpen =
|
|
4995
|
-
onSelect =
|
|
4996
|
-
visibleOptionsQty =
|
|
4997
|
-
openTo =
|
|
5018
|
+
var BoxOptions = function BoxOptions(_ref12) {
|
|
5019
|
+
var options = _ref12.options,
|
|
5020
|
+
isChild = _ref12.isChild,
|
|
5021
|
+
setSelected = _ref12.setSelected,
|
|
5022
|
+
onChange = _ref12.onChange,
|
|
5023
|
+
noOptions = _ref12.noOptions,
|
|
5024
|
+
selectedOpt = _ref12.selectedOpt,
|
|
5025
|
+
setOpen = _ref12.setOpen,
|
|
5026
|
+
onSelect = _ref12.onSelect,
|
|
5027
|
+
visibleOptionsQty = _ref12.visibleOptionsQty,
|
|
5028
|
+
openTo = _ref12.openTo;
|
|
4998
5029
|
|
|
4999
5030
|
if (!options) {
|
|
5000
5031
|
return /*#__PURE__*/React__default.createElement(Options$1, null, /*#__PURE__*/React__default.createElement("li", {
|
|
@@ -5066,32 +5097,32 @@ var BoxOptions = function BoxOptions(_ref11) {
|
|
|
5066
5097
|
})) : /*#__PURE__*/React__default.createElement(OptionGroup$1, null, item.name));
|
|
5067
5098
|
}));
|
|
5068
5099
|
};
|
|
5069
|
-
var CustomDropdown = /*#__PURE__*/React.forwardRef(function (
|
|
5070
|
-
var name =
|
|
5071
|
-
label =
|
|
5072
|
-
help =
|
|
5073
|
-
error =
|
|
5074
|
-
valid =
|
|
5075
|
-
options =
|
|
5076
|
-
placeholder =
|
|
5077
|
-
defaultValue =
|
|
5078
|
-
multiple =
|
|
5079
|
-
type =
|
|
5080
|
-
tooltip =
|
|
5081
|
-
onChange =
|
|
5082
|
-
visibleOptionsQty =
|
|
5083
|
-
openTo =
|
|
5084
|
-
props = objectWithoutProperties(
|
|
5100
|
+
var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
|
|
5101
|
+
var name = _ref13.name,
|
|
5102
|
+
label = _ref13.label,
|
|
5103
|
+
help = _ref13.help,
|
|
5104
|
+
error = _ref13.error,
|
|
5105
|
+
valid = _ref13.valid,
|
|
5106
|
+
options = _ref13.options,
|
|
5107
|
+
placeholder = _ref13.placeholder,
|
|
5108
|
+
defaultValue = _ref13.defaultValue,
|
|
5109
|
+
multiple = _ref13.multiple,
|
|
5110
|
+
type = _ref13.type,
|
|
5111
|
+
tooltip = _ref13.tooltip,
|
|
5112
|
+
onChange = _ref13.onChange,
|
|
5113
|
+
visibleOptionsQty = _ref13.visibleOptionsQty,
|
|
5114
|
+
openTo = _ref13.openTo,
|
|
5115
|
+
props = objectWithoutProperties(_ref13, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
|
|
5085
5116
|
|
|
5086
|
-
var
|
|
5087
|
-
|
|
5088
|
-
open =
|
|
5089
|
-
setOpen =
|
|
5117
|
+
var _useState17 = React.useState(false),
|
|
5118
|
+
_useState18 = slicedToArray(_useState17, 2),
|
|
5119
|
+
open = _useState18[0],
|
|
5120
|
+
setOpen = _useState18[1];
|
|
5090
5121
|
|
|
5091
|
-
var
|
|
5092
|
-
|
|
5093
|
-
selectedOpt =
|
|
5094
|
-
setSelected =
|
|
5122
|
+
var _useState19 = React.useState([]),
|
|
5123
|
+
_useState20 = slicedToArray(_useState19, 2),
|
|
5124
|
+
selectedOpt = _useState20[0],
|
|
5125
|
+
setSelected = _useState20[1];
|
|
5095
5126
|
|
|
5096
5127
|
var nodeSelect = React.useRef();
|
|
5097
5128
|
var valueRef = React.useRef();
|
|
@@ -5261,7 +5292,7 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
|
|
|
5261
5292
|
noOptions: props.noOptions,
|
|
5262
5293
|
visibleOptionsQty: visibleOptionsQty,
|
|
5263
5294
|
openTo: openTo
|
|
5264
|
-
})), help && /*#__PURE__*/React__default.createElement(
|
|
5295
|
+
})), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5265
5296
|
src: Ex,
|
|
5266
5297
|
style: {
|
|
5267
5298
|
marginRight: '6px'
|
|
@@ -5317,16 +5348,16 @@ var HandleState = function HandleState(index, setSelected, selectedOpt, multiple
|
|
|
5317
5348
|
setSelected(ret);
|
|
5318
5349
|
};
|
|
5319
5350
|
|
|
5320
|
-
var SelectOption = function SelectOption(
|
|
5321
|
-
var options =
|
|
5322
|
-
setSelected =
|
|
5323
|
-
selectedOpt =
|
|
5324
|
-
multiple =
|
|
5325
|
-
type =
|
|
5326
|
-
onChange =
|
|
5327
|
-
noOptions =
|
|
5328
|
-
visibleOptionsQty =
|
|
5329
|
-
openTo =
|
|
5351
|
+
var SelectOption = function SelectOption(_ref14) {
|
|
5352
|
+
var options = _ref14.options,
|
|
5353
|
+
setSelected = _ref14.setSelected,
|
|
5354
|
+
selectedOpt = _ref14.selectedOpt,
|
|
5355
|
+
multiple = _ref14.multiple,
|
|
5356
|
+
type = _ref14.type,
|
|
5357
|
+
onChange = _ref14.onChange,
|
|
5358
|
+
noOptions = _ref14.noOptions,
|
|
5359
|
+
visibleOptionsQty = _ref14.visibleOptionsQty,
|
|
5360
|
+
openTo = _ref14.openTo;
|
|
5330
5361
|
|
|
5331
5362
|
if (!options) {
|
|
5332
5363
|
return /*#__PURE__*/React__default.createElement(OptionsPeople, null, /*#__PURE__*/React__default.createElement("li", null, noOptions || 'No data found'));
|
|
@@ -5361,9 +5392,9 @@ var SelectOption = function SelectOption(_ref13) {
|
|
|
5361
5392
|
}));
|
|
5362
5393
|
};
|
|
5363
5394
|
|
|
5364
|
-
var PhotoComponent = function PhotoComponent(
|
|
5365
|
-
var profile =
|
|
5366
|
-
index =
|
|
5395
|
+
var PhotoComponent = function PhotoComponent(_ref15) {
|
|
5396
|
+
var profile = _ref15.profile,
|
|
5397
|
+
index = _ref15.index;
|
|
5367
5398
|
var customStyle = {
|
|
5368
5399
|
position: 'relative',
|
|
5369
5400
|
display: 'inline-flex',
|
|
@@ -5387,11 +5418,11 @@ var PhotoComponent = function PhotoComponent(_ref14) {
|
|
|
5387
5418
|
}));
|
|
5388
5419
|
};
|
|
5389
5420
|
|
|
5390
|
-
var SelectValueRender = function SelectValueRender(
|
|
5391
|
-
var options =
|
|
5392
|
-
selectedOpt =
|
|
5393
|
-
type =
|
|
5394
|
-
noOptions =
|
|
5421
|
+
var SelectValueRender = function SelectValueRender(_ref16) {
|
|
5422
|
+
var options = _ref16.options,
|
|
5423
|
+
selectedOpt = _ref16.selectedOpt,
|
|
5424
|
+
type = _ref16.type,
|
|
5425
|
+
noOptions = _ref16.noOptions;
|
|
5395
5426
|
|
|
5396
5427
|
if (!options) {
|
|
5397
5428
|
return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -5506,28 +5537,8 @@ var Spacer = function Spacer(_ref) {
|
|
|
5506
5537
|
return /*#__PURE__*/React__default.createElement(BaseSpace, props);
|
|
5507
5538
|
};
|
|
5508
5539
|
|
|
5509
|
-
function _templateObject9$2() {
|
|
5510
|
-
var data = taggedTemplateLiteral(["\n color: ", ";\n"]);
|
|
5511
|
-
|
|
5512
|
-
_templateObject9$2 = function _templateObject9() {
|
|
5513
|
-
return data;
|
|
5514
|
-
};
|
|
5515
|
-
|
|
5516
|
-
return data;
|
|
5517
|
-
}
|
|
5518
|
-
|
|
5519
|
-
function _templateObject8$2() {
|
|
5520
|
-
var data = taggedTemplateLiteral(["\n color:", ";\n display:block;\n"]);
|
|
5521
|
-
|
|
5522
|
-
_templateObject8$2 = function _templateObject8() {
|
|
5523
|
-
return data;
|
|
5524
|
-
};
|
|
5525
|
-
|
|
5526
|
-
return data;
|
|
5527
|
-
}
|
|
5528
|
-
|
|
5529
5540
|
function _templateObject7$2() {
|
|
5530
|
-
var data = taggedTemplateLiteral(["\n
|
|
5541
|
+
var data = taggedTemplateLiteral(["\n color: ", ";\n"]);
|
|
5531
5542
|
|
|
5532
5543
|
_templateObject7$2 = function _templateObject7() {
|
|
5533
5544
|
return data;
|
|
@@ -5546,30 +5557,30 @@ function _templateObject6$2() {
|
|
|
5546
5557
|
return data;
|
|
5547
5558
|
}
|
|
5548
5559
|
|
|
5549
|
-
function _templateObject5$
|
|
5560
|
+
function _templateObject5$3() {
|
|
5550
5561
|
var data = taggedTemplateLiteral(["\n font-family:\"Huninn\", sans-serif;\n font-weight:normal;\n font-size:16px;\n color: #707070;\n\n >.requiredField {\n color:", ";\n }\n"]);
|
|
5551
5562
|
|
|
5552
|
-
_templateObject5$
|
|
5563
|
+
_templateObject5$3 = function _templateObject5() {
|
|
5553
5564
|
return data;
|
|
5554
5565
|
};
|
|
5555
5566
|
|
|
5556
5567
|
return data;
|
|
5557
5568
|
}
|
|
5558
5569
|
|
|
5559
|
-
function _templateObject4$
|
|
5570
|
+
function _templateObject4$3() {
|
|
5560
5571
|
var data = taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n border:1px solid ", ";\n height:", ";\n width:", ";\n border-radius:", ";\n display: inline-flex;\n justify-content: center;\n align-items: center;\n box-sizing:border-box;\n\n svg {\n display:none;\n }\n\n ", ":focus + &, ", ":focus + & {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n ", ":disabled + &, ", ":disabled + & {\n background:", ";\n border-color:#707070;\n opacity:0.5;\n cursor:default;\n }\n\n ", ":checked + &, ", ":checked + & {\n svg {\n display:block;\n }\n }\n"]);
|
|
5561
5572
|
|
|
5562
|
-
_templateObject4$
|
|
5573
|
+
_templateObject4$3 = function _templateObject4() {
|
|
5563
5574
|
return data;
|
|
5564
5575
|
};
|
|
5565
5576
|
|
|
5566
5577
|
return data;
|
|
5567
5578
|
}
|
|
5568
5579
|
|
|
5569
|
-
function _templateObject3$
|
|
5580
|
+
function _templateObject3$3() {
|
|
5570
5581
|
var data = taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n justify-content: center;\n cursor:pointer;\n\n &:focus {\n outline:none;\n }\n "]);
|
|
5571
5582
|
|
|
5572
|
-
_templateObject3$
|
|
5583
|
+
_templateObject3$3 = function _templateObject3() {
|
|
5573
5584
|
return data;
|
|
5574
5585
|
};
|
|
5575
5586
|
|
|
@@ -5601,19 +5612,17 @@ var HiddenCheckbox = styled__default.input.attrs({
|
|
|
5601
5612
|
var HiddenRadioBox = styled__default.input.attrs({
|
|
5602
5613
|
type: 'radio'
|
|
5603
5614
|
})(_templateObject2$4());
|
|
5604
|
-
var CheckboxContainer = styled__default.label(_templateObject3$
|
|
5605
|
-
var CustomCheckBox$1 = styled__default.div(_templateObject4$
|
|
5615
|
+
var CheckboxContainer = styled__default.label(_templateObject3$3());
|
|
5616
|
+
var CustomCheckBox$1 = styled__default.div(_templateObject4$3(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, function (props) {
|
|
5606
5617
|
return props.radio ? '17px' : '16px';
|
|
5607
5618
|
}, function (props) {
|
|
5608
5619
|
return props.radio ? '17px' : '16px';
|
|
5609
5620
|
}, function (props) {
|
|
5610
5621
|
return props.radio ? '17px' : '2px';
|
|
5611
5622
|
}, HiddenCheckbox, HiddenRadioBox, theme.colors.secondary, theme.colors.action, HiddenCheckbox, HiddenRadioBox, theme.colors.neutrals.silver, HiddenCheckbox, HiddenRadioBox);
|
|
5612
|
-
var Title$1 = styled__default.h5(_templateObject5$
|
|
5623
|
+
var Title$1 = styled__default.h5(_templateObject5$3(), theme.colors.error.text);
|
|
5613
5624
|
var Label$1 = styled__default.span(_templateObject6$2());
|
|
5614
|
-
var
|
|
5615
|
-
var SpanError$3 = styled__default(Span$2)(_templateObject8$2(), theme.colors.error.text);
|
|
5616
|
-
var NoOptions = styled__default(Text)(_templateObject9$2(), theme.colors.neutrals.silver);
|
|
5625
|
+
var NoOptions = styled__default(Text)(_templateObject7$2(), theme.colors.neutrals.silver);
|
|
5617
5626
|
var CheckboxBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
5618
5627
|
var name = _ref.name,
|
|
5619
5628
|
_ref$checked = _ref.checked,
|
|
@@ -5647,7 +5656,7 @@ var CheckboxBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
5647
5656
|
className: preventClass ? preventClass : ''
|
|
5648
5657
|
})), /*#__PURE__*/React__default.createElement(Label$1, {
|
|
5649
5658
|
className: preventClass ? preventClass : ''
|
|
5650
|
-
}, label)), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5659
|
+
}, label)), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5651
5660
|
src: Ex,
|
|
5652
5661
|
style: {
|
|
5653
5662
|
marginRight: '6px'
|
|
@@ -5689,7 +5698,7 @@ var CheckBox = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
5689
5698
|
ref: ref,
|
|
5690
5699
|
checked: checked
|
|
5691
5700
|
})));
|
|
5692
|
-
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5701
|
+
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5693
5702
|
src: Ex,
|
|
5694
5703
|
style: {
|
|
5695
5704
|
marginRight: '6px'
|
|
@@ -5718,7 +5727,7 @@ var RadioBoxBase = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
5718
5727
|
radio: true
|
|
5719
5728
|
}, /*#__PURE__*/React__default.createElement(Icons.Check, {
|
|
5720
5729
|
size: "17px"
|
|
5721
|
-
})), /*#__PURE__*/React__default.createElement(Label$1, null, label)), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5730
|
+
})), /*#__PURE__*/React__default.createElement(Label$1, null, label)), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5722
5731
|
src: Ex,
|
|
5723
5732
|
style: {
|
|
5724
5733
|
marginRight: '6px'
|
|
@@ -5768,7 +5777,7 @@ var RadioBox = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
|
|
|
5768
5777
|
}, props, {
|
|
5769
5778
|
ref: ref
|
|
5770
5779
|
})));
|
|
5771
|
-
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5780
|
+
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5772
5781
|
src: Ex,
|
|
5773
5782
|
style: {
|
|
5774
5783
|
marginRight: '6px'
|
|
@@ -5827,54 +5836,92 @@ var Password = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
5827
5836
|
})));
|
|
5828
5837
|
});
|
|
5829
5838
|
|
|
5830
|
-
function
|
|
5831
|
-
|
|
5832
|
-
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
5833
|
-
|
|
5834
|
-
function _templateObject7$3() {
|
|
5835
|
-
var data = taggedTemplateLiteral(["\n position: absolute;\n height: 1px;\n width: 1px;\n z-index: -1;\n opacity: 0;\n"]);
|
|
5839
|
+
function _templateObject$9() {
|
|
5840
|
+
var data = taggedTemplateLiteral(["\n display: block;\n height: auto;\n min-height: 80px;\n resize: vertical;\n font-family: inherit;\n"]);
|
|
5836
5841
|
|
|
5837
|
-
|
|
5842
|
+
_templateObject$9 = function _templateObject() {
|
|
5838
5843
|
return data;
|
|
5839
5844
|
};
|
|
5840
5845
|
|
|
5841
5846
|
return data;
|
|
5842
5847
|
}
|
|
5848
|
+
var TextAreaBase = styled__default(InputBase$1).attrs({
|
|
5849
|
+
as: 'textarea'
|
|
5850
|
+
})(_templateObject$9());
|
|
5851
|
+
var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
5852
|
+
var name = _ref.name,
|
|
5853
|
+
label = _ref.label,
|
|
5854
|
+
help = _ref.help,
|
|
5855
|
+
invalid = _ref.invalid,
|
|
5856
|
+
valid = _ref.valid,
|
|
5857
|
+
error = _ref.error,
|
|
5858
|
+
_ref$rows = _ref.rows,
|
|
5859
|
+
rows = _ref$rows === void 0 ? 4 : _ref$rows,
|
|
5860
|
+
props = objectWithoutProperties(_ref, ["name", "label", "help", "invalid", "valid", "error", "rows"]);
|
|
5843
5861
|
|
|
5844
|
-
|
|
5845
|
-
var
|
|
5862
|
+
var validationType = null;
|
|
5863
|
+
var useIcon = false;
|
|
5846
5864
|
|
|
5847
|
-
|
|
5848
|
-
|
|
5849
|
-
|
|
5865
|
+
if (invalid) {
|
|
5866
|
+
useIcon = /*#__PURE__*/React__default.createElement("span", {
|
|
5867
|
+
className: "requiredField"
|
|
5868
|
+
}, "*");
|
|
5869
|
+
validationType = 'error';
|
|
5870
|
+
}
|
|
5850
5871
|
|
|
5851
|
-
|
|
5852
|
-
}
|
|
5872
|
+
if (props.Required) useIcon = /*#__PURE__*/React__default.createElement(RequiredText, null);
|
|
5853
5873
|
|
|
5854
|
-
|
|
5855
|
-
|
|
5874
|
+
if (error) {
|
|
5875
|
+
validationType = 'error';
|
|
5876
|
+
}
|
|
5856
5877
|
|
|
5857
|
-
|
|
5858
|
-
|
|
5859
|
-
|
|
5878
|
+
if (valid) {
|
|
5879
|
+
useIcon = /*#__PURE__*/React__default.createElement("img", {
|
|
5880
|
+
src: Check
|
|
5881
|
+
});
|
|
5882
|
+
validationType = 'valid';
|
|
5883
|
+
}
|
|
5860
5884
|
|
|
5861
|
-
return
|
|
5862
|
-
|
|
5885
|
+
return /*#__PURE__*/React__default.createElement(Frag$1, {
|
|
5886
|
+
size: props.size,
|
|
5887
|
+
className: "formAligner"
|
|
5888
|
+
}, label && !useIcon && /*#__PURE__*/React__default.createElement(Label, {
|
|
5889
|
+
htmlFor: name
|
|
5890
|
+
}, label), label && useIcon && /*#__PURE__*/React__default.createElement(Label, {
|
|
5891
|
+
htmlFor: name
|
|
5892
|
+
}, label, " ", useIcon), /*#__PURE__*/React__default.createElement(TextAreaBase, _extends_1({
|
|
5893
|
+
name: name,
|
|
5894
|
+
id: name,
|
|
5895
|
+
rows: rows
|
|
5896
|
+
}, props, {
|
|
5897
|
+
validation: validationType,
|
|
5898
|
+
ref: ref
|
|
5899
|
+
})), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5900
|
+
src: Ex,
|
|
5901
|
+
style: {
|
|
5902
|
+
marginRight: '6px'
|
|
5903
|
+
}
|
|
5904
|
+
}), " ", error));
|
|
5905
|
+
});
|
|
5863
5906
|
|
|
5864
|
-
function
|
|
5865
|
-
var data = taggedTemplateLiteral(["\n background:", ";\n box-sizing:border-box;\n cursor:pointer;\n position:relative;\n box-sizing: border-box;\n padding:0;\n\n height:auto;\n min-height:40px;\n\n\n &:focus-within {\n box-shadow:0px 0px 6px ", "\n border-color:", "\n }\n\n &.error {\n border-color:", ";\n }\n"]);
|
|
5907
|
+
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
5866
5908
|
|
|
5867
|
-
|
|
5909
|
+
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
5910
|
+
|
|
5911
|
+
function _templateObject4$4() {
|
|
5912
|
+
var data = taggedTemplateLiteral(["\n position: absolute;\n height: 1px;\n width: 1px;\n z-index: -1;\n opacity: 0;\n"]);
|
|
5913
|
+
|
|
5914
|
+
_templateObject4$4 = function _templateObject4() {
|
|
5868
5915
|
return data;
|
|
5869
5916
|
};
|
|
5870
5917
|
|
|
5871
5918
|
return data;
|
|
5872
5919
|
}
|
|
5873
5920
|
|
|
5874
|
-
function _templateObject3$
|
|
5875
|
-
var data = taggedTemplateLiteral(["\n color:", "\n"]);
|
|
5921
|
+
function _templateObject3$4() {
|
|
5922
|
+
var data = taggedTemplateLiteral(["\n list-style:none;\n padding:0 5px 3px;\n margin:0;\n display:flex;\n flex-wrap: wrap;\n\n &.small {\n max-width:140px;\n\n >li:not(.input) {\n white-space: pre-wrap;\n }\n }\n\n >li:not(.input) {\n border:1px solid #7C98B6;\n color:#516F90;\n background:#EAF0F6;\n padding:5px;\n margin-right:5px;\n border-radius:", ";\n font-size:12px;\n font-weight:500;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n\n\n >svg {\n padding-left:8px;\n padding-right:3px;\n }\n\n }\n\n >li {\n margin-top:5px;\n input {\n display: inline-block;\n height: 30px;\n width:100%;\n min-width:80px;\n color:#333;\n font-size:14px;\n\n &::placeholder {\n color:#ccc;\n }\n }\n\n &.input {\n flex:1;\n }\n\n\n }\n"]);
|
|
5876
5923
|
|
|
5877
|
-
_templateObject3$
|
|
5924
|
+
_templateObject3$4 = function _templateObject3() {
|
|
5878
5925
|
return data;
|
|
5879
5926
|
};
|
|
5880
5927
|
|
|
@@ -5882,7 +5929,7 @@ function _templateObject3$5() {
|
|
|
5882
5929
|
}
|
|
5883
5930
|
|
|
5884
5931
|
function _templateObject2$5() {
|
|
5885
|
-
var data = taggedTemplateLiteral(["\n
|
|
5932
|
+
var data = taggedTemplateLiteral(["\n background:", ";\n box-sizing:border-box;\n cursor:pointer;\n position:relative;\n box-sizing: border-box;\n padding:0;\n\n height:auto;\n min-height:40px;\n width:", ";\n\n\n &:hover {\n border-color:", ";\n }\n\n &.open,\n &:focus-within {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.error {\n border-color:", ";\n }\n\n &.error.open,\n &.error:focus-within {\n box-shadow:0 0 6px ", ";\n }\n\n &.valid {\n border-color:", ";\n }\n\n &.valid.open,\n &.valid:focus-within {\n box-shadow:0 0 6px ", ";\n }\n"]);
|
|
5886
5933
|
|
|
5887
5934
|
_templateObject2$5 = function _templateObject2() {
|
|
5888
5935
|
return data;
|
|
@@ -5891,44 +5938,42 @@ function _templateObject2$5() {
|
|
|
5891
5938
|
return data;
|
|
5892
5939
|
}
|
|
5893
5940
|
|
|
5894
|
-
function _templateObject$
|
|
5895
|
-
var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n"]);
|
|
5941
|
+
function _templateObject$a() {
|
|
5942
|
+
var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n ", "\n"]);
|
|
5896
5943
|
|
|
5897
|
-
_templateObject$
|
|
5944
|
+
_templateObject$a = function _templateObject() {
|
|
5898
5945
|
return data;
|
|
5899
5946
|
};
|
|
5900
5947
|
|
|
5901
5948
|
return data;
|
|
5902
5949
|
}
|
|
5903
|
-
var Frag$3 = styled__default.div(_templateObject$
|
|
5904
|
-
var
|
|
5905
|
-
|
|
5906
|
-
|
|
5950
|
+
var Frag$3 = styled__default.div(_templateObject$a(), function (_ref) {
|
|
5951
|
+
var size = _ref.size;
|
|
5952
|
+
return handleSize$1(size) === '100%' && 'width:100%;';
|
|
5953
|
+
});
|
|
5954
|
+
var Select = styled__default(InputBase)(_templateObject2$5(), theme.colors.neutrals.white, function (_ref2) {
|
|
5955
|
+
var size = _ref2.size;
|
|
5956
|
+
return handleSize$1(size);
|
|
5957
|
+
}, theme.colors.info.border, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.shadow);
|
|
5907
5958
|
var maxOptions$1 = 5;
|
|
5908
|
-
var
|
|
5909
|
-
var
|
|
5910
|
-
|
|
5911
|
-
|
|
5912
|
-
|
|
5913
|
-
|
|
5914
|
-
|
|
5915
|
-
|
|
5916
|
-
|
|
5917
|
-
|
|
5918
|
-
|
|
5919
|
-
|
|
5920
|
-
|
|
5921
|
-
|
|
5922
|
-
|
|
5923
|
-
|
|
5924
|
-
|
|
5925
|
-
|
|
5926
|
-
size = _ref.size,
|
|
5927
|
-
onChange = _ref.onChange,
|
|
5928
|
-
placeholder = _ref.placeholder,
|
|
5929
|
-
visibleOptionsQty = _ref.visibleOptionsQty,
|
|
5930
|
-
openTo = _ref.openTo,
|
|
5931
|
-
props = objectWithoutProperties(_ref, ["name", "options", "error", "valid", "help", "label", "tooltip", "canCreate", "size", "onChange", "placeholder", "visibleOptionsQty", "openTo"]);
|
|
5959
|
+
var TagsValues = styled__default.ul(_templateObject3$4(), theme.defaultRadius);
|
|
5960
|
+
var SelectHidden$1 = styled__default.select(_templateObject4$4());
|
|
5961
|
+
var Tag = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
5962
|
+
var _ref3$name = _ref3.name,
|
|
5963
|
+
name = _ref3$name === void 0 ? '' : _ref3$name,
|
|
5964
|
+
options = _ref3.options,
|
|
5965
|
+
error = _ref3.error,
|
|
5966
|
+
valid = _ref3.valid,
|
|
5967
|
+
help = _ref3.help,
|
|
5968
|
+
label = _ref3.label,
|
|
5969
|
+
tooltip = _ref3.tooltip,
|
|
5970
|
+
canCreate = _ref3.canCreate,
|
|
5971
|
+
size = _ref3.size,
|
|
5972
|
+
onChange = _ref3.onChange,
|
|
5973
|
+
placeholder = _ref3.placeholder,
|
|
5974
|
+
visibleOptionsQty = _ref3.visibleOptionsQty,
|
|
5975
|
+
openTo = _ref3.openTo,
|
|
5976
|
+
props = objectWithoutProperties(_ref3, ["name", "options", "error", "valid", "help", "label", "tooltip", "canCreate", "size", "onChange", "placeholder", "visibleOptionsQty", "openTo"]);
|
|
5932
5977
|
|
|
5933
5978
|
if (!options || !options[0]) options = [];
|
|
5934
5979
|
var randId = Math.random() * new Date().getTime();
|
|
@@ -5962,6 +6007,12 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
5962
6007
|
var containerRef = React.useRef();
|
|
5963
6008
|
var searchRef = React.useRef();
|
|
5964
6009
|
var valueRef = React.useRef();
|
|
6010
|
+
var optionsRef = React.useRef();
|
|
6011
|
+
|
|
6012
|
+
var _useState11 = React.useState(null),
|
|
6013
|
+
_useState12 = slicedToArray(_useState11, 2),
|
|
6014
|
+
anchor = _useState12[0],
|
|
6015
|
+
setAnchor = _useState12[1];
|
|
5965
6016
|
|
|
5966
6017
|
var isSelected = function isSelected(value) {
|
|
5967
6018
|
return selectedOpt.some(function (key) {
|
|
@@ -6024,8 +6075,10 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6024
6075
|
};
|
|
6025
6076
|
|
|
6026
6077
|
var handleClick = function handleClick(e) {
|
|
6078
|
+
var _optionsRef$current;
|
|
6079
|
+
|
|
6027
6080
|
var elm = e.target;
|
|
6028
|
-
if (containerRef.current.contains(elm)) return;
|
|
6081
|
+
if (containerRef.current.contains(elm) || ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.contains(elm))) return;
|
|
6029
6082
|
setOpen(false);
|
|
6030
6083
|
};
|
|
6031
6084
|
|
|
@@ -6096,7 +6149,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6096
6149
|
};
|
|
6097
6150
|
|
|
6098
6151
|
var addNewOption = function addNewOption(newObj) {
|
|
6099
|
-
newObj = _objectSpread$
|
|
6152
|
+
newObj = _objectSpread$2(_objectSpread$2({}, newObj), {}, {
|
|
6100
6153
|
value: newObj.name,
|
|
6101
6154
|
"new": true
|
|
6102
6155
|
});
|
|
@@ -6160,13 +6213,15 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6160
6213
|
}
|
|
6161
6214
|
});
|
|
6162
6215
|
return /*#__PURE__*/React__default.createElement(Frag$3, {
|
|
6163
|
-
ref: containerRef
|
|
6216
|
+
ref: containerRef,
|
|
6217
|
+
size: size
|
|
6164
6218
|
}, label && /*#__PURE__*/React__default.createElement(Label, {
|
|
6165
6219
|
htmlFor: name
|
|
6166
6220
|
}, label, " ", tooltip && /*#__PURE__*/React__default.createElement(App, {
|
|
6167
6221
|
text: tooltip
|
|
6168
6222
|
}), " ", props.Required && /*#__PURE__*/React__default.createElement(RequiredText, null)), /*#__PURE__*/React__default.createElement(Select, {
|
|
6169
6223
|
as: "div",
|
|
6224
|
+
ref: setAnchor,
|
|
6170
6225
|
size: size,
|
|
6171
6226
|
className: [open && 'open', error && 'error', valid && 'valid', 'tagEventPrevent'],
|
|
6172
6227
|
onClick: function onClick() {
|
|
@@ -6198,6 +6253,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6198
6253
|
onFocus: handleFocus,
|
|
6199
6254
|
onBlur: handleBlur
|
|
6200
6255
|
}))), open && /*#__PURE__*/React__default.createElement(TagOptions, {
|
|
6256
|
+
anchor: anchor,
|
|
6257
|
+
listRef: optionsRef,
|
|
6201
6258
|
name: safeName,
|
|
6202
6259
|
filter: filter,
|
|
6203
6260
|
handleSelect: handleSelect,
|
|
@@ -6207,7 +6264,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6207
6264
|
canCreate: canCreate,
|
|
6208
6265
|
visibleOptionsQty: visibleOptionsQty,
|
|
6209
6266
|
openTo: openTo
|
|
6210
|
-
})), help && /*#__PURE__*/React__default.createElement(
|
|
6267
|
+
})), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
6211
6268
|
src: Ex,
|
|
6212
6269
|
style: {
|
|
6213
6270
|
marginRight: '6px'
|
|
@@ -6225,16 +6282,18 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6225
6282
|
})));
|
|
6226
6283
|
});
|
|
6227
6284
|
|
|
6228
|
-
var TagOptions = function TagOptions(
|
|
6229
|
-
var
|
|
6230
|
-
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
|
|
6234
|
-
|
|
6235
|
-
|
|
6236
|
-
|
|
6237
|
-
|
|
6285
|
+
var TagOptions = function TagOptions(_ref4) {
|
|
6286
|
+
var anchor = _ref4.anchor,
|
|
6287
|
+
listRef = _ref4.listRef,
|
|
6288
|
+
name = _ref4.name,
|
|
6289
|
+
filter = _ref4.filter,
|
|
6290
|
+
handleSelect = _ref4.handleSelect,
|
|
6291
|
+
options = _ref4.options,
|
|
6292
|
+
searchRef = _ref4.searchRef,
|
|
6293
|
+
addNewOption = _ref4.addNewOption,
|
|
6294
|
+
canCreate = _ref4.canCreate,
|
|
6295
|
+
visibleOptionsQty = _ref4.visibleOptionsQty,
|
|
6296
|
+
openTo = _ref4.openTo;
|
|
6238
6297
|
var CreateOption;
|
|
6239
6298
|
var underscored;
|
|
6240
6299
|
|
|
@@ -6251,9 +6310,11 @@ var TagOptions = function TagOptions(_ref2) {
|
|
|
6251
6310
|
});
|
|
6252
6311
|
},
|
|
6253
6312
|
value: searchRef.current.value
|
|
6313
|
+
}, /*#__PURE__*/React__default.createElement(Value$1, {
|
|
6314
|
+
option: true
|
|
6254
6315
|
}, "Create option \"", /*#__PURE__*/React__default.createElement("u", {
|
|
6255
6316
|
className: "tagEventPrevent"
|
|
6256
|
-
}, searchRef.current.value), "\"");
|
|
6317
|
+
}, searchRef.current.value), "\""));
|
|
6257
6318
|
var searchToUnderscore = searchRef.current ? searchRef.current.value.replaceAll('(', '\\(').replaceAll(')', '\\)') : '';
|
|
6258
6319
|
underscored = new RegExp('(' + searchToUnderscore + ')', 'giu');
|
|
6259
6320
|
}
|
|
@@ -6268,32 +6329,39 @@ var TagOptions = function TagOptions(_ref2) {
|
|
|
6268
6329
|
var msg = searchRef.current && searchRef.current.value.length < 1 ? 'No options left' : 'No match for ';
|
|
6269
6330
|
noDataOption = /*#__PURE__*/React__default.createElement("li", {
|
|
6270
6331
|
className: "tagEventPrevent",
|
|
6271
|
-
|
|
6272
|
-
|
|
6332
|
+
style: {
|
|
6333
|
+
paddingRight: '8px'
|
|
6273
6334
|
}
|
|
6274
|
-
});
|
|
6335
|
+
}, /*#__PURE__*/React__default.createElement("span", null, msg, " ", /*#__PURE__*/React__default.createElement("u", null, (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.value)));
|
|
6275
6336
|
}
|
|
6276
6337
|
|
|
6277
|
-
return /*#__PURE__*/React__default.createElement(
|
|
6338
|
+
return /*#__PURE__*/React__default.createElement(FloatingOptions, {
|
|
6339
|
+
ref: listRef,
|
|
6340
|
+
anchor: anchor,
|
|
6278
6341
|
id: "".concat(name, "-options"),
|
|
6279
|
-
visibleOptionsQty: visibleOptionsQty,
|
|
6342
|
+
visibleOptionsQty: visibleOptionsQty || maxOptions$1,
|
|
6280
6343
|
openTo: openTo
|
|
6281
6344
|
}, options.length > 0 ? filter.map(function (key, index) {
|
|
6282
|
-
if (options[key].value === undefined) return !noDataOption ? /*#__PURE__*/React__default.createElement(
|
|
6345
|
+
if (options[key].value === undefined) return !noDataOption ? /*#__PURE__*/React__default.createElement(OptionGroup$1, {
|
|
6283
6346
|
key: key,
|
|
6284
6347
|
className: "tagEventPrevent"
|
|
6285
|
-
},
|
|
6348
|
+
}, options[key].name) : null;else return /*#__PURE__*/React__default.createElement("li", {
|
|
6286
6349
|
className: "tagEventPrevent ".concat(index === 0 ? 'active' : ''),
|
|
6287
6350
|
value: options[key].value,
|
|
6288
6351
|
key: key,
|
|
6289
6352
|
onClick: function onClick() {
|
|
6290
6353
|
handleSelect(key);
|
|
6291
6354
|
}
|
|
6292
|
-
},
|
|
6293
|
-
|
|
6294
|
-
|
|
6355
|
+
}, /*#__PURE__*/React__default.createElement(Value$1, {
|
|
6356
|
+
option: true,
|
|
6357
|
+
style: {
|
|
6358
|
+
marginRight: 4
|
|
6295
6359
|
}
|
|
6296
|
-
}
|
|
6360
|
+
}, underscored ? options[key].name.split(underscored).map(function (part, i) {
|
|
6361
|
+
return i % 2 ? /*#__PURE__*/React__default.createElement("u", {
|
|
6362
|
+
key: i
|
|
6363
|
+
}, part) : part;
|
|
6364
|
+
}) : options[key].name));
|
|
6297
6365
|
}) : null, CreateOption, noDataOption);
|
|
6298
6366
|
};
|
|
6299
6367
|
|
|
@@ -6330,9 +6398,19 @@ var calculateContrast = function calculateContrast() {
|
|
|
6330
6398
|
return ratio < 1 / 4.5;
|
|
6331
6399
|
};
|
|
6332
6400
|
|
|
6333
|
-
function
|
|
6401
|
+
function _templateObject6$3() {
|
|
6334
6402
|
var data = taggedTemplateLiteral(["\n position: absolute;\n height: 1px;\n width: 1px;\n z-index: -1;\n opacity: 0;\n"]);
|
|
6335
6403
|
|
|
6404
|
+
_templateObject6$3 = function _templateObject6() {
|
|
6405
|
+
return data;
|
|
6406
|
+
};
|
|
6407
|
+
|
|
6408
|
+
return data;
|
|
6409
|
+
}
|
|
6410
|
+
|
|
6411
|
+
function _templateObject5$4() {
|
|
6412
|
+
var data = taggedTemplateLiteral(["\n background:#fff;\n border-radius:", ";\n padding:5px;\n list-style:none;\n margin:0;\n display: grid;\n grid-template-columns: 24px 24px 24px 24px 24px 24px 24px 24px;\n position:absolute;\n left:48px;\n top:0;\n z-index:10;\n box-shadow: 0px 3px 6px ", "19;\n\n > li {\n width:24px;\n height:24px;\n cursor:pointer;\n position: relative;\n\n &.selected {\n z-index: 1;\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n }\n\n &:hover {\n z-index: 2;\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n }\n }\n"]);
|
|
6413
|
+
|
|
6336
6414
|
_templateObject5$4 = function _templateObject5() {
|
|
6337
6415
|
return data;
|
|
6338
6416
|
};
|
|
@@ -6340,20 +6418,20 @@ function _templateObject5$4() {
|
|
|
6340
6418
|
return data;
|
|
6341
6419
|
}
|
|
6342
6420
|
|
|
6343
|
-
function _templateObject4$
|
|
6344
|
-
var data = taggedTemplateLiteral(["\n
|
|
6421
|
+
function _templateObject4$5() {
|
|
6422
|
+
var data = taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n flex-grow: 1;\n width: stretch;\n height: stretch;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n"]);
|
|
6345
6423
|
|
|
6346
|
-
_templateObject4$
|
|
6424
|
+
_templateObject4$5 = function _templateObject4() {
|
|
6347
6425
|
return data;
|
|
6348
6426
|
};
|
|
6349
6427
|
|
|
6350
6428
|
return data;
|
|
6351
6429
|
}
|
|
6352
6430
|
|
|
6353
|
-
function _templateObject3$
|
|
6354
|
-
var data = taggedTemplateLiteral(["\n height:40px;\n width:40px;\n
|
|
6431
|
+
function _templateObject3$5() {
|
|
6432
|
+
var data = taggedTemplateLiteral(["\n height:40px;\n width:40px;\n //padding: 4px;\n border-radius: ", ";\n border-color: ", ";\n border-width: 1px;\n border-style: solid;\n cursor:pointer;\n display:flex;\n justify-content:center;\n align-items:center;\n box-sizing:border-box;\n\n &.hover,\n &:focus {\n box-shadow:0px 0px 6px ", ";\n border:1px solid ", ";\n outline:none;\n }\n"]);
|
|
6355
6433
|
|
|
6356
|
-
_templateObject3$
|
|
6434
|
+
_templateObject3$5 = function _templateObject3() {
|
|
6357
6435
|
return data;
|
|
6358
6436
|
};
|
|
6359
6437
|
|
|
@@ -6370,30 +6448,32 @@ function _templateObject2$6() {
|
|
|
6370
6448
|
return data;
|
|
6371
6449
|
}
|
|
6372
6450
|
|
|
6373
|
-
function _templateObject$
|
|
6451
|
+
function _templateObject$b() {
|
|
6374
6452
|
var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n"]);
|
|
6375
6453
|
|
|
6376
|
-
_templateObject$
|
|
6454
|
+
_templateObject$b = function _templateObject() {
|
|
6377
6455
|
return data;
|
|
6378
6456
|
};
|
|
6379
6457
|
|
|
6380
6458
|
return data;
|
|
6381
6459
|
}
|
|
6382
|
-
var Frag$4 = styled__default.div(_templateObject$
|
|
6460
|
+
var Frag$4 = styled__default.div(_templateObject$b());
|
|
6383
6461
|
var Field = styled__default.div(_templateObject2$6());
|
|
6384
|
-
var WraperBucket = styled__default.div(_templateObject3$
|
|
6385
|
-
|
|
6386
|
-
|
|
6387
|
-
|
|
6388
|
-
|
|
6389
|
-
var
|
|
6390
|
-
|
|
6391
|
-
|
|
6392
|
-
|
|
6393
|
-
|
|
6394
|
-
|
|
6395
|
-
|
|
6396
|
-
|
|
6462
|
+
var WraperBucket = styled__default.div(_templateObject3$5(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.action, theme.colors.secondary);
|
|
6463
|
+
var ColorIndicator = styled__default.div(_templateObject4$5(), function (_ref) {
|
|
6464
|
+
var background = _ref.background;
|
|
6465
|
+
return background;
|
|
6466
|
+
}, theme.defaultRadius);
|
|
6467
|
+
var ColorBox = styled__default.ul(_templateObject5$4(), theme.defaultRadius, theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
|
|
6468
|
+
var SelectHidden$2 = styled__default.select(_templateObject6$3());
|
|
6469
|
+
var InputColor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
6470
|
+
var name = _ref2.name,
|
|
6471
|
+
tooltip = _ref2.tooltip,
|
|
6472
|
+
value = _ref2.value,
|
|
6473
|
+
help = _ref2.help,
|
|
6474
|
+
error = _ref2.error,
|
|
6475
|
+
label = _ref2.label,
|
|
6476
|
+
props = objectWithoutProperties(_ref2, ["name", "tooltip", "value", "help", "error", "label"]);
|
|
6397
6477
|
|
|
6398
6478
|
var _useState = React.useState(false),
|
|
6399
6479
|
_useState2 = slicedToArray(_useState, 2),
|
|
@@ -6417,14 +6497,17 @@ var InputColor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6417
6497
|
setSelectedColor = _useState4[1];
|
|
6418
6498
|
|
|
6419
6499
|
React.useEffect(function () {
|
|
6420
|
-
document.addEventListener(
|
|
6500
|
+
document.addEventListener('mousedown', handleClick);
|
|
6421
6501
|
return function () {
|
|
6422
|
-
document.removeEventListener(
|
|
6502
|
+
document.removeEventListener('mousedown', handleClick);
|
|
6423
6503
|
};
|
|
6424
6504
|
}, []);
|
|
6425
6505
|
|
|
6426
6506
|
var handleClick = function handleClick(e) {
|
|
6427
|
-
if (e.target.classList.contains('colorEventPrevent'))
|
|
6507
|
+
if (e.target.classList.contains('colorEventPrevent')) {
|
|
6508
|
+
return;
|
|
6509
|
+
}
|
|
6510
|
+
|
|
6428
6511
|
setOpen(false);
|
|
6429
6512
|
};
|
|
6430
6513
|
|
|
@@ -6444,13 +6527,14 @@ var InputColor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6444
6527
|
onClick: function onClick() {
|
|
6445
6528
|
return setOpen(!open);
|
|
6446
6529
|
},
|
|
6447
|
-
className: ['colorEventPrevent', open && 'hover']
|
|
6530
|
+
className: ['colorEventPrevent', open && 'hover']
|
|
6531
|
+
}, /*#__PURE__*/React__default.createElement(ColorIndicator, {
|
|
6448
6532
|
background: selectedColor[0] && selectedColor[0]
|
|
6449
6533
|
}, /*#__PURE__*/React__default.createElement(Icons.Bucket, {
|
|
6450
6534
|
size: "28px",
|
|
6451
6535
|
className: "colorEventPrevent",
|
|
6452
6536
|
color: selectedColor[1] ? selectedColor[1] : '#333'
|
|
6453
|
-
})), open && /*#__PURE__*/React__default.createElement(ColorBox, {
|
|
6537
|
+
}))), open && /*#__PURE__*/React__default.createElement(ColorBox, {
|
|
6454
6538
|
className: "colorEventPrevent"
|
|
6455
6539
|
}, colors.map(function (item, key) {
|
|
6456
6540
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
@@ -7263,10 +7347,10 @@ function _templateObject2$7() {
|
|
|
7263
7347
|
return data;
|
|
7264
7348
|
}
|
|
7265
7349
|
|
|
7266
|
-
function _templateObject$
|
|
7350
|
+
function _templateObject$c() {
|
|
7267
7351
|
var data = taggedTemplateLiteral(["\n font-family: ", ";\n font-weight:bold;\n border-radius:", ";\n cursor:pointer;\n display:inline-flex;\n background:", "\n color:", "\n height:40px;\n line-height:40px;\n padding:0 16px;\n font-size: ", ";\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n justify-content: center;\n text-align: center;\n\n > * {\n border-color: ", ";\n }\n\n svg path {\n fill: currentColor;\n }\n\n &:hover,\n &.hover {\n background:", ";\n }\n\n &:focus,\n &.focus {\n background:", ";\n box-shadow:", ";\n }\n\n &:active,\n &.active {\n background:", ";\n box-shadow:", ";\n }\n\n &.selected {\n outline: 1px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n &[disabled] {\n opacity: .5;\n cursor: not-allowed;\n }\n"]);
|
|
7268
7352
|
|
|
7269
|
-
_templateObject$
|
|
7353
|
+
_templateObject$c = function _templateObject() {
|
|
7270
7354
|
return data;
|
|
7271
7355
|
};
|
|
7272
7356
|
|
|
@@ -7277,7 +7361,7 @@ var defaultShadow = function defaultShadow(color) {
|
|
|
7277
7361
|
return "0px 0px 6px ".concat(color);
|
|
7278
7362
|
};
|
|
7279
7363
|
|
|
7280
|
-
var Base = styled__default.button(_templateObject$
|
|
7364
|
+
var Base = styled__default.button(_templateObject$c(), theme.font.main, theme.defaultRadius, theme.colors.info.bg, theme.colors.secondary, theme.font.medium.size, theme.colors.info.shadow, theme.colors.info.shadow, theme.colors.info.bg, defaultShadow(theme.form.button.secondary.bg), theme.colors.info.shadow, defaultShadow(theme.form.button.secondary.bg), theme.colors.secondary);
|
|
7281
7365
|
var Primary = "\n background:".concat(theme.form.button.primary.bg, ";\n color:").concat(theme.colors.neutrals.white, ";\n\n > * {\n border-color: ").concat(theme.colors.neutrals.white, ";\n }\n\n svg path {\n fill: ").concat(theme.colors.neutrals.white, ";\n }\n\n &:hover,\n &.hover {\n background:").concat(theme.form.button.primary.hover, "\n }\n\n &:focus,\n &.focus {\n background:").concat(theme.form.button.primary.bg, ";\n box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n }\n\n &:active,\n &.active {\n background:").concat(theme.form.button.primary.hover, "\n box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n }\n\n &.selected {\n border: 1px solid ").concat(theme.colors.neutrals.white, ";\n }\n");
|
|
7282
7366
|
var Secondary = "\n background:".concat(theme.form.button.secondary.bg, ";\n color:").concat(theme.colors.neutrals.white, ";\n\n > * {\n border-color: ").concat(theme.colors.neutrals.white, ";\n }\n\n svg path {\n fill: ").concat(theme.colors.neutrals.white, ";\n }\n\n &:hover {\n background:").concat(theme.form.button.secondary.hover, "\n }\n\n &:focus {\n background:").concat(theme.form.button.secondary.bg, ";\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n }\n\n &:active,\n &.active {\n background:").concat(theme.form.button.secondary.hover, "\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n }\n\n &.selected {\n border: 1px solid ").concat(theme.colors.neutrals.white, ";\n }\n");
|
|
7283
7367
|
var Cancel = "\n background:transparent;\n color:".concat(theme.form.button.secondary.bg, ";\n\n > * {\n border-color: ").concat(theme.colors.info.shadow, ";\n }\n\n svg path {\n fill: ").concat(theme.colors.secondary, ";\n }\n\n &:hover {\n background:transparent;\n text-decoration:underline;\n }\n\n &:focus {\n background:").concat(theme.colors.neutrals.white, ";\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n }\n\n &:active,\n &.active {\n background:").concat(theme.colors.neutrals.white, ";\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n text-decoration:underline;\n }\n\n &.selected {\n border: 1px solid ").concat(theme.form.button.secondary.bg, ";\n }\n");
|
|
@@ -7313,10 +7397,10 @@ var Exported = function Exported(_ref) {
|
|
|
7313
7397
|
}, props));
|
|
7314
7398
|
};
|
|
7315
7399
|
|
|
7316
|
-
function _templateObject7$
|
|
7400
|
+
function _templateObject7$3() {
|
|
7317
7401
|
var data = taggedTemplateLiteral(["\n box-sizing: border-box;\n width: 92px;\n height: 92px;\n padding: 4px;\n border-radius: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n font-size: ", ";\n font-family: ", ";\n color: ", ";\n text-align: center;\n word-break: break-word;\n overflow: hidden;\n\n &::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 0;\n background-size: cover;\n background-position: center;\n background-image: url(", ");\n }\n\n + div,\n + label {\n margin-left: 8px;\n }\n\n button {\n position: absolute;\n z-index: 1;\n top: 4px;\n right: 4px;\n padding: 4px;\n height: auto;\n line-height: 0;\n }\n\n label& {\n cursor: pointer;\n border-style: dashed;\n\n &:hover,\n &.highlight {\n background-color: ", ";\n }\n\n &:active, {\n &.highlight {\n border-color: ", ";\n box-shadow: 0 0 6px ", ";\n }\n }\n"]);
|
|
7318
7402
|
|
|
7319
|
-
_templateObject7$
|
|
7403
|
+
_templateObject7$3 = function _templateObject7() {
|
|
7320
7404
|
return data;
|
|
7321
7405
|
};
|
|
7322
7406
|
|
|
@@ -7343,20 +7427,20 @@ function _templateObject5$5() {
|
|
|
7343
7427
|
return data;
|
|
7344
7428
|
}
|
|
7345
7429
|
|
|
7346
|
-
function _templateObject4$
|
|
7430
|
+
function _templateObject4$6() {
|
|
7347
7431
|
var data = taggedTemplateLiteral(["\n height:38px;\n width:38px;\n border-radius:38px;\n background:#FAFAFA;\n border:1px solid ", ";\n position:absolute;\n z-index:1;\n top:0;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 38px;\n }\n"]);
|
|
7348
7432
|
|
|
7349
|
-
_templateObject4$
|
|
7433
|
+
_templateObject4$6 = function _templateObject4() {
|
|
7350
7434
|
return data;
|
|
7351
7435
|
};
|
|
7352
7436
|
|
|
7353
7437
|
return data;
|
|
7354
7438
|
}
|
|
7355
7439
|
|
|
7356
|
-
function _templateObject3$
|
|
7440
|
+
function _templateObject3$6() {
|
|
7357
7441
|
var data = taggedTemplateLiteral(["\n box-sizing:border-box;\n background:#FAFAFA;\n width:140px;\n border-radius: 20px 2px 2px 20px;\n border:1px solid transparent;\n\n &:hover {\n border:none;\n }\n\n >span {\n text-align: center;\n display: block;\n margin-left: 32px;\n color:#707070;\n font-size:14px;\n font-weight:400;\n\n text-overflow: ellipsis;\n height: 16px;\n white-space: nowrap;\n overflow: hidden;\n }\n"]);
|
|
7358
7442
|
|
|
7359
|
-
_templateObject3$
|
|
7443
|
+
_templateObject3$6 = function _templateObject3() {
|
|
7360
7444
|
return data;
|
|
7361
7445
|
};
|
|
7362
7446
|
|
|
@@ -7373,19 +7457,19 @@ function _templateObject2$8() {
|
|
|
7373
7457
|
return data;
|
|
7374
7458
|
}
|
|
7375
7459
|
|
|
7376
|
-
function _templateObject$
|
|
7460
|
+
function _templateObject$d() {
|
|
7377
7461
|
var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n"]);
|
|
7378
7462
|
|
|
7379
|
-
_templateObject$
|
|
7463
|
+
_templateObject$d = function _templateObject() {
|
|
7380
7464
|
return data;
|
|
7381
7465
|
};
|
|
7382
7466
|
|
|
7383
7467
|
return data;
|
|
7384
7468
|
}
|
|
7385
|
-
var Frag$5 = styled__default.div(_templateObject$
|
|
7469
|
+
var Frag$5 = styled__default.div(_templateObject$d());
|
|
7386
7470
|
var Wrapper$1 = styled__default.label(_templateObject2$8(), theme.colors.info.bg, theme.colors.secondary, theme.colors.action, theme.colors.secondary, theme.colors.success.border, theme.colors.success.border, theme.colors.error.border, theme.colors.error.border);
|
|
7387
|
-
var Input$1 = styled__default(InputBase)(_templateObject3$
|
|
7388
|
-
var Profile = styled__default.div(_templateObject4$
|
|
7471
|
+
var Input$1 = styled__default(InputBase)(_templateObject3$6());
|
|
7472
|
+
var Profile = styled__default.div(_templateObject4$6(), theme.colors.neutrals.silver);
|
|
7389
7473
|
var HiddenInput = styled__default.input(_templateObject5$5());
|
|
7390
7474
|
var Uploader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
7391
7475
|
var name = _ref.name,
|
|
@@ -7527,7 +7611,7 @@ var processFileList = /*#__PURE__*/function () {
|
|
|
7527
7611
|
}();
|
|
7528
7612
|
|
|
7529
7613
|
var DropUploaderList = styled__default.div(_templateObject6$4());
|
|
7530
|
-
var DropUploaderPreview = styled__default.div(_templateObject7$
|
|
7614
|
+
var DropUploaderPreview = styled__default.div(_templateObject7$3(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.extra.whiteSmoke, theme.font.extraSmall.size, theme.font.main, theme.colors.neutrals.silver, function (props) {
|
|
7531
7615
|
return typeof props.preview === 'string' && props.preview;
|
|
7532
7616
|
}, theme.colors.info.bg, theme.colors.secondary, theme.colors.secondary);
|
|
7533
7617
|
var DropUploader = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
@@ -7764,20 +7848,20 @@ function _templateObject5$6() {
|
|
|
7764
7848
|
return data;
|
|
7765
7849
|
}
|
|
7766
7850
|
|
|
7767
|
-
function _templateObject4$
|
|
7851
|
+
function _templateObject4$7() {
|
|
7768
7852
|
var data = taggedTemplateLiteral(["\n width: 0;\n height: 0;\n margin: 0;\n visibility: hidden;\n pointer-events: none;\n\n &:checked + ", " {\n background: ", ";\n border: 1px solid ", ";\n\n &::after {\n background:", ";\n margin-left: 19px;\n }\n }\n"]);
|
|
7769
7853
|
|
|
7770
|
-
_templateObject4$
|
|
7854
|
+
_templateObject4$7 = function _templateObject4() {
|
|
7771
7855
|
return data;
|
|
7772
7856
|
};
|
|
7773
7857
|
|
|
7774
7858
|
return data;
|
|
7775
7859
|
}
|
|
7776
7860
|
|
|
7777
|
-
function _templateObject3$
|
|
7861
|
+
function _templateObject3$7() {
|
|
7778
7862
|
var data = taggedTemplateLiteral(["\n width: 36px;\n height: 20px;\n border-radius: 100px;\n background: ", ";\n cursor: pointer;\n border: 1px solid ", ";\n box-sizing: border-box;\n transition: 0.2s;\n\n &:focus {\n box-shadow: 0px 0px 6px ", ";\n border: 1px solid ", ";\n outline: none;\n }\n\n &::after {\n content: \"\";\n display: block;\n border-radius: 100%;\n width: 12px;\n height: 12px;\n margin: 3px;\n background: ", ";\n transition: 0.2s;\n }\n"]);
|
|
7779
7863
|
|
|
7780
|
-
_templateObject3$
|
|
7864
|
+
_templateObject3$7 = function _templateObject3() {
|
|
7781
7865
|
return data;
|
|
7782
7866
|
};
|
|
7783
7867
|
|
|
@@ -7785,7 +7869,7 @@ function _templateObject3$8() {
|
|
|
7785
7869
|
}
|
|
7786
7870
|
|
|
7787
7871
|
function _templateObject2$9() {
|
|
7788
|
-
var data = taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n\n &:focus {\n outline: none;\n }\n"]);
|
|
7872
|
+
var data = taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n ", "\n\n &:focus {\n outline: none;\n }\n"]);
|
|
7789
7873
|
|
|
7790
7874
|
_templateObject2$9 = function _templateObject2() {
|
|
7791
7875
|
return data;
|
|
@@ -7794,19 +7878,21 @@ function _templateObject2$9() {
|
|
|
7794
7878
|
return data;
|
|
7795
7879
|
}
|
|
7796
7880
|
|
|
7797
|
-
function _templateObject$
|
|
7881
|
+
function _templateObject$e() {
|
|
7798
7882
|
var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n"]);
|
|
7799
7883
|
|
|
7800
|
-
_templateObject$
|
|
7884
|
+
_templateObject$e = function _templateObject() {
|
|
7801
7885
|
return data;
|
|
7802
7886
|
};
|
|
7803
7887
|
|
|
7804
7888
|
return data;
|
|
7805
7889
|
}
|
|
7806
|
-
var Frag$6 = styled__default.div(_templateObject$
|
|
7807
|
-
var CheckBoxWrapper = styled__default.div(_templateObject2$9())
|
|
7808
|
-
|
|
7809
|
-
|
|
7890
|
+
var Frag$6 = styled__default.div(_templateObject$e());
|
|
7891
|
+
var CheckBoxWrapper = styled__default.div(_templateObject2$9(), function (props) {
|
|
7892
|
+
return props.hasLabel && 'height: 40px;';
|
|
7893
|
+
});
|
|
7894
|
+
var CheckBoxLabel = styled__default.label(_templateObject3$7(), theme.colors.neutrals.white, theme.colors.info.border, theme.colors.action, theme.colors.secondary, theme.colors.info.border);
|
|
7895
|
+
var CheckBox$1 = styled__default.input(_templateObject4$7(), CheckBoxLabel, theme.colors.info.text, theme.colors.info.border, theme.colors.neutrals.white);
|
|
7810
7896
|
var ToggleLabel = styled__default.label(_templateObject5$6(), theme.colors.neutrals.medium, theme.font.medium.size, theme.font.medium.lineHeight);
|
|
7811
7897
|
var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
7812
7898
|
var name = _ref.name,
|
|
@@ -7850,7 +7936,9 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7850
7936
|
htmlFor: id
|
|
7851
7937
|
}, label, " ", tooltip && /*#__PURE__*/React__default.createElement(App, {
|
|
7852
7938
|
text: tooltip
|
|
7853
|
-
})), /*#__PURE__*/React__default.createElement(CheckBoxWrapper,
|
|
7939
|
+
})), /*#__PURE__*/React__default.createElement(CheckBoxWrapper, {
|
|
7940
|
+
hasLabel: !!label
|
|
7941
|
+
}, /*#__PURE__*/React__default.createElement(CheckBox$1, {
|
|
7854
7942
|
name: name,
|
|
7855
7943
|
id: id,
|
|
7856
7944
|
type: "checkbox",
|
|
@@ -7868,14 +7956,14 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7868
7956
|
}, singleText || (value ? textOn : textOff))), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help));
|
|
7869
7957
|
});
|
|
7870
7958
|
|
|
7871
|
-
function ownKeys$
|
|
7959
|
+
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
7872
7960
|
|
|
7873
|
-
function _objectSpread$
|
|
7961
|
+
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
7874
7962
|
|
|
7875
|
-
function _templateObject$
|
|
7963
|
+
function _templateObject$f() {
|
|
7876
7964
|
var data = taggedTemplateLiteral(["\n position: relative;\n\n ", " {\n left: 0;\n top: -21px;\n height: 192px;\n overflow: auto;\n\n li {\n padding-right: 8px;\n }\n }\n\n ", " {\n font-size: ", ";\n line-height: ", ";\n position: sticky;\n top: 0;\n z-index: 1;\n background: ", ";\n\n &:hover {\n background: ", ";\n }\n }\n"]);
|
|
7877
7965
|
|
|
7878
|
-
_templateObject$
|
|
7966
|
+
_templateObject$f = function _templateObject() {
|
|
7879
7967
|
return data;
|
|
7880
7968
|
};
|
|
7881
7969
|
|
|
@@ -8026,7 +8114,7 @@ var fromMilliseconds = function fromMilliseconds(milliseconds) {
|
|
|
8026
8114
|
};
|
|
8027
8115
|
};
|
|
8028
8116
|
|
|
8029
|
-
var TimePickerOptionsStyle = styled__default.div(_templateObject$
|
|
8117
|
+
var TimePickerOptionsStyle = styled__default.div(_templateObject$f(), Options, OptionGroup, theme.font.extraSmall.size, theme.font.extraSmall.lineHeight, theme.colors.neutrals.white, theme.colors.neutrals.white);
|
|
8030
8118
|
|
|
8031
8119
|
var TimePickerOptions = function TimePickerOptions(_ref5) {
|
|
8032
8120
|
var time = _ref5.time,
|
|
@@ -8065,7 +8153,7 @@ var TimePickerOptions = function TimePickerOptions(_ref5) {
|
|
|
8065
8153
|
}
|
|
8066
8154
|
|
|
8067
8155
|
var handleSelect = function handleSelect(what, value) {
|
|
8068
|
-
var newTime = _objectSpread$
|
|
8156
|
+
var newTime = _objectSpread$3({}, time);
|
|
8069
8157
|
|
|
8070
8158
|
newTime[what] = value;
|
|
8071
8159
|
setTime(newTime);
|
|
@@ -8278,10 +8366,10 @@ function _templateObject2$a() {
|
|
|
8278
8366
|
return data;
|
|
8279
8367
|
}
|
|
8280
8368
|
|
|
8281
|
-
function _templateObject$
|
|
8369
|
+
function _templateObject$g() {
|
|
8282
8370
|
var data = taggedTemplateLiteral(["\n display: inline-flex;\n align-items: stretch;\n padding: 0;\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n"]);
|
|
8283
8371
|
|
|
8284
|
-
_templateObject$
|
|
8372
|
+
_templateObject$g = function _templateObject() {
|
|
8285
8373
|
return data;
|
|
8286
8374
|
};
|
|
8287
8375
|
|
|
@@ -8291,7 +8379,7 @@ var Container = styled__default(Base).attrs(function (props) {
|
|
|
8291
8379
|
return {
|
|
8292
8380
|
as: 'div'
|
|
8293
8381
|
};
|
|
8294
|
-
})(_templateObject$
|
|
8382
|
+
})(_templateObject$g(), function (props) {
|
|
8295
8383
|
return props.type === 'primary' && Primary;
|
|
8296
8384
|
}, function (props) {
|
|
8297
8385
|
return props.type === 'secondary' && Secondary;
|
|
@@ -8386,20 +8474,20 @@ var Dropdown$1 = function Dropdown$$1(_ref) {
|
|
|
8386
8474
|
})));
|
|
8387
8475
|
};
|
|
8388
8476
|
|
|
8389
|
-
function ownKeys$
|
|
8477
|
+
function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
8390
8478
|
|
|
8391
|
-
function _objectSpread$
|
|
8479
|
+
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
8392
8480
|
|
|
8393
|
-
function _templateObject$
|
|
8481
|
+
function _templateObject$h() {
|
|
8394
8482
|
var data = taggedTemplateLiteral(["\n display: inline-flex;\n flex-wrap: nowrap;\n border: 1px solid ", ";\n border-radius: ", ";\n\n > *:not(.selected) {\n border-radius: 0;\n\n &:first-child {\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n }\n\n &:last-child {\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n }\n }\n"]);
|
|
8395
8483
|
|
|
8396
|
-
_templateObject$
|
|
8484
|
+
_templateObject$h = function _templateObject() {
|
|
8397
8485
|
return data;
|
|
8398
8486
|
};
|
|
8399
8487
|
|
|
8400
8488
|
return data;
|
|
8401
8489
|
}
|
|
8402
|
-
var BtnGroup = styled__default.div(_templateObject$
|
|
8490
|
+
var BtnGroup = styled__default.div(_templateObject$h(), theme.colors.neutrals.silver, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius);
|
|
8403
8491
|
|
|
8404
8492
|
var ButtonGroup = function ButtonGroup(_ref) {
|
|
8405
8493
|
var children = _ref.children,
|
|
@@ -8417,27 +8505,27 @@ var ButtonGroup = function ButtonGroup(_ref) {
|
|
|
8417
8505
|
};
|
|
8418
8506
|
|
|
8419
8507
|
return /*#__PURE__*/React__default.createElement(BtnGroup, null, children.map(function (btn, k) {
|
|
8420
|
-
return btn.type(_objectSpread$
|
|
8508
|
+
return btn.type(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, props), btn.props), {}, {
|
|
8421
8509
|
key: k,
|
|
8422
8510
|
className: generateClassName(btn.props)
|
|
8423
8511
|
}));
|
|
8424
8512
|
}));
|
|
8425
8513
|
};
|
|
8426
8514
|
|
|
8427
|
-
function _templateObject4$
|
|
8515
|
+
function _templateObject4$8() {
|
|
8428
8516
|
var data = taggedTemplateLiteral(["\n position:relative;\n\n &:hover > ", " {\n visibility: visible;\n }\n\n &:hover > ", " > * {\n animation-name: ", ";\n animation-duration: 200ms;\n animation-fill-mode: backwards;\n animation-timing-function: ease-in-out;\n }\n"]);
|
|
8429
8517
|
|
|
8430
|
-
_templateObject4$
|
|
8518
|
+
_templateObject4$8 = function _templateObject4() {
|
|
8431
8519
|
return data;
|
|
8432
8520
|
};
|
|
8433
8521
|
|
|
8434
8522
|
return data;
|
|
8435
8523
|
}
|
|
8436
8524
|
|
|
8437
|
-
function _templateObject3$
|
|
8525
|
+
function _templateObject3$8() {
|
|
8438
8526
|
var data = taggedTemplateLiteral(["\n cursor:pointer;\n background:white;\n border-radius:100%;\n padding:8px;\n display:flex;\n justify-content:center;\n border:1px solid rgb(204, 204, 204);\n"]);
|
|
8439
8527
|
|
|
8440
|
-
_templateObject3$
|
|
8528
|
+
_templateObject3$8 = function _templateObject3() {
|
|
8441
8529
|
return data;
|
|
8442
8530
|
};
|
|
8443
8531
|
|
|
@@ -8454,16 +8542,16 @@ function _templateObject2$b() {
|
|
|
8454
8542
|
return data;
|
|
8455
8543
|
}
|
|
8456
8544
|
|
|
8457
|
-
function _templateObject$
|
|
8545
|
+
function _templateObject$i() {
|
|
8458
8546
|
var data = taggedTemplateLiteral(["\n 0% {\n opacity:0;\n visibility: hidden;\n transform: scale(0.6) translateY(-8px);\n }\n\n 100% {\n visibility: visible;\n opacity:1;\n }\n"]);
|
|
8459
8547
|
|
|
8460
|
-
_templateObject$
|
|
8548
|
+
_templateObject$i = function _templateObject() {
|
|
8461
8549
|
return data;
|
|
8462
8550
|
};
|
|
8463
8551
|
|
|
8464
8552
|
return data;
|
|
8465
8553
|
}
|
|
8466
|
-
var listAnimation = styled.keyframes(_templateObject$
|
|
8554
|
+
var listAnimation = styled.keyframes(_templateObject$i());
|
|
8467
8555
|
var POSITION_LIST = '100%';
|
|
8468
8556
|
var POSITION_LIST_DISTANCE = '10%';
|
|
8469
8557
|
|
|
@@ -8501,8 +8589,8 @@ var ListContent = styled__default.div(_templateObject2$b(), function (props) {
|
|
|
8501
8589
|
}, function (props) {
|
|
8502
8590
|
return props.direction === 'bottom' && "\n flex-direction:column;\n justify-content:start;\n top:".concat(POSITION_LIST, ";\n bottom:0;\n right:0;\n left:0;\n padding-top:").concat(POSITION_LIST_DISTANCE, ";\n ");
|
|
8503
8591
|
});
|
|
8504
|
-
var PreviewContent = styled__default.div(_templateObject3$
|
|
8505
|
-
var Container$1 = styled__default.div(_templateObject4$
|
|
8592
|
+
var PreviewContent = styled__default.div(_templateObject3$8());
|
|
8593
|
+
var Container$1 = styled__default.div(_templateObject4$8(), ListContent, ListContent, listAnimation);
|
|
8506
8594
|
|
|
8507
8595
|
var ButtonIcon = function ButtonIcon(_ref) {
|
|
8508
8596
|
var children = _ref.children,
|
|
@@ -8690,20 +8778,20 @@ function _templateObject5$7() {
|
|
|
8690
8778
|
return data;
|
|
8691
8779
|
}
|
|
8692
8780
|
|
|
8693
|
-
function _templateObject4$
|
|
8781
|
+
function _templateObject4$9() {
|
|
8694
8782
|
var data = taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", ";\n"]);
|
|
8695
8783
|
|
|
8696
|
-
_templateObject4$
|
|
8784
|
+
_templateObject4$9 = function _templateObject4() {
|
|
8697
8785
|
return data;
|
|
8698
8786
|
};
|
|
8699
8787
|
|
|
8700
8788
|
return data;
|
|
8701
8789
|
}
|
|
8702
8790
|
|
|
8703
|
-
function _templateObject3$
|
|
8791
|
+
function _templateObject3$9() {
|
|
8704
8792
|
var data = taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", ";\n"]);
|
|
8705
8793
|
|
|
8706
|
-
_templateObject3$
|
|
8794
|
+
_templateObject3$9 = function _templateObject3() {
|
|
8707
8795
|
return data;
|
|
8708
8796
|
};
|
|
8709
8797
|
|
|
@@ -8720,21 +8808,21 @@ function _templateObject2$c() {
|
|
|
8720
8808
|
return data;
|
|
8721
8809
|
}
|
|
8722
8810
|
|
|
8723
|
-
function _templateObject$
|
|
8811
|
+
function _templateObject$j() {
|
|
8724
8812
|
var data = taggedTemplateLiteral(["\n padding: 7px;\n border-radius: ", ";\n border-width:1px;\n border-style:solid;\n display:flex;\n align-items:center;\n position:relative;\n\n ", "\n\n svg {\n margin-right: 8px;\n display: block;\n }\n"]);
|
|
8725
8813
|
|
|
8726
|
-
_templateObject$
|
|
8814
|
+
_templateObject$j = function _templateObject() {
|
|
8727
8815
|
return data;
|
|
8728
8816
|
};
|
|
8729
8817
|
|
|
8730
8818
|
return data;
|
|
8731
8819
|
}
|
|
8732
|
-
var Div = styled__default.div(_templateObject$
|
|
8820
|
+
var Div = styled__default.div(_templateObject$j(), theme.defaultRadius, function (props) {
|
|
8733
8821
|
return props.useClose && "\n padding-right: 32px;\n ";
|
|
8734
8822
|
});
|
|
8735
8823
|
var Title$2 = styled__default.h5(_templateObject2$c(), theme.font.main, theme.font.medium.size, theme.font.big.lineHeight);
|
|
8736
|
-
var Content = styled__default.p(_templateObject3$
|
|
8737
|
-
var SmallContent = styled__default(Content)(_templateObject4$
|
|
8824
|
+
var Content = styled__default.p(_templateObject3$9(), theme.font.extraSmall.size, theme.font.small.lineHeight);
|
|
8825
|
+
var SmallContent = styled__default(Content)(_templateObject4$9(), theme.font.small.size, theme.font.small.lineHeight);
|
|
8738
8826
|
var Close = styled__default.button.attrs(function (props) {
|
|
8739
8827
|
return {
|
|
8740
8828
|
type: 'button'
|
|
@@ -8831,6 +8919,7 @@ exports.ButtonDropdown = Dropdown$1;
|
|
|
8831
8919
|
exports.ButtonGroup = ButtonGroup;
|
|
8832
8920
|
exports.Form = Form;
|
|
8833
8921
|
exports.Input = Input;
|
|
8922
|
+
exports.Textarea = Textarea;
|
|
8834
8923
|
exports.Password = Password;
|
|
8835
8924
|
exports.CheckBox = CheckBox;
|
|
8836
8925
|
exports.RadioBox = RadioBox;
|
|
@@ -8846,6 +8935,7 @@ exports.Title = Title;
|
|
|
8846
8935
|
exports.SubTitle = SubTitle;
|
|
8847
8936
|
exports.ThirdTitle = ThirdTitle;
|
|
8848
8937
|
exports.Text = Text;
|
|
8938
|
+
exports.Emphasis = Emphasis;
|
|
8849
8939
|
exports.Alert = index;
|
|
8850
8940
|
exports.Spacer = Spacer;
|
|
8851
8941
|
exports.Icon = Icons;
|