@bluevolt-tech/lumen 1.3.2
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/README.md +286 -0
- package/assets/fonts/fonts.css +25 -0
- package/assets/icons/.gitkeep +0 -0
- package/assets/icons/edit.svg +3 -0
- package/assets/images/.gitkeep +0 -0
- package/assets/images/bluevolt-logo.png +0 -0
- package/dist/assets/fonts/fonts.css +25 -0
- package/dist/assets/icons/.gitkeep +0 -0
- package/dist/assets/icons/edit.svg +3 -0
- package/dist/assets/images/.gitkeep +0 -0
- package/dist/assets/images/bluevolt-logo.png +0 -0
- package/dist/components/bv-avatar/bv-avatar.d.ts +13 -0
- package/dist/components/bv-avatar/bv-avatar.js +81 -0
- package/dist/components/bv-badge/bv-badge.d.ts +11 -0
- package/dist/components/bv-badge/bv-badge.js +58 -0
- package/dist/components/bv-button/bv-button.d.ts +23 -0
- package/dist/components/bv-button/bv-button.js +395 -0
- package/dist/components/bv-category-pill/bv-category-pill.d.ts +11 -0
- package/dist/components/bv-category-pill/bv-category-pill.js +61 -0
- package/dist/components/bv-checkbox/bv-checkbox.d.ts +14 -0
- package/dist/components/bv-checkbox/bv-checkbox.js +89 -0
- package/dist/components/bv-chip/bv-chip.d.ts +11 -0
- package/dist/components/bv-chip/bv-chip.js +72 -0
- package/dist/components/bv-course-detail/bv-course-detail.d.ts +28 -0
- package/dist/components/bv-course-detail/bv-course-detail.js +269 -0
- package/dist/components/bv-course-detail-modal/bv-course-detail-modal.d.ts +35 -0
- package/dist/components/bv-course-detail-modal/bv-course-detail-modal.js +1455 -0
- package/dist/components/bv-course-grid-card/bv-course-grid-card.d.ts +12 -0
- package/dist/components/bv-course-grid-card/bv-course-grid-card.js +578 -0
- package/dist/components/bv-course-list-card/bv-course-list-card.d.ts +12 -0
- package/dist/components/bv-course-list-card/bv-course-list-card.js +585 -0
- package/dist/components/bv-course-outline/bv-course-outline.d.ts +49 -0
- package/dist/components/bv-course-outline/bv-course-outline.js +488 -0
- package/dist/components/bv-empty-state/bv-empty-state.d.ts +10 -0
- package/dist/components/bv-empty-state/bv-empty-state.js +69 -0
- package/dist/components/bv-filter-dropdown/bv-filter-dropdown.d.ts +26 -0
- package/dist/components/bv-filter-dropdown/bv-filter-dropdown.js +164 -0
- package/dist/components/bv-filter-panel/bv-filter-panel.d.ts +25 -0
- package/dist/components/bv-filter-panel/bv-filter-panel.js +222 -0
- package/dist/components/bv-icon/bv-icon.d.ts +10 -0
- package/dist/components/bv-icon/bv-icon.js +122 -0
- package/dist/components/bv-icon/icons.d.ts +3 -0
- package/dist/components/bv-modal/bv-modal.d.ts +13 -0
- package/dist/components/bv-modal/bv-modal.js +104 -0
- package/dist/components/bv-page-title/bv-page-title.d.ts +4 -0
- package/dist/components/bv-page-title/bv-page-title.js +33 -0
- package/dist/components/bv-pagination/bv-pagination.d.ts +20 -0
- package/dist/components/bv-pagination/bv-pagination.js +139 -0
- package/dist/components/bv-portal-header/bv-portal-header.d.ts +12 -0
- package/dist/components/bv-portal-header/bv-portal-header.js +854 -0
- package/dist/components/bv-portal-layout/bv-portal-layout.d.ts +6 -0
- package/dist/components/bv-portal-layout/bv-portal-layout.js +39 -0
- package/dist/components/bv-progress-bar/bv-progress-bar.d.ts +11 -0
- package/dist/components/bv-progress-bar/bv-progress-bar.js +61 -0
- package/dist/components/bv-promo-banner/bv-promo-banner.d.ts +12 -0
- package/dist/components/bv-promo-banner/bv-promo-banner.js +79 -0
- package/dist/components/bv-radio/bv-radio.d.ts +11 -0
- package/dist/components/bv-radio/bv-radio.js +78 -0
- package/dist/components/bv-searchbox/bv-searchbox.d.ts +10 -0
- package/dist/components/bv-searchbox/bv-searchbox.js +68 -0
- package/dist/components/bv-star-rating/bv-star-rating.d.ts +11 -0
- package/dist/components/bv-star-rating/bv-star-rating.js +67 -0
- package/dist/components/bv-table/bv-table.d.ts +5 -0
- package/dist/components/bv-table/bv-table.js +72 -0
- package/dist/components/bv-toggle/bv-toggle.d.ts +11 -0
- package/dist/components/bv-toggle/bv-toggle.js +72 -0
- package/dist/components/bv-user-row/bv-user-row.d.ts +12 -0
- package/dist/components/bv-user-row/bv-user-row.js +574 -0
- package/dist/components/bv-view-switcher/bv-view-switcher.d.ts +11 -0
- package/dist/components/bv-view-switcher/bv-view-switcher.js +91 -0
- package/dist/preview/index.html +76 -0
- package/dist/storybook/stories/screens/course-catalog.data.d.ts +28 -0
- package/dist/storybook/stories/screens/course-catalog.data.js +301 -0
- package/dist/themes/base.css +66 -0
- package/dist/themes/layouts.css +35 -0
- package/package.json +181 -0
- package/themes/base.css +66 -0
- package/themes/layouts.css +35 -0
|
@@ -0,0 +1,854 @@
|
|
|
1
|
+
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-portal-header/bv-portal-header.css
|
|
2
|
+
var bv_portal_header_default = ":host {\n display: block;\n background: var(--bv-color-neutral-0);\n border: 1px solid var(--bv-color-neutral-200);\n}\n\n.header {\n display: flex;\n flex-direction: column;\n}\n\n.title-bar {\n padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.title {\n margin: 0;\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-2xl);\n font-weight: var(--bv-font-weight-medium);\n color: var(--bv-color-neutral-900);\n line-height: 32px;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: var(--bv-spacing-sm);\n padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\nbv-promo-banner {\n align-self: flex-start;\n}\n";
|
|
3
|
+
|
|
4
|
+
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-user-row/bv-user-row.css
|
|
5
|
+
var bv_user_row_default = ":host {\n display: inline-block;\n}\n\n.row {\n display: inline-flex;\n align-items: center;\n gap: var(--bv-spacing-lg);\n}\n\n/* User info */\n.user-info {\n display: flex;\n align-items: center;\n gap: var(--bv-spacing-md);\n min-width: 0;\n}\n\nbv-avatar {\n --bv-avatar-size: 56px;\n flex-shrink: 0;\n}\n\n.text-col {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.user-name {\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-lg);\n font-weight: var(--bv-font-weight-semibold);\n color: var(--bv-color-secondary-foreground);\n line-height: 28px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.user-org {\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-md);\n font-weight: var(--bv-font-weight-regular);\n color: var(--bv-color-neutral-600);\n line-height: 24px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Edit button \u2014 white bg, neutral border */\n.edit-btn {\n --bv-button-bg: var(--bv-color-neutral-0);\n --bv-button-bg-hover: var(--bv-color-neutral-100);\n --bv-button-color: var(--bv-color-secondary-foreground);\n --bv-button-border-color: var(--bv-color-neutral-300);\n --bv-button-border-color-hover: var(--bv-color-neutral-400);\n flex-shrink: 0;\n}\n";
|
|
6
|
+
|
|
7
|
+
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-avatar/bv-avatar.css
|
|
8
|
+
var bv_avatar_default = ":host {\n --bv-avatar-size: 40px;\n --bv-avatar-bg: var(--bv-color-primary-light);\n --bv-avatar-color: var(--bv-color-primary);\n --bv-avatar-radius: var(--bv-radius-full);\n display: inline-flex;\n}\n\n:host([size='xs']) {\n --bv-avatar-size: 24px;\n}\n:host([size='sm']) {\n --bv-avatar-size: 32px;\n}\n:host([size='md']) {\n --bv-avatar-size: 40px;\n}\n:host([size='lg']) {\n --bv-avatar-size: 48px;\n}\n:host([size='xl']) {\n --bv-avatar-size: 64px;\n}\n\n.avatar {\n width: var(--bv-avatar-size);\n height: var(--bv-avatar-size);\n border-radius: var(--bv-avatar-radius);\n background: var(--bv-avatar-bg);\n color: var(--bv-avatar-color);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n flex-shrink: 0;\n font-family: var(--bv-font-family-base);\n font-weight: var(--bv-font-weight-semibold);\n font-size: calc(var(--bv-avatar-size) * 0.38);\n user-select: none;\n}\n\n.avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n";
|
|
9
|
+
|
|
10
|
+
// components/bv-avatar/bv-avatar.ts
|
|
11
|
+
var BvAvatar = class extends HTMLElement {
|
|
12
|
+
static observedAttributes = ["src", "alt", "initials", "size"];
|
|
13
|
+
_rendered = false;
|
|
14
|
+
_img = null;
|
|
15
|
+
_label = null;
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
this.attachShadow({ mode: "open" });
|
|
19
|
+
if ("replaceSync" in CSSStyleSheet.prototype) {
|
|
20
|
+
const sheet = new CSSStyleSheet();
|
|
21
|
+
sheet.replaceSync(bv_avatar_default);
|
|
22
|
+
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
connectedCallback() {
|
|
26
|
+
this._render();
|
|
27
|
+
}
|
|
28
|
+
attributeChangedCallback(name, _old, val) {
|
|
29
|
+
if (!this._rendered) return;
|
|
30
|
+
if (name === "src") this._syncSrc(val);
|
|
31
|
+
if (name === "initials") this._syncInitials(val);
|
|
32
|
+
if (name === "alt" && this._img) this._img.alt = val ?? "";
|
|
33
|
+
}
|
|
34
|
+
_render() {
|
|
35
|
+
if (this._rendered) return;
|
|
36
|
+
this._rendered = true;
|
|
37
|
+
const shadow = this.shadowRoot;
|
|
38
|
+
if (!shadow.adoptedStyleSheets.length) {
|
|
39
|
+
const s = document.createElement("style");
|
|
40
|
+
s.textContent = bv_avatar_default;
|
|
41
|
+
shadow.appendChild(s);
|
|
42
|
+
}
|
|
43
|
+
const div = document.createElement("div");
|
|
44
|
+
div.className = "avatar";
|
|
45
|
+
const src = this.getAttribute("src");
|
|
46
|
+
if (src) {
|
|
47
|
+
this._img = document.createElement("img");
|
|
48
|
+
this._img.src = src;
|
|
49
|
+
this._img.alt = this.getAttribute("alt") ?? "";
|
|
50
|
+
div.appendChild(this._img);
|
|
51
|
+
} else {
|
|
52
|
+
this._label = document.createElement("span");
|
|
53
|
+
this._label.textContent = this.getAttribute("initials") ?? "";
|
|
54
|
+
div.appendChild(this._label);
|
|
55
|
+
}
|
|
56
|
+
shadow.appendChild(div);
|
|
57
|
+
}
|
|
58
|
+
_syncSrc(src) {
|
|
59
|
+
var _a, _b;
|
|
60
|
+
const div = this.shadowRoot.querySelector(".avatar");
|
|
61
|
+
if (src) {
|
|
62
|
+
if (!this._img) {
|
|
63
|
+
this._img = document.createElement("img");
|
|
64
|
+
this._img.alt = this.getAttribute("alt") ?? "";
|
|
65
|
+
(_a = this._label) == null ? void 0 : _a.remove();
|
|
66
|
+
this._label = null;
|
|
67
|
+
div.appendChild(this._img);
|
|
68
|
+
}
|
|
69
|
+
this._img.src = src;
|
|
70
|
+
} else {
|
|
71
|
+
(_b = this._img) == null ? void 0 : _b.remove();
|
|
72
|
+
this._img = null;
|
|
73
|
+
this._label = document.createElement("span");
|
|
74
|
+
this._label.textContent = this.getAttribute("initials") ?? "";
|
|
75
|
+
div.appendChild(this._label);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
_syncInitials(val) {
|
|
79
|
+
if (this._label) this._label.textContent = val ?? "";
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
if (!customElements.get("bv-avatar")) {
|
|
83
|
+
customElements.define("bv-avatar", BvAvatar);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
|
|
87
|
+
var bv_button_default = `/* \u2500\u2500 Public theming API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
88
|
+
Apps can override these three properties per-instance:
|
|
89
|
+
|
|
90
|
+
HTML: <bv-button style="--bv-button-bg: #e53e3e;">
|
|
91
|
+
Angular: <bv-button [style.--bv-button-bg]="brandColor">
|
|
92
|
+
JavaScript: btn.style.setProperty('--bv-button-bg', value)
|
|
93
|
+
|
|
94
|
+
Hover is auto-computed from the base colors via color-mix().
|
|
95
|
+
Override --bv-button-bg-hover / --bv-button-border-color-hover
|
|
96
|
+
if you need explicit control over the hovered state.
|
|
97
|
+
\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
98
|
+
:host {
|
|
99
|
+
/* Default values \u2014 map to global tokens (primary variant) */
|
|
100
|
+
--bv-button-bg: var(--bv-color-primary);
|
|
101
|
+
--bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);
|
|
102
|
+
--bv-button-color: var(--bv-color-neutral-0);
|
|
103
|
+
--bv-button-border-color: var(--bv-color-primary);
|
|
104
|
+
--bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);
|
|
105
|
+
--bv-button-font-family: var(--bv-font-family-base);
|
|
106
|
+
--bv-button-font-size: var(--bv-font-size-sm);
|
|
107
|
+
|
|
108
|
+
display: inline-block;
|
|
109
|
+
font-family: var(--bv-font-family-base);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:host([hidden]) {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
:host([full-width]) {
|
|
117
|
+
display: block;
|
|
118
|
+
width: 100%;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* \u2500\u2500 Variant tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
122
|
+
Each variant re-points the component tokens to different global
|
|
123
|
+
tokens. Apps can still override with inline styles \u2014 inline style
|
|
124
|
+
always wins due to higher specificity.
|
|
125
|
+
\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
126
|
+
|
|
127
|
+
:host([variant='secondary']) {
|
|
128
|
+
--bv-button-bg: var(--bv-color-secondary);
|
|
129
|
+
--bv-button-border-color: var(--bv-color-secondary);
|
|
130
|
+
--bv-button-color: var(--bv-color-secondary-foreground);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host([variant='tertiary']) {
|
|
134
|
+
--bv-button-bg: var(--bv-color-tertiary);
|
|
135
|
+
--bv-button-border-color: var(--bv-color-tertiary);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
:host([variant='danger']) {
|
|
139
|
+
--bv-button-bg: var(--bv-color-danger);
|
|
140
|
+
--bv-button-border-color: var(--bv-color-danger);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
:host([variant='ghost']) {
|
|
144
|
+
--bv-button-bg: transparent;
|
|
145
|
+
--bv-button-bg-hover: var(--bv-color-primary-light);
|
|
146
|
+
--bv-button-color: var(--bv-color-primary);
|
|
147
|
+
--bv-button-border-color: transparent;
|
|
148
|
+
--bv-button-border-color-hover: transparent;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:host([variant='outline']) {
|
|
152
|
+
--bv-button-bg: transparent;
|
|
153
|
+
--bv-button-bg-hover: var(--bv-color-primary-light);
|
|
154
|
+
--bv-button-color: var(--bv-color-primary);
|
|
155
|
+
--bv-button-border-color: var(--bv-color-primary);
|
|
156
|
+
--bv-button-border-color-hover: var(--bv-color-primary);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
160
|
+
All visual properties read from the component-level tokens above.
|
|
161
|
+
\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
162
|
+
|
|
163
|
+
.btn {
|
|
164
|
+
display: inline-flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
justify-content: center;
|
|
167
|
+
gap: var(--bv-spacing-xs);
|
|
168
|
+
padding: 10px var(--bv-spacing-md);
|
|
169
|
+
min-height: 40px;
|
|
170
|
+
width: auto;
|
|
171
|
+
font-family: var(--bv-button-font-family);
|
|
172
|
+
font-size: var(--bv-button-font-size);
|
|
173
|
+
font-style: normal;
|
|
174
|
+
font-weight: var(--bv-font-weight-semibold);
|
|
175
|
+
line-height: 20px;
|
|
176
|
+
border: 1px solid var(--bv-button-border-color);
|
|
177
|
+
border-radius: var(--bv-radius-lg);
|
|
178
|
+
cursor: pointer;
|
|
179
|
+
transition:
|
|
180
|
+
background var(--bv-transition-fast),
|
|
181
|
+
color var(--bv-transition-fast),
|
|
182
|
+
border-color var(--bv-transition-fast),
|
|
183
|
+
box-shadow var(--bv-transition-fast),
|
|
184
|
+
opacity var(--bv-transition-fast);
|
|
185
|
+
white-space: nowrap;
|
|
186
|
+
user-select: none;
|
|
187
|
+
text-decoration: none;
|
|
188
|
+
outline: none;
|
|
189
|
+
box-sizing: border-box;
|
|
190
|
+
background: var(--bv-button-bg);
|
|
191
|
+
color: var(--bv-button-color);
|
|
192
|
+
box-shadow: var(--bv-shadow-sm);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
:host([full-width]) .btn {
|
|
196
|
+
width: 100%;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.btn:hover:not(:disabled) {
|
|
200
|
+
background: var(--bv-button-bg-hover);
|
|
201
|
+
border-color: var(--bv-button-border-color-hover);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.btn:active:not(:disabled) {
|
|
205
|
+
transform: translateY(1px);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.btn:focus-visible {
|
|
209
|
+
outline: 2px solid var(--bv-button-border-color);
|
|
210
|
+
outline-offset: 2px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.btn:disabled {
|
|
214
|
+
opacity: 0.5;
|
|
215
|
+
cursor: not-allowed;
|
|
216
|
+
pointer-events: none;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
220
|
+
|
|
221
|
+
:host([size='sm']) .btn {
|
|
222
|
+
padding: 6px 12px;
|
|
223
|
+
min-height: 32px;
|
|
224
|
+
font-size: var(--bv-font-size-sm);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
:host([size='lg']) .btn {
|
|
228
|
+
padding: 12px var(--bv-spacing-lg);
|
|
229
|
+
min-height: 48px;
|
|
230
|
+
font-size: var(--bv-font-size-md);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
234
|
+
|
|
235
|
+
.btn-icon {
|
|
236
|
+
display: inline-flex;
|
|
237
|
+
align-items: center;
|
|
238
|
+
flex-shrink: 0;
|
|
239
|
+
line-height: 0;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
243
|
+
|
|
244
|
+
.btn-count {
|
|
245
|
+
opacity: 0.8;
|
|
246
|
+
font-weight: var(--bv-font-weight-regular);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
250
|
+
|
|
251
|
+
.spinner {
|
|
252
|
+
display: inline-block;
|
|
253
|
+
width: 1em;
|
|
254
|
+
height: 1em;
|
|
255
|
+
border: 2px solid currentColor;
|
|
256
|
+
border-top-color: transparent;
|
|
257
|
+
border-radius: 50%;
|
|
258
|
+
flex-shrink: 0;
|
|
259
|
+
animation: bv-spin 700ms linear infinite;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
@keyframes bv-spin {
|
|
263
|
+
to {
|
|
264
|
+
transform: rotate(360deg);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
`;
|
|
268
|
+
|
|
269
|
+
// components/bv-icon/icons.ts
|
|
270
|
+
var icons = {
|
|
271
|
+
// Navigation
|
|
272
|
+
"chevron-up": `<path d="M18 15l-6-6-6 6"/>`,
|
|
273
|
+
"chevron-down": `<path d="M6 9l6 6 6-6"/>`,
|
|
274
|
+
"chevron-left": `<path d="M15 18l-6-6 6-6"/>`,
|
|
275
|
+
"chevron-right": `<path d="M9 18l6-6-6-6"/>`,
|
|
276
|
+
"arrow-left": `<path d="M19 12H5M12 19l-7-7 7-7"/>`,
|
|
277
|
+
"arrow-right": `<path d="M5 12h14M12 5l7 7-7 7"/>`,
|
|
278
|
+
"external-link": `<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15,3 21,3 21,9"/><line x1="10" y1="14" x2="21" y2="3"/>`,
|
|
279
|
+
// Actions
|
|
280
|
+
search: `<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
|
|
281
|
+
edit: `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`,
|
|
282
|
+
download: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/>`,
|
|
283
|
+
upload: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17,8 12,3 7,8"/><line x1="12" y1="3" x2="12" y2="15"/>`,
|
|
284
|
+
plus: `<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>`,
|
|
285
|
+
minus: `<line x1="5" y1="12" x2="19" y2="12"/>`,
|
|
286
|
+
x: `<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>`,
|
|
287
|
+
check: `<polyline points="20,6 9,17 4,12"/>`,
|
|
288
|
+
trash: `<polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>`,
|
|
289
|
+
copy: `<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>`,
|
|
290
|
+
refresh: `<polyline points="23,4 23,10 17,10"/><polyline points="1,20 1,14 7,14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>`,
|
|
291
|
+
filter: `<polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46 22,3"/>`,
|
|
292
|
+
// Layout
|
|
293
|
+
list: `<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>`,
|
|
294
|
+
grid: `<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>`,
|
|
295
|
+
// User / profile
|
|
296
|
+
user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
|
|
297
|
+
users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
|
|
298
|
+
// Content
|
|
299
|
+
star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
|
|
300
|
+
eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
|
|
301
|
+
"eye-off": `<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>`,
|
|
302
|
+
bookmark: `<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>`,
|
|
303
|
+
tag: `<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>`,
|
|
304
|
+
// Status / feedback
|
|
305
|
+
info: `<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>`,
|
|
306
|
+
"alert-triangle": `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
|
|
307
|
+
"check-circle": `<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/>`,
|
|
308
|
+
"x-circle": `<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>`,
|
|
309
|
+
// Files / media
|
|
310
|
+
file: `<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13,2 13,9 20,9"/>`,
|
|
311
|
+
image: `<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21,15 16,10 5,21"/>`,
|
|
312
|
+
video: `<polygon points="23,7 16,12 23,17 23,7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>`,
|
|
313
|
+
// Settings
|
|
314
|
+
settings: `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>`,
|
|
315
|
+
lock: `<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
|
|
316
|
+
unlock: `<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>`,
|
|
317
|
+
bell: `<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>`,
|
|
318
|
+
mail: `<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>`,
|
|
319
|
+
link: `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`
|
|
320
|
+
};
|
|
321
|
+
function getIconSvg(name, size = 16) {
|
|
322
|
+
const raw = rawIcons[name];
|
|
323
|
+
if (raw)
|
|
324
|
+
return raw.replace(/width="[^"]*"/, `width="${size}"`).replace(/height="[^"]*"/, `height="${size}"`);
|
|
325
|
+
const paths = icons[name];
|
|
326
|
+
if (!paths) return "";
|
|
327
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
|
|
328
|
+
}
|
|
329
|
+
var rawIcons = {
|
|
330
|
+
// Module type (small, ~18px)
|
|
331
|
+
"module-scorm": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 15.03 16.28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.9014 4.60034L7.51368 8.14201M7.51368 8.14201L1.126 4.60034M7.51368 8.14201L7.5137 15.267M14.2771 11.1859V5.09812C14.2771 4.84113 14.2771 4.71264 14.2392 4.59804C14.2056 4.49666 14.1508 4.4036 14.0783 4.32508C13.9963 4.23633 13.8838 4.17393 13.6587 4.04913L8.09763 0.965793C7.88451 0.847624 7.77794 0.78854 7.66509 0.765376C7.56521 0.744875 7.46219 0.744875 7.36231 0.765376C7.24946 0.78854 7.1429 0.847624 6.92977 0.965793L1.36873 4.04913C1.14364 4.17393 1.0311 4.23633 0.949147 4.32508C0.876647 4.4036 0.82178 4.49666 0.788217 4.59804C0.750278 4.71264 0.750278 4.84113 0.750278 5.09812V11.1859C0.750278 11.4429 0.750278 11.5714 0.788217 11.686C0.82178 11.7874 0.876647 11.8805 0.949147 11.959C1.0311 12.0477 1.14364 12.1101 1.36873 12.2349L6.92977 15.3183C7.1429 15.4364 7.24946 15.4955 7.36231 15.5187C7.46219 15.5392 7.56521 15.5392 7.66509 15.5187C7.77794 15.4955 7.88451 15.4364 8.09763 15.3183L13.6587 12.2349C13.8838 12.1101 13.9963 12.0477 14.0783 11.959C14.1508 11.8805 14.2056 11.7874 14.2392 11.686C14.2771 11.5714 14.2771 11.4429 14.2771 11.1859Z"/></svg>`,
|
|
332
|
+
"module-assessment": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 13.72 16.13" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.507 6.1875V4.1625C12.507 2.90238 12.507 2.27232 12.2629 1.79102C12.0482 1.36766 11.7056 1.02345 11.2841 0.807736C10.8051 0.5625 10.1779 0.5625 8.92364 0.5625H4.14585C2.89156 0.5625 2.26441 0.5625 1.78534 0.807736C1.36393 1.02345 1.02132 1.36766 0.806601 1.79102C0.5625 2.27232 0.5625 2.90238 0.5625 4.1625V11.9625C0.5625 13.2226 0.5625 13.8527 0.806601 14.334C1.02132 14.7573 1.36393 15.1015 1.78534 15.3173C2.26441 15.5625 2.89156 15.5625 4.14585 15.5625H8.0278M8.0278 7.3125H3.54862M5.04168 10.3125H3.54862M9.52086 4.3125H3.54862M9.89413 10.3142C10.0257 9.93852 10.2853 9.62175 10.627 9.41998C10.9688 9.21821 11.3705 9.14445 11.7612 9.21178C12.1519 9.2791 12.5062 9.48315 12.7615 9.7878C13.0168 10.0925 13.1565 10.478 13.1559 10.8763C13.1559 12.0004 11.4775 12.5625 11.4775 12.5625M11.4991 14.8125H11.5066"/></svg>`,
|
|
333
|
+
"module-survey": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 14.56 11.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5.8125L5.04168 5.8125M14 1.3125L5.04168 1.3125M14 10.3125L5.04168 10.3125M2.05556 5.8125C2.05556 6.22671 1.72133 6.5625 1.30903 6.5625C0.896733 6.5625 0.5625 6.22671 0.5625 5.8125C0.5625 5.39829 0.896733 5.0625 1.30903 5.0625C1.72133 5.0625 2.05556 5.39829 2.05556 5.8125ZM2.05556 1.3125C2.05556 1.72671 1.72133 2.0625 1.30903 2.0625C0.896733 2.0625 0.5625 1.72671 0.5625 1.3125C0.5625 0.898286 0.896733 0.5625 1.30903 0.5625C1.72133 0.5625 2.05556 0.898286 2.05556 1.3125ZM2.05556 10.3125C2.05556 10.7267 1.72133 11.0625 1.30903 11.0625C0.896733 11.0625 0.5625 10.7267 0.5625 10.3125C0.5625 9.89829 0.896733 9.5625 1.30903 9.5625C1.72133 9.5625 2.05556 9.89829 2.05556 10.3125Z"/></svg>`,
|
|
334
|
+
"module-download": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 14.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.77433 3.56259L7.94155 1.88928C7.70187 1.40769 7.58202 1.16689 7.40323 0.990961C7.24512 0.835387 7.05457 0.717069 6.84535 0.644571C6.60877 0.562589 6.3408 0.562589 5.80485 0.562589H2.9514C2.1152 0.562589 1.69711 0.562589 1.37773 0.726079C1.09679 0.869889 0.868379 1.09936 0.725234 1.3816C0.562501 1.70247 0.562501 2.12251 0.562501 2.96259V3.56259M0.562501 3.56259H11.9098C13.164 3.56259 13.7912 3.56259 14.2703 3.80782C14.6917 4.02354 15.0343 4.36775 15.249 4.79111C15.4931 5.27241 15.4931 5.90247 15.4931 7.16259V10.4626C15.4931 11.7227 15.4931 12.3528 15.249 12.8341C15.0343 13.2574 14.6917 13.6016 14.2703 13.8174C13.7912 14.0626 13.164 14.0626 11.9098 14.0626H4.14585C2.89156 14.0626 2.26441 14.0626 1.78534 13.8174C1.36393 13.6016 1.02132 13.2574 0.806601 12.8341C0.562501 12.3528 0.562501 11.7227 0.562501 10.4626V3.56259ZM10.2674 8.81259L8.0278 11.0626L5.78821 8.81259M8.0278 11.0626V6.56259"/></svg>`,
|
|
335
|
+
"module-link": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 15.97 16.03" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.49261 8.76267C6.81321 9.19327 7.22223 9.54956 7.69194 9.80737C8.16166 10.0652 8.68106 10.2185 9.21494 10.2569C9.74882 10.2953 10.2847 10.2179 10.7862 10.03C11.2876 9.84207 11.743 9.54797 12.1214 9.16767L14.361 6.91767C15.041 6.21041 15.4172 5.26315 15.4087 4.27991C15.4002 3.29668 15.0076 2.35613 14.3156 1.66085C13.6235 0.965569 12.6873 0.571186 11.7086 0.562642C10.7299 0.554098 9.78705 0.932077 9.08307 1.61517L7.79903 2.89767M9.47873 7.26267C9.15813 6.83207 8.7491 6.47578 8.27939 6.21796C7.80968 5.96015 7.29027 5.80683 6.75639 5.76842C6.22252 5.73001 5.68666 5.80739 5.18517 5.99533C4.68369 6.18327 4.2283 6.47737 3.84989 6.85767L1.6103 9.10767C0.930367 9.81493 0.554137 10.7622 0.562641 11.7454C0.571146 12.7287 0.963705 13.6692 1.65577 14.3645C2.34783 15.0598 3.28403 15.4542 4.26272 15.4627C5.24141 15.4712 6.18428 15.0933 6.88827 14.4102L8.16483 13.1277"/></svg>`,
|
|
336
|
+
"module-adobe-connect": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 14.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.7605 0.56252L8.0278 3.56252L4.29515 0.56252M4.14585 14.0625H11.9098C13.164 14.0625 13.7912 14.0625 14.2703 13.8173C14.6917 13.6016 15.0343 13.2574 15.249 12.834C15.4931 12.3527 15.4931 11.7226 15.4931 10.4625V7.16252C15.4931 5.9024 15.4931 5.27234 15.249 4.79104C15.0343 4.36768 14.6917 4.02347 14.2703 3.80776C13.7912 3.56252 13.164 3.56252 11.9098 3.56252H4.14585C2.89156 3.56252 2.26441 3.56252 1.78534 3.80776C1.36393 4.02347 1.02132 4.36768 0.806601 4.79104C0.5625 5.27234 0.5625 5.9024 0.5625 7.16252V10.4625C0.5625 11.7226 0.5625 12.3527 0.806601 12.834C1.02132 13.2574 1.36393 13.6016 1.78534 13.8173C2.26441 14.0625 2.89156 14.0625 4.14585 14.0625Z"/></svg>`,
|
|
337
|
+
"module-video": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 11.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.4931 3.51103C15.4931 3.05667 15.4931 2.82949 15.4037 2.72429C15.3261 2.63301 15.2097 2.58457 15.0906 2.59399C14.9533 2.60484 14.7934 2.76548 14.4736 3.08676L11.7605 5.8125L14.4736 8.53824C14.7934 8.85952 14.9533 9.02016 15.0906 9.03101C15.2097 9.04043 15.3261 8.99199 15.4037 8.90071C15.4931 8.79552 15.4931 8.56833 15.4931 8.11397V3.51103ZM0.5625 4.1625C0.5625 2.90238 0.5625 2.27232 0.806601 1.79102C1.02132 1.36766 1.36393 1.02345 1.78534 0.807736C2.26441 0.5625 2.89156 0.5625 4.14585 0.5625H8.17711C9.4314 0.5625 10.0585 0.5625 10.5376 0.807736C10.959 1.02345 11.3016 1.36766 11.5164 1.79102C11.7605 2.27232 11.7605 2.90238 11.7605 4.1625V7.4625C11.7605 8.72262 11.7605 9.35268 11.5164 9.83398C11.3016 10.2573 10.959 10.6015 10.5376 10.8173C10.0585 11.0625 9.4314 11.0625 8.17711 11.0625H4.14584C2.89156 11.0625 2.26441 11.0625 1.78534 10.8173C1.36393 10.6015 1.02132 10.2573 0.806601 9.83398C0.5625 9.35268 0.5625 8.72262 0.5625 7.4625V4.1625Z"/></svg>`,
|
|
338
|
+
"module-upload": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 14.75 16.13" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.39 4.3125V4.1625C13.39 2.90238 13.39 2.27232 13.1278 1.79102C12.8972 1.36766 12.5293 1.02345 12.0767 0.807736C11.5622 0.5625 10.8887 0.5625 9.54172 0.5625H4.41074C3.06373 0.5625 2.39022 0.5625 1.87573 0.807736C1.42318 1.02345 1.05524 1.36766 0.824646 1.79102C0.5625 2.27232 0.5625 2.90238 0.5625 4.1625V11.9625C0.5625 13.2226 0.5625 13.8527 0.824646 14.334C1.05524 14.7573 1.42318 15.1015 1.87573 15.3173C2.39022 15.5625 3.06373 15.5625 4.41074 15.5625H7.37709M7.37709 7.3125H3.76936M6.57537 10.3125H3.76936M10.1831 4.3125H3.76936M11.7865 12.5625V8.4375C11.7865 7.81618 12.3249 7.3125 12.9891 7.3125C13.6533 7.3125 14.1917 7.81618 14.1917 8.4375V12.5625C14.1917 13.8051 13.1149 14.8125 11.7865 14.8125C10.4582 14.8125 9.38138 13.8051 9.38138 12.5625V9.5625"/></svg>`
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
// components/bv-button/bv-button.ts
|
|
342
|
+
var _sheet = null;
|
|
343
|
+
function getSheet() {
|
|
344
|
+
if (!_sheet) {
|
|
345
|
+
_sheet = new CSSStyleSheet();
|
|
346
|
+
_sheet.replaceSync(bv_button_default);
|
|
347
|
+
}
|
|
348
|
+
return _sheet;
|
|
349
|
+
}
|
|
350
|
+
var BvButton = class extends HTMLElement {
|
|
351
|
+
static observedAttributes = [
|
|
352
|
+
"variant",
|
|
353
|
+
"size",
|
|
354
|
+
"disabled",
|
|
355
|
+
"loading",
|
|
356
|
+
"type",
|
|
357
|
+
"full-width",
|
|
358
|
+
"icon",
|
|
359
|
+
"icon-position",
|
|
360
|
+
"count"
|
|
361
|
+
];
|
|
362
|
+
constructor() {
|
|
363
|
+
super();
|
|
364
|
+
const shadow = this.attachShadow({ mode: "open" });
|
|
365
|
+
if ("adoptedStyleSheets" in ShadowRoot.prototype) {
|
|
366
|
+
shadow.adoptedStyleSheets = [getSheet()];
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
// ── Accessors ────────────────────────────────────────────────
|
|
370
|
+
get variant() {
|
|
371
|
+
return this.getAttribute("variant") ?? "primary";
|
|
372
|
+
}
|
|
373
|
+
set variant(value) {
|
|
374
|
+
this.setAttribute("variant", value);
|
|
375
|
+
}
|
|
376
|
+
get size() {
|
|
377
|
+
return this.getAttribute("size") ?? "md";
|
|
378
|
+
}
|
|
379
|
+
set size(value) {
|
|
380
|
+
this.setAttribute("size", value);
|
|
381
|
+
}
|
|
382
|
+
get disabled() {
|
|
383
|
+
return this.hasAttribute("disabled");
|
|
384
|
+
}
|
|
385
|
+
set disabled(value) {
|
|
386
|
+
if (value) this.setAttribute("disabled", "");
|
|
387
|
+
else this.removeAttribute("disabled");
|
|
388
|
+
}
|
|
389
|
+
get loading() {
|
|
390
|
+
return this.hasAttribute("loading");
|
|
391
|
+
}
|
|
392
|
+
set loading(value) {
|
|
393
|
+
if (value) this.setAttribute("loading", "");
|
|
394
|
+
else this.removeAttribute("loading");
|
|
395
|
+
}
|
|
396
|
+
get type() {
|
|
397
|
+
const t = this.getAttribute("type");
|
|
398
|
+
return t === "submit" || t === "reset" ? t : "button";
|
|
399
|
+
}
|
|
400
|
+
set type(value) {
|
|
401
|
+
this.setAttribute("type", value);
|
|
402
|
+
}
|
|
403
|
+
get fullWidth() {
|
|
404
|
+
return this.hasAttribute("full-width");
|
|
405
|
+
}
|
|
406
|
+
set fullWidth(value) {
|
|
407
|
+
if (value) this.setAttribute("full-width", "");
|
|
408
|
+
else this.removeAttribute("full-width");
|
|
409
|
+
}
|
|
410
|
+
// ── Lifecycle ────────────────────────────────────────────────
|
|
411
|
+
connectedCallback() {
|
|
412
|
+
this._render();
|
|
413
|
+
}
|
|
414
|
+
attributeChangedCallback(_name, oldValue, newValue) {
|
|
415
|
+
if (oldValue === newValue) return;
|
|
416
|
+
this._render();
|
|
417
|
+
}
|
|
418
|
+
// ── Rendering ────────────────────────────────────────────────
|
|
419
|
+
_render() {
|
|
420
|
+
var _a;
|
|
421
|
+
const shadow = this.shadowRoot;
|
|
422
|
+
let btn = shadow.querySelector("button");
|
|
423
|
+
if (!btn) {
|
|
424
|
+
if (!shadow.adoptedStyleSheets.length) {
|
|
425
|
+
const styleEl = document.createElement("style");
|
|
426
|
+
styleEl.textContent = bv_button_default;
|
|
427
|
+
shadow.appendChild(styleEl);
|
|
428
|
+
}
|
|
429
|
+
btn = document.createElement("button");
|
|
430
|
+
btn.setAttribute("part", "button");
|
|
431
|
+
btn.appendChild(document.createElement("slot"));
|
|
432
|
+
shadow.appendChild(btn);
|
|
433
|
+
}
|
|
434
|
+
btn.type = this.type;
|
|
435
|
+
btn.disabled = this.disabled || this.loading;
|
|
436
|
+
btn.className = "btn";
|
|
437
|
+
if (this.loading) {
|
|
438
|
+
btn.setAttribute("aria-busy", "true");
|
|
439
|
+
if (!btn.querySelector(".spinner")) {
|
|
440
|
+
const spinner = document.createElement("span");
|
|
441
|
+
spinner.className = "spinner";
|
|
442
|
+
spinner.setAttribute("aria-hidden", "true");
|
|
443
|
+
btn.insertBefore(spinner, btn.querySelector("slot"));
|
|
444
|
+
}
|
|
445
|
+
} else {
|
|
446
|
+
btn.removeAttribute("aria-busy");
|
|
447
|
+
(_a = btn.querySelector(".spinner")) == null ? void 0 : _a.remove();
|
|
448
|
+
}
|
|
449
|
+
btn.querySelectorAll(".btn-icon").forEach((el) => el.remove());
|
|
450
|
+
const iconName = this.getAttribute("icon");
|
|
451
|
+
if (iconName) {
|
|
452
|
+
const svg = getIconSvg(iconName, 16);
|
|
453
|
+
if (svg) {
|
|
454
|
+
const iconEl = document.createElement("span");
|
|
455
|
+
iconEl.className = "btn-icon";
|
|
456
|
+
iconEl.innerHTML = svg;
|
|
457
|
+
const slot = btn.querySelector("slot");
|
|
458
|
+
if (this.getAttribute("icon-position") === "right") {
|
|
459
|
+
btn.appendChild(iconEl);
|
|
460
|
+
} else {
|
|
461
|
+
btn.insertBefore(iconEl, slot);
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
btn.querySelectorAll(".btn-count").forEach((el) => el.remove());
|
|
466
|
+
const countVal = this.getAttribute("count");
|
|
467
|
+
if (countVal && Number(countVal) > 0) {
|
|
468
|
+
const countEl = document.createElement("span");
|
|
469
|
+
countEl.className = "btn-count";
|
|
470
|
+
countEl.textContent = `(${countVal})`;
|
|
471
|
+
btn.appendChild(countEl);
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
};
|
|
475
|
+
if (!customElements.get("bv-button")) {
|
|
476
|
+
customElements.define("bv-button", BvButton);
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
// components/bv-user-row/bv-user-row.ts
|
|
480
|
+
var BvUserRow = class extends HTMLElement {
|
|
481
|
+
static observedAttributes = [
|
|
482
|
+
"user-name",
|
|
483
|
+
"user-org",
|
|
484
|
+
"avatar-src",
|
|
485
|
+
"avatar-initials",
|
|
486
|
+
"greeting"
|
|
487
|
+
];
|
|
488
|
+
_rendered = false;
|
|
489
|
+
_els = {};
|
|
490
|
+
constructor() {
|
|
491
|
+
super();
|
|
492
|
+
this.attachShadow({ mode: "open" });
|
|
493
|
+
if ("replaceSync" in CSSStyleSheet.prototype) {
|
|
494
|
+
const sheet = new CSSStyleSheet();
|
|
495
|
+
sheet.replaceSync(bv_user_row_default);
|
|
496
|
+
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
connectedCallback() {
|
|
500
|
+
this._render();
|
|
501
|
+
}
|
|
502
|
+
attributeChangedCallback(name, _old, val) {
|
|
503
|
+
var _a;
|
|
504
|
+
if (!this._rendered) return;
|
|
505
|
+
const map = {
|
|
506
|
+
"user-name": () => {
|
|
507
|
+
if (this._els.name) this._els.name.textContent = this._greeting() + (val ?? "");
|
|
508
|
+
},
|
|
509
|
+
"user-org": () => {
|
|
510
|
+
if (this._els.org) this._els.org.textContent = val ?? "";
|
|
511
|
+
},
|
|
512
|
+
"avatar-src": () => {
|
|
513
|
+
var _a2;
|
|
514
|
+
(_a2 = this._els.avatar) == null ? void 0 : _a2.setAttribute("src", val ?? "");
|
|
515
|
+
},
|
|
516
|
+
"avatar-initials": () => {
|
|
517
|
+
var _a2;
|
|
518
|
+
(_a2 = this._els.avatar) == null ? void 0 : _a2.setAttribute("initials", val ?? "");
|
|
519
|
+
},
|
|
520
|
+
greeting: () => {
|
|
521
|
+
if (this._els.name)
|
|
522
|
+
this._els.name.textContent = this._greeting() + (this.getAttribute("user-name") ?? "");
|
|
523
|
+
}
|
|
524
|
+
};
|
|
525
|
+
(_a = map[name]) == null ? void 0 : _a.call(map);
|
|
526
|
+
}
|
|
527
|
+
_greeting() {
|
|
528
|
+
const g = this.getAttribute("greeting");
|
|
529
|
+
return g !== null ? g + " " : "Welcome, ";
|
|
530
|
+
}
|
|
531
|
+
_render() {
|
|
532
|
+
if (this._rendered) return;
|
|
533
|
+
this._rendered = true;
|
|
534
|
+
const shadow = this.shadowRoot;
|
|
535
|
+
if (!shadow.adoptedStyleSheets.length) {
|
|
536
|
+
const s = document.createElement("style");
|
|
537
|
+
s.textContent = bv_user_row_default;
|
|
538
|
+
shadow.appendChild(s);
|
|
539
|
+
}
|
|
540
|
+
const row = document.createElement("div");
|
|
541
|
+
row.className = "row";
|
|
542
|
+
const userInfo = document.createElement("div");
|
|
543
|
+
userInfo.className = "user-info";
|
|
544
|
+
const avatar = document.createElement("bv-avatar");
|
|
545
|
+
avatar.setAttribute("src", this.getAttribute("avatar-src") ?? "");
|
|
546
|
+
avatar.setAttribute("initials", this.getAttribute("avatar-initials") ?? "");
|
|
547
|
+
this._els.avatar = avatar;
|
|
548
|
+
const textCol = document.createElement("div");
|
|
549
|
+
textCol.className = "text-col";
|
|
550
|
+
const name = document.createElement("span");
|
|
551
|
+
name.className = "user-name";
|
|
552
|
+
name.textContent = this._greeting() + (this.getAttribute("user-name") ?? "");
|
|
553
|
+
this._els.name = name;
|
|
554
|
+
const org = document.createElement("span");
|
|
555
|
+
org.className = "user-org";
|
|
556
|
+
org.textContent = this.getAttribute("user-org") ?? "";
|
|
557
|
+
this._els.org = org;
|
|
558
|
+
textCol.append(name, org);
|
|
559
|
+
userInfo.append(avatar, textCol);
|
|
560
|
+
const editBtn = document.createElement("bv-button");
|
|
561
|
+
editBtn.className = "edit-btn";
|
|
562
|
+
editBtn.setAttribute("icon", "edit");
|
|
563
|
+
editBtn.textContent = "Edit Profile";
|
|
564
|
+
editBtn.addEventListener("click", () => {
|
|
565
|
+
this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
|
|
566
|
+
});
|
|
567
|
+
this._els.editBtn = editBtn;
|
|
568
|
+
row.append(userInfo, editBtn);
|
|
569
|
+
shadow.appendChild(row);
|
|
570
|
+
}
|
|
571
|
+
};
|
|
572
|
+
if (!customElements.get("bv-user-row")) {
|
|
573
|
+
customElements.define("bv-user-row", BvUserRow);
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-promo-banner/bv-promo-banner.css
|
|
577
|
+
var bv_promo_banner_default = ":host {\n display: inline-block;\n}\n\n.banner {\n display: flex;\n align-items: center;\n gap: var(--bv-spacing-sm);\n padding: 5px var(--bv-spacing-sm) 5px 5px;\n background: var(--bv-color-primary-light);\n border-radius: var(--bv-radius-xl);\n cursor: pointer;\n text-decoration: none;\n transition: opacity var(--bv-transition-fast);\n}\n\n.banner:hover {\n opacity: 0.88;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n gap: var(--bv-spacing-xs);\n padding: 2px var(--bv-spacing-sm);\n background: var(--bv-color-neutral-0);\n border-radius: var(--bv-radius-full);\n flex-shrink: 0;\n}\n\n.badge-label {\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-xs);\n font-weight: var(--bv-font-weight-medium);\n color: var(--bv-color-primary-dark);\n white-space: nowrap;\n}\n\n.badge-logo {\n height: 12px;\n width: auto;\n display: block;\n}\n\n.message {\n flex: none;\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-xs);\n font-weight: var(--bv-font-weight-medium);\n color: var(--bv-color-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.chevron {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--bv-color-primary);\n display: flex;\n align-items: center;\n}\n";
|
|
578
|
+
|
|
579
|
+
// components/bv-promo-banner/bv-promo-banner.ts
|
|
580
|
+
var CHEVRON = `<svg class="chevron" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
581
|
+
<path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
582
|
+
</svg>`;
|
|
583
|
+
var BvPromoBanner = class extends HTMLElement {
|
|
584
|
+
static observedAttributes = ["message", "badge-label", "badge-logo", "href"];
|
|
585
|
+
_rendered = false;
|
|
586
|
+
_messageEl = null;
|
|
587
|
+
_badgeLabelEl = null;
|
|
588
|
+
_badgeLogoEl = null;
|
|
589
|
+
_anchor = null;
|
|
590
|
+
constructor() {
|
|
591
|
+
super();
|
|
592
|
+
this.attachShadow({ mode: "open" });
|
|
593
|
+
if ("replaceSync" in CSSStyleSheet.prototype) {
|
|
594
|
+
const sheet = new CSSStyleSheet();
|
|
595
|
+
sheet.replaceSync(bv_promo_banner_default);
|
|
596
|
+
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
connectedCallback() {
|
|
600
|
+
this._render();
|
|
601
|
+
}
|
|
602
|
+
attributeChangedCallback(name, _old, val) {
|
|
603
|
+
if (!this._rendered) return;
|
|
604
|
+
if (name === "message" && this._messageEl) this._messageEl.textContent = val ?? "";
|
|
605
|
+
if (name === "badge-label" && this._badgeLabelEl) this._badgeLabelEl.textContent = val ?? "";
|
|
606
|
+
if (name === "badge-logo" && this._badgeLogoEl) {
|
|
607
|
+
this._badgeLogoEl.src = val ?? "";
|
|
608
|
+
this._badgeLogoEl.hidden = !val;
|
|
609
|
+
}
|
|
610
|
+
if (name === "href" && this._anchor) this._anchor.href = val ?? "";
|
|
611
|
+
}
|
|
612
|
+
_render() {
|
|
613
|
+
if (this._rendered) return;
|
|
614
|
+
this._rendered = true;
|
|
615
|
+
const shadow = this.shadowRoot;
|
|
616
|
+
if (!shadow.adoptedStyleSheets.length) {
|
|
617
|
+
const s = document.createElement("style");
|
|
618
|
+
s.textContent = bv_promo_banner_default;
|
|
619
|
+
shadow.appendChild(s);
|
|
620
|
+
}
|
|
621
|
+
const anchor = document.createElement("a");
|
|
622
|
+
anchor.className = "banner";
|
|
623
|
+
anchor.href = this.getAttribute("href") ?? "";
|
|
624
|
+
anchor.rel = "noopener noreferrer";
|
|
625
|
+
this._anchor = anchor;
|
|
626
|
+
const badge = document.createElement("span");
|
|
627
|
+
badge.className = "badge";
|
|
628
|
+
const badgeLabel = document.createElement("span");
|
|
629
|
+
badgeLabel.className = "badge-label";
|
|
630
|
+
badgeLabel.textContent = this.getAttribute("badge-label") ?? "";
|
|
631
|
+
this._badgeLabelEl = badgeLabel;
|
|
632
|
+
const badgeLogo = document.createElement("img");
|
|
633
|
+
badgeLogo.className = "badge-logo";
|
|
634
|
+
badgeLogo.alt = "";
|
|
635
|
+
badgeLogo.src = this.getAttribute("badge-logo") ?? "";
|
|
636
|
+
badgeLogo.hidden = !this.getAttribute("badge-logo");
|
|
637
|
+
this._badgeLogoEl = badgeLogo;
|
|
638
|
+
badge.append(badgeLabel, badgeLogo);
|
|
639
|
+
const message = document.createElement("span");
|
|
640
|
+
message.className = "message";
|
|
641
|
+
message.textContent = this.getAttribute("message") ?? "";
|
|
642
|
+
this._messageEl = message;
|
|
643
|
+
const chevron = document.createElement("span");
|
|
644
|
+
chevron.innerHTML = CHEVRON;
|
|
645
|
+
anchor.append(badge, message, chevron);
|
|
646
|
+
shadow.appendChild(anchor);
|
|
647
|
+
}
|
|
648
|
+
};
|
|
649
|
+
if (!customElements.get("bv-promo-banner")) {
|
|
650
|
+
customElements.define("bv-promo-banner", BvPromoBanner);
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-searchbox/bv-searchbox.css
|
|
654
|
+
var bv_searchbox_default = ":host {\n display: block;\n width: 100%;\n position: relative;\n font-family: var(--bv-font-family-base);\n}\n\n.search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--bv-color-neutral-400);\n display: flex;\n pointer-events: none;\n}\n\n.search-input {\n width: 100%;\n box-sizing: border-box;\n height: 40px;\n padding: 0 12px 0 38px;\n font-size: var(--bv-font-size-sm);\n font-family: inherit;\n border: 1px solid var(--bv-color-neutral-300);\n border-radius: var(--bv-radius-lg);\n outline: none;\n color: var(--bv-color-neutral-800);\n background: var(--bv-color-neutral-0);\n transition: border-color var(--bv-transition-fast);\n}\n\n:host([size='sm']) .search-input {\n height: 36px;\n}\n:host([size='lg']) .search-input {\n height: 46px;\n}\n\n.search-input::placeholder {\n color: var(--bv-color-neutral-400);\n}\n\n.search-input:focus {\n border-color: #6fb0d8;\n box-shadow:\n 0px 0px 0px 4px #dbe8ff,\n 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n}\n";
|
|
655
|
+
|
|
656
|
+
// components/bv-searchbox/bv-searchbox.ts
|
|
657
|
+
var SEARCH_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
658
|
+
<path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
|
|
659
|
+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
660
|
+
</svg>`;
|
|
661
|
+
var BvSearchbox = class extends HTMLElement {
|
|
662
|
+
static observedAttributes = ["placeholder", "value", "size"];
|
|
663
|
+
_rendered = false;
|
|
664
|
+
_input = null;
|
|
665
|
+
constructor() {
|
|
666
|
+
super();
|
|
667
|
+
this.attachShadow({ mode: "open" });
|
|
668
|
+
if ("replaceSync" in CSSStyleSheet.prototype) {
|
|
669
|
+
const sheet = new CSSStyleSheet();
|
|
670
|
+
sheet.replaceSync(bv_searchbox_default);
|
|
671
|
+
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
672
|
+
}
|
|
673
|
+
}
|
|
674
|
+
connectedCallback() {
|
|
675
|
+
this._render();
|
|
676
|
+
}
|
|
677
|
+
attributeChangedCallback(name, _old, val) {
|
|
678
|
+
if (!this._rendered || !this._input) return;
|
|
679
|
+
if (name === "placeholder") this._input.placeholder = val ?? "";
|
|
680
|
+
if (name === "value") this._input.value = val ?? "";
|
|
681
|
+
}
|
|
682
|
+
get value() {
|
|
683
|
+
var _a;
|
|
684
|
+
return ((_a = this._input) == null ? void 0 : _a.value) ?? "";
|
|
685
|
+
}
|
|
686
|
+
_render() {
|
|
687
|
+
if (this._rendered) return;
|
|
688
|
+
this._rendered = true;
|
|
689
|
+
const shadow = this.shadowRoot;
|
|
690
|
+
if (!shadow.adoptedStyleSheets.length) {
|
|
691
|
+
const s = document.createElement("style");
|
|
692
|
+
s.textContent = bv_searchbox_default;
|
|
693
|
+
shadow.appendChild(s);
|
|
694
|
+
}
|
|
695
|
+
const icon = document.createElement("span");
|
|
696
|
+
icon.className = "search-icon";
|
|
697
|
+
icon.innerHTML = SEARCH_ICON;
|
|
698
|
+
this._input = document.createElement("input");
|
|
699
|
+
this._input.type = "search";
|
|
700
|
+
this._input.className = "search-input";
|
|
701
|
+
this._input.placeholder = this.getAttribute("placeholder") ?? "Search\u2026";
|
|
702
|
+
this._input.value = this.getAttribute("value") ?? "";
|
|
703
|
+
this._input.addEventListener("input", () => {
|
|
704
|
+
this.dispatchEvent(
|
|
705
|
+
new CustomEvent("bv-search", {
|
|
706
|
+
bubbles: true,
|
|
707
|
+
composed: true,
|
|
708
|
+
detail: { value: this._input.value }
|
|
709
|
+
})
|
|
710
|
+
);
|
|
711
|
+
});
|
|
712
|
+
shadow.append(icon, this._input);
|
|
713
|
+
}
|
|
714
|
+
};
|
|
715
|
+
if (!customElements.get("bv-searchbox")) {
|
|
716
|
+
customElements.define("bv-searchbox", BvSearchbox);
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
// components/bv-portal-header/bv-portal-header.ts
|
|
720
|
+
var BvPortalHeader = class extends HTMLElement {
|
|
721
|
+
static observedAttributes = [
|
|
722
|
+
"title",
|
|
723
|
+
"user-name",
|
|
724
|
+
"user-org",
|
|
725
|
+
"avatar-src",
|
|
726
|
+
"avatar-initials",
|
|
727
|
+
"search-placeholder",
|
|
728
|
+
"promo-message",
|
|
729
|
+
"promo-badge-label",
|
|
730
|
+
"promo-badge-logo",
|
|
731
|
+
"promo-href"
|
|
732
|
+
];
|
|
733
|
+
_rendered = false;
|
|
734
|
+
_els = {};
|
|
735
|
+
constructor() {
|
|
736
|
+
super();
|
|
737
|
+
this.attachShadow({ mode: "open" });
|
|
738
|
+
if ("replaceSync" in CSSStyleSheet.prototype) {
|
|
739
|
+
const sheet = new CSSStyleSheet();
|
|
740
|
+
sheet.replaceSync(bv_portal_header_default);
|
|
741
|
+
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
742
|
+
}
|
|
743
|
+
}
|
|
744
|
+
connectedCallback() {
|
|
745
|
+
this._render();
|
|
746
|
+
}
|
|
747
|
+
attributeChangedCallback(name, _old, val) {
|
|
748
|
+
var _a;
|
|
749
|
+
if (!this._rendered) return;
|
|
750
|
+
const map = {
|
|
751
|
+
title: () => {
|
|
752
|
+
if (this._els.title) this._els.title.textContent = val ?? "";
|
|
753
|
+
},
|
|
754
|
+
"user-name": () => {
|
|
755
|
+
var _a2;
|
|
756
|
+
(_a2 = this._els.userRow) == null ? void 0 : _a2.setAttribute("user-name", val ?? "");
|
|
757
|
+
},
|
|
758
|
+
"user-org": () => {
|
|
759
|
+
var _a2;
|
|
760
|
+
(_a2 = this._els.userRow) == null ? void 0 : _a2.setAttribute("user-org", val ?? "");
|
|
761
|
+
},
|
|
762
|
+
"avatar-src": () => {
|
|
763
|
+
var _a2;
|
|
764
|
+
(_a2 = this._els.userRow) == null ? void 0 : _a2.setAttribute("avatar-src", val ?? "");
|
|
765
|
+
},
|
|
766
|
+
"avatar-initials": () => {
|
|
767
|
+
var _a2;
|
|
768
|
+
(_a2 = this._els.userRow) == null ? void 0 : _a2.setAttribute("avatar-initials", val ?? "");
|
|
769
|
+
},
|
|
770
|
+
"search-placeholder": () => {
|
|
771
|
+
var _a2;
|
|
772
|
+
(_a2 = this._els.search) == null ? void 0 : _a2.setAttribute("placeholder", val ?? "");
|
|
773
|
+
},
|
|
774
|
+
"promo-message": () => {
|
|
775
|
+
var _a2;
|
|
776
|
+
(_a2 = this._els.promo) == null ? void 0 : _a2.setAttribute("message", val ?? "");
|
|
777
|
+
},
|
|
778
|
+
"promo-badge-label": () => {
|
|
779
|
+
var _a2;
|
|
780
|
+
(_a2 = this._els.promo) == null ? void 0 : _a2.setAttribute("badge-label", val ?? "");
|
|
781
|
+
},
|
|
782
|
+
"promo-badge-logo": () => {
|
|
783
|
+
var _a2;
|
|
784
|
+
(_a2 = this._els.promo) == null ? void 0 : _a2.setAttribute("badge-logo", val ?? "");
|
|
785
|
+
},
|
|
786
|
+
"promo-href": () => {
|
|
787
|
+
var _a2;
|
|
788
|
+
(_a2 = this._els.promo) == null ? void 0 : _a2.setAttribute("href", val ?? "");
|
|
789
|
+
}
|
|
790
|
+
};
|
|
791
|
+
(_a = map[name]) == null ? void 0 : _a.call(map);
|
|
792
|
+
}
|
|
793
|
+
_render() {
|
|
794
|
+
if (this._rendered) return;
|
|
795
|
+
this._rendered = true;
|
|
796
|
+
const shadow = this.shadowRoot;
|
|
797
|
+
if (!shadow.adoptedStyleSheets.length) {
|
|
798
|
+
const s = document.createElement("style");
|
|
799
|
+
s.textContent = bv_portal_header_default;
|
|
800
|
+
shadow.appendChild(s);
|
|
801
|
+
}
|
|
802
|
+
const header = document.createElement("div");
|
|
803
|
+
header.className = "header";
|
|
804
|
+
const titleBar = document.createElement("div");
|
|
805
|
+
titleBar.className = "title-bar";
|
|
806
|
+
const title = document.createElement("h1");
|
|
807
|
+
title.className = "title";
|
|
808
|
+
title.textContent = this.getAttribute("title") ?? "";
|
|
809
|
+
this._els.title = title;
|
|
810
|
+
titleBar.appendChild(title);
|
|
811
|
+
const body = document.createElement("div");
|
|
812
|
+
body.className = "body";
|
|
813
|
+
const userRow = document.createElement("bv-user-row");
|
|
814
|
+
userRow.setAttribute("user-name", this.getAttribute("user-name") ?? "");
|
|
815
|
+
userRow.setAttribute("user-org", this.getAttribute("user-org") ?? "");
|
|
816
|
+
userRow.setAttribute("avatar-src", this.getAttribute("avatar-src") ?? "");
|
|
817
|
+
userRow.setAttribute("avatar-initials", this.getAttribute("avatar-initials") ?? "");
|
|
818
|
+
userRow.addEventListener("bv-edit-profile", () => {
|
|
819
|
+
this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
|
|
820
|
+
});
|
|
821
|
+
this._els.userRow = userRow;
|
|
822
|
+
const promo = document.createElement("bv-promo-banner");
|
|
823
|
+
promo.setAttribute("message", this.getAttribute("promo-message") ?? "");
|
|
824
|
+
promo.setAttribute("badge-label", this.getAttribute("promo-badge-label") ?? "");
|
|
825
|
+
promo.setAttribute("badge-logo", this.getAttribute("promo-badge-logo") ?? "");
|
|
826
|
+
promo.setAttribute("href", this.getAttribute("promo-href") ?? "");
|
|
827
|
+
this._els.promo = promo;
|
|
828
|
+
const search = document.createElement("bv-searchbox");
|
|
829
|
+
search.setAttribute("size", "lg");
|
|
830
|
+
search.setAttribute(
|
|
831
|
+
"placeholder",
|
|
832
|
+
this.getAttribute("search-placeholder") ?? "Search for Courses"
|
|
833
|
+
);
|
|
834
|
+
search.addEventListener("bv-search", (e) => {
|
|
835
|
+
this.dispatchEvent(
|
|
836
|
+
new CustomEvent("bv-search", {
|
|
837
|
+
bubbles: true,
|
|
838
|
+
composed: true,
|
|
839
|
+
detail: e.detail
|
|
840
|
+
})
|
|
841
|
+
);
|
|
842
|
+
});
|
|
843
|
+
this._els.search = search;
|
|
844
|
+
body.append(userRow, promo, search);
|
|
845
|
+
header.append(titleBar, body);
|
|
846
|
+
shadow.appendChild(header);
|
|
847
|
+
}
|
|
848
|
+
};
|
|
849
|
+
if (!customElements.get("bv-portal-header")) {
|
|
850
|
+
customElements.define("bv-portal-header", BvPortalHeader);
|
|
851
|
+
}
|
|
852
|
+
export {
|
|
853
|
+
BvPortalHeader
|
|
854
|
+
};
|