@bluevolt-tech/lumen 2.1.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/_shared/date-range-validator.d.ts +26 -1
- package/dist/components/_shared/dropdown-controller.d.ts +45 -0
- package/dist/components/bv-date-range-input/bv-date-range-input.d.ts +7 -1
- package/dist/components/bv-date-range-input/bv-date-range-input.js +241 -96
- package/dist/components/bv-date-range-picker/bv-date-range-picker.d.ts +61 -8
- package/dist/components/bv-date-range-picker/bv-date-range-picker.js +180 -81
- package/dist/components/bv-filter-dropdown/bv-filter-dropdown.js +18 -10
- package/dist/components/bv-input-dropdown/bv-input-dropdown.js +18 -10
- package/dist/components/bv-search-picker/bv-search-picker.d.ts +222 -0
- package/dist/components/bv-search-picker/bv-search-picker.js +1458 -0
- package/dist/components/bv-segmented-control/bv-segmented-control.d.ts +7 -1
- package/dist/components/bv-segmented-control/bv-segmented-control.js +21 -2
- package/dist/components/bv-select/bv-select.js +18 -10
- package/dist/components/bv-split-button/bv-split-button.js +18 -10
- package/dist/components/bv-table/bv-table.js +1 -0
- package/dist/components/bv-tooltip/bv-tooltip.js +1 -0
- package/dist/storybook/stories/screens/cet-report.data.js +834 -31
- package/dist/themes/base.css +1 -1
- package/package.json +5 -1
- package/themes/base.css +1 -1
|
@@ -2,12 +2,14 @@ export type SegmentedControlOption = {
|
|
|
2
2
|
label: string;
|
|
3
3
|
value: string;
|
|
4
4
|
};
|
|
5
|
+
export type SegmentedControlSize = 'sm' | 'md';
|
|
6
|
+
export type SegmentedControlVariant = 'default' | 'primary';
|
|
5
7
|
export interface SegmentedControlChangeDetail {
|
|
6
8
|
value: string;
|
|
7
9
|
label: string;
|
|
8
10
|
}
|
|
9
11
|
export declare class BvSegmentedControl extends HTMLElement {
|
|
10
|
-
static readonly observedAttributes: readonly ["options", "value", "label", "required"];
|
|
12
|
+
static readonly observedAttributes: readonly ["options", "value", "label", "required", "size", "variant"];
|
|
11
13
|
private _rendered;
|
|
12
14
|
private _labelEl;
|
|
13
15
|
private _containerEl;
|
|
@@ -17,6 +19,10 @@ export declare class BvSegmentedControl extends HTMLElement {
|
|
|
17
19
|
set value(v: string);
|
|
18
20
|
get required(): boolean;
|
|
19
21
|
set required(v: boolean);
|
|
22
|
+
get size(): SegmentedControlSize;
|
|
23
|
+
set size(v: SegmentedControlSize);
|
|
24
|
+
get variant(): SegmentedControlVariant;
|
|
25
|
+
set variant(v: SegmentedControlVariant);
|
|
20
26
|
connectedCallback(): void;
|
|
21
27
|
attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
|
|
22
28
|
private _render;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-segmented-control/bv-segmented-control.css
|
|
2
|
-
var bv_segmented_control_default = ":host {\n display: block;\n font-family: var(--bv-font-family-base);\n}\n\n.field-label {\n display: block;\n font-size: var(--bv-font-size-sm);\n line-height: 20px;\n font-weight: var(--bv-font-weight-semibold);\n color: var(--bv-color-neutral-800);\n margin-bottom: 6px;\n}\n\n.field-label[hidden] {\n display: none;\n}\n\n.required-mark {\n color: var(--bv-color-danger);\n margin-left: 2px;\n}\n\n.container {\n display: flex;\n align-items: center;\n height: 44px;\n box-sizing: border-box;\n background: var(--bv-color-neutral-100);\n border: 1px solid var(--bv-color-neutral-200);\n border-radius: var(--bv-radius-lg);\n padding: 3px;\n gap: 2px;\n}\n\n.pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 var(--bv-spacing-md);\n border: none;\n border-radius: calc(var(--bv-radius-lg) - 3px);\n background: transparent;\n font-family: inherit;\n font-size: var(--bv-font-size-sm);\n font-weight: var(--bv-font-weight-medium);\n color: var(--bv-color-neutral-500);\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n transition:\n color var(--bv-transition-fast),\n background var(--bv-transition-fast),\n box-shadow var(--bv-transition-fast);\n}\n\n.pill:hover:not(.selected) {\n color: var(--bv-color-neutral-800);\n}\n\n.pill.selected {\n background: var(--bv-color-neutral-0);\n color: var(--bv-color-neutral-900);\n box-shadow: var(--bv-shadow-sm);\n}\n";
|
|
2
|
+
var bv_segmented_control_default = ":host {\n display: block;\n font-family: var(--bv-font-family-base);\n}\n\n.field-label {\n display: block;\n font-size: var(--bv-font-size-sm);\n line-height: 20px;\n font-weight: var(--bv-font-weight-semibold);\n color: var(--bv-color-neutral-800);\n margin-bottom: 6px;\n}\n\n.field-label[hidden] {\n display: none;\n}\n\n.required-mark {\n color: var(--bv-color-danger);\n margin-left: 2px;\n}\n\n.container {\n display: flex;\n align-items: center;\n height: 44px;\n box-sizing: border-box;\n background: var(--bv-color-neutral-100);\n border: 1px solid var(--bv-color-neutral-200);\n border-radius: var(--bv-radius-lg);\n padding: 3px;\n gap: 2px;\n}\n\n:host([size='sm']) .container {\n height: var(--bv-control-height-md);\n border-radius: var(--bv-radius-md);\n padding: 3px;\n}\n\n.pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 var(--bv-spacing-md);\n border: none;\n border-radius: calc(var(--bv-radius-lg) - 3px);\n background: transparent;\n font-family: inherit;\n font-size: var(--bv-font-size-sm);\n font-weight: var(--bv-font-weight-medium);\n color: var(--bv-color-neutral-500);\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n transition:\n color var(--bv-transition-fast),\n background var(--bv-transition-fast),\n box-shadow var(--bv-transition-fast);\n}\n\n:host([size='sm']) .pill {\n padding: 0 var(--bv-spacing-md-minus);\n font-size: var(--bv-font-size-sm);\n}\n\n.pill:hover:not(.selected) {\n color: var(--bv-color-neutral-800);\n}\n\n.pill.selected {\n background: var(--bv-color-neutral-0);\n color: var(--bv-color-neutral-900);\n box-shadow: var(--bv-shadow-sm);\n}\n\n/* Filled variant \u2014 selected pill uses the primary color instead of white */\n:host([variant='primary']) .pill.selected {\n background: var(--bv-color-primary);\n color: var(--bv-color-neutral-0);\n}\n";
|
|
3
3
|
|
|
4
4
|
// components/_shared/adopt-styles.ts
|
|
5
5
|
var _sheetCache = /* @__PURE__ */ new Map();
|
|
@@ -21,7 +21,14 @@ function adoptStyles(shadow, css) {
|
|
|
21
21
|
|
|
22
22
|
// components/bv-segmented-control/bv-segmented-control.ts
|
|
23
23
|
var BvSegmentedControl = class extends HTMLElement {
|
|
24
|
-
static observedAttributes = [
|
|
24
|
+
static observedAttributes = [
|
|
25
|
+
"options",
|
|
26
|
+
"value",
|
|
27
|
+
"label",
|
|
28
|
+
"required",
|
|
29
|
+
"size",
|
|
30
|
+
"variant"
|
|
31
|
+
];
|
|
25
32
|
_rendered = false;
|
|
26
33
|
_labelEl = null;
|
|
27
34
|
_containerEl = null;
|
|
@@ -43,6 +50,18 @@ var BvSegmentedControl = class extends HTMLElement {
|
|
|
43
50
|
if (v) this.setAttribute("required", "");
|
|
44
51
|
else this.removeAttribute("required");
|
|
45
52
|
}
|
|
53
|
+
get size() {
|
|
54
|
+
return this.getAttribute("size") ?? "md";
|
|
55
|
+
}
|
|
56
|
+
set size(v) {
|
|
57
|
+
this.setAttribute("size", v);
|
|
58
|
+
}
|
|
59
|
+
get variant() {
|
|
60
|
+
return this.getAttribute("variant") ?? "default";
|
|
61
|
+
}
|
|
62
|
+
set variant(v) {
|
|
63
|
+
this.setAttribute("variant", v);
|
|
64
|
+
}
|
|
46
65
|
connectedCallback() {
|
|
47
66
|
this._render();
|
|
48
67
|
}
|
|
@@ -21,8 +21,7 @@ function adoptStyles(shadow, css) {
|
|
|
21
21
|
|
|
22
22
|
// components/_shared/dropdown-controller.ts
|
|
23
23
|
function bindDropdownController(host, options = {}) {
|
|
24
|
-
|
|
25
|
-
if (!shadow) {
|
|
24
|
+
if (!host.shadowRoot) {
|
|
26
25
|
throw new Error("bindDropdownController requires the host to have an open shadow root.");
|
|
27
26
|
}
|
|
28
27
|
const syncExpanded = () => {
|
|
@@ -37,24 +36,34 @@ function bindDropdownController(host, options = {}) {
|
|
|
37
36
|
syncExpanded();
|
|
38
37
|
host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
|
|
39
38
|
};
|
|
40
|
-
const
|
|
39
|
+
const closeWithReason = (reason) => {
|
|
40
|
+
var _a;
|
|
41
41
|
if (!host.hasAttribute("open")) return;
|
|
42
|
+
if (options.canClose && !options.canClose(reason)) return;
|
|
42
43
|
host.removeAttribute("open");
|
|
43
44
|
syncExpanded();
|
|
45
|
+
host.dispatchEvent(
|
|
46
|
+
new CustomEvent("bv-dropdown-close", {
|
|
47
|
+
bubbles: true,
|
|
48
|
+
composed: true,
|
|
49
|
+
detail: { reason }
|
|
50
|
+
})
|
|
51
|
+
);
|
|
52
|
+
(_a = options.onAfterClose) == null ? void 0 : _a.call(options);
|
|
44
53
|
};
|
|
54
|
+
const close = () => closeWithReason("programmatic");
|
|
45
55
|
const toggle = () => {
|
|
46
|
-
if (host.hasAttribute("open"))
|
|
56
|
+
if (host.hasAttribute("open")) closeWithReason("programmatic");
|
|
47
57
|
else open();
|
|
48
58
|
};
|
|
49
59
|
const offClick = (e) => {
|
|
50
60
|
if (!host.hasAttribute("open")) return;
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
close();
|
|
61
|
+
if (e.composedPath().includes(host)) return;
|
|
62
|
+
closeWithReason("outside-click");
|
|
54
63
|
};
|
|
55
64
|
document.addEventListener("click", offClick);
|
|
56
65
|
const onKeyDown = (e) => {
|
|
57
|
-
if (e.key === "Escape")
|
|
66
|
+
if (e.key === "Escape") closeWithReason("escape");
|
|
58
67
|
};
|
|
59
68
|
host.addEventListener("keydown", onKeyDown);
|
|
60
69
|
const observer = new MutationObserver(syncExpanded);
|
|
@@ -170,9 +179,8 @@ var BvSelect = class extends HTMLElement {
|
|
|
170
179
|
chevron.className = "trigger-chevron";
|
|
171
180
|
chevron.innerHTML = CHEVRON_DOWN;
|
|
172
181
|
trigger.append(triggerLabel, chevron);
|
|
173
|
-
trigger.addEventListener("click", (
|
|
182
|
+
trigger.addEventListener("click", () => {
|
|
174
183
|
var _a;
|
|
175
|
-
e.stopPropagation();
|
|
176
184
|
if (!this.hasAttribute("disabled")) (_a = this._dropdown) == null ? void 0 : _a.toggle();
|
|
177
185
|
});
|
|
178
186
|
const panel = document.createElement("div");
|
|
@@ -21,8 +21,7 @@ function adoptStyles(shadow, css) {
|
|
|
21
21
|
|
|
22
22
|
// components/_shared/dropdown-controller.ts
|
|
23
23
|
function bindDropdownController(host, options = {}) {
|
|
24
|
-
|
|
25
|
-
if (!shadow) {
|
|
24
|
+
if (!host.shadowRoot) {
|
|
26
25
|
throw new Error("bindDropdownController requires the host to have an open shadow root.");
|
|
27
26
|
}
|
|
28
27
|
const syncExpanded = () => {
|
|
@@ -37,24 +36,34 @@ function bindDropdownController(host, options = {}) {
|
|
|
37
36
|
syncExpanded();
|
|
38
37
|
host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
|
|
39
38
|
};
|
|
40
|
-
const
|
|
39
|
+
const closeWithReason = (reason) => {
|
|
40
|
+
var _a;
|
|
41
41
|
if (!host.hasAttribute("open")) return;
|
|
42
|
+
if (options.canClose && !options.canClose(reason)) return;
|
|
42
43
|
host.removeAttribute("open");
|
|
43
44
|
syncExpanded();
|
|
45
|
+
host.dispatchEvent(
|
|
46
|
+
new CustomEvent("bv-dropdown-close", {
|
|
47
|
+
bubbles: true,
|
|
48
|
+
composed: true,
|
|
49
|
+
detail: { reason }
|
|
50
|
+
})
|
|
51
|
+
);
|
|
52
|
+
(_a = options.onAfterClose) == null ? void 0 : _a.call(options);
|
|
44
53
|
};
|
|
54
|
+
const close = () => closeWithReason("programmatic");
|
|
45
55
|
const toggle = () => {
|
|
46
|
-
if (host.hasAttribute("open"))
|
|
56
|
+
if (host.hasAttribute("open")) closeWithReason("programmatic");
|
|
47
57
|
else open();
|
|
48
58
|
};
|
|
49
59
|
const offClick = (e) => {
|
|
50
60
|
if (!host.hasAttribute("open")) return;
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
close();
|
|
61
|
+
if (e.composedPath().includes(host)) return;
|
|
62
|
+
closeWithReason("outside-click");
|
|
54
63
|
};
|
|
55
64
|
document.addEventListener("click", offClick);
|
|
56
65
|
const onKeyDown = (e) => {
|
|
57
|
-
if (e.key === "Escape")
|
|
66
|
+
if (e.key === "Escape") closeWithReason("escape");
|
|
58
67
|
};
|
|
59
68
|
host.addEventListener("keydown", onKeyDown);
|
|
60
69
|
const observer = new MutationObserver(syncExpanded);
|
|
@@ -227,9 +236,8 @@ var BvSplitButton = class extends HTMLElement {
|
|
|
227
236
|
toggleBtn.setAttribute("aria-expanded", "false");
|
|
228
237
|
toggleBtn.setAttribute("aria-label", "More options");
|
|
229
238
|
toggleBtn.innerHTML = CHEVRON_DOWN;
|
|
230
|
-
toggleBtn.addEventListener("click", (
|
|
239
|
+
toggleBtn.addEventListener("click", () => {
|
|
231
240
|
var _a;
|
|
232
|
-
e.stopPropagation();
|
|
233
241
|
if (!this.disabled) (_a = this._dropdown) == null ? void 0 : _a.toggle();
|
|
234
242
|
});
|
|
235
243
|
this._toggleBtn = toggleBtn;
|
|
@@ -100,6 +100,7 @@ var BvTooltip = class extends HTMLElement {
|
|
|
100
100
|
popup.style.transform = "none";
|
|
101
101
|
popup.style.display = "block";
|
|
102
102
|
popup.style.visibility = "hidden";
|
|
103
|
+
void popup.offsetHeight;
|
|
103
104
|
const tRect = trigger.getBoundingClientRect();
|
|
104
105
|
const pRect = popup.getBoundingClientRect();
|
|
105
106
|
const vw = window.innerWidth;
|
|
@@ -97,6 +97,7 @@ var BvTooltip = class extends HTMLElement {
|
|
|
97
97
|
popup.style.transform = "none";
|
|
98
98
|
popup.style.display = "block";
|
|
99
99
|
popup.style.visibility = "hidden";
|
|
100
|
+
void popup.offsetHeight;
|
|
100
101
|
const tRect = trigger.getBoundingClientRect();
|
|
101
102
|
const pRect = popup.getBoundingClientRect();
|
|
102
103
|
const vw = window.innerWidth;
|