bromcom-ui 2.8.0-rc.3 → 2.8.0-rc.4
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/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/p-0bcc14f8.entry.js +5 -0
- package/dist/bromcom-ui/p-0cb89561.entry.js +5 -0
- package/dist/bromcom-ui/p-136aeeea.entry.js +5 -0
- package/dist/bromcom-ui/p-1ca72216.entry.js +5 -0
- package/dist/bromcom-ui/p-1cd1623f.entry.js +5 -0
- package/dist/bromcom-ui/p-21636df0.entry.js +5 -0
- package/dist/bromcom-ui/p-21ac8544.entry.js +5 -0
- package/dist/bromcom-ui/{p-ef8b37a2.js → p-2d7300b3.js} +1 -1
- package/dist/bromcom-ui/p-352b9ae6.entry.js +5 -0
- package/dist/bromcom-ui/p-3a75047e.entry.js +5 -0
- package/dist/bromcom-ui/p-3b31b8c4.entry.js +5 -0
- package/dist/bromcom-ui/p-3beac7a6.entry.js +5 -0
- package/dist/bromcom-ui/{p-3f7625ff.js → p-4167e51c.js} +1 -1
- package/dist/bromcom-ui/p-43c5f3c3.entry.js +5 -0
- package/dist/bromcom-ui/p-4a172a33.entry.js +5 -0
- package/dist/bromcom-ui/{p-eb945ceb.js → p-4a4562f5.js} +1 -1
- package/dist/bromcom-ui/p-4b23f132.entry.js +5 -0
- package/dist/bromcom-ui/p-4cc4f6cd.entry.js +5 -0
- package/dist/bromcom-ui/p-56a9ce0a.js +5 -0
- package/dist/bromcom-ui/{p-c34638dc.js → p-56bb19ef.js} +1 -1
- package/dist/bromcom-ui/p-597be152.entry.js +5 -0
- package/dist/bromcom-ui/p-59ee0928.js +5 -0
- package/dist/bromcom-ui/p-5c6f941e.entry.js +5 -0
- package/dist/bromcom-ui/p-5ff9d4f6.entry.js +5 -0
- package/dist/bromcom-ui/p-64c7173a.entry.js +5 -0
- package/dist/bromcom-ui/p-65ab8436.entry.js +5 -0
- package/dist/bromcom-ui/p-66a9de7c.entry.js +5 -0
- package/dist/bromcom-ui/p-6708a234.entry.js +5 -0
- package/dist/bromcom-ui/{p-e01fb694.entry.js → p-6808ca09.entry.js} +1 -1
- package/dist/bromcom-ui/p-6b1bbd46.entry.js +5 -0
- package/dist/bromcom-ui/p-6cc1927f.entry.js +5 -0
- package/dist/bromcom-ui/p-71930900.js +5 -0
- package/dist/bromcom-ui/p-7c510c8f.entry.js +5 -0
- package/dist/bromcom-ui/p-7d0fb564.entry.js +5 -0
- package/dist/bromcom-ui/p-7f5409c2.entry.js +5 -0
- package/dist/bromcom-ui/p-81cfc9bf.entry.js +5 -0
- package/dist/bromcom-ui/p-87cc3b5a.js +5 -0
- package/dist/bromcom-ui/{p-9ae9706d.entry.js → p-88f62d13.entry.js} +1 -1
- package/dist/bromcom-ui/p-8dbcd26b.entry.js +5 -0
- package/dist/bromcom-ui/p-9c970a65.entry.js +5 -0
- package/dist/bromcom-ui/p-9e41c7f1.entry.js +5 -0
- package/dist/bromcom-ui/p-a46f0626.entry.js +5 -0
- package/dist/bromcom-ui/p-a4c5cbd8.entry.js +5 -0
- package/dist/bromcom-ui/p-ab830de6.entry.js +5 -0
- package/dist/bromcom-ui/p-ab8bc270.entry.js +5 -0
- package/dist/bromcom-ui/p-ae1107ad.js +5 -0
- package/dist/bromcom-ui/p-b81a4068.entry.js +5 -0
- package/dist/bromcom-ui/p-b8d849a2.entry.js +5 -0
- package/dist/bromcom-ui/p-c3dcd469.entry.js +5 -0
- package/dist/bromcom-ui/p-c793cfcd.entry.js +5 -0
- package/dist/bromcom-ui/p-c7f33aa3.entry.js +5 -0
- package/dist/bromcom-ui/p-cd1cd1e5.entry.js +5 -0
- package/dist/bromcom-ui/p-d723d8e8.entry.js +5 -0
- package/dist/bromcom-ui/p-dbeb843a.entry.js +5 -0
- package/dist/bromcom-ui/p-dc584fdd.entry.js +5 -0
- package/dist/bromcom-ui/p-ddb38da3.entry.js +5 -0
- package/dist/bromcom-ui/p-e099ae93.entry.js +5 -0
- package/dist/bromcom-ui/p-e23bb883.entry.js +5 -0
- package/dist/bromcom-ui/p-e4bff61b.entry.js +5 -0
- package/dist/bromcom-ui/p-ebc810e1.entry.js +5 -0
- package/dist/bromcom-ui/p-f75d23b0.entry.js +5 -0
- package/dist/bromcom-ui/p-f75f481a.entry.js +5 -0
- package/dist/bromcom-ui/p-fe684e3c.entry.js +10 -0
- package/dist/cjs/bcm-accordion.cjs.entry.js +2 -1
- package/dist/cjs/bcm-alert.cjs.entry.js +2 -1
- package/dist/cjs/bcm-attendance.cjs.entry.js +2 -1
- package/dist/cjs/bcm-avatar_2.cjs.entry.js +5 -4
- package/dist/cjs/bcm-breadcrumb.cjs.entry.js +2 -1
- package/dist/cjs/bcm-button-group.cjs.entry.js +2 -1
- package/dist/cjs/bcm-button.cjs.entry.js +385 -0
- package/dist/cjs/bcm-card.cjs.entry.js +3 -2
- package/dist/cjs/bcm-checkbox-group.cjs.entry.js +18 -17
- package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +2 -1
- package/dist/cjs/bcm-checkbox_2.cjs.entry.js +3 -2
- package/dist/cjs/bcm-chip.cjs.entry.js +3 -2
- package/dist/cjs/bcm-collapse.cjs.entry.js +2 -1
- package/dist/cjs/bcm-color-input.cjs.entry.js +5 -4
- package/dist/cjs/{bcm-button_13.cjs.entry.js → bcm-colorful_2.cjs.entry.js} +138 -3897
- package/dist/cjs/bcm-date-picker.cjs.entry.js +2 -1
- package/dist/cjs/bcm-datetime-picker.cjs.entry.js +2 -1
- package/dist/cjs/bcm-default.cjs.entry.js +2 -1
- package/dist/cjs/bcm-drawer.cjs.entry.js +5 -4
- package/dist/cjs/bcm-dropdown.cjs.entry.js +3 -2
- package/dist/cjs/bcm-expansion-panel.cjs.entry.js +3 -2
- package/dist/cjs/bcm-form-2.cjs.entry.js +2 -1
- package/dist/cjs/bcm-form.cjs.entry.js +487 -0
- package/dist/cjs/bcm-icon.cjs.entry.js +41 -0
- package/dist/cjs/bcm-input-custom.cjs.entry.js +2 -1
- package/dist/cjs/bcm-input.cjs.entry.js +369 -0
- package/dist/cjs/bcm-item.cjs.entry.js +3 -2
- package/dist/cjs/bcm-items.cjs.entry.js +2 -1
- package/dist/cjs/bcm-label_2.cjs.entry.js +149 -0
- package/dist/cjs/bcm-list.cjs.entry.js +1793 -0
- package/dist/cjs/bcm-menu.cjs.entry.js +6 -5
- package/dist/cjs/bcm-modal.cjs.entry.js +2 -1
- package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +3 -2
- package/dist/cjs/bcm-popconfirm.cjs.entry.js +2 -1
- package/dist/cjs/bcm-popover.cjs.entry.js +6 -5
- package/dist/cjs/bcm-progress.cjs.entry.js +3 -2
- package/dist/cjs/bcm-radio-group.cjs.entry.js +5 -4
- package/dist/cjs/bcm-radio.cjs.entry.js +5 -4
- package/dist/cjs/bcm-range.cjs.entry.js +2 -1
- package/dist/cjs/bcm-search.cjs.entry.js +259 -0
- package/dist/cjs/bcm-skeleton.cjs.entry.js +2 -1
- package/dist/cjs/bcm-step.cjs.entry.js +102 -0
- package/dist/cjs/bcm-stepper.cjs.entry.js +247 -0
- package/dist/cjs/bcm-switch.cjs.entry.js +2 -1
- package/dist/cjs/bcm-tab-group.cjs.entry.js +5 -4
- package/dist/cjs/bcm-tab-item-header.cjs.entry.js +5 -4
- package/dist/cjs/bcm-tab-item.cjs.entry.js +5 -4
- package/dist/cjs/bcm-tag.cjs.entry.js +3 -2
- package/dist/cjs/bcm-text.cjs.entry.js +63 -0
- package/dist/cjs/bcm-textarea.cjs.entry.js +3 -2
- package/dist/cjs/bcm-time-picker.cjs.entry.js +2 -1
- package/dist/cjs/bcm-toast.cjs.entry.js +2 -1
- package/dist/cjs/bromcom-ui.cjs.js +1 -1
- package/dist/cjs/{color-helper-ff22257f.js → color-helper-09aa652d.js} +8 -8
- package/dist/cjs/{generate-7b71e00a.js → colors-7cc2aee2.js} +0 -297
- package/dist/cjs/generate-44bb438e.js +305 -0
- package/dist/cjs/{input-template-98c29bbb.js → input-template-6b354df9.js} +1 -1
- package/dist/cjs/{json-parse-decarator-79e20ff3.js → json-parse-decarator-22ab54f7.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{number-helper-9869878b.js → number-helper-72b20785.js} +1 -1
- package/dist/cjs/old-bcm-popover-box.cjs.entry.js +3 -2
- package/dist/cjs/old-bcm-popover.cjs.entry.js +2 -1
- package/dist/cjs/stepper-states-6892694b.js +85 -0
- package/dist/cjs/{tooltip-helper-27421198.js → tooltip-helper-6d6407d1.js} +4 -4
- package/dist/cjs/{validators-261e5c81.js → validators-cce37534.js} +1 -1
- package/dist/collection/components/molecules/popover/popover.js +1 -1
- package/dist/collection/components/molecules/tooltip/tooltip.js +1 -1
- package/dist/components/bcm-popover.js +1 -1
- package/dist/components/generate.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/esm/bcm-accordion.entry.js +2 -1
- package/dist/esm/bcm-alert.entry.js +2 -1
- package/dist/esm/bcm-attendance.entry.js +2 -1
- package/dist/esm/bcm-avatar_2.entry.js +5 -4
- package/dist/esm/bcm-breadcrumb.entry.js +2 -1
- package/dist/esm/bcm-button-group.entry.js +2 -1
- package/dist/esm/bcm-button.entry.js +381 -0
- package/dist/esm/bcm-card.entry.js +3 -2
- package/dist/esm/bcm-checkbox-group.entry.js +8 -7
- package/dist/esm/bcm-checkbox-lite_9.entry.js +2 -1
- package/dist/esm/bcm-checkbox_2.entry.js +3 -2
- package/dist/esm/bcm-chip.entry.js +3 -2
- package/dist/esm/bcm-collapse.entry.js +2 -1
- package/dist/esm/bcm-color-input.entry.js +5 -4
- package/dist/esm/{bcm-button_13.entry.js → bcm-colorful_2.entry.js} +134 -3882
- package/dist/esm/bcm-date-picker.entry.js +2 -1
- package/dist/esm/bcm-datetime-picker.entry.js +2 -1
- package/dist/esm/bcm-default.entry.js +2 -1
- package/dist/esm/bcm-drawer.entry.js +5 -4
- package/dist/esm/bcm-dropdown.entry.js +3 -2
- package/dist/esm/bcm-expansion-panel.entry.js +3 -2
- package/dist/esm/bcm-form-2.entry.js +2 -1
- package/dist/esm/bcm-form.entry.js +483 -0
- package/dist/esm/bcm-icon.entry.js +37 -0
- package/dist/esm/bcm-input-custom.entry.js +2 -1
- package/dist/esm/bcm-input.entry.js +365 -0
- package/dist/esm/bcm-item.entry.js +3 -2
- package/dist/esm/bcm-items.entry.js +2 -1
- package/dist/esm/bcm-label_2.entry.js +144 -0
- package/dist/esm/bcm-list.entry.js +1789 -0
- package/dist/esm/bcm-menu.entry.js +6 -5
- package/dist/esm/bcm-modal.entry.js +2 -1
- package/dist/esm/bcm-popconfirm-box.entry.js +3 -2
- package/dist/esm/bcm-popconfirm.entry.js +2 -1
- package/dist/esm/bcm-popover.entry.js +6 -5
- package/dist/esm/bcm-progress.entry.js +3 -2
- package/dist/esm/bcm-radio-group.entry.js +5 -4
- package/dist/esm/bcm-radio.entry.js +5 -4
- package/dist/esm/bcm-range.entry.js +2 -1
- package/dist/esm/bcm-search.entry.js +255 -0
- package/dist/esm/bcm-skeleton.entry.js +2 -1
- package/dist/esm/bcm-step.entry.js +98 -0
- package/dist/esm/bcm-stepper.entry.js +243 -0
- package/dist/esm/bcm-switch.entry.js +2 -1
- package/dist/esm/bcm-tab-group.entry.js +5 -4
- package/dist/esm/bcm-tab-item-header.entry.js +5 -4
- package/dist/esm/bcm-tab-item.entry.js +5 -4
- package/dist/esm/bcm-tag.entry.js +3 -2
- package/dist/esm/bcm-text.entry.js +59 -0
- package/dist/esm/bcm-textarea.entry.js +3 -2
- package/dist/esm/bcm-time-picker.entry.js +2 -1
- package/dist/esm/bcm-toast.entry.js +2 -1
- package/dist/esm/bromcom-ui.js +1 -1
- package/dist/esm/{color-helper-362cd7b6.js → color-helper-2b6697b6.js} +1 -1
- package/dist/esm/{generate-6c5030c9.js → colors-39b87f63.js} +1 -296
- package/dist/esm/generate-42365155.js +302 -0
- package/dist/esm/{input-template-21cb9810.js → input-template-c035bb51.js} +1 -1
- package/dist/esm/{json-parse-decarator-b3d10607.js → json-parse-decarator-bfc50c70.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{number-helper-0ab0676b.js → number-helper-6a09d08c.js} +1 -1
- package/dist/esm/old-bcm-popover-box.entry.js +3 -2
- package/dist/esm/old-bcm-popover.entry.js +2 -1
- package/dist/esm/stepper-states-a0b074ca.js +83 -0
- package/dist/esm/{tooltip-helper-6b6cee19.js → tooltip-helper-f4f3e26c.js} +4 -4
- package/dist/esm/{validators-87201c22.js → validators-e2f24be7.js} +1 -1
- package/dist/types/components/molecules/popover/popover.d.ts +1 -1
- package/dist/types/components/molecules/tooltip/tooltip.d.ts +1 -1
- package/package.json +1 -1
- package/dist/bromcom-ui/p-01e2c310.entry.js +0 -5
- package/dist/bromcom-ui/p-025fa461.entry.js +0 -5
- package/dist/bromcom-ui/p-02d89883.entry.js +0 -5
- package/dist/bromcom-ui/p-090ed544.entry.js +0 -5
- package/dist/bromcom-ui/p-09733614.entry.js +0 -5
- package/dist/bromcom-ui/p-0f07e69b.js +0 -5
- package/dist/bromcom-ui/p-23f4991b.entry.js +0 -5
- package/dist/bromcom-ui/p-323973e5.entry.js +0 -5
- package/dist/bromcom-ui/p-37194223.entry.js +0 -5
- package/dist/bromcom-ui/p-479f0bd5.entry.js +0 -5
- package/dist/bromcom-ui/p-4836d1cd.entry.js +0 -5
- package/dist/bromcom-ui/p-59e2af89.entry.js +0 -5
- package/dist/bromcom-ui/p-5a68e6e7.entry.js +0 -5
- package/dist/bromcom-ui/p-65ab887f.entry.js +0 -5
- package/dist/bromcom-ui/p-677195de.entry.js +0 -5
- package/dist/bromcom-ui/p-6c78072c.entry.js +0 -5
- package/dist/bromcom-ui/p-6cb33e93.entry.js +0 -5
- package/dist/bromcom-ui/p-6d0e6802.entry.js +0 -5
- package/dist/bromcom-ui/p-6d4f10e3.entry.js +0 -5
- package/dist/bromcom-ui/p-71663e53.entry.js +0 -5
- package/dist/bromcom-ui/p-761f7e8c.entry.js +0 -5
- package/dist/bromcom-ui/p-762aeb4a.entry.js +0 -5
- package/dist/bromcom-ui/p-7b0bfeb2.entry.js +0 -5
- package/dist/bromcom-ui/p-84919c9d.entry.js +0 -5
- package/dist/bromcom-ui/p-8811d071.entry.js +0 -5
- package/dist/bromcom-ui/p-911776d7.entry.js +0 -5
- package/dist/bromcom-ui/p-92f6ca0f.entry.js +0 -5
- package/dist/bromcom-ui/p-9763ed2d.js +0 -5
- package/dist/bromcom-ui/p-a051b68c.entry.js +0 -5
- package/dist/bromcom-ui/p-a0807939.js +0 -5
- package/dist/bromcom-ui/p-accf5f6c.entry.js +0 -11
- package/dist/bromcom-ui/p-afac7571.entry.js +0 -5
- package/dist/bromcom-ui/p-b280f61e.entry.js +0 -5
- package/dist/bromcom-ui/p-b295dc77.entry.js +0 -5
- package/dist/bromcom-ui/p-bf383f52.entry.js +0 -5
- package/dist/bromcom-ui/p-c08cee8b.entry.js +0 -5
- package/dist/bromcom-ui/p-c7dc70b8.entry.js +0 -5
- package/dist/bromcom-ui/p-c865c604.entry.js +0 -5
- package/dist/bromcom-ui/p-cc67f4a8.entry.js +0 -5
- package/dist/bromcom-ui/p-d353ce68.entry.js +0 -5
- package/dist/bromcom-ui/p-d3dd1bcb.entry.js +0 -5
- package/dist/bromcom-ui/p-d3ff6b31.entry.js +0 -5
- package/dist/bromcom-ui/p-d9668e00.entry.js +0 -5
- package/dist/bromcom-ui/p-e320352d.entry.js +0 -5
- package/dist/bromcom-ui/p-fa3291a8.entry.js +0 -5
|
@@ -6,393 +6,21 @@
|
|
|
6
6
|
|
|
7
7
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
8
8
|
|
|
9
|
-
const index
|
|
10
|
-
const generate = require('./generate-7b71e00a.js');
|
|
11
|
-
const bcm = require('./bcm-634604e3.js');
|
|
12
|
-
const index$2 = require('./index-a2b50e51.js');
|
|
13
|
-
const index = require('./index-56628fe5.js');
|
|
14
|
-
const slotTemplate = require('./slot-template-7a07f865.js');
|
|
15
|
-
const colorHelper = require('./color-helper-ff22257f.js');
|
|
16
|
-
const isLoadDecorator = require('./is-load-decorator-faac117d.js');
|
|
9
|
+
const index = require('./index-7e2a5376.js');
|
|
17
10
|
const _commonjsHelpers = require('./_commonjsHelpers-bd20f4c0.js');
|
|
18
|
-
const
|
|
19
|
-
const utils = require('./utils-fc077139.js');
|
|
20
|
-
const numberHelper = require('./number-helper-9869878b.js');
|
|
21
|
-
const validators = require('./validators-261e5c81.js');
|
|
22
|
-
const captionTemplate = require('./caption-template-de4a0064.js');
|
|
23
|
-
const inputTemplate = require('./input-template-98c29bbb.js');
|
|
24
|
-
const labelTemplate = require('./label-template-098a30a4.js');
|
|
11
|
+
const bcm = require('./bcm-634604e3.js');
|
|
25
12
|
require('./element-dragger-a8562f82.js');
|
|
13
|
+
require('./string-helper-71b10c53.js');
|
|
14
|
+
const utils = require('./utils-fc077139.js');
|
|
26
15
|
const floatingUi = require('./floating-ui-c23acc6c.js');
|
|
16
|
+
require('./color-helper-09aa652d.js');
|
|
27
17
|
require('./datetime-helper-eaf4fadb.js');
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
require('./
|
|
31
|
-
require('./
|
|
32
|
-
const tooltipHelper = require('./tooltip-helper-27421198.js');
|
|
18
|
+
const generate = require('./generate-44bb438e.js');
|
|
19
|
+
require('./number-helper-72b20785.js');
|
|
20
|
+
require('./validators-cce37534.js');
|
|
21
|
+
const isLoadDecorator = require('./is-load-decorator-faac117d.js');
|
|
33
22
|
require('./colors-56282b00.js');
|
|
34
|
-
|
|
35
|
-
const variantOptions = {
|
|
36
|
-
save: {
|
|
37
|
-
text: 'Save',
|
|
38
|
-
color: 'emerald',
|
|
39
|
-
icon: 'far fa-save',
|
|
40
|
-
iconPosition: 'prefix',
|
|
41
|
-
},
|
|
42
|
-
ok: {
|
|
43
|
-
text: 'Ok',
|
|
44
|
-
color: 'emerald',
|
|
45
|
-
icon: 'far fa-check',
|
|
46
|
-
iconPosition: 'prefix',
|
|
47
|
-
},
|
|
48
|
-
new: {
|
|
49
|
-
text: 'New',
|
|
50
|
-
color: 'emerald',
|
|
51
|
-
icon: 'far fa-plus',
|
|
52
|
-
iconPosition: 'prefix',
|
|
53
|
-
},
|
|
54
|
-
add: {
|
|
55
|
-
text: 'Add',
|
|
56
|
-
color: 'emerald',
|
|
57
|
-
icon: 'far fa-plus',
|
|
58
|
-
iconPosition: 'prefix',
|
|
59
|
-
},
|
|
60
|
-
create: {
|
|
61
|
-
text: 'Create',
|
|
62
|
-
color: 'emerald',
|
|
63
|
-
icon: 'far fa-plus',
|
|
64
|
-
iconPosition: 'prefix',
|
|
65
|
-
},
|
|
66
|
-
prev: {
|
|
67
|
-
text: 'Prev',
|
|
68
|
-
color: '',
|
|
69
|
-
icon: 'far fa-arrow-left',
|
|
70
|
-
iconPosition: 'prefix',
|
|
71
|
-
},
|
|
72
|
-
next: {
|
|
73
|
-
text: 'Next',
|
|
74
|
-
color: '',
|
|
75
|
-
icon: 'far fa-arrow-right',
|
|
76
|
-
iconPosition: 'suffix',
|
|
77
|
-
},
|
|
78
|
-
apply: {
|
|
79
|
-
text: 'Apply',
|
|
80
|
-
color: '',
|
|
81
|
-
icon: 'far fa-check-circle',
|
|
82
|
-
iconPosition: 'prefix',
|
|
83
|
-
},
|
|
84
|
-
submit: {
|
|
85
|
-
text: 'Submit',
|
|
86
|
-
color: '',
|
|
87
|
-
icon: 'far fa-save',
|
|
88
|
-
iconPosition: 'prefix',
|
|
89
|
-
},
|
|
90
|
-
send: {
|
|
91
|
-
text: 'Send',
|
|
92
|
-
color: 'emerald',
|
|
93
|
-
icon: 'far fa-paper-plane',
|
|
94
|
-
iconPosition: 'prefix',
|
|
95
|
-
},
|
|
96
|
-
delete: {
|
|
97
|
-
text: 'Delete',
|
|
98
|
-
color: 'red',
|
|
99
|
-
icon: 'far fa-trash',
|
|
100
|
-
iconPosition: 'prefix',
|
|
101
|
-
},
|
|
102
|
-
cancel: {
|
|
103
|
-
text: 'Cancel',
|
|
104
|
-
color: 'red',
|
|
105
|
-
icon: 'far fa-times',
|
|
106
|
-
iconPosition: 'prefix',
|
|
107
|
-
},
|
|
108
|
-
decline: {
|
|
109
|
-
text: 'Decline',
|
|
110
|
-
color: 'red',
|
|
111
|
-
icon: 'far fa-ban',
|
|
112
|
-
iconPosition: 'prefix',
|
|
113
|
-
},
|
|
114
|
-
close: {
|
|
115
|
-
text: 'Close',
|
|
116
|
-
color: 'red',
|
|
117
|
-
icon: 'far fa-times-circle',
|
|
118
|
-
iconPosition: 'prefix',
|
|
119
|
-
},
|
|
120
|
-
archive: {
|
|
121
|
-
text: 'Archive',
|
|
122
|
-
color: 'red',
|
|
123
|
-
icon: 'far fa-folder-open',
|
|
124
|
-
iconPosition: 'prefix',
|
|
125
|
-
},
|
|
126
|
-
remove: {
|
|
127
|
-
text: 'Remove',
|
|
128
|
-
color: 'red',
|
|
129
|
-
icon: 'far fa-minus-circle',
|
|
130
|
-
iconPosition: 'prefix',
|
|
131
|
-
},
|
|
132
|
-
edit: {
|
|
133
|
-
text: 'Edit',
|
|
134
|
-
color: '',
|
|
135
|
-
icon: 'far fa-edit',
|
|
136
|
-
iconPosition: 'prefix',
|
|
137
|
-
},
|
|
138
|
-
export: {
|
|
139
|
-
text: 'Export',
|
|
140
|
-
color: '',
|
|
141
|
-
icon: 'far fa-sign-out',
|
|
142
|
-
iconPosition: 'prefix',
|
|
143
|
-
},
|
|
144
|
-
import: {
|
|
145
|
-
text: 'Import',
|
|
146
|
-
color: '',
|
|
147
|
-
icon: 'far fa-sign-in',
|
|
148
|
-
iconPosition: 'prefix',
|
|
149
|
-
},
|
|
150
|
-
filter: {
|
|
151
|
-
text: 'Filter',
|
|
152
|
-
color: '',
|
|
153
|
-
icon: 'far fa-filter',
|
|
154
|
-
iconPosition: 'prefix',
|
|
155
|
-
},
|
|
156
|
-
update: {
|
|
157
|
-
text: 'Update',
|
|
158
|
-
color: '',
|
|
159
|
-
icon: 'far fa-sync',
|
|
160
|
-
iconPosition: 'prefix',
|
|
161
|
-
},
|
|
162
|
-
reset: {
|
|
163
|
-
text: "Reset",
|
|
164
|
-
color: "",
|
|
165
|
-
icon: 'far fa-sync',
|
|
166
|
-
iconPosition: "prefix",
|
|
167
|
-
},
|
|
168
|
-
download: {
|
|
169
|
-
text: 'Download',
|
|
170
|
-
color: '',
|
|
171
|
-
icon: 'far fa-download',
|
|
172
|
-
iconPosition: 'prefix',
|
|
173
|
-
},
|
|
174
|
-
};
|
|
175
|
-
var VariantProps;
|
|
176
|
-
(function (VariantProps) {
|
|
177
|
-
VariantProps["save"] = "save";
|
|
178
|
-
VariantProps["submit"] = "submit";
|
|
179
|
-
VariantProps["ok"] = "ok";
|
|
180
|
-
VariantProps["new"] = "new";
|
|
181
|
-
VariantProps["add"] = "add";
|
|
182
|
-
VariantProps["create"] = "create";
|
|
183
|
-
VariantProps["apply"] = "apply";
|
|
184
|
-
VariantProps["prev"] = "prev";
|
|
185
|
-
VariantProps["next"] = "next";
|
|
186
|
-
VariantProps["send"] = "send";
|
|
187
|
-
VariantProps["delete"] = "delete";
|
|
188
|
-
VariantProps["cancel"] = "cancel";
|
|
189
|
-
VariantProps["decline"] = "decline";
|
|
190
|
-
VariantProps["close"] = "close";
|
|
191
|
-
VariantProps["archive"] = "archive";
|
|
192
|
-
VariantProps["remove"] = "remove";
|
|
193
|
-
VariantProps["edit"] = "edit";
|
|
194
|
-
VariantProps["export"] = "export";
|
|
195
|
-
VariantProps["import"] = "import";
|
|
196
|
-
VariantProps["filter"] = "filter";
|
|
197
|
-
VariantProps["update"] = "update";
|
|
198
|
-
VariantProps["reset"] = "Reset";
|
|
199
|
-
VariantProps["download"] = "download";
|
|
200
|
-
})(VariantProps || (VariantProps = {}));
|
|
201
|
-
|
|
202
|
-
const { state: state$3 } = index.createStore({
|
|
203
|
-
value: new Map(),
|
|
204
|
-
setData: {},
|
|
205
|
-
removeData: {}
|
|
206
|
-
});
|
|
207
|
-
const setValue$3 = (val) => {
|
|
208
|
-
const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
|
|
209
|
-
icon: variantOptions[val.variant].icon,
|
|
210
|
-
value: variantOptions[val.variant].text,
|
|
211
|
-
iconPosition: bcm.Bcm.IconPosition[variantOptions[val.variant].iconPosition],
|
|
212
|
-
variantColor: variantOptions[val.variant].color
|
|
213
|
-
}));
|
|
214
|
-
state$3.value.set(data.id, data);
|
|
215
|
-
};
|
|
216
|
-
const removeValue$2 = (_id) => {
|
|
217
|
-
state$3.value.delete(_id);
|
|
218
|
-
};
|
|
219
|
-
const getValue$3 = (id) => generate.snq(() => state$3.value.get(id), {});
|
|
220
|
-
const buttonState = {
|
|
221
|
-
setValue: setValue$3,
|
|
222
|
-
removeValue: removeValue$2,
|
|
223
|
-
getValue: getValue$3
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
|
|
227
|
-
const ButtonTagType = (href) ? bcm.Bcm.HtmlElementType.a : bcm.Bcm.HtmlElementType.button;
|
|
228
|
-
return (index$1.h(ButtonTagType, Object.assign({ id: id }, (type == bcm.Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
|
|
229
|
-
index$1.h("span", { hidden: true },
|
|
230
|
-
index$1.h("slot", null)),
|
|
231
|
-
loading && index$1.h("span", { class: "bcm-button__container-loading" },
|
|
232
|
-
" ",
|
|
233
|
-
index$1.h("span", { class: "bcm-button__container-icon" },
|
|
234
|
-
index$1.h("i", { class: "far fa-spinner-third fa-spin" }),
|
|
235
|
-
" ")),
|
|
236
|
-
icon && index$1.h("span", { class: `${iconPosition} bcm-button__container-icon` },
|
|
237
|
-
index$1.h("i", { class: `${icon}` })),
|
|
238
|
-
!isIconOnly && (index$1.h(slotTemplate.SlotTemplate, { className: "bcm-button__container-text", value: value })),
|
|
239
|
-
index$1.h("slot", { name: "suffix" })));
|
|
240
|
-
};
|
|
241
|
-
|
|
242
|
-
const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
|
|
243
|
-
|
|
244
|
-
var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
245
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
246
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
247
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
248
|
-
else
|
|
249
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
250
|
-
if (d = decorators[i])
|
|
251
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
252
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
253
|
-
};
|
|
254
|
-
const BcmButton = class {
|
|
255
|
-
constructor(hostRef) {
|
|
256
|
-
index$1.registerInstance(this, hostRef);
|
|
257
|
-
this.bcmClick = index$1.createEvent(this, "bcm-click", 7);
|
|
258
|
-
this._id = generate.Generate.UID();
|
|
259
|
-
this.hidden = false;
|
|
260
|
-
this.type = bcm.Bcm.ButtonType.button;
|
|
261
|
-
this.size = bcm.Bcm.Size.medium;
|
|
262
|
-
this.disabled = false;
|
|
263
|
-
this.kind = bcm.Bcm.Kind.solid;
|
|
264
|
-
this.outline = false;
|
|
265
|
-
this.icon = undefined;
|
|
266
|
-
this.href = undefined;
|
|
267
|
-
this.target = undefined;
|
|
268
|
-
this.value = undefined;
|
|
269
|
-
this.loading = false;
|
|
270
|
-
this.variant = undefined;
|
|
271
|
-
this.dataDismiss = false;
|
|
272
|
-
this.fullWidth = false;
|
|
273
|
-
this.iconPosition = bcm.Bcm.IconPosition.prefix;
|
|
274
|
-
this.color = undefined;
|
|
275
|
-
this.checked = false;
|
|
276
|
-
}
|
|
277
|
-
handleOnClick(e) {
|
|
278
|
-
if (this.disabled) {
|
|
279
|
-
e.preventDefault();
|
|
280
|
-
e.stopPropagation();
|
|
281
|
-
return false;
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
componentWillRender() {
|
|
285
|
-
const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
|
|
286
|
-
buttonState.setValue({
|
|
287
|
-
id: this._id,
|
|
288
|
-
size,
|
|
289
|
-
type,
|
|
290
|
-
kind,
|
|
291
|
-
icon,
|
|
292
|
-
iconPosition,
|
|
293
|
-
disabled,
|
|
294
|
-
outline,
|
|
295
|
-
href,
|
|
296
|
-
target,
|
|
297
|
-
loading,
|
|
298
|
-
variant,
|
|
299
|
-
fullWidth,
|
|
300
|
-
hidden,
|
|
301
|
-
value,
|
|
302
|
-
isIconOnly: !!(this.isHaveChildNodes() && this.icon),
|
|
303
|
-
});
|
|
304
|
-
}
|
|
305
|
-
getStateData() {
|
|
306
|
-
return buttonState.getValue(this._id);
|
|
307
|
-
}
|
|
308
|
-
isHaveChildNodes() {
|
|
309
|
-
const childNodes = Array.from(this.el.childNodes);
|
|
310
|
-
return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
|
|
311
|
-
}
|
|
312
|
-
setColor(color = this.color) {
|
|
313
|
-
if (!color)
|
|
314
|
-
return;
|
|
315
|
-
const { kind } = this;
|
|
316
|
-
const prefix = `--bcm-button-${kind}`;
|
|
317
|
-
if (kind === 'solid') {
|
|
318
|
-
return {
|
|
319
|
-
[`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor('white'),
|
|
320
|
-
[`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor('white'),
|
|
321
|
-
[`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor('white'),
|
|
322
|
-
[`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor('white'),
|
|
323
|
-
[`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('white'),
|
|
324
|
-
[`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
|
|
325
|
-
[`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
326
|
-
[`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
|
|
327
|
-
[`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
|
|
328
|
-
[`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
|
|
329
|
-
[`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
|
|
330
|
-
[`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
331
|
-
[`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
|
|
332
|
-
[`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
|
|
333
|
-
[`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('slate-400')
|
|
334
|
-
};
|
|
335
|
-
}
|
|
336
|
-
else if (kind == 'link') {
|
|
337
|
-
return {
|
|
338
|
-
[`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
|
|
339
|
-
[`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
340
|
-
[`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-800'),
|
|
341
|
-
[`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-700'),
|
|
342
|
-
[`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
|
|
343
|
-
[`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor('transparent'),
|
|
344
|
-
[`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
|
|
345
|
-
[`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
|
|
346
|
-
[`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
|
|
347
|
-
[`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('transparent'),
|
|
348
|
-
[`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor('transparent'),
|
|
349
|
-
[`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
|
|
350
|
-
[`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
|
|
351
|
-
[`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
|
|
352
|
-
[`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('transparent')
|
|
353
|
-
};
|
|
354
|
-
}
|
|
355
|
-
else if (kind == 'ghost') {
|
|
356
|
-
return {
|
|
357
|
-
[`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
358
|
-
[`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
359
|
-
[`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
360
|
-
[`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
361
|
-
[`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-300'),
|
|
362
|
-
[`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-100'),
|
|
363
|
-
[`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-200'),
|
|
364
|
-
[`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-400'),
|
|
365
|
-
[`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-300'),
|
|
366
|
-
[`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-50'),
|
|
367
|
-
[`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-300'),
|
|
368
|
-
[`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-400'),
|
|
369
|
-
[`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
|
|
370
|
-
[`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-500'),
|
|
371
|
-
[`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor(color + '-200'),
|
|
372
|
-
};
|
|
373
|
-
}
|
|
374
|
-
return;
|
|
375
|
-
}
|
|
376
|
-
render() {
|
|
377
|
-
const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
|
|
378
|
-
const classPrefix = 'bcm-button';
|
|
379
|
-
let componentClass = index$2.classnames('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
|
|
380
|
-
'full-width': fullWidth,
|
|
381
|
-
'checked': this.checked,
|
|
382
|
-
'disabled': disabled,
|
|
383
|
-
});
|
|
384
|
-
const hostClasses = index$2.classnames(`${classPrefix}`, {
|
|
385
|
-
hidden,
|
|
386
|
-
'full-width': fullWidth,
|
|
387
|
-
});
|
|
388
|
-
return (index$1.h(index$1.Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, index$1.h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
|
|
389
|
-
}
|
|
390
|
-
get el() { return index$1.getElement(this); }
|
|
391
|
-
};
|
|
392
|
-
__decorate$b([
|
|
393
|
-
isLoadDecorator.IsLoad()
|
|
394
|
-
], BcmButton.prototype, "el", void 0);
|
|
395
|
-
BcmButton.style = buttonCss;
|
|
23
|
+
require('./colors-7cc2aee2.js');
|
|
396
24
|
|
|
397
25
|
/*
|
|
398
26
|
object-assign
|
|
@@ -18120,8 +17748,8 @@ const colorfulCss = "@import url(\"https://fonts.googleapis.com/css?family=Robot
|
|
|
18120
17748
|
|
|
18121
17749
|
const BcmColorful = class {
|
|
18122
17750
|
constructor(hostRef) {
|
|
18123
|
-
index
|
|
18124
|
-
this.bcmChange = index
|
|
17751
|
+
index.registerInstance(this, hostRef);
|
|
17752
|
+
this.bcmChange = index.createEvent(this, "bcmChange", 7);
|
|
18125
17753
|
this.color = "#3b82f6";
|
|
18126
17754
|
}
|
|
18127
17755
|
handleChange(e) {
|
|
@@ -18134,57 +17762,11 @@ const BcmColorful = class {
|
|
|
18134
17762
|
onChange: lodash.debounce(this.handleChange.bind(this), 150),
|
|
18135
17763
|
}), this.el);
|
|
18136
17764
|
}
|
|
18137
|
-
get el() { return index
|
|
17765
|
+
get el() { return index.getElement(this); }
|
|
18138
17766
|
};
|
|
18139
17767
|
BcmColorful.style = colorfulCss;
|
|
18140
17768
|
|
|
18141
|
-
|
|
18142
|
-
// *
|
|
18143
|
-
// * @param type
|
|
18144
|
-
// */
|
|
18145
|
-
// export const required = (value:any) => {
|
|
18146
|
-
// if ( value || value != null ) {
|
|
18147
|
-
// return true
|
|
18148
|
-
// } else {
|
|
18149
|
-
// return true
|
|
18150
|
-
// }
|
|
18151
|
-
// }
|
|
18152
|
-
class rules {
|
|
18153
|
-
constructor() { }
|
|
18154
|
-
response(status, message) {
|
|
18155
|
-
return Object.assign(Object.assign({ valid: status }, (message && { message })), (!status && { type: 'error' }));
|
|
18156
|
-
}
|
|
18157
|
-
required(value, componentValidation) {
|
|
18158
|
-
let validation = this.response(true);
|
|
18159
|
-
if (value == '' || value == "" || value == undefined || value == null || value === false) {
|
|
18160
|
-
validation = this.response(false, 'This field is required.');
|
|
18161
|
-
}
|
|
18162
|
-
if (componentValidation) {
|
|
18163
|
-
if (!componentValidation.valid) {
|
|
18164
|
-
validation = this.response(false, componentValidation.errorText);
|
|
18165
|
-
}
|
|
18166
|
-
if (value instanceof Object) {
|
|
18167
|
-
if (value.isValid) {
|
|
18168
|
-
if (value.isValid == false)
|
|
18169
|
-
validation = this.response(false, 'This field is required.');
|
|
18170
|
-
}
|
|
18171
|
-
}
|
|
18172
|
-
}
|
|
18173
|
-
return validation;
|
|
18174
|
-
}
|
|
18175
|
-
selfValidation(input) {
|
|
18176
|
-
let validation = this.response(true);
|
|
18177
|
-
if (input.captionError != null || input.captionType == 'error') {
|
|
18178
|
-
validation = this.response(false, input.captionError);
|
|
18179
|
-
}
|
|
18180
|
-
return validation;
|
|
18181
|
-
}
|
|
18182
|
-
}
|
|
18183
|
-
const validate = new rules;
|
|
18184
|
-
|
|
18185
|
-
const formCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block;margin-bottom:8px}:host(.hidden){display:none}";
|
|
18186
|
-
|
|
18187
|
-
var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
17769
|
+
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
18188
17770
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
18189
17771
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
18190
17772
|
r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -18194,3506 +17776,165 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
|
|
|
18194
17776
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18195
17777
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
18196
17778
|
};
|
|
18197
|
-
const
|
|
17779
|
+
const BcmLinked = class {
|
|
18198
17780
|
constructor(hostRef) {
|
|
18199
|
-
index
|
|
18200
|
-
this.
|
|
18201
|
-
this.
|
|
18202
|
-
this.
|
|
18203
|
-
this.
|
|
18204
|
-
this.
|
|
18205
|
-
this.
|
|
18206
|
-
this.
|
|
18207
|
-
|
|
18208
|
-
|
|
18209
|
-
},
|
|
18210
|
-
inputComponents: {
|
|
18211
|
-
// Birbirinin aynısı
|
|
18212
|
-
INPUT: 'input',
|
|
18213
|
-
TEXTAREA: 'textarea',
|
|
18214
|
-
//çok benzer
|
|
18215
|
-
SWITCH: 'switch',
|
|
18216
|
-
CHECKBOX: 'checkbox',
|
|
18217
|
-
RADIO_GROUP: 'radio-group',
|
|
18218
|
-
CHECKBOX_GROUP: 'checkbox-group',
|
|
18219
|
-
RANGE: 'range',
|
|
18220
|
-
// sadece value fırlatıyor
|
|
18221
|
-
FORM: 'form',
|
|
18222
|
-
FORM_GROUP: 'form-group',
|
|
18223
|
-
// *En vakit alacak => içinde select, autocomplete, listbox, treeview özellikleri var
|
|
18224
|
-
LIST: 'list',
|
|
18225
|
-
//
|
|
18226
|
-
COLORPICKER: 'colorpicker',
|
|
18227
|
-
// picker aslında tek komponent hepsi datetimepicker
|
|
18228
|
-
DATE_PICKER: 'date-picker',
|
|
18229
|
-
TIME_PICKER: 'time-picker',
|
|
18230
|
-
DATETIME_PICKER: 'datetime-picker',
|
|
18231
|
-
// silinecek komponentler
|
|
18232
|
-
SELECT: 'select',
|
|
18233
|
-
LISTBOX: 'listbox'
|
|
18234
|
-
},
|
|
18235
|
-
helpers: {
|
|
18236
|
-
randomId: function () {
|
|
18237
|
-
return Math.random().toString(16).slice(2, -1);
|
|
18238
|
-
},
|
|
18239
|
-
},
|
|
18240
|
-
};
|
|
18241
|
-
this._id = (Math.random() * 4).toString(16).replace('.', '');
|
|
18242
|
-
this.hidden = false;
|
|
18243
|
-
this.validation = false;
|
|
18244
|
-
this.name = "";
|
|
18245
|
-
this.value = undefined;
|
|
18246
|
-
this.autocomplete = false;
|
|
18247
|
-
}
|
|
18248
|
-
handleSubmit() {
|
|
18249
|
-
// if (lowercase(e.target.nodeName) === 'bcm-button') {
|
|
18250
|
-
// if (e.target.type === 'submit') {
|
|
18251
|
-
// this.submitFunction()
|
|
18252
|
-
// }
|
|
18253
|
-
// }
|
|
17781
|
+
index.registerInstance(this, hostRef);
|
|
17782
|
+
this.bcmOpen = index.createEvent(this, "bcm-open", 7);
|
|
17783
|
+
this._id = generate.Generate.UID();
|
|
17784
|
+
this.placement = bcm.Bcm$1.Placement["bottom-start"];
|
|
17785
|
+
this.trigger = bcm.Bcm$1.TriggerType.click;
|
|
17786
|
+
this.targetId = "";
|
|
17787
|
+
this.height = undefined;
|
|
17788
|
+
this.maxHeight = undefined;
|
|
17789
|
+
this.minHeight = "50px";
|
|
17790
|
+
this.isOpen = false;
|
|
18254
17791
|
}
|
|
18255
|
-
|
|
18256
|
-
|
|
18257
|
-
|
|
18258
|
-
|
|
18259
|
-
|
|
18260
|
-
await utils.delay(10);
|
|
18261
|
-
const usrFrmData = await this.userFormData();
|
|
18262
|
-
var formData = { isValid: true, formData: usrFrmData };
|
|
18263
|
-
if (this.name) {
|
|
18264
|
-
formData = Object.assign(Object.assign({}, formData), { formName: this.name });
|
|
18265
|
-
}
|
|
18266
|
-
if (this.isValid) {
|
|
18267
|
-
this.bcmForm.emit(formData);
|
|
18268
|
-
return formData;
|
|
17792
|
+
target() {
|
|
17793
|
+
const target = document.querySelectorAll(`[id="${this.targetId}"]`);
|
|
17794
|
+
if (target.length > 0) {
|
|
17795
|
+
target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
|
|
17796
|
+
return target[0];
|
|
18269
17797
|
}
|
|
18270
17798
|
else {
|
|
18271
|
-
|
|
18272
|
-
|
|
18273
|
-
|
|
18274
|
-
}
|
|
18275
|
-
this.bcmForm.emit(this.returnCaption);
|
|
18276
|
-
return this.returnCaption;
|
|
17799
|
+
// console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
|
|
17800
|
+
this.el.remove();
|
|
17801
|
+
return null;
|
|
18277
17802
|
}
|
|
18278
17803
|
}
|
|
18279
|
-
|
|
18280
|
-
|
|
17804
|
+
dismissEvent() {
|
|
17805
|
+
document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
|
|
18281
17806
|
}
|
|
18282
|
-
|
|
18283
|
-
|
|
18284
|
-
const validate = this.validation;
|
|
18285
|
-
this.validation = false;
|
|
18286
|
-
// debugger
|
|
18287
|
-
this.selector = this.el;
|
|
18288
|
-
await this.getInputs();
|
|
18289
|
-
if (data && ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
18290
|
-
for (const key of Object.keys(data)) {
|
|
18291
|
-
const item = this.inputs.find(item => item.name === key);
|
|
18292
|
-
if (item) {
|
|
18293
|
-
try {
|
|
18294
|
-
await item.set(data[key]);
|
|
18295
|
-
}
|
|
18296
|
-
catch (error) {
|
|
18297
|
-
console.log(item.nodeName, "set", error);
|
|
18298
|
-
}
|
|
18299
|
-
}
|
|
18300
|
-
}
|
|
18301
|
-
}
|
|
18302
|
-
this.validation = validate;
|
|
17807
|
+
checkDataDismiss(e) {
|
|
17808
|
+
generate.Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
|
|
18303
17809
|
}
|
|
18304
|
-
|
|
18305
|
-
|
|
18306
|
-
|
|
18307
|
-
|
|
18308
|
-
const inputsCache = this.inputs;
|
|
18309
|
-
await this.getInputs();
|
|
18310
|
-
((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.inputs.forEach(async (item) => {
|
|
18311
|
-
try {
|
|
18312
|
-
const value = await item.get();
|
|
18313
|
-
formData = Object.assign(Object.assign({}, formData), { [item.name]: value });
|
|
18314
|
-
}
|
|
18315
|
-
catch (error) {
|
|
18316
|
-
console.log(`${item.nodeName} get error`);
|
|
18317
|
-
}
|
|
17810
|
+
hideChildLinked() {
|
|
17811
|
+
this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
|
|
17812
|
+
var _a;
|
|
17813
|
+
(_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
|
|
18318
17814
|
});
|
|
18319
|
-
this.inputs = inputsCache;
|
|
18320
|
-
await utils.delay(10);
|
|
18321
|
-
return Promise.resolve(formData);
|
|
18322
17815
|
}
|
|
18323
|
-
|
|
18324
|
-
|
|
18325
|
-
this.
|
|
18326
|
-
|
|
18327
|
-
|
|
18328
|
-
|
|
18329
|
-
|
|
18330
|
-
|
|
18331
|
-
|
|
17816
|
+
calculatePosition() {
|
|
17817
|
+
const el = this.el;
|
|
17818
|
+
if (el && this.target()) {
|
|
17819
|
+
if (this.isOpen) {
|
|
17820
|
+
floatingUi.FloatingUI({
|
|
17821
|
+
ref: this.target(),
|
|
17822
|
+
floating: el,
|
|
17823
|
+
placement: this.placement,
|
|
17824
|
+
offset: 4,
|
|
17825
|
+
autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
|
|
17826
|
+
autoSize: true,
|
|
17827
|
+
style: {
|
|
17828
|
+
height: this.height,
|
|
17829
|
+
maxHeight: this.maxHeight,
|
|
17830
|
+
minHeight: this.minHeight,
|
|
17831
|
+
},
|
|
17832
|
+
});
|
|
18332
17833
|
}
|
|
18333
|
-
|
|
18334
|
-
|
|
17834
|
+
else {
|
|
17835
|
+
el.style.visibility = "hidden";
|
|
17836
|
+
el.style.opacity = "0";
|
|
18335
17837
|
}
|
|
18336
|
-
}
|
|
18337
|
-
await Promise.all(clear).then(() => {
|
|
18338
|
-
this.formData = {};
|
|
18339
|
-
this.inputs = [];
|
|
18340
|
-
this.duplicateInput = [];
|
|
18341
|
-
this.isValid = true;
|
|
18342
|
-
this.returnCaption = [];
|
|
18343
|
-
});
|
|
18344
|
-
await utils.delay(10);
|
|
18345
|
-
return Promise.resolve(true);
|
|
17838
|
+
}
|
|
18346
17839
|
}
|
|
18347
|
-
|
|
18348
|
-
|
|
18349
|
-
|
|
18350
|
-
|
|
18351
|
-
|
|
18352
|
-
|
|
18353
|
-
for (const item of this.inputs) {
|
|
18354
|
-
try {
|
|
18355
|
-
await item.resetCaption();
|
|
17840
|
+
init() {
|
|
17841
|
+
const target = this.target();
|
|
17842
|
+
if (target) {
|
|
17843
|
+
target.setAttribute("is-linked", this.el.id);
|
|
17844
|
+
if (!generate.Generate.getAncestor(target, "bcm-linked")) {
|
|
17845
|
+
this.el.setAttribute("main-linked", "true");
|
|
18356
17846
|
}
|
|
18357
|
-
|
|
18358
|
-
|
|
17847
|
+
else {
|
|
17848
|
+
this.el.removeAttribute("main-linked");
|
|
18359
17849
|
}
|
|
18360
17850
|
}
|
|
18361
|
-
await utils.delay(10);
|
|
18362
|
-
return Promise.resolve();
|
|
18363
17851
|
}
|
|
18364
|
-
|
|
18365
|
-
|
|
18366
|
-
|
|
18367
|
-
|
|
18368
|
-
|
|
17852
|
+
componentDidLoad() {
|
|
17853
|
+
this.init();
|
|
17854
|
+
document.body.appendChild(this.el);
|
|
17855
|
+
}
|
|
17856
|
+
onLinkedDataDismis() {
|
|
17857
|
+
// console.log('onLinkedDataDismis');
|
|
17858
|
+
this.hide(false);
|
|
17859
|
+
}
|
|
17860
|
+
onBcmFloatingIsHide(e) {
|
|
17861
|
+
if (e.detail.id === this._id) {
|
|
17862
|
+
this.hide(false);
|
|
18369
17863
|
}
|
|
18370
|
-
return true;
|
|
18371
17864
|
}
|
|
18372
|
-
async
|
|
18373
|
-
|
|
18374
|
-
|
|
18375
|
-
|
|
18376
|
-
|
|
17865
|
+
async show(wait = true) {
|
|
17866
|
+
wait && (await utils.delay(50));
|
|
17867
|
+
const target = this.target();
|
|
17868
|
+
if (target) {
|
|
17869
|
+
document.body.appendChild(this.el);
|
|
17870
|
+
target.setAttribute("linked-is-open", "true");
|
|
17871
|
+
this.isOpen = true;
|
|
17872
|
+
this.calculatePosition();
|
|
18377
17873
|
}
|
|
18378
|
-
|
|
18379
|
-
|
|
18380
|
-
// s-hn: Stencil private flag that contains host web component
|
|
18381
|
-
// https://github.com/ionic-team/stencil/blob/45388e95edb46ef357eb9ae37cd32bbb5bc1ed23/src/runtime/vdom/vdom-render.ts#L116
|
|
18382
|
-
const rootInputs = inputs.filter((input) => { var _a; return !input['s-hn'] || ((_a = input['s-hn']) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'BcmForm'; });
|
|
18383
|
-
// debugger;
|
|
18384
|
-
for (const item of rootInputs) {
|
|
18385
|
-
if (stringHelper.StringHelper.lowercase(item.nodeName) == "bcm-checkbox-group") {
|
|
18386
|
-
let checkboxs = item.querySelectorAll("bcm-checkbox");
|
|
18387
|
-
if (checkboxs) {
|
|
18388
|
-
for (const checkbox of checkboxs) {
|
|
18389
|
-
this.duplicateInput.push(checkbox.name);
|
|
18390
|
-
}
|
|
18391
|
-
}
|
|
18392
|
-
}
|
|
18393
|
-
if (stringHelper.StringHelper.lowercase(item.nodeName) == "bcm-form") {
|
|
18394
|
-
const groupInputs = Array.from(item.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
|
|
18395
|
-
let itemObject = {};
|
|
18396
|
-
for (const element of groupInputs) {
|
|
18397
|
-
var name = element.name;
|
|
18398
|
-
var value = element.value;
|
|
18399
|
-
itemObject = Object.assign(Object.assign({}, itemObject), { [name]: value });
|
|
18400
|
-
this.duplicateInput.push(element.name);
|
|
18401
|
-
}
|
|
18402
|
-
item.value = itemObject;
|
|
18403
|
-
let checkboxs = item.querySelectorAll("bcm-checkbox");
|
|
18404
|
-
if (checkboxs) {
|
|
18405
|
-
for (const checkbox of checkboxs) {
|
|
18406
|
-
this.duplicateInput.push(checkbox.name);
|
|
18407
|
-
}
|
|
18408
|
-
}
|
|
18409
|
-
}
|
|
17874
|
+
else {
|
|
17875
|
+
this.hide(false);
|
|
18410
17876
|
}
|
|
18411
|
-
|
|
18412
|
-
this.inputs = rootInputs;
|
|
17877
|
+
return this.isOpen;
|
|
18413
17878
|
}
|
|
18414
|
-
|
|
18415
|
-
|
|
18416
|
-
|
|
18417
|
-
|
|
18418
|
-
|
|
18419
|
-
|
|
18420
|
-
|
|
18421
|
-
return item.value.time */
|
|
18422
|
-
default:
|
|
18423
|
-
return item.value;
|
|
17879
|
+
async hide(wait = true) {
|
|
17880
|
+
wait && (await utils.delay(50));
|
|
17881
|
+
const target = this.target();
|
|
17882
|
+
if (target) {
|
|
17883
|
+
target.removeAttribute("linked-is-open");
|
|
17884
|
+
this.hideChildLinked();
|
|
17885
|
+
this.isOpen = false;
|
|
18424
17886
|
}
|
|
17887
|
+
return this.isOpen;
|
|
18425
17888
|
}
|
|
18426
|
-
|
|
18427
|
-
return
|
|
18428
|
-
}
|
|
18429
|
-
isGroupComponent(item) {
|
|
18430
|
-
return ['bcm-checkbox-group'].includes(item.toLowerCase());
|
|
18431
|
-
}
|
|
18432
|
-
isListComponent(item) {
|
|
18433
|
-
return ['bcm-list'].includes(item.toLowerCase());
|
|
17889
|
+
async toggle(wait = true) {
|
|
17890
|
+
return this.isOpen ? await this.hide(wait) : await this.show(wait);
|
|
18434
17891
|
}
|
|
18435
|
-
|
|
18436
|
-
this.
|
|
18437
|
-
|
|
18438
|
-
|
|
18439
|
-
|
|
18440
|
-
|
|
18441
|
-
|
|
18442
|
-
|
|
18443
|
-
|
|
18444
|
-
|
|
18445
|
-
? await item.getInput() && item
|
|
18446
|
-
: item;
|
|
18447
|
-
// input.caption = ''
|
|
18448
|
-
// input.captionType = ''
|
|
18449
|
-
if (this.validation) {
|
|
18450
|
-
let valid = null;
|
|
18451
|
-
// if (isListComponent) {
|
|
18452
|
-
// valid = !(input.value && input.value.length > 0) && validate.required(input.value)
|
|
18453
|
-
// } else
|
|
18454
|
-
if (isWrapperComponent) {
|
|
18455
|
-
const isPickerValid = await wrapperComponent.isValid();
|
|
18456
|
-
valid = validate.required(input.value, isPickerValid);
|
|
18457
|
-
if (valid) {
|
|
18458
|
-
if (input.value instanceof Object) {
|
|
18459
|
-
if (input.value["isValid"] == false) {
|
|
18460
|
-
valid = validate.required("", isPickerValid);
|
|
18461
|
-
}
|
|
18462
|
-
}
|
|
18463
|
-
else {
|
|
18464
|
-
valid = validate.required(input.value, isPickerValid);
|
|
18465
|
-
}
|
|
18466
|
-
}
|
|
18467
|
-
}
|
|
18468
|
-
else if (isGroupComponent) {
|
|
18469
|
-
const childsCheckbox = utils.getChildElements(input, 'bcm-checkbox:not(#bcm-indeterminate-element)');
|
|
18470
|
-
if (childsCheckbox && childsCheckbox.length > 0) {
|
|
18471
|
-
for (const element of childsCheckbox) {
|
|
18472
|
-
if (element && element.required === true) {
|
|
18473
|
-
valid = validate.required(element.checked);
|
|
18474
|
-
if (!valid['valid']) {
|
|
18475
|
-
element.noCaption = false;
|
|
18476
|
-
element.captionError = valid['message'];
|
|
18477
|
-
element.captionType = valid['type'];
|
|
18478
|
-
}
|
|
18479
|
-
else {
|
|
18480
|
-
element.noCaption = input.noCaption;
|
|
18481
|
-
element.captionError = null;
|
|
18482
|
-
element.captionType = "default";
|
|
18483
|
-
}
|
|
18484
|
-
}
|
|
18485
|
-
}
|
|
18486
|
-
}
|
|
18487
|
-
}
|
|
18488
|
-
else {
|
|
18489
|
-
valid = validate.required(input.value);
|
|
18490
|
-
}
|
|
18491
|
-
if (input.required) {
|
|
18492
|
-
if (!valid['valid']) {
|
|
18493
|
-
input.captionError = valid['message'];
|
|
18494
|
-
input.captionType = valid['type'];
|
|
18495
|
-
}
|
|
18496
|
-
else {
|
|
18497
|
-
input.captionError = null;
|
|
18498
|
-
input.captionType = "default";
|
|
18499
|
-
}
|
|
18500
|
-
await utils.delay(10);
|
|
18501
|
-
const selfValidation = validate.selfValidation(input);
|
|
18502
|
-
if (valid['valid']) {
|
|
18503
|
-
if (!selfValidation['valid']) {
|
|
18504
|
-
input.captionError = selfValidation['message'];
|
|
18505
|
-
input.captionType = selfValidation['type'];
|
|
18506
|
-
}
|
|
18507
|
-
}
|
|
18508
|
-
}
|
|
18509
|
-
let name = input.name;
|
|
18510
|
-
let value = input.captionError;
|
|
18511
|
-
!input.hidden && input.captionType == 'error' && (this.returnCaption = [...Array.from(this.returnCaption), { [name]: value }],
|
|
18512
|
-
this.isValid = false);
|
|
18513
|
-
}
|
|
18514
|
-
if (input.name && !this.duplicateInput.includes(input.name)) {
|
|
18515
|
-
var itemValue = this.getItemValue(input);
|
|
18516
|
-
if (!itemValue || itemValue == undefined || itemValue == null) {
|
|
18517
|
-
itemValue = null;
|
|
18518
|
-
}
|
|
18519
|
-
this.formData[input.name] = itemValue;
|
|
18520
|
-
}
|
|
17892
|
+
clickListener(e) {
|
|
17893
|
+
if (!this.target())
|
|
17894
|
+
return;
|
|
17895
|
+
const isTarget = generate.Generate.findEventPath(e, this.target());
|
|
17896
|
+
const isSelf = generate.Generate.findEventPath(e, this.el);
|
|
17897
|
+
const isLinked = generate.Generate.findEventPathWithNodeName(e, "BCM-LINKED");
|
|
17898
|
+
if (!isTarget && !isSelf && !isLinked) {
|
|
17899
|
+
this.hide();
|
|
17900
|
+
this.bcmOpen.emit(this.isOpen);
|
|
17901
|
+
return;
|
|
18521
17902
|
}
|
|
18522
|
-
|
|
18523
|
-
|
|
18524
|
-
|
|
18525
|
-
|
|
18526
|
-
|
|
18527
|
-
|
|
18528
|
-
if (isWrapperComponent) {
|
|
18529
|
-
target = e.target.getInput && await e.target.getInput() || e.target;
|
|
18530
|
-
}
|
|
18531
|
-
else if (isGroupComponent) {
|
|
18532
|
-
let req = false;
|
|
18533
|
-
const childsCheckbox = utils.getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
|
|
18534
|
-
childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
|
|
18535
|
-
if (element && element.required === true) {
|
|
18536
|
-
req = true;
|
|
18537
|
-
}
|
|
18538
|
-
}));
|
|
18539
|
-
target = Object.assign(Object.assign({}, e.target), { required: req });
|
|
17903
|
+
if (this.isOpen) {
|
|
17904
|
+
isTarget && this.hide(false);
|
|
17905
|
+
isSelf && this.checkDataDismiss(e);
|
|
17906
|
+
if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
|
|
17907
|
+
this.dismissEvent();
|
|
17908
|
+
}
|
|
18540
17909
|
}
|
|
18541
17910
|
else {
|
|
18542
|
-
|
|
18543
|
-
}
|
|
18544
|
-
const value = e.target.value;
|
|
18545
|
-
const wrapperComponent = isWrapperComponent && e.target;
|
|
18546
|
-
var isPickerValid;
|
|
18547
|
-
if (isWrapperComponent) {
|
|
18548
|
-
isPickerValid = await wrapperComponent.isValid();
|
|
18549
|
-
}
|
|
18550
|
-
const tick = setTimeout(() => {
|
|
18551
|
-
if (target.required) {
|
|
18552
|
-
let valid = null;
|
|
18553
|
-
if (isWrapperComponent) {
|
|
18554
|
-
valid = validate.required(value, isPickerValid);
|
|
18555
|
-
if (valid) {
|
|
18556
|
-
if (value instanceof Object) {
|
|
18557
|
-
if (value["isValid"] == false) {
|
|
18558
|
-
valid = validate.required("", isPickerValid);
|
|
18559
|
-
}
|
|
18560
|
-
}
|
|
18561
|
-
else {
|
|
18562
|
-
valid = validate.required(value, isPickerValid);
|
|
18563
|
-
}
|
|
18564
|
-
}
|
|
18565
|
-
}
|
|
18566
|
-
else if (isGroupComponent) {
|
|
18567
|
-
const childsCheckbox = utils.getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
|
|
18568
|
-
childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
|
|
18569
|
-
if (element && element.required === true) {
|
|
18570
|
-
valid = validate.required(element.checked);
|
|
18571
|
-
if (!valid['valid']) {
|
|
18572
|
-
element.noCaption = false;
|
|
18573
|
-
element.captionError = valid['message'];
|
|
18574
|
-
element.captionType = valid['type'];
|
|
18575
|
-
}
|
|
18576
|
-
else {
|
|
18577
|
-
element.noCaption = e.target.noCaption;
|
|
18578
|
-
element.captionError = null;
|
|
18579
|
-
element.captionType = "default";
|
|
18580
|
-
}
|
|
18581
|
-
}
|
|
18582
|
-
}));
|
|
18583
|
-
}
|
|
18584
|
-
else {
|
|
18585
|
-
valid = validate.required(value);
|
|
18586
|
-
}
|
|
18587
|
-
if (valid['valid']) {
|
|
18588
|
-
target.captionError = null;
|
|
18589
|
-
target.captionType = null;
|
|
18590
|
-
}
|
|
18591
|
-
else {
|
|
18592
|
-
target.captionError = valid['message'];
|
|
18593
|
-
target.captionType = valid['type'];
|
|
18594
|
-
}
|
|
18595
|
-
}
|
|
18596
|
-
clearTimeout(tick);
|
|
18597
|
-
});
|
|
18598
|
-
this.value = await this.userFormData();
|
|
17911
|
+
isTarget && this.show(false);
|
|
17912
|
+
}
|
|
18599
17913
|
}
|
|
18600
|
-
|
|
18601
|
-
|
|
18602
|
-
return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("form", { class: "bcm-form", autocomplete: this.autocomplete ? "on" : "off" }, index$1.h("slot", null))));
|
|
17914
|
+
resizeListener() {
|
|
17915
|
+
this.calculatePosition();
|
|
18603
17916
|
}
|
|
18604
|
-
|
|
18605
|
-
|
|
18606
|
-
|
|
18607
|
-
|
|
18608
|
-
|
|
18609
|
-
|
|
18610
|
-
|
|
18611
|
-
|
|
18612
|
-
|
|
18613
|
-
var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
18614
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
18615
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
18616
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
18617
|
-
else
|
|
18618
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
18619
|
-
if (d = decorators[i])
|
|
18620
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18621
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
18622
|
-
};
|
|
18623
|
-
const BcmIcon = class {
|
|
18624
|
-
constructor(hostRef) {
|
|
18625
|
-
index$1.registerInstance(this, hostRef);
|
|
18626
|
-
this.hidden = false;
|
|
18627
|
-
this.icon = undefined;
|
|
17917
|
+
scrollListener() {
|
|
17918
|
+
this.calculatePosition();
|
|
17919
|
+
}
|
|
17920
|
+
wheelListener() {
|
|
17921
|
+
this.calculatePosition();
|
|
17922
|
+
}
|
|
17923
|
+
watchIsOpen() {
|
|
17924
|
+
this.bcmOpen.emit(this.isOpen);
|
|
18628
17925
|
}
|
|
18629
17926
|
render() {
|
|
18630
|
-
const {
|
|
18631
|
-
return (index
|
|
17927
|
+
const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
|
|
17928
|
+
return (index.h(index.Host, { class: "tw-invisible tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-block tw-overscroll-contain tw-scroll-smooth tw-rounded tw-bg-white tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, index.h("slot", null)));
|
|
18632
17929
|
}
|
|
18633
|
-
get el() { return index
|
|
17930
|
+
get el() { return index.getElement(this); }
|
|
17931
|
+
static get watchers() { return {
|
|
17932
|
+
"isOpen": ["watchIsOpen"]
|
|
17933
|
+
}; }
|
|
18634
17934
|
};
|
|
18635
|
-
__decorate
|
|
17935
|
+
__decorate([
|
|
18636
17936
|
isLoadDecorator.IsLoad()
|
|
18637
|
-
],
|
|
18638
|
-
BcmIcon.style = iconCss;
|
|
18639
|
-
|
|
18640
|
-
const inputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea .bcm-input-element{white-space:normal}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
|
|
18641
|
-
|
|
18642
|
-
var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
18643
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
18644
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
18645
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
18646
|
-
else
|
|
18647
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
18648
|
-
if (d = decorators[i])
|
|
18649
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18650
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
18651
|
-
};
|
|
18652
|
-
const BcmInput = class {
|
|
18653
|
-
constructor(hostRef) {
|
|
18654
|
-
index$1.registerInstance(this, hostRef);
|
|
18655
|
-
this.focus = index$1.createEvent(this, "bcm-focus", 7);
|
|
18656
|
-
this.blur = index$1.createEvent(this, "bcm-blur", 7);
|
|
18657
|
-
this.clear = index$1.createEvent(this, "bcm-clear", 7);
|
|
18658
|
-
this.change = index$1.createEvent(this, "bcm-change", 7);
|
|
18659
|
-
this.input = index$1.createEvent(this, "bcm-input", 7);
|
|
18660
|
-
this.isBlur = false;
|
|
18661
|
-
this._id = generate.Generate.UID();
|
|
18662
|
-
this._internal_id = generate.Generate.UID();
|
|
18663
|
-
this.value = '';
|
|
18664
|
-
this.size = bcm.Bcm.Size.medium;
|
|
18665
|
-
this.label = undefined;
|
|
18666
|
-
this.pattern = undefined;
|
|
18667
|
-
this.tooltip = undefined;
|
|
18668
|
-
this.placeholder = undefined;
|
|
18669
|
-
this.disabled = false;
|
|
18670
|
-
this.readonly = false;
|
|
18671
|
-
this.clearable = false;
|
|
18672
|
-
this.autocomplete = false;
|
|
18673
|
-
this.name = undefined;
|
|
18674
|
-
this.type = bcm.Bcm.InputType.text;
|
|
18675
|
-
this.hidden = false;
|
|
18676
|
-
this.required = false;
|
|
18677
|
-
this.fullWidth = false;
|
|
18678
|
-
this.noDefaultIcon = undefined;
|
|
18679
|
-
this.disableWatchValue = false // datetimepicker
|
|
18680
|
-
;
|
|
18681
|
-
this.passwordToggle = false // type password
|
|
18682
|
-
;
|
|
18683
|
-
this.maxLength = null;
|
|
18684
|
-
this.unitPrefix = null;
|
|
18685
|
-
this.unit = undefined;
|
|
18686
|
-
this.decimal = true;
|
|
18687
|
-
this.min = undefined;
|
|
18688
|
-
this.max = undefined;
|
|
18689
|
-
this.step = undefined;
|
|
18690
|
-
this.caption = undefined;
|
|
18691
|
-
this.noCaption = false;
|
|
18692
|
-
this.captionType = bcm.Bcm.Status.default;
|
|
18693
|
-
this.captionError = undefined;
|
|
18694
|
-
this.customErrorMessage = undefined;
|
|
18695
|
-
this._prefix = undefined;
|
|
18696
|
-
this._suffix = undefined;
|
|
18697
|
-
this.captionCache = undefined;
|
|
18698
|
-
this.captionTypeCache = undefined;
|
|
18699
|
-
this.inValid = false;
|
|
18700
|
-
this.valueCache = '';
|
|
18701
|
-
this.focused = false;
|
|
18702
|
-
this.isPasswordVisible = false;
|
|
18703
|
-
}
|
|
18704
|
-
connectedCallback() {
|
|
18705
|
-
this.valueCache = this.value;
|
|
18706
|
-
this.captionCache = this.caption;
|
|
18707
|
-
this.captionTypeCache = this.captionType;
|
|
18708
|
-
}
|
|
18709
|
-
componentWillRender() {
|
|
18710
|
-
const { type, isBlur, value } = this;
|
|
18711
|
-
if (value) {
|
|
18712
|
-
this.value.length > 0 && (this.checkPattern());
|
|
18713
|
-
switch (type) {
|
|
18714
|
-
case "number":
|
|
18715
|
-
{
|
|
18716
|
-
!this.checkValid("number") && (this.validationRange());
|
|
18717
|
-
}
|
|
18718
|
-
break;
|
|
18719
|
-
case "email":
|
|
18720
|
-
{
|
|
18721
|
-
isBlur && (this.checkValid("email"));
|
|
18722
|
-
}
|
|
18723
|
-
break;
|
|
18724
|
-
case "tel":
|
|
18725
|
-
{
|
|
18726
|
-
isBlur && (this.checkValid("phone"));
|
|
18727
|
-
}
|
|
18728
|
-
break;
|
|
18729
|
-
}
|
|
18730
|
-
}
|
|
18731
|
-
else {
|
|
18732
|
-
!this.required && (this.resetCaption());
|
|
18733
|
-
}
|
|
18734
|
-
}
|
|
18735
|
-
async onBcmFocus() {
|
|
18736
|
-
this.inputElement.focus();
|
|
18737
|
-
}
|
|
18738
|
-
async onBcmBlur() {
|
|
18739
|
-
this.inputElement.blur();
|
|
18740
|
-
}
|
|
18741
|
-
async onBcmSelect() {
|
|
18742
|
-
this.inputElement.select();
|
|
18743
|
-
}
|
|
18744
|
-
async set(data) {
|
|
18745
|
-
await this.setValue(data);
|
|
18746
|
-
}
|
|
18747
|
-
async get() {
|
|
18748
|
-
return this.value || null;
|
|
18749
|
-
}
|
|
18750
|
-
async setValue(value) {
|
|
18751
|
-
this.inputElement.value = value;
|
|
18752
|
-
this.handleChange();
|
|
18753
|
-
return value;
|
|
18754
|
-
}
|
|
18755
|
-
async setClear() {
|
|
18756
|
-
this.inputElement.value = '';
|
|
18757
|
-
this.value = '';
|
|
18758
|
-
await utils.delay(10);
|
|
18759
|
-
return Promise.resolve();
|
|
18760
|
-
}
|
|
18761
|
-
async resetCaption() {
|
|
18762
|
-
await utils.delay(10);
|
|
18763
|
-
this.caption = this.captionCache;
|
|
18764
|
-
this.captionType = this.captionTypeCache;
|
|
18765
|
-
this.captionError = null;
|
|
18766
|
-
this.inValid = false;
|
|
18767
|
-
await utils.delay(10);
|
|
18768
|
-
return Promise.resolve();
|
|
18769
|
-
}
|
|
18770
|
-
async getValue() {
|
|
18771
|
-
return this.value;
|
|
18772
|
-
}
|
|
18773
|
-
watchValue() {
|
|
18774
|
-
if (!this.disableWatchValue && this.type != "number") {
|
|
18775
|
-
this.handleChange();
|
|
18776
|
-
}
|
|
18777
|
-
}
|
|
18778
|
-
listenKeyDown(e) {
|
|
18779
|
-
if (!this.disabled && !this.readonly) {
|
|
18780
|
-
this.onBcmFocus();
|
|
18781
|
-
if (this.type == "number") {
|
|
18782
|
-
var which = e.which || 0;
|
|
18783
|
-
var key = e.key;
|
|
18784
|
-
if (which == 38) { // up arrow
|
|
18785
|
-
e.preventDefault(),
|
|
18786
|
-
this.stepUpOrDown('up');
|
|
18787
|
-
}
|
|
18788
|
-
if (which == 40) { // down arrow
|
|
18789
|
-
e.preventDefault(),
|
|
18790
|
-
this.stepUpOrDown('down');
|
|
18791
|
-
}
|
|
18792
|
-
if ((which == 190 || which == 110 || key == ".") && this.value.indexOf(".") > -1) { //.
|
|
18793
|
-
e.preventDefault();
|
|
18794
|
-
}
|
|
18795
|
-
if ((which == 189 || which == 109 || key == "-")) { //-
|
|
18796
|
-
if (this.value.charAt(0) == '-' || this.value.indexOf("-") > -1) {
|
|
18797
|
-
e.preventDefault();
|
|
18798
|
-
}
|
|
18799
|
-
}
|
|
18800
|
-
}
|
|
18801
|
-
}
|
|
18802
|
-
}
|
|
18803
|
-
handleFocus() {
|
|
18804
|
-
this.focused = true;
|
|
18805
|
-
this.focus.emit();
|
|
18806
|
-
this.whatchHasFocus();
|
|
18807
|
-
}
|
|
18808
|
-
handleBlur() {
|
|
18809
|
-
this.focused = false;
|
|
18810
|
-
this.isBlur = true;
|
|
18811
|
-
this.whatchHasFocus();
|
|
18812
|
-
this.blur.emit();
|
|
18813
|
-
}
|
|
18814
|
-
handleChange() {
|
|
18815
|
-
this.valueSync();
|
|
18816
|
-
}
|
|
18817
|
-
handleInput() {
|
|
18818
|
-
if (this.type == "number" && this.maxLength) {
|
|
18819
|
-
const inputValue = this.inputElement.value;
|
|
18820
|
-
if (inputValue && inputValue.length > 0 && inputValue.length > this.maxLength) {
|
|
18821
|
-
this.inputElement.value = inputValue.substring(0, this.maxLength);
|
|
18822
|
-
}
|
|
18823
|
-
}
|
|
18824
|
-
this.valueSync();
|
|
18825
|
-
}
|
|
18826
|
-
valueSync() {
|
|
18827
|
-
if (this.value != this.inputElement.value) {
|
|
18828
|
-
this.value = this.inputElement.value;
|
|
18829
|
-
this.change.emit(this.value);
|
|
18830
|
-
return true;
|
|
18831
|
-
}
|
|
18832
|
-
this.input.emit(this.value);
|
|
18833
|
-
return false;
|
|
18834
|
-
}
|
|
18835
|
-
handleClear(e) {
|
|
18836
|
-
this.inputElement.value = '';
|
|
18837
|
-
this.value = '';
|
|
18838
|
-
this.inputElement.focus();
|
|
18839
|
-
this.clear.emit(e);
|
|
18840
|
-
this.change.emit(this.value);
|
|
18841
|
-
e.stopPropagation();
|
|
18842
|
-
}
|
|
18843
|
-
changePasswordVisibility() {
|
|
18844
|
-
this.isPasswordVisible = !this.isPasswordVisible;
|
|
18845
|
-
}
|
|
18846
|
-
setCaption(caption = null, captionType = null) {
|
|
18847
|
-
this.caption = caption || this.captionCache;
|
|
18848
|
-
this.captionType = captionType || this.captionTypeCache;
|
|
18849
|
-
this.captionError = captionType == "error" ? caption : null;
|
|
18850
|
-
}
|
|
18851
|
-
stepUpOrDown(type) {
|
|
18852
|
-
if (!this.inValid && !this.disabled && !this.readonly) {
|
|
18853
|
-
let step = +(this.step) || 1;
|
|
18854
|
-
let val = +(this.value);
|
|
18855
|
-
if (type == 'up') {
|
|
18856
|
-
val = +(val + step);
|
|
18857
|
-
}
|
|
18858
|
-
else {
|
|
18859
|
-
val = +(val - step);
|
|
18860
|
-
}
|
|
18861
|
-
this.value = val.toString();
|
|
18862
|
-
this.change.emit(this.value);
|
|
18863
|
-
}
|
|
18864
|
-
}
|
|
18865
|
-
validationRange() {
|
|
18866
|
-
const { min, max, value } = this;
|
|
18867
|
-
if (value) {
|
|
18868
|
-
if (min && max) {
|
|
18869
|
-
if (value < min || value > max) {
|
|
18870
|
-
this.setCaption(stringHelper.StringHelper.getMessage('between', [min, max]), "error");
|
|
18871
|
-
return false;
|
|
18872
|
-
}
|
|
18873
|
-
}
|
|
18874
|
-
else if (min) {
|
|
18875
|
-
if (value < min) {
|
|
18876
|
-
this.setCaption(stringHelper.StringHelper.getMessage('min', [min]), "error");
|
|
18877
|
-
return false;
|
|
18878
|
-
}
|
|
18879
|
-
}
|
|
18880
|
-
else if (max) {
|
|
18881
|
-
if (value > max) {
|
|
18882
|
-
this.setCaption(stringHelper.StringHelper.getMessage('max', [max]), "error");
|
|
18883
|
-
return false;
|
|
18884
|
-
}
|
|
18885
|
-
}
|
|
18886
|
-
}
|
|
18887
|
-
this.setCaption();
|
|
18888
|
-
return true;
|
|
18889
|
-
}
|
|
18890
|
-
checkPattern() {
|
|
18891
|
-
const { pattern, value } = this;
|
|
18892
|
-
if (pattern) {
|
|
18893
|
-
if (validators.Validators.pattern(value, pattern)) {
|
|
18894
|
-
this.setCaption();
|
|
18895
|
-
this.inValid = false;
|
|
18896
|
-
}
|
|
18897
|
-
else {
|
|
18898
|
-
this.setCaption(stringHelper.StringHelper.getMessage('pattern'), "error");
|
|
18899
|
-
this.inValid = true;
|
|
18900
|
-
}
|
|
18901
|
-
}
|
|
18902
|
-
}
|
|
18903
|
-
checkValid(type) {
|
|
18904
|
-
const { value } = this;
|
|
18905
|
-
if (validators.Validators.isValidate(value, type)) {
|
|
18906
|
-
this.setCaption();
|
|
18907
|
-
this.inValid = false;
|
|
18908
|
-
}
|
|
18909
|
-
else {
|
|
18910
|
-
this.setCaption(stringHelper.StringHelper.getMessage(type), "error");
|
|
18911
|
-
this.inValid = true;
|
|
18912
|
-
}
|
|
18913
|
-
return this.inValid;
|
|
18914
|
-
}
|
|
18915
|
-
whatchHasFocus() {
|
|
18916
|
-
const { type, focused, valueCache, inValid } = this;
|
|
18917
|
-
if (type == bcm.Bcm.InputType.number && inValid) {
|
|
18918
|
-
console.log("whatchHasFocus");
|
|
18919
|
-
if (focused) {
|
|
18920
|
-
this.value = '';
|
|
18921
|
-
}
|
|
18922
|
-
else {
|
|
18923
|
-
if (!stringHelper.StringHelper.isNullOrEmpty(this.value)) {
|
|
18924
|
-
this.value = this.value ? this.fixToNumber(this.value) : '';
|
|
18925
|
-
}
|
|
18926
|
-
else {
|
|
18927
|
-
this.value = valueCache;
|
|
18928
|
-
}
|
|
18929
|
-
}
|
|
18930
|
-
}
|
|
18931
|
-
}
|
|
18932
|
-
fixToNumber(val) {
|
|
18933
|
-
if (val) {
|
|
18934
|
-
const decLen = numberHelper.NumberHelper.getDecimalLength(this.step);
|
|
18935
|
-
return decLen > 0 ? numberHelper.NumberHelper.parseFloatFixed(val, decLen) : val;
|
|
18936
|
-
}
|
|
18937
|
-
return val;
|
|
18938
|
-
}
|
|
18939
|
-
eyeDropper() {
|
|
18940
|
-
const eyeDropper = new window.EyeDropper();
|
|
18941
|
-
eyeDropper
|
|
18942
|
-
.open()
|
|
18943
|
-
.then((color) => {
|
|
18944
|
-
console.log("color: ", color.sRGBHex);
|
|
18945
|
-
this.setValue(color.sRGBHex);
|
|
18946
|
-
})
|
|
18947
|
-
.catch((error) => {
|
|
18948
|
-
if (error.name === "NotAllowedError") {
|
|
18949
|
-
console.log("Permission to access sensor was denied.");
|
|
18950
|
-
}
|
|
18951
|
-
else if (error.name === "NotSupportedError") {
|
|
18952
|
-
console.log("Sensor not supported.");
|
|
18953
|
-
}
|
|
18954
|
-
});
|
|
18955
|
-
}
|
|
18956
|
-
isEyeDropperSupported() {
|
|
18957
|
-
return typeof window !== "undefined" && "EyeDropper" in window;
|
|
18958
|
-
}
|
|
18959
|
-
toggleLinked() {
|
|
18960
|
-
const linkedElement = document.getElementById(`${this._id}-linked`);
|
|
18961
|
-
if (linkedElement) {
|
|
18962
|
-
linkedElement.toggle();
|
|
18963
|
-
}
|
|
18964
|
-
}
|
|
18965
|
-
render() {
|
|
18966
|
-
const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
|
|
18967
|
-
const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
|
|
18968
|
-
const hostClasses = index$2.classnames('bcm-input', `bcm-input__container--${size}`, {
|
|
18969
|
-
hidden,
|
|
18970
|
-
// 'no-margin': noMargin,
|
|
18971
|
-
'full-width': fullWidth
|
|
18972
|
-
});
|
|
18973
|
-
return (index$1.h(index$1.Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && index$1.h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), index$1.h(inputTemplate.InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), index$1.h(captionTemplate.CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == bcm.Bcm.InputType.color &&
|
|
18974
|
-
index$1.h("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, index$1.h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
|
|
18975
|
-
}
|
|
18976
|
-
static get watchers() { return {
|
|
18977
|
-
"value": ["watchValue"]
|
|
18978
|
-
}; }
|
|
18979
|
-
};
|
|
18980
|
-
__decorate$8([
|
|
18981
|
-
isLoadDecorator.IsLoad()
|
|
18982
|
-
], BcmInput.prototype, "inputElement", void 0);
|
|
18983
|
-
BcmInput.style = inputCss;
|
|
18984
|
-
|
|
18985
|
-
const labelCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}";
|
|
18986
|
-
|
|
18987
|
-
var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
18988
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
18989
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
18990
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
18991
|
-
else
|
|
18992
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
18993
|
-
if (d = decorators[i])
|
|
18994
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18995
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
18996
|
-
};
|
|
18997
|
-
const BcmLabel = class {
|
|
18998
|
-
constructor(hostRef) {
|
|
18999
|
-
index$1.registerInstance(this, hostRef);
|
|
19000
|
-
this._id = generate.Generate.UID();
|
|
19001
|
-
this.required = false;
|
|
19002
|
-
this.value = undefined;
|
|
19003
|
-
this.size = "medium";
|
|
19004
|
-
this.form = undefined;
|
|
19005
|
-
this.htmlFor = undefined;
|
|
19006
|
-
this.hidden = false;
|
|
19007
|
-
this.type = bcm.Bcm.Status.default;
|
|
19008
|
-
this.tooltip = undefined;
|
|
19009
|
-
}
|
|
19010
|
-
render() {
|
|
19011
|
-
const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
|
|
19012
|
-
const hostClasses = index$2.classnames('bcm-label', { hidden });
|
|
19013
|
-
const Label = (index$1.h(labelTemplate.LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
|
|
19014
|
-
return (index$1.h(index$1.Host, { class: hostClasses }, Label, tooltip && (index$1.h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, index$1.h("bcm-icon", { icon: "far fa-question-circle" })))));
|
|
19015
|
-
}
|
|
19016
|
-
get el() { return index$1.getElement(this); }
|
|
19017
|
-
};
|
|
19018
|
-
__decorate$7([
|
|
19019
|
-
isLoadDecorator.IsLoad()
|
|
19020
|
-
], BcmLabel.prototype, "el", void 0);
|
|
19021
|
-
BcmLabel.style = labelCss;
|
|
19022
|
-
|
|
19023
|
-
var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
19024
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
19025
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
19026
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
19027
|
-
else
|
|
19028
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
19029
|
-
if (d = decorators[i])
|
|
19030
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
19031
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
19032
|
-
};
|
|
19033
|
-
const BcmLinked = class {
|
|
19034
|
-
constructor(hostRef) {
|
|
19035
|
-
index$1.registerInstance(this, hostRef);
|
|
19036
|
-
this.bcmOpen = index$1.createEvent(this, "bcm-open", 7);
|
|
19037
|
-
this._id = generate.Generate.UID();
|
|
19038
|
-
this.placement = bcm.Bcm$1.Placement["bottom-start"];
|
|
19039
|
-
this.trigger = bcm.Bcm$1.TriggerType.click;
|
|
19040
|
-
this.targetId = "";
|
|
19041
|
-
this.height = undefined;
|
|
19042
|
-
this.maxHeight = undefined;
|
|
19043
|
-
this.minHeight = "50px";
|
|
19044
|
-
this.isOpen = false;
|
|
19045
|
-
}
|
|
19046
|
-
target() {
|
|
19047
|
-
const target = document.querySelectorAll(`[id="${this.targetId}"]`);
|
|
19048
|
-
if (target.length > 0) {
|
|
19049
|
-
target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
|
|
19050
|
-
return target[0];
|
|
19051
|
-
}
|
|
19052
|
-
else {
|
|
19053
|
-
// console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
|
|
19054
|
-
this.el.remove();
|
|
19055
|
-
return null;
|
|
19056
|
-
}
|
|
19057
|
-
}
|
|
19058
|
-
dismissEvent() {
|
|
19059
|
-
document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
|
|
19060
|
-
}
|
|
19061
|
-
checkDataDismiss(e) {
|
|
19062
|
-
generate.Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
|
|
19063
|
-
}
|
|
19064
|
-
hideChildLinked() {
|
|
19065
|
-
this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
|
|
19066
|
-
var _a;
|
|
19067
|
-
(_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
|
|
19068
|
-
});
|
|
19069
|
-
}
|
|
19070
|
-
calculatePosition() {
|
|
19071
|
-
const el = this.el;
|
|
19072
|
-
if (el && this.target()) {
|
|
19073
|
-
if (this.isOpen) {
|
|
19074
|
-
floatingUi.FloatingUI({
|
|
19075
|
-
ref: this.target(),
|
|
19076
|
-
floating: el,
|
|
19077
|
-
placement: this.placement,
|
|
19078
|
-
offset: 4,
|
|
19079
|
-
autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
|
|
19080
|
-
autoSize: true,
|
|
19081
|
-
style: {
|
|
19082
|
-
height: this.height,
|
|
19083
|
-
maxHeight: this.maxHeight,
|
|
19084
|
-
minHeight: this.minHeight,
|
|
19085
|
-
},
|
|
19086
|
-
});
|
|
19087
|
-
}
|
|
19088
|
-
else {
|
|
19089
|
-
el.style.visibility = "hidden";
|
|
19090
|
-
el.style.opacity = "0";
|
|
19091
|
-
}
|
|
19092
|
-
}
|
|
19093
|
-
}
|
|
19094
|
-
init() {
|
|
19095
|
-
const target = this.target();
|
|
19096
|
-
if (target) {
|
|
19097
|
-
target.setAttribute("is-linked", this.el.id);
|
|
19098
|
-
if (!generate.Generate.getAncestor(target, "bcm-linked")) {
|
|
19099
|
-
this.el.setAttribute("main-linked", "true");
|
|
19100
|
-
}
|
|
19101
|
-
else {
|
|
19102
|
-
this.el.removeAttribute("main-linked");
|
|
19103
|
-
}
|
|
19104
|
-
}
|
|
19105
|
-
}
|
|
19106
|
-
componentDidLoad() {
|
|
19107
|
-
this.init();
|
|
19108
|
-
document.body.appendChild(this.el);
|
|
19109
|
-
}
|
|
19110
|
-
onLinkedDataDismis() {
|
|
19111
|
-
// console.log('onLinkedDataDismis');
|
|
19112
|
-
this.hide(false);
|
|
19113
|
-
}
|
|
19114
|
-
onBcmFloatingIsHide(e) {
|
|
19115
|
-
if (e.detail.id === this._id) {
|
|
19116
|
-
this.hide(false);
|
|
19117
|
-
}
|
|
19118
|
-
}
|
|
19119
|
-
async show(wait = true) {
|
|
19120
|
-
wait && (await utils.delay(50));
|
|
19121
|
-
const target = this.target();
|
|
19122
|
-
if (target) {
|
|
19123
|
-
document.body.appendChild(this.el);
|
|
19124
|
-
target.setAttribute("linked-is-open", "true");
|
|
19125
|
-
this.isOpen = true;
|
|
19126
|
-
this.calculatePosition();
|
|
19127
|
-
}
|
|
19128
|
-
else {
|
|
19129
|
-
this.hide(false);
|
|
19130
|
-
}
|
|
19131
|
-
return this.isOpen;
|
|
19132
|
-
}
|
|
19133
|
-
async hide(wait = true) {
|
|
19134
|
-
wait && (await utils.delay(50));
|
|
19135
|
-
const target = this.target();
|
|
19136
|
-
if (target) {
|
|
19137
|
-
target.removeAttribute("linked-is-open");
|
|
19138
|
-
this.hideChildLinked();
|
|
19139
|
-
this.isOpen = false;
|
|
19140
|
-
}
|
|
19141
|
-
return this.isOpen;
|
|
19142
|
-
}
|
|
19143
|
-
async toggle(wait = true) {
|
|
19144
|
-
return this.isOpen ? await this.hide(wait) : await this.show(wait);
|
|
19145
|
-
}
|
|
19146
|
-
clickListener(e) {
|
|
19147
|
-
if (!this.target())
|
|
19148
|
-
return;
|
|
19149
|
-
const isTarget = generate.Generate.findEventPath(e, this.target());
|
|
19150
|
-
const isSelf = generate.Generate.findEventPath(e, this.el);
|
|
19151
|
-
const isLinked = generate.Generate.findEventPathWithNodeName(e, "BCM-LINKED");
|
|
19152
|
-
if (!isTarget && !isSelf && !isLinked) {
|
|
19153
|
-
this.hide();
|
|
19154
|
-
this.bcmOpen.emit(this.isOpen);
|
|
19155
|
-
return;
|
|
19156
|
-
}
|
|
19157
|
-
if (this.isOpen) {
|
|
19158
|
-
isTarget && this.hide(false);
|
|
19159
|
-
isSelf && this.checkDataDismiss(e);
|
|
19160
|
-
if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
|
|
19161
|
-
this.dismissEvent();
|
|
19162
|
-
}
|
|
19163
|
-
}
|
|
19164
|
-
else {
|
|
19165
|
-
isTarget && this.show(false);
|
|
19166
|
-
}
|
|
19167
|
-
}
|
|
19168
|
-
resizeListener() {
|
|
19169
|
-
this.calculatePosition();
|
|
19170
|
-
}
|
|
19171
|
-
scrollListener() {
|
|
19172
|
-
this.calculatePosition();
|
|
19173
|
-
}
|
|
19174
|
-
wheelListener() {
|
|
19175
|
-
this.calculatePosition();
|
|
19176
|
-
}
|
|
19177
|
-
watchIsOpen() {
|
|
19178
|
-
this.bcmOpen.emit(this.isOpen);
|
|
19179
|
-
}
|
|
19180
|
-
render() {
|
|
19181
|
-
const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
|
|
19182
|
-
return (index$1.h(index$1.Host, { class: "tw-invisible tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-block tw-overscroll-contain tw-scroll-smooth tw-rounded tw-bg-white tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, index$1.h("slot", null)));
|
|
19183
|
-
}
|
|
19184
|
-
get el() { return index$1.getElement(this); }
|
|
19185
|
-
static get watchers() { return {
|
|
19186
|
-
"isOpen": ["watchIsOpen"]
|
|
19187
|
-
}; }
|
|
19188
|
-
};
|
|
19189
|
-
__decorate$6([
|
|
19190
|
-
isLoadDecorator.IsLoad()
|
|
19191
|
-
], BcmLinked.prototype, "el", void 0);
|
|
19192
|
-
|
|
19193
|
-
const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
|
|
19194
|
-
// if ( indeterminate ) {
|
|
19195
|
-
// checked = indeterminate == 'determinate' ? true : false
|
|
19196
|
-
// }
|
|
19197
|
-
const hostClasses = index$2.classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
|
|
19198
|
-
// 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
|
|
19199
|
-
// 'size-3': optionType === 'button' && size === Bcm.Size.large,
|
|
19200
|
-
'error': captionType == bcm.Bcm.Status.error,
|
|
19201
|
-
hidden,
|
|
19202
|
-
checked,
|
|
19203
|
-
disabled,
|
|
19204
|
-
required,
|
|
19205
|
-
readonly,
|
|
19206
|
-
});
|
|
19207
|
-
const bcmCheckboxIconClass = index$2.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
|
|
19208
|
-
'bcm-checkbox__label-icon-checked': checked,
|
|
19209
|
-
});
|
|
19210
|
-
const bcmCheckboxLabelClass = index$2.classnames('bcm-checkbox__label');
|
|
19211
|
-
return (index$1.h("div", { class: hostClasses },
|
|
19212
|
-
index$1.h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
|
|
19213
|
-
index$1.h("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
|
|
19214
|
-
index$1.h("span", { class: bcmCheckboxIconClass },
|
|
19215
|
-
index$1.h("bcm-icon", { icon: "far fa-check" })))));
|
|
19216
|
-
};
|
|
19217
|
-
|
|
19218
|
-
const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
|
|
19219
|
-
total = total || 0;
|
|
19220
|
-
variableText = variableText ? utils.pluralize(variableText, total) : 'items';
|
|
19221
|
-
return (index$1.h("footer", { class: "bcm-info-footer" },
|
|
19222
|
-
index$1.h("bcm-text", { scale: "size-1", color: "grey-8" },
|
|
19223
|
-
(multiple && selected > 0) && ` ( ${selected} selected ) `,
|
|
19224
|
-
` Total ${total} `,
|
|
19225
|
-
found != null && ` / ${found} `,
|
|
19226
|
-
` ${variableText} found. `)));
|
|
19227
|
-
};
|
|
19228
|
-
|
|
19229
|
-
const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
|
|
19230
|
-
const isHaveChildren = item.items && item.items.length > 0;
|
|
19231
|
-
var text = stringHelper.StringHelper.htmlEntities(item.text);
|
|
19232
|
-
let intersection = [];
|
|
19233
|
-
if (highlight && stringHelper.StringHelper.slugify(text).includes(stringHelper.StringHelper.slugify(highlight))) {
|
|
19234
|
-
if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
|
|
19235
|
-
text = stringHelper.StringHelper.highlight(text, highlight);
|
|
19236
|
-
}
|
|
19237
|
-
}
|
|
19238
|
-
if (item.type != 'group' && item.template) {
|
|
19239
|
-
const match = item.template
|
|
19240
|
-
.replace(/\s/g, '')
|
|
19241
|
-
.match(/\{{[^}}]+\}/g)
|
|
19242
|
-
.map(x => x.replace(/[{}]/g, ''));
|
|
19243
|
-
const keys = Object.keys(item.itemObject);
|
|
19244
|
-
intersection = match.filter(x => keys.includes(x));
|
|
19245
|
-
}
|
|
19246
|
-
text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? stringHelper.StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
|
|
19247
|
-
const unClickable = !treeview && item.type == "group" && !item.clickable;
|
|
19248
|
-
const disabled = item.disabled;
|
|
19249
|
-
const readonly = item.readonly;
|
|
19250
|
-
const itemClick = (event) => {
|
|
19251
|
-
let path = event.path || event.composedPath();
|
|
19252
|
-
if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
|
|
19253
|
-
return;
|
|
19254
|
-
}
|
|
19255
|
-
if (readonly) {
|
|
19256
|
-
collapseClick();
|
|
19257
|
-
}
|
|
19258
|
-
!unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
|
|
19259
|
-
};
|
|
19260
|
-
const collapseClick = () => {
|
|
19261
|
-
item.open = item.isSearching;
|
|
19262
|
-
openGroup(item.id);
|
|
19263
|
-
};
|
|
19264
|
-
return (index$1.h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), class: index$2.classnames('bcm-list__item',
|
|
19265
|
-
// size === 'large' ? 'size-3' : 'size-2',
|
|
19266
|
-
'bcm-list__item-' + size, {
|
|
19267
|
-
'bcm-list__item--group': !treeview && item.type == 'group',
|
|
19268
|
-
'bcm-list__item--readonly': readonly,
|
|
19269
|
-
}) },
|
|
19270
|
-
index$1.h("div", { class: index$2.classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled: disabled }) },
|
|
19271
|
-
treeview && (index$1.h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && index$1.h("bcm-icon", { icon: index$2.classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
|
|
19272
|
-
index$1.h("div", { class: index$2.classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
|
|
19273
|
-
checkboxes && (treeview || (!treeview && item.type != 'group')) && (index$1.h("div", { class: "bcm-list__item-content-text-checkbox" },
|
|
19274
|
-
index$1.h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
|
|
19275
|
-
index$1.h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
|
|
19276
|
-
(treeview || !treeview && item.type == "group") && isHaveChildren && (index$1.h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
|
|
19277
|
-
item.items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
|
|
19278
|
-
};
|
|
19279
|
-
|
|
19280
|
-
const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, }) => {
|
|
19281
|
-
const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
|
|
19282
|
-
const setScrollHeight = () => {
|
|
19283
|
-
const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
|
|
19284
|
-
const itemCount = searchFound >= 0 || (treeview ? items.length : totalData);
|
|
19285
|
-
let scrollHeight = itemCount * itemHeight || 0;
|
|
19286
|
-
return {
|
|
19287
|
-
'min-height': `${scrollHeight}px`,
|
|
19288
|
-
'overscroll-behavior': 'none',
|
|
19289
|
-
'height': '100%',
|
|
19290
|
-
'display': 'flex',
|
|
19291
|
-
'flex-direction': 'column',
|
|
19292
|
-
};
|
|
19293
|
-
};
|
|
19294
|
-
return (index$1.h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } },
|
|
19295
|
-
data && searchable && (index$1.h("section", { class: "bcm-list__container-search" },
|
|
19296
|
-
index$1.h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
|
|
19297
|
-
index$1.h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { 'overscroll-behavior': 'none' } },
|
|
19298
|
-
index$1.h("div", { style: setScrollHeight() },
|
|
19299
|
-
checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (index$1.h("section", { class: "bcm-list__container-select-all" },
|
|
19300
|
-
index$1.h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
|
|
19301
|
-
items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
|
|
19302
|
-
(!items || items.length === 0) && searchFound != 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
|
|
19303
|
-
index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
|
|
19304
|
-
index$1.h("span", { innerHTML: emptyText || 'No data' })))),
|
|
19305
|
-
searchFound == 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
|
|
19306
|
-
index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
|
|
19307
|
-
index$1.h("span", { innerHTML: emptyText || 'No Data Found' })))))),
|
|
19308
|
-
infoFooter && data && data.length > 0 && (index$1.h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
|
|
19309
|
-
};
|
|
19310
|
-
|
|
19311
|
-
const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
|
|
19312
|
-
const classes = index$2.classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
|
|
19313
|
-
'bcm-stepper__header-item--active': active,
|
|
19314
|
-
'bcm-stepper__header-item--valid': valid,
|
|
19315
|
-
'bcm-stepper__header-item--invalid': !valid,
|
|
19316
|
-
'bcm-stepper__header-item--disabled': disabled,
|
|
19317
|
-
'hidden': headerHidden,
|
|
19318
|
-
});
|
|
19319
|
-
const defaultIcons = {
|
|
19320
|
-
success: 'fal fa-check',
|
|
19321
|
-
warning: 'fal fa-exclamation-triangle',
|
|
19322
|
-
error: 'fal fa-times',
|
|
19323
|
-
};
|
|
19324
|
-
const customIcon = (icon || (statusIcon && defaultIcons[status])) && index$1.h("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
|
|
19325
|
-
return (index$1.h("div", { class: classes },
|
|
19326
|
-
index$1.h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
|
|
19327
|
-
index$1.h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? index$1.h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
|
|
19328
|
-
index$1.h("div", { class: "bcm-stepper__header-item-title size-2" }, _title),
|
|
19329
|
-
index$1.h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
|
|
19330
|
-
};
|
|
19331
|
-
|
|
19332
|
-
const { state: state$2 } = index.createStore({
|
|
19333
|
-
value: new Map(),
|
|
19334
|
-
});
|
|
19335
|
-
const setValue$2 = val => {
|
|
19336
|
-
const { id, dataSource, options } = val;
|
|
19337
|
-
const { type, treeview, checkboxes, searchable, value, name, label, size, disabled, readonly, highlight, required, hidden, fullWidth, height, maxHeight, minHeight, width, infoFooter, variableText, template, allOpen, keyControl, checkAll, linkedComponent, placeholder, searchPlaceholder, searchIsOnlyChilds, clearable, caption, noCaption, captionType, captionError, placement, } = options;
|
|
19338
|
-
const itemOptions = { size, checkboxes, template, allOpen, highlight, treeview };
|
|
19339
|
-
const data = {
|
|
19340
|
-
id: generate.snq(() => id, generate.Generate.UID),
|
|
19341
|
-
dataSource: dataSource && dataSource.length > 0 && recursive$1(dataSource, itemOptions),
|
|
19342
|
-
options: {
|
|
19343
|
-
type,
|
|
19344
|
-
treeview,
|
|
19345
|
-
checkboxes,
|
|
19346
|
-
searchable,
|
|
19347
|
-
value,
|
|
19348
|
-
name,
|
|
19349
|
-
label,
|
|
19350
|
-
size,
|
|
19351
|
-
disabled,
|
|
19352
|
-
readonly,
|
|
19353
|
-
highlight,
|
|
19354
|
-
required,
|
|
19355
|
-
hidden,
|
|
19356
|
-
fullWidth,
|
|
19357
|
-
height,
|
|
19358
|
-
maxHeight,
|
|
19359
|
-
minHeight,
|
|
19360
|
-
width,
|
|
19361
|
-
infoFooter,
|
|
19362
|
-
variableText,
|
|
19363
|
-
template,
|
|
19364
|
-
allOpen,
|
|
19365
|
-
keyControl,
|
|
19366
|
-
checkAll,
|
|
19367
|
-
linkedComponent,
|
|
19368
|
-
placeholder,
|
|
19369
|
-
searchPlaceholder,
|
|
19370
|
-
searchIsOnlyChilds,
|
|
19371
|
-
clearable,
|
|
19372
|
-
caption,
|
|
19373
|
-
noCaption,
|
|
19374
|
-
captionType,
|
|
19375
|
-
captionError,
|
|
19376
|
-
placement,
|
|
19377
|
-
},
|
|
19378
|
-
totalItems: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 && calculateTotalItems(dataSource, options.treeview),
|
|
19379
|
-
totalRoots: dataSource === null || dataSource === void 0 ? void 0 : dataSource.length,
|
|
19380
|
-
};
|
|
19381
|
-
state$2.value.set(data.id, data);
|
|
19382
|
-
};
|
|
19383
|
-
const recursive$1 = (data, options, parentId) => {
|
|
19384
|
-
let recData = [];
|
|
19385
|
-
if (data && data.length > 0) {
|
|
19386
|
-
recData = data.map(item => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: generate.snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
|
|
19387
|
-
? { items: generate.snq(() => recursive$1(item.items, options, item.id), []) }
|
|
19388
|
-
: { items: [] }))));
|
|
19389
|
-
}
|
|
19390
|
-
return recData;
|
|
19391
|
-
};
|
|
19392
|
-
const removeValue$1 = _id => {
|
|
19393
|
-
state$2.value.delete(_id);
|
|
19394
|
-
};
|
|
19395
|
-
const getValue$2 = id => generate.snq(() => state$2.value.get(id), {});
|
|
19396
|
-
const calculateTotalItems = (dataSource, treeview) => {
|
|
19397
|
-
let total = 0;
|
|
19398
|
-
dataSource.forEach(item => {
|
|
19399
|
-
if (treeview || (!treeview && item.type != 'group')) {
|
|
19400
|
-
total += 1;
|
|
19401
|
-
}
|
|
19402
|
-
if ((treeview || (!treeview && item.type == 'group')) && item.items) {
|
|
19403
|
-
total += calculateTotalItems(item.items, treeview);
|
|
19404
|
-
}
|
|
19405
|
-
});
|
|
19406
|
-
return total;
|
|
19407
|
-
};
|
|
19408
|
-
const getData = id => {
|
|
19409
|
-
let data = [];
|
|
19410
|
-
const value = getValue$2(id);
|
|
19411
|
-
if (value) {
|
|
19412
|
-
const { dataSource } = value;
|
|
19413
|
-
data = dataSource;
|
|
19414
|
-
}
|
|
19415
|
-
return data;
|
|
19416
|
-
};
|
|
19417
|
-
const getDataPagination$1 = (id, limit = 3, ids) => {
|
|
19418
|
-
let data = [];
|
|
19419
|
-
const value = getValue$2(id);
|
|
19420
|
-
if (value) {
|
|
19421
|
-
const { dataSource } = value;
|
|
19422
|
-
data = !ids ? dataSource.slice(0, limit) : dataSource.filter(item => ids.indexOf(item.id) > -1).slice(0, limit);
|
|
19423
|
-
}
|
|
19424
|
-
return data;
|
|
19425
|
-
};
|
|
19426
|
-
const openGroup = (id, groupId, items, status) => {
|
|
19427
|
-
let dataSource;
|
|
19428
|
-
if (items) {
|
|
19429
|
-
dataSource = items;
|
|
19430
|
-
}
|
|
19431
|
-
else {
|
|
19432
|
-
const value = getValue$2(id);
|
|
19433
|
-
dataSource = value.dataSource;
|
|
19434
|
-
}
|
|
19435
|
-
if (dataSource) {
|
|
19436
|
-
dataSource.forEach(item => {
|
|
19437
|
-
if (status != undefined) {
|
|
19438
|
-
item.open = status;
|
|
19439
|
-
}
|
|
19440
|
-
else if (item.id == groupId) {
|
|
19441
|
-
item.open = !item.open;
|
|
19442
|
-
item.isSearching = item.open;
|
|
19443
|
-
if (!item.open && item.items) {
|
|
19444
|
-
openGroup(id, groupId, item.items, false);
|
|
19445
|
-
}
|
|
19446
|
-
}
|
|
19447
|
-
else if (item.items) {
|
|
19448
|
-
openGroup(id, groupId, item.items);
|
|
19449
|
-
}
|
|
19450
|
-
});
|
|
19451
|
-
}
|
|
19452
|
-
};
|
|
19453
|
-
const removeOtherTags = (id, ids, items) => {
|
|
19454
|
-
ids = Array.isArray(ids) ? ids : [ids];
|
|
19455
|
-
let dataSource;
|
|
19456
|
-
if (items) {
|
|
19457
|
-
dataSource = items;
|
|
19458
|
-
}
|
|
19459
|
-
else {
|
|
19460
|
-
const value = getValue$2(id);
|
|
19461
|
-
dataSource = value.dataSource;
|
|
19462
|
-
}
|
|
19463
|
-
if (dataSource) {
|
|
19464
|
-
ids.forEach(otherTagIds => {
|
|
19465
|
-
dataSource.forEach(child => {
|
|
19466
|
-
if (child.id == otherTagIds) {
|
|
19467
|
-
child.checked = false;
|
|
19468
|
-
child.itemObject.checked = false;
|
|
19469
|
-
}
|
|
19470
|
-
else if (child.items) {
|
|
19471
|
-
onRemoveItems(id, otherTagIds, child.items);
|
|
19472
|
-
}
|
|
19473
|
-
});
|
|
19474
|
-
});
|
|
19475
|
-
}
|
|
19476
|
-
};
|
|
19477
|
-
const onRemoveItems = (id, itemId, items) => {
|
|
19478
|
-
if (items) {
|
|
19479
|
-
items.forEach(item => {
|
|
19480
|
-
if (item.id == itemId) {
|
|
19481
|
-
item.checked = false;
|
|
19482
|
-
item.itemObject.checked = false;
|
|
19483
|
-
indeterminateStatus(id, item.parentId);
|
|
19484
|
-
}
|
|
19485
|
-
else if (item.items) {
|
|
19486
|
-
onRemoveItems(id, itemId, item.items);
|
|
19487
|
-
}
|
|
19488
|
-
});
|
|
19489
|
-
}
|
|
19490
|
-
};
|
|
19491
|
-
const addChecked = (id, ids) => {
|
|
19492
|
-
const value = getValue$2(id);
|
|
19493
|
-
if (value) {
|
|
19494
|
-
ids.forEach(item => {
|
|
19495
|
-
checkedItem(id, item);
|
|
19496
|
-
});
|
|
19497
|
-
}
|
|
19498
|
-
};
|
|
19499
|
-
const checkedItem = (id, itemId) => {
|
|
19500
|
-
findItem(id, itemId);
|
|
19501
|
-
};
|
|
19502
|
-
const findItem = (id, itemId, items) => {
|
|
19503
|
-
itemId = Array.isArray(itemId) ? itemId : [itemId];
|
|
19504
|
-
let dataSource;
|
|
19505
|
-
if (items) {
|
|
19506
|
-
dataSource = items;
|
|
19507
|
-
}
|
|
19508
|
-
else {
|
|
19509
|
-
const value = getValue$2(id);
|
|
19510
|
-
dataSource = value.dataSource;
|
|
19511
|
-
}
|
|
19512
|
-
if (dataSource) {
|
|
19513
|
-
dataSource.forEach(item => {
|
|
19514
|
-
if (itemId.includes(item.id)) {
|
|
19515
|
-
checkedProcess(id, item);
|
|
19516
|
-
if (item.parentId) {
|
|
19517
|
-
indeterminateStatus(id, item.parentId);
|
|
19518
|
-
}
|
|
19519
|
-
}
|
|
19520
|
-
else if (item.items) {
|
|
19521
|
-
findItem(id, itemId, item.items);
|
|
19522
|
-
}
|
|
19523
|
-
});
|
|
19524
|
-
}
|
|
19525
|
-
};
|
|
19526
|
-
const checkedProcess = (id, item, status) => {
|
|
19527
|
-
const value = getValue$2(id);
|
|
19528
|
-
if (value) {
|
|
19529
|
-
const treeview = value.options.treeview;
|
|
19530
|
-
if (item) {
|
|
19531
|
-
// && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
|
|
19532
|
-
if (treeview || (!treeview && item.type != 'group')) {
|
|
19533
|
-
if (!item.disabled) {
|
|
19534
|
-
if (status != undefined) {
|
|
19535
|
-
item.checked = status;
|
|
19536
|
-
}
|
|
19537
|
-
else {
|
|
19538
|
-
item.checked = !item.checked;
|
|
19539
|
-
}
|
|
19540
|
-
item.itemObject.checked = item.checked;
|
|
19541
|
-
item.indeterminate = item.checked ? 'determinate' : 'uncheck';
|
|
19542
|
-
}
|
|
19543
|
-
}
|
|
19544
|
-
if (item.items) {
|
|
19545
|
-
item.items.forEach(child => {
|
|
19546
|
-
checkedProcess(id, child, status == undefined ? item.checked : status);
|
|
19547
|
-
});
|
|
19548
|
-
}
|
|
19549
|
-
}
|
|
19550
|
-
}
|
|
19551
|
-
};
|
|
19552
|
-
const indeterminateStatus = (id, itemId, items) => {
|
|
19553
|
-
let dataSource;
|
|
19554
|
-
if (items) {
|
|
19555
|
-
dataSource = items;
|
|
19556
|
-
}
|
|
19557
|
-
else {
|
|
19558
|
-
const value = getValue$2(id);
|
|
19559
|
-
dataSource = value.dataSource;
|
|
19560
|
-
}
|
|
19561
|
-
if (dataSource) {
|
|
19562
|
-
dataSource.forEach(item => {
|
|
19563
|
-
if (item.id == itemId) {
|
|
19564
|
-
let allChecked = true;
|
|
19565
|
-
let allUnchecked = true;
|
|
19566
|
-
if (item.items) {
|
|
19567
|
-
item.items.map(child => {
|
|
19568
|
-
(child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
|
|
19569
|
-
!child.checked && (allChecked = false);
|
|
19570
|
-
});
|
|
19571
|
-
}
|
|
19572
|
-
const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
|
|
19573
|
-
item.indeterminate = indeterminateState;
|
|
19574
|
-
item.checked = indeterminateState == 'determinate' ? true : false;
|
|
19575
|
-
item.itemObject.checked = item.checked;
|
|
19576
|
-
if (item.parentId) {
|
|
19577
|
-
indeterminateStatus(id, item.parentId);
|
|
19578
|
-
}
|
|
19579
|
-
}
|
|
19580
|
-
else if (item.items) {
|
|
19581
|
-
indeterminateStatus(id, itemId, item.items);
|
|
19582
|
-
}
|
|
19583
|
-
});
|
|
19584
|
-
}
|
|
19585
|
-
};
|
|
19586
|
-
const filterData = (id, ids, items, searchOtherTag) => {
|
|
19587
|
-
let checkeds = [];
|
|
19588
|
-
let visibled = [];
|
|
19589
|
-
getValue$2(id).isSearchOtherTag = searchOtherTag;
|
|
19590
|
-
let dataSource;
|
|
19591
|
-
if (items) {
|
|
19592
|
-
dataSource = items;
|
|
19593
|
-
}
|
|
19594
|
-
else {
|
|
19595
|
-
const value = getValue$2(id);
|
|
19596
|
-
dataSource = value.dataSource;
|
|
19597
|
-
}
|
|
19598
|
-
if (dataSource) {
|
|
19599
|
-
dataSource.forEach(item => {
|
|
19600
|
-
if (ids) {
|
|
19601
|
-
item.hidden = true;
|
|
19602
|
-
// const filter = ids.find((find) => find.id === item.id)
|
|
19603
|
-
var filter;
|
|
19604
|
-
for (let index = 0; index < ids.length; index++) {
|
|
19605
|
-
if (ids[index].id === item.id) {
|
|
19606
|
-
filter = ids[index];
|
|
19607
|
-
break;
|
|
19608
|
-
}
|
|
19609
|
-
}
|
|
19610
|
-
if (filter) {
|
|
19611
|
-
item.hidden = false;
|
|
19612
|
-
if (!getValue$2(id).isSearchOtherTag) {
|
|
19613
|
-
item.isSearching = true;
|
|
19614
|
-
}
|
|
19615
|
-
visibled.push(item);
|
|
19616
|
-
if (item.checked) {
|
|
19617
|
-
checkeds.push(item);
|
|
19618
|
-
}
|
|
19619
|
-
if (filter.items) {
|
|
19620
|
-
const { checkedItems, visibledItems } = filterData(id, filter.items, item.items, searchOtherTag);
|
|
19621
|
-
if (checkedItems) {
|
|
19622
|
-
checkeds = [...new Set([...checkeds, ...checkedItems])];
|
|
19623
|
-
}
|
|
19624
|
-
if (visibledItems) {
|
|
19625
|
-
visibled = [...new Set([...visibled, ...visibledItems])];
|
|
19626
|
-
}
|
|
19627
|
-
}
|
|
19628
|
-
}
|
|
19629
|
-
}
|
|
19630
|
-
else {
|
|
19631
|
-
item.hidden = false;
|
|
19632
|
-
if (item.items) {
|
|
19633
|
-
filterData(id, null, item.items);
|
|
19634
|
-
}
|
|
19635
|
-
visibled.push(item);
|
|
19636
|
-
item.isSearching = false;
|
|
19637
|
-
}
|
|
19638
|
-
});
|
|
19639
|
-
}
|
|
19640
|
-
return { checkedItems: checkeds !== null && checkeds !== void 0 ? checkeds : [], visibledItems: visibled !== null && visibled !== void 0 ? visibled : [] };
|
|
19641
|
-
};
|
|
19642
|
-
const getSelected = (id, items) => {
|
|
19643
|
-
let dataSource;
|
|
19644
|
-
let selected = null;
|
|
19645
|
-
if (items) {
|
|
19646
|
-
dataSource = items;
|
|
19647
|
-
}
|
|
19648
|
-
else {
|
|
19649
|
-
const value = getValue$2(id);
|
|
19650
|
-
dataSource = value.dataSource;
|
|
19651
|
-
}
|
|
19652
|
-
if (dataSource) {
|
|
19653
|
-
dataSource.forEach(item => {
|
|
19654
|
-
if (item.selected) {
|
|
19655
|
-
selected = item.itemObject;
|
|
19656
|
-
}
|
|
19657
|
-
else if (item.items) {
|
|
19658
|
-
const found = getSelected(id, item.items);
|
|
19659
|
-
if (found) {
|
|
19660
|
-
selected = found;
|
|
19661
|
-
}
|
|
19662
|
-
}
|
|
19663
|
-
});
|
|
19664
|
-
}
|
|
19665
|
-
return selected;
|
|
19666
|
-
};
|
|
19667
|
-
const getCheckedList = (id, items) => {
|
|
19668
|
-
let dataSource;
|
|
19669
|
-
let checkedList = [];
|
|
19670
|
-
let nestedResult = [];
|
|
19671
|
-
if (items) {
|
|
19672
|
-
dataSource = items;
|
|
19673
|
-
}
|
|
19674
|
-
else {
|
|
19675
|
-
const value = getValue$2(id);
|
|
19676
|
-
dataSource = value.dataSource;
|
|
19677
|
-
}
|
|
19678
|
-
if (dataSource) {
|
|
19679
|
-
dataSource.forEach(item => {
|
|
19680
|
-
var _a;
|
|
19681
|
-
let foundChild = [];
|
|
19682
|
-
let foundItem = [];
|
|
19683
|
-
if (item.checked) {
|
|
19684
|
-
checkedList.push(item.itemObject);
|
|
19685
|
-
foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
|
|
19686
|
-
}
|
|
19687
|
-
if (item.items) {
|
|
19688
|
-
const found = getCheckedList(id, item.items);
|
|
19689
|
-
if (((_a = found === null || found === void 0 ? void 0 : found.checkedList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
19690
|
-
checkedList = [...checkedList, ...found.checkedList];
|
|
19691
|
-
}
|
|
19692
|
-
if (found.nestedResult.length > 0) {
|
|
19693
|
-
foundChild = found.nestedResult;
|
|
19694
|
-
}
|
|
19695
|
-
}
|
|
19696
|
-
if (foundChild.length > 0) {
|
|
19697
|
-
if (foundItem.length == 0) {
|
|
19698
|
-
foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
|
|
19699
|
-
}
|
|
19700
|
-
foundItem[0].items = foundChild;
|
|
19701
|
-
nestedResult.push(foundItem[0]);
|
|
19702
|
-
}
|
|
19703
|
-
else {
|
|
19704
|
-
if (foundItem.length > 0) {
|
|
19705
|
-
foundItem[0].items = foundChild;
|
|
19706
|
-
nestedResult.push(foundItem[0]);
|
|
19707
|
-
}
|
|
19708
|
-
}
|
|
19709
|
-
});
|
|
19710
|
-
}
|
|
19711
|
-
return { checkedList: (checkedList === null || checkedList === void 0 ? void 0 : checkedList.length) > 0 ? checkedList : null, nestedResult: nestedResult };
|
|
19712
|
-
};
|
|
19713
|
-
const selectedItem = (id, itemId, items) => {
|
|
19714
|
-
let dataSource;
|
|
19715
|
-
let selected = [];
|
|
19716
|
-
if (items) {
|
|
19717
|
-
dataSource = items;
|
|
19718
|
-
}
|
|
19719
|
-
else {
|
|
19720
|
-
const value = getValue$2(id);
|
|
19721
|
-
dataSource = value.dataSource;
|
|
19722
|
-
}
|
|
19723
|
-
if (dataSource) {
|
|
19724
|
-
dataSource.forEach(item => {
|
|
19725
|
-
if (itemId) {
|
|
19726
|
-
if (item.id == itemId) {
|
|
19727
|
-
// if (!item.selected){
|
|
19728
|
-
item.selected = true;
|
|
19729
|
-
item.itemObject.selected = item.selected;
|
|
19730
|
-
// }
|
|
19731
|
-
}
|
|
19732
|
-
else {
|
|
19733
|
-
if (item.selected) {
|
|
19734
|
-
item.selected = false;
|
|
19735
|
-
item.itemObject.selected = item.selected;
|
|
19736
|
-
}
|
|
19737
|
-
}
|
|
19738
|
-
}
|
|
19739
|
-
if (item.items) {
|
|
19740
|
-
const found = selectedItem(id, itemId, item.items);
|
|
19741
|
-
if ((found === null || found === void 0 ? void 0 : found.length) > 0) {
|
|
19742
|
-
selected = [...selected, ...found];
|
|
19743
|
-
}
|
|
19744
|
-
}
|
|
19745
|
-
if (item.selected) {
|
|
19746
|
-
selected.push(item.itemObject);
|
|
19747
|
-
}
|
|
19748
|
-
});
|
|
19749
|
-
}
|
|
19750
|
-
return selected && selected.length > 0 ? selected : null;
|
|
19751
|
-
};
|
|
19752
|
-
const setClear = (id, items) => {
|
|
19753
|
-
let dataSource;
|
|
19754
|
-
if (items) {
|
|
19755
|
-
dataSource = items;
|
|
19756
|
-
}
|
|
19757
|
-
else {
|
|
19758
|
-
const value = getValue$2(id);
|
|
19759
|
-
dataSource = value.dataSource;
|
|
19760
|
-
}
|
|
19761
|
-
if (dataSource) {
|
|
19762
|
-
dataSource.forEach(item => {
|
|
19763
|
-
var _a, _b, _c;
|
|
19764
|
-
item.checked && (item.checked = false);
|
|
19765
|
-
item.selected && (item.selected = false);
|
|
19766
|
-
item.indeterminate && (item.indeterminate = 'uncheck');
|
|
19767
|
-
((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
|
|
19768
|
-
((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
|
|
19769
|
-
((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
|
|
19770
|
-
if (item.items) {
|
|
19771
|
-
setClear(id, item.items);
|
|
19772
|
-
}
|
|
19773
|
-
});
|
|
19774
|
-
}
|
|
19775
|
-
};
|
|
19776
|
-
const selectAll = (id, status) => {
|
|
19777
|
-
const dataSource = getValue$2(id).dataSource;
|
|
19778
|
-
if (dataSource) {
|
|
19779
|
-
dataSource.forEach(item => {
|
|
19780
|
-
checkedProcess(id, item, status);
|
|
19781
|
-
});
|
|
19782
|
-
}
|
|
19783
|
-
};
|
|
19784
|
-
const updateOptions = (id, options) => {
|
|
19785
|
-
Object.keys(getValue$2(id).options).forEach(key => {
|
|
19786
|
-
getValue$2(id).options[key] = options[key];
|
|
19787
|
-
});
|
|
19788
|
-
};
|
|
19789
|
-
const removeState$1 = id => {
|
|
19790
|
-
return Promise.resolve(state$2.value.delete(id));
|
|
19791
|
-
};
|
|
19792
|
-
const listState = {
|
|
19793
|
-
setValue: setValue$2,
|
|
19794
|
-
removeValue: removeValue$1,
|
|
19795
|
-
getValue: getValue$2,
|
|
19796
|
-
getData,
|
|
19797
|
-
getDataPagination: getDataPagination$1,
|
|
19798
|
-
openGroup,
|
|
19799
|
-
checkedItem,
|
|
19800
|
-
filterData,
|
|
19801
|
-
getSelected,
|
|
19802
|
-
getCheckedList,
|
|
19803
|
-
selectedItem,
|
|
19804
|
-
addChecked,
|
|
19805
|
-
setClear,
|
|
19806
|
-
selectAll,
|
|
19807
|
-
removeOtherTags,
|
|
19808
|
-
onRemoveItems,
|
|
19809
|
-
updateOptions,
|
|
19810
|
-
removeState: removeState$1,
|
|
19811
|
-
};
|
|
19812
|
-
|
|
19813
|
-
class KeyControl {
|
|
19814
|
-
constructor(keyCode, element, elementName, childElementName) {
|
|
19815
|
-
this.elementName = '';
|
|
19816
|
-
this.childElementName = '';
|
|
19817
|
-
this.keyCode = keyCode;
|
|
19818
|
-
this.element = element;
|
|
19819
|
-
this.elementName = elementName;
|
|
19820
|
-
this.childElementName = childElementName;
|
|
19821
|
-
}
|
|
19822
|
-
getKeyCode() {
|
|
19823
|
-
return this.keyCode;
|
|
19824
|
-
}
|
|
19825
|
-
getElementName() {
|
|
19826
|
-
return this.elementName;
|
|
19827
|
-
}
|
|
19828
|
-
getChildElementName() {
|
|
19829
|
-
return this.childElementName;
|
|
19830
|
-
}
|
|
19831
|
-
getFocusedElementName() {
|
|
19832
|
-
return this.getElementName() + '.focused';
|
|
19833
|
-
}
|
|
19834
|
-
getFocusedElement() {
|
|
19835
|
-
return this.element.querySelectorAll(this.getFocusedElementName())[0] || null;
|
|
19836
|
-
}
|
|
19837
|
-
getFirstElement() {
|
|
19838
|
-
return this.element.querySelectorAll(this.getElementName())[0] || null;
|
|
19839
|
-
}
|
|
19840
|
-
getNextElement() {
|
|
19841
|
-
var _a;
|
|
19842
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) || this.getFirstElement();
|
|
19843
|
-
}
|
|
19844
|
-
getPreviousElement() {
|
|
19845
|
-
var _a;
|
|
19846
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) || this.getFirstElement();
|
|
19847
|
-
}
|
|
19848
|
-
getChildElement() {
|
|
19849
|
-
var _a;
|
|
19850
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName())[0]) || null;
|
|
19851
|
-
}
|
|
19852
|
-
getParentElement(element) {
|
|
19853
|
-
if (element && element) {
|
|
19854
|
-
const isRootElement = element && element.attributes['data-isroot'];
|
|
19855
|
-
if (isRootElement) {
|
|
19856
|
-
return element;
|
|
19857
|
-
}
|
|
19858
|
-
return this.getParentElement(element.parentNode);
|
|
19859
|
-
}
|
|
19860
|
-
}
|
|
19861
|
-
focusElementIsOpen() {
|
|
19862
|
-
var _a;
|
|
19863
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.classList.contains('bcm-list__item--open')) || false;
|
|
19864
|
-
}
|
|
19865
|
-
isRootElement() {
|
|
19866
|
-
var _a;
|
|
19867
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName()).length) > 0;
|
|
19868
|
-
}
|
|
19869
|
-
isRootElementIsOpen() {
|
|
19870
|
-
return this.getFocusedElement().classList.contains('bcm-list__item--open');
|
|
19871
|
-
}
|
|
19872
|
-
getFocusedChildElement() {
|
|
19873
|
-
var _a;
|
|
19874
|
-
return ((_a = this.getChildElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.focused')[0]) || null;
|
|
19875
|
-
}
|
|
19876
|
-
isLastElement() {
|
|
19877
|
-
var _a;
|
|
19878
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null;
|
|
19879
|
-
}
|
|
19880
|
-
focusParentElementFirstChild() {
|
|
19881
|
-
var _a, _b;
|
|
19882
|
-
return this.setFocus((_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
|
|
19883
|
-
}
|
|
19884
|
-
isFirstElement() {
|
|
19885
|
-
var _a;
|
|
19886
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) === null;
|
|
19887
|
-
}
|
|
19888
|
-
focusRootElement() {
|
|
19889
|
-
var _a, _b, _c;
|
|
19890
|
-
return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.firstChild);
|
|
19891
|
-
}
|
|
19892
|
-
nextRootElement() {
|
|
19893
|
-
var _a, _b, _c;
|
|
19894
|
-
return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.nextElementSibling);
|
|
19895
|
-
}
|
|
19896
|
-
findFocusElementParent() {
|
|
19897
|
-
return this.getFocusedElement().parentNode.querySelectorAll('.bcm-list__item--open');
|
|
19898
|
-
}
|
|
19899
|
-
getLastElement() {
|
|
19900
|
-
return this.element.querySelectorAll(this.getElementName())[this.element.querySelectorAll(this.getElementName()).length - 1] || null;
|
|
19901
|
-
}
|
|
19902
|
-
setFocus(element) {
|
|
19903
|
-
element.focus();
|
|
19904
|
-
}
|
|
19905
|
-
}
|
|
19906
|
-
|
|
19907
|
-
class ListKeyControl extends KeyControl {
|
|
19908
|
-
constructor(keyCode, element, treeview, checkBoxes) {
|
|
19909
|
-
super(keyCode, element, '.bcm-list__item', '.bcm-list__item-childs');
|
|
19910
|
-
this.isTreeview = false;
|
|
19911
|
-
this.isCheckBoxes = false;
|
|
19912
|
-
this.isTreeview = treeview;
|
|
19913
|
-
this.isCheckBoxes = checkBoxes;
|
|
19914
|
-
}
|
|
19915
|
-
keyUpControl() {
|
|
19916
|
-
if (this.isTreeview) {
|
|
19917
|
-
this.keyUpTreeview();
|
|
19918
|
-
}
|
|
19919
|
-
else {
|
|
19920
|
-
if (this.isFirstElement()) {
|
|
19921
|
-
this.setFocus(this.getLastElement());
|
|
19922
|
-
}
|
|
19923
|
-
else {
|
|
19924
|
-
this.setFocus(this.getPreviousElement());
|
|
19925
|
-
}
|
|
19926
|
-
}
|
|
19927
|
-
}
|
|
19928
|
-
keyDownTreeView() {
|
|
19929
|
-
var _a;
|
|
19930
|
-
if (this.isTreeview) {
|
|
19931
|
-
if (this.isRootElement() && this.isRootElementIsOpen()) {
|
|
19932
|
-
const childs = this.getChildElement();
|
|
19933
|
-
if (childs) {
|
|
19934
|
-
this.setFocus(childs.firstChild);
|
|
19935
|
-
}
|
|
19936
|
-
}
|
|
19937
|
-
else {
|
|
19938
|
-
if (this.isLastElement() && this.getParentElement(this.getFocusedElement())) {
|
|
19939
|
-
this.setFocus((_a = this.getParentElement(this.getFocusedElement())) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
|
|
19940
|
-
}
|
|
19941
|
-
else {
|
|
19942
|
-
this.setFocus(this.getNextElement());
|
|
19943
|
-
}
|
|
19944
|
-
}
|
|
19945
|
-
}
|
|
19946
|
-
}
|
|
19947
|
-
keyUpTreeview() {
|
|
19948
|
-
if (this.isFirstElement()) {
|
|
19949
|
-
const parent = this.getParentElement(this.getFocusedElement());
|
|
19950
|
-
this.setFocus(parent);
|
|
19951
|
-
}
|
|
19952
|
-
else {
|
|
19953
|
-
const previousElement = this.getPreviousElement();
|
|
19954
|
-
if (previousElement) {
|
|
19955
|
-
if (previousElement.classList.contains('bcm-list__item--open')) {
|
|
19956
|
-
const getChildElement = previousElement.querySelectorAll(this.getChildElementName())[0];
|
|
19957
|
-
console.log({ getChildElement });
|
|
19958
|
-
this.setFocus(getChildElement.lastChild);
|
|
19959
|
-
}
|
|
19960
|
-
else {
|
|
19961
|
-
this.setFocus(previousElement);
|
|
19962
|
-
}
|
|
19963
|
-
}
|
|
19964
|
-
}
|
|
19965
|
-
}
|
|
19966
|
-
keyDownControl() {
|
|
19967
|
-
if (this.isTreeview) {
|
|
19968
|
-
this.keyDownTreeView();
|
|
19969
|
-
}
|
|
19970
|
-
else {
|
|
19971
|
-
if (this.isLastElement()) {
|
|
19972
|
-
this.setFocus(this.getFirstElement());
|
|
19973
|
-
}
|
|
19974
|
-
else {
|
|
19975
|
-
this.setFocus(this.getNextElement());
|
|
19976
|
-
}
|
|
19977
|
-
}
|
|
19978
|
-
}
|
|
19979
|
-
keyRightControl() {
|
|
19980
|
-
if (this.isTreeview) {
|
|
19981
|
-
if (!this.isRootElementIsOpen() && this.isRootElement()) {
|
|
19982
|
-
const { id } = this.getFocusedElement();
|
|
19983
|
-
this.openGroup(id);
|
|
19984
|
-
}
|
|
19985
|
-
}
|
|
19986
|
-
}
|
|
19987
|
-
keyLeftControl() {
|
|
19988
|
-
if (this.isTreeview) {
|
|
19989
|
-
if (this.isRootElementIsOpen() && this.isRootElement()) {
|
|
19990
|
-
const { id } = this.getFocusedElement();
|
|
19991
|
-
this.openGroup(id);
|
|
19992
|
-
}
|
|
19993
|
-
}
|
|
19994
|
-
}
|
|
19995
|
-
keyEnterControl() { }
|
|
19996
|
-
keySpaceControl() {
|
|
19997
|
-
if (this.isCheckBoxes) {
|
|
19998
|
-
const { id } = this.getFocusedElement();
|
|
19999
|
-
this.checkedItem(id);
|
|
20000
|
-
}
|
|
20001
|
-
}
|
|
20002
|
-
keyDown() {
|
|
20003
|
-
switch (this.getKeyCode()) {
|
|
20004
|
-
case bcm.Bcm.KeyCode.up:
|
|
20005
|
-
this.keyUpControl();
|
|
20006
|
-
break;
|
|
20007
|
-
case bcm.Bcm.KeyCode.down:
|
|
20008
|
-
this.keyDownControl();
|
|
20009
|
-
break;
|
|
20010
|
-
case bcm.Bcm.KeyCode.left:
|
|
20011
|
-
this.keyLeftControl();
|
|
20012
|
-
break;
|
|
20013
|
-
case bcm.Bcm.KeyCode.right:
|
|
20014
|
-
this.keyRightControl();
|
|
20015
|
-
break;
|
|
20016
|
-
case bcm.Bcm.KeyCode.enter:
|
|
20017
|
-
this.keyEnterControl();
|
|
20018
|
-
break;
|
|
20019
|
-
case bcm.Bcm.KeyCode.space:
|
|
20020
|
-
this.keySpaceControl();
|
|
20021
|
-
break;
|
|
20022
|
-
}
|
|
20023
|
-
}
|
|
20024
|
-
keyUp() { }
|
|
20025
|
-
}
|
|
20026
|
-
|
|
20027
|
-
class ListTagControl {
|
|
20028
|
-
constructor(containerId, values, listId, selectedOtherTag, clearable) {
|
|
20029
|
-
this.clearable = false;
|
|
20030
|
-
this.containerId = containerId;
|
|
20031
|
-
this.values = values;
|
|
20032
|
-
this.listId = listId;
|
|
20033
|
-
this.selectedOtherTag = selectedOtherTag;
|
|
20034
|
-
this.clearable = clearable;
|
|
20035
|
-
}
|
|
20036
|
-
getTooltip(id, text) {
|
|
20037
|
-
return new tooltipHelper.Tooltip({ message: text, targetId: id, placement: 'bottom' });
|
|
20038
|
-
}
|
|
20039
|
-
tagHtmlTemplate(tag, isOtherTag = false, otherTagIsSingle = false) {
|
|
20040
|
-
return `<span class="bcm-tag__content dismissable ${!otherTagIsSingle && isOtherTag && (this.selectedOtherTag ? 'checkable checked' : '')}">
|
|
20041
|
-
<span class="value">${tag.text}</span>
|
|
20042
|
-
${otherTagIsSingle
|
|
20043
|
-
? ''
|
|
20044
|
-
: `
|
|
20045
|
-
<span class="right close-button" bcm-list-tag-dismiss >
|
|
20046
|
-
<bcm-icon icon="fal fa-times"></bcm-icon>
|
|
20047
|
-
</span>`}
|
|
20048
|
-
</span>`;
|
|
20049
|
-
}
|
|
20050
|
-
getContainer() {
|
|
20051
|
-
return document.getElementById(this.containerId);
|
|
20052
|
-
}
|
|
20053
|
-
getContainerWidth() {
|
|
20054
|
-
let tagContainerWidth = generate.snq(() => document.getElementById(this.containerId).clientWidth, 0);
|
|
20055
|
-
tagContainerWidth = (this.clearable ? tagContainerWidth - 20 : tagContainerWidth) - 20;
|
|
20056
|
-
return [tagContainerWidth < 130 ? 130 : tagContainerWidth - 20, tagContainerWidth];
|
|
20057
|
-
}
|
|
20058
|
-
isClickDismiss(e) {
|
|
20059
|
-
const path = e.path || (e.composedPath && e.composedPath());
|
|
20060
|
-
const tag = path.find(element => element.attributes && element.attributes['bcm-list-tag-dismiss']);
|
|
20061
|
-
return !!tag;
|
|
20062
|
-
}
|
|
20063
|
-
onClickControl(e, id, isOtherTag = false) {
|
|
20064
|
-
const isDismiss = this.isClickDismiss(e);
|
|
20065
|
-
let tooltipId = '';
|
|
20066
|
-
if (isDismiss) {
|
|
20067
|
-
this.onClickDismiss(id);
|
|
20068
|
-
tooltipId = isOtherTag ? `bcm-list-input-tag-${this.listId}-other-tag` : `list-${this.listId}-${id}`;
|
|
20069
|
-
this.getTooltip(tooltipId, '').hide();
|
|
20070
|
-
}
|
|
20071
|
-
else {
|
|
20072
|
-
isOtherTag ? this.onClickOtherTag(id) : this.onClickTag(id);
|
|
20073
|
-
}
|
|
20074
|
-
}
|
|
20075
|
-
calculateTags() {
|
|
20076
|
-
const containerWidth = this.getContainerWidth();
|
|
20077
|
-
const virtualDom = this.getContainer();
|
|
20078
|
-
if (virtualDom) {
|
|
20079
|
-
if (this.values && this.values.length > 0) {
|
|
20080
|
-
if (containerWidth[0] > 0 && virtualDom) {
|
|
20081
|
-
virtualDom.innerHTML = '';
|
|
20082
|
-
this.values.slice(0, 50).map(value => {
|
|
20083
|
-
const tag = document.createElement('div');
|
|
20084
|
-
tag.classList.add('bcm-tag');
|
|
20085
|
-
tag.id = `list-${this.listId}-${value.id}`;
|
|
20086
|
-
// tag.title = value.tagTitle || value.text || '';
|
|
20087
|
-
tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').show();
|
|
20088
|
-
tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').hide();
|
|
20089
|
-
tag.dataset.id = value.id;
|
|
20090
|
-
tag.onclick = e => this.onClickControl(e, value.id);
|
|
20091
|
-
tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, value), { text: stringHelper.StringHelper.textLimitter(value.text, 10) }));
|
|
20092
|
-
virtualDom.appendChild(tag);
|
|
20093
|
-
});
|
|
20094
|
-
let tags = virtualDom.querySelectorAll('.bcm-tag');
|
|
20095
|
-
let otherTags = [];
|
|
20096
|
-
let visibleTags = [];
|
|
20097
|
-
const checkControl = () => {
|
|
20098
|
-
const virtualDomTags = virtualDom.querySelectorAll('.bcm-tag');
|
|
20099
|
-
if (visibleTags.length === 1 && (virtualDomTags === null || virtualDomTags === void 0 ? void 0 : virtualDomTags.length) === 1) {
|
|
20100
|
-
visibleTags[0].innerHTML = this.tagHtmlTemplate({ text: '+1' }, false, true);
|
|
20101
|
-
}
|
|
20102
|
-
};
|
|
20103
|
-
let tagsWidth = Array.from(tags).reduce((acc, tag) => {
|
|
20104
|
-
const tagClientWidth = tag.clientWidth > 50 ? tag.clientWidth : 50;
|
|
20105
|
-
if (tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0]) {
|
|
20106
|
-
acc += tagClientWidth + 10;
|
|
20107
|
-
visibleTags.push(tag);
|
|
20108
|
-
const checkFreeSpace = tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0];
|
|
20109
|
-
!checkFreeSpace && containerWidth[1] < 70 && checkControl();
|
|
20110
|
-
}
|
|
20111
|
-
else {
|
|
20112
|
-
otherTags.push(tag);
|
|
20113
|
-
tag.remove();
|
|
20114
|
-
}
|
|
20115
|
-
return acc;
|
|
20116
|
-
}, 0);
|
|
20117
|
-
const otherTagElement = this.values.slice(visibleTags.length);
|
|
20118
|
-
const virtualDomLastElements = virtualDom.lastElementChild;
|
|
20119
|
-
const otherTagTextControl = args => {
|
|
20120
|
-
const { count, width } = args;
|
|
20121
|
-
if (count > 999)
|
|
20122
|
-
return '999+' + utils.pluralize('item', count);
|
|
20123
|
-
if (width > 100)
|
|
20124
|
-
return `${count} ` + utils.pluralize('item', count) + ' selected';
|
|
20125
|
-
if (width < 100)
|
|
20126
|
-
return `+${count < 10 ? count : '9'}`;
|
|
20127
|
-
};
|
|
20128
|
-
if (otherTags && otherTags.length > 0 && virtualDomLastElements && virtualDomLastElements.id !== `bcm-list-input-tag-${this.listId}-other-tag`) {
|
|
20129
|
-
otherTags.push(virtualDomLastElements);
|
|
20130
|
-
if (otherTags.length > 0) {
|
|
20131
|
-
const otherCounter = otherTagElement.length + 1;
|
|
20132
|
-
const createOthertagElement = {
|
|
20133
|
-
id: `bcm-list-input-tag-${this.listId}-other-tag`,
|
|
20134
|
-
text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
|
|
20135
|
-
title: generate.snq(() => otherTags
|
|
20136
|
-
.map(tag => this.values.find(value => value.id == tag.dataset.id))
|
|
20137
|
-
.slice(0, 15)
|
|
20138
|
-
.map(item => stringHelper.StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
|
|
20139
|
-
.toString()
|
|
20140
|
-
.split(',')
|
|
20141
|
-
.join('\r\n') + (otherTags.length > 15 ? ('\r\n...') : ''), '...'),
|
|
20142
|
-
};
|
|
20143
|
-
virtualDomLastElements.remove();
|
|
20144
|
-
visibleTags = visibleTags.filter(tag => tag.id !== virtualDomLastElements.id);
|
|
20145
|
-
const hiddenTags = this.values.filter(value => !visibleTags.find(tag => tag.dataset.id == value.id)).map(value => value.id);
|
|
20146
|
-
const otherTag = document.createElement('div');
|
|
20147
|
-
const otherTagIds = hiddenTags.join(',');
|
|
20148
|
-
const otherTagIsSingle = visibleTags.length === 0;
|
|
20149
|
-
otherTag.classList.add('bcm-tag');
|
|
20150
|
-
!otherTagIsSingle && otherTag.classList.add('bcm-tag--other');
|
|
20151
|
-
otherTag.id = createOthertagElement.id;
|
|
20152
|
-
// otherTag.title = createOthertagElement.title || false;
|
|
20153
|
-
if (createOthertagElement.title) {
|
|
20154
|
-
otherTag.onmouseenter = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).show();
|
|
20155
|
-
otherTag.onmouseleave = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).hide();
|
|
20156
|
-
}
|
|
20157
|
-
otherTag.onclick = e => this.onClickControl(e, otherTagIds, otherTagIsSingle ? false : true);
|
|
20158
|
-
otherTag.innerHTML = this.tagHtmlTemplate(createOthertagElement, true, otherTagIsSingle);
|
|
20159
|
-
otherTag.dataset.ids = hiddenTags.join(',');
|
|
20160
|
-
virtualDom.appendChild(otherTag);
|
|
20161
|
-
}
|
|
20162
|
-
}
|
|
20163
|
-
const otherTag = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
|
|
20164
|
-
const otherTagWidth = otherTag ? (otherTag.clientWidth && otherTag.clientWidth < 50 ? 50 : otherTag.clientWidth) : 200;
|
|
20165
|
-
const tagsPerRow = Math.floor(containerWidth[0] - tagsWidth);
|
|
20166
|
-
if (tagsPerRow > otherTagWidth) {
|
|
20167
|
-
if (otherTag) {
|
|
20168
|
-
const findElement = this.values.find(value => value.id == otherTag.dataset.ids.split(',')[0]);
|
|
20169
|
-
const tag = document.createElement('div');
|
|
20170
|
-
tag.classList.add('bcm-tag');
|
|
20171
|
-
tag.id = `list-${this.listId}-${findElement.id}`;
|
|
20172
|
-
// tag.title = findElement?.title || '';
|
|
20173
|
-
tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').show();
|
|
20174
|
-
tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').hide();
|
|
20175
|
-
tag.dataset.id = findElement.id;
|
|
20176
|
-
tag.onclick = e => this.onClickControl(e, findElement === null || findElement === void 0 ? void 0 : findElement.id);
|
|
20177
|
-
tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, findElement), { text: stringHelper.StringHelper.textLimitter(findElement.text, 10) }));
|
|
20178
|
-
const otherTagElement = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
|
|
20179
|
-
otherTagElement.remove();
|
|
20180
|
-
virtualDom.appendChild(tag);
|
|
20181
|
-
}
|
|
20182
|
-
}
|
|
20183
|
-
}
|
|
20184
|
-
}
|
|
20185
|
-
else {
|
|
20186
|
-
virtualDom.innerHTML = '';
|
|
20187
|
-
}
|
|
20188
|
-
}
|
|
20189
|
-
}
|
|
20190
|
-
}
|
|
20191
|
-
|
|
20192
|
-
const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{scroll-behavior:smooth;padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800;transition:visibility 0s linear 400ms, opacity 100ms, transform 200ms}.bcm-list__container.bcm-list__type-linked-component.bcm-list--top,.bcm-list__container.bcm-list__type-select.bcm-list--top,.bcm-list__container.bcm-list__type-autocomplete.bcm-list--top{transform:translateY(-10%)}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{opacity:1;transform:translateY(0);visibility:visible;transition:visibility 0s linear 0s, opacity 100ms, transform 100ms}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{width:100%}.bcm-list__input-container.value-empty{color:var(--bcm-color-grey-6)}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:var(--bcm-color-grey-6)}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px;min-width:40px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-50);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);user-select:none;cursor:not-allowed}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--readonly:focus>.bcm-list__item-content:not(.disabled),.bcm-list__item--readonly.focused>.bcm-list__item-content:not(.disabled){color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content{color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content:hover,.bcm-list__item--readonly>.bcm-list__item-content:focus{color:var(--bcm-color-grey-7)}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
|
|
20193
|
-
|
|
20194
|
-
var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
20195
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
20196
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
20197
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
20198
|
-
else
|
|
20199
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
20200
|
-
if (d = decorators[i])
|
|
20201
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
20202
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
20203
|
-
};
|
|
20204
|
-
const BcmList = class {
|
|
20205
|
-
constructor(hostRef) {
|
|
20206
|
-
index$1.registerInstance(this, hostRef);
|
|
20207
|
-
this.bcmChecklist = index$1.createEvent(this, "bcm-checklist", 7);
|
|
20208
|
-
this.bcmSelected = index$1.createEvent(this, "bcm-selected", 7);
|
|
20209
|
-
this.change = index$1.createEvent(this, "bcm-change", 7);
|
|
20210
|
-
this.open = index$1.createEvent(this, "bcm-open", 7);
|
|
20211
|
-
this.close = index$1.createEvent(this, "bcm-close", 7);
|
|
20212
|
-
this.debounce = null;
|
|
20213
|
-
this.debounceHandler = generate.Generate.debounceInput(() => this.listenResize(), 300, false);
|
|
20214
|
-
this._id = generate.Generate.UID();
|
|
20215
|
-
this.type = bcm.Bcm$1.ListType.listbox;
|
|
20216
|
-
this.treeview = false;
|
|
20217
|
-
this.checkboxes = false;
|
|
20218
|
-
this.searchable = false;
|
|
20219
|
-
this.value = null;
|
|
20220
|
-
this.inputText = undefined;
|
|
20221
|
-
this.name = undefined;
|
|
20222
|
-
this.label = undefined;
|
|
20223
|
-
this.size = bcm.Bcm$1.Size.medium;
|
|
20224
|
-
this.disabled = false;
|
|
20225
|
-
this.readonly = false;
|
|
20226
|
-
this.highlight = false;
|
|
20227
|
-
this.highlightText = undefined;
|
|
20228
|
-
this.required = false;
|
|
20229
|
-
this.hidden = false;
|
|
20230
|
-
this.fullWidth = false;
|
|
20231
|
-
this.height = '256px';
|
|
20232
|
-
this.maxHeight = '500px';
|
|
20233
|
-
this.minHeight = '150px';
|
|
20234
|
-
this.width = '256px';
|
|
20235
|
-
this.infoFooter = false;
|
|
20236
|
-
this.variableText = 'item';
|
|
20237
|
-
this.template = undefined;
|
|
20238
|
-
this.allOpen = false;
|
|
20239
|
-
this.keyControl = false;
|
|
20240
|
-
this.checkAll = true;
|
|
20241
|
-
this.stopDeepClean = false;
|
|
20242
|
-
this.linkedComponent = undefined;
|
|
20243
|
-
this.isOpen = false;
|
|
20244
|
-
this.calculatedViewport = false;
|
|
20245
|
-
this.isSelectedOther = false;
|
|
20246
|
-
this.isHaveOtherTag = false;
|
|
20247
|
-
this.placeholder = 'Choose an option';
|
|
20248
|
-
this.searchPlaceholder = 'Search';
|
|
20249
|
-
this.searchIsOnlyChilds = false;
|
|
20250
|
-
this.minSearchLength = 2;
|
|
20251
|
-
this.clearable = false;
|
|
20252
|
-
this.caption = undefined;
|
|
20253
|
-
this.noCaption = false;
|
|
20254
|
-
this.captionType = bcm.Bcm$1.Status.default;
|
|
20255
|
-
this.captionError = undefined;
|
|
20256
|
-
this.emptyText = undefined;
|
|
20257
|
-
this.emptyIcon = 'fad fa-folder-open';
|
|
20258
|
-
this.captionCache = undefined;
|
|
20259
|
-
this.captionTypeCache = undefined;
|
|
20260
|
-
this.tick = {};
|
|
20261
|
-
this.totalData = 0;
|
|
20262
|
-
this.totalRootData = 0;
|
|
20263
|
-
this.limit = 20;
|
|
20264
|
-
this.searchGetParents = undefined;
|
|
20265
|
-
this.searchResultLimit = 20;
|
|
20266
|
-
this.searchFound = null;
|
|
20267
|
-
this.returnFilterData = {};
|
|
20268
|
-
this.returnOtherData = {};
|
|
20269
|
-
this.options = {
|
|
20270
|
-
rootMargin: '30px',
|
|
20271
|
-
};
|
|
20272
|
-
this.tagContainerWidth = 0;
|
|
20273
|
-
this.selectAllItem = {
|
|
20274
|
-
id: 'select-all',
|
|
20275
|
-
text: 'Select All',
|
|
20276
|
-
value: 'select-all',
|
|
20277
|
-
checked: false,
|
|
20278
|
-
disabled: false,
|
|
20279
|
-
icon: '',
|
|
20280
|
-
status: bcm.Bcm$1.Status.default,
|
|
20281
|
-
indeterminate: 'uncheck',
|
|
20282
|
-
};
|
|
20283
|
-
this.placement = bcm.Bcm$1.Placement['bottom-start'];
|
|
20284
|
-
this.data = [];
|
|
20285
|
-
}
|
|
20286
|
-
connectedCallback() {
|
|
20287
|
-
if (this.height != '256px') {
|
|
20288
|
-
if (this.height.indexOf('px') > -1) {
|
|
20289
|
-
this.limit = Math.floor(+this.height.replace('px', '') / 10);
|
|
20290
|
-
}
|
|
20291
|
-
else {
|
|
20292
|
-
this.limit = Math.floor(+(window.innerHeight / 10));
|
|
20293
|
-
}
|
|
20294
|
-
this.searchResultLimit = this.limit;
|
|
20295
|
-
this.markForCheck();
|
|
20296
|
-
}
|
|
20297
|
-
const checkElementWithDom = document.querySelectorAll(`#bcm-list-${this._id}`);
|
|
20298
|
-
(checkElementWithDom === null || checkElementWithDom === void 0 ? void 0 : checkElementWithDom.length) > 1 && checkElementWithDom.forEach((item, index) => index > 0 && item.remove());
|
|
20299
|
-
}
|
|
20300
|
-
componentWillRender() {
|
|
20301
|
-
this.calculateLocation();
|
|
20302
|
-
}
|
|
20303
|
-
componentShouldUpdate(newVal, oldVal, propName) {
|
|
20304
|
-
if (Object.keys(this.getOptions()).indexOf(propName) > -1 && newVal !== oldVal) {
|
|
20305
|
-
this.updateOptions();
|
|
20306
|
-
}
|
|
20307
|
-
}
|
|
20308
|
-
async componentDidLoad() {
|
|
20309
|
-
await this.initState();
|
|
20310
|
-
if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
|
|
20311
|
-
const list = this.el.querySelector(`#bcm-list-${this._id}`);
|
|
20312
|
-
if (list) {
|
|
20313
|
-
document.body.appendChild(list);
|
|
20314
|
-
}
|
|
20315
|
-
}
|
|
20316
|
-
}
|
|
20317
|
-
tagCalculator() {
|
|
20318
|
-
if (this.checkboxes && (this.type == 'select' || this.type == 'autocomplete')) {
|
|
20319
|
-
const tagCalculator = new ListTagControl(`bcm-list-input-tag-container-${this._id}`, this.value, this._id, this.isSelectedOther, this.clearable);
|
|
20320
|
-
tagCalculator.calculateTags();
|
|
20321
|
-
const arrayIds = id => (typeof id == 'string' ? id.split(',') : [id]);
|
|
20322
|
-
const clearAutocomplete = () => {
|
|
20323
|
-
if (this.type == 'autocomplete') {
|
|
20324
|
-
const autocompleteInput = this.getAutoCompleteInput();
|
|
20325
|
-
if (autocompleteInput) {
|
|
20326
|
-
autocompleteInput.handleClear(false);
|
|
20327
|
-
}
|
|
20328
|
-
}
|
|
20329
|
-
};
|
|
20330
|
-
tagCalculator.onClickOtherTag = async (id) => {
|
|
20331
|
-
if (!this.disabled) {
|
|
20332
|
-
clearAutocomplete();
|
|
20333
|
-
if (this.isSelectedOther) {
|
|
20334
|
-
await this.unSelectOther();
|
|
20335
|
-
}
|
|
20336
|
-
else {
|
|
20337
|
-
await this.onClearSearch();
|
|
20338
|
-
this.isSelectedOther = true;
|
|
20339
|
-
this.filterOtherList(arrayIds(id));
|
|
20340
|
-
this.isOpen = true;
|
|
20341
|
-
}
|
|
20342
|
-
this.onSelectSearch();
|
|
20343
|
-
}
|
|
20344
|
-
};
|
|
20345
|
-
tagCalculator.onClickTag = _ => {
|
|
20346
|
-
// console.log(id);
|
|
20347
|
-
clearAutocomplete();
|
|
20348
|
-
this.onSelectSearch();
|
|
20349
|
-
this.unSelectOther();
|
|
20350
|
-
};
|
|
20351
|
-
tagCalculator.onClickDismiss = async (id) => {
|
|
20352
|
-
var _a;
|
|
20353
|
-
if (!this.disabled) {
|
|
20354
|
-
if (this.isSelectedOther) {
|
|
20355
|
-
await this.unSelectOther();
|
|
20356
|
-
}
|
|
20357
|
-
arrayIds(id).length > 1 ? listState.removeOtherTags(this._id, arrayIds(id)) : listState.checkedItem(this._id, arrayIds(id)[0]);
|
|
20358
|
-
this.value = (await this.getCheckedList()).checkedList;
|
|
20359
|
-
this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
|
|
20360
|
-
}
|
|
20361
|
-
};
|
|
20362
|
-
}
|
|
20363
|
-
}
|
|
20364
|
-
disconnectedCallback() {
|
|
20365
|
-
this.isOpen = false;
|
|
20366
|
-
if (this.stopDeepClean)
|
|
20367
|
-
return;
|
|
20368
|
-
listState.removeState(this._id);
|
|
20369
|
-
this.el.innerHTML = '';
|
|
20370
|
-
if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
|
|
20371
|
-
const list = document.querySelectorAll(`#bcm-list-${this._id}`);
|
|
20372
|
-
if (list === null || list === void 0 ? void 0 : list.length) {
|
|
20373
|
-
list.forEach(item => item.remove());
|
|
20374
|
-
this.el.remove();
|
|
20375
|
-
}
|
|
20376
|
-
}
|
|
20377
|
-
}
|
|
20378
|
-
watchId(_, oldVal) {
|
|
20379
|
-
// console.info('Changed component id:', oldVal + ' -> ' + newVal);
|
|
20380
|
-
listState.removeState(oldVal);
|
|
20381
|
-
this.initState();
|
|
20382
|
-
}
|
|
20383
|
-
handleValueChange(newVal, oldVal) {
|
|
20384
|
-
var _a;
|
|
20385
|
-
if (generate.Generate.objectIsEmpty(this.returnFilterData)) {
|
|
20386
|
-
this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
|
|
20387
|
-
}
|
|
20388
|
-
if (this.checkboxes) {
|
|
20389
|
-
if (!validators.Validators.compareTwoArrayIsSame(newVal, oldVal)) {
|
|
20390
|
-
this.bcmChecklist.emit(this.value);
|
|
20391
|
-
this.change.emit(this.value);
|
|
20392
|
-
}
|
|
20393
|
-
}
|
|
20394
|
-
else {
|
|
20395
|
-
if ((newVal === null || newVal === void 0 ? void 0 : newVal.text) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.text)) {
|
|
20396
|
-
this.change.emit(this.value);
|
|
20397
|
-
}
|
|
20398
|
-
}
|
|
20399
|
-
this.tagCalculator();
|
|
20400
|
-
}
|
|
20401
|
-
watchReturnFilterData(newVal) {
|
|
20402
|
-
var _a;
|
|
20403
|
-
const { checkedItems, visibledItems } = newVal;
|
|
20404
|
-
if (checkedItems && visibledItems) {
|
|
20405
|
-
this.handleIndeterminate(checkedItems.length, visibledItems.length);
|
|
20406
|
-
}
|
|
20407
|
-
else {
|
|
20408
|
-
this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
|
|
20409
|
-
}
|
|
20410
|
-
}
|
|
20411
|
-
handleOtherSelected(newValue) {
|
|
20412
|
-
var _a;
|
|
20413
|
-
const tagContent = (_a = document.getElementById(`bcm-list-input-tag-${this._id}-other-tag`)) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-tag__content');
|
|
20414
|
-
if (tagContent) {
|
|
20415
|
-
if (newValue === true) {
|
|
20416
|
-
tagContent.classList.add('checkable', 'checked');
|
|
20417
|
-
}
|
|
20418
|
-
else {
|
|
20419
|
-
tagContent.classList.remove('checkable', 'checked');
|
|
20420
|
-
}
|
|
20421
|
-
}
|
|
20422
|
-
}
|
|
20423
|
-
async handleOpen() {
|
|
20424
|
-
if (this.isOpen) {
|
|
20425
|
-
this.open.emit();
|
|
20426
|
-
this.calculateLocation();
|
|
20427
|
-
this.onSelectSearch();
|
|
20428
|
-
}
|
|
20429
|
-
else {
|
|
20430
|
-
this.listScrollToTop();
|
|
20431
|
-
this.close.emit();
|
|
20432
|
-
await utils.delay(100);
|
|
20433
|
-
this.unSelectOther();
|
|
20434
|
-
}
|
|
20435
|
-
}
|
|
20436
|
-
listScrollToTop() {
|
|
20437
|
-
const list = document.querySelector(`#bcm-list-${this._id}`);
|
|
20438
|
-
if (list) {
|
|
20439
|
-
list.querySelector('.scrolling').scrollTop = 0;
|
|
20440
|
-
}
|
|
20441
|
-
}
|
|
20442
|
-
async dataChanged(newValue, oldValue) {
|
|
20443
|
-
if (!validators.Validators.compareTwoArrayIsSame(newValue, oldValue)) {
|
|
20444
|
-
await this.initState();
|
|
20445
|
-
}
|
|
20446
|
-
}
|
|
20447
|
-
isIntersecting(e) {
|
|
20448
|
-
const target = e === null || e === void 0 ? void 0 : e.target;
|
|
20449
|
-
if (target && target.id === this._id) {
|
|
20450
|
-
this.listenResize();
|
|
20451
|
-
}
|
|
20452
|
-
}
|
|
20453
|
-
handleSlotItems(e) {
|
|
20454
|
-
var _a;
|
|
20455
|
-
if (((_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
20456
|
-
this.data = e.detail;
|
|
20457
|
-
}
|
|
20458
|
-
}
|
|
20459
|
-
handleChange(e) {
|
|
20460
|
-
if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
|
|
20461
|
-
e.stopImmediatePropagation();
|
|
20462
|
-
}
|
|
20463
|
-
}
|
|
20464
|
-
handleResize() {
|
|
20465
|
-
this.calculateLocation();
|
|
20466
|
-
this.debounceHandler();
|
|
20467
|
-
}
|
|
20468
|
-
handleWheel(event) {
|
|
20469
|
-
if (this.isOpen) {
|
|
20470
|
-
const list = document.querySelector(`#bcm-list-${this._id}`);
|
|
20471
|
-
const isClickInside = list && generate.Generate.findEventPath(event, list);
|
|
20472
|
-
if (isClickInside) {
|
|
20473
|
-
if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
|
|
20474
|
-
this.calculateLocation();
|
|
20475
|
-
}
|
|
20476
|
-
}
|
|
20477
|
-
else {
|
|
20478
|
-
this.hide();
|
|
20479
|
-
}
|
|
20480
|
-
}
|
|
20481
|
-
}
|
|
20482
|
-
handleClick(event) {
|
|
20483
|
-
var _a;
|
|
20484
|
-
if (this.disabled)
|
|
20485
|
-
return;
|
|
20486
|
-
const list = document.querySelector(`#bcm-list-${this._id}`);
|
|
20487
|
-
const isClickInside = generate.Generate.findEventPath(event, this.el) || (list && generate.Generate.findEventPath(event, list));
|
|
20488
|
-
if (isClickInside) {
|
|
20489
|
-
if (this.debounce !== null) {
|
|
20490
|
-
event.preventDefault();
|
|
20491
|
-
event.stopPropagation();
|
|
20492
|
-
clearTimeout(this.debounce);
|
|
20493
|
-
this.debounce = null;
|
|
20494
|
-
}
|
|
20495
|
-
this.debounce = setTimeout(() => {
|
|
20496
|
-
this.debounce = null;
|
|
20497
|
-
}, 300);
|
|
20498
|
-
}
|
|
20499
|
-
if (!isClickInside) {
|
|
20500
|
-
if (this.type == 'autocomplete') {
|
|
20501
|
-
const autocompleteInput = this.getAutoCompleteInput();
|
|
20502
|
-
if (autocompleteInput) {
|
|
20503
|
-
if (this.checkboxes) {
|
|
20504
|
-
autocompleteInput.setValue('');
|
|
20505
|
-
}
|
|
20506
|
-
else {
|
|
20507
|
-
autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
|
|
20508
|
-
}
|
|
20509
|
-
}
|
|
20510
|
-
}
|
|
20511
|
-
}
|
|
20512
|
-
const clickToTag = generate.Generate.findEventPathWithKey(event, 'className', ['bcm-tag']);
|
|
20513
|
-
const clickToOtherTag = generate.Generate.findEventPathWithKey(event, 'className', ['bcm-tag bcm-tag--other']);
|
|
20514
|
-
const clickToSelect = generate.Generate.findEventPathWithKey(event, 'id', [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
|
|
20515
|
-
const clickToTagDismiss = generate.Generate.findEventPathWithKey(event, 'className', ['right close-button']);
|
|
20516
|
-
if (clickToSelect && !clickToTagDismiss && this.type != 'autocomplete') {
|
|
20517
|
-
this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
|
|
20518
|
-
}
|
|
20519
|
-
if (list) {
|
|
20520
|
-
if (this.isOpen) {
|
|
20521
|
-
if (!list.contains(event.target) && !this.el.contains(event.target)) {
|
|
20522
|
-
this.isOpen = false;
|
|
20523
|
-
// this.unSelectOther()
|
|
20524
|
-
}
|
|
20525
|
-
}
|
|
20526
|
-
}
|
|
20527
|
-
}
|
|
20528
|
-
bcmOnSearchClear(event) {
|
|
20529
|
-
var _a, _b;
|
|
20530
|
-
if (this.type == 'autocomplete') {
|
|
20531
|
-
if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
|
|
20532
|
-
if (event.detail) {
|
|
20533
|
-
this.setClear();
|
|
20534
|
-
}
|
|
20535
|
-
}
|
|
20536
|
-
}
|
|
20537
|
-
}
|
|
20538
|
-
bcmOnSearch(event) {
|
|
20539
|
-
var _a, _b, _c, _d, _e, _f;
|
|
20540
|
-
if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
|
|
20541
|
-
this.searchGetParents = generate.snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
|
|
20542
|
-
this.searchResultLimit = 10;
|
|
20543
|
-
this.searchFound = ((_c = event.detail) === null || _c === void 0 ? void 0 : _c.matching) != null ? (_d = event.detail) === null || _d === void 0 ? void 0 : _d.matching.length : null;
|
|
20544
|
-
this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
|
|
20545
|
-
if (this.searchFound > 0 && this.highlight) {
|
|
20546
|
-
this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
|
|
20547
|
-
}
|
|
20548
|
-
if (this.type == 'autocomplete') {
|
|
20549
|
-
this.isOpen = true;
|
|
20550
|
-
}
|
|
20551
|
-
if (!event.detail.result) {
|
|
20552
|
-
if (this.type == 'autocomplete') {
|
|
20553
|
-
this.isOpen = false;
|
|
20554
|
-
}
|
|
20555
|
-
if (this.isSelectedOther) {
|
|
20556
|
-
this.filterOtherList(this.otherTagIds());
|
|
20557
|
-
}
|
|
20558
|
-
else {
|
|
20559
|
-
this.returnFilterData = {};
|
|
20560
|
-
listState.filterData(this._id, null);
|
|
20561
|
-
}
|
|
20562
|
-
// this.isSelectedOther = false
|
|
20563
|
-
this.searchResultLimit = null;
|
|
20564
|
-
this.highlightText = null;
|
|
20565
|
-
}
|
|
20566
|
-
this.markForCheck();
|
|
20567
|
-
}
|
|
20568
|
-
}
|
|
20569
|
-
//keyboard navigation
|
|
20570
|
-
handleKeyDown(ev) {
|
|
20571
|
-
const keycode = ev.keyCode || ev.which;
|
|
20572
|
-
if (keycode === bcm.Bcm$1.KeyCode.escape) {
|
|
20573
|
-
if (this.isOpen) {
|
|
20574
|
-
this.isOpen = false;
|
|
20575
|
-
ev.preventDefault();
|
|
20576
|
-
ev.stopPropagation();
|
|
20577
|
-
ev.stopImmediatePropagation();
|
|
20578
|
-
}
|
|
20579
|
-
}
|
|
20580
|
-
if (this.keyControl) {
|
|
20581
|
-
const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
|
|
20582
|
-
keyboard.openGroup = openGroupId => {
|
|
20583
|
-
this.openGroup(openGroupId);
|
|
20584
|
-
};
|
|
20585
|
-
keyboard.checkedItem = checkedItemId => {
|
|
20586
|
-
this.checkedItem(checkedItemId);
|
|
20587
|
-
};
|
|
20588
|
-
keyboard.keyDown();
|
|
20589
|
-
}
|
|
20590
|
-
}
|
|
20591
|
-
handleKeyUp(ev) {
|
|
20592
|
-
if (this.keyControl) {
|
|
20593
|
-
const focusedList = generate.Generate.findEventPath(ev, this.el);
|
|
20594
|
-
if (focusedList) {
|
|
20595
|
-
const list = document.getElementById(`bcm-list-${this._id}`);
|
|
20596
|
-
if (list) {
|
|
20597
|
-
const items = list.querySelectorAll('.bcm-list__item.focused');
|
|
20598
|
-
if (items.length > 0) {
|
|
20599
|
-
const main = list.querySelector('main');
|
|
20600
|
-
const itemHeight = items[0].offsetHeight;
|
|
20601
|
-
const listHeight = main.offsetHeight;
|
|
20602
|
-
const itemTop = items[0].offsetTop;
|
|
20603
|
-
if (itemTop > listHeight) {
|
|
20604
|
-
main.scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
|
|
20605
|
-
}
|
|
20606
|
-
if (itemTop < listHeight) {
|
|
20607
|
-
main.scrollTop = itemTop - listHeight / 2 - itemHeight / 2;
|
|
20608
|
-
}
|
|
20609
|
-
}
|
|
20610
|
-
}
|
|
20611
|
-
}
|
|
20612
|
-
}
|
|
20613
|
-
}
|
|
20614
|
-
async set(data) {
|
|
20615
|
-
if (data) {
|
|
20616
|
-
if (Array.isArray(data)) {
|
|
20617
|
-
this.addChecked(data);
|
|
20618
|
-
}
|
|
20619
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
20620
|
-
this.selectedItem(data);
|
|
20621
|
-
}
|
|
20622
|
-
}
|
|
20623
|
-
else {
|
|
20624
|
-
this.setClear();
|
|
20625
|
-
}
|
|
20626
|
-
}
|
|
20627
|
-
async get() {
|
|
20628
|
-
var _a, _b;
|
|
20629
|
-
return this.value ? (this.checkboxes ? (_b = (_a = ((await this.getCheckedList()))) === null || _a === void 0 ? void 0 : _a.checkedList) === null || _b === void 0 ? void 0 : _b.map(item => item.id) : this.value.id) : null;
|
|
20630
|
-
}
|
|
20631
|
-
async getCheckedList() {
|
|
20632
|
-
return Promise.resolve(listState.getCheckedList(this._id));
|
|
20633
|
-
}
|
|
20634
|
-
async getSelected() {
|
|
20635
|
-
return Promise.resolve(listState.getSelected(this._id));
|
|
20636
|
-
}
|
|
20637
|
-
async getValue() {
|
|
20638
|
-
return Promise.resolve(this.value);
|
|
20639
|
-
}
|
|
20640
|
-
async addChecked(ids = [], save = false, emit = true) {
|
|
20641
|
-
if (ids && ids.length > 0) {
|
|
20642
|
-
if (!save) {
|
|
20643
|
-
listState.setClear(this._id);
|
|
20644
|
-
await utils.delay(10);
|
|
20645
|
-
}
|
|
20646
|
-
await listState.addChecked(this._id, ids);
|
|
20647
|
-
await utils.delay(10);
|
|
20648
|
-
emit && (this.value = (await this.getCheckedList()).checkedList);
|
|
20649
|
-
this.markForCheck();
|
|
20650
|
-
}
|
|
20651
|
-
return Promise.resolve(this.value);
|
|
20652
|
-
}
|
|
20653
|
-
async selected(id) {
|
|
20654
|
-
if (id) {
|
|
20655
|
-
return Promise.resolve(await this.selectedItem(id));
|
|
20656
|
-
}
|
|
20657
|
-
return false;
|
|
20658
|
-
}
|
|
20659
|
-
async setClear(e) {
|
|
20660
|
-
listState.setClear(this._id);
|
|
20661
|
-
this.value = null;
|
|
20662
|
-
this.inputText = '';
|
|
20663
|
-
this.isOpen = false;
|
|
20664
|
-
this.selectAllItem.indeterminate = 'uncheck';
|
|
20665
|
-
this.tagCalculator();
|
|
20666
|
-
this.markForCheck();
|
|
20667
|
-
if (e) {
|
|
20668
|
-
e.stopPropagation();
|
|
20669
|
-
e.preventDefault();
|
|
20670
|
-
}
|
|
20671
|
-
await utils.delay(10);
|
|
20672
|
-
return Promise.resolve();
|
|
20673
|
-
}
|
|
20674
|
-
async resetCaption() {
|
|
20675
|
-
await utils.delay(10);
|
|
20676
|
-
this.caption = this.captionCache;
|
|
20677
|
-
this.captionType = this.captionTypeCache;
|
|
20678
|
-
this.captionError = null;
|
|
20679
|
-
await utils.delay(10);
|
|
20680
|
-
return Promise.resolve();
|
|
20681
|
-
}
|
|
20682
|
-
async show() {
|
|
20683
|
-
this.isOpen = true;
|
|
20684
|
-
return Promise.resolve();
|
|
20685
|
-
}
|
|
20686
|
-
async hide() {
|
|
20687
|
-
this.isOpen = false;
|
|
20688
|
-
return Promise.resolve();
|
|
20689
|
-
}
|
|
20690
|
-
updateOptions() {
|
|
20691
|
-
listState.updateOptions(this._id, this);
|
|
20692
|
-
}
|
|
20693
|
-
handleIndeterminate(checkeds, total) {
|
|
20694
|
-
this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? 'check' : 'indeterminate') : 'uncheck', checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
|
|
20695
|
-
}
|
|
20696
|
-
listenResize() {
|
|
20697
|
-
this.tagCalculator();
|
|
20698
|
-
this.calculateLocation();
|
|
20699
|
-
this.markForCheck();
|
|
20700
|
-
}
|
|
20701
|
-
async unSelectOther() {
|
|
20702
|
-
await this.onClearSearch();
|
|
20703
|
-
this.isSelectedOther = false;
|
|
20704
|
-
this.searchFound = null;
|
|
20705
|
-
this.returnFilterData = {};
|
|
20706
|
-
listState.filterData(this._id, null);
|
|
20707
|
-
await utils.delay(10);
|
|
20708
|
-
return Promise.resolve();
|
|
20709
|
-
}
|
|
20710
|
-
async onClearSearch() {
|
|
20711
|
-
const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
|
|
20712
|
-
if (searchInput) {
|
|
20713
|
-
await searchInput.handleClear();
|
|
20714
|
-
}
|
|
20715
|
-
return Promise.resolve();
|
|
20716
|
-
}
|
|
20717
|
-
async onSelectSearch() {
|
|
20718
|
-
const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
|
|
20719
|
-
if (searchInput) {
|
|
20720
|
-
await utils.delay(100);
|
|
20721
|
-
searchInput.onBcmFocus();
|
|
20722
|
-
searchInput.onBcmSelect();
|
|
20723
|
-
}
|
|
20724
|
-
}
|
|
20725
|
-
otherTagIds() {
|
|
20726
|
-
const otherTag = document.querySelector(`#bcm-list-input-tag-${this._id}-other-tag`);
|
|
20727
|
-
if (otherTag) {
|
|
20728
|
-
return otherTag.getAttribute('data-ids').split(',');
|
|
20729
|
-
}
|
|
20730
|
-
}
|
|
20731
|
-
async filterOtherList(ids) {
|
|
20732
|
-
const checklist = (await this.getCheckedList()).nestedResult;
|
|
20733
|
-
const filter = generate.Generate.convertIdsToNestedData(ids, checklist);
|
|
20734
|
-
this.returnFilterData = await listState.filterData(this._id, filter, null, true);
|
|
20735
|
-
this.searchFound = (ids === null || ids === void 0 ? void 0 : ids.length) || 0;
|
|
20736
|
-
this.limit = 500;
|
|
20737
|
-
this.searchGetParents = null;
|
|
20738
|
-
await utils.delay(1000);
|
|
20739
|
-
this.markForCheck();
|
|
20740
|
-
}
|
|
20741
|
-
async initState() {
|
|
20742
|
-
var _a, _b, _c;
|
|
20743
|
-
this.onClearSearch();
|
|
20744
|
-
await listState.setValue({
|
|
20745
|
-
id: this._id,
|
|
20746
|
-
dataSource: this.data && generate.snq(() => (typeof this.data == 'string' ? JSON.parse(this.data) : this.data), []),
|
|
20747
|
-
options: this,
|
|
20748
|
-
});
|
|
20749
|
-
const { totalRoots, totalItems } = listState.getValue(this._id);
|
|
20750
|
-
this.totalData = totalItems;
|
|
20751
|
-
this.totalRootData = totalRoots;
|
|
20752
|
-
this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
|
|
20753
|
-
if (!this.checkboxes) {
|
|
20754
|
-
this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
|
|
20755
|
-
}
|
|
20756
|
-
// checkli olan subparentların indeterminate kontrolü için
|
|
20757
|
-
if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
20758
|
-
const checkedIDs = [];
|
|
20759
|
-
this.value.forEach(item => {
|
|
20760
|
-
if (!item.items || item.items.length === 0) {
|
|
20761
|
-
checkedIDs.push(item.id);
|
|
20762
|
-
}
|
|
20763
|
-
});
|
|
20764
|
-
await this.addChecked(checkedIDs, false, false);
|
|
20765
|
-
}
|
|
20766
|
-
await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
|
|
20767
|
-
await this.markForCheck();
|
|
20768
|
-
}
|
|
20769
|
-
async markForCheck() {
|
|
20770
|
-
await utils.delay(10);
|
|
20771
|
-
this.tick = generate.Generate.UID();
|
|
20772
|
-
}
|
|
20773
|
-
getOptions() {
|
|
20774
|
-
return generate.snq(() => listState.getValue(this._id).options, {});
|
|
20775
|
-
}
|
|
20776
|
-
getItems() {
|
|
20777
|
-
if (this.isSelectedOther) {
|
|
20778
|
-
return this.returnFilterData['checkedItems'];
|
|
20779
|
-
}
|
|
20780
|
-
return generate.snq(() => listState.getData(this._id), []);
|
|
20781
|
-
}
|
|
20782
|
-
getLimitedItems(ids) {
|
|
20783
|
-
return generate.snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
|
|
20784
|
-
}
|
|
20785
|
-
openGroup(parentId) {
|
|
20786
|
-
listState.openGroup(this._id, parentId);
|
|
20787
|
-
this.markForCheck();
|
|
20788
|
-
}
|
|
20789
|
-
focusItem(e) {
|
|
20790
|
-
if (e.target.classList.contains('bcm-list__item')) {
|
|
20791
|
-
const item = e.target;
|
|
20792
|
-
const list = document.getElementById(`bcm-list-${this._id}`);
|
|
20793
|
-
if (list) {
|
|
20794
|
-
const items = list.querySelectorAll('.bcm-list__item');
|
|
20795
|
-
if (items.length > 0) {
|
|
20796
|
-
const selectedItem = list.querySelector('.bcm-list__item.focused');
|
|
20797
|
-
if (selectedItem) {
|
|
20798
|
-
selectedItem.classList.remove('focused');
|
|
20799
|
-
}
|
|
20800
|
-
item.classList.add('focused');
|
|
20801
|
-
}
|
|
20802
|
-
}
|
|
20803
|
-
}
|
|
20804
|
-
}
|
|
20805
|
-
async selectedItem(itemId) {
|
|
20806
|
-
var _a;
|
|
20807
|
-
if (!this.checkboxes) {
|
|
20808
|
-
this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
|
|
20809
|
-
this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
|
|
20810
|
-
this.isOpen = false;
|
|
20811
|
-
this.markForCheck();
|
|
20812
|
-
if (this.type == 'autocomplete' && this.value) {
|
|
20813
|
-
// await delay(100)
|
|
20814
|
-
// this.resetCaption()
|
|
20815
|
-
const autocompleteInput = this.getAutoCompleteInput();
|
|
20816
|
-
if (autocompleteInput) {
|
|
20817
|
-
setTimeout(() => {
|
|
20818
|
-
var _a;
|
|
20819
|
-
autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
|
|
20820
|
-
this.isOpen = false;
|
|
20821
|
-
}, 100);
|
|
20822
|
-
}
|
|
20823
|
-
}
|
|
20824
|
-
}
|
|
20825
|
-
return Promise.resolve(this.value);
|
|
20826
|
-
}
|
|
20827
|
-
async checkedItem(itemId) {
|
|
20828
|
-
const isCheckSelectAll = itemId === 'select-all';
|
|
20829
|
-
if (!isCheckSelectAll) {
|
|
20830
|
-
listState.checkedItem(this._id, itemId);
|
|
20831
|
-
}
|
|
20832
|
-
else {
|
|
20833
|
-
listState.selectAll(this._id, !this.selectAllItem.checked);
|
|
20834
|
-
}
|
|
20835
|
-
this.value = (await this.getCheckedList()).checkedList;
|
|
20836
|
-
this.changeVisibleCheckeds();
|
|
20837
|
-
this.markForCheck();
|
|
20838
|
-
}
|
|
20839
|
-
changeVisibleCheckeds() {
|
|
20840
|
-
const { visibledItems } = this.returnFilterData;
|
|
20841
|
-
this.returnFilterData = {
|
|
20842
|
-
visibledItems,
|
|
20843
|
-
checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || [],
|
|
20844
|
-
};
|
|
20845
|
-
}
|
|
20846
|
-
getAutoCompleteInput() {
|
|
20847
|
-
return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
|
|
20848
|
-
}
|
|
20849
|
-
dataScrollEvent(event) {
|
|
20850
|
-
let count = 0;
|
|
20851
|
-
let io = new IntersectionObserver((data) => {
|
|
20852
|
-
if (count === 0) {
|
|
20853
|
-
count++;
|
|
20854
|
-
if (data[0].isIntersecting) {
|
|
20855
|
-
this.limit += 15;
|
|
20856
|
-
this.searchResultLimit += 15;
|
|
20857
|
-
io.disconnect();
|
|
20858
|
-
io = null;
|
|
20859
|
-
}
|
|
20860
|
-
}
|
|
20861
|
-
}, this.options);
|
|
20862
|
-
io.observe(event.target.lastElementChild);
|
|
20863
|
-
}
|
|
20864
|
-
async calculateLocation() {
|
|
20865
|
-
var _a, _b;
|
|
20866
|
-
if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
|
|
20867
|
-
const list = document.getElementById(`bcm-list-${this._id}`);
|
|
20868
|
-
// list && (list.style.height = '256px') //sebebi neydi ki!
|
|
20869
|
-
var placement = this.placement;
|
|
20870
|
-
const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
|
|
20871
|
-
const targetElement = document.getElementById(targetElementId);
|
|
20872
|
-
if (list && targetElement) {
|
|
20873
|
-
popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
|
|
20874
|
-
await utils.delay(10);
|
|
20875
|
-
let pos = popoverPlacement.setPosition(placement, targetElement);
|
|
20876
|
-
let captionAreaHeight = 0;
|
|
20877
|
-
let labelAreaHeight = 0;
|
|
20878
|
-
if (this.linkedComponent) {
|
|
20879
|
-
const linked = document.getElementById(this.linkedComponent);
|
|
20880
|
-
if (linked) {
|
|
20881
|
-
if (!linked['noCaption']) {
|
|
20882
|
-
const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-caption-area')) || linked.querySelector('.bcm-caption-area');
|
|
20883
|
-
if (captionArea) {
|
|
20884
|
-
captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
|
|
20885
|
-
}
|
|
20886
|
-
}
|
|
20887
|
-
const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.bcm-label')) || linked.querySelector('.bcm-label');
|
|
20888
|
-
if (labelArea) {
|
|
20889
|
-
labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
|
|
20890
|
-
}
|
|
20891
|
-
}
|
|
20892
|
-
}
|
|
20893
|
-
if (this.fullWidth) {
|
|
20894
|
-
list.style.width = targetElement.offsetWidth + 'px';
|
|
20895
|
-
}
|
|
20896
|
-
else {
|
|
20897
|
-
list.style.width = this.width || 'auto';
|
|
20898
|
-
}
|
|
20899
|
-
if (this.height.indexOf('%') > -1) {
|
|
20900
|
-
list.style.height = numberHelper.NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + 'px';
|
|
20901
|
-
}
|
|
20902
|
-
else {
|
|
20903
|
-
list.style.height = this.height;
|
|
20904
|
-
}
|
|
20905
|
-
list.style.minHeight = this.minHeight;
|
|
20906
|
-
// const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
|
|
20907
|
-
const calculatedMaxHeight = placement.split('-')[0] == 'top' ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
|
|
20908
|
-
if (this.maxHeight.indexOf('%') > -1) {
|
|
20909
|
-
list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + 'px';
|
|
20910
|
-
}
|
|
20911
|
-
else {
|
|
20912
|
-
list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + 'px';
|
|
20913
|
-
}
|
|
20914
|
-
popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
|
|
20915
|
-
await utils.delay(10);
|
|
20916
|
-
pos = popoverPlacement.setPosition(placement, targetElement);
|
|
20917
|
-
list.style.top = (placement.split('-')[0] == 'top' ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
|
|
20918
|
-
// list.style.left = pos[1] + 'px';
|
|
20919
|
-
list.style.left = placement.split('-')[1] == 'end' ? pos[1] - list.offsetWidth + 'px' : pos[1] + 'px';
|
|
20920
|
-
list.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
|
|
20921
|
-
this.calculatedViewport = true;
|
|
20922
|
-
}
|
|
20923
|
-
}
|
|
20924
|
-
}
|
|
20925
|
-
render() {
|
|
20926
|
-
const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
|
|
20927
|
-
const hostClasses = index$2.classnames('bcm-list', `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === 'large' ? 'size-3' : 'size-2', {
|
|
20928
|
-
'error': this.captionType == bcm.Bcm$1.Status.error,
|
|
20929
|
-
'full-width': fullWidth,
|
|
20930
|
-
'bcm-list__linked': this.linkedComponent,
|
|
20931
|
-
hidden,
|
|
20932
|
-
readonly,
|
|
20933
|
-
disabled,
|
|
20934
|
-
});
|
|
20935
|
-
const bcmListContainer = index$2.classnames('bcm-list__container', this.linkedComponent ? 'bcm-list__type-linked-component' : `bcm-list__type-${this.type}`, {
|
|
20936
|
-
'is-open': this.isOpen && this.calculatedViewport,
|
|
20937
|
-
'error': this.captionType == bcm.Bcm$1.Status.error,
|
|
20938
|
-
'full-width': fullWidth,
|
|
20939
|
-
hidden,
|
|
20940
|
-
readonly,
|
|
20941
|
-
disabled,
|
|
20942
|
-
});
|
|
20943
|
-
const bcmListInput = index$2.classnames('bcm-list__input');
|
|
20944
|
-
const openedType = this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent;
|
|
20945
|
-
return (index$1.h(index$1.Host, { class: hostClasses, tabindex: "0", style: {
|
|
20946
|
-
'--width': fullWidth ? '100%' : this.width,
|
|
20947
|
-
'--height': openedType ? '100%' : this.height,
|
|
20948
|
-
'--max-height': openedType ? 'inherit' : this.maxHeight,
|
|
20949
|
-
'--min-height': openedType ? 'inherit' : this.minHeight,
|
|
20950
|
-
} }, index$1.h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (index$1.h("div", null, index$1.h(labelTemplate.LabelTemplate, { size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == 'select' && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, index$1.h("span", { class: index$2.classnames('bcm-list__input-container', { 'type-single': !checkboxes, 'value-empty': !this.value }) }, this.checkboxes && index$1.h("span", { id: `bcm-list-input-tag-container-${this._id}`, class: "bcm-list__input-tag-container" }), this.checkboxes && !this.value && index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder), !this.checkboxes && (this.value ? this.inputText : index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), index$1.h("span", { class: index$2.classnames('bcm-list__input-buttons', {
|
|
20951
|
-
disabled: disabled,
|
|
20952
|
-
}) }, this.clearable && this.value && (index$1.h("div", { class: "bcm-list__input-buttons-button" }, index$1.h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), index$1.h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && 'caret-is-open'}` }, index$1.h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === 'autocomplete' && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: index$2.classnames(bcmListInput, { 'bcm-list__input-autocomplete': this.type == 'autocomplete' }) }, index$1.h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && index$1.h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), index$1.h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), index$1.h(ListTemplate, { highlight: this.highlightText, searchable: this.type == 'autocomplete' ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), index$1.h(captionTemplate.CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
|
|
20953
|
-
}
|
|
20954
|
-
get el() { return index$1.getElement(this); }
|
|
20955
|
-
static get watchers() { return {
|
|
20956
|
-
"_id": ["watchId"],
|
|
20957
|
-
"value": ["handleValueChange"],
|
|
20958
|
-
"returnFilterData": ["watchReturnFilterData"],
|
|
20959
|
-
"isSelectedOther": ["handleOtherSelected"],
|
|
20960
|
-
"isOpen": ["handleOpen"],
|
|
20961
|
-
"data": ["dataChanged"]
|
|
20962
|
-
}; }
|
|
20963
|
-
};
|
|
20964
|
-
__decorate$5([
|
|
20965
|
-
isLoadDecorator.IsLoad()
|
|
20966
|
-
], BcmList.prototype, "el", void 0);
|
|
20967
|
-
__decorate$5([
|
|
20968
|
-
jsonParseDecarator.JsonParse('data', true)
|
|
20969
|
-
], BcmList.prototype, "dataChanged", null);
|
|
20970
|
-
BcmList.style = listCss;
|
|
20971
|
-
|
|
20972
|
-
const { state: state$1 } = index.createStore({
|
|
20973
|
-
value: new Map(),
|
|
20974
|
-
});
|
|
20975
|
-
const setValue$1 = val => {
|
|
20976
|
-
const { id, dataSource } = val;
|
|
20977
|
-
const data = {
|
|
20978
|
-
id: generate.snq(() => id, generate.Generate.UID),
|
|
20979
|
-
dataSource: dataSource && dataSource.length > 0 && recursive(dataSource),
|
|
20980
|
-
searchIsOnlyChilds: val.searchIsOnlyChilds,
|
|
20981
|
-
};
|
|
20982
|
-
state$1.value.set(data.id, data);
|
|
20983
|
-
};
|
|
20984
|
-
const recursive = (data, parentId) => {
|
|
20985
|
-
let recData = [];
|
|
20986
|
-
if (data) {
|
|
20987
|
-
recData = data.map(item => (Object.assign(Object.assign(Object.assign({}, item), { parentId: generate.snq(() => parentId, null) }), (item.items && item.items.length > 0 && { items: generate.snq(() => recursive(item.items, item.id), []) }))));
|
|
20988
|
-
}
|
|
20989
|
-
return recData;
|
|
20990
|
-
};
|
|
20991
|
-
const removeValue = _id => {
|
|
20992
|
-
state$1.value.delete(_id);
|
|
20993
|
-
};
|
|
20994
|
-
const getValue$1 = id => generate.snq(() => state$1.value.get(id), {});
|
|
20995
|
-
const getDataPagination = (id, limit = 3) => {
|
|
20996
|
-
let data = [];
|
|
20997
|
-
const value = getValue$1(id);
|
|
20998
|
-
if (value) {
|
|
20999
|
-
const { dataSource } = value;
|
|
21000
|
-
data = dataSource.slice(0, limit);
|
|
21001
|
-
}
|
|
21002
|
-
return data;
|
|
21003
|
-
};
|
|
21004
|
-
// //search treeview data by text
|
|
21005
|
-
// const searchData = (id, search, items?) => {
|
|
21006
|
-
// let dataSource
|
|
21007
|
-
// if (items && items.length > 0) {
|
|
21008
|
-
// dataSource = items
|
|
21009
|
-
// } else {
|
|
21010
|
-
// const value = getValue(id);
|
|
21011
|
-
// dataSource = value.dataSource;
|
|
21012
|
-
// }
|
|
21013
|
-
// let result = []
|
|
21014
|
-
// if (dataSource) {
|
|
21015
|
-
// dataSource.forEach(child => {
|
|
21016
|
-
// if (child.text.toLowerCase().includes(search.toLowerCase())) {
|
|
21017
|
-
// result.push(child)
|
|
21018
|
-
// }
|
|
21019
|
-
// result = result.concat(searchData(id, search, child.items))
|
|
21020
|
-
// })
|
|
21021
|
-
// };
|
|
21022
|
-
// return result
|
|
21023
|
-
// };
|
|
21024
|
-
//nested search
|
|
21025
|
-
const searchData = (id, searchText, items) => {
|
|
21026
|
-
let dataSource;
|
|
21027
|
-
if (items && items.length > 0) {
|
|
21028
|
-
dataSource = items;
|
|
21029
|
-
}
|
|
21030
|
-
else {
|
|
21031
|
-
const value = getValue$1(id);
|
|
21032
|
-
dataSource = value.dataSource;
|
|
21033
|
-
}
|
|
21034
|
-
let results = [];
|
|
21035
|
-
if (dataSource) {
|
|
21036
|
-
results.push(nestedSearch(id, dataSource, searchText));
|
|
21037
|
-
//return with their parents
|
|
21038
|
-
// dataSource.forEach(child => {
|
|
21039
|
-
// if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
|
|
21040
|
-
// results.push(child)
|
|
21041
|
-
// } else if (child.items && child.items.length > 0) {
|
|
21042
|
-
// child.items = nestedSearch(child.items, searchText)
|
|
21043
|
-
// if (child.items.length > 0) {
|
|
21044
|
-
// results.push(child)
|
|
21045
|
-
// }
|
|
21046
|
-
// }
|
|
21047
|
-
// })
|
|
21048
|
-
}
|
|
21049
|
-
return {
|
|
21050
|
-
result: generate.snq(() => generate.Generate.flatArray(results[0].result), []),
|
|
21051
|
-
matching: generate.snq(() => results[0].matching, []),
|
|
21052
|
-
parentIndex: generate.snq(() => results[0].parentIndex, []),
|
|
21053
|
-
nestedResult: generate.snq(() => results[0].nestedResult, []),
|
|
21054
|
-
};
|
|
21055
|
-
};
|
|
21056
|
-
const nestedSearch = (id, items, searchText) => {
|
|
21057
|
-
let matching = [];
|
|
21058
|
-
let parentIndex = [];
|
|
21059
|
-
let result = [];
|
|
21060
|
-
let nestedResult = [];
|
|
21061
|
-
const { searchIsOnlyChilds } = getValue$1(id);
|
|
21062
|
-
if (items && items.length > 0) {
|
|
21063
|
-
items.forEach(child => {
|
|
21064
|
-
let isChild = searchIsOnlyChilds && child.parentId !== null;
|
|
21065
|
-
let isMatching = stringHelper.StringHelper.slugify(child.text).indexOf(stringHelper.StringHelper.slugify(searchText)) > -1 ||
|
|
21066
|
-
(child.keywords && stringHelper.StringHelper.slugify(child.keywords).indexOf(stringHelper.StringHelper.slugify(searchText)) > -1);
|
|
21067
|
-
if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
|
|
21068
|
-
result.push(child.id);
|
|
21069
|
-
matching.push(child.id);
|
|
21070
|
-
parentIndex.push(child.id);
|
|
21071
|
-
nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
|
|
21072
|
-
if (child.items && child.items.length > 0) {
|
|
21073
|
-
const found = nestedSearch(id, child.items, searchText);
|
|
21074
|
-
if (found.matching.length > 0) {
|
|
21075
|
-
found.matching.forEach(chi => {
|
|
21076
|
-
matching.push(chi);
|
|
21077
|
-
});
|
|
21078
|
-
}
|
|
21079
|
-
}
|
|
21080
|
-
}
|
|
21081
|
-
else if (child.items && child.items.length > 0) {
|
|
21082
|
-
const found = nestedSearch(id, child.items, searchText);
|
|
21083
|
-
if (found.result.length > 0) {
|
|
21084
|
-
found.result.forEach(chi => {
|
|
21085
|
-
result.push(chi);
|
|
21086
|
-
});
|
|
21087
|
-
result.push(child.id);
|
|
21088
|
-
parentIndex.push(child.id);
|
|
21089
|
-
nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
|
|
21090
|
-
}
|
|
21091
|
-
if (found.matching.length > 0) {
|
|
21092
|
-
matching.push(...found.matching);
|
|
21093
|
-
}
|
|
21094
|
-
}
|
|
21095
|
-
});
|
|
21096
|
-
}
|
|
21097
|
-
return { result, matching, parentIndex, nestedResult };
|
|
21098
|
-
};
|
|
21099
|
-
const searchState = {
|
|
21100
|
-
setValue: setValue$1,
|
|
21101
|
-
removeValue,
|
|
21102
|
-
getValue: getValue$1,
|
|
21103
|
-
getDataPagination,
|
|
21104
|
-
searchData,
|
|
21105
|
-
};
|
|
21106
|
-
|
|
21107
|
-
const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea .bcm-input-element{white-space:normal}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
|
|
21108
|
-
|
|
21109
|
-
var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
21110
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
21111
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
21112
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
21113
|
-
else
|
|
21114
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
21115
|
-
if (d = decorators[i])
|
|
21116
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21117
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
21118
|
-
};
|
|
21119
|
-
const BcmSearch = class {
|
|
21120
|
-
constructor(hostRef) {
|
|
21121
|
-
index$1.registerInstance(this, hostRef);
|
|
21122
|
-
this.bcmOnSearch = index$1.createEvent(this, "bcm-on-search", 7);
|
|
21123
|
-
this.bcmOnSearchClear = index$1.createEvent(this, "bcm-on-search-clear", 7);
|
|
21124
|
-
this.debounceHandler = generate.Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
|
|
21125
|
-
var _a, _b;
|
|
21126
|
-
this.isActiveClearable = ((_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.clearable;
|
|
21127
|
-
});
|
|
21128
|
-
this._id = generate.Generate.UID();
|
|
21129
|
-
this.placeholder = "Search";
|
|
21130
|
-
this.disabled = false;
|
|
21131
|
-
this.readonly = false;
|
|
21132
|
-
this.clearable = true;
|
|
21133
|
-
this.size = bcm.Bcm.Size.medium;
|
|
21134
|
-
this.limit = 10;
|
|
21135
|
-
this.searchIsOnlyChilds = false;
|
|
21136
|
-
this.minSearchLength = 2;
|
|
21137
|
-
this.data = [];
|
|
21138
|
-
this.tick = {};
|
|
21139
|
-
this.isActiveClearable = false;
|
|
21140
|
-
}
|
|
21141
|
-
async componentDidLoad() {
|
|
21142
|
-
await this.initState();
|
|
21143
|
-
}
|
|
21144
|
-
async dataChanged(newValue, oldValue) {
|
|
21145
|
-
// console.log('data changed', newValue, oldValue)
|
|
21146
|
-
if (newValue !== oldValue) {
|
|
21147
|
-
await this.initState();
|
|
21148
|
-
}
|
|
21149
|
-
}
|
|
21150
|
-
async initState() {
|
|
21151
|
-
await searchState.setValue({
|
|
21152
|
-
id: this._id + "-input",
|
|
21153
|
-
dataSource: this.data,
|
|
21154
|
-
searchIsOnlyChilds: this.searchIsOnlyChilds,
|
|
21155
|
-
});
|
|
21156
|
-
await this.markForCheck();
|
|
21157
|
-
}
|
|
21158
|
-
markForCheck() {
|
|
21159
|
-
this.tick = generate.Generate.UID();
|
|
21160
|
-
}
|
|
21161
|
-
handleInput() {
|
|
21162
|
-
// console.log("aheyya")
|
|
21163
|
-
}
|
|
21164
|
-
async onBcmFocus() {
|
|
21165
|
-
this.inputElement.focus();
|
|
21166
|
-
}
|
|
21167
|
-
async onBcmBlur() {
|
|
21168
|
-
this.inputElement.blur();
|
|
21169
|
-
}
|
|
21170
|
-
async onBcmSelect() {
|
|
21171
|
-
this.inputElement.select();
|
|
21172
|
-
}
|
|
21173
|
-
async setValue(newValue) {
|
|
21174
|
-
this.inputElement.value = newValue;
|
|
21175
|
-
}
|
|
21176
|
-
handleFocus() { }
|
|
21177
|
-
handleBlur() { }
|
|
21178
|
-
handleChange() { }
|
|
21179
|
-
async handleClear(eventEmit = true) {
|
|
21180
|
-
this.inputElement.value = '';
|
|
21181
|
-
const { value, id } = this.inputElement;
|
|
21182
|
-
searchState.searchData(id, value);
|
|
21183
|
-
this.isActiveClearable = false;
|
|
21184
|
-
this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
|
|
21185
|
-
this.bcmOnSearchClear.emit(eventEmit);
|
|
21186
|
-
await utils.delay(10);
|
|
21187
|
-
return Promise.resolve();
|
|
21188
|
-
}
|
|
21189
|
-
onSearchValue(event, instance) {
|
|
21190
|
-
const { value, id } = event.target;
|
|
21191
|
-
const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
|
|
21192
|
-
const { bcmOnSearch, inputElement } = instance;
|
|
21193
|
-
bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
|
|
21194
|
-
}
|
|
21195
|
-
render() {
|
|
21196
|
-
const { _id, placeholder, disabled, readonly } = this;
|
|
21197
|
-
return index$1.h(index$1.Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, index$1.h(inputTemplate.InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
|
|
21198
|
-
}
|
|
21199
|
-
get el() { return index$1.getElement(this); }
|
|
21200
|
-
static get watchers() { return {
|
|
21201
|
-
"data": ["dataChanged"]
|
|
21202
|
-
}; }
|
|
21203
|
-
};
|
|
21204
|
-
__decorate$4([
|
|
21205
|
-
isLoadDecorator.IsLoad()
|
|
21206
|
-
], BcmSearch.prototype, "el", void 0);
|
|
21207
|
-
BcmSearch.style = searchCss;
|
|
21208
|
-
|
|
21209
|
-
const { state } = index.createStore({
|
|
21210
|
-
value: new Map(),
|
|
21211
|
-
setData: {},
|
|
21212
|
-
});
|
|
21213
|
-
const setValue = val => {
|
|
21214
|
-
const data = Object.assign(Object.assign({}, val), { steps: val.steps &&
|
|
21215
|
-
val.steps.length > 0 &&
|
|
21216
|
-
val.steps
|
|
21217
|
-
.filter(data => !data.hidden)
|
|
21218
|
-
.map((item, index) => ({
|
|
21219
|
-
id: item.id || generate.Generate.UID(),
|
|
21220
|
-
title: item.title || item._title,
|
|
21221
|
-
_title: item.title || item._title || 'Step ' + (index + 1),
|
|
21222
|
-
description: item.description || '',
|
|
21223
|
-
status: item.status || 'default',
|
|
21224
|
-
disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
|
|
21225
|
-
icon: item.icon || undefined,
|
|
21226
|
-
valid: item.valid || true,
|
|
21227
|
-
loading: item.loading || false,
|
|
21228
|
-
index: index + 1,
|
|
21229
|
-
active: val.linear ? (index == 0 ? true : false) : val.active === index + 1,
|
|
21230
|
-
isLast: index === val.steps.length - 1,
|
|
21231
|
-
statusIcon: val.icon,
|
|
21232
|
-
headerHidden: item.hidden,
|
|
21233
|
-
})) });
|
|
21234
|
-
state.value.set(val.id, data);
|
|
21235
|
-
};
|
|
21236
|
-
const removeState = _id => {
|
|
21237
|
-
state.value.delete(_id);
|
|
21238
|
-
};
|
|
21239
|
-
const changeActiveStep = (id, index) => {
|
|
21240
|
-
const value = state.value.get(id);
|
|
21241
|
-
if (value) {
|
|
21242
|
-
value.active = index;
|
|
21243
|
-
value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === index - 1 })));
|
|
21244
|
-
}
|
|
21245
|
-
};
|
|
21246
|
-
const getActiveIndex = id => generate.snq(() => state.value.get(id).active, 0);
|
|
21247
|
-
const changeStepStatus = (id, stepId, status) => {
|
|
21248
|
-
const value = state.value.get(id);
|
|
21249
|
-
if (value && value.steps) {
|
|
21250
|
-
value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
|
|
21251
|
-
index$1.forceUpdate(value.el);
|
|
21252
|
-
}
|
|
21253
|
-
};
|
|
21254
|
-
const changeStepDisabled = (id, stepId, disabled) => {
|
|
21255
|
-
const value = state.value.get(id);
|
|
21256
|
-
if (value && value.steps) {
|
|
21257
|
-
value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
|
|
21258
|
-
index$1.forceUpdate(value.el);
|
|
21259
|
-
}
|
|
21260
|
-
};
|
|
21261
|
-
const setActiveIndex = (id, index) => state.value.get(id).active = index;
|
|
21262
|
-
const stepperReset = id => {
|
|
21263
|
-
const value = state.value.get(id);
|
|
21264
|
-
if (value) {
|
|
21265
|
-
value.active = 1;
|
|
21266
|
-
value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
|
|
21267
|
-
index$1.forceUpdate(value.el);
|
|
21268
|
-
}
|
|
21269
|
-
};
|
|
21270
|
-
const getValue = id => generate.snq(() => state.value.get(id), {});
|
|
21271
|
-
const stepperStates = {
|
|
21272
|
-
removeState,
|
|
21273
|
-
getValue,
|
|
21274
|
-
setValue,
|
|
21275
|
-
changeActiveStep,
|
|
21276
|
-
getActiveIndex,
|
|
21277
|
-
changeStepStatus,
|
|
21278
|
-
changeStepDisabled,
|
|
21279
|
-
stepperReset,
|
|
21280
|
-
setActiveIndex
|
|
21281
|
-
};
|
|
21282
|
-
|
|
21283
|
-
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
21284
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
21285
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
21286
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
21287
|
-
else
|
|
21288
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
21289
|
-
if (d = decorators[i])
|
|
21290
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21291
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
21292
|
-
};
|
|
21293
|
-
const BcmStep = class {
|
|
21294
|
-
constructor(hostRef) {
|
|
21295
|
-
index$1.registerInstance(this, hostRef);
|
|
21296
|
-
this.dataIsLoaded = index$1.createEvent(this, "data-is-loaded", 7);
|
|
21297
|
-
this.bcmChangeHidden = index$1.createEvent(this, "bcm-change-hidden", 7);
|
|
21298
|
-
this.hidden = false;
|
|
21299
|
-
this._id = generate.Generate.UID();
|
|
21300
|
-
this._title = undefined;
|
|
21301
|
-
this.description = undefined;
|
|
21302
|
-
this.status = 'default';
|
|
21303
|
-
this.icon = undefined;
|
|
21304
|
-
this.loading = false;
|
|
21305
|
-
this.valid = true;
|
|
21306
|
-
this.index = undefined;
|
|
21307
|
-
this.active = false;
|
|
21308
|
-
this.htmlTemplate = undefined;
|
|
21309
|
-
this.isLast = false;
|
|
21310
|
-
this.disabled = false;
|
|
21311
|
-
}
|
|
21312
|
-
componentDidLoad() {
|
|
21313
|
-
if (this.isLast) {
|
|
21314
|
-
this.dataIsLoaded.emit(true);
|
|
21315
|
-
}
|
|
21316
|
-
}
|
|
21317
|
-
getStepper() {
|
|
21318
|
-
const stepper = this.el.closest('bcm-stepper');
|
|
21319
|
-
return stepper || null;
|
|
21320
|
-
}
|
|
21321
|
-
activeChanged() {
|
|
21322
|
-
if (this.active) {
|
|
21323
|
-
const stepper = this.getStepper();
|
|
21324
|
-
if (stepper) {
|
|
21325
|
-
stepperStates.changeStepDisabled(stepper.stepperId, this._id, false);
|
|
21326
|
-
}
|
|
21327
|
-
}
|
|
21328
|
-
}
|
|
21329
|
-
statusChange() {
|
|
21330
|
-
const stepper = this.getStepper();
|
|
21331
|
-
if (stepper) {
|
|
21332
|
-
stepperStates.changeStepStatus(stepper.stepperId, this._id, this.status);
|
|
21333
|
-
}
|
|
21334
|
-
}
|
|
21335
|
-
hiddenChange(newValue, oldValue) {
|
|
21336
|
-
const stepper = this.getStepper();
|
|
21337
|
-
if (newValue !== oldValue && stepper && !this.active) {
|
|
21338
|
-
this.bcmChangeHidden.emit(newValue);
|
|
21339
|
-
}
|
|
21340
|
-
}
|
|
21341
|
-
disabledChange(newValue, _) {
|
|
21342
|
-
const stepper = this.getStepper();
|
|
21343
|
-
if (stepper) {
|
|
21344
|
-
stepperStates.changeStepDisabled(stepper.stepperId, this._id, newValue);
|
|
21345
|
-
}
|
|
21346
|
-
}
|
|
21347
|
-
render() {
|
|
21348
|
-
const { hidden, valid, active } = this;
|
|
21349
|
-
const hostClasses = index$2.classnames('bcm-stepper__step', valid ? 'bcm-stepper__step-valid' : 'bcm-stepper__step-invalid', {
|
|
21350
|
-
'bcm-stepper__step-active': active,
|
|
21351
|
-
hidden,
|
|
21352
|
-
});
|
|
21353
|
-
return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("slot", null)));
|
|
21354
|
-
}
|
|
21355
|
-
get el() { return index$1.getElement(this); }
|
|
21356
|
-
static get watchers() { return {
|
|
21357
|
-
"active": ["activeChanged"],
|
|
21358
|
-
"status": ["statusChange"],
|
|
21359
|
-
"hidden": ["hiddenChange"],
|
|
21360
|
-
"disabled": ["disabledChange"]
|
|
21361
|
-
}; }
|
|
21362
|
-
};
|
|
21363
|
-
__decorate$3([
|
|
21364
|
-
isLoadDecorator.IsLoad()
|
|
21365
|
-
], BcmStep.prototype, "el", void 0);
|
|
21366
|
-
|
|
21367
|
-
const stepperCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-stepper{display:block;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-grey-1);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-color-prime-blue-6);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-color-grey-8)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-7)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-color-prime-blue-6);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0}.bcm-stepper__header-item::before{left:0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-color-prime-blue-6);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-warmyellow-5)}.bcm-stepper__header-line--success{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-green-5)}.bcm-stepper__header-line--error{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-color-red-6)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-red-6)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-red-5)}.bcm-stepper__header-line--default{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-5)}.bcm-stepper__header-line--loading{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-5)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-grey-5)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
|
|
21368
|
-
|
|
21369
|
-
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
21370
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
21371
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
21372
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
21373
|
-
else
|
|
21374
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
21375
|
-
if (d = decorators[i])
|
|
21376
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21377
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
21378
|
-
};
|
|
21379
|
-
const BcmStepper = class {
|
|
21380
|
-
constructor(hostRef) {
|
|
21381
|
-
index$1.registerInstance(this, hostRef);
|
|
21382
|
-
this.bcmStepChange = index$1.createEvent(this, "bcm-step-change", 7);
|
|
21383
|
-
this.hidden = false;
|
|
21384
|
-
this._id = generate.Generate.UID();
|
|
21385
|
-
this.direction = bcm.Bcm$1.Direction.horizontal;
|
|
21386
|
-
this.linear = false;
|
|
21387
|
-
this.size = bcm.Bcm$1.Size.medium;
|
|
21388
|
-
this.icon = false;
|
|
21389
|
-
this.active = 1;
|
|
21390
|
-
this.stepperId = generate.Generate.UID();
|
|
21391
|
-
this.data = [];
|
|
21392
|
-
this.tick = {};
|
|
21393
|
-
}
|
|
21394
|
-
async dataChanged() {
|
|
21395
|
-
this.initState();
|
|
21396
|
-
}
|
|
21397
|
-
componentDidLoad() {
|
|
21398
|
-
this.initState();
|
|
21399
|
-
}
|
|
21400
|
-
disconnectedCallback() {
|
|
21401
|
-
// stepperStates.removeState(this.stepperId);
|
|
21402
|
-
this.reset();
|
|
21403
|
-
}
|
|
21404
|
-
async initState() {
|
|
21405
|
-
const { stepperId, data, direction, linear, size, icon, active, el } = this;
|
|
21406
|
-
const steps = data.length > 0 ? data : this.getSlotElements();
|
|
21407
|
-
await stepperStates.setValue({
|
|
21408
|
-
id: stepperId,
|
|
21409
|
-
el,
|
|
21410
|
-
direction,
|
|
21411
|
-
linear,
|
|
21412
|
-
size,
|
|
21413
|
-
icon,
|
|
21414
|
-
active,
|
|
21415
|
-
steps,
|
|
21416
|
-
});
|
|
21417
|
-
this.markForCheck();
|
|
21418
|
-
}
|
|
21419
|
-
componentDidRender() {
|
|
21420
|
-
this.setSteps(this.getItems());
|
|
21421
|
-
}
|
|
21422
|
-
setSteps(steps) {
|
|
21423
|
-
const slots = utils.getChildElements(this.el, "bcm-step");
|
|
21424
|
-
if (slots.length > 0) {
|
|
21425
|
-
slots.forEach((item, index) => {
|
|
21426
|
-
const step = steps.find(step => !item.headerHidden && step.id === item.id);
|
|
21427
|
-
if (step) {
|
|
21428
|
-
generate.Generate.setAttributes(item, Object.assign({ title: "", _title: step.title || step._title || "", status: step.status || "default", disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || "" }, (item.hidden == true && { headerHidden: true })));
|
|
21429
|
-
if ((item.hidden = false)) {
|
|
21430
|
-
item.removeAttribute("hidden");
|
|
21431
|
-
}
|
|
21432
|
-
}
|
|
21433
|
-
});
|
|
21434
|
-
}
|
|
21435
|
-
}
|
|
21436
|
-
markForCheck() {
|
|
21437
|
-
this.tick = generate.Generate.UID();
|
|
21438
|
-
}
|
|
21439
|
-
handleChangeBcmHidden() {
|
|
21440
|
-
this.initState();
|
|
21441
|
-
}
|
|
21442
|
-
getActiveIndex() {
|
|
21443
|
-
return stepperStates.getActiveIndex(this.stepperId);
|
|
21444
|
-
}
|
|
21445
|
-
getSlotElements() {
|
|
21446
|
-
return generate.snq(() => utils.getChildElements(this.el, "bcm-step"), []);
|
|
21447
|
-
}
|
|
21448
|
-
async onStepChange(index) {
|
|
21449
|
-
if (index) {
|
|
21450
|
-
stepperStates.changeActiveStep(this.stepperId, index);
|
|
21451
|
-
this.bcmStepChange.emit(index);
|
|
21452
|
-
}
|
|
21453
|
-
index$1.forceUpdate(this.el);
|
|
21454
|
-
return Promise.resolve(index);
|
|
21455
|
-
}
|
|
21456
|
-
async prev() {
|
|
21457
|
-
const index = this.getActiveIndex() - 1;
|
|
21458
|
-
if (index >= 1) {
|
|
21459
|
-
if (!this.linear) {
|
|
21460
|
-
const previosStep = this.getItems()[index - 1];
|
|
21461
|
-
if (previosStep.disabled)
|
|
21462
|
-
return;
|
|
21463
|
-
await this.onStepChange(index);
|
|
21464
|
-
}
|
|
21465
|
-
else {
|
|
21466
|
-
await this.onStepChange(index);
|
|
21467
|
-
}
|
|
21468
|
-
}
|
|
21469
|
-
index$1.forceUpdate(this.el);
|
|
21470
|
-
return Promise.resolve(this.getActiveIndex());
|
|
21471
|
-
}
|
|
21472
|
-
async next(idx) {
|
|
21473
|
-
const index = idx || this.getActiveIndex();
|
|
21474
|
-
const step = await this.getCurrentStep();
|
|
21475
|
-
const lastStep = this.getItems()[this.getItems().length - 1];
|
|
21476
|
-
if (step.valid) {
|
|
21477
|
-
this.linear && lastStep.id != step.id && (step.status = "success");
|
|
21478
|
-
if (index < this.getItems().length) {
|
|
21479
|
-
await this.onStepChange(index + 1);
|
|
21480
|
-
}
|
|
21481
|
-
}
|
|
21482
|
-
else {
|
|
21483
|
-
step.status = "error";
|
|
21484
|
-
}
|
|
21485
|
-
index$1.forceUpdate(this.el);
|
|
21486
|
-
return Promise.resolve(this.getActiveIndex());
|
|
21487
|
-
}
|
|
21488
|
-
async setActive(index, force = false) {
|
|
21489
|
-
if (!index)
|
|
21490
|
-
return;
|
|
21491
|
-
if (force) {
|
|
21492
|
-
if (this.getActiveIndex() < index) {
|
|
21493
|
-
while (this.getActiveIndex() < index) {
|
|
21494
|
-
await this.next();
|
|
21495
|
-
await utils.delay(100);
|
|
21496
|
-
}
|
|
21497
|
-
}
|
|
21498
|
-
else {
|
|
21499
|
-
while (this.getActiveIndex() > index) {
|
|
21500
|
-
await this.prev();
|
|
21501
|
-
await utils.delay(100);
|
|
21502
|
-
}
|
|
21503
|
-
}
|
|
21504
|
-
}
|
|
21505
|
-
else {
|
|
21506
|
-
if (this.linear) {
|
|
21507
|
-
const prevStepIsValid = this.getItems()
|
|
21508
|
-
.filter(item => item.index < index)
|
|
21509
|
-
.map(item => ({
|
|
21510
|
-
id: item.id,
|
|
21511
|
-
status: item.status,
|
|
21512
|
-
disabled: item.disabled,
|
|
21513
|
-
}))
|
|
21514
|
-
.every(item => !item.disabled && (item.status === "success" || item.status === "default"));
|
|
21515
|
-
console.log("prevStepIsValid", prevStepIsValid);
|
|
21516
|
-
if (prevStepIsValid) {
|
|
21517
|
-
await this.next(index - 1);
|
|
21518
|
-
}
|
|
21519
|
-
}
|
|
21520
|
-
else {
|
|
21521
|
-
stepperStates.setActiveIndex(this.stepperId, index);
|
|
21522
|
-
await this.next(index - 1);
|
|
21523
|
-
}
|
|
21524
|
-
}
|
|
21525
|
-
}
|
|
21526
|
-
async reset() {
|
|
21527
|
-
await this.onStepChange(1);
|
|
21528
|
-
stepperStates.stepperReset(this.stepperId);
|
|
21529
|
-
return Promise.resolve(this.getActiveIndex());
|
|
21530
|
-
}
|
|
21531
|
-
async getCurrentStep() {
|
|
21532
|
-
var _a;
|
|
21533
|
-
return generate.snq(() => this.getItems().filter(item => item.active == true)[0], (_a = this.getItems()[0]) !== null && _a !== void 0 ? _a : null);
|
|
21534
|
-
}
|
|
21535
|
-
async getSteps() {
|
|
21536
|
-
return Promise.resolve(this.getItems());
|
|
21537
|
-
}
|
|
21538
|
-
getItems() {
|
|
21539
|
-
return generate.snq(() => { var _a; return (_a = stepperStates.getValue(this.stepperId).steps) === null || _a === void 0 ? void 0 : _a.filter(item => !item.headerHidden); }, []);
|
|
21540
|
-
}
|
|
21541
|
-
render() {
|
|
21542
|
-
const { hidden, direction, linear, size } = this;
|
|
21543
|
-
const hostClasses = index$2.classnames("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
|
|
21544
|
-
"bcm-stepper__linear": linear,
|
|
21545
|
-
hidden,
|
|
21546
|
-
});
|
|
21547
|
-
const lineClasses = item => index$2.classnames("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
|
|
21548
|
-
const items = this.getItems();
|
|
21549
|
-
return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, index$1.h("slot", null)), index$1.h("main", null, index$1.h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
|
|
21550
|
-
index$1.h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.onStepChange(step) })),
|
|
21551
|
-
items.length > index + 1 && index$1.h("div", { class: lineClasses(item) }),
|
|
21552
|
-
])), index$1.h("section", { class: "bcm-stepper__body" }, this.data && this.data.length > 0 ? items === null || items === void 0 ? void 0 : items.map(item => index$1.h("bcm-step", Object.assign({}, item))) : index$1.h("slot", null)))));
|
|
21553
|
-
}
|
|
21554
|
-
get el() { return index$1.getElement(this); }
|
|
21555
|
-
static get watchers() { return {
|
|
21556
|
-
"data": ["dataChanged"]
|
|
21557
|
-
}; }
|
|
21558
|
-
};
|
|
21559
|
-
__decorate$2([
|
|
21560
|
-
isLoadDecorator.IsLoad()
|
|
21561
|
-
], BcmStepper.prototype, "el", void 0);
|
|
21562
|
-
BcmStepper.style = stepperCss;
|
|
21563
|
-
|
|
21564
|
-
const textCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-text{display:inline;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-text.hidden{display:none}.bcm-text__paragraph{margin:0;padding:0}.bcm-text__font-size-1{font-size:10px;line-height:calc(10px + 8px)}.bcm-text__font-size-2{font-size:12px;line-height:calc(12px + 8px)}.bcm-text__font-size-3{font-size:14px;line-height:calc(14px + 8px)}.bcm-text__font-size-4{font-size:16px;line-height:calc(16px + 8px)}.bcm-text__font-size-5{font-size:18px;line-height:calc(18px + 8px)}.bcm-text__font-size-6{font-size:20px;line-height:calc(20px + 8px)}.bcm-text__font-size-7{font-size:24px;line-height:calc(24px + 8px)}.bcm-text__font-size-8{font-size:32px;line-height:calc(32px + 8px)}.bcm-text__font-size-9{font-size:40px;line-height:calc(40px + 8px)}";
|
|
21565
|
-
|
|
21566
|
-
var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
21567
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
21568
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
21569
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
21570
|
-
else
|
|
21571
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
21572
|
-
if (d = decorators[i])
|
|
21573
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21574
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
21575
|
-
};
|
|
21576
|
-
const BcmText = class {
|
|
21577
|
-
constructor(hostRef) {
|
|
21578
|
-
index$1.registerInstance(this, hostRef);
|
|
21579
|
-
this.hidden = false;
|
|
21580
|
-
this.scale = undefined;
|
|
21581
|
-
this.weight = "400";
|
|
21582
|
-
this.color = "slate";
|
|
21583
|
-
this.text = undefined;
|
|
21584
|
-
this.fontSize = 4;
|
|
21585
|
-
}
|
|
21586
|
-
render() {
|
|
21587
|
-
const { hidden, scale, weight, color, fontSize } = this;
|
|
21588
|
-
const hostClasses = index$2.classnames('bcm-text', {
|
|
21589
|
-
hidden
|
|
21590
|
-
});
|
|
21591
|
-
const classes = index$2.classnames('bcm-text__paragraph', `bcm-text__font-size-${fontSize}`, scale);
|
|
21592
|
-
const fontWeight = +weight || 400;
|
|
21593
|
-
const style = {
|
|
21594
|
-
color: colorHelper.ColorHelper.dsColor(color),
|
|
21595
|
-
fontWeight
|
|
21596
|
-
};
|
|
21597
|
-
return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("span", { hidden: true }, index$1.h("slot", null)), index$1.h("p", { class: classes, style: Object.assign({}, style) }, index$1.h(slotTemplate.SlotTemplate, { value: this.text }))));
|
|
21598
|
-
}
|
|
21599
|
-
get el() { return index$1.getElement(this); }
|
|
21600
|
-
};
|
|
21601
|
-
__decorate$1([
|
|
21602
|
-
isLoadDecorator.IsLoad()
|
|
21603
|
-
], BcmText.prototype, "el", void 0);
|
|
21604
|
-
BcmText.style = textCss;
|
|
21605
|
-
|
|
21606
|
-
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
21607
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
21608
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
21609
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
21610
|
-
else
|
|
21611
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
21612
|
-
if (d = decorators[i])
|
|
21613
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21614
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
21615
|
-
};
|
|
21616
|
-
const BcmTooltip = class {
|
|
21617
|
-
constructor(hostRef) {
|
|
21618
|
-
index$1.registerInstance(this, hostRef);
|
|
21619
|
-
this.bcmTooltipShow = index$1.createEvent(this, "bcmTooltipShow", 7);
|
|
21620
|
-
this.bcmTooltipHide = index$1.createEvent(this, "bcmTooltipHide", 7);
|
|
21621
|
-
this._id = generate.Generate.UID();
|
|
21622
|
-
this.message = "";
|
|
21623
|
-
this.placement = bcm.Bcm$1.Placement.top;
|
|
21624
|
-
this.trigger = bcm.Bcm$1.TriggerType.click;
|
|
21625
|
-
this.open = false;
|
|
21626
|
-
this.color = "slate";
|
|
21627
|
-
this.size = bcm.Bcm$1.Size.medium;
|
|
21628
|
-
this.openDelay = 0;
|
|
21629
|
-
this.closeDelay = 0;
|
|
21630
|
-
this.targetId = undefined;
|
|
21631
|
-
this.tooltip = undefined;
|
|
21632
|
-
}
|
|
21633
|
-
emitShow() {
|
|
21634
|
-
this.bcmTooltipShow.emit();
|
|
21635
|
-
}
|
|
21636
|
-
emitHide() {
|
|
21637
|
-
this.bcmTooltipHide.emit();
|
|
21638
|
-
}
|
|
21639
|
-
componentWillLoad() {
|
|
21640
|
-
this.tooltip = new tooltipHelper.Tooltip({
|
|
21641
|
-
targetId: this.targetId || this._id,
|
|
21642
|
-
message: this.message,
|
|
21643
|
-
placement: this.placement,
|
|
21644
|
-
color: this.color,
|
|
21645
|
-
trigger: this.trigger,
|
|
21646
|
-
size: this.size,
|
|
21647
|
-
openDelay: this.openDelay,
|
|
21648
|
-
closeDelay: this.closeDelay,
|
|
21649
|
-
emitShow: () => this.emitShow(),
|
|
21650
|
-
emitHide: () => this.emitHide(),
|
|
21651
|
-
});
|
|
21652
|
-
}
|
|
21653
|
-
componentDidLoad() {
|
|
21654
|
-
this.tooltip.listener();
|
|
21655
|
-
}
|
|
21656
|
-
componentDidRender() {
|
|
21657
|
-
this.tooltip.message = this.message;
|
|
21658
|
-
this.tooltip.placement = this.placement;
|
|
21659
|
-
this.tooltip.color = this.color;
|
|
21660
|
-
this.tooltip.trigger = this.trigger;
|
|
21661
|
-
this.tooltip.size = this.size;
|
|
21662
|
-
this.tooltip.openDelay = this.openDelay;
|
|
21663
|
-
this.tooltip.closeDelay = this.closeDelay;
|
|
21664
|
-
this.tooltip.update();
|
|
21665
|
-
}
|
|
21666
|
-
disconnectedCallback() {
|
|
21667
|
-
this.tooltip.destroy();
|
|
21668
|
-
}
|
|
21669
|
-
async show() {
|
|
21670
|
-
this.tooltip.show();
|
|
21671
|
-
}
|
|
21672
|
-
async hide() {
|
|
21673
|
-
this.tooltip.hide();
|
|
21674
|
-
}
|
|
21675
|
-
async toggle() {
|
|
21676
|
-
this.tooltip.toggle();
|
|
21677
|
-
}
|
|
21678
|
-
render() {
|
|
21679
|
-
return (index$1.h(index$1.Host, { "aria-describedby": "tooltip", class: "tw-inline-flex tw-h-fit tw-w-fit" }, index$1.h("slot", null)));
|
|
21680
|
-
}
|
|
21681
|
-
get el() { return index$1.getElement(this); }
|
|
21682
|
-
};
|
|
21683
|
-
__decorate([
|
|
21684
|
-
isLoadDecorator.IsLoad()
|
|
21685
|
-
], BcmTooltip.prototype, "el", void 0);
|
|
17937
|
+
], BcmLinked.prototype, "el", void 0);
|
|
21686
17938
|
|
|
21687
|
-
exports.bcm_button = BcmButton;
|
|
21688
17939
|
exports.bcm_colorful = BcmColorful;
|
|
21689
|
-
exports.bcm_form = BcmForm;
|
|
21690
|
-
exports.bcm_icon = BcmIcon;
|
|
21691
|
-
exports.bcm_input = BcmInput;
|
|
21692
|
-
exports.bcm_label = BcmLabel;
|
|
21693
17940
|
exports.bcm_linked = BcmLinked;
|
|
21694
|
-
exports.bcm_list = BcmList;
|
|
21695
|
-
exports.bcm_search = BcmSearch;
|
|
21696
|
-
exports.bcm_step = BcmStep;
|
|
21697
|
-
exports.bcm_stepper = BcmStepper;
|
|
21698
|
-
exports.bcm_text = BcmText;
|
|
21699
|
-
exports.bcm_tooltip = BcmTooltip;
|