bromcom-ui 2.8.0-rc.10-f → 2.8.0-rc.10-g
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-8d00f15c.entry.js → p-0175104f.entry.js} +1 -1
- package/dist/bromcom-ui/{p-bf793f02.entry.js → p-0248c4f7.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ea722b84.js → p-036b5e90.js} +1 -1
- package/dist/bromcom-ui/{p-68870edd.entry.js → p-0a759563.entry.js} +1 -1
- package/dist/bromcom-ui/{p-4af70ae2.entry.js → p-0de1747d.entry.js} +1 -1
- package/dist/bromcom-ui/p-0f7a532c.js +5 -0
- package/dist/bromcom-ui/{p-96a6ea7b.entry.js → p-11cab8a3.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d3492737.entry.js → p-1760fbc1.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ad191dd1.entry.js → p-198f27f0.entry.js} +1 -1
- package/dist/bromcom-ui/{p-9d177c47.entry.js → p-1dd4c23d.entry.js} +1 -1
- package/dist/bromcom-ui/{p-af43509f.entry.js → p-1e202809.entry.js} +1 -1
- package/dist/bromcom-ui/{p-c282ccd5.entry.js → p-284f33d1.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d0750f4d.js → p-2d7a2ff7.js} +1 -1
- package/dist/bromcom-ui/{p-3fc76873.entry.js → p-2fed40df.entry.js} +1 -1
- package/dist/bromcom-ui/{p-58efe9aa.entry.js → p-309c9146.entry.js} +1 -1
- package/dist/bromcom-ui/{p-a0d8a598.entry.js → p-30d7353f.entry.js} +1 -1
- package/dist/bromcom-ui/{p-f0ff7f44.entry.js → p-316ccc1d.entry.js} +1 -1
- package/dist/bromcom-ui/{p-1748fa48.entry.js → p-33540594.entry.js} +1 -1
- package/dist/bromcom-ui/{p-1d0bf823.entry.js → p-3eea9349.entry.js} +1 -1
- package/dist/bromcom-ui/{p-993b7cc2.entry.js → p-44bd0e80.entry.js} +1 -1
- package/dist/bromcom-ui/{p-8383a0df.entry.js → p-4ad5bcfe.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ce7c926c.entry.js → p-50bf8630.entry.js} +1 -1
- package/dist/bromcom-ui/{p-7093021e.entry.js → p-53ca66f4.entry.js} +1 -1
- package/dist/bromcom-ui/{p-6612ed29.entry.js → p-53f39686.entry.js} +1 -1
- package/dist/bromcom-ui/{p-625da564.entry.js → p-55d1f990.entry.js} +1 -1
- package/dist/bromcom-ui/{p-e4924a0c.entry.js → p-561cf7fb.entry.js} +1 -1
- package/dist/bromcom-ui/{p-59c7e787.entry.js → p-578dc2f2.entry.js} +1 -1
- package/dist/bromcom-ui/{p-fd931091.entry.js → p-5ac33f6a.entry.js} +1 -1
- package/dist/bromcom-ui/{p-8e85c2be.entry.js → p-6510ae4a.entry.js} +1 -1
- package/dist/bromcom-ui/{p-05851404.entry.js → p-71b3a42b.entry.js} +1 -1
- package/dist/bromcom-ui/{p-9c761970.js → p-72197523.js} +1 -1
- package/dist/bromcom-ui/{p-a5bc6810.entry.js → p-804fb116.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ec920bc7.entry.js → p-89a75f62.entry.js} +1 -1
- package/dist/bromcom-ui/{p-fa8efda9.entry.js → p-90ce53df.entry.js} +1 -1
- package/dist/bromcom-ui/{p-00081c8f.entry.js → p-9318f783.entry.js} +1 -1
- package/dist/bromcom-ui/{p-be390f36.entry.js → p-96db5ce1.entry.js} +1 -1
- package/dist/bromcom-ui/{p-76b12489.js → p-9b93939a.js} +1 -1
- package/dist/bromcom-ui/{p-67667db7.entry.js → p-a0f65dfc.entry.js} +1 -1
- package/dist/bromcom-ui/{p-12bdaed1.entry.js → p-a11d59ec.entry.js} +1 -1
- package/dist/bromcom-ui/{p-a8e3e1b5.js → p-ae332cfe.js} +1 -1
- package/dist/bromcom-ui/{p-9486d6a0.entry.js → p-c04cc95a.entry.js} +1 -1
- package/dist/bromcom-ui/{p-40ed6269.entry.js → p-c4eac148.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ec8f3c78.entry.js → p-c54c2a46.entry.js} +1 -1
- package/dist/bromcom-ui/{p-10f8e27d.entry.js → p-ca7b2bb3.entry.js} +1 -1
- package/dist/bromcom-ui/{p-6ee5b075.js → p-d2a85ae7.js} +1 -1
- package/dist/bromcom-ui/{p-ce86d569.entry.js → p-dfc3394e.entry.js} +1 -1
- package/dist/bromcom-ui/{p-40d09bfc.entry.js → p-ed94e252.entry.js} +1 -1
- package/dist/bromcom-ui/p-ef5ee2e6.entry.js +5 -0
- package/dist/bromcom-ui/{p-fd21becc.entry.js → p-f0fd61b3.entry.js} +1 -1
- package/dist/bromcom-ui/p-f4fc571c.entry.js +5 -0
- package/dist/bromcom-ui/{p-08841042.entry.js → p-fc23f069.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d091119c.entry.js → p-fda04acb.entry.js} +1 -1
- 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_2.cjs.entry.js +3 -3
- 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-button.cjs.entry.js +1 -1
- package/dist/cjs/bcm-card.cjs.entry.js +1 -1
- package/dist/cjs/bcm-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +1 -1
- package/dist/cjs/bcm-checkbox_2.cjs.entry.js +1 -1
- package/dist/cjs/bcm-chip.cjs.entry.js +1 -1
- package/dist/cjs/bcm-collapse.cjs.entry.js +1 -1
- 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 +3 -3
- package/dist/cjs/bcm-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/bcm-expansion-panel.cjs.entry.js +1 -1
- package/dist/cjs/bcm-form-2.cjs.entry.js +1 -1
- package/dist/cjs/bcm-input.cjs.entry.js +4 -4
- package/dist/cjs/bcm-item.cjs.entry.js +1 -1
- package/dist/cjs/bcm-items.cjs.entry.js +1 -1
- package/dist/cjs/bcm-label_2.cjs.entry.js +7 -7
- package/dist/cjs/bcm-linked_2.cjs.entry.js +24 -24
- package/dist/cjs/bcm-list.cjs.entry.js +5 -5
- package/dist/cjs/bcm-modal.cjs.entry.js +1 -1
- package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +1 -1
- package/dist/cjs/bcm-popconfirm.cjs.entry.js +1 -1
- package/dist/cjs/bcm-popover.cjs.entry.js +7 -7
- package/dist/cjs/bcm-progress.cjs.entry.js +1 -1
- package/dist/cjs/bcm-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/bcm-radio.cjs.entry.js +1 -1
- package/dist/cjs/bcm-range.cjs.entry.js +1 -1
- package/dist/cjs/bcm-search.cjs.entry.js +2 -2
- package/dist/cjs/bcm-skeleton.cjs.entry.js +6 -6
- package/dist/cjs/bcm-step.cjs.entry.js +2 -2
- package/dist/cjs/bcm-stepper.cjs.entry.js +2 -2
- package/dist/cjs/bcm-switch.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tab-group.cjs.entry.js +47 -47
- 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/{generate-43262f69.js → generate-62c3a20c.js} +1 -1
- package/dist/cjs/{input-template-82b06cc3.js → input-template-da75023a.js} +1 -1
- package/dist/cjs/{json-parse-decarator-9bc2ee93.js → json-parse-decarator-935df068.js} +1 -1
- package/dist/cjs/{number-helper-fa69ea24.js → number-helper-4cfa88f0.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-d7f6c19a.js → stepper-states-50ec45ff.js} +1 -1
- package/dist/cjs/{tooltip-helper-9f6a9b2d.js → tooltip-helper-3f7ad52d.js} +3 -3
- package/dist/cjs/{validators-97891f43.js → validators-2a28c1ed.js} +1 -1
- package/dist/collection/components/molecules/linked/linked.js +28 -28
- package/dist/collection/components/molecules/popover/popover.js +11 -11
- package/dist/collection/components/molecules/skeleton/skeleton.js +8 -8
- package/dist/collection/components/molecules/tab-group/tab-group.js +52 -52
- package/dist/collection/components/molecules/tooltip/tooltip.js +9 -9
- package/dist/components/bcm-popover.js +4 -4
- package/dist/components/bcm-tab-group.js +46 -46
- package/dist/components/generate.js +1 -1
- package/dist/components/linked.js +20 -20
- package/dist/components/skeleton.js +5 -5
- package/dist/components/tooltip.js +3 -3
- 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_2.entry.js +3 -3
- package/dist/esm/bcm-breadcrumb.entry.js +1 -1
- package/dist/esm/bcm-button-group.entry.js +1 -1
- package/dist/esm/bcm-button.entry.js +1 -1
- package/dist/esm/bcm-card.entry.js +1 -1
- package/dist/esm/bcm-checkbox-group.entry.js +1 -1
- package/dist/esm/bcm-checkbox-lite_9.entry.js +1 -1
- package/dist/esm/bcm-checkbox_2.entry.js +1 -1
- package/dist/esm/bcm-chip.entry.js +1 -1
- package/dist/esm/bcm-collapse.entry.js +1 -1
- package/dist/esm/bcm-date-picker.entry.js +1 -1
- package/dist/esm/bcm-datetime-picker.entry.js +1 -1
- package/dist/esm/bcm-default.entry.js +1 -1
- package/dist/esm/bcm-drawer.entry.js +3 -3
- package/dist/esm/bcm-dropdown.entry.js +2 -2
- package/dist/esm/bcm-expansion-panel.entry.js +1 -1
- package/dist/esm/bcm-form-2.entry.js +1 -1
- package/dist/esm/bcm-input.entry.js +4 -4
- package/dist/esm/bcm-item.entry.js +1 -1
- package/dist/esm/bcm-items.entry.js +1 -1
- package/dist/esm/bcm-label_2.entry.js +7 -7
- package/dist/esm/bcm-linked_2.entry.js +24 -24
- package/dist/esm/bcm-list.entry.js +5 -5
- package/dist/esm/bcm-modal.entry.js +1 -1
- package/dist/esm/bcm-popconfirm-box.entry.js +1 -1
- package/dist/esm/bcm-popconfirm.entry.js +1 -1
- package/dist/esm/bcm-popover.entry.js +7 -7
- package/dist/esm/bcm-progress.entry.js +1 -1
- package/dist/esm/bcm-radio-group.entry.js +1 -1
- package/dist/esm/bcm-radio.entry.js +1 -1
- package/dist/esm/bcm-range.entry.js +1 -1
- package/dist/esm/bcm-search.entry.js +2 -2
- package/dist/esm/bcm-skeleton.entry.js +6 -6
- package/dist/esm/bcm-step.entry.js +2 -2
- package/dist/esm/bcm-stepper.entry.js +2 -2
- package/dist/esm/bcm-switch.entry.js +1 -1
- package/dist/esm/bcm-tab-group.entry.js +47 -47
- package/dist/esm/bcm-tag.entry.js +2 -2
- package/dist/esm/bcm-textarea.entry.js +2 -2
- package/dist/esm/bcm-time-picker.entry.js +1 -1
- package/dist/esm/{generate-b0bd116a.js → generate-e03db45c.js} +1 -1
- package/dist/esm/{input-template-46ef248f.js → input-template-3e2dfbe2.js} +1 -1
- package/dist/esm/{json-parse-decarator-012a2b54.js → json-parse-decarator-ba60b5d7.js} +1 -1
- package/dist/esm/{number-helper-c6129a13.js → number-helper-3c965a72.js} +1 -1
- package/dist/esm/old-bcm-popover-box.entry.js +2 -2
- package/dist/esm/old-bcm-popover.entry.js +1 -1
- package/dist/esm/{stepper-states-4e165709.js → stepper-states-0837281e.js} +1 -1
- package/dist/esm/{tooltip-helper-8bae18d3.js → tooltip-helper-3e7c4148.js} +3 -3
- package/dist/esm/{validators-ae61406d.js → validators-827e76f0.js} +1 -1
- package/dist/types/components/molecules/linked/linked.d.ts +2 -2
- package/dist/types/components/molecules/popover/popover.d.ts +3 -3
- package/dist/types/components/molecules/skeleton/skeleton.d.ts +1 -1
- package/dist/types/components/molecules/tab-group/tab-group.d.ts +2 -2
- package/dist/types/components/molecules/tooltip/tooltip.d.ts +3 -3
- package/package.json +1 -1
- package/dist/bromcom-ui/p-0244ec6a.entry.js +0 -5
- package/dist/bromcom-ui/p-b465caeb.js +0 -5
- package/dist/bromcom-ui/p-bafdd186.entry.js +0 -5
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
9
9
|
const index = require('./index-b4a2fb85.js');
|
|
10
10
|
const index$1 = require('./index-fdbf5226.js');
|
|
11
11
|
const bcm = require('./bcm-2c51bf0c.js');
|
|
12
|
-
const generate = require('./generate-
|
|
12
|
+
const generate = require('./generate-62c3a20c.js');
|
|
13
13
|
const isLoadDecorator = require('./is-load-decorator-888172a8.js');
|
|
14
14
|
require('./_commonjsHelpers-bd20f4c0.js');
|
|
15
15
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
'use strict';
|
|
6
6
|
|
|
7
7
|
const index = require('./index-b6a28fdb.js');
|
|
8
|
-
const generate = require('./generate-
|
|
8
|
+
const generate = require('./generate-62c3a20c.js');
|
|
9
9
|
const index$1 = require('./index-b4a2fb85.js');
|
|
10
10
|
|
|
11
11
|
const { state } = index.createStore({
|
|
@@ -9,9 +9,9 @@ const stringHelper = require('./string-helper-a54773f3.js');
|
|
|
9
9
|
const floatingUi = require('./floating-ui-ded9c11f.js');
|
|
10
10
|
const colorHelper = require('./color-helper-d1cb7959.js');
|
|
11
11
|
require('./datetime-helper-eaf4fadb.js');
|
|
12
|
-
const generate = require('./generate-
|
|
13
|
-
require('./number-helper-
|
|
14
|
-
require('./validators-
|
|
12
|
+
const generate = require('./generate-62c3a20c.js');
|
|
13
|
+
require('./number-helper-4cfa88f0.js');
|
|
14
|
+
require('./validators-2a28c1ed.js');
|
|
15
15
|
|
|
16
16
|
class Tooltip {
|
|
17
17
|
constructor({ message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
|
|
@@ -12,20 +12,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
13
13
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
14
14
|
};
|
|
15
|
-
import { Host, h } from
|
|
16
|
-
import { Bcm } from
|
|
17
|
-
import { delay, FloatingUI } from
|
|
18
|
-
import { Generate } from
|
|
19
|
-
import { IsLoad } from
|
|
15
|
+
import { Host, h } from '@stencil/core';
|
|
16
|
+
import { Bcm } from '@bcm/model';
|
|
17
|
+
import { delay, FloatingUI } from '@bcm/utils';
|
|
18
|
+
import { Generate } from '@bcm/helpers';
|
|
19
|
+
import { IsLoad } from '@bcm/decorator';
|
|
20
20
|
export class BcmLinked {
|
|
21
21
|
constructor() {
|
|
22
22
|
this._id = Generate.UID();
|
|
23
|
-
this.placement = Bcm.Placement[
|
|
23
|
+
this.placement = Bcm.Placement['bottom-start'];
|
|
24
24
|
this.trigger = Bcm.TriggerType.click;
|
|
25
|
-
this.targetId =
|
|
25
|
+
this.targetId = '';
|
|
26
26
|
this.height = undefined;
|
|
27
27
|
this.maxHeight = undefined;
|
|
28
|
-
this.minHeight =
|
|
28
|
+
this.minHeight = '50px';
|
|
29
29
|
this.isOpen = false;
|
|
30
30
|
}
|
|
31
31
|
target() {
|
|
@@ -41,15 +41,15 @@ export class BcmLinked {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
dismissEvent() {
|
|
44
|
-
document.dispatchEvent(new CustomEvent(
|
|
44
|
+
document.dispatchEvent(new CustomEvent('linked-data-dismiss', { detail: { id: this._id } }));
|
|
45
45
|
}
|
|
46
46
|
checkDataDismiss(e) {
|
|
47
|
-
Generate.findEventPathHasAttribute(e,
|
|
47
|
+
Generate.findEventPathHasAttribute(e, 'data-dismiss') && this.dismissEvent();
|
|
48
48
|
}
|
|
49
49
|
hideChildLinked() {
|
|
50
|
-
this.el.querySelectorAll(
|
|
50
|
+
this.el.querySelectorAll('[is-linked][linked-is-open]').forEach(item => {
|
|
51
51
|
var _a;
|
|
52
|
-
(_a = document.querySelector(`#${item.getAttribute(
|
|
52
|
+
(_a = document.querySelector(`#${item.getAttribute('is-linked')}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
|
|
53
53
|
});
|
|
54
54
|
}
|
|
55
55
|
calculatePosition() {
|
|
@@ -61,7 +61,7 @@ export class BcmLinked {
|
|
|
61
61
|
floating: el,
|
|
62
62
|
placement: this.placement,
|
|
63
63
|
offset: 4,
|
|
64
|
-
autoHidden: el.getAttribute(
|
|
64
|
+
autoHidden: el.getAttribute('main-linked') === 'true' ? false : true,
|
|
65
65
|
autoSize: true,
|
|
66
66
|
style: {
|
|
67
67
|
height: this.height,
|
|
@@ -71,20 +71,20 @@ export class BcmLinked {
|
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
else {
|
|
74
|
-
el.style.visibility =
|
|
75
|
-
el.style.opacity =
|
|
74
|
+
el.style.visibility = 'hidden';
|
|
75
|
+
el.style.opacity = '0';
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
init() {
|
|
80
80
|
const target = this.target();
|
|
81
81
|
if (target) {
|
|
82
|
-
target.setAttribute(
|
|
83
|
-
if (!Generate.getAncestor(target,
|
|
84
|
-
this.el.setAttribute(
|
|
82
|
+
target.setAttribute('is-linked', this.el.id);
|
|
83
|
+
if (!Generate.getAncestor(target, 'bcm-linked')) {
|
|
84
|
+
this.el.setAttribute('main-linked', 'true');
|
|
85
85
|
}
|
|
86
86
|
else {
|
|
87
|
-
this.el.removeAttribute(
|
|
87
|
+
this.el.removeAttribute('main-linked');
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
}
|
|
@@ -106,7 +106,7 @@ export class BcmLinked {
|
|
|
106
106
|
const target = this.target();
|
|
107
107
|
if (target) {
|
|
108
108
|
document.body.appendChild(this.el);
|
|
109
|
-
target.setAttribute(
|
|
109
|
+
target.setAttribute('linked-is-open', 'true');
|
|
110
110
|
this.isOpen = true;
|
|
111
111
|
this.calculatePosition();
|
|
112
112
|
}
|
|
@@ -119,7 +119,7 @@ export class BcmLinked {
|
|
|
119
119
|
wait && (await delay(50));
|
|
120
120
|
const target = this.target();
|
|
121
121
|
if (target) {
|
|
122
|
-
target.removeAttribute(
|
|
122
|
+
target.removeAttribute('linked-is-open');
|
|
123
123
|
this.hideChildLinked();
|
|
124
124
|
this.isOpen = false;
|
|
125
125
|
}
|
|
@@ -133,7 +133,7 @@ export class BcmLinked {
|
|
|
133
133
|
return;
|
|
134
134
|
const isTarget = Generate.findEventPath(e, this.target());
|
|
135
135
|
const isSelf = Generate.findEventPath(e, this.el);
|
|
136
|
-
const isLinked = Generate.findEventPathWithNodeName(e,
|
|
136
|
+
const isLinked = Generate.findEventPathWithNodeName(e, 'BCM-LINKED');
|
|
137
137
|
if (!isTarget && !isSelf && !isLinked) {
|
|
138
138
|
this.hide();
|
|
139
139
|
this.bcmOpen.emit(this.isOpen);
|
|
@@ -142,7 +142,7 @@ export class BcmLinked {
|
|
|
142
142
|
if (this.isOpen) {
|
|
143
143
|
isTarget && this.hide(false);
|
|
144
144
|
isSelf && this.checkDataDismiss(e);
|
|
145
|
-
if (this.el.getAttribute(
|
|
145
|
+
if (this.el.getAttribute('main-linked') === 'true' && !isTarget && !isSelf && !isLinked) {
|
|
146
146
|
this.dismissEvent();
|
|
147
147
|
}
|
|
148
148
|
}
|
|
@@ -163,8 +163,8 @@ export class BcmLinked {
|
|
|
163
163
|
this.bcmOpen.emit(this.isOpen);
|
|
164
164
|
}
|
|
165
165
|
render() {
|
|
166
|
-
const openStyle = this.isOpen ? { visibility:
|
|
167
|
-
return (h(Host, { class: "tw-
|
|
166
|
+
const openStyle = this.isOpen ? { visibility: 'visible', opacity: '1' } : { visibility: 'hidden', opacity: '0' };
|
|
167
|
+
return (h(Host, { class: "tw-block tw-opacity-0 tw-invisible tw-top-0 tw-left-0 tw-rounded tw-bg-white tw-z-tooltip tw-transition-opacity tw-duration-100 tw-shadow tw-overscroll-contain tw-scroll-smooth tw-absolute", style: Object.assign(Object.assign({}, openStyle), { overflow: 'auto' }) }, h("slot", null)));
|
|
168
168
|
}
|
|
169
169
|
static get is() { return "bcm-linked"; }
|
|
170
170
|
static get properties() {
|
|
@@ -208,7 +208,7 @@ export class BcmLinked {
|
|
|
208
208
|
},
|
|
209
209
|
"attribute": "placement",
|
|
210
210
|
"reflect": false,
|
|
211
|
-
"defaultValue": "Bcm.Placement[
|
|
211
|
+
"defaultValue": "Bcm.Placement['bottom-start']"
|
|
212
212
|
},
|
|
213
213
|
"trigger": {
|
|
214
214
|
"type": "string",
|
|
@@ -249,7 +249,7 @@ export class BcmLinked {
|
|
|
249
249
|
},
|
|
250
250
|
"attribute": "target-id",
|
|
251
251
|
"reflect": false,
|
|
252
|
-
"defaultValue": "
|
|
252
|
+
"defaultValue": "''"
|
|
253
253
|
},
|
|
254
254
|
"height": {
|
|
255
255
|
"type": "string",
|
|
@@ -301,7 +301,7 @@ export class BcmLinked {
|
|
|
301
301
|
},
|
|
302
302
|
"attribute": "min-height",
|
|
303
303
|
"reflect": false,
|
|
304
|
-
"defaultValue": "
|
|
304
|
+
"defaultValue": "'50px'"
|
|
305
305
|
},
|
|
306
306
|
"isOpen": {
|
|
307
307
|
"type": "boolean",
|
|
@@ -12,19 +12,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
13
13
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
14
14
|
};
|
|
15
|
-
import { IsLoad } from
|
|
16
|
-
import { Generate, Popover } from
|
|
17
|
-
import { Bcm } from
|
|
18
|
-
import { Host, h } from
|
|
15
|
+
import { IsLoad } from '@bcm/decorator';
|
|
16
|
+
import { Generate, Popover } from '@bcm/helpers';
|
|
17
|
+
import { Bcm } from '@bcm/model';
|
|
18
|
+
import { Host, h } from '@stencil/core';
|
|
19
19
|
export class BcmPopover {
|
|
20
20
|
constructor() {
|
|
21
21
|
this._id = Generate.UID();
|
|
22
|
-
this.message =
|
|
23
|
-
this.content =
|
|
22
|
+
this.message = '';
|
|
23
|
+
this.content = '';
|
|
24
24
|
this.placement = Bcm.Placement.top;
|
|
25
25
|
this.trigger = Bcm.TriggerType.click;
|
|
26
26
|
this.open = false;
|
|
27
|
-
this.color =
|
|
27
|
+
this.color = 'white';
|
|
28
28
|
this.popover = new Popover({
|
|
29
29
|
targetId: this._id,
|
|
30
30
|
content: this.content,
|
|
@@ -56,7 +56,7 @@ export class BcmPopover {
|
|
|
56
56
|
this.popover.toggle();
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
|
-
return (h(Host, { "aria-describedby": "popover", tabindex: "-1", class: "tw-inline-flex tw-
|
|
59
|
+
return (h(Host, { "aria-describedby": "popover", tabindex: "-1", class: "tw-inline-flex tw-w-fit tw-h-fit" }, h("slot", null)));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "bcm-popover"; }
|
|
62
62
|
static get properties() {
|
|
@@ -95,7 +95,7 @@ export class BcmPopover {
|
|
|
95
95
|
},
|
|
96
96
|
"attribute": "message",
|
|
97
97
|
"reflect": false,
|
|
98
|
-
"defaultValue": "
|
|
98
|
+
"defaultValue": "''"
|
|
99
99
|
},
|
|
100
100
|
"content": {
|
|
101
101
|
"type": "string",
|
|
@@ -113,7 +113,7 @@ export class BcmPopover {
|
|
|
113
113
|
},
|
|
114
114
|
"attribute": "content",
|
|
115
115
|
"reflect": false,
|
|
116
|
-
"defaultValue": "
|
|
116
|
+
"defaultValue": "''"
|
|
117
117
|
},
|
|
118
118
|
"placement": {
|
|
119
119
|
"type": "string",
|
|
@@ -195,7 +195,7 @@ export class BcmPopover {
|
|
|
195
195
|
},
|
|
196
196
|
"attribute": "color",
|
|
197
197
|
"reflect": false,
|
|
198
|
-
"defaultValue": "
|
|
198
|
+
"defaultValue": "'white'"
|
|
199
199
|
}
|
|
200
200
|
};
|
|
201
201
|
}
|
|
@@ -12,9 +12,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
13
13
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
14
14
|
};
|
|
15
|
-
import { h } from
|
|
16
|
-
import { IsLoad } from
|
|
17
|
-
import { Generate } from
|
|
15
|
+
import { h } from '@stencil/core';
|
|
16
|
+
import { IsLoad } from '../../../decorators/is-load-decorator';
|
|
17
|
+
import { Generate } from '../../../helper/generate';
|
|
18
18
|
export class BcmSkeleton {
|
|
19
19
|
constructor() {
|
|
20
20
|
this._id = Generate.UID();
|
|
@@ -24,9 +24,9 @@ export class BcmSkeleton {
|
|
|
24
24
|
var _a;
|
|
25
25
|
const parentElement = (_a = this.el) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
26
26
|
if (parentElement) {
|
|
27
|
-
const hidden = document.createElement(
|
|
28
|
-
hidden.setAttribute(
|
|
29
|
-
hidden.classList.add(
|
|
27
|
+
const hidden = document.createElement('span');
|
|
28
|
+
hidden.setAttribute('id', `${this._id}-span`);
|
|
29
|
+
hidden.classList.add('tw-hidden');
|
|
30
30
|
hidden.innerHTML = `<slot />`;
|
|
31
31
|
parentElement.appendChild(hidden);
|
|
32
32
|
if (parentElement.isConnected) {
|
|
@@ -37,9 +37,9 @@ export class BcmSkeleton {
|
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
39
|
const SkeletonAnimate = () => {
|
|
40
|
-
return (h("div", { class: "tw-
|
|
40
|
+
return (h("div", { class: "tw-border tw-border-blue-300 tw-shadow tw-rounded-md tw-p-4 tw-max-w-sm tw-w-full tw-mx-auto" }, h("span", { class: "tw-hidden" }, h("slot", null)), h("div", { class: "tw-animate-pulse tw-flex tw-space-x-4" }, h("div", { class: "tw-rounded-full tw-bg-slate-200 tw-h-10 tw-w-10" }), h("div", { class: "tw-flex-1 tw-space-y-6 tw-py-1" }, h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded" }), h("div", { class: "tw-space-y-3" }, h("div", { class: "tw-grid tw-grid-cols-3 tw-gap-4" }, h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded tw-col-span-2" }), h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded tw-col-span-1" })), h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded" }))))));
|
|
41
41
|
};
|
|
42
|
-
return this.loading ? h(SkeletonAnimate, null) : h("slot", null);
|
|
42
|
+
return (this.loading ? h(SkeletonAnimate, null) : h("slot", null));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "bcm-skeleton"; }
|
|
45
45
|
static get properties() {
|
|
@@ -12,12 +12,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
13
13
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
14
14
|
};
|
|
15
|
-
import { Host, h, forceUpdate } from
|
|
16
|
-
import { IsLoad } from
|
|
17
|
-
import { Generate } from
|
|
18
|
-
import cs from
|
|
19
|
-
import Bcm from
|
|
20
|
-
import snq from
|
|
15
|
+
import { Host, h, forceUpdate } from '@stencil/core';
|
|
16
|
+
import { IsLoad } from '../../../decorators/is-load-decorator';
|
|
17
|
+
import { Generate } from '../../../helper/generate';
|
|
18
|
+
import cs from 'classnames';
|
|
19
|
+
import Bcm from '../../../models/bcm';
|
|
20
|
+
import snq from 'snq';
|
|
21
21
|
export class BcmTabGroup {
|
|
22
22
|
constructor() {
|
|
23
23
|
this.headerItems = [];
|
|
@@ -31,50 +31,50 @@ export class BcmTabGroup {
|
|
|
31
31
|
if ((_a = this.tabItems()) === null || _a === void 0 ? void 0 : _a.length) {
|
|
32
32
|
this.headerItems = [];
|
|
33
33
|
this.tabItems().forEach((tab, index) => {
|
|
34
|
-
let itemActive = tab.hasAttribute(
|
|
35
|
-
let itemDisabled = tab.hasAttribute(
|
|
34
|
+
let itemActive = tab.hasAttribute('active') ? true : false;
|
|
35
|
+
let itemDisabled = tab.hasAttribute('disabled') ? true : false;
|
|
36
36
|
let itemIndex = index + 1;
|
|
37
|
-
tab.setAttribute(
|
|
38
|
-
tab.classList.add(
|
|
37
|
+
tab.setAttribute('index', `${itemIndex}`);
|
|
38
|
+
tab.classList.add('tw-w-full');
|
|
39
39
|
let header = {
|
|
40
|
-
slot:
|
|
41
|
-
content:
|
|
40
|
+
slot: 'header',
|
|
41
|
+
content: '',
|
|
42
42
|
active: itemActive,
|
|
43
43
|
disabled: itemDisabled,
|
|
44
|
-
index: itemIndex
|
|
44
|
+
index: itemIndex
|
|
45
45
|
};
|
|
46
|
-
const headerItemHeader = tab.querySelector(
|
|
46
|
+
const headerItemHeader = tab.querySelector('bcm-tab-item-header');
|
|
47
47
|
if (headerItemHeader) {
|
|
48
48
|
header.content = headerItemHeader.innerHTML;
|
|
49
|
-
headerItemHeader.classList.add(
|
|
49
|
+
headerItemHeader.classList.add('tw-hidden');
|
|
50
50
|
}
|
|
51
51
|
else {
|
|
52
|
-
header.content = tab.getAttribute(
|
|
52
|
+
header.content = tab.getAttribute('label') || `Tab ${itemIndex}`;
|
|
53
53
|
}
|
|
54
54
|
if (itemActive) {
|
|
55
|
-
tab.setAttribute(
|
|
56
|
-
tab.classList.add(
|
|
57
|
-
tab.classList.remove(
|
|
55
|
+
tab.setAttribute('active', '');
|
|
56
|
+
tab.classList.add('tw-block');
|
|
57
|
+
tab.classList.remove('tw-hidden');
|
|
58
58
|
this.active = itemIndex.toString();
|
|
59
59
|
}
|
|
60
60
|
else {
|
|
61
|
-
tab.removeAttribute(
|
|
62
|
-
tab.classList.remove(
|
|
63
|
-
tab.classList.add(
|
|
61
|
+
tab.removeAttribute('active');
|
|
62
|
+
tab.classList.remove('tw-block');
|
|
63
|
+
tab.classList.add('tw-hidden');
|
|
64
64
|
}
|
|
65
65
|
this.headerItems.push(header);
|
|
66
66
|
});
|
|
67
67
|
const isHasActiveTab = this.headerItems.some(tab => tab.active);
|
|
68
68
|
if (!isHasActiveTab) {
|
|
69
69
|
this.headerItems[0].active = true;
|
|
70
|
-
this.tabItems()[0].setAttribute(
|
|
71
|
-
this.tabItems()[0].classList.add(
|
|
72
|
-
this.tabItems()[0].classList.remove(
|
|
70
|
+
this.tabItems()[0].setAttribute('active', '');
|
|
71
|
+
this.tabItems()[0].classList.add('tw-block');
|
|
72
|
+
this.tabItems()[0].classList.remove('tw-hidden');
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
tabItems() {
|
|
77
|
-
return snq(() => this.el.querySelectorAll(
|
|
77
|
+
return snq(() => this.el.querySelectorAll('bcm-tab-item'), []);
|
|
78
78
|
}
|
|
79
79
|
handleTabClick(index) {
|
|
80
80
|
this.headerItems.forEach(tab => {
|
|
@@ -82,19 +82,19 @@ export class BcmTabGroup {
|
|
|
82
82
|
});
|
|
83
83
|
this.headerItems[index - 1].active = true;
|
|
84
84
|
this.active = index.toString();
|
|
85
|
-
const tabItems = this.el.querySelectorAll(
|
|
85
|
+
const tabItems = this.el.querySelectorAll('bcm-tab-item');
|
|
86
86
|
if (tabItems) {
|
|
87
87
|
tabItems.forEach(tab => {
|
|
88
|
-
const tabIndex = tab.getAttribute(
|
|
88
|
+
const tabIndex = tab.getAttribute('index');
|
|
89
89
|
if (tabIndex == this.active) {
|
|
90
|
-
tab.setAttribute(
|
|
91
|
-
tab.classList.add(
|
|
92
|
-
tab.classList.remove(
|
|
90
|
+
tab.setAttribute('active', '');
|
|
91
|
+
tab.classList.add('tw-block');
|
|
92
|
+
tab.classList.remove('tw-hidden');
|
|
93
93
|
}
|
|
94
94
|
else {
|
|
95
|
-
tab.removeAttribute(
|
|
96
|
-
tab.classList.remove(
|
|
97
|
-
tab.classList.add(
|
|
95
|
+
tab.removeAttribute('active');
|
|
96
|
+
tab.classList.remove('tw-block');
|
|
97
|
+
tab.classList.add('tw-hidden');
|
|
98
98
|
}
|
|
99
99
|
});
|
|
100
100
|
}
|
|
@@ -111,14 +111,14 @@ export class BcmTabGroup {
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
inkBarControl() {
|
|
114
|
-
const inkBar = this.el.querySelector(
|
|
114
|
+
const inkBar = this.el.querySelector('#ink-bar');
|
|
115
115
|
if (inkBar) {
|
|
116
|
-
const tabHeaderItems = this.el.querySelectorAll(
|
|
116
|
+
const tabHeaderItems = this.el.querySelectorAll('bcm-tab-item-header');
|
|
117
117
|
if (tabHeaderItems) {
|
|
118
118
|
tabHeaderItems.forEach((tab) => {
|
|
119
|
-
const tabIndex = tab.getAttribute(
|
|
119
|
+
const tabIndex = tab.getAttribute('index');
|
|
120
120
|
if (tabIndex == this.active) {
|
|
121
|
-
inkBar.style.width = tab.offsetWidth +
|
|
121
|
+
inkBar.style.width = tab.offsetWidth + 'px';
|
|
122
122
|
// inkBar.style.top = tab.offsetHeight + 'px';
|
|
123
123
|
inkBar.style.transform = `translateX(${tab.offsetLeft}px)`;
|
|
124
124
|
}
|
|
@@ -131,30 +131,30 @@ export class BcmTabGroup {
|
|
|
131
131
|
let fontSize, padding, gap;
|
|
132
132
|
switch (size) {
|
|
133
133
|
case Bcm.Size.small:
|
|
134
|
-
fontSize =
|
|
135
|
-
padding =
|
|
136
|
-
gap =
|
|
134
|
+
fontSize = '2';
|
|
135
|
+
padding = '1';
|
|
136
|
+
gap = '2';
|
|
137
137
|
break;
|
|
138
138
|
case Bcm.Size.medium:
|
|
139
|
-
fontSize =
|
|
140
|
-
padding =
|
|
141
|
-
gap =
|
|
139
|
+
fontSize = '3';
|
|
140
|
+
padding = '2';
|
|
141
|
+
gap = '3';
|
|
142
142
|
break;
|
|
143
143
|
case Bcm.Size.large:
|
|
144
|
-
fontSize =
|
|
145
|
-
padding =
|
|
146
|
-
gap =
|
|
144
|
+
fontSize = '4';
|
|
145
|
+
padding = '3';
|
|
146
|
+
gap = '4';
|
|
147
147
|
break;
|
|
148
148
|
default:
|
|
149
|
-
fontSize =
|
|
150
|
-
padding =
|
|
151
|
-
gap =
|
|
149
|
+
fontSize = '3';
|
|
150
|
+
padding = '2';
|
|
151
|
+
gap = '3';
|
|
152
152
|
break;
|
|
153
153
|
}
|
|
154
154
|
const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
|
|
155
|
-
return (h(Host, { class: "tw-
|
|
155
|
+
return (h(Host, { class: "tw-font-sans tw-w-full tw-flex tw-flex-col tw-items-center" }, h("div", { class: `tw-w-full tw-flex tw-flex-row tw-items-end tw-justify-between tw-mb-${padding} tw-relative` }, this.headerItems.map(item => (h("bcm-tab-item-header", { tabIndex: "1", class: cs(`tw-text-${fontSize} tw-py-${padding} tw-transition-all tw-flex-1 tw-flex tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300 tw-gap-${gap} tw-focus:outline-none`, item.disabled ? disabledClass : 'tw-cursor-pointer', item.active
|
|
156
156
|
? `tw-text-${color}-500 enabled:hover:tw-text-${color}-600 enabled:active:tw-text-${color}-700 enabled:focus-visible:tw-text-${color}-800`
|
|
157
|
-
: "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:
|
|
157
|
+
: "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:active:tw-text-slate-600 enabled:focus-visible:tw-text-slate-700"), active: item.active, disabled: item.disabled, index: item.index, innerHTML: item.content, onClick: () => !item.disabled && this.handleTabClick(item.index) }))), h("div", { id: "ink-bar", class: `tw-bg-${color}-500 tw-h-[2px] tw-rounded-sm tw-mt-[-2px] tw-absolute tw-bottom-0 tw-left-0 tw-transition-transform` })), h("slot", null)));
|
|
158
158
|
}
|
|
159
159
|
static get is() { return "bcm-tab-group"; }
|
|
160
160
|
static get properties() {
|
|
@@ -12,18 +12,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
13
13
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
14
14
|
};
|
|
15
|
-
import { IsLoad } from
|
|
16
|
-
import { Generate, Tooltip } from
|
|
17
|
-
import { Bcm } from
|
|
18
|
-
import { Host, h } from
|
|
15
|
+
import { IsLoad } from '@bcm/decorator';
|
|
16
|
+
import { Generate, Tooltip } from '@bcm/helpers';
|
|
17
|
+
import { Bcm } from '@bcm/model';
|
|
18
|
+
import { Host, h } from '@stencil/core';
|
|
19
19
|
export class BcmTooltip {
|
|
20
20
|
constructor() {
|
|
21
21
|
this._id = Generate.UID();
|
|
22
|
-
this.message =
|
|
22
|
+
this.message = '';
|
|
23
23
|
this.placement = Bcm.Placement.top;
|
|
24
24
|
this.trigger = Bcm.TriggerType.click;
|
|
25
25
|
this.open = false;
|
|
26
|
-
this.color =
|
|
26
|
+
this.color = 'slate';
|
|
27
27
|
this.tooltip = new Tooltip({
|
|
28
28
|
targetId: this._id,
|
|
29
29
|
message: this.message,
|
|
@@ -52,7 +52,7 @@ export class BcmTooltip {
|
|
|
52
52
|
this.tooltip.toggle();
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
|
-
return (h(Host, { "aria-describedby": "tooltip", tabindex: "-1", class: "tw-inline-flex tw-
|
|
55
|
+
return (h(Host, { "aria-describedby": "tooltip", tabindex: "-1", class: "tw-inline-flex tw-w-fit tw-h-fit" }, h("slot", null)));
|
|
56
56
|
}
|
|
57
57
|
static get is() { return "bcm-tooltip"; }
|
|
58
58
|
static get properties() {
|
|
@@ -91,7 +91,7 @@ export class BcmTooltip {
|
|
|
91
91
|
},
|
|
92
92
|
"attribute": "message",
|
|
93
93
|
"reflect": false,
|
|
94
|
-
"defaultValue": "
|
|
94
|
+
"defaultValue": "''"
|
|
95
95
|
},
|
|
96
96
|
"placement": {
|
|
97
97
|
"type": "string",
|
|
@@ -173,7 +173,7 @@ export class BcmTooltip {
|
|
|
173
173
|
},
|
|
174
174
|
"attribute": "color",
|
|
175
175
|
"reflect": false,
|
|
176
|
-
"defaultValue": "
|
|
176
|
+
"defaultValue": "'slate'"
|
|
177
177
|
}
|
|
178
178
|
};
|
|
179
179
|
}
|
|
@@ -128,12 +128,12 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
128
128
|
super();
|
|
129
129
|
this.__registerHost();
|
|
130
130
|
this._id = Generate.UID();
|
|
131
|
-
this.message =
|
|
132
|
-
this.content =
|
|
131
|
+
this.message = '';
|
|
132
|
+
this.content = '';
|
|
133
133
|
this.placement = Bcm.Placement.top;
|
|
134
134
|
this.trigger = Bcm.TriggerType.click;
|
|
135
135
|
this.open = false;
|
|
136
|
-
this.color =
|
|
136
|
+
this.color = 'white';
|
|
137
137
|
this.popover = new Popover({
|
|
138
138
|
targetId: this._id,
|
|
139
139
|
content: this.content,
|
|
@@ -165,7 +165,7 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
165
165
|
this.popover.toggle();
|
|
166
166
|
}
|
|
167
167
|
render() {
|
|
168
|
-
return (h(Host, { "aria-describedby": "popover", tabindex: "-1", class: "tw-inline-flex tw-
|
|
168
|
+
return (h(Host, { "aria-describedby": "popover", tabindex: "-1", class: "tw-inline-flex tw-w-fit tw-h-fit" }, h("slot", null)));
|
|
169
169
|
}
|
|
170
170
|
get el() { return this; }
|
|
171
171
|
}, [4, "bcm-popover", {
|