bromcom-ui 2.9.0-rc.4 → 2.9.0-rc.5
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.css +1 -1
- package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/p-0543a86f.js +5 -0
- package/dist/bromcom-ui/{p-d888c814.entry.js → p-0a528362.entry.js} +1 -1
- package/dist/bromcom-ui/{p-3992dd70.entry.js → p-0c549bd0.entry.js} +1 -1
- package/dist/bromcom-ui/{p-08d4cd65.entry.js → p-0d4372c9.entry.js} +1 -1
- package/dist/bromcom-ui/{p-8c9d109c.entry.js → p-15758356.entry.js} +1 -1
- package/dist/bromcom-ui/{p-2df6dc86.entry.js → p-179af180.entry.js} +1 -1
- package/dist/bromcom-ui/p-1a04159f.entry.js +5 -0
- package/dist/bromcom-ui/{p-6478455c.entry.js → p-1a405289.entry.js} +1 -1
- package/dist/bromcom-ui/{p-5648b456.entry.js → p-1b1f4b44.entry.js} +1 -1
- package/dist/bromcom-ui/p-1eabd5dc.js +10 -0
- package/dist/bromcom-ui/p-24cffc16.entry.js +13 -0
- package/dist/bromcom-ui/{p-20aa2ba8.entry.js → p-25f9928a.entry.js} +1 -1
- package/dist/bromcom-ui/p-285722ad.entry.js +5 -0
- package/dist/bromcom-ui/{p-3adc157d.entry.js → p-29a12785.entry.js} +1 -1
- package/dist/bromcom-ui/{p-f48e5337.entry.js → p-2a02b473.entry.js} +1 -1
- package/dist/bromcom-ui/p-2fc584c4.js +5 -0
- package/dist/bromcom-ui/{p-fd7243a7.entry.js → p-365eec45.entry.js} +1 -1
- package/dist/bromcom-ui/{p-6a087ad5.js → p-38972c46.js} +1 -1
- package/dist/bromcom-ui/{p-8c018ae0.js → p-3c7a0345.js} +1 -1
- package/dist/bromcom-ui/p-53448351.js +5 -0
- package/dist/bromcom-ui/{p-09c4a42a.entry.js → p-546f5f82.entry.js} +1 -1
- package/dist/bromcom-ui/{p-70aa6e00.entry.js → p-5855b125.entry.js} +1 -1
- package/dist/bromcom-ui/{p-7e44e6b5.js → p-5ae0a59b.js} +1 -1
- package/dist/bromcom-ui/{p-4cd8a7c8.entry.js → p-5c3e9ac9.entry.js} +1 -1
- package/dist/bromcom-ui/{p-4e6292fd.entry.js → p-61172e12.entry.js} +1 -1
- package/dist/bromcom-ui/{p-224d392c.entry.js → p-65318f25.entry.js} +1 -1
- package/dist/bromcom-ui/p-663766cf.entry.js +5 -0
- package/dist/bromcom-ui/{p-30788121.entry.js → p-6c3e9e10.entry.js} +1 -1
- package/dist/bromcom-ui/{p-6e9b23ed.entry.js → p-721e0cb5.entry.js} +1 -1
- package/dist/bromcom-ui/{p-fc07ca8a.entry.js → p-7bff7371.entry.js} +1 -1
- package/dist/bromcom-ui/{p-50066349.entry.js → p-8260eda6.entry.js} +1 -1
- package/dist/bromcom-ui/{p-1647559e.entry.js → p-8bcfe3b3.entry.js} +1 -1
- package/dist/bromcom-ui/{p-21783e29.entry.js → p-8e2e77ca.entry.js} +1 -1
- package/dist/bromcom-ui/p-90e5c655.js +5 -0
- package/dist/bromcom-ui/p-947c78e3.js +5 -0
- package/dist/bromcom-ui/{p-0d6623c0.entry.js → p-96614f57.entry.js} +1 -1
- package/dist/bromcom-ui/{p-6cb648f0.entry.js → p-9d98d32d.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ea23f0aa.entry.js → p-9e05f845.entry.js} +1 -1
- package/dist/bromcom-ui/{p-c8695c8b.entry.js → p-a02c333f.entry.js} +1 -1
- package/dist/bromcom-ui/{p-4ea7331b.entry.js → p-a1335bd5.entry.js} +1 -1
- package/dist/bromcom-ui/{p-b321e86d.entry.js → p-a3b54a22.entry.js} +1 -1
- package/dist/bromcom-ui/{p-18696519.entry.js → p-a4731c71.entry.js} +1 -1
- package/dist/bromcom-ui/p-a5953ecd.entry.js +5 -0
- package/dist/bromcom-ui/{p-50c3df61.js → p-a8aaa382.js} +1 -1
- package/dist/bromcom-ui/{p-30a3320f.entry.js → p-b1c83bb8.entry.js} +1 -1
- package/dist/bromcom-ui/{p-8d14232d.entry.js → p-ba89e3c7.entry.js} +1 -1
- package/dist/bromcom-ui/{p-119fc842.entry.js → p-c1de1367.entry.js} +1 -1
- package/dist/bromcom-ui/{p-15347028.entry.js → p-ca32c1b9.entry.js} +1 -1
- package/dist/bromcom-ui/p-cf0ab7f0.entry.js +5 -0
- package/dist/bromcom-ui/p-d37379d4.entry.js +5 -0
- package/dist/bromcom-ui/{p-afb4a0e7.entry.js → p-d58107e2.entry.js} +1 -1
- package/dist/bromcom-ui/p-dd422dd1.js +5 -0
- package/dist/bromcom-ui/{p-cf307549.entry.js → p-e92d9879.entry.js} +1 -1
- package/dist/bromcom-ui/{p-159b67a7.entry.js → p-e9c963b3.entry.js} +1 -1
- package/dist/bromcom-ui/{p-dc9466d6.entry.js → p-ebee9f45.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ba47106f.entry.js → p-ef8bbaf3.entry.js} +1 -1
- package/dist/bromcom-ui/p-f0350c0c.entry.js +5 -0
- package/dist/bromcom-ui/p-f302cbdf.entry.js +5 -0
- package/dist/bromcom-ui/{p-68abefd2.entry.js → p-f331e009.entry.js} +1 -1
- package/dist/bromcom-ui/{p-28649759.entry.js → p-f3b546c6.entry.js} +1 -1
- package/dist/bromcom-ui/{p-8ae4bdb2.entry.js → p-f532862e.entry.js} +1 -1
- package/dist/bromcom-ui/{p-e12e563a.entry.js → p-f889d1b6.entry.js} +1 -1
- package/dist/bromcom-ui/p-f8bf531f.entry.js +5 -0
- package/dist/bromcom-ui/{p-9fff4f7d.entry.js → p-f8cbdade.entry.js} +1 -1
- package/dist/bromcom-ui/{p-cb344455.entry.js → p-fb22bc06.entry.js} +1 -1
- package/dist/bromcom-ui/p-fceaf172.entry.js +5 -0
- package/dist/cjs/bcm-accordion.cjs.entry.js +1 -1
- package/dist/cjs/bcm-alert.cjs.entry.js +1 -1
- package/dist/cjs/bcm-attendance.cjs.entry.js +1 -1
- package/dist/cjs/bcm-avatar.cjs.entry.js +126 -0
- package/dist/cjs/bcm-badge_15.cjs.entry.js +1738 -0
- package/dist/cjs/bcm-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/bcm-button-group.cjs.entry.js +1 -1
- package/dist/cjs/bcm-card.cjs.entry.js +2 -2
- package/dist/cjs/bcm-checkbox-group.cjs.entry.js +17 -17
- package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +1 -1
- package/dist/cjs/{bcm-checkbox_2.cjs.entry.js → bcm-checkbox.cjs.entry.js} +2 -13
- package/dist/cjs/bcm-chip-group.cjs.entry.js +128 -0
- package/dist/cjs/bcm-chip.cjs.entry.js +90 -0
- package/dist/cjs/bcm-collapse.cjs.entry.js +1 -1
- package/dist/cjs/bcm-color-input.cjs.entry.js +4 -4
- package/dist/cjs/{bcm-avatar_15.cjs.entry.js → bcm-colorful.cjs.entry.js} +3 -6332
- package/dist/cjs/bcm-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/bcm-datetime-picker.cjs.entry.js +1 -1
- package/dist/cjs/bcm-default.cjs.entry.js +1 -1
- package/dist/cjs/bcm-drawer.cjs.entry.js +4 -4
- package/dist/cjs/bcm-expansion-panel.cjs.entry.js +2 -2
- package/dist/cjs/bcm-form-2.cjs.entry.js +1 -1
- package/dist/cjs/bcm-form.cjs.entry.js +488 -0
- package/dist/cjs/bcm-input-custom.cjs.entry.js +1 -1
- package/dist/cjs/bcm-input.cjs.entry.js +370 -0
- package/dist/cjs/bcm-label.cjs.entry.js +44 -0
- package/dist/cjs/bcm-list_3.cjs.entry.js +4025 -0
- package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal-2-header.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal-2.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal.cjs.entry.js +1 -1
- package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +2 -2
- package/dist/cjs/bcm-popconfirm.cjs.entry.js +1 -1
- package/dist/cjs/bcm-progress.cjs.entry.js +2 -2
- package/dist/cjs/bcm-radio-group.cjs.entry.js +4 -4
- package/dist/cjs/bcm-radio.cjs.entry.js +4 -4
- package/dist/cjs/bcm-range.cjs.entry.js +1 -1
- package/dist/cjs/bcm-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/bcm-step.cjs.entry.js +2 -2
- package/dist/cjs/bcm-stepper.cjs.entry.js +5 -5
- package/dist/cjs/bcm-switch.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tag.cjs.entry.js +2 -2
- package/dist/cjs/bcm-textarea.cjs.entry.js +2 -2
- package/dist/cjs/bcm-time-picker.cjs.entry.js +1 -1
- package/dist/cjs/bcm-toast.cjs.entry.js +1 -1
- package/dist/cjs/bromcom-ui.cjs.js +1 -1
- package/dist/cjs/{color-helper-d6d2028b.js → color-helper-7ab15732.js} +27 -1
- package/dist/cjs/{generate-d246df02.js → generate-d0470117.js} +55 -5
- package/dist/cjs/index-906fb4e5.js +540 -0
- package/dist/cjs/index-b08b037a.js +52 -0
- package/dist/cjs/{input-template-22c31e2b.js → input-template-e1d297ed.js} +1 -1
- package/dist/cjs/{json-parse-decarator-bf157b28.js → json-parse-decarator-026354f1.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{number-helper-26df0c91.js → number-helper-b3d57233.js} +1 -1
- package/dist/cjs/old-bcm-popover-box.cjs.entry.js +2 -2
- package/dist/cjs/old-bcm-popover.cjs.entry.js +1 -1
- package/dist/cjs/{stepper-states-1a1a63cb.js → stepper-states-09cd4bed.js} +1 -1
- package/dist/cjs/{validators-095e7611.js → validators-39ca1c93.js} +1 -1
- package/dist/collection/components/atoms/avatar/avatar.js +95 -80
- package/dist/collection/components/atoms/avatar/avatar.style.js +39 -0
- package/dist/collection/components/atoms/badge/badge.js +29 -90
- package/dist/collection/components/atoms/badge/badge.style.js +39 -0
- package/dist/collection/components/molecules/items/items.js +1 -1
- package/dist/collection/components/molecules/menu/menu.js +1 -0
- package/dist/collection/components/molecules/popover/popover.js +1 -1
- package/dist/collection/components/molecules/tab-group/tab-group.js +5 -1
- package/dist/collection/components/molecules/tab-group/tab-item-header.js +11 -26
- package/dist/collection/components/molecules/tooltip/tooltip.js +1 -1
- package/dist/collection/components/other/typography/typography.js +1 -1
- package/dist/collection/helper/color-helper.js +27 -1
- package/dist/collection/helper/generate.js +54 -4
- package/dist/collection/helper/popover-helper.js +13 -9
- package/dist/collection/helper/tooltip-helper.js +12 -4
- package/dist/components/avatar.js +91 -52
- package/dist/components/badge.js +109 -46
- package/dist/components/bcm-items.js +1 -1
- package/dist/components/bcm-popover.js +14 -10
- package/dist/components/bcm-tab-group.js +5 -1
- package/dist/components/bcm-tab-item-header.js +11 -26
- package/dist/components/color-helper.js +27 -1
- package/dist/components/generate.js +55 -5
- package/dist/components/menu.js +1 -0
- package/dist/components/tooltip-helper.js +12 -4
- package/dist/components/tooltip.js +1 -1
- package/dist/components/typography.js +1 -1
- package/dist/esm/bcm-accordion.entry.js +1 -1
- package/dist/esm/bcm-alert.entry.js +1 -1
- package/dist/esm/bcm-attendance.entry.js +1 -1
- package/dist/esm/bcm-avatar.entry.js +122 -0
- package/dist/esm/bcm-badge_15.entry.js +1720 -0
- package/dist/esm/bcm-breadcrumb.entry.js +1 -1
- package/dist/esm/bcm-button-group.entry.js +1 -1
- package/dist/esm/bcm-card.entry.js +3 -3
- package/dist/esm/bcm-checkbox-group.entry.js +8 -8
- package/dist/esm/bcm-checkbox-lite_9.entry.js +2 -2
- package/dist/esm/{bcm-checkbox_2.entry.js → bcm-checkbox.entry.js} +4 -14
- package/dist/esm/bcm-chip-group.entry.js +124 -0
- package/dist/esm/bcm-chip.entry.js +86 -0
- package/dist/esm/bcm-collapse-group.entry.js +1 -1
- package/dist/esm/bcm-collapse.entry.js +1 -1
- package/dist/esm/bcm-color-input.entry.js +6 -6
- package/dist/esm/{bcm-avatar_15.entry.js → bcm-colorful.entry.js} +4 -6319
- package/dist/esm/bcm-colorpicker.entry.js +2 -2
- package/dist/esm/bcm-date-picker.entry.js +2 -2
- package/dist/esm/bcm-datetime-picker.entry.js +3 -3
- package/dist/esm/bcm-default.entry.js +1 -1
- package/dist/esm/bcm-drawer.entry.js +6 -6
- package/dist/esm/bcm-expansion-panel.entry.js +3 -3
- package/dist/esm/bcm-form-2.entry.js +1 -1
- package/dist/esm/bcm-form.entry.js +484 -0
- package/dist/esm/bcm-input-custom.entry.js +1 -1
- package/dist/esm/bcm-input.entry.js +366 -0
- package/dist/esm/bcm-label.entry.js +40 -0
- package/dist/esm/bcm-list_3.entry.js +4019 -0
- package/dist/esm/bcm-modal-2-footer.entry.js +6 -6
- package/dist/esm/bcm-modal-2-header.entry.js +6 -6
- package/dist/esm/bcm-modal-2.entry.js +6 -6
- package/dist/esm/bcm-modal.entry.js +1 -1
- package/dist/esm/bcm-old-input.entry.js +1 -1
- package/dist/esm/bcm-old-tag_2.entry.js +1 -1
- package/dist/esm/bcm-popconfirm-box.entry.js +3 -3
- package/dist/esm/bcm-popconfirm.entry.js +1 -1
- package/dist/esm/bcm-progress.entry.js +3 -3
- package/dist/esm/bcm-radio-group.entry.js +6 -6
- package/dist/esm/bcm-radio.entry.js +6 -6
- package/dist/esm/bcm-range.entry.js +2 -2
- package/dist/esm/bcm-select.entry.js +1 -1
- package/dist/esm/bcm-skeleton.entry.js +1 -1
- package/dist/esm/bcm-step.entry.js +2 -2
- package/dist/esm/bcm-stepper.entry.js +7 -7
- package/dist/esm/bcm-switch.entry.js +2 -2
- package/dist/esm/bcm-table.entry.js +1 -1
- package/dist/esm/bcm-tabs-content.entry.js +1 -1
- package/dist/esm/bcm-tabs.entry.js +1 -1
- package/dist/esm/bcm-tag.entry.js +3 -3
- package/dist/esm/bcm-textarea.entry.js +3 -3
- package/dist/esm/bcm-time-picker.entry.js +2 -2
- package/dist/esm/bcm-toast.entry.js +2 -2
- package/dist/esm/bromcom-ui.js +1 -1
- package/dist/esm/{color-helper-e8ce23d7.js → color-helper-116755ed.js} +28 -2
- package/dist/esm/{element-dragger-89bb52fd.js → element-dragger-7ea06c76.js} +1 -1
- package/dist/esm/{generate-e7435a13.js → generate-abec36e5.js} +55 -5
- package/dist/esm/index-6310a048.js +537 -0
- package/dist/esm/index-962dec74.js +50 -0
- package/dist/esm/{input-template-e1e850b5.js → input-template-a02d00ff.js} +1 -1
- package/dist/esm/{json-parse-decarator-2bcd4584.js → json-parse-decarator-268fe3de.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{number-helper-cb2563aa.js → number-helper-cf26accd.js} +1 -1
- package/dist/esm/old-bcm-popover-box.entry.js +4 -4
- package/dist/esm/old-bcm-popover.entry.js +1 -1
- package/dist/esm/{stepper-states-29463262.js → stepper-states-cf443480.js} +1 -1
- package/dist/esm/{utils-57652744.js → utils-b3338faf.js} +1 -1
- package/dist/esm/{validators-0a4134a4.js → validators-63753298.js} +1 -1
- package/dist/types/components/atoms/avatar/avatar.d.ts +8 -10
- package/dist/types/components/atoms/avatar/avatar.style.d.ts +5 -0
- package/dist/types/components/atoms/badge/badge.d.ts +3 -7
- package/dist/types/components/atoms/badge/badge.style.d.ts +4 -0
- package/dist/types/components.d.ts +11 -13
- package/dist/types/helper/color-helper.d.ts +22 -2
- package/dist/types/helper/generate.d.ts +21 -1
- package/dist/types/helper/popover-helper.d.ts +0 -5
- package/dist/types/helper/tooltip-helper.d.ts +0 -1
- package/package.json +7 -4
- package/dist/bromcom-ui/p-00d7bbed.js +0 -5
- package/dist/bromcom-ui/p-0ab46a99.js +0 -5
- package/dist/bromcom-ui/p-0b0660a0.js +0 -5
- package/dist/bromcom-ui/p-1a3d281e.entry.js +0 -5
- package/dist/bromcom-ui/p-2b4677a8.entry.js +0 -5
- package/dist/bromcom-ui/p-3ae615ef.entry.js +0 -5
- package/dist/bromcom-ui/p-61c51804.entry.js +0 -5
- package/dist/bromcom-ui/p-632bbc11.entry.js +0 -5
- package/dist/bromcom-ui/p-6c34860e.entry.js +0 -5
- package/dist/bromcom-ui/p-843905c8.js +0 -5
- package/dist/bromcom-ui/p-8ce0f5f8.entry.js +0 -5
- package/dist/bromcom-ui/p-92831a1d.js +0 -5
- package/dist/bromcom-ui/p-a9a9bf8f.js +0 -5
- package/dist/bromcom-ui/p-b17ba740.entry.js +0 -19
- package/dist/bromcom-ui/p-b8cfa9ab.entry.js +0 -5
- package/dist/bromcom-ui/p-c5de4c76.entry.js +0 -5
- package/dist/bromcom-ui/p-d832cf50.entry.js +0 -5
- package/dist/bromcom-ui/p-fb96c1cd.entry.js +0 -5
- package/dist/cjs/bcm-dropdown.cjs.entry.js +0 -118
- package/dist/cjs/bcm-item.cjs.entry.js +0 -71
- package/dist/cjs/bcm-items.cjs.entry.js +0 -48
- package/dist/cjs/bcm-menu.cjs.entry.js +0 -149
- package/dist/cjs/bcm-popover.cjs.entry.js +0 -225
- package/dist/cjs/bcm-tab-group.cjs.entry.js +0 -205
- package/dist/cjs/bcm-tab-item-header.cjs.entry.js +0 -73
- package/dist/cjs/bcm-tab-item.cjs.entry.js +0 -90
- package/dist/cjs/bcm-text.cjs.entry.js +0 -49
- package/dist/cjs/tooltip-helper-c822010b.js +0 -150
- package/dist/collection/components/atoms/avatar/avatar.css +0 -198
- package/dist/collection/components/atoms/badge/badge.css +0 -231
- package/dist/esm/bcm-dropdown.entry.js +0 -114
- package/dist/esm/bcm-item.entry.js +0 -67
- package/dist/esm/bcm-items.entry.js +0 -44
- package/dist/esm/bcm-menu.entry.js +0 -145
- package/dist/esm/bcm-popover.entry.js +0 -221
- package/dist/esm/bcm-tab-group.entry.js +0 -201
- package/dist/esm/bcm-tab-item-header.entry.js +0 -69
- package/dist/esm/bcm-tab-item.entry.js +0 -86
- package/dist/esm/bcm-text.entry.js +0 -45
- package/dist/esm/tooltip-helper-f35d93d2.js +0 -148
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built with Stencil
|
|
3
|
-
* Copyright (c) Bromcom.
|
|
4
|
-
*/
|
|
5
|
-
'use strict';
|
|
6
|
-
|
|
7
|
-
require('./element-dragger-a8562f82.js');
|
|
8
|
-
const stringHelper = require('./string-helper-d681e5c7.js');
|
|
9
|
-
const utils = require('./utils-fc077139.js');
|
|
10
|
-
const floatingUi = require('./floating-ui-c9fc2202.js');
|
|
11
|
-
const colorHelper = require('./color-helper-d6d2028b.js');
|
|
12
|
-
require('./datetime-helper-eaf4fadb.js');
|
|
13
|
-
const generate = require('./generate-d246df02.js');
|
|
14
|
-
require('./number-helper-26df0c91.js');
|
|
15
|
-
require('./validators-095e7611.js');
|
|
16
|
-
const bcm = require('./bcm-ab921827.js');
|
|
17
|
-
|
|
18
|
-
class Tooltip {
|
|
19
|
-
constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
|
|
20
|
-
this.destroy = () => {
|
|
21
|
-
this.el = document.getElementById(this.id);
|
|
22
|
-
if (this.el) {
|
|
23
|
-
this.el.remove();
|
|
24
|
-
this.emitHide();
|
|
25
|
-
}
|
|
26
|
-
this.removeListener();
|
|
27
|
-
};
|
|
28
|
-
this.bgColor = () => colorHelper.ColorHelper.twColor(this.color, 700);
|
|
29
|
-
this.target = () => document.getElementById(this.targetId);
|
|
30
|
-
this.sizeClass = () => {
|
|
31
|
-
switch (this.size) {
|
|
32
|
-
case bcm.Bcm.Size.small:
|
|
33
|
-
return "tw-text-1";
|
|
34
|
-
case bcm.Bcm.Size.medium:
|
|
35
|
-
return "tw-text-2";
|
|
36
|
-
case bcm.Bcm.Size.large:
|
|
37
|
-
return "tw-text-3";
|
|
38
|
-
default:
|
|
39
|
-
return "tw-text-2";
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
this.init = () => {
|
|
43
|
-
this.el = generate.Generate.createElement("div", {
|
|
44
|
-
"id": `${this.targetId}-tooltip-box`,
|
|
45
|
-
"class": `
|
|
46
|
-
tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
|
|
47
|
-
"role": "tooltip",
|
|
48
|
-
"aria-hidden": "true",
|
|
49
|
-
"style": `color: ${colorHelper.ColorHelper.twColorReverse(this.bgColor())}`,
|
|
50
|
-
"innerHTML": stringHelper.StringHelper.trim(this.message),
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
this.update = () => {
|
|
54
|
-
this.el = document.getElementById(this.id);
|
|
55
|
-
if (this.el) {
|
|
56
|
-
this.hide();
|
|
57
|
-
this.show();
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
this.listener = () => {
|
|
61
|
-
window.addEventListener("resize", this.calculatePosition.bind(this));
|
|
62
|
-
window.addEventListener("scroll", this.calculatePosition.bind(this), true);
|
|
63
|
-
window.addEventListener("wheel", this.calculatePosition.bind(this));
|
|
64
|
-
if (this.trigger && this.target()) {
|
|
65
|
-
switch (this.trigger) {
|
|
66
|
-
case "click":
|
|
67
|
-
this.target().addEventListener("click", this.toggle.bind(this));
|
|
68
|
-
this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
|
|
69
|
-
break;
|
|
70
|
-
case "hover":
|
|
71
|
-
this.target().addEventListener("mouseenter", this.show.bind(this));
|
|
72
|
-
this.target().addEventListener("mouseleave", this.hide.bind(this));
|
|
73
|
-
break;
|
|
74
|
-
case "focus":
|
|
75
|
-
this.target().addEventListener("focus", this.show.bind(this), true);
|
|
76
|
-
this.target().addEventListener("blur", this.hide.bind(this), true);
|
|
77
|
-
break;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
this.calculatePosition();
|
|
81
|
-
};
|
|
82
|
-
this.removeListener = () => {
|
|
83
|
-
window.removeEventListener("resize", this.calculatePosition.bind(this));
|
|
84
|
-
window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
|
|
85
|
-
window.removeEventListener("wheel", this.calculatePosition.bind(this));
|
|
86
|
-
if (this.target()) {
|
|
87
|
-
this.target().removeEventListener("click", this.toggle.bind(this));
|
|
88
|
-
this.target().removeEventListener("mouseenter", this.show.bind(this));
|
|
89
|
-
this.target().removeEventListener("mouseleave", this.hide.bind(this));
|
|
90
|
-
this.target().removeEventListener("focus", this.show.bind(this), true);
|
|
91
|
-
this.target().removeEventListener("blur", this.hide.bind(this), true);
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
this.calculatePosition = () => {
|
|
95
|
-
this.el = document.getElementById(this.id);
|
|
96
|
-
if (this.el) {
|
|
97
|
-
floatingUi.FloatingUI({
|
|
98
|
-
ref: this.target(),
|
|
99
|
-
floating: this.el,
|
|
100
|
-
placement: this.placement,
|
|
101
|
-
offset: 8,
|
|
102
|
-
arrow: true,
|
|
103
|
-
arrowColor: `tw-bg-${this.bgColor()}`,
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
this.show = async () => {
|
|
108
|
-
if (this.message) {
|
|
109
|
-
this.init();
|
|
110
|
-
await utils.delay(this.openDelay);
|
|
111
|
-
this.calculatePosition();
|
|
112
|
-
this.emitShow();
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
this.hide();
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
|
-
this.hide = async () => {
|
|
119
|
-
this.el = document.getElementById(this.id);
|
|
120
|
-
if (this.el) {
|
|
121
|
-
await utils.delay(this.closeDelay);
|
|
122
|
-
this.el && this.el.remove();
|
|
123
|
-
this.emitHide();
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
this.toggle = () => {
|
|
127
|
-
this.el = document.getElementById(this.id);
|
|
128
|
-
if (this.el) {
|
|
129
|
-
this.hide();
|
|
130
|
-
}
|
|
131
|
-
else {
|
|
132
|
-
this.show();
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
this.message = message;
|
|
136
|
-
this.targetId = targetId;
|
|
137
|
-
this.placement = placement;
|
|
138
|
-
this.color = color;
|
|
139
|
-
this.id = targetId + "-tooltip-box";
|
|
140
|
-
this.trigger = trigger;
|
|
141
|
-
this.size = size;
|
|
142
|
-
this.openDelay = openDelay;
|
|
143
|
-
this.closeDelay = closeDelay;
|
|
144
|
-
this.autoHide = autoHide;
|
|
145
|
-
this.emitShow = emitShow;
|
|
146
|
-
this.emitHide = emitHide;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
exports.Tooltip = Tooltip;
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
|
|
2
|
-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
|
|
3
|
-
.size-1 {
|
|
4
|
-
font-size: 12px;
|
|
5
|
-
line-height: 20px;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.size-2 {
|
|
9
|
-
font-size: 14px;
|
|
10
|
-
line-height: 22px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.size-3 {
|
|
14
|
-
font-size: 16px;
|
|
15
|
-
line-height: 24px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.size-4 {
|
|
19
|
-
font-size: 20px;
|
|
20
|
-
line-height: 28px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.size-5 {
|
|
24
|
-
font-size: 24px;
|
|
25
|
-
line-height: 32px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.size-6 {
|
|
29
|
-
font-size: 30px;
|
|
30
|
-
line-height: 38px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.size-7 {
|
|
34
|
-
font-size: 38px;
|
|
35
|
-
line-height: 46px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.size-8 {
|
|
39
|
-
font-size: 46px;
|
|
40
|
-
line-height: 54px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.size-9 {
|
|
44
|
-
font-size: 56px;
|
|
45
|
-
line-height: 64px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.weight-regular {
|
|
49
|
-
font-weight: 400;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.weight-semibold {
|
|
53
|
-
font-weight: 500;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Generator
|
|
58
|
-
*/
|
|
59
|
-
.input-size-large {
|
|
60
|
-
height: 40px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.input-size-medium {
|
|
64
|
-
height: 32px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.input-size-small {
|
|
68
|
-
height: 24px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.resize-none textarea {
|
|
72
|
-
resize: none;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.resize-vertical textarea {
|
|
76
|
-
resize: vertical;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.resize-auto textarea {
|
|
80
|
-
height: auto;
|
|
81
|
-
resize: none;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.textarea-size-large {
|
|
85
|
-
padding: 4px 0 0 4px;
|
|
86
|
-
min-height: 40px;
|
|
87
|
-
}
|
|
88
|
-
.textarea-size-large .bcm-input-element {
|
|
89
|
-
min-height: calc((40px - 8px) + 2px);
|
|
90
|
-
}
|
|
91
|
-
.textarea-size-large .input-clear-button {
|
|
92
|
-
height: calc( 40px - 16px );
|
|
93
|
-
top: 8px;
|
|
94
|
-
padding: 0;
|
|
95
|
-
margin-right: 8px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.textarea-size-medium {
|
|
99
|
-
padding: 4px 0 0 4px;
|
|
100
|
-
min-height: 32px;
|
|
101
|
-
}
|
|
102
|
-
.textarea-size-medium .bcm-input-element {
|
|
103
|
-
min-height: calc((32px - 8px) + 2px);
|
|
104
|
-
}
|
|
105
|
-
.textarea-size-medium .input-clear-button {
|
|
106
|
-
height: calc( 32px - 16px );
|
|
107
|
-
top: 8px;
|
|
108
|
-
padding: 0;
|
|
109
|
-
margin-right: 8px;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.textarea-size-small {
|
|
113
|
-
padding: 0px 0 0 4px;
|
|
114
|
-
min-height: 24px;
|
|
115
|
-
}
|
|
116
|
-
.textarea-size-small .bcm-input-element {
|
|
117
|
-
min-height: calc((24px - 8px) + 2px);
|
|
118
|
-
}
|
|
119
|
-
.textarea-size-small .input-clear-button {
|
|
120
|
-
height: calc( 24px - 16px );
|
|
121
|
-
top: 8px;
|
|
122
|
-
padding: 0;
|
|
123
|
-
margin-right: 8px;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
* {
|
|
127
|
-
box-sizing: border-box;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.bcm-avatar {
|
|
131
|
-
--bcm-avatar-color: var(--bcm-new-ds-color-slate-600);
|
|
132
|
-
--bcm-avatar-background-color: var(--bcm-new-ds-color-slate-100);
|
|
133
|
-
--prefix-height: 40px;
|
|
134
|
-
--prefix-font-size: font-size(2);
|
|
135
|
-
font-family: "Inter", sans-serif;
|
|
136
|
-
font-size: 14px;
|
|
137
|
-
line-height: calc(14px + 8px);
|
|
138
|
-
font-weight: 400;
|
|
139
|
-
display: inline-flex;
|
|
140
|
-
flex-direction: row;
|
|
141
|
-
align-items: center;
|
|
142
|
-
justify-content: center;
|
|
143
|
-
flex-wrap: nowrap;
|
|
144
|
-
background-color: var(--bcm-avatar-background-color);
|
|
145
|
-
color: var(--bcm-avatar-color);
|
|
146
|
-
text-transform: uppercase;
|
|
147
|
-
}
|
|
148
|
-
.bcm-avatar.hidden {
|
|
149
|
-
display: none;
|
|
150
|
-
}
|
|
151
|
-
.bcm-avatar img {
|
|
152
|
-
width: 100%;
|
|
153
|
-
height: 100%;
|
|
154
|
-
}
|
|
155
|
-
.bcm-avatar__shape-ellipse, .bcm-avatar__shape-ellipse > img {
|
|
156
|
-
border-radius: 100px;
|
|
157
|
-
}
|
|
158
|
-
.bcm-avatar__shape-square, .bcm-avatar__shape-square > img {
|
|
159
|
-
border-radius: 4px;
|
|
160
|
-
}
|
|
161
|
-
.bcm-avatar__shape-ellipse .bcm-badge {
|
|
162
|
-
top: 0px;
|
|
163
|
-
right: 0px;
|
|
164
|
-
}
|
|
165
|
-
.bcm-avatar__shape-square .bcm-badge {
|
|
166
|
-
top: -2px;
|
|
167
|
-
right: -2px;
|
|
168
|
-
}
|
|
169
|
-
.bcm-avatar__size-small {
|
|
170
|
-
font-size: 10px;
|
|
171
|
-
line-height: calc(10px + 8px);
|
|
172
|
-
height: 24px;
|
|
173
|
-
width: 24px;
|
|
174
|
-
}
|
|
175
|
-
.bcm-avatar__size-medium {
|
|
176
|
-
font-size: 12px;
|
|
177
|
-
line-height: calc(12px + 8px);
|
|
178
|
-
height: 32px;
|
|
179
|
-
width: 32px;
|
|
180
|
-
}
|
|
181
|
-
.bcm-avatar__size-large {
|
|
182
|
-
font-size: 14px;
|
|
183
|
-
line-height: calc(14px + 8px);
|
|
184
|
-
height: 40px;
|
|
185
|
-
width: 40px;
|
|
186
|
-
}
|
|
187
|
-
.bcm-avatar__size-custom {
|
|
188
|
-
font-size: var(--bcm-avatar-font-size);
|
|
189
|
-
line-height: calc(var(--bcm-avatar-font-size) + 8px);
|
|
190
|
-
height: var(--bcm-avatar-height);
|
|
191
|
-
width: var(--bcm-avatar-height);
|
|
192
|
-
}
|
|
193
|
-
.bcm-avatar__status {
|
|
194
|
-
position: relative;
|
|
195
|
-
}
|
|
196
|
-
.bcm-avatar__status .bcm-badge {
|
|
197
|
-
position: absolute;
|
|
198
|
-
}
|
|
@@ -1,231 +0,0 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
|
|
2
|
-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
|
|
3
|
-
.size-1 {
|
|
4
|
-
font-size: 12px;
|
|
5
|
-
line-height: 20px;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.size-2 {
|
|
9
|
-
font-size: 14px;
|
|
10
|
-
line-height: 22px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.size-3 {
|
|
14
|
-
font-size: 16px;
|
|
15
|
-
line-height: 24px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.size-4 {
|
|
19
|
-
font-size: 20px;
|
|
20
|
-
line-height: 28px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.size-5 {
|
|
24
|
-
font-size: 24px;
|
|
25
|
-
line-height: 32px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.size-6 {
|
|
29
|
-
font-size: 30px;
|
|
30
|
-
line-height: 38px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.size-7 {
|
|
34
|
-
font-size: 38px;
|
|
35
|
-
line-height: 46px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.size-8 {
|
|
39
|
-
font-size: 46px;
|
|
40
|
-
line-height: 54px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.size-9 {
|
|
44
|
-
font-size: 56px;
|
|
45
|
-
line-height: 64px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.weight-regular {
|
|
49
|
-
font-weight: 400;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.weight-semibold {
|
|
53
|
-
font-weight: 500;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Generator
|
|
58
|
-
*/
|
|
59
|
-
.input-size-large {
|
|
60
|
-
height: 40px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.input-size-medium {
|
|
64
|
-
height: 32px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.input-size-small {
|
|
68
|
-
height: 24px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.resize-none textarea {
|
|
72
|
-
resize: none;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.resize-vertical textarea {
|
|
76
|
-
resize: vertical;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.resize-auto textarea {
|
|
80
|
-
height: auto;
|
|
81
|
-
resize: none;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.textarea-size-large {
|
|
85
|
-
padding: 4px 0 0 4px;
|
|
86
|
-
min-height: 40px;
|
|
87
|
-
}
|
|
88
|
-
.textarea-size-large .bcm-input-element {
|
|
89
|
-
min-height: calc((40px - 8px) + 2px);
|
|
90
|
-
}
|
|
91
|
-
.textarea-size-large .input-clear-button {
|
|
92
|
-
height: calc( 40px - 16px );
|
|
93
|
-
top: 8px;
|
|
94
|
-
padding: 0;
|
|
95
|
-
margin-right: 8px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.textarea-size-medium {
|
|
99
|
-
padding: 4px 0 0 4px;
|
|
100
|
-
min-height: 32px;
|
|
101
|
-
}
|
|
102
|
-
.textarea-size-medium .bcm-input-element {
|
|
103
|
-
min-height: calc((32px - 8px) + 2px);
|
|
104
|
-
}
|
|
105
|
-
.textarea-size-medium .input-clear-button {
|
|
106
|
-
height: calc( 32px - 16px );
|
|
107
|
-
top: 8px;
|
|
108
|
-
padding: 0;
|
|
109
|
-
margin-right: 8px;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.textarea-size-small {
|
|
113
|
-
padding: 0px 0 0 4px;
|
|
114
|
-
min-height: 24px;
|
|
115
|
-
}
|
|
116
|
-
.textarea-size-small .bcm-input-element {
|
|
117
|
-
min-height: calc((24px - 8px) + 2px);
|
|
118
|
-
}
|
|
119
|
-
.textarea-size-small .input-clear-button {
|
|
120
|
-
height: calc( 24px - 16px );
|
|
121
|
-
top: 8px;
|
|
122
|
-
padding: 0;
|
|
123
|
-
margin-right: 8px;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
* {
|
|
127
|
-
box-sizing: border-box;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.bcm-badge {
|
|
131
|
-
--bcm-badge-color: var(--bcm-new-ds-color-white);
|
|
132
|
-
--bcm-badge-background-color: var(--bcm-new-ds-color-slate-400);
|
|
133
|
-
--bcm-badge-spacing: 4px;
|
|
134
|
-
font-family: "Inter", sans-serif;
|
|
135
|
-
font-size: 14px;
|
|
136
|
-
line-height: calc(14px + 8px);
|
|
137
|
-
font-weight: 400;
|
|
138
|
-
box-sizing: border-box;
|
|
139
|
-
display: inline-flex;
|
|
140
|
-
flex-direction: row;
|
|
141
|
-
align-items: center;
|
|
142
|
-
justify-content: flex-start;
|
|
143
|
-
flex-wrap: nowrap;
|
|
144
|
-
gap: 4px;
|
|
145
|
-
}
|
|
146
|
-
.bcm-badge.hidden {
|
|
147
|
-
display: none;
|
|
148
|
-
}
|
|
149
|
-
.bcm-badge span:empty {
|
|
150
|
-
display: none;
|
|
151
|
-
}
|
|
152
|
-
.bcm-badge__dot {
|
|
153
|
-
color: var(--bcm-badge-color);
|
|
154
|
-
background-color: var(--bcm-badge-background-color);
|
|
155
|
-
display: inline-block;
|
|
156
|
-
border-radius: 100px;
|
|
157
|
-
position: relative;
|
|
158
|
-
}
|
|
159
|
-
.bcm-badge__dot-text {
|
|
160
|
-
display: flex;
|
|
161
|
-
flex-direction: row;
|
|
162
|
-
align-items: center;
|
|
163
|
-
justify-content: center;
|
|
164
|
-
flex-wrap: nowrap;
|
|
165
|
-
padding: 0 var(--bcm-badge-spacing);
|
|
166
|
-
z-index: 2;
|
|
167
|
-
color: var(--bcm-badge-color);
|
|
168
|
-
}
|
|
169
|
-
.bcm-badge__dot-size-small {
|
|
170
|
-
font-size: 10px;
|
|
171
|
-
line-height: calc(10px + 8px);
|
|
172
|
-
min-width: 6px;
|
|
173
|
-
min-height: 6px;
|
|
174
|
-
}
|
|
175
|
-
.bcm-badge__dot-size-small .bcm-badge__dot-text {
|
|
176
|
-
min-width: calc(10px + 8px);
|
|
177
|
-
}
|
|
178
|
-
.bcm-badge__dot-size-medium {
|
|
179
|
-
font-size: 12px;
|
|
180
|
-
line-height: calc(12px + 8px);
|
|
181
|
-
min-width: 8px;
|
|
182
|
-
min-height: 8px;
|
|
183
|
-
}
|
|
184
|
-
.bcm-badge__dot-size-medium .bcm-badge__dot-text {
|
|
185
|
-
min-width: calc(12px + 8px);
|
|
186
|
-
}
|
|
187
|
-
.bcm-badge__dot-size-large {
|
|
188
|
-
font-size: 14px;
|
|
189
|
-
line-height: calc(14px + 8px);
|
|
190
|
-
min-width: 10px;
|
|
191
|
-
min-height: 10px;
|
|
192
|
-
}
|
|
193
|
-
.bcm-badge__dot-size-large .bcm-badge__dot-text {
|
|
194
|
-
min-width: calc(14px + 8px);
|
|
195
|
-
}
|
|
196
|
-
.bcm-badge__dot-blink {
|
|
197
|
-
position: relative;
|
|
198
|
-
z-index: 1;
|
|
199
|
-
}
|
|
200
|
-
.bcm-badge__dot-blink:after {
|
|
201
|
-
content: "";
|
|
202
|
-
position: absolute;
|
|
203
|
-
z-index: -1;
|
|
204
|
-
top: 0;
|
|
205
|
-
left: 0;
|
|
206
|
-
background: var(--bcm-badge-background-color);
|
|
207
|
-
border-radius: 100px;
|
|
208
|
-
opacity: 0.7;
|
|
209
|
-
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
210
|
-
transform: scale(1);
|
|
211
|
-
width: 100%;
|
|
212
|
-
height: 100%;
|
|
213
|
-
}
|
|
214
|
-
.bcm-badge__dot:after {
|
|
215
|
-
background-color: var(--bcm-badge-background-color);
|
|
216
|
-
animation: badge-pulse 2s infinite;
|
|
217
|
-
}
|
|
218
|
-
@keyframes badge-pulse {
|
|
219
|
-
0% {
|
|
220
|
-
transform: scale(0.95);
|
|
221
|
-
box-shadow: 0 0 0 0 var(--bcm-badge-background-color);
|
|
222
|
-
}
|
|
223
|
-
70% {
|
|
224
|
-
transform: scale(1);
|
|
225
|
-
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
|
|
226
|
-
}
|
|
227
|
-
100% {
|
|
228
|
-
transform: scale(0.95);
|
|
229
|
-
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
230
|
-
}
|
|
231
|
-
}
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built with Stencil
|
|
3
|
-
* Copyright (c) Bromcom.
|
|
4
|
-
*/
|
|
5
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-348b16ad.js';
|
|
6
|
-
import { c as classnames } from './index-ed9652af.js';
|
|
7
|
-
import { I as IsLoad } from './is-load-decorator-07d3502a.js';
|
|
8
|
-
import { J as JsonParse } from './json-parse-decarator-2bcd4584.js';
|
|
9
|
-
import { G as Generate } from './generate-e7435a13.js';
|
|
10
|
-
import { a as Bcm } from './bcm-9f50af9c.js';
|
|
11
|
-
import './_commonjsHelpers-3016b722.js';
|
|
12
|
-
import './colors-44c95e7e.js';
|
|
13
|
-
|
|
14
|
-
const dropdownCss = "@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}*{box-sizing:border-box}.bcm-dropdown{width:fit-content;display:inline-flex;flex-direction:row}.bcm-dropdown.hidden{display:none}.bcm-dropdown.no-style{cursor:pointer}.bcm-dropdown.full-width{width:100%}.bcm-dropdown.full-width .bcm-button__container-text{flex:1;justify-content:space-between}.bcm-dropdown__type-split .main-button .bcm-button__container{border-top-right-radius:0;border-bottom-right-radius:0}.bcm-dropdown__type-split .split-button .bcm-button__container{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:1px;min-width:auto}.bcm-dropdown__icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;transform:rotate(0deg);transition:transform 0.2s ease}.bcm-dropdown__icon--open{transform:rotate(180deg)}";
|
|
15
|
-
|
|
16
|
-
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
17
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
18
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
19
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
20
|
-
else
|
|
21
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
22
|
-
if (d = decorators[i])
|
|
23
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
24
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
25
|
-
};
|
|
26
|
-
const BcmDropdown = class {
|
|
27
|
-
constructor(hostRef) {
|
|
28
|
-
registerInstance(this, hostRef);
|
|
29
|
-
this.bcmClick = createEvent(this, "bcm-click", 7);
|
|
30
|
-
this.bcmDropdownChange = createEvent(this, "bcm-dropdown-change", 7);
|
|
31
|
-
this.isOpen = undefined;
|
|
32
|
-
this._id = Generate.UID();
|
|
33
|
-
this.menuId = Generate.UID();
|
|
34
|
-
this.hidden = false;
|
|
35
|
-
this.type = 'dropdown';
|
|
36
|
-
this.size = Bcm.Size.medium;
|
|
37
|
-
this.disabled = false;
|
|
38
|
-
this.kind = Bcm.Kind.solid;
|
|
39
|
-
this.icon = undefined;
|
|
40
|
-
this.href = undefined;
|
|
41
|
-
this.target = undefined;
|
|
42
|
-
this.value = undefined;
|
|
43
|
-
this.noStyle = false;
|
|
44
|
-
this.dropdownIcon = 'fas fa-angle-down';
|
|
45
|
-
this.linkedComponent = undefined;
|
|
46
|
-
this.loading = false;
|
|
47
|
-
this.variant = undefined;
|
|
48
|
-
this.dataDismiss = false;
|
|
49
|
-
this.fullWidth = false;
|
|
50
|
-
this.iconPosition = Bcm.IconPosition.prefix;
|
|
51
|
-
this.placement = undefined;
|
|
52
|
-
this.height = undefined;
|
|
53
|
-
this.maxHeight = '500px';
|
|
54
|
-
this.minHeight = '50px';
|
|
55
|
-
this.stopDeepClean = false;
|
|
56
|
-
this.selectable = true;
|
|
57
|
-
this.gap = '4px';
|
|
58
|
-
this.color = undefined;
|
|
59
|
-
this.activeItem = null;
|
|
60
|
-
this.data = [];
|
|
61
|
-
}
|
|
62
|
-
async dataChanged(newValue) {
|
|
63
|
-
if (newValue) {
|
|
64
|
-
this.data = newValue;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
async setActive(id = null) {
|
|
68
|
-
var _a, _b;
|
|
69
|
-
(_b = (_a = document
|
|
70
|
-
.getElementById(`${this.menuId}`)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('bcm-menu')) === null || _b === void 0 ? void 0 : _b.forEach(item => {
|
|
71
|
-
item.setActive(id);
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
async getActive() {
|
|
75
|
-
return this.activeItem;
|
|
76
|
-
}
|
|
77
|
-
handleSlotItems({ detail }) {
|
|
78
|
-
this.data = detail;
|
|
79
|
-
}
|
|
80
|
-
setActiveAttribute(e) {
|
|
81
|
-
if (e.detail) {
|
|
82
|
-
this.bcmDropdownChange.emit(e.detail);
|
|
83
|
-
this.activeItem = e.detail;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
;
|
|
87
|
-
render() {
|
|
88
|
-
const { size, kind, disabled, icon, color, href, target, loading, type, variant, fullWidth, isOpen } = this;
|
|
89
|
-
const hostClasses = classnames('bcm-dropdown', 'bcm-dropdown__type-' + type, {
|
|
90
|
-
'full-width': fullWidth,
|
|
91
|
-
'no-style': this.noStyle,
|
|
92
|
-
'hidden': this.hidden || this.linkedComponent,
|
|
93
|
-
});
|
|
94
|
-
const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (disabled && { disabled })), (loading && { loading })), (kind && { kind })), (size && { size })), (variant && { variant })), (color && { color })), (this.menuId && { 'menu-id': this.menuId }));
|
|
95
|
-
const iconClasses = classnames('bcm-dropdown__icon', {
|
|
96
|
-
'bcm-dropdown__icon--open': isOpen,
|
|
97
|
-
});
|
|
98
|
-
const dropdownIcon = (h("span", { class: iconClasses }, h("bcm-icon", { icon: this.dropdownIcon })));
|
|
99
|
-
return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e), gap: this.gap, dropdown: true }), h("slot", { name: "content" }))));
|
|
100
|
-
}
|
|
101
|
-
get el() { return getElement(this); }
|
|
102
|
-
static get watchers() { return {
|
|
103
|
-
"data": ["dataChanged"]
|
|
104
|
-
}; }
|
|
105
|
-
};
|
|
106
|
-
__decorate([
|
|
107
|
-
IsLoad()
|
|
108
|
-
], BcmDropdown.prototype, "el", void 0);
|
|
109
|
-
__decorate([
|
|
110
|
-
JsonParse('data', true)
|
|
111
|
-
], BcmDropdown.prototype, "dataChanged", null);
|
|
112
|
-
BcmDropdown.style = dropdownCss;
|
|
113
|
-
|
|
114
|
-
export { BcmDropdown as bcm_dropdown };
|