@kodaris/krubble-components 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +174 -66
- package/dist/button/button.d.ts +34 -3
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +193 -38
- package/dist/button/button.js.map +1 -1
- package/dist/krubble.bundled.js +244 -49
- package/dist/krubble.bundled.js.map +1 -1
- package/dist/krubble.bundled.min.js +165 -78
- package/dist/krubble.bundled.min.js.map +1 -1
- package/dist/krubble.umd.js +244 -49
- package/dist/krubble.umd.js.map +1 -1
- package/dist/krubble.umd.min.js +166 -79
- package/dist/krubble.umd.min.js.map +1 -1
- package/dist/snackbar/snackbar.d.ts +16 -6
- package/dist/snackbar/snackbar.d.ts.map +1 -1
- package/dist/snackbar/snackbar.js +52 -12
- package/dist/snackbar/snackbar.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
export interface KRSnackbarOptions {
|
|
3
|
+
/** The message to display */
|
|
4
|
+
message: string;
|
|
5
|
+
/** Optional title for the snackbar */
|
|
6
|
+
title?: string;
|
|
3
7
|
/** The type/severity of the snackbar */
|
|
4
8
|
type?: 'info' | 'success' | 'warning' | 'error';
|
|
5
9
|
/** Duration in milliseconds before auto-dismiss. Set to 0 to disable auto-dismiss. */
|
|
@@ -16,10 +20,13 @@ export interface KRSnackbarOptions {
|
|
|
16
20
|
* @example
|
|
17
21
|
* ```ts
|
|
18
22
|
* // Show a success message
|
|
19
|
-
* KRSnackbar.show('Item saved successfully',
|
|
23
|
+
* KRSnackbar.show({ message: 'Item saved successfully', type: 'success' });
|
|
24
|
+
*
|
|
25
|
+
* // Show a message with title
|
|
26
|
+
* KRSnackbar.show({ title: 'Upload Complete', message: 'Your file has been uploaded.', type: 'success' });
|
|
20
27
|
*
|
|
21
28
|
* // Show an error that stays until manually dismissed
|
|
22
|
-
* KRSnackbar.show('Failed to save',
|
|
29
|
+
* KRSnackbar.show({ message: 'Failed to save', type: 'error', duration: 0 });
|
|
23
30
|
* ```
|
|
24
31
|
*/
|
|
25
32
|
export declare class KRSnackbar extends LitElement {
|
|
@@ -27,17 +34,20 @@ export declare class KRSnackbar extends LitElement {
|
|
|
27
34
|
/** Track active snackbars for stacking */
|
|
28
35
|
private static activeSnackbars;
|
|
29
36
|
/**
|
|
30
|
-
* Show a snackbar with the given
|
|
31
|
-
* @param
|
|
32
|
-
* @param options - Optional configuration for type and duration
|
|
37
|
+
* Show a snackbar with the given options.
|
|
38
|
+
* @param options - Configuration including message, optional title, type, and duration
|
|
33
39
|
* @returns The created snackbar element
|
|
34
40
|
*/
|
|
35
|
-
static show(
|
|
41
|
+
static show(options: KRSnackbarOptions): KRSnackbar;
|
|
36
42
|
private dismissTimeout;
|
|
37
43
|
/**
|
|
38
44
|
* The snackbar type/severity. Controls the color scheme and icon.
|
|
39
45
|
*/
|
|
40
46
|
type: 'info' | 'success' | 'warning' | 'error';
|
|
47
|
+
/**
|
|
48
|
+
* Optional title to display above the message.
|
|
49
|
+
*/
|
|
50
|
+
title: string;
|
|
41
51
|
/**
|
|
42
52
|
* The message to display in the snackbar.
|
|
43
53
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED
|
|
1
|
+
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAgB,MAAM,0BAmJpB;IAEF,0CAA0C;IAC1C,OAAO,CAAC,MAAM,CAAC,eAAe,CAAoB;IAElD;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU;IAkBnD,OAAO,CAAC,cAAc,CAAuB;IAE7C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAU;IAExD;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,SAAM;IAEb;;;OAGG;IAEH,QAAQ,SAAQ;IAEP,iBAAiB;IAsBjB,oBAAoB;IAkB7B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,OAAO;IAaN,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
|
@@ -18,10 +18,13 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
18
18
|
* @example
|
|
19
19
|
* ```ts
|
|
20
20
|
* // Show a success message
|
|
21
|
-
* KRSnackbar.show('Item saved successfully',
|
|
21
|
+
* KRSnackbar.show({ message: 'Item saved successfully', type: 'success' });
|
|
22
|
+
*
|
|
23
|
+
* // Show a message with title
|
|
24
|
+
* KRSnackbar.show({ title: 'Upload Complete', message: 'Your file has been uploaded.', type: 'success' });
|
|
22
25
|
*
|
|
23
26
|
* // Show an error that stays until manually dismissed
|
|
24
|
-
* KRSnackbar.show('Failed to save',
|
|
27
|
+
* KRSnackbar.show({ message: 'Failed to save', type: 'error', duration: 0 });
|
|
25
28
|
* ```
|
|
26
29
|
*/
|
|
27
30
|
let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends LitElement {
|
|
@@ -32,6 +35,10 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends LitElement {
|
|
|
32
35
|
* The snackbar type/severity. Controls the color scheme and icon.
|
|
33
36
|
*/
|
|
34
37
|
this.type = 'info';
|
|
38
|
+
/**
|
|
39
|
+
* Optional title to display above the message.
|
|
40
|
+
*/
|
|
41
|
+
this.title = '';
|
|
35
42
|
/**
|
|
36
43
|
* The message to display in the snackbar.
|
|
37
44
|
*/
|
|
@@ -43,16 +50,24 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends LitElement {
|
|
|
43
50
|
this.duration = 5000;
|
|
44
51
|
}
|
|
45
52
|
/**
|
|
46
|
-
* Show a snackbar with the given
|
|
47
|
-
* @param
|
|
48
|
-
* @param options - Optional configuration for type and duration
|
|
53
|
+
* Show a snackbar with the given options.
|
|
54
|
+
* @param options - Configuration including message, optional title, type, and duration
|
|
49
55
|
* @returns The created snackbar element
|
|
50
56
|
*/
|
|
51
|
-
static show(
|
|
57
|
+
static show(options) {
|
|
52
58
|
const snackbar = document.createElement('kr-snackbar');
|
|
53
|
-
snackbar.message = message;
|
|
54
|
-
snackbar.
|
|
55
|
-
snackbar.
|
|
59
|
+
snackbar.message = options.message;
|
|
60
|
+
snackbar.title = options.title ?? '';
|
|
61
|
+
snackbar.type = options.type ?? 'info';
|
|
62
|
+
if (options.duration !== undefined) {
|
|
63
|
+
snackbar.duration = options.duration;
|
|
64
|
+
}
|
|
65
|
+
else if (snackbar.type === 'error') {
|
|
66
|
+
snackbar.duration = 0;
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
snackbar.duration = 5000;
|
|
70
|
+
}
|
|
56
71
|
document.body.appendChild(snackbar);
|
|
57
72
|
return snackbar;
|
|
58
73
|
}
|
|
@@ -61,6 +76,9 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends LitElement {
|
|
|
61
76
|
// Set role and type class on host
|
|
62
77
|
this.setAttribute('role', 'alert');
|
|
63
78
|
this.classList.add(`kr-snackbar--${this.type}`);
|
|
79
|
+
if (this.title) {
|
|
80
|
+
this.classList.add('kr-snackbar--has-title');
|
|
81
|
+
}
|
|
64
82
|
// Add to active snackbars and update positions
|
|
65
83
|
KRSnackbar_1.activeSnackbars.push(this);
|
|
66
84
|
this.updatePositions();
|
|
@@ -86,7 +104,7 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends LitElement {
|
|
|
86
104
|
}
|
|
87
105
|
}
|
|
88
106
|
updatePositions() {
|
|
89
|
-
let bottomOffset =
|
|
107
|
+
let bottomOffset = 24;
|
|
90
108
|
for (const snackbar of KRSnackbar_1.activeSnackbars) {
|
|
91
109
|
snackbar.style.bottom = `${bottomOffset}px`;
|
|
92
110
|
bottomOffset += snackbar.offsetHeight + 8;
|
|
@@ -112,7 +130,10 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends LitElement {
|
|
|
112
130
|
};
|
|
113
131
|
return html `
|
|
114
132
|
${icons[this.type]}
|
|
115
|
-
<div class="
|
|
133
|
+
<div class="content">
|
|
134
|
+
${this.title ? html `<div class="title">${this.title}</div>` : ''}
|
|
135
|
+
<div class="message">${this.message}</div>
|
|
136
|
+
</div>
|
|
116
137
|
<button
|
|
117
138
|
class="dismiss"
|
|
118
139
|
type="button"
|
|
@@ -152,6 +173,10 @@ KRSnackbar.styles = css `
|
|
|
152
173
|
animation: slideIn 0.2s ease-out;
|
|
153
174
|
}
|
|
154
175
|
|
|
176
|
+
:host(.kr-snackbar--has-title) {
|
|
177
|
+
align-items: flex-start;
|
|
178
|
+
}
|
|
179
|
+
|
|
155
180
|
@keyframes slideIn {
|
|
156
181
|
from {
|
|
157
182
|
opacity: 0;
|
|
@@ -223,10 +248,22 @@ KRSnackbar.styles = css `
|
|
|
223
248
|
flex-shrink: 0;
|
|
224
249
|
width: 20px;
|
|
225
250
|
height: 20px;
|
|
251
|
+
margin-top: 1px;
|
|
226
252
|
}
|
|
227
253
|
|
|
228
|
-
.
|
|
254
|
+
.content {
|
|
229
255
|
flex: 1;
|
|
256
|
+
min-width: 0;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.title {
|
|
260
|
+
font-size: 14px;
|
|
261
|
+
font-weight: 600;
|
|
262
|
+
color: #000000;
|
|
263
|
+
margin: 0 0 2px 0;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.message {
|
|
230
267
|
font-size: 14px;
|
|
231
268
|
color: #000000;
|
|
232
269
|
margin: 0;
|
|
@@ -263,6 +300,9 @@ KRSnackbar.activeSnackbars = [];
|
|
|
263
300
|
__decorate([
|
|
264
301
|
property({ type: String })
|
|
265
302
|
], KRSnackbar.prototype, "type", void 0);
|
|
303
|
+
__decorate([
|
|
304
|
+
property({ type: String })
|
|
305
|
+
], KRSnackbar.prototype, "title", void 0);
|
|
266
306
|
__decorate([
|
|
267
307
|
property({ type: String })
|
|
268
308
|
], KRSnackbar.prototype, "message", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAa5D;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,UAAU,kBAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAiLG,mBAAc,GAAkB,IAAI,CAAC;QAE7C;;WAEG;QAEH,SAAI,GAA6C,MAAM,CAAC;QAExD;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;QAEX;;WAEG;QAEH,YAAO,GAAG,EAAE,CAAC;QAEb;;;WAGG;QAEH,aAAQ,GAAG,IAAI,CAAC;IAyFlB,CAAC;IAzIC;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,OAA0B;QACpC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAe,CAAC;QACrE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QACnC,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;QACrC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC;QAEvC,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YACnC,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACvC,CAAC;aAAM,IAAI,QAAQ,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACrC,QAAQ,CAAC,QAAQ,GAAG,CAAC,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACpC,OAAO,QAAQ,CAAC;IAClB,CAAC;IA6BQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,kCAAkC;QAClC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QAC/C,CAAC;QAED,+CAA+C;QAC/C,YAAU,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,sBAAsB;QACtB,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;YACtB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpB,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,+BAA+B;QAC/B,MAAM,KAAK,GAAG,YAAU,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;YACf,YAAU,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9C,CAAC;QAED,0CAA0C;QAC1C,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,gBAAgB;QAChB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,YAAY,GAAG,EAAE,CAAC;QACtB,KAAK,MAAM,QAAQ,IAAI,YAAU,CAAC,eAAe,EAAE,CAAC;YAClD,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,YAAY,IAAI,CAAC;YAC5C,YAAY,IAAI,QAAQ,CAAC,YAAY,GAAG,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAClF,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,IAAI,CAAA,sPAAsP;YAChQ,OAAO,EAAE,IAAI,CAAA,2PAA2P;YACxQ,OAAO,EAAE,IAAI,CAAA,uUAAuU;YACpV,KAAK,EAAE,IAAI,CAAA,6UAA6U;SACzV,CAAC;QAEF,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;UAEd,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE;+BACzC,IAAI,CAAC,OAAO;;;;;;iBAM1B,IAAI,CAAC,OAAO;;;;;;KAMxB,CAAC;IACJ,CAAC;;AAhSe,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmJ3B,AAnJqB,CAmJpB;AAEF,0CAA0C;AAC3B,0BAAe,GAAiB,EAAE,AAAnB,CAAoB;AA+BlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAC6B;AAMxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAMX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACd;AAOb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACX;AA1ML,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAmStB"}
|