@kodaris/krubble-components 1.0.32 → 1.0.34

package/custom-elements.json

@@ -265,7 +265,7 @@
         {
           "kind": "variable",
           "name": "KRDialog",
-          "default": "class KRDialog extends i$2 { constructor() { super(...arguments); this._dialogRef = null; this._contentElement = null; this.opened = false; this.width = '560px'; this._handleDocumentKeyDown = (e) => { if (e.key === 'Escape') { this.close(); } }; } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('keydown', this._handleDocumentKeyDown); } updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('opened')) { if (this.opened) { document.addEventListener('keydown', this._handleDocumentKeyDown); } else { document.removeEventListener('keydown', this._handleDocumentKeyDown); } } } /** * Opens the dialog (declarative mode). */ open() { this.opened = true; } /** * Closes the dialog. * In programmatic mode (has _dialogRef), delegates to the dialog ref. * In declarative mode, sets opened=false and dispatches close event. */ close() { if (this._dialogRef) { this._dialogRef.close(undefined); return; } this.opened = false; this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); } /** * Opens a dialog programmatically by creating a component and injecting it. */ static open(component, config) { // Only remove other programmatic dialogs (those with a _dialogRef) document.querySelectorAll('kr-dialog').forEach((el) => { if (el._dialogRef) { el.remove(); } }); const dialogRef = new KRDialogRef(); const dialog = document.createElement('kr-dialog'); dialogRef.setDialogElement(dialog); dialog._dialogRef = dialogRef; // Create the content component const content = new component(); content.dialogRef = dialogRef; if (config?.data) { content.data = config.data; } dialog._contentElement = content; dialog.opened = true; document.body.appendChild(dialog); return dialogRef; } _handleBackdropClick(e) { if (e.target.classList.contains('backdrop')) { this.close(); } } render() { return b ` <div class=\"backdrop\" @click=${this._handleBackdropClick}></div> <div class=\"dialog\" style=${o$1({ width: this.width })}> ${this._contentElement ? this._contentElement : b `<slot></slot>`} </div> `; } }",
+          "default": "class KRDialog extends i$2 { constructor() { super(...arguments); this._dialogRef = null; this._contentElement = null; this.opened = false; this.label = ''; this.width = '560px'; this._handleDocumentKeyDown = (e) => { if (e.key === 'Escape') { this.close(); } }; } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('keydown', this._handleDocumentKeyDown); } updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('opened')) { if (this.opened) { document.addEventListener('keydown', this._handleDocumentKeyDown); } else { document.removeEventListener('keydown', this._handleDocumentKeyDown); } } } /** * Opens the dialog (declarative mode). */ open() { this.opened = true; } /** * Closes the dialog. * In programmatic mode (has _dialogRef), delegates to the dialog ref. * In declarative mode, sets opened=false and dispatches close event. */ close() { if (this._dialogRef) { this._dialogRef.close(undefined); return; } this.opened = false; this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); } /** * Opens a dialog programmatically by creating a component and injecting it. */ static open(component, config) { // Only remove other programmatic dialogs (those with a _dialogRef) document.querySelectorAll('kr-dialog').forEach((el) => { if (el._dialogRef) { el.remove(); } }); const dialogRef = new KRDialogRef(); const dialog = document.createElement('kr-dialog'); dialogRef.setDialogElement(dialog); dialog._dialogRef = dialogRef; // Create the content component const content = new component(); content.dialogRef = dialogRef; if (config?.data) { content.data = config.data; } if (config?.label) { dialog.label = config.label; } if (config?.width) { dialog.width = config.width; } dialog._contentElement = content; dialog.opened = true; document.body.appendChild(dialog); return dialogRef; } _handleBackdropClick(e) { if (e.target.classList.contains('backdrop')) { this.close(); } } render() { return b ` <div class=\"backdrop\" @click=${this._handleBackdropClick}></div> <div class=\"dialog\" style=${o$1({ width: this.width })}> ${this.label ? b `<div class=\"dialog__header\"><div class=\"dialog__header-label\">${this.label}</div></div>` : ''} ${this._contentElement ? this._contentElement : b `<slot></slot>`} </div> `; } }",
           "description": "Generic dialog component that supports both declarative and programmatic usage.\n\nDeclarative: place `<kr-dialog>` in HTML with slotted content and call `.open()` / `.close()`.\nProgrammatic: use `KRDialog.open(Component, config)` to create and show a dialog."
         },
         {
@@ -586,7 +586,7 @@
         {
           "kind": "variable",
           "name": "He",
-          "default": "class extends re{constructor(){super(...arguments),this._dialogRef=null,this._contentElement=null,this.opened=!1,this.width=\"560px\",this._handleDocumentKeyDown=e=>{\"Escape\"===e.key&&this.close()}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"keydown\",this._handleDocumentKeyDown)}updated(e){super.updated(e),e.has(\"opened\")&&(this.opened?document.addEventListener(\"keydown\",this._handleDocumentKeyDown):document.removeEventListener(\"keydown\",this._handleDocumentKeyDown))}open(){this.opened=!0}close(){this._dialogRef?this._dialogRef.close(void 0):(this.opened=!1,this.dispatchEvent(new CustomEvent(\"close\",{bubbles:!0,composed:!0})))}static open(e,t){document.querySelectorAll(\"kr-dialog\").forEach((e=>{e._dialogRef&&e.remove()}));const i=new Be,o=document.createElement(\"kr-dialog\");i.setDialogElement(o),o._dialogRef=i;const s=new e;return s.dialogRef=i,t?.data&&(s.data=t.data),o._contentElement=s,o.opened=!0,document.body.appendChild(o),i}_handleBackdropClick(e){e.target.classList.contains(\"backdrop\")&&this.close()}render(){return H` <div class=\"backdrop\" @click=${this._handleBackdropClick}></div> <div class=\"dialog\" style=${je({width:this.width})}> ${this._contentElement?this._contentElement:H`<slot></slot>`} </div> `}}"
+          "default": "class extends re{constructor(){super(...arguments),this._dialogRef=null,this._contentElement=null,this.opened=!1,this.label=\"\",this.width=\"560px\",this._handleDocumentKeyDown=e=>{\"Escape\"===e.key&&this.close()}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"keydown\",this._handleDocumentKeyDown)}updated(e){super.updated(e),e.has(\"opened\")&&(this.opened?document.addEventListener(\"keydown\",this._handleDocumentKeyDown):document.removeEventListener(\"keydown\",this._handleDocumentKeyDown))}open(){this.opened=!0}close(){this._dialogRef?this._dialogRef.close(void 0):(this.opened=!1,this.dispatchEvent(new CustomEvent(\"close\",{bubbles:!0,composed:!0})))}static open(e,t){document.querySelectorAll(\"kr-dialog\").forEach((e=>{e._dialogRef&&e.remove()}));const i=new Be,o=document.createElement(\"kr-dialog\");i.setDialogElement(o),o._dialogRef=i;const s=new e;return s.dialogRef=i,t?.data&&(s.data=t.data),t?.label&&(o.label=t.label),t?.width&&(o.width=t.width),o._contentElement=s,o.opened=!0,document.body.appendChild(o),i}_handleBackdropClick(e){e.target.classList.contains(\"backdrop\")&&this.close()}render(){return H` <div class=\"backdrop\" @click=${this._handleBackdropClick}></div> <div class=\"dialog\" style=${je({width:this.width})}> ${this.label?H`<div class=\"dialog__header\"><div class=\"dialog__header-label\">${this.label}</div></div>`:\"\"} ${this._contentElement?this._contentElement:H`<slot></slot>`} </div> `}}"
         },
         {
           "kind": "variable",
@@ -1282,7 +1282,7 @@
         {
           "kind": "variable",
           "name": "KRDialog",
-          "default": "class KRDialog extends LitElement { constructor() { super(...arguments); this._dialogRef = null; this._contentElement = null; this.opened = false; this.width = '560px'; this._handleDocumentKeyDown = (e) => { if (e.key === 'Escape') { this.close(); } }; } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('keydown', this._handleDocumentKeyDown); } updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('opened')) { if (this.opened) { document.addEventListener('keydown', this._handleDocumentKeyDown); } else { document.removeEventListener('keydown', this._handleDocumentKeyDown); } } } /** * Opens the dialog (declarative mode). */ open() { this.opened = true; } /** * Closes the dialog. * In programmatic mode (has _dialogRef), delegates to the dialog ref. * In declarative mode, sets opened=false and dispatches close event. */ close() { if (this._dialogRef) { this._dialogRef.close(undefined); return; } this.opened = false; this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); } /** * Opens a dialog programmatically by creating a component and injecting it. */ static open(component, config) { // Only remove other programmatic dialogs (those with a _dialogRef) document.querySelectorAll('kr-dialog').forEach((el) => { if (el._dialogRef) { el.remove(); } }); const dialogRef = new KRDialogRef(); const dialog = document.createElement('kr-dialog'); dialogRef.setDialogElement(dialog); dialog._dialogRef = dialogRef; // Create the content component const content = new component(); content.dialogRef = dialogRef; if (config?.data) { content.data = config.data; } dialog._contentElement = content; dialog.opened = true; document.body.appendChild(dialog); return dialogRef; } _handleBackdropClick(e) { if (e.target.classList.contains('backdrop')) { this.close(); } } render() { return html ` <div class=\"backdrop\" @click=${this._handleBackdropClick}></div> <div class=\"dialog\" style=${styleMap({ width: this.width })}> ${this._contentElement ? this._contentElement : html `<slot></slot>`} </div> `; } }",
+          "default": "class KRDialog extends LitElement { constructor() { super(...arguments); this._dialogRef = null; this._contentElement = null; this.opened = false; this.label = ''; this.width = '560px'; this._handleDocumentKeyDown = (e) => { if (e.key === 'Escape') { this.close(); } }; } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('keydown', this._handleDocumentKeyDown); } updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('opened')) { if (this.opened) { document.addEventListener('keydown', this._handleDocumentKeyDown); } else { document.removeEventListener('keydown', this._handleDocumentKeyDown); } } } /** * Opens the dialog (declarative mode). */ open() { this.opened = true; } /** * Closes the dialog. * In programmatic mode (has _dialogRef), delegates to the dialog ref. * In declarative mode, sets opened=false and dispatches close event. */ close() { if (this._dialogRef) { this._dialogRef.close(undefined); return; } this.opened = false; this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); } /** * Opens a dialog programmatically by creating a component and injecting it. */ static open(component, config) { // Only remove other programmatic dialogs (those with a _dialogRef) document.querySelectorAll('kr-dialog').forEach((el) => { if (el._dialogRef) { el.remove(); } }); const dialogRef = new KRDialogRef(); const dialog = document.createElement('kr-dialog'); dialogRef.setDialogElement(dialog); dialog._dialogRef = dialogRef; // Create the content component const content = new component(); content.dialogRef = dialogRef; if (config?.data) { content.data = config.data; } if (config?.label) { dialog.label = config.label; } if (config?.width) { dialog.width = config.width; } dialog._contentElement = content; dialog.opened = true; document.body.appendChild(dialog); return dialogRef; } _handleBackdropClick(e) { if (e.target.classList.contains('backdrop')) { this.close(); } } render() { return html ` <div class=\"backdrop\" @click=${this._handleBackdropClick}></div> <div class=\"dialog\" style=${styleMap({ width: this.width })}> ${this.label ? html `<div class=\"dialog__header\"><div class=\"dialog__header-label\">${this.label}</div></div>` : ''} ${this._contentElement ? this._contentElement : html `<slot></slot>`} </div> `; } }",
           "description": "Generic dialog component that supports both declarative and programmatic usage.\n\nDeclarative: place `<kr-dialog>` in HTML with slotted content and call `.open()` / `.close()`.\nProgrammatic: use `KRDialog.open(Component, config)` to create and show a dialog."
         }
       ],
@@ -2522,6 +2522,15 @@
               "attribute": "opened",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
             {
               "kind": "field",
               "name": "width",
@@ -2604,6 +2613,14 @@
               "default": "false",
               "fieldName": "opened"
             },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
             {
               "name": "width",
               "type": {

package/dist/dialog/dialog.d.ts

@@ -1,6 +1,8 @@
 import { LitElement } from 'lit';
 export interface KRDialogConfig<T = unknown> {
     data?: T;
+    label?: string;
+    width?: string;
 }
 export declare class KRDialogHeader extends LitElement {
     static styles: import("lit").CSSResult;
@@ -58,6 +60,7 @@ export declare class KRDialog extends LitElement {
     private _dialogRef;
     private _contentElement;
     opened: boolean;
+    label: string;
     width: string;
     disconnectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;

package/dist/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAepB;IAEO,MAAM;CAGhB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAOpB;IAEO,MAAM;CAGhB;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAWpB;IAEO,MAAM;CAGhB;AAED;;;;;;GAMG;AACH,qBAAa,WAAW,CAAC,CAAC,GAAG,OAAO;IAClC,OAAO,CAAC,eAAe,CAAiD;IAExE,OAAO,CAAC,QAAQ,CAAyB;IAEzC,OAAO,CAAC,cAAc,CAAyB;;IAQ/C,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,EAAE,QAAQ;IAI7B;;;;OAIG;IACH,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAQhB;;;;OAIG;IACH,WAAW,IAAI,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;CAGtC;AAED;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BA2CpB;IAEF,OAAO,CAAC,UAAU,CAA4B;IAG9C,OAAO,CAAC,eAAe,CAA2B;IAGlD,MAAM,UAAS;IAGf,KAAK,SAAW;IAEP,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWxD;;OAEG;IACH,IAAI;IAIJ;;;;OAIG;IACH,KAAK;IASL;;OAEG;IACH,MAAM,CAAC,IAAI,CACT,SAAS,EAAE,UAAU,UAAU,EAC/B,MAAM,CAAC,EAAE,cAAc,GACtB,WAAW;IA4Bd,OAAO,CAAC,sBAAsB,CAI5B;IAEF,OAAO,CAAC,oBAAoB;IAMnB,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,kBAAkB,EAAE,cAAc,CAAC;QACnC,mBAAmB,EAAE,eAAe,CAAC;QACrC,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAepB;IAEO,MAAM;CAGhB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAOpB;IAEO,MAAM;CAGhB;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAWpB;IAEO,MAAM;CAGhB;AAED;;;;;;GAMG;AACH,qBAAa,WAAW,CAAC,CAAC,GAAG,OAAO;IAClC,OAAO,CAAC,eAAe,CAAiD;IAExE,OAAO,CAAC,QAAQ,CAAyB;IAEzC,OAAO,CAAC,cAAc,CAAyB;;IAQ/C,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,EAAE,QAAQ;IAI7B;;;;OAIG;IACH,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAQhB;;;;OAIG;IACH,WAAW,IAAI,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;CAGtC;AAED;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BA0DpB;IAEF,OAAO,CAAC,UAAU,CAA4B;IAG9C,OAAO,CAAC,eAAe,CAA2B;IAGlD,MAAM,UAAS;IAGf,KAAK,SAAM;IAGX,KAAK,SAAW;IAEP,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWxD;;OAEG;IACH,IAAI;IAIJ;;;;OAIG;IACH,KAAK;IASL;;OAEG;IACH,MAAM,CAAC,IAAI,CACT,SAAS,EAAE,UAAU,UAAU,EAC/B,MAAM,CAAC,EAAE,cAAc,GACtB,WAAW;IAmCd,OAAO,CAAC,sBAAsB,CAI5B;IAEF,OAAO,CAAC,oBAAoB;IAMnB,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,kBAAkB,EAAE,cAAc,CAAC;QACnC,mBAAmB,EAAE,eAAe,CAAC;QACrC,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/dialog/dialog.js

@@ -128,6 +128,7 @@ let KRDialog = class KRDialog extends LitElement {
         this._dialogRef = null;
         this._contentElement = null;
         this.opened = false;
+        this.label = '';
         this.width = '560px';
         this._handleDocumentKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -189,6 +190,12 @@ let KRDialog = class KRDialog extends LitElement {
         if (config?.data) {
             content.data = config.data;
         }
+        if (config?.label) {
+            dialog.label = config.label;
+        }
+        if (config?.width) {
+            dialog.width = config.width;
+        }
         dialog._contentElement = content;
         dialog.opened = true;
         document.body.appendChild(dialog);
@@ -203,6 +210,7 @@ let KRDialog = class KRDialog extends LitElement {
         return html `
       <div class="backdrop" @click=${this._handleBackdropClick}></div>
       <div class="dialog" style=${styleMap({ width: this.width })}>
+        ${this.label ? html `<div class="dialog__header"><div class="dialog__header-label">${this.label}</div></div>` : ''}
         ${this._contentElement ? this._contentElement : html `<slot></slot>`}
       </div>
     `;
@@ -251,6 +259,21 @@ KRDialog.styles = css `
       flex: 1 1 auto;
       overflow: auto;
     }
+
+    .dialog__header {
+      display: flex;
+      padding: 0 24px;
+      align-items: center;
+      height: 64px;
+      flex-shrink: 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .dialog__header-label {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
   `;
 __decorate([
     state()
@@ -258,6 +281,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], KRDialog.prototype, "opened", void 0);
+__decorate([
+    property({ type: String })
+], KRDialog.prototype, "label", void 0);
 __decorate([
     property({ type: String })
 ], KRDialog.prototype, "width", void 0);

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAOhD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAkBnC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAnBe,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;GAe3B,AAfqB,CAepB;AAhBS,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqB1B;;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAUpC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAXe,sBAAM,GAAG,GAAG,CAAA;;;;;;;GAO3B,AAPqB,CAOpB;AARS,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAa3B;;AAGM,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAcnC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAfe,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAW3B,AAXqB,CAWpB;AAZS,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAiB1B;;AAED;;;;;;GAMG;AACH,MAAM,OAAO,WAAW;IAOtB;QANQ,oBAAe,GAA4C,IAAI,CAAC;QAIhE,mBAAc,GAAoB,IAAI,CAAC;QAG7C,IAAI,CAAC,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACtC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IAChB,gBAAgB,CAAC,EAAY;QAC3B,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,MAAU;QACd,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,WAAW;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;CACF;AAED;;;;;;;;;;;GAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA8CG,eAAU,GAAuB,IAAI,CAAC;QAGtC,oBAAe,GAAsB,IAAI,CAAC;QAGlD,WAAM,GAAG,KAAK,CAAC;QAGf,UAAK,GAAG,OAAO,CAAC;QAyER,2BAAsB,GAAG,CAAC,CAAgB,EAAE,EAAE;YACpD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;IAgBJ,CAAC;IA3FU,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IACvE,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;YACpE,CAAC;iBAAM,CAAC;gBACN,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;YACvE,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACH,KAAK;QACH,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClF,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,IAAI,CACT,SAA+B,EAC/B,MAAuB;QAEvB,mEAAmE;QACnE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YACpD,IAAK,EAAe,CAAC,UAAU,EAAE,CAAC;gBAChC,EAAE,CAAC,MAAM,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,IAAI,WAAW,EAAE,CAAC;QACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAa,CAAC;QAE/D,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACnC,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC;QAE9B,+BAA+B;QAC/B,MAAM,OAAO,GAAG,IAAI,SAAS,EAAE,CAAC;QAC/B,OAAe,CAAC,SAAS,GAAG,SAAS,CAAC;QACvC,IAAI,MAAM,EAAE,IAAI,EAAE,CAAC;YAChB,OAAe,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACtC,CAAC;QAED,MAAM,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAElC,OAAO,SAAS,CAAC;IACnB,CAAC;IAQO,oBAAoB,CAAC,CAAQ;QACnC,IAAK,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC7D,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;qCACsB,IAAI,CAAC,oBAAoB;kCAC5B,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;UACvD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;KAEtE,CAAC;IACJ,CAAC;;AAlJe,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2C3B,AA3CqB,CA2CpB;AAKM;IADP,KAAK,EAAE;iDAC0C;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC5B;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACX;AAvDL,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoJpB"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}

package/dist/krubble-components.bundled.js

@@ -1494,6 +1494,7 @@ let KRDialog = class KRDialog extends i$2 {
         this._dialogRef = null;
         this._contentElement = null;
         this.opened = false;
+        this.label = '';
         this.width = '560px';
         this._handleDocumentKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -1555,6 +1556,12 @@ let KRDialog = class KRDialog extends i$2 {
         if (config?.data) {
             content.data = config.data;
         }
+        if (config?.label) {
+            dialog.label = config.label;
+        }
+        if (config?.width) {
+            dialog.width = config.width;
+        }
         dialog._contentElement = content;
         dialog.opened = true;
         document.body.appendChild(dialog);
@@ -1569,6 +1576,7 @@ let KRDialog = class KRDialog extends i$2 {
         return b `
       <div class="backdrop" @click=${this._handleBackdropClick}></div>
       <div class="dialog" style=${o$1({ width: this.width })}>
+        ${this.label ? b `<div class="dialog__header"><div class="dialog__header-label">${this.label}</div></div>` : ''}
         ${this._contentElement ? this._contentElement : b `<slot></slot>`}
       </div>
     `;
@@ -1617,6 +1625,21 @@ KRDialog.styles = i$5 `
       flex: 1 1 auto;
       overflow: auto;
     }
+
+    .dialog__header {
+      display: flex;
+      padding: 0 24px;
+      align-items: center;
+      height: 64px;
+      flex-shrink: 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .dialog__header-label {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
   `;
 __decorate$b([
     r$1()
@@ -1624,6 +1647,9 @@ __decorate$b([
 __decorate$b([
     n$1({ type: Boolean, reflect: true })
 ], KRDialog.prototype, "opened", void 0);
+__decorate$b([
+    n$1({ type: String })
+], KRDialog.prototype, "label", void 0);
 __decorate$b([
     n$1({ type: String })
 ], KRDialog.prototype, "width", void 0);