@kodaris/krubble-components 1.0.3 → 1.0.4
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 +55 -44
- package/dist/krubble.bundled.js +46 -13
- package/dist/krubble.bundled.js.map +1 -1
- package/dist/krubble.bundled.min.js +65 -50
- package/dist/krubble.bundled.min.js.map +1 -1
- package/dist/krubble.umd.js +46 -13
- package/dist/krubble.umd.js.map +1 -1
- package/dist/krubble.umd.min.js +20 -5
- 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 +46 -13
- package/dist/snackbar/snackbar.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -358,49 +358,49 @@
|
|
|
358
358
|
"declarations": [
|
|
359
359
|
{
|
|
360
360
|
"kind": "variable",
|
|
361
|
-
"name": "
|
|
361
|
+
"name": "t",
|
|
362
362
|
"default": "globalThis"
|
|
363
363
|
},
|
|
364
364
|
{
|
|
365
365
|
"kind": "variable",
|
|
366
|
-
"name": "
|
|
366
|
+
"name": "e"
|
|
367
367
|
},
|
|
368
368
|
{
|
|
369
369
|
"kind": "variable",
|
|
370
|
-
"name": "
|
|
371
|
-
"default": "class extends
|
|
370
|
+
"name": "ft",
|
|
371
|
+
"default": "class extends nt{constructor(){super(...arguments),this.header=\"\",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return V` <div class=\"header\" @click=${this.toggle}> <span class=\"header__title\">${this.header}</span> <svg class=\"header__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 9l6 6 6-6\"/> </svg> </div> <div class=\"content\"> <div class=\"content__inner\"> <div class=\"content__body\"> <slot></slot> </div> </div> </div> `}}"
|
|
372
372
|
},
|
|
373
373
|
{
|
|
374
374
|
"kind": "variable",
|
|
375
|
-
"name": "
|
|
376
|
-
"default": "class extends
|
|
375
|
+
"name": "kt",
|
|
376
|
+
"default": "class extends nt{constructor(){super(...arguments),this.type=\"info\",this.dismissible=!1,this.visible=!0}_handleDismiss(){this.visible=!1,this.dispatchEvent(new CustomEvent(\"dismiss\",{bubbles:!0,composed:!0}))}render(){const t={info:V`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/></svg>`,success:V`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/></svg>`,warning:V`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/></svg>`,error:V`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/></svg>`};return V` <div class=${$t({alert:!0,[\"alert--\"+this.type]:!0,\"alert--hidden\":!this.visible})} role=\"alert\" > ${t[this.type]} <div class=\"content\"> ${this.header?V`<h4 class=\"header\">${this.header}</h4>`:q} <div class=\"message\"> <slot></slot> </div> </div> ${this.dismissible?V` <button class=\"dismiss\" type=\"button\" aria-label=\"Dismiss alert\" @click=${this._handleDismiss} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"> <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/> </svg> </button> `:q} </div> `}}"
|
|
377
377
|
},
|
|
378
378
|
{
|
|
379
379
|
"kind": "variable",
|
|
380
|
-
"name": "
|
|
381
|
-
"default": "class extends
|
|
380
|
+
"name": "At",
|
|
381
|
+
"default": "class extends nt{constructor(){super(...arguments),this.variant=\"primary\",this.size=\"medium\",this.disabled=!1}render(){const t=\"medium\"!==this.size?this.size:\"\";return V` <button part=\"button\" class=\"${this.variant} ${t}\" ?disabled=${this.disabled} > <slot></slot> </button> `}}"
|
|
382
382
|
},
|
|
383
383
|
{
|
|
384
384
|
"kind": "variable",
|
|
385
|
-
"name": "
|
|
386
|
-
"default": "class extends
|
|
385
|
+
"name": "Pt",
|
|
386
|
+
"default": "class extends nt{constructor(){super(...arguments),this.language=\"html\",this.code=\"\",this.activeTab=\"preview\",this.copied=!1}setTab(t){this.activeTab=t}getHighlightedCode(){return this.code?window.Prism&&window.Prism.languages[this.language]?window.Prism.highlight(this.code,window.Prism.languages[this.language],this.language):this.escapeHtml(this.code):\"\"}escapeHtml(t){const e=document.createElement(\"div\");return e.textContent=t,e.innerHTML}async copyCode(){if(this.code)try{await navigator.clipboard.writeText(this.code),this.copied=!0,setTimeout(()=>{this.copied=!1},2e3)}catch(t){console.error(\"Failed to copy code:\",t)}}render(){return V` <div class=\"tabs\"> <button class=${$t({tab:!0,\"tab--active\":\"preview\"===this.activeTab})} @click=${()=>this.setTab(\"preview\")} > Preview </button> <button class=${$t({tab:!0,\"tab--active\":\"code\"===this.activeTab})} @click=${()=>this.setTab(\"code\")} > Code </button> </div> <div class=${$t({panel:!0,\"panel--active\":\"preview\"===this.activeTab,preview:!0})}> <slot name=\"preview\"></slot> </div> <div class=${$t({panel:!0,\"panel--active\":\"code\"===this.activeTab,\"code-container\":!0})}> <button class=${$t({\"copy-btn\":!0,\"copy-btn--copied\":this.copied})} @click=${this.copyCode} > ${this.copied?\"Copied!\":\"Copy\"} </button> <pre class=\"code\"><code>${St(this.getHighlightedCode())}</code></pre> </div> `}}"
|
|
387
387
|
},
|
|
388
388
|
{
|
|
389
389
|
"kind": "variable",
|
|
390
|
-
"name": "
|
|
391
|
-
"default": "class extends
|
|
390
|
+
"name": "Mt",
|
|
391
|
+
"default": "class extends nt{constructor(){super(...arguments),this.items=[],this.resolvePromise=null,this.boundHandleOutsideClick=this.handleOutsideClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static async open(t){const e=document.querySelector(\"kr-context-menu\");e&&e.remove();const i=document.createElement(\"kr-context-menu\");return document.body.appendChild(i),i.show(t)}async show(t){this.items=t.items,this.style.left=`${t.x}px`,this.style.top=`${t.y}px`,await this.updateComplete;const e=this.getBoundingClientRect();return e.right>window.innerWidth&&(this.style.left=t.x-e.width+\"px\"),e.bottom>window.innerHeight&&(this.style.top=t.y-e.height+\"px\"),requestAnimationFrame(()=>{document.addEventListener(\"click\",this.boundHandleOutsideClick),document.addEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.addEventListener(\"keydown\",this.boundHandleKeyDown)}),new Promise(t=>{this.resolvePromise=t})}handleOutsideClick(t){this.contains(t.target)||this.close(null)}handleKeyDown(t){\"Escape\"===t.key&&this.close(null)}handleItemClick(t){t.disabled||t.divider||this.close(t)}close(t){document.removeEventListener(\"click\",this.boundHandleOutsideClick),document.removeEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.removeEventListener(\"keydown\",this.boundHandleKeyDown),this.resolvePromise&&(this.resolvePromise(t),this.resolvePromise=null),this.remove()}render(){return V` <div class=\"menu\"> ${this.items.map(t=>t.divider?V`<div class=\"menu__divider\"></div>`:V` <button class=\"menu__item\" ?disabled=${t.disabled} @click=${()=>this.handleItemClick(t)} > ${t.icon?V`<span class=\"menu__item-icon\">${t.icon}</span>`:null} ${t.label} </button> `)} </div> `}}"
|
|
392
392
|
},
|
|
393
393
|
{
|
|
394
394
|
"kind": "class",
|
|
395
395
|
"description": "",
|
|
396
|
-
"name": "
|
|
396
|
+
"name": "Tt",
|
|
397
397
|
"members": [
|
|
398
398
|
{
|
|
399
399
|
"kind": "method",
|
|
400
400
|
"name": "setDialogElement",
|
|
401
401
|
"parameters": [
|
|
402
402
|
{
|
|
403
|
-
"name": "
|
|
403
|
+
"name": "t"
|
|
404
404
|
}
|
|
405
405
|
]
|
|
406
406
|
},
|
|
@@ -409,7 +409,7 @@
|
|
|
409
409
|
"name": "close",
|
|
410
410
|
"parameters": [
|
|
411
411
|
{
|
|
412
|
-
"name": "
|
|
412
|
+
"name": "t"
|
|
413
413
|
}
|
|
414
414
|
]
|
|
415
415
|
},
|
|
@@ -436,39 +436,39 @@
|
|
|
436
436
|
{
|
|
437
437
|
"kind": "field",
|
|
438
438
|
"name": "promise",
|
|
439
|
-
"default": "new Promise(
|
|
439
|
+
"default": "new Promise(t=>{this.resolvePromise=t})"
|
|
440
440
|
}
|
|
441
441
|
]
|
|
442
442
|
},
|
|
443
443
|
{
|
|
444
444
|
"kind": "variable",
|
|
445
|
-
"name": "
|
|
446
|
-
"default": "class extends
|
|
445
|
+
"name": "zt",
|
|
446
|
+
"default": "class extends nt{constructor(){super(...arguments),this.contentElement=null,this.dialogRef=null,this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static open(t,e){const i=document.querySelector(\"kr-dialog\");i&&i.remove();const o=new Tt,s=document.createElement(\"kr-dialog\");o.setDialogElement(s),s.dialogRef=o;const r=new t;return r.dialogRef=o,e?.data&&(r.data=e.data),s.contentElement=r,document.body.appendChild(s),document.addEventListener(\"keydown\",s.boundHandleKeyDown),o}handleKeyDown(t){\"Escape\"===t.key&&this.dialogRef?.close(void 0)}handleBackdropClick(t){t.target.classList.contains(\"backdrop\")&&this.dialogRef?.close(void 0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"keydown\",this.boundHandleKeyDown)}render(){return V` <div class=\"backdrop\" @click=${this.handleBackdropClick}></div> <div class=\"dialog\"> ${this.contentElement} </div> `}}"
|
|
447
447
|
},
|
|
448
448
|
{
|
|
449
449
|
"kind": "variable",
|
|
450
|
-
"name": "
|
|
450
|
+
"name": "Lt"
|
|
451
451
|
},
|
|
452
452
|
{
|
|
453
453
|
"kind": "variable",
|
|
454
|
-
"name": "
|
|
455
|
-
"default": "class extends
|
|
454
|
+
"name": "Bt",
|
|
455
|
+
"default": "class extends nt{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"\",this.type=\"text\",this.required=!1,this.disabled=!1,this.readonly=!1,this.autocomplete=\"\",this.hint=\"\",this._touched=!1,this._dirty=!1,this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._dirty=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(t){this.value=t}_handleInput(t){this.value=t.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}_handleChange(t){this.value=t.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}render(){let t=\"\";return this._touched&&this._input&&!this._input.validity.valid&&(t=this._input.validationMessage),V` <div class=\"wrapper\"> ${this.label?V` <label for=\"input\"> ${this.label} ${this.required?V`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:\"\"} <input id=\"input\" type=${this.type} name=${this.name} .value=${Dt(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} minlength=${this.minlength??\"\"} maxlength=${this.maxlength??\"\"} pattern=${this.pattern??\"\"} autocomplete=${this.autocomplete} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} /> ${t?V`<div class=\"validation-message\">${t}</div>`:this.hint?V`<div class=\"hint\">${this.hint}</div>`:\"\"} </div> `}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}}"
|
|
456
456
|
}
|
|
457
457
|
],
|
|
458
458
|
"exports": [
|
|
459
459
|
{
|
|
460
460
|
"kind": "custom-element-definition",
|
|
461
|
-
"name": "
|
|
461
|
+
"name": "t",
|
|
462
462
|
"declaration": {
|
|
463
|
-
"name": "
|
|
463
|
+
"name": "e",
|
|
464
464
|
"module": "dist/krubble.bundled.min.js"
|
|
465
465
|
}
|
|
466
466
|
},
|
|
467
467
|
{
|
|
468
468
|
"kind": "custom-element-definition",
|
|
469
|
-
"name": "
|
|
469
|
+
"name": "t",
|
|
470
470
|
"declaration": {
|
|
471
|
-
"name": "
|
|
471
|
+
"name": "e",
|
|
472
472
|
"module": "dist/krubble.bundled.min.js"
|
|
473
473
|
}
|
|
474
474
|
},
|
|
@@ -476,7 +476,7 @@
|
|
|
476
476
|
"kind": "js",
|
|
477
477
|
"name": "DialogRef",
|
|
478
478
|
"declaration": {
|
|
479
|
-
"name": "
|
|
479
|
+
"name": "Tt",
|
|
480
480
|
"module": "dist/krubble.bundled.min.js"
|
|
481
481
|
}
|
|
482
482
|
},
|
|
@@ -484,7 +484,7 @@
|
|
|
484
484
|
"kind": "js",
|
|
485
485
|
"name": "KRAccordion",
|
|
486
486
|
"declaration": {
|
|
487
|
-
"name": "
|
|
487
|
+
"name": "ft",
|
|
488
488
|
"module": "dist/krubble.bundled.min.js"
|
|
489
489
|
}
|
|
490
490
|
},
|
|
@@ -492,7 +492,7 @@
|
|
|
492
492
|
"kind": "js",
|
|
493
493
|
"name": "KRAlert",
|
|
494
494
|
"declaration": {
|
|
495
|
-
"name": "
|
|
495
|
+
"name": "kt",
|
|
496
496
|
"module": "dist/krubble.bundled.min.js"
|
|
497
497
|
}
|
|
498
498
|
},
|
|
@@ -500,7 +500,7 @@
|
|
|
500
500
|
"kind": "js",
|
|
501
501
|
"name": "KRButton",
|
|
502
502
|
"declaration": {
|
|
503
|
-
"name": "
|
|
503
|
+
"name": "At",
|
|
504
504
|
"module": "dist/krubble.bundled.min.js"
|
|
505
505
|
}
|
|
506
506
|
},
|
|
@@ -508,7 +508,7 @@
|
|
|
508
508
|
"kind": "js",
|
|
509
509
|
"name": "KRCodeDemo",
|
|
510
510
|
"declaration": {
|
|
511
|
-
"name": "
|
|
511
|
+
"name": "Pt",
|
|
512
512
|
"module": "dist/krubble.bundled.min.js"
|
|
513
513
|
}
|
|
514
514
|
},
|
|
@@ -516,7 +516,7 @@
|
|
|
516
516
|
"kind": "js",
|
|
517
517
|
"name": "KRContextMenu",
|
|
518
518
|
"declaration": {
|
|
519
|
-
"name": "
|
|
519
|
+
"name": "Mt",
|
|
520
520
|
"module": "dist/krubble.bundled.min.js"
|
|
521
521
|
}
|
|
522
522
|
},
|
|
@@ -524,7 +524,7 @@
|
|
|
524
524
|
"kind": "js",
|
|
525
525
|
"name": "KRDialog",
|
|
526
526
|
"declaration": {
|
|
527
|
-
"name": "
|
|
527
|
+
"name": "zt",
|
|
528
528
|
"module": "dist/krubble.bundled.min.js"
|
|
529
529
|
}
|
|
530
530
|
},
|
|
@@ -532,7 +532,7 @@
|
|
|
532
532
|
"kind": "js",
|
|
533
533
|
"name": "KRSnackbar",
|
|
534
534
|
"declaration": {
|
|
535
|
-
"name": "
|
|
535
|
+
"name": "Lt",
|
|
536
536
|
"module": "dist/krubble.bundled.min.js"
|
|
537
537
|
}
|
|
538
538
|
},
|
|
@@ -540,7 +540,7 @@
|
|
|
540
540
|
"kind": "js",
|
|
541
541
|
"name": "KRTextField",
|
|
542
542
|
"declaration": {
|
|
543
|
-
"name": "
|
|
543
|
+
"name": "Bt",
|
|
544
544
|
"module": "dist/krubble.bundled.min.js"
|
|
545
545
|
}
|
|
546
546
|
}
|
|
@@ -1820,23 +1820,15 @@
|
|
|
1820
1820
|
}
|
|
1821
1821
|
},
|
|
1822
1822
|
"parameters": [
|
|
1823
|
-
{
|
|
1824
|
-
"name": "message",
|
|
1825
|
-
"type": {
|
|
1826
|
-
"text": "string"
|
|
1827
|
-
},
|
|
1828
|
-
"description": "The message to display"
|
|
1829
|
-
},
|
|
1830
1823
|
{
|
|
1831
1824
|
"name": "options",
|
|
1832
|
-
"optional": true,
|
|
1833
1825
|
"type": {
|
|
1834
1826
|
"text": "KRSnackbarOptions"
|
|
1835
1827
|
},
|
|
1836
|
-
"description": "
|
|
1828
|
+
"description": "Configuration including message, optional title, type, and duration"
|
|
1837
1829
|
}
|
|
1838
1830
|
],
|
|
1839
|
-
"description": "Show a snackbar with the given
|
|
1831
|
+
"description": "Show a snackbar with the given options."
|
|
1840
1832
|
},
|
|
1841
1833
|
{
|
|
1842
1834
|
"kind": "field",
|
|
@@ -1857,6 +1849,16 @@
|
|
|
1857
1849
|
"description": "The snackbar type/severity. Controls the color scheme and icon.",
|
|
1858
1850
|
"attribute": "type"
|
|
1859
1851
|
},
|
|
1852
|
+
{
|
|
1853
|
+
"kind": "field",
|
|
1854
|
+
"name": "title",
|
|
1855
|
+
"type": {
|
|
1856
|
+
"text": "string"
|
|
1857
|
+
},
|
|
1858
|
+
"default": "''",
|
|
1859
|
+
"description": "Optional title to display above the message.",
|
|
1860
|
+
"attribute": "title"
|
|
1861
|
+
},
|
|
1860
1862
|
{
|
|
1861
1863
|
"kind": "field",
|
|
1862
1864
|
"name": "message",
|
|
@@ -1907,6 +1909,15 @@
|
|
|
1907
1909
|
"description": "The snackbar type/severity. Controls the color scheme and icon.",
|
|
1908
1910
|
"fieldName": "type"
|
|
1909
1911
|
},
|
|
1912
|
+
{
|
|
1913
|
+
"name": "title",
|
|
1914
|
+
"type": {
|
|
1915
|
+
"text": "string"
|
|
1916
|
+
},
|
|
1917
|
+
"default": "''",
|
|
1918
|
+
"description": "Optional title to display above the message.",
|
|
1919
|
+
"fieldName": "title"
|
|
1920
|
+
},
|
|
1910
1921
|
{
|
|
1911
1922
|
"name": "message",
|
|
1912
1923
|
"type": {
|
package/dist/krubble.bundled.js
CHANGED
|
@@ -1127,10 +1127,13 @@ var KRSnackbar_1;
|
|
|
1127
1127
|
* @example
|
|
1128
1128
|
* ```ts
|
|
1129
1129
|
* // Show a success message
|
|
1130
|
-
* KRSnackbar.show('Item saved successfully',
|
|
1130
|
+
* KRSnackbar.show({ message: 'Item saved successfully', type: 'success' });
|
|
1131
|
+
*
|
|
1132
|
+
* // Show a message with title
|
|
1133
|
+
* KRSnackbar.show({ title: 'Upload Complete', message: 'Your file has been uploaded.', type: 'success' });
|
|
1131
1134
|
*
|
|
1132
1135
|
* // Show an error that stays until manually dismissed
|
|
1133
|
-
* KRSnackbar.show('Failed to save',
|
|
1136
|
+
* KRSnackbar.show({ message: 'Failed to save', type: 'error', duration: 0 });
|
|
1134
1137
|
* ```
|
|
1135
1138
|
*/
|
|
1136
1139
|
let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
|
|
@@ -1141,6 +1144,10 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
|
|
|
1141
1144
|
* The snackbar type/severity. Controls the color scheme and icon.
|
|
1142
1145
|
*/
|
|
1143
1146
|
this.type = 'info';
|
|
1147
|
+
/**
|
|
1148
|
+
* Optional title to display above the message.
|
|
1149
|
+
*/
|
|
1150
|
+
this.title = '';
|
|
1144
1151
|
/**
|
|
1145
1152
|
* The message to display in the snackbar.
|
|
1146
1153
|
*/
|
|
@@ -1152,16 +1159,24 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
|
|
|
1152
1159
|
this.duration = 5000;
|
|
1153
1160
|
}
|
|
1154
1161
|
/**
|
|
1155
|
-
* Show a snackbar with the given
|
|
1156
|
-
* @param
|
|
1157
|
-
* @param options - Optional configuration for type and duration
|
|
1162
|
+
* Show a snackbar with the given options.
|
|
1163
|
+
* @param options - Configuration including message, optional title, type, and duration
|
|
1158
1164
|
* @returns The created snackbar element
|
|
1159
1165
|
*/
|
|
1160
|
-
static show(
|
|
1166
|
+
static show(options) {
|
|
1161
1167
|
const snackbar = document.createElement('kr-snackbar');
|
|
1162
|
-
snackbar.message = message;
|
|
1163
|
-
snackbar.
|
|
1164
|
-
snackbar.
|
|
1168
|
+
snackbar.message = options.message;
|
|
1169
|
+
snackbar.title = options.title ?? '';
|
|
1170
|
+
snackbar.type = options.type ?? 'info';
|
|
1171
|
+
if (options.duration !== undefined) {
|
|
1172
|
+
snackbar.duration = options.duration;
|
|
1173
|
+
}
|
|
1174
|
+
else if (snackbar.type === 'error') {
|
|
1175
|
+
snackbar.duration = 0;
|
|
1176
|
+
}
|
|
1177
|
+
else {
|
|
1178
|
+
snackbar.duration = 5000;
|
|
1179
|
+
}
|
|
1165
1180
|
document.body.appendChild(snackbar);
|
|
1166
1181
|
return snackbar;
|
|
1167
1182
|
}
|
|
@@ -1195,7 +1210,7 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
|
|
|
1195
1210
|
}
|
|
1196
1211
|
}
|
|
1197
1212
|
updatePositions() {
|
|
1198
|
-
let bottomOffset =
|
|
1213
|
+
let bottomOffset = 24;
|
|
1199
1214
|
for (const snackbar of KRSnackbar_1.activeSnackbars) {
|
|
1200
1215
|
snackbar.style.bottom = `${bottomOffset}px`;
|
|
1201
1216
|
bottomOffset += snackbar.offsetHeight + 8;
|
|
@@ -1221,7 +1236,10 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
|
|
|
1221
1236
|
};
|
|
1222
1237
|
return b `
|
|
1223
1238
|
${icons[this.type]}
|
|
1224
|
-
<div class="
|
|
1239
|
+
<div class="content">
|
|
1240
|
+
${this.title ? b `<div class="title">${this.title}</div>` : ''}
|
|
1241
|
+
<div class="message">${this.message}</div>
|
|
1242
|
+
</div>
|
|
1225
1243
|
<button
|
|
1226
1244
|
class="dismiss"
|
|
1227
1245
|
type="button"
|
|
@@ -1248,7 +1266,7 @@ KRSnackbar.styles = i$4 `
|
|
|
1248
1266
|
left: 16px;
|
|
1249
1267
|
z-index: 10000;
|
|
1250
1268
|
display: flex;
|
|
1251
|
-
align-items:
|
|
1269
|
+
align-items: flex-start;
|
|
1252
1270
|
gap: 12px;
|
|
1253
1271
|
padding: 14px 12px 14px 16px;
|
|
1254
1272
|
border-radius: 8px;
|
|
@@ -1332,10 +1350,22 @@ KRSnackbar.styles = i$4 `
|
|
|
1332
1350
|
flex-shrink: 0;
|
|
1333
1351
|
width: 20px;
|
|
1334
1352
|
height: 20px;
|
|
1353
|
+
margin-top: 1px;
|
|
1335
1354
|
}
|
|
1336
1355
|
|
|
1337
|
-
.
|
|
1356
|
+
.content {
|
|
1338
1357
|
flex: 1;
|
|
1358
|
+
min-width: 0;
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
.title {
|
|
1362
|
+
font-size: 14px;
|
|
1363
|
+
font-weight: 600;
|
|
1364
|
+
color: #000000;
|
|
1365
|
+
margin: 0 0 2px 0;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.message {
|
|
1339
1369
|
font-size: 14px;
|
|
1340
1370
|
color: #000000;
|
|
1341
1371
|
margin: 0;
|
|
@@ -1372,6 +1402,9 @@ KRSnackbar.activeSnackbars = [];
|
|
|
1372
1402
|
__decorate$1([
|
|
1373
1403
|
n({ type: String })
|
|
1374
1404
|
], KRSnackbar.prototype, "type", void 0);
|
|
1405
|
+
__decorate$1([
|
|
1406
|
+
n({ type: String })
|
|
1407
|
+
], KRSnackbar.prototype, "title", void 0);
|
|
1375
1408
|
__decorate$1([
|
|
1376
1409
|
n({ type: String })
|
|
1377
1410
|
], KRSnackbar.prototype, "message", void 0);
|