@bluevolt-tech/lumen 1.3.2 → 1.5.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.
Files changed (21) hide show
  1. package/dist/components/bv-button/bv-button.js +2 -182
  2. package/dist/components/bv-course-detail-modal/bv-course-detail-modal.js +2 -182
  3. package/dist/components/bv-course-grid-card/bv-course-grid-card.d.ts +12 -0
  4. package/dist/components/bv-course-grid-card/bv-course-grid-card.js +87 -185
  5. package/dist/components/bv-course-list-card/bv-course-list-card.d.ts +11 -0
  6. package/dist/components/bv-course-list-card/bv-course-list-card.js +77 -185
  7. package/dist/components/bv-empty-state/bv-empty-state.d.ts +22 -1
  8. package/dist/components/bv-empty-state/bv-empty-state.js +410 -5
  9. package/dist/components/bv-empty-state/illustrations.d.ts +3 -0
  10. package/dist/components/bv-filter-panel/bv-filter-panel.d.ts +4 -0
  11. package/dist/components/bv-filter-panel/bv-filter-panel.js +30 -3
  12. package/dist/components/bv-portal-header/bv-portal-header.d.ts +1 -0
  13. package/dist/components/bv-portal-header/bv-portal-header.js +99 -195
  14. package/dist/components/bv-promo-banner/bv-promo-banner.d.ts +4 -0
  15. package/dist/components/bv-promo-banner/bv-promo-banner.js +16 -1
  16. package/dist/components/bv-user-row/bv-user-row.d.ts +6 -0
  17. package/dist/components/bv-user-row/bv-user-row.js +59 -193
  18. package/dist/storybook/stories/screens/course-catalog.data.js +1842 -153
  19. package/dist/themes/base.css +1 -1
  20. package/package.json +1 -1
  21. package/themes/base.css +1 -1
package/dist/components/bv-button/bv-button.js CHANGED
@@ -1,185 +1,5 @@
1
1
  // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
2
- 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
3
- Apps can override these three properties per-instance:
4
-
5
- HTML: <bv-button style="--bv-button-bg: #e53e3e;">
6
- Angular: <bv-button [style.--bv-button-bg]="brandColor">
7
- JavaScript: btn.style.setProperty('--bv-button-bg', value)
8
-
9
- Hover is auto-computed from the base colors via color-mix().
10
- Override --bv-button-bg-hover / --bv-button-border-color-hover
11
- if you need explicit control over the hovered state.
12
- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
13
- :host {
14
- /* Default values \u2014 map to global tokens (primary variant) */
15
- --bv-button-bg: var(--bv-color-primary);
16
- --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);
17
- --bv-button-color: var(--bv-color-neutral-0);
18
- --bv-button-border-color: var(--bv-color-primary);
19
- --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);
20
- --bv-button-font-family: var(--bv-font-family-base);
21
- --bv-button-font-size: var(--bv-font-size-sm);
22
-
23
- display: inline-block;
24
- font-family: var(--bv-font-family-base);
25
- }
26
-
27
- :host([hidden]) {
28
- display: none;
29
- }
30
-
31
- :host([full-width]) {
32
- display: block;
33
- width: 100%;
34
- }
35
-
36
- /* \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
37
- Each variant re-points the component tokens to different global
38
- tokens. Apps can still override with inline styles \u2014 inline style
39
- always wins due to higher specificity.
40
- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
41
-
42
- :host([variant='secondary']) {
43
- --bv-button-bg: var(--bv-color-secondary);
44
- --bv-button-border-color: var(--bv-color-secondary);
45
- --bv-button-color: var(--bv-color-secondary-foreground);
46
- }
47
-
48
- :host([variant='tertiary']) {
49
- --bv-button-bg: var(--bv-color-tertiary);
50
- --bv-button-border-color: var(--bv-color-tertiary);
51
- }
52
-
53
- :host([variant='danger']) {
54
- --bv-button-bg: var(--bv-color-danger);
55
- --bv-button-border-color: var(--bv-color-danger);
56
- }
57
-
58
- :host([variant='ghost']) {
59
- --bv-button-bg: transparent;
60
- --bv-button-bg-hover: var(--bv-color-primary-light);
61
- --bv-button-color: var(--bv-color-primary);
62
- --bv-button-border-color: transparent;
63
- --bv-button-border-color-hover: transparent;
64
- }
65
-
66
- :host([variant='outline']) {
67
- --bv-button-bg: transparent;
68
- --bv-button-bg-hover: var(--bv-color-primary-light);
69
- --bv-button-color: var(--bv-color-primary);
70
- --bv-button-border-color: var(--bv-color-primary);
71
- --bv-button-border-color-hover: var(--bv-color-primary);
72
- }
73
-
74
- /* \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
75
- All visual properties read from the component-level tokens above.
76
- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
77
-
78
- .btn {
79
- display: inline-flex;
80
- align-items: center;
81
- justify-content: center;
82
- gap: var(--bv-spacing-xs);
83
- padding: 10px var(--bv-spacing-md);
84
- min-height: 40px;
85
- width: auto;
86
- font-family: var(--bv-button-font-family);
87
- font-size: var(--bv-button-font-size);
88
- font-style: normal;
89
- font-weight: var(--bv-font-weight-semibold);
90
- line-height: 20px;
91
- border: 1px solid var(--bv-button-border-color);
92
- border-radius: var(--bv-radius-lg);
93
- cursor: pointer;
94
- transition:
95
- background var(--bv-transition-fast),
96
- color var(--bv-transition-fast),
97
- border-color var(--bv-transition-fast),
98
- box-shadow var(--bv-transition-fast),
99
- opacity var(--bv-transition-fast);
100
- white-space: nowrap;
101
- user-select: none;
102
- text-decoration: none;
103
- outline: none;
104
- box-sizing: border-box;
105
- background: var(--bv-button-bg);
106
- color: var(--bv-button-color);
107
- box-shadow: var(--bv-shadow-sm);
108
- }
109
-
110
- :host([full-width]) .btn {
111
- width: 100%;
112
- }
113
-
114
- .btn:hover:not(:disabled) {
115
- background: var(--bv-button-bg-hover);
116
- border-color: var(--bv-button-border-color-hover);
117
- }
118
-
119
- .btn:active:not(:disabled) {
120
- transform: translateY(1px);
121
- }
122
-
123
- .btn:focus-visible {
124
- outline: 2px solid var(--bv-button-border-color);
125
- outline-offset: 2px;
126
- }
127
-
128
- .btn:disabled {
129
- opacity: 0.5;
130
- cursor: not-allowed;
131
- pointer-events: none;
132
- }
133
-
134
- /* \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*/
135
-
136
- :host([size='sm']) .btn {
137
- padding: 6px 12px;
138
- min-height: 32px;
139
- font-size: var(--bv-font-size-sm);
140
- }
141
-
142
- :host([size='lg']) .btn {
143
- padding: 12px var(--bv-spacing-lg);
144
- min-height: 48px;
145
- font-size: var(--bv-font-size-md);
146
- }
147
-
148
- /* \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*/
149
-
150
- .btn-icon {
151
- display: inline-flex;
152
- align-items: center;
153
- flex-shrink: 0;
154
- line-height: 0;
155
- }
156
-
157
- /* \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*/
158
-
159
- .btn-count {
160
- opacity: 0.8;
161
- font-weight: var(--bv-font-weight-regular);
162
- }
163
-
164
- /* \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*/
165
-
166
- .spinner {
167
- display: inline-block;
168
- width: 1em;
169
- height: 1em;
170
- border: 2px solid currentColor;
171
- border-top-color: transparent;
172
- border-radius: 50%;
173
- flex-shrink: 0;
174
- animation: bv-spin 700ms linear infinite;
175
- }
176
-
177
- @keyframes bv-spin {
178
- to {
179
- transform: rotate(360deg);
180
- }
181
- }
182
- `;
2
+ 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\n Apps can override these three properties per-instance:\n\n HTML: <bv-button style=\"--bv-button-bg: #e53e3e;\">\n Angular: <bv-button [style.--bv-button-bg]=\"brandColor\">\n JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n Hover is auto-computed from the base colors via color-mix().\n Override --bv-button-bg-hover / --bv-button-border-color-hover\n if you need explicit control over the hovered state.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n /* Default values \u2014 map to global tokens (primary variant) */\n --bv-button-bg: var(--bv-color-primary);\n --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n --bv-button-color: var(--bv-color-neutral-0);\n --bv-button-border-color: var(--bv-color-primary);\n --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n --bv-button-font-family: var(--bv-font-family-base);\n --bv-button-font-size: var(--bv-font-size-sm);\n\n display: inline-block;\n font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n display: none !important;\n}\n\n:host([full-width]) {\n display: block;\n width: 100%;\n}\n\n/* \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\n Each variant re-points the component tokens to different global\n tokens. Apps can still override with inline styles \u2014 inline style\n always wins due to higher specificity.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host([variant='secondary']) {\n --bv-button-bg: var(--bv-color-secondary);\n --bv-button-border-color: var(--bv-color-secondary);\n --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n --bv-button-bg: var(--bv-color-tertiary);\n --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n --bv-button-bg: var(--bv-color-danger);\n --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n --bv-button-bg: transparent;\n --bv-button-bg-hover: var(--bv-color-primary-light);\n --bv-button-color: var(--bv-color-primary);\n --bv-button-border-color: transparent;\n --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n --bv-button-bg: transparent;\n --bv-button-bg-hover: var(--bv-color-primary-light);\n --bv-button-color: var(--bv-color-primary);\n --bv-button-border-color: var(--bv-color-primary);\n --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n/* \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\n All visual properties read from the component-level tokens above.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bv-spacing-xs);\n padding: 10px var(--bv-spacing-md);\n min-height: 40px;\n width: auto;\n font-family: var(--bv-button-font-family);\n font-size: var(--bv-button-font-size);\n font-style: normal;\n font-weight: var(--bv-font-weight-semibold);\n line-height: 20px;\n border: 1px solid var(--bv-button-border-color);\n border-radius: var(--bv-radius-lg);\n cursor: pointer;\n transition:\n background var(--bv-transition-fast),\n color var(--bv-transition-fast),\n border-color var(--bv-transition-fast),\n box-shadow var(--bv-transition-fast),\n opacity var(--bv-transition-fast);\n white-space: nowrap;\n user-select: none;\n text-decoration: none;\n outline: none;\n box-sizing: border-box;\n background: var(--bv-button-bg);\n color: var(--bv-button-color);\n box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n background: var(--bv-button-bg-hover);\n border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n transform: translateY(1px);\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--bv-button-border-color);\n outline-offset: 2px;\n}\n\n.btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* \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*/\n\n:host([size='sm']) .btn {\n padding: 6px 12px;\n min-height: 32px;\n font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n padding: 12px var(--bv-spacing-lg);\n min-height: 48px;\n font-size: var(--bv-font-size-md);\n}\n\n/* \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*/\n\n.btn-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n}\n\n/* \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*/\n\n.btn-count {\n opacity: 0.8;\n font-weight: var(--bv-font-weight-regular);\n}\n\n/* \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*/\n\n.spinner {\n display: inline-block;\n width: 1em;\n height: 1em;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n flex-shrink: 0;\n animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n to {\n transform: rotate(360deg);\n }\n}\n";
183
3
 
184
4
  // components/bv-icon/icons.ts
185
5
  var icons = {
@@ -363,7 +183,7 @@ var BvButton = class extends HTMLElement {
363
183
  }
364
184
  btn.querySelectorAll(".btn-icon").forEach((el) => el.remove());
365
185
  const iconName = this.getAttribute("icon");
366
- if (iconName) {
186
+ if (iconName && !this.loading) {
367
187
  const svg = getIconSvg(iconName, 16);
368
188
  if (svg) {
369
189
  const iconEl = document.createElement("span");
package/dist/components/bv-course-detail-modal/bv-course-detail-modal.js CHANGED
@@ -857,187 +857,7 @@ if (!customElements.get("bv-course-outline")) {
857
857
  }
858
858
 
859
859
  // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
860
- 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
861
- Apps can override these three properties per-instance:
862
-
863
- HTML: <bv-button style="--bv-button-bg: #e53e3e;">
864
- Angular: <bv-button [style.--bv-button-bg]="brandColor">
865
- JavaScript: btn.style.setProperty('--bv-button-bg', value)
866
-
867
- Hover is auto-computed from the base colors via color-mix().
868
- Override --bv-button-bg-hover / --bv-button-border-color-hover
869
- if you need explicit control over the hovered state.
870
- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
871
- :host {
872
- /* Default values \u2014 map to global tokens (primary variant) */
873
- --bv-button-bg: var(--bv-color-primary);
874
- --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);
875
- --bv-button-color: var(--bv-color-neutral-0);
876
- --bv-button-border-color: var(--bv-color-primary);
877
- --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);
878
- --bv-button-font-family: var(--bv-font-family-base);
879
- --bv-button-font-size: var(--bv-font-size-sm);
880
-
881
- display: inline-block;
882
- font-family: var(--bv-font-family-base);
883
- }
884
-
885
- :host([hidden]) {
886
- display: none;
887
- }
888
-
889
- :host([full-width]) {
890
- display: block;
891
- width: 100%;
892
- }
893
-
894
- /* \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
895
- Each variant re-points the component tokens to different global
896
- tokens. Apps can still override with inline styles \u2014 inline style
897
- always wins due to higher specificity.
898
- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
899
-
900
- :host([variant='secondary']) {
901
- --bv-button-bg: var(--bv-color-secondary);
902
- --bv-button-border-color: var(--bv-color-secondary);
903
- --bv-button-color: var(--bv-color-secondary-foreground);
904
- }
905
-
906
- :host([variant='tertiary']) {
907
- --bv-button-bg: var(--bv-color-tertiary);
908
- --bv-button-border-color: var(--bv-color-tertiary);
909
- }
910
-
911
- :host([variant='danger']) {
912
- --bv-button-bg: var(--bv-color-danger);
913
- --bv-button-border-color: var(--bv-color-danger);
914
- }
915
-
916
- :host([variant='ghost']) {
917
- --bv-button-bg: transparent;
918
- --bv-button-bg-hover: var(--bv-color-primary-light);
919
- --bv-button-color: var(--bv-color-primary);
920
- --bv-button-border-color: transparent;
921
- --bv-button-border-color-hover: transparent;
922
- }
923
-
924
- :host([variant='outline']) {
925
- --bv-button-bg: transparent;
926
- --bv-button-bg-hover: var(--bv-color-primary-light);
927
- --bv-button-color: var(--bv-color-primary);
928
- --bv-button-border-color: var(--bv-color-primary);
929
- --bv-button-border-color-hover: var(--bv-color-primary);
930
- }
931
-
932
- /* \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
933
- All visual properties read from the component-level tokens above.
934
- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
935
-
936
- .btn {
937
- display: inline-flex;
938
- align-items: center;
939
- justify-content: center;
940
- gap: var(--bv-spacing-xs);
941
- padding: 10px var(--bv-spacing-md);
942
- min-height: 40px;
943
- width: auto;
944
- font-family: var(--bv-button-font-family);
945
- font-size: var(--bv-button-font-size);
946
- font-style: normal;
947
- font-weight: var(--bv-font-weight-semibold);
948
- line-height: 20px;
949
- border: 1px solid var(--bv-button-border-color);
950
- border-radius: var(--bv-radius-lg);
951
- cursor: pointer;
952
- transition:
953
- background var(--bv-transition-fast),
954
- color var(--bv-transition-fast),
955
- border-color var(--bv-transition-fast),
956
- box-shadow var(--bv-transition-fast),
957
- opacity var(--bv-transition-fast);
958
- white-space: nowrap;
959
- user-select: none;
960
- text-decoration: none;
961
- outline: none;
962
- box-sizing: border-box;
963
- background: var(--bv-button-bg);
964
- color: var(--bv-button-color);
965
- box-shadow: var(--bv-shadow-sm);
966
- }
967
-
968
- :host([full-width]) .btn {
969
- width: 100%;
970
- }
971
-
972
- .btn:hover:not(:disabled) {
973
- background: var(--bv-button-bg-hover);
974
- border-color: var(--bv-button-border-color-hover);
975
- }
976
-
977
- .btn:active:not(:disabled) {
978
- transform: translateY(1px);
979
- }
980
-
981
- .btn:focus-visible {
982
- outline: 2px solid var(--bv-button-border-color);
983
- outline-offset: 2px;
984
- }
985
-
986
- .btn:disabled {
987
- opacity: 0.5;
988
- cursor: not-allowed;
989
- pointer-events: none;
990
- }
991
-
992
- /* \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*/
993
-
994
- :host([size='sm']) .btn {
995
- padding: 6px 12px;
996
- min-height: 32px;
997
- font-size: var(--bv-font-size-sm);
998
- }
999
-
1000
- :host([size='lg']) .btn {
1001
- padding: 12px var(--bv-spacing-lg);
1002
- min-height: 48px;
1003
- font-size: var(--bv-font-size-md);
1004
- }
1005
-
1006
- /* \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*/
1007
-
1008
- .btn-icon {
1009
- display: inline-flex;
1010
- align-items: center;
1011
- flex-shrink: 0;
1012
- line-height: 0;
1013
- }
1014
-
1015
- /* \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*/
1016
-
1017
- .btn-count {
1018
- opacity: 0.8;
1019
- font-weight: var(--bv-font-weight-regular);
1020
- }
1021
-
1022
- /* \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*/
1023
-
1024
- .spinner {
1025
- display: inline-block;
1026
- width: 1em;
1027
- height: 1em;
1028
- border: 2px solid currentColor;
1029
- border-top-color: transparent;
1030
- border-radius: 50%;
1031
- flex-shrink: 0;
1032
- animation: bv-spin 700ms linear infinite;
1033
- }
1034
-
1035
- @keyframes bv-spin {
1036
- to {
1037
- transform: rotate(360deg);
1038
- }
1039
- }
1040
- `;
860
+ 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\n Apps can override these three properties per-instance:\n\n HTML: <bv-button style=\"--bv-button-bg: #e53e3e;\">\n Angular: <bv-button [style.--bv-button-bg]=\"brandColor\">\n JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n Hover is auto-computed from the base colors via color-mix().\n Override --bv-button-bg-hover / --bv-button-border-color-hover\n if you need explicit control over the hovered state.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n /* Default values \u2014 map to global tokens (primary variant) */\n --bv-button-bg: var(--bv-color-primary);\n --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n --bv-button-color: var(--bv-color-neutral-0);\n --bv-button-border-color: var(--bv-color-primary);\n --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n --bv-button-font-family: var(--bv-font-family-base);\n --bv-button-font-size: var(--bv-font-size-sm);\n\n display: inline-block;\n font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n display: none !important;\n}\n\n:host([full-width]) {\n display: block;\n width: 100%;\n}\n\n/* \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\n Each variant re-points the component tokens to different global\n tokens. Apps can still override with inline styles \u2014 inline style\n always wins due to higher specificity.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host([variant='secondary']) {\n --bv-button-bg: var(--bv-color-secondary);\n --bv-button-border-color: var(--bv-color-secondary);\n --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n --bv-button-bg: var(--bv-color-tertiary);\n --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n --bv-button-bg: var(--bv-color-danger);\n --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n --bv-button-bg: transparent;\n --bv-button-bg-hover: var(--bv-color-primary-light);\n --bv-button-color: var(--bv-color-primary);\n --bv-button-border-color: transparent;\n --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n --bv-button-bg: transparent;\n --bv-button-bg-hover: var(--bv-color-primary-light);\n --bv-button-color: var(--bv-color-primary);\n --bv-button-border-color: var(--bv-color-primary);\n --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n/* \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\n All visual properties read from the component-level tokens above.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bv-spacing-xs);\n padding: 10px var(--bv-spacing-md);\n min-height: 40px;\n width: auto;\n font-family: var(--bv-button-font-family);\n font-size: var(--bv-button-font-size);\n font-style: normal;\n font-weight: var(--bv-font-weight-semibold);\n line-height: 20px;\n border: 1px solid var(--bv-button-border-color);\n border-radius: var(--bv-radius-lg);\n cursor: pointer;\n transition:\n background var(--bv-transition-fast),\n color var(--bv-transition-fast),\n border-color var(--bv-transition-fast),\n box-shadow var(--bv-transition-fast),\n opacity var(--bv-transition-fast);\n white-space: nowrap;\n user-select: none;\n text-decoration: none;\n outline: none;\n box-sizing: border-box;\n background: var(--bv-button-bg);\n color: var(--bv-button-color);\n box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n background: var(--bv-button-bg-hover);\n border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n transform: translateY(1px);\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--bv-button-border-color);\n outline-offset: 2px;\n}\n\n.btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* \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*/\n\n:host([size='sm']) .btn {\n padding: 6px 12px;\n min-height: 32px;\n font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n padding: 12px var(--bv-spacing-lg);\n min-height: 48px;\n font-size: var(--bv-font-size-md);\n}\n\n/* \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*/\n\n.btn-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n}\n\n/* \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*/\n\n.btn-count {\n opacity: 0.8;\n font-weight: var(--bv-font-weight-regular);\n}\n\n/* \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*/\n\n.spinner {\n display: inline-block;\n width: 1em;\n height: 1em;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n flex-shrink: 0;\n animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n to {\n transform: rotate(360deg);\n }\n}\n";
1041
861
 
1042
862
  // components/bv-icon/icons.ts
1043
863
  var icons = {
@@ -1221,7 +1041,7 @@ var BvButton = class extends HTMLElement {
1221
1041
  }
1222
1042
  btn.querySelectorAll(".btn-icon").forEach((el) => el.remove());
1223
1043
  const iconName = this.getAttribute("icon");
1224
- if (iconName) {
1044
+ if (iconName && !this.loading) {
1225
1045
  const svg = getIconSvg(iconName, 16);
1226
1046
  if (svg) {
1227
1047
  const iconEl = document.createElement("span");
package/dist/components/bv-course-grid-card/bv-course-grid-card.d.ts CHANGED
@@ -3,10 +3,22 @@ export declare class BvCourseGridCard extends HTMLElement {
3
3
  static readonly observedAttributes: string[];
4
4
  get selected(): boolean;
5
5
  set selected(v: boolean);
6
+ get disableSelection(): boolean;
7
+ set disableSelection(v: boolean);
8
+ get hideSecondary(): boolean;
9
+ set hideSecondary(v: boolean);
10
+ get primaryLoading(): boolean;
11
+ set primaryLoading(v: boolean);
12
+ get primaryDisabled(): boolean;
13
+ set primaryDisabled(v: boolean);
14
+ get loading(): boolean;
15
+ set loading(v: boolean);
6
16
  private _rendered;
7
17
  private _els;
8
18
  constructor();
9
19
  connectedCallback(): void;
10
20
  attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
11
21
  private _render;
22
+ private _syncSecondaryLabel;
23
+ private _syncLoading;
12
24
  }