@trendyol/baklava 3.0.0-beta.20 → 3.0.0-beta.22

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{b as j}from"./chunk-P4FHU5BE.js";import{b as q}from"./chunk-LPHOBDYM.js";import{b as O}from"./chunk-Y3PONRYW.js";import{b as v}from"./chunk-LIW32ZGE.js";import{b as y}from"./chunk-73GEFGEG.js";import{b as H}from"./chunk-WQTBAXMP.js";import{b as R}from"./chunk-FQBDGFMR.js";import{a as P}from"./chunk-5TPDRTCU.js";import{a as w}from"./chunk-Q6MAW2EF.js";import{a as I}from"./chunk-QF4LGACD.js";import{d as N}from"./chunk-ASB5S6J4.js";import{a as g}from"./chunk-IZTTP5LH.js";import{a as C}from"./chunk-H5K6KEKD.js";import{a as r}from"./chunk-7QNX2GPS.js";import{b as k}from"./chunk-4T26H7PC.js";import{a as n}from"./chunk-X67Z2G2H.js";import{a as s}from"./chunk-LXYK2N4C.js";import"./chunk-MND5TXTF.js";import{b as h}from"./chunk-UCLJCOUS.js";import{a as c}from"./chunk-2GQCCDR3.js";import{c as b,f as T}from"./chunk-FVBGMXMC.js";import{a as i}from"./chunk-XDJ3G3LW.js";import{a as m}from"./chunk-WXWKIQAK.js";import"./chunk-EZSEQHRH.js";import{b as d,e as u}from"./chunk-IWBCUOHE.js";import"./chunk-EG7U7PM3.js";import"./chunk-AYJMIZZ3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import{a as x}from"./chunk-4DWODYIT.js";import{a as B}from"./chunk-PACDVPAB.js";import{b as D,d as S,f as A}from"./chunk-WH6MQCKK.js";import{b as G}from"./chunk-73RGV4UX.js";import{b as p}from"./chunk-N6FMS7MM.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-NGJM4NWA.js";import{a as l}from"./chunk-RQEU3SZQ.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-4BZSILLM.js";import{a as e,b as a,c as t}from"./chunk-U752J5IG.js";import"./chunk-GRL4DWKG.js";import"./chunk-3USCFSFQ.js";import"./chunk-7GK5LKBV.js";import"./chunk-5MOOXA2X.js";import"./chunk-4OT5AMS5.js";import"./chunk-IZ2LK5GK.js";export{r as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,p as BlButton,d as BlCheckbox,u as BlCheckboxGroup,x as BlDialog,B as BlDrawer,A as BlDropdown,G as BlDropdownGroup,S as BlDropdownItem,t as BlIcon,s as BlInput,k as BlNotification,H as BlNotificationCard,n as BlPagination,h as BlPopover,c as BlProgressIndicator,b as BlRadio,T as BlRadioGroup,i as BlSelect,m as BlSelectOption,D as BlSplitButton,R as BlSwitch,w as BlTab,P as BlTabGroup,I as BlTabPanel,N as BlTable,y as BlTableBody,q as BlTableCell,v as BlTableHeader,j as BlTableHeaderCell,O as BlTableRow,g as BlTextarea,C as BlTooltip,a as getIconPath,e as setIconPath};
+import{b as j}from"./chunk-P4FHU5BE.js";import{b as q}from"./chunk-LPHOBDYM.js";import{b as O}from"./chunk-Y3PONRYW.js";import{b as v}from"./chunk-LIW32ZGE.js";import{b as y}from"./chunk-73GEFGEG.js";import{b as H}from"./chunk-WQTBAXMP.js";import{b as R}from"./chunk-FQBDGFMR.js";import{a as P}from"./chunk-5TPDRTCU.js";import{a as w}from"./chunk-Q6MAW2EF.js";import{a as I}from"./chunk-QF4LGACD.js";import{d as N}from"./chunk-ASB5S6J4.js";import{a as g}from"./chunk-IZTTP5LH.js";import{a as C}from"./chunk-H5K6KEKD.js";import{a as r}from"./chunk-7QNX2GPS.js";import{b as k}from"./chunk-4T26H7PC.js";import{a as n}from"./chunk-X67Z2G2H.js";import{a as s}from"./chunk-LXYK2N4C.js";import"./chunk-MND5TXTF.js";import{b as h}from"./chunk-UCLJCOUS.js";import{a as c}from"./chunk-2GQCCDR3.js";import{c as b,f as T}from"./chunk-FVBGMXMC.js";import{a as i}from"./chunk-XDJ3G3LW.js";import{a as m}from"./chunk-WXWKIQAK.js";import"./chunk-EZSEQHRH.js";import{b as d,e as u}from"./chunk-IWBCUOHE.js";import"./chunk-EG7U7PM3.js";import"./chunk-AYJMIZZ3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import{a as x}from"./chunk-OB455JKN.js";import{a as B}from"./chunk-C4GIIUCS.js";import{b as D,d as S,f as A}from"./chunk-WH6MQCKK.js";import{b as G}from"./chunk-73RGV4UX.js";import{b as p}from"./chunk-N6FMS7MM.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-NGJM4NWA.js";import{a as l}from"./chunk-RQEU3SZQ.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-4BZSILLM.js";import{a as e,b as a,c as t}from"./chunk-U752J5IG.js";import"./chunk-GRL4DWKG.js";import"./chunk-3USCFSFQ.js";import"./chunk-7GK5LKBV.js";import"./chunk-5MOOXA2X.js";import"./chunk-4OT5AMS5.js";import"./chunk-IZ2LK5GK.js";export{r as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,p as BlButton,d as BlCheckbox,u as BlCheckboxGroup,x as BlDialog,B as BlDrawer,A as BlDropdown,G as BlDropdownGroup,S as BlDropdownItem,t as BlIcon,s as BlInput,k as BlNotification,H as BlNotificationCard,n as BlPagination,h as BlPopover,c as BlProgressIndicator,b as BlRadio,T as BlRadioGroup,i as BlSelect,m as BlSelectOption,D as BlSplitButton,R as BlSwitch,w as BlTab,P as BlTabGroup,I as BlTabPanel,N as BlTable,y as BlTableBody,q as BlTableCell,v as BlTableHeader,j as BlTableHeaderCell,O as BlTableRow,g as BlTextarea,C as BlTooltip,a as getIconPath,e as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/chunk-C4GIIUCS.js

@@ -0,0 +1,26 @@
+import{a as l}from"./chunk-GRL4DWKG.js";import{a as p,b as n,c as m,e as b}from"./chunk-5MOOXA2X.js";import{a as c,b as i,f as h}from"./chunk-4OT5AMS5.js";import{d as r}from"./chunk-IZ2LK5GK.js";var u=d=>{let o=d.match(/^(\d+(\.\d+)?)(.*)$/);if(!o)return null;let e=parseFloat(o[1]),a=o[3],s;switch(a){case"px":s=e;break;case"vw":s=e*window.innerWidth/100;break;case"%":s=e*window.innerWidth/100;break;default:s=null;break}return s};var f=c`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:var(--bl-drawer-current-width, 424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top), var(--bl-size-xl));padding-right:max(env(safe-area-inset-right), var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom), var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, 0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`,w=f;var t=class extends h{constructor(){super(...arguments);this.open=!1;this.width="424px";this.domExistence=!1}static get styles(){return[w]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",e=>{e.target!==this&&this.closeDrawer()}),this.resizeDrawerWidth(),window==null||window.addEventListener("resize",()=>this.resizeDrawerWidth()),window==null||window.addEventListener("load",()=>this.resizeDrawerWidth())}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",()=>this.resizeDrawerWidth()),window==null||window.addEventListener("load",()=>this.resizeDrawerWidth())}updated(e){e.has("open")&&this.toggleDialogHandler(),e.has("width")&&this.resizeDrawerWidth()}resizeDrawerWidth(){let e=u(this.width),a=!e||e<100?"424px":this.width;e&&((window==null?void 0:window.innerWidth)<e?this.style.setProperty("--bl-drawer-current-width","calc(100vw - 24px)"):this.style.setProperty("--bl-drawer-current-width",a))}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,window.setTimeout(()=>{this.embedUrl&&this._drawerIframe&&(this._drawerIframe.src=this.embedUrl)}),this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let e=this.embedUrl?i`<iframe id="drawer-iframe" src=${this.embedUrl}></iframe>`:i`<slot></slot>`;return i`<section class=${this.embedUrl?"iframe-content":"content"}>
+      ${e}
+    </section>`}renderContainer(){let e=this.caption?i`<h2 id="drawer-caption">${this.caption}</h2>`:"",a=this.externalLink?i`<bl-button
+          icon="external_link"
+          variant="tertiary"
+          kind="neutral"
+          size="small"
+          href="${this.externalLink}"
+          target="_blank"
+        ></bl-button>`:"";return i`<div class="container">
+      <header>
+        ${e}
+        <div class="header-buttons">
+          ${a}
+          <bl-button
+            @click="${this.closeDrawer}"
+            icon="close"
+            size="small"
+            variant="tertiary"
+            kind="neutral"
+          ></bl-button>
+        </div>
+      </header>
+      ${this.renderContent()}
+    </div>`}render(){return this.domExistence?i`<div class="drawer">${this.renderContainer()}</div>`:i``}};r([n({type:Boolean,reflect:!0})],t.prototype,"open",2),r([n({type:String})],t.prototype,"caption",2),r([n({type:String,attribute:"embed-url"})],t.prototype,"embedUrl",2),r([n({type:String,attribute:"external-link"})],t.prototype,"externalLink",2),r([n({type:String,attribute:"width"})],t.prototype,"width",2),r([l("bl-drawer-open")],t.prototype,"onOpen",2),r([l("bl-drawer-close")],t.prototype,"onClose",2),r([b("#drawer-iframe")],t.prototype,"_drawerIframe",2),r([m()],t.prototype,"domExistence",2),t=r([p("bl-drawer")],t);export{t as a};
+//# sourceMappingURL=chunk-C4GIIUCS.js.map

package/dist/chunk-C4GIIUCS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utilities/style-to-px.converter.ts", "../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
+  "sourcesContent": ["export const styleToPixelConverter = (styleValue: string): number | null => {\n  const match = styleValue.match(/^(\\d+(\\.\\d+)?)(.*)$/);\n\n  if (!match) return null;\n\n  const value = parseFloat(match[1]);\n  const unit = match[3];\n\n  let styleInPixel: number | null;\n\n  switch (unit) {\n    case \"px\":\n      styleInPixel = value;\n      break;\n    case \"vw\":\n      styleInPixel = (value * window.innerWidth) / 100;\n      break;\n    case \"%\":\n      styleInPixel = (value * window.innerWidth) / 100;\n      break;\n    default:\n      styleInPixel = null;\n      break;\n  }\n  return styleInPixel;\n};\n", "import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:var(--bl-drawer-current-width, 424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top), var(--bl-size-xl));padding-right:max(env(safe-area-inset-right), var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom), var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, 0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { PropertyValues } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { styleToPixelConverter } from \"../../utilities/style-to-px.converter\";\nimport \"../button/bl-button\";\nimport style from \"./bl-drawer.css\";\n\n/**\n * @tag bl-drawer\n * @summary Baklava Drawer component\n *\n * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration\n */\n\n@customElement(\"bl-drawer\")\nexport default class BlDrawer extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets drawer open-close status\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   *  Sets the drawer title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  /**\n   *  Sets the drawer embed url for iframe\n   */\n  @property({ type: String, attribute: \"embed-url\" })\n  embedUrl?: string;\n\n  /**\n   *  Sets the drawer external link\n   */\n  @property({ type: String, attribute: \"external-link\" })\n  externalLink?: string;\n\n  /**\n   *  Sets the drawer width\n   */\n  @property({ type: String, attribute: \"width\" })\n  width: string = \"424px\";\n\n  /**\n   * Fires when the drawer is opened\n   */\n  @event(\"bl-drawer-open\") private onOpen: EventDispatcher<string>;\n\n  /**\n   * Fires when the drawer is closed\n   */\n  @event(\"bl-drawer-close\") private onClose: EventDispatcher<string>;\n\n  @query(\"#drawer-iframe\")\n  _drawerIframe: HTMLIFrameElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window?.addEventListener(\"bl-drawer-open\", event => {\n      if (event.target !== this) this.closeDrawer();\n    });\n    this.resizeDrawerWidth();\n\n    window?.addEventListener(\"resize\", () => this.resizeDrawerWidth());\n    window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window?.removeEventListener(\"resize\", () => this.resizeDrawerWidth());\n    window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"open\")) {\n      this.toggleDialogHandler();\n    }\n\n    if (changedProperties.has(\"width\")) {\n      this.resizeDrawerWidth();\n    }\n  }\n\n  private domExistenceSchedule: number;\n\n  private resizeDrawerWidth() {\n    const drawerWidth = styleToPixelConverter(this.width);\n\n    const newWidth = !drawerWidth || drawerWidth < 100 ? \"424px\" : this.width;\n\n    if (drawerWidth) {\n      if (window?.innerWidth < drawerWidth) {\n        this.style.setProperty(\"--bl-drawer-current-width\", \"calc(100vw - 24px)\");\n      } else {\n        this.style.setProperty(\"--bl-drawer-current-width\", newWidth);\n      }\n    }\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      if (this.domExistenceSchedule) {\n        clearTimeout(this.domExistenceSchedule);\n      }\n      this.domExistence = true;\n      window.setTimeout(() => {\n        if (this.embedUrl && this._drawerIframe) {\n          this._drawerIframe.src = this.embedUrl;\n        }\n      });\n      // FIXME: Allow events without payload\n      this.onOpen(\"\");\n    } else {\n      // Give some time for exit animation\n      this.domExistenceSchedule = window.setTimeout(() => {\n        this.domExistence = false;\n      }, 1000);\n\n      // FIXME: Allow events without payload\n      this.onClose(\"\");\n    }\n  }\n\n  @state() private domExistence = false;\n\n  private closeDrawer() {\n    this.open = false;\n  }\n\n  private renderContent() {\n    const content = this.embedUrl\n      ? html`<iframe id=\"drawer-iframe\" src=${this.embedUrl}></iframe>`\n      : html`<slot></slot>`;\n\n    return html`<section class=${this.embedUrl ? \"iframe-content\" : \"content\"}>\n      ${content}\n    </section>`;\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : \"\";\n    const external_button = this.externalLink\n      ? html`<bl-button\n          icon=\"external_link\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          size=\"small\"\n          href=\"${this.externalLink}\"\n          target=\"_blank\"\n        ></bl-button>`\n      : \"\";\n\n    return html`<div class=\"container\">\n      <header>\n        ${title}\n        <div class=\"header-buttons\">\n          ${external_button}\n          <bl-button\n            @click=\"${this.closeDrawer}\"\n            icon=\"close\"\n            size=\"small\"\n            variant=\"tertiary\"\n            kind=\"neutral\"\n          ></bl-button>\n        </div>\n      </header>\n      ${this.renderContent()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    if (this.domExistence) {\n      return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n    } else {\n      return html``;\n    }\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-drawer\": BlDrawer;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styleToPixelConverter", "styleValue", "match", "value", "unit", "styleInPixel", "styles", "i", "bl_drawer_default", "BlDrawer", "s", "bl_drawer_default", "event", "changedProperties", "drawerWidth", "styleToPixelConverter", "newWidth", "content", "x", "title", "external_button", "__decorateClass", "e", "i", "t"]
+}

package/dist/chunk-OB455JKN.js

@@ -0,0 +1,30 @@
+import{a as x}from"./chunk-6LT7O7T2.js";import{a as h}from"./chunk-GRL4DWKG.js";import{a as y,b as d,e as c}from"./chunk-5MOOXA2X.js";import{a as m,b as r,f as w}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var k=m`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,E=k;var t=class extends w{constructor(){super(...arguments);this.open=!1;this.critical=!1;this.polyfilled=!0;this.clickOutsideHandler=e=>{if(this.critical)return;e.composedPath().includes(this.container)||this.closeDialog("backdrop")};this.onKeydown=e=>{e.code==="Escape"&&this.open&&!this.critical&&(e.preventDefault(),this.closeDialog("keyboard"))};this.toggleFooterShadow=()=>{var l,n,s,p,f,b,g;let e=(l=this.content)==null?void 0:l.scrollTop,i=(n=this.content)==null?void 0:n.scrollHeight,a=(s=this.content)==null?void 0:s.clientHeight;e+a>=i?(f=(p=this.footer)==null?void 0:p.classList)==null||f.remove("shadow"):(g=(b=this.footer)==null?void 0:b.classList)==null||g.add("shadow")}}static get styles(){return[E]}updated(e){(e.has("open")||e.has("polyfilled"))&&this.toggleDialogHandler()}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,i,a,l,n,s;this.open?((i=(e=this.dialog)==null?void 0:e.showModal)==null||i.call(e),this.onOpen({isOpen:!0}),document.body.style.overflow="hidden",this.toggleFooterShadow(),window==null||window.addEventListener("keydown",p=>this.onKeydown(p)),window==null||window.addEventListener("resize",this.toggleFooterShadow),(a=this.content)==null||a.addEventListener("scroll",this.toggleFooterShadow)):((n=(l=this.dialog)==null?void 0:l.close)==null||n.call(l),this.onClose({isOpen:!1},{bubbles:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow),(s=this.content)==null||s.removeEventListener("scroll",this.toggleFooterShadow))}closeDialog(e){this.onRequestClose({source:e},{cancelable:!0}).defaultPrevented||(this.open=!1)}renderFooter(){return this._hasFooter?r`<footer>
+          <slot name="primary-action"></slot>
+          <slot name="secondary-action"></slot>
+          <slot name="tertiary-action"></slot>
+        </footer>`:""}renderContainer(){let e=this.caption?r`<h2 id="dialog-caption">${this.caption}</h2>`:"",i=this.critical?null:r`<bl-button
+          @click="${()=>this.closeDialog("close-button")}"
+          icon="close"
+          variant="tertiary"
+          kind="neutral"
+        ></bl-button>`,a={container:!0,"has-footer":this._hasFooter};return r` <div class="${x(a)}">
+      <header>${e} ${i}</header>
+      <section class="content"><slot></slot></section>
+      ${this.renderFooter()}
+    </div>`}render(){return this.polyfilled||!window.HTMLDialogElement?r`<div
+          class="dialog-polyfill"
+          role="dialog"
+          aria-labelledby="dialog-caption"
+          @click=${this.clickOutsideHandler}
+        >
+          ${this.renderContainer()}
+        </div>`:r`
+          <dialog
+            class="dialog"
+            aria-labelledby="dialog-caption"
+            @click=${this.clickOutsideHandler}
+          >
+            ${this.renderContainer()}
+          </dialog>
+        `}};o([d({type:Boolean,reflect:!0,hasChanged(u,v){return u===!1&&v===void 0?!1:u!==v}})],t.prototype,"open",2),o([d({type:String})],t.prototype,"caption",2),o([d({type:Boolean,reflect:!0})],t.prototype,"critical",2),o([d({type:Boolean,reflect:!0})],t.prototype,"polyfilled",2),o([c(".dialog")],t.prototype,"dialog",2),o([c("footer")],t.prototype,"footer",2),o([c(".container")],t.prototype,"container",2),o([c(".content")],t.prototype,"content",2),o([h("bl-dialog-open")],t.prototype,"onOpen",2),o([h("bl-dialog-request-close")],t.prototype,"onRequestClose",2),o([h("bl-dialog-close")],t.prototype,"onClose",2),t=o([y("bl-dialog")],t);export{t as a};
+//# sourceMappingURL=chunk-OB455JKN.js.map

package/dist/chunk-OB455JKN.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport style from \"./bl-dialog.css\";\n\ntype DialogElement = {\n  showModal: () => void;\n  close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n */\n@customElement(\"bl-dialog\")\nexport default class BlDialog extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets dialog open-close status\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    hasChanged(newVal: boolean, oldVal: boolean | undefined) {\n      if (newVal === false && oldVal === undefined) {\n        // Assume that the initial value is false\n        return false;\n      }\n      return newVal !== oldVal;\n    },\n  })\n  open = false;\n\n  /**\n   * Sets the dialog title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  /**\n   * Determines if the dialog is critical, which disables closing through keyboard, backdrop, and close button interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  critical = false;\n\n  /**\n   * Determines if dialog currently uses polyfilled version instead of native HTML Dialog. By\n   * default, it uses native Dialog if the browser supports it, otherwise polyfills. You can force\n   * using polyfill by setting this to true in some cases like to show some content on top of dialog\n   * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some\n   * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.\n   *\n   * As of the current implementation, you can render above the dialog HTML element using the Popover API. However,\n   * it will block any actions on the Popover element. This issue was encountered during the development of the `bl-notification` component.\n   * As a result, we decided to enable the polyfill for the `bl-dialog` component by default. If you prefer to use the native dialog, you can set\n   * this property to false. Please note, doing so will cause notifications to render under the dialog backdrop.\n   * For more information, refer to the comment linked below:\n   *\n   * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413\n   */\n  @property({ type: Boolean, reflect: true })\n  polyfilled = true;\n\n  @query(\".dialog\")\n  private dialog: HTMLDialogElement & DialogElement;\n\n  @query(\"footer\")\n  private footer: HTMLElement;\n\n  @query(\".container\")\n  private container: HTMLElement;\n\n  @query(\".content\")\n  private content: HTMLElement;\n\n  /**\n   * Fires when the dialog is opened\n   */\n  @event(\"bl-dialog-open\") private onOpen: EventDispatcher<object>;\n\n  /**\n   * Fires before the dialog is closed with internal actions like clicking close button,\n   * pressing Escape key or clicking backdrop. Can be prevented by calling `event.preventDefault()`\n   */\n  @event(\"bl-dialog-request-close\") private onRequestClose: EventDispatcher<{\n    source: \"close-button\" | \"keyboard\" | \"backdrop\";\n  }>;\n\n  /**\n   * Fires when the dialog is closed\n   */\n  @event(\"bl-dialog-close\") private onClose: EventDispatcher<object>;\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"open\") || changedProperties.has(\"polyfilled\")) {\n      this.toggleDialogHandler();\n    }\n  }\n\n  private get _hasFooter() {\n    return [...this.childNodes].some(node => node.nodeName === \"BL-BUTTON\");\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      this.dialog?.showModal?.();\n      this.onOpen({ isOpen: true });\n      document.body.style.overflow = \"hidden\";\n      this.toggleFooterShadow();\n      window?.addEventListener(\"keydown\", event => this.onKeydown(event));\n      window?.addEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.addEventListener(\"scroll\", this.toggleFooterShadow);\n    } else {\n      this.dialog?.close?.();\n      this.onClose({ isOpen: false }, { bubbles: false });\n      document.body.style.overflow = \"auto\";\n      window?.removeEventListener(\"keydown\", this.onKeydown);\n      window?.removeEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.removeEventListener(\"scroll\", this.toggleFooterShadow);\n    }\n  }\n\n  private closeDialog(source: \"close-button\" | \"keyboard\" | \"backdrop\") {\n    const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });\n\n    if (requestCloseEvent.defaultPrevented) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  private clickOutsideHandler = (event: MouseEvent) => {\n    if (this.critical) return;\n\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath.includes(this.container)) {\n      this.closeDialog(\"backdrop\");\n    }\n  };\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === \"Escape\" && this.open && !this.critical) {\n      event.preventDefault();\n      this.closeDialog(\"keyboard\");\n    }\n  };\n\n  private toggleFooterShadow = () => {\n    const scrollTop = this.content?.scrollTop;\n    const scrollHeight = this.content?.scrollHeight;\n    const clientHeight = this.content?.clientHeight;\n\n    if (scrollTop + clientHeight >= scrollHeight) {\n      this.footer?.classList?.remove(\"shadow\");\n    } else {\n      this.footer?.classList?.add(\"shadow\");\n    }\n  };\n\n  private renderFooter() {\n    return this._hasFooter\n      ? html`<footer>\n          <slot name=\"primary-action\"></slot>\n          <slot name=\"secondary-action\"></slot>\n          <slot name=\"tertiary-action\"></slot>\n        </footer>`\n      : \"\";\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : \"\";\n    const closeButton = !this.critical\n      ? html`<bl-button\n          @click=\"${() => this.closeDialog(\"close-button\")}\"\n          icon=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n        ></bl-button>`\n      : null;\n\n    const classes = {\n      \"container\": true,\n      \"has-footer\": this._hasFooter,\n    };\n\n    return html` <div class=\"${classMap(classes)}\">\n      <header>${title} ${closeButton}</header>\n      <section class=\"content\"><slot></slot></section>\n      ${this.renderFooter()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    return this.polyfilled || !window.HTMLDialogElement\n      ? html`<div\n          class=\"dialog-polyfill\"\n          role=\"dialog\"\n          aria-labelledby=\"dialog-caption\"\n          @click=${this.clickOutsideHandler}\n        >\n          ${this.renderContainer()}\n        </div>`\n      : html`\n          <dialog\n            class=\"dialog\"\n            aria-labelledby=\"dialog-caption\"\n            @click=${this.clickOutsideHandler}\n          >\n            ${this.renderContainer()}\n          </dialog>\n        `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-dialog\": BlDialog;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "_a", "_b", "_c", "_d", "_e", "_f", "_g", "scrollTop", "scrollHeight", "clientHeight", "bl_dialog_default", "changedProperties", "node", "source", "x", "title", "closeButton", "classes", "o", "__decorateClass", "e", "newVal", "oldVal", "i"]
+}

package/dist/components/dialog/bl-dialog.d.ts

@@ -14,6 +14,10 @@ export default class BlDialog extends LitElement {
      * Sets the dialog title
      */
     caption?: string;
+    /**
+     * Determines if the dialog is critical, which disables closing through keyboard, backdrop, and close button interactions.
+     */
+    critical: boolean;
     /**
      * Determines if dialog currently uses polyfilled version instead of native HTML Dialog. By
      * default, it uses native Dialog if the browser supports it, otherwise polyfills. You can force

package/dist/components/dialog/bl-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvF,OAAO,qBAAqB,CAAC;AAQ7B;;;GAGG;AAEH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAYH,IAAI,UAAS;IAEb;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;OAcG;IAEH,UAAU,UAAQ;IAGlB,OAAO,CAAC,MAAM,CAAoC;IAGlD,OAAO,CAAC,MAAM,CAAc;IAG5B,OAAO,CAAC,SAAS,CAAc;IAG/B,OAAO,CAAC,OAAO,CAAc;IAE7B;;OAEG;IACsB,OAAO,CAAC,MAAM,CAA0B;IAEjE;;;OAGG;IAC+B,OAAO,CAAC,cAAc,CAErD;IAEH;;OAEG;IACuB,OAAO,CAAC,OAAO,CAA0B;IAEnE,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAM/C,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,kBAAkB,CAUxB;IAEF,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAuBvB,MAAM,IAAI,cAAc;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"bl-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvF,OAAO,qBAAqB,CAAC;AAQ7B;;;GAGG;AAEH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAYH,IAAI,UAAS;IAEb;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;;;;;;;;;;;OAcG;IAEH,UAAU,UAAQ;IAGlB,OAAO,CAAC,MAAM,CAAoC;IAGlD,OAAO,CAAC,MAAM,CAAc;IAG5B,OAAO,CAAC,SAAS,CAAc;IAG/B,OAAO,CAAC,OAAO,CAAc;IAE7B;;OAEG;IACsB,OAAO,CAAC,MAAM,CAA0B;IAEjE;;;OAGG;IAC+B,OAAO,CAAC,cAAc,CAErD;IAEH;;OAEG;IACuB,OAAO,CAAC,OAAO,CAA0B;IAEnE,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAM/C,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,mBAAmB,CAQzB;IAEF,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,kBAAkB,CAUxB;IAEF,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAuBvB,MAAM,IAAI,cAAc;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/dialog/bl-dialog.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-4DWODYIT.js";import"../../chunk-N6FMS7MM.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-U752J5IG.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-OB455JKN.js";import"../../chunk-N6FMS7MM.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-U752J5IG.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-dialog.js.map

package/dist/components/dialog/bl-dialog.stories.d.ts

@@ -14,6 +14,8 @@ interface DialogArgs {
     focusPrimary?: boolean;
     focusSecondary?: boolean;
     focusTertiary?: boolean;
+    critical?: boolean;
+    closeAction?: string;
 }
 type Story = StoryObj<DialogArgs>;
 export declare const BasicUsage: Story;
@@ -23,4 +25,5 @@ export declare const DialogWithFocusedAction: Story;
 export declare const DialogWithFocusedInput: Story;
 export declare const DialogWithFullWidthAction: Story;
 export declare const DialogWithFullWidthActions: Story;
+export declare const CriticalDialog: Story;
 //# sourceMappingURL=bl-dialog.stories.d.ts.map

package/dist/components/dialog/bl-dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAyHlC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAGF,eAAO,MAAM,0BAA0B,EAAE,KAUxC,CAAC"}
+{"version":3,"file":"bl-dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AA6HlC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAGF,eAAO,MAAM,0BAA0B,EAAE,KAUxC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}

package/dist/components/dialog/bl-dialog.stories.js

@@ -1,17 +1,20 @@
-import{a as s}from"../../chunk-HSVSMABT.js";import{a}from"../../chunk-DINNT5P2.js";import{b as n}from"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import{b as e}from"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";var m={title:"Components/Dialog",component:"bl-dialog",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["id"]}},decorators:[s],argTypes:{open:{control:"boolean"},polyfilled:{control:"boolean"},caption:{control:"text"},content:{control:"text"}}},f=m,t=i=>async()=>{let l=document.getElementById(i);l.open=!0},o=i=>e`
+import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT5P2.js";import{b as l}from"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import{b as e}from"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";var m={title:"Components/Dialog",component:"bl-dialog",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["id"]}},decorators:[c],argTypes:{open:{control:"boolean"},polyfilled:{control:"boolean"},caption:{control:"text"},content:{control:"text"}}},x=m,t=i=>async()=>{let a=document.getElementById(i);a.open=!0},o=i=>e`
 <bl-button @bl-click="${t(i.id)}" variant="secondary">Open Dialog</bl-button>
 
 <bl-dialog
   id=${i.id}
-  class="${a(i.className)}"
-  caption="${a(i.caption)}"
+  class="${n(i.className)}"
+  caption="${n(i.caption)}"
   ?open="${i.open}"
-  ?polyfilled="${i.polyfilled}">
-    ${n(i.content)}${i.primaryAction?e`
+  ?polyfilled="${i.polyfilled}"
+  ?critical="${i.critical}">
+    ${l(i.content)}${i.primaryAction?e`
 
   <bl-button slot="primary-action" variant="primary" ?autofocus=${i.focusPrimary} size="large">${i.primaryAction}</bl-button>`:""}${i.secondaryAction?e`
   <bl-button slot="secondary-action" variant="secondary" ?autofocus=${i.focusSecondary} size="large">${i.secondaryAction}</bl-button>`:""}${i.tertiaryAction?e`
   <bl-button slot="tertiary-action" variant="tertiary" ?autofocus=${i.focusTertiary} size="large">${i.tertiaryAction}</bl-button>`:""}
+  ${i.closeAction?e`
+    <bl-button slot="primary-action" variant="primary" ?autofocus=${i.focusSecondary} size="large" @click=${a=>{var s;return(s=a.target.closest("bl-dialog"))==null?void 0:s.toggleAttribute("open")}}>${i.closeAction}</bl-button>`:""}
 </bl-dialog>
 `,r=i=>e`
 <style>
@@ -22,7 +25,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a}from"../../chunk-DINNT5P2.j
 </style>
 
 ${o({...i,className:"full-width-actions"})}
-`,c=i=>e`
+`,d=i=>e`
 <style>
   bl-dialog.limited-width .content {
     max-width: 500px;
@@ -78,7 +81,7 @@ ${o({...i,className:"limited-width",content:`<div class="content">
   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.
   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</div>`})}`,d=i=>e`
+</div>`})}`,u=i=>e`
 <style>
   .my-dialog-content {
     width: 400px;
@@ -97,5 +100,5 @@ a Latin professor at Hampden-Sydney College in Virginia, looked up one of the mo
 of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
 (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
 "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>`})}
-`,x={args:{id:"dl-basic",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:o,play:t("dl-basic")},q={args:{id:"dl-sticky-footer",caption:"Terms And Conditions",primaryAction:"Agree",secondaryAction:"Disagree"},render:c,play:t("dl-sticky-footer")},A={args:{id:"dl-sizing",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:d,play:t("dl-sizing")},v={args:{id:"dl-focused-action",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",focusSecondary:!0,tertiaryAction:"Cancel"},render:o,play:t("dl-focused-action")},L={args:{id:"dl-focused-input",caption:"Name your file",content:'<p>Please provide a name for your file</p><bl-input placeholder="filename.pdf" autofocus></bl-input>',primaryAction:"OK",tertiaryAction:"Cancel"},render:o,play:t("dl-focused-input")},w={args:{id:"dl-full-width-action",caption:"Action completed",content:"<p>Your process is done!</p>",primaryAction:"OK"},render:r,play:t("dl-full-width-action")},k={args:{id:"dl-full-width-actions",caption:"Are you sure to delete?",content:"<p>Do you want to really delete the file?</p>",primaryAction:"Delete",secondaryAction:"Cancel"},render:r,play:t("dl-full-width-actions")};export{x as BasicUsage,A as DialogSizing,v as DialogWithFocusedAction,L as DialogWithFocusedInput,w as DialogWithFullWidthAction,k as DialogWithFullWidthActions,q as DialogWithStickyFooter,f as default};
+`,q={args:{id:"dl-basic",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:o,play:t("dl-basic")},A={args:{id:"dl-sticky-footer",caption:"Terms And Conditions",primaryAction:"Agree",secondaryAction:"Disagree"},render:d,play:t("dl-sticky-footer")},v={args:{id:"dl-sizing",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:u,play:t("dl-sizing")},L={args:{id:"dl-focused-action",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",focusSecondary:!0,tertiaryAction:"Cancel"},render:o,play:t("dl-focused-action")},k={args:{id:"dl-focused-input",caption:"Name your file",content:'<p>Please provide a name for your file</p><bl-input placeholder="filename.pdf" autofocus></bl-input>',primaryAction:"OK",tertiaryAction:"Cancel"},render:o,play:t("dl-focused-input")},w={args:{id:"dl-full-width-action",caption:"Action completed",content:"<p>Your process is done!</p>",primaryAction:"OK"},render:r,play:t("dl-full-width-action")},D={args:{id:"dl-full-width-actions",caption:"Are you sure to delete?",content:"<p>Do you want to really delete the file?</p>",primaryAction:"Delete",secondaryAction:"Cancel"},render:r,play:t("dl-full-width-actions")},$={args:{id:"dl-critical",caption:"Critical Action Required",content:"<p>This action is irreversible. Please confirm to proceed.</p>",closeAction:"Confirm",critical:!0},render:r,play:t("dl-critical")};export{q as BasicUsage,$ as CriticalDialog,v as DialogSizing,L as DialogWithFocusedAction,k as DialogWithFocusedInput,w as DialogWithFullWidthAction,D as DialogWithFullWidthActions,A as DialogWithStickyFooter,x as default};
 //# sourceMappingURL=bl-dialog.stories.js.map

package/dist/components/dialog/bl-dialog.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dialog/bl-dialog.stories.ts"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type BlDialog from \"./bl-dialog\";\n\nconst meta: Meta = {\n  title: \"Components/Dialog\",\n  component: \"bl-dialog\",\n  parameters: {\n    chromatic: {\n      viewports: [1000]\n    },\n    controls: {\n      exclude: [\"id\"],\n    }\n  },\n  decorators: [\n    fullscreenLayout,\n  ],\n  argTypes: {\n    open: {\n      control: \"boolean\",\n    },\n    polyfilled: {\n      control: \"boolean\",\n    },\n    caption: {\n      control: \"text\"\n    },\n    content: {\n      control: \"text\"\n    }\n  }\n};\n\nexport default meta;\n\ninterface DialogArgs {\n  id: string;\n  className?: string;\n  caption?: string;\n  open?: boolean;\n  polyfilled?: boolean;\n  content?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  tertiaryAction?: string;\n  focusPrimary?: boolean;\n  focusSecondary?: boolean;\n  focusTertiary?: boolean;\n}\n\ntype Story = StoryObj<DialogArgs>;\n\nconst dialogOpener = (dialogId: string) => async () => {\n  const dialog = document.getElementById(dialogId) as BlDialog;\n\n  dialog.open = true;\n};\n\nconst BasicTemplate = (args: DialogArgs) => html`\n<bl-button @bl-click=\"${dialogOpener(args.id)}\" variant=\"secondary\">Open Dialog</bl-button>\n\n<bl-dialog\n  id=${args.id}\n  class=\"${ifDefined(args.className)}\"\n  caption=\"${ifDefined(args.caption)}\"\n  ?open=\"${args.open}\"\n  ?polyfilled=\"${args.polyfilled}\">\n    ${\n      unsafeHTML(args.content)\n    }${\n      args.primaryAction ? html`\n\n  <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusPrimary} size=\"large\">${args.primaryAction}</bl-button>` : \"\"}${\n      args.secondaryAction ? html`\n  <bl-button slot=\"secondary-action\" variant=\"secondary\" ?autofocus=${args.focusSecondary} size=\"large\">${args.secondaryAction}</bl-button>` : \"\"}${\n      args.tertiaryAction ? html`\n  <bl-button slot=\"tertiary-action\" variant=\"tertiary\" ?autofocus=${args.focusTertiary} size=\"large\">${args.tertiaryAction}</bl-button>` : \"\"}\n</bl-dialog>\n`;\n\nconst FullWidthActionsTemplate = (args: DialogArgs) => html`\n<style>\n  bl-dialog.full-width-actions bl-button {\n    --bl-button-display: block;\n    flex: 1;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"full-width-actions\"})}\n`;\n\nconst TemplateWithStickyFooter = (args: DialogArgs) => html`\n<style>\n  bl-dialog.limited-width .content {\n    max-width: 500px;\n    max-height: 500px;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"limited-width\", content: `<div class=\"content\">\n  <bl-alert icon>Please read all terms and conditions.</bl-alert>\n  <h4>Lorem ipsum dolor sit amet</h4>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.\n  Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form\n  accompanied by English versions from the 1914 translation by H. Rackham.</p>\n  <h4>Quis autem vel eum iure reprehenderit qui</h4>\n  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry\n  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scramble\n  it to make a type specimen book.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n</div>`\n})}`;\n\nconst SizingTemplate = (args: DialogArgs) => html`\n<style>\n  .my-dialog-content {\n    width: 400px;\n    height:200px;\n    margin:0;\n    padding:0;\n  }\n</style>\n\n${BasicTemplate({...args, content: `<p class=\"my-dialog-content\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\nremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing\nsoftware like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.\nContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,\na Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites\nof the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\"\n(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,\n\"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p>` })}\n`;\n\nexport const BasicUsage: Story = {\n  args: {\n    id: \"dl-basic\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-basic\")\n};\n\nexport const DialogWithStickyFooter: Story = {\n  args: {\n    id: \"dl-sticky-footer\",\n    caption: \"Terms And Conditions\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n  },\n  render: TemplateWithStickyFooter,\n  play: dialogOpener(\"dl-sticky-footer\")\n};\n\nexport const DialogSizing: Story = {\n  args: {\n    id: \"dl-sizing\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: SizingTemplate,\n  play: dialogOpener(\"dl-sizing\")\n};\n\nexport const DialogWithFocusedAction: Story = {\n  args: {\n    id: \"dl-focused-action\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    focusSecondary: true,\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-action\")\n};\n\nexport const DialogWithFocusedInput: Story = {\n  args: {\n    id: \"dl-focused-input\",\n    caption: \"Name your file\",\n    content: '<p>Please provide a name for your file</p><bl-input placeholder=\"filename.pdf\" autofocus></bl-input>',\n    primaryAction: \"OK\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-input\")\n};\n\nexport const DialogWithFullWidthAction: Story = {\n  args: {\n    id: \"dl-full-width-action\",\n    caption: \"Action completed\",\n    content: \"<p>Your process is done!</p>\",\n    primaryAction: \"OK\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-action\")\n};\n\n\nexport const DialogWithFullWidthActions: Story = {\n  args: {\n    id: \"dl-full-width-actions\",\n    caption: \"Are you sure to delete?\",\n    content: \"<p>Do you want to really delete the file?</p>\",\n    primaryAction: \"Delete\",\n    secondaryAction: \"Cancel\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-actions\")\n};\n"],
-  "mappings": "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",
-  "names": ["meta", "fullscreenLayout", "bl_dialog_stories_default", "dialogOpener", "dialogId", "dialog", "BasicTemplate", "args", "x", "l", "o", "FullWidthActionsTemplate", "TemplateWithStickyFooter", "SizingTemplate", "BasicUsage", "DialogWithStickyFooter", "DialogSizing", "DialogWithFocusedAction", "DialogWithFocusedInput", "DialogWithFullWidthAction", "DialogWithFullWidthActions"]
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type BlDialog from \"./bl-dialog\";\n\nconst meta: Meta = {\n  title: \"Components/Dialog\",\n  component: \"bl-dialog\",\n  parameters: {\n    chromatic: {\n      viewports: [1000]\n    },\n    controls: {\n      exclude: [\"id\"],\n    }\n  },\n  decorators: [\n    fullscreenLayout,\n  ],\n  argTypes: {\n    open: {\n      control: \"boolean\",\n    },\n    polyfilled: {\n      control: \"boolean\",\n    },\n    caption: {\n      control: \"text\"\n    },\n    content: {\n      control: \"text\"\n    }\n  }\n};\n\nexport default meta;\n\ninterface DialogArgs {\n  id: string;\n  className?: string;\n  caption?: string;\n  open?: boolean;\n  polyfilled?: boolean;\n  content?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  tertiaryAction?: string;\n  focusPrimary?: boolean;\n  focusSecondary?: boolean;\n  focusTertiary?: boolean;\n  critical?: boolean;\n  closeAction?: string;\n}\n\ntype Story = StoryObj<DialogArgs>;\n\nconst dialogOpener = (dialogId: string) => async () => {\n  const dialog = document.getElementById(dialogId) as BlDialog;\n\n  dialog.open = true;\n};\n\nconst BasicTemplate = (args: DialogArgs) => html`\n<bl-button @bl-click=\"${dialogOpener(args.id)}\" variant=\"secondary\">Open Dialog</bl-button>\n\n<bl-dialog\n  id=${args.id}\n  class=\"${ifDefined(args.className)}\"\n  caption=\"${ifDefined(args.caption)}\"\n  ?open=\"${args.open}\"\n  ?polyfilled=\"${args.polyfilled}\"\n  ?critical=\"${args.critical}\">\n    ${\n      unsafeHTML(args.content)\n    }${\n      args.primaryAction ? html`\n\n  <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusPrimary} size=\"large\">${args.primaryAction}</bl-button>` : \"\"}${\n      args.secondaryAction ? html`\n  <bl-button slot=\"secondary-action\" variant=\"secondary\" ?autofocus=${args.focusSecondary} size=\"large\">${args.secondaryAction}</bl-button>` : \"\"}${\n      args.tertiaryAction ? html`\n  <bl-button slot=\"tertiary-action\" variant=\"tertiary\" ?autofocus=${args.focusTertiary} size=\"large\">${args.tertiaryAction}</bl-button>` : \"\"}\n  ${\n    args.closeAction ? html`\n    <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusSecondary} size=\"large\" @click=${(e: CustomEvent) => (e.target as HTMLElement).closest(\"bl-dialog\")?.toggleAttribute(\"open\")}>${args.closeAction}</bl-button>` : \"\"}\n</bl-dialog>\n`;\n\nconst FullWidthActionsTemplate = (args: DialogArgs) => html`\n<style>\n  bl-dialog.full-width-actions bl-button {\n    --bl-button-display: block;\n    flex: 1;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"full-width-actions\"})}\n`;\n\nconst TemplateWithStickyFooter = (args: DialogArgs) => html`\n<style>\n  bl-dialog.limited-width .content {\n    max-width: 500px;\n    max-height: 500px;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"limited-width\", content: `<div class=\"content\">\n  <bl-alert icon>Please read all terms and conditions.</bl-alert>\n  <h4>Lorem ipsum dolor sit amet</h4>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.\n  Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form\n  accompanied by English versions from the 1914 translation by H. Rackham.</p>\n  <h4>Quis autem vel eum iure reprehenderit qui</h4>\n  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry\n  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scramble\n  it to make a type specimen book.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n</div>`\n})}`;\n\nconst SizingTemplate = (args: DialogArgs) => html`\n<style>\n  .my-dialog-content {\n    width: 400px;\n    height:200px;\n    margin:0;\n    padding:0;\n  }\n</style>\n\n${BasicTemplate({...args, content: `<p class=\"my-dialog-content\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\nremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing\nsoftware like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.\nContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,\na Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites\nof the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\"\n(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,\n\"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p>` })}\n`;\n\nexport const BasicUsage: Story = {\n  args: {\n    id: \"dl-basic\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-basic\")\n};\n\nexport const DialogWithStickyFooter: Story = {\n  args: {\n    id: \"dl-sticky-footer\",\n    caption: \"Terms And Conditions\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n  },\n  render: TemplateWithStickyFooter,\n  play: dialogOpener(\"dl-sticky-footer\")\n};\n\nexport const DialogSizing: Story = {\n  args: {\n    id: \"dl-sizing\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: SizingTemplate,\n  play: dialogOpener(\"dl-sizing\")\n};\n\nexport const DialogWithFocusedAction: Story = {\n  args: {\n    id: \"dl-focused-action\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    focusSecondary: true,\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-action\")\n};\n\nexport const DialogWithFocusedInput: Story = {\n  args: {\n    id: \"dl-focused-input\",\n    caption: \"Name your file\",\n    content: '<p>Please provide a name for your file</p><bl-input placeholder=\"filename.pdf\" autofocus></bl-input>',\n    primaryAction: \"OK\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-input\")\n};\n\nexport const DialogWithFullWidthAction: Story = {\n  args: {\n    id: \"dl-full-width-action\",\n    caption: \"Action completed\",\n    content: \"<p>Your process is done!</p>\",\n    primaryAction: \"OK\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-action\")\n};\n\n\nexport const DialogWithFullWidthActions: Story = {\n  args: {\n    id: \"dl-full-width-actions\",\n    caption: \"Are you sure to delete?\",\n    content: \"<p>Do you want to really delete the file?</p>\",\n    primaryAction: \"Delete\",\n    secondaryAction: \"Cancel\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-actions\")\n};\n\nexport const CriticalDialog: Story = {\n  args: {\n    id: \"dl-critical\",\n    caption: \"Critical Action Required\",\n    content: \"<p>This action is irreversible. Please confirm to proceed.</p>\",\n    closeAction: \"Confirm\",\n    critical: true,\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-critical\")\n};\n"],
+  "mappings": "gPAOA,IAAMA,EAAa,CACjB,MAAO,oBACP,UAAW,YACX,WAAY,CACV,UAAW,CACT,UAAW,CAAC,GAAI,CAClB,EACA,SAAU,CACR,QAAS,CAAC,IAAI,CAChB,CACF,EACA,WAAY,CACVC,CACF,EACA,SAAU,CACR,KAAM,CACJ,QAAS,SACX,EACA,WAAY,CACV,QAAS,SACX,EACA,QAAS,CACP,QAAS,MACX,EACA,QAAS,CACP,QAAS,MACX,CACF,CACF,EAEOC,EAAQF,EAqBTG,EAAgBC,GAAqB,SAAY,CACrD,IAAMC,EAAS,SAAS,eAAeD,CAAQ,EAE/CC,EAAO,KAAO,EAChB,EAEMC,EAAiBC,GAAqBC;AAAA,wBACpBL,EAAaI,EAAK,EAAE;AAAA;AAAA;AAAA,OAGrCA,EAAK;AAAA,WACDE,EAAUF,EAAK,SAAS;AAAA,aACtBE,EAAUF,EAAK,OAAO;AAAA,WACxBA,EAAK;AAAA,iBACCA,EAAK;AAAA,eACPA,EAAK;AAAA,MAEdG,EAAWH,EAAK,OAAO,IAEvBA,EAAK,cAAgBC;AAAA;AAAA,kEAEuCD,EAAK,6BAA6BA,EAAK,4BAA8B,KACjIA,EAAK,gBAAkBC;AAAA,sEACyCD,EAAK,+BAA+BA,EAAK,8BAAgC,KACzIA,EAAK,eAAiBC;AAAA,oEACwCD,EAAK,8BAA8BA,EAAK,6BAA+B;AAAA,IAEvIA,EAAK,YAAcC;AAAA,oEAC6CD,EAAK,sCAAuCI,GAAgB,CAtFhI,IAAAC,EAsFoI,OAAAA,EAAAD,EAAE,OAAuB,QAAQ,WAAW,IAA5C,YAAAC,EAA+C,gBAAgB,YAAWL,EAAK,0BAA4B;AAAA;AAAA,EAIzOM,EAA4BN,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrDF,EAAc,CAAC,GAAGC,EAAM,UAAW,oBAAoB,CAAC;AAAA,EAGpDO,EAA4BP,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrDF,EAAc,CAAC,GAAGC,EAAM,UAAW,gBAAiB,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAiD/D,CAAC,IAEKQ,EAAkBR,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU3CF,EAAc,CAAC,GAAGC,EAAM,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0EAQwC,CAAC;AAAA,EAG/DS,EAAoB,CAC/B,KAAM,CACJ,GAAI,WACJ,QAAS,wBACT,QAAS,oFACT,cAAe,QACf,gBAAiB,WACjB,eAAgB,QAClB,EACA,OAAQV,EACR,KAAMH,EAAa,UAAU,CAC/B,EAEac,EAAgC,CAC3C,KAAM,CACJ,GAAI,mBACJ,QAAS,uBACT,cAAe,QACf,gBAAiB,UACnB,EACA,OAAQH,EACR,KAAMX,EAAa,kBAAkB,CACvC,EAEae,EAAsB,CACjC,KAAM,CACJ,GAAI,YACJ,cAAe,QACf,gBAAiB,WACjB,eAAgB,QAClB,EACA,OAAQH,EACR,KAAMZ,EAAa,WAAW,CAChC,EAEagB,EAAiC,CAC5C,KAAM,CACJ,GAAI,oBACJ,QAAS,wBACT,QAAS,oFACT,cAAe,QACf,gBAAiB,WACjB,eAAgB,GAChB,eAAgB,QAClB,EACA,OAAQb,EACR,KAAMH,EAAa,mBAAmB,CACxC,EAEaiB,EAAgC,CAC3C,KAAM,CACJ,GAAI,mBACJ,QAAS,iBACT,QAAS,uGACT,cAAe,KACf,eAAgB,QAClB,EACA,OAAQd,EACR,KAAMH,EAAa,kBAAkB,CACvC,EAEakB,EAAmC,CAC9C,KAAM,CACJ,GAAI,uBACJ,QAAS,mBACT,QAAS,+BACT,cAAe,IACjB,EACA,OAAQR,EACR,KAAMV,EAAa,sBAAsB,CAC3C,EAGamB,EAAoC,CAC/C,KAAM,CACJ,GAAI,wBACJ,QAAS,0BACT,QAAS,gDACT,cAAe,SACf,gBAAiB,QACnB,EACA,OAAQT,EACR,KAAMV,EAAa,uBAAuB,CAC5C,EAEaoB,EAAwB,CACnC,KAAM,CACJ,GAAI,cACJ,QAAS,2BACT,QAAS,iEACT,YAAa,UACb,SAAU,EACZ,EACA,OAAQV,EACR,KAAMV,EAAa,aAAa,CAClC",
+  "names": ["meta", "fullscreenLayout", "bl_dialog_stories_default", "dialogOpener", "dialogId", "dialog", "BasicTemplate", "args", "x", "l", "o", "e", "_a", "FullWidthActionsTemplate", "TemplateWithStickyFooter", "SizingTemplate", "BasicUsage", "DialogWithStickyFooter", "DialogSizing", "DialogWithFocusedAction", "DialogWithFocusedInput", "DialogWithFullWidthAction", "DialogWithFullWidthActions", "CriticalDialog"]
 }

package/dist/components/drawer/bl-drawer.d.ts

@@ -37,6 +37,7 @@ export default class BlDrawer extends LitElement {
      * Fires when the drawer is closed
      */
     private onClose;
+    _drawerIframe: HTMLIFrameElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;

package/dist/components/drawer/bl-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/bl-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrC,OAAO,qBAAqB,CAAC;AAG7B;;;;;GAKG;AAGH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAW;IAExB;;OAEG;IACsB,OAAO,CAAC,MAAM,CAA0B;IAEjE;;OAEG;IACuB,OAAO,CAAC,OAAO,CAA0B;IAEnE,iBAAiB;IAWjB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAU/C,OAAO,CAAC,oBAAoB,CAAS;IAErC,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,mBAAmB;IAoBlB,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,eAAe;IA+BvB,MAAM,IAAI,cAAc;CAOzB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"bl-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/bl-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrC,OAAO,qBAAqB,CAAC;AAG7B;;;;;GAKG;AAGH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAW;IAExB;;OAEG;IACsB,OAAO,CAAC,MAAM,CAA0B;IAEjE;;OAEG;IACuB,OAAO,CAAC,OAAO,CAA0B;IAGnE,aAAa,EAAE,iBAAiB,CAAC;IAEjC,iBAAiB;IAWjB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAU/C,OAAO,CAAC,oBAAoB,CAAS;IAErC,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,mBAAmB;IAwBlB,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,eAAe;IA+BvB,MAAM,IAAI,cAAc;CAOzB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/drawer/bl-drawer.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-PACDVPAB.js";import"../../chunk-N6FMS7MM.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-U752J5IG.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-C4GIIUCS.js";import"../../chunk-N6FMS7MM.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-U752J5IG.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-drawer.js.map

package/dist/custom-elements.json

@@ -654,6 +654,15 @@
               "description": "Sets the dialog title",
               "fieldName": "caption"
             },
+            {
+              "name": "critical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines if the dialog is critical, which disables closing through keyboard, backdrop, and close button interactions.",
+              "fieldName": "critical"
+            },
             {
               "name": "polyfilled",
               "type": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trendyol/baklava",
   "type": "module",
-  "version": "3.0.0-beta.20",
+  "version": "3.0.0-beta.22",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",

package/dist/chunk-4DWODYIT.js

@@ -1,33 +0,0 @@
-import{a as x}from"./chunk-6LT7O7T2.js";import{a as h}from"./chunk-GRL4DWKG.js";import{a as y,b as p,e as s}from"./chunk-5MOOXA2X.js";import{a as m,b as r,f as w}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var k=m`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,E=k;var t=class extends w{constructor(){super(...arguments);this.open=!1;this.polyfilled=!0;this.clickOutsideHandler=e=>{e.composedPath().includes(this.container)||this.closeDialog("backdrop")};this.onKeydown=e=>{e.code==="Escape"&&this.open&&(e.preventDefault(),this.closeDialog("keyboard"))};this.toggleFooterShadow=()=>{var l,a,n,c,b,f,g;let e=(l=this.content)==null?void 0:l.scrollTop,i=(a=this.content)==null?void 0:a.scrollHeight,d=(n=this.content)==null?void 0:n.clientHeight;e+d>=i?(b=(c=this.footer)==null?void 0:c.classList)==null||b.remove("shadow"):(g=(f=this.footer)==null?void 0:f.classList)==null||g.add("shadow")}}static get styles(){return[E]}updated(e){(e.has("open")||e.has("polyfilled"))&&this.toggleDialogHandler()}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,i,d,l,a,n;this.open?((i=(e=this.dialog)==null?void 0:e.showModal)==null||i.call(e),this.onOpen({isOpen:!0}),document.body.style.overflow="hidden",this.toggleFooterShadow(),window==null||window.addEventListener("keydown",c=>this.onKeydown(c)),window==null||window.addEventListener("resize",this.toggleFooterShadow),(d=this.content)==null||d.addEventListener("scroll",this.toggleFooterShadow)):((a=(l=this.dialog)==null?void 0:l.close)==null||a.call(l),this.onClose({isOpen:!1},{bubbles:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow),(n=this.content)==null||n.removeEventListener("scroll",this.toggleFooterShadow))}closeDialog(e){this.onRequestClose({source:e},{cancelable:!0}).defaultPrevented||(this.open=!1)}renderFooter(){return this._hasFooter?r`<footer>
-          <slot name="primary-action"></slot>
-          <slot name="secondary-action"></slot>
-          <slot name="tertiary-action"></slot>
-        </footer>`:""}renderContainer(){let e=this.caption?r`<h2 id="dialog-caption">${this.caption}</h2>`:"",i={container:!0,"has-footer":this._hasFooter};return r` <div class="${x(i)}">
-      <header>
-        ${e}
-        <bl-button
-          @click="${()=>this.closeDialog("close-button")}"
-          icon="close"
-          variant="tertiary"
-          kind="neutral"
-        ></bl-button>
-      </header>
-      <section class="content"><slot></slot></section>
-      ${this.renderFooter()}
-    </div>`}render(){return this.polyfilled||!window.HTMLDialogElement?r`<div
-          class="dialog-polyfill"
-          role="dialog"
-          aria-labelledby="dialog-caption"
-          @click=${this.clickOutsideHandler}
-        >
-          ${this.renderContainer()}
-        </div>`:r`
-          <dialog
-            class="dialog"
-            aria-labelledby="dialog-caption"
-            @click=${this.clickOutsideHandler}
-          >
-            ${this.renderContainer()}
-          </dialog>
-        `}};o([p({type:Boolean,reflect:!0,hasChanged(v,u){return v===!1&&u===void 0?!1:v!==u}})],t.prototype,"open",2),o([p({type:String})],t.prototype,"caption",2),o([p({type:Boolean,reflect:!0})],t.prototype,"polyfilled",2),o([s(".dialog")],t.prototype,"dialog",2),o([s("footer")],t.prototype,"footer",2),o([s(".container")],t.prototype,"container",2),o([s(".content")],t.prototype,"content",2),o([h("bl-dialog-open")],t.prototype,"onOpen",2),o([h("bl-dialog-request-close")],t.prototype,"onRequestClose",2),o([h("bl-dialog-close")],t.prototype,"onClose",2),t=o([y("bl-dialog")],t);export{t as a};
-//# sourceMappingURL=chunk-4DWODYIT.js.map

package/dist/chunk-4DWODYIT.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport style from \"./bl-dialog.css\";\n\ntype DialogElement = {\n  showModal: () => void;\n  close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n */\n@customElement(\"bl-dialog\")\nexport default class BlDialog extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets dialog open-close status\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    hasChanged(newVal: boolean, oldVal: boolean | undefined) {\n      if (newVal === false && oldVal === undefined) {\n        // Assume that the initial value is false\n        return false;\n      }\n      return newVal !== oldVal;\n    },\n  })\n  open = false;\n\n  /**\n   * Sets the dialog title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  /**\n   * Determines if dialog currently uses polyfilled version instead of native HTML Dialog. By\n   * default, it uses native Dialog if the browser supports it, otherwise polyfills. You can force\n   * using polyfill by setting this to true in some cases like to show some content on top of dialog\n   * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some\n   * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.\n   *\n   * As of the current implementation, you can render above the dialog HTML element using the Popover API. However,\n   * it will block any actions on the Popover element. This issue was encountered during the development of the `bl-notification` component.\n   * As a result, we decided to enable the polyfill for the `bl-dialog` component by default. If you prefer to use the native dialog, you can set\n   * this property to false. Please note, doing so will cause notifications to render under the dialog backdrop.\n   * For more information, refer to the comment linked below:\n   *\n   * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413\n   */\n  @property({ type: Boolean, reflect: true })\n  polyfilled = true;\n\n  @query(\".dialog\")\n  private dialog: HTMLDialogElement & DialogElement;\n\n  @query(\"footer\")\n  private footer: HTMLElement;\n\n  @query(\".container\")\n  private container: HTMLElement;\n\n  @query(\".content\")\n  private content: HTMLElement;\n\n  /**\n   * Fires when the dialog is opened\n   */\n  @event(\"bl-dialog-open\") private onOpen: EventDispatcher<object>;\n\n  /**\n   * Fires before the dialog is closed with internal actions like clicking close button,\n   * pressing Escape key or clicking backdrop. Can be prevented by calling `event.preventDefault()`\n   */\n  @event(\"bl-dialog-request-close\") private onRequestClose: EventDispatcher<{\n    source: \"close-button\" | \"keyboard\" | \"backdrop\";\n  }>;\n\n  /**\n   * Fires when the dialog is closed\n   */\n  @event(\"bl-dialog-close\") private onClose: EventDispatcher<object>;\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"open\") || changedProperties.has(\"polyfilled\")) {\n      this.toggleDialogHandler();\n    }\n  }\n\n  private get _hasFooter() {\n    return [...this.childNodes].some(node => node.nodeName === \"BL-BUTTON\");\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      this.dialog?.showModal?.();\n      this.onOpen({ isOpen: true });\n      document.body.style.overflow = \"hidden\";\n      this.toggleFooterShadow();\n      window?.addEventListener(\"keydown\", event => this.onKeydown(event));\n      window?.addEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.addEventListener(\"scroll\", this.toggleFooterShadow);\n    } else {\n      this.dialog?.close?.();\n      this.onClose({ isOpen: false }, { bubbles: false });\n      document.body.style.overflow = \"auto\";\n      window?.removeEventListener(\"keydown\", this.onKeydown);\n      window?.removeEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.removeEventListener(\"scroll\", this.toggleFooterShadow);\n    }\n  }\n\n  private closeDialog(source: \"close-button\" | \"keyboard\" | \"backdrop\") {\n    const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });\n\n    if (requestCloseEvent.defaultPrevented) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  private clickOutsideHandler = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath.includes(this.container)) {\n      this.closeDialog(\"backdrop\");\n    }\n  };\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === \"Escape\" && this.open) {\n      event.preventDefault();\n      this.closeDialog(\"keyboard\");\n    }\n  };\n\n  private toggleFooterShadow = () => {\n    const scrollTop = this.content?.scrollTop;\n    const scrollHeight = this.content?.scrollHeight;\n    const clientHeight = this.content?.clientHeight;\n\n    if (scrollTop + clientHeight >= scrollHeight) {\n      this.footer?.classList?.remove(\"shadow\");\n    } else {\n      this.footer?.classList?.add(\"shadow\");\n    }\n  };\n\n  private renderFooter() {\n    return this._hasFooter\n      ? html`<footer>\n          <slot name=\"primary-action\"></slot>\n          <slot name=\"secondary-action\"></slot>\n          <slot name=\"tertiary-action\"></slot>\n        </footer>`\n      : \"\";\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : \"\";\n\n    const classes = {\n      \"container\": true,\n      \"has-footer\": this._hasFooter,\n    };\n\n    return html` <div class=\"${classMap(classes)}\">\n      <header>\n        ${title}\n        <bl-button\n          @click=\"${() => this.closeDialog(\"close-button\")}\"\n          icon=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n        ></bl-button>\n      </header>\n      <section class=\"content\"><slot></slot></section>\n      ${this.renderFooter()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    return this.polyfilled || !window.HTMLDialogElement\n      ? html`<div\n          class=\"dialog-polyfill\"\n          role=\"dialog\"\n          aria-labelledby=\"dialog-caption\"\n          @click=${this.clickOutsideHandler}\n        >\n          ${this.renderContainer()}\n        </div>`\n      : html`\n          <dialog\n            class=\"dialog\"\n            aria-labelledby=\"dialog-caption\"\n            @click=${this.clickOutsideHandler}\n          >\n            ${this.renderContainer()}\n          </dialog>\n        `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-dialog\": BlDialog;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "_a", "_b", "_c", "_d", "_e", "_f", "_g", "scrollTop", "scrollHeight", "clientHeight", "bl_dialog_default", "changedProperties", "node", "source", "x", "title", "classes", "o", "__decorateClass", "e", "newVal", "oldVal", "i"]
-}

package/dist/chunk-PACDVPAB.js

@@ -1,26 +0,0 @@
-import{a as l}from"./chunk-GRL4DWKG.js";import{a as p,b as n,c as b}from"./chunk-5MOOXA2X.js";import{a as c,b as r,f as h}from"./chunk-4OT5AMS5.js";import{d as i}from"./chunk-IZ2LK5GK.js";var u=d=>{let o=d.match(/^(\d+(\.\d+)?)(.*)$/);if(!o)return null;let e=parseFloat(o[1]),a=o[3],s;switch(a){case"px":s=e;break;case"vw":s=e*window.innerWidth/100;break;case"%":s=e*window.innerWidth/100;break;default:s=null;break}return s};var v=c`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:var(--bl-drawer-current-width, 424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top), var(--bl-size-xl));padding-right:max(env(safe-area-inset-right), var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom), var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, 0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`,m=v;var t=class extends h{constructor(){super(...arguments);this.open=!1;this.width="424px";this.domExistence=!1}static get styles(){return[m]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",e=>{e.target!==this&&this.closeDrawer()}),this.resizeDrawerWidth(),window==null||window.addEventListener("resize",()=>this.resizeDrawerWidth()),window==null||window.addEventListener("load",()=>this.resizeDrawerWidth())}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",()=>this.resizeDrawerWidth()),window==null||window.addEventListener("load",()=>this.resizeDrawerWidth())}updated(e){e.has("open")&&this.toggleDialogHandler(),e.has("width")&&this.resizeDrawerWidth()}resizeDrawerWidth(){let e=u(this.width),a=!e||e<100?"424px":this.width;e&&((window==null?void 0:window.innerWidth)<e?this.style.setProperty("--bl-drawer-current-width","calc(100vw - 24px)"):this.style.setProperty("--bl-drawer-current-width",a))}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let e=this.embedUrl?r`<iframe src=${this.embedUrl}></iframe>`:r`<slot></slot>`;return r`<section class=${this.embedUrl?"iframe-content":"content"}>
-      ${e}
-    </section>`}renderContainer(){let e=this.caption?r`<h2 id="drawer-caption">${this.caption}</h2>`:"",a=this.externalLink?r`<bl-button
-          icon="external_link"
-          variant="tertiary"
-          kind="neutral"
-          size="small"
-          href="${this.externalLink}"
-          target="_blank"
-        ></bl-button>`:"";return r`<div class="container">
-      <header>
-        ${e}
-        <div class="header-buttons">
-          ${a}
-          <bl-button
-            @click="${this.closeDrawer}"
-            icon="close"
-            size="small"
-            variant="tertiary"
-            kind="neutral"
-          ></bl-button>
-        </div>
-      </header>
-      ${this.renderContent()}
-    </div>`}render(){return this.domExistence?r`<div class="drawer">${this.renderContainer()}</div>`:r``}};i([n({type:Boolean,reflect:!0})],t.prototype,"open",2),i([n({type:String})],t.prototype,"caption",2),i([n({type:String,attribute:"embed-url"})],t.prototype,"embedUrl",2),i([n({type:String,attribute:"external-link"})],t.prototype,"externalLink",2),i([n({type:String,attribute:"width"})],t.prototype,"width",2),i([l("bl-drawer-open")],t.prototype,"onOpen",2),i([l("bl-drawer-close")],t.prototype,"onClose",2),i([b()],t.prototype,"domExistence",2),t=i([p("bl-drawer")],t);export{t as a};
-//# sourceMappingURL=chunk-PACDVPAB.js.map

package/dist/chunk-PACDVPAB.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/utilities/style-to-px.converter.ts", "../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
-  "sourcesContent": ["export const styleToPixelConverter = (styleValue: string): number | null => {\n  const match = styleValue.match(/^(\\d+(\\.\\d+)?)(.*)$/);\n\n  if (!match) return null;\n\n  const value = parseFloat(match[1]);\n  const unit = match[3];\n\n  let styleInPixel: number | null;\n\n  switch (unit) {\n    case \"px\":\n      styleInPixel = value;\n      break;\n    case \"vw\":\n      styleInPixel = (value * window.innerWidth) / 100;\n      break;\n    case \"%\":\n      styleInPixel = (value * window.innerWidth) / 100;\n      break;\n    default:\n      styleInPixel = null;\n      break;\n  }\n  return styleInPixel;\n};\n", "import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:var(--bl-drawer-current-width, 424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top), var(--bl-size-xl));padding-right:max(env(safe-area-inset-right), var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom), var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, 0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { styleToPixelConverter } from \"../../utilities/style-to-px.converter\";\nimport \"../button/bl-button\";\nimport style from \"./bl-drawer.css\";\n\n/**\n * @tag bl-drawer\n * @summary Baklava Drawer component\n *\n * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration\n */\n\n@customElement(\"bl-drawer\")\nexport default class BlDrawer extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets drawer open-close status\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   *  Sets the drawer title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  /**\n   *  Sets the drawer embed url for iframe\n   */\n  @property({ type: String, attribute: \"embed-url\" })\n  embedUrl?: string;\n\n  /**\n   *  Sets the drawer external link\n   */\n  @property({ type: String, attribute: \"external-link\" })\n  externalLink?: string;\n\n  /**\n   *  Sets the drawer width\n   */\n  @property({ type: String, attribute: \"width\" })\n  width: string = \"424px\";\n\n  /**\n   * Fires when the drawer is opened\n   */\n  @event(\"bl-drawer-open\") private onOpen: EventDispatcher<string>;\n\n  /**\n   * Fires when the drawer is closed\n   */\n  @event(\"bl-drawer-close\") private onClose: EventDispatcher<string>;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window?.addEventListener(\"bl-drawer-open\", event => {\n      if (event.target !== this) this.closeDrawer();\n    });\n    this.resizeDrawerWidth();\n\n    window?.addEventListener(\"resize\", () => this.resizeDrawerWidth());\n    window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window?.removeEventListener(\"resize\", () => this.resizeDrawerWidth());\n    window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"open\")) {\n      this.toggleDialogHandler();\n    }\n\n    if (changedProperties.has(\"width\")) {\n      this.resizeDrawerWidth();\n    }\n  }\n\n  private domExistenceSchedule: number;\n\n  private resizeDrawerWidth() {\n    const drawerWidth = styleToPixelConverter(this.width);\n\n    const newWidth = !drawerWidth || drawerWidth < 100 ? \"424px\" : this.width;\n\n    if (drawerWidth) {\n      if (window?.innerWidth < drawerWidth) {\n        this.style.setProperty(\"--bl-drawer-current-width\", \"calc(100vw - 24px)\");\n      } else {\n        this.style.setProperty(\"--bl-drawer-current-width\", newWidth);\n      }\n    }\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      if (this.domExistenceSchedule) {\n        clearTimeout(this.domExistenceSchedule);\n      }\n\n      this.domExistence = true;\n      // FIXME: Allow events without payload\n      this.onOpen(\"\");\n    } else {\n      // Give some time for exit animation\n      this.domExistenceSchedule = window.setTimeout(() => {\n        this.domExistence = false;\n      }, 1000);\n\n      // FIXME: Allow events without payload\n      this.onClose(\"\");\n    }\n  }\n\n  @state() private domExistence = false;\n\n  private closeDrawer() {\n    this.open = false;\n  }\n\n  private renderContent() {\n    const content = this.embedUrl\n      ? html`<iframe src=${this.embedUrl}></iframe>`\n      : html`<slot></slot>`;\n\n    return html`<section class=${this.embedUrl ? \"iframe-content\" : \"content\"}>\n      ${content}\n    </section>`;\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : \"\";\n    const external_button = this.externalLink\n      ? html`<bl-button\n          icon=\"external_link\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          size=\"small\"\n          href=\"${this.externalLink}\"\n          target=\"_blank\"\n        ></bl-button>`\n      : \"\";\n\n    return html`<div class=\"container\">\n      <header>\n        ${title}\n        <div class=\"header-buttons\">\n          ${external_button}\n          <bl-button\n            @click=\"${this.closeDrawer}\"\n            icon=\"close\"\n            size=\"small\"\n            variant=\"tertiary\"\n            kind=\"neutral\"\n          ></bl-button>\n        </div>\n      </header>\n      ${this.renderContent()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    if (this.domExistence) {\n      return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n    } else {\n      return html``;\n    }\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-drawer\": BlDrawer;\n  }\n}\n"],
-  "mappings": "4LAAO,IAAMA,EAAyBC,GAAsC,CAC1E,IAAMC,EAAQD,EAAW,MAAM,qBAAqB,EAEpD,GAAI,CAACC,EAAO,OAAO,KAEnB,IAAMC,EAAQ,WAAWD,EAAM,CAAC,CAAC,EAC3BE,EAAOF,EAAM,CAAC,EAEhBG,EAEJ,OAAQD,EAAM,CACZ,IAAK,KACHC,EAAeF,EACf,MACF,IAAK,KACHE,EAAgBF,EAAQ,OAAO,WAAc,IAC7C,MACF,IAAK,IACHE,EAAgBF,EAAQ,OAAO,WAAc,IAC7C,MACF,QACEE,EAAe,KACf,KACJ,CACA,OAAOA,CACT,ECxBO,IAAMC,EAASC,mjCACfC,EAAQF,ECcf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,UAAO,GAwBP,WAAgB,QA2EP,KAAQ,aAAe,GA3GhC,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA0CA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,qBAAQ,iBAAiB,iBAAkBC,GAAS,CAC9CA,EAAM,SAAW,MAAM,KAAK,YAAY,CAC9C,GACA,KAAK,kBAAkB,EAEvB,qBAAQ,iBAAiB,SAAU,IAAM,KAAK,kBAAkB,GAChE,qBAAQ,iBAAiB,OAAQ,IAAM,KAAK,kBAAkB,EAChE,CAEA,sBAA6B,CAC3B,MAAM,qBAAqB,EAC3B,qBAAQ,oBAAoB,SAAU,IAAM,KAAK,kBAAkB,GACnE,qBAAQ,iBAAiB,OAAQ,IAAM,KAAK,kBAAkB,EAChE,CAEA,QAAQC,EAAyC,CAC3CA,EAAkB,IAAI,MAAM,GAC9B,KAAK,oBAAoB,EAGvBA,EAAkB,IAAI,OAAO,GAC/B,KAAK,kBAAkB,CAE3B,CAIQ,mBAAoB,CAC1B,IAAMC,EAAcC,EAAsB,KAAK,KAAK,EAE9CC,EAAW,CAACF,GAAeA,EAAc,IAAM,QAAU,KAAK,MAEhEA,KACE,2BAAQ,YAAaA,EACvB,KAAK,MAAM,YAAY,4BAA6B,oBAAoB,EAExE,KAAK,MAAM,YAAY,4BAA6BE,CAAQ,EAGlE,CAEQ,qBAAsB,CACxB,KAAK,MACH,KAAK,sBACP,aAAa,KAAK,oBAAoB,EAGxC,KAAK,aAAe,GAEpB,KAAK,OAAO,EAAE,IAGd,KAAK,qBAAuB,OAAO,WAAW,IAAM,CAClD,KAAK,aAAe,EACtB,EAAG,GAAI,EAGP,KAAK,QAAQ,EAAE,EAEnB,CAIQ,aAAc,CACpB,KAAK,KAAO,EACd,CAEQ,eAAgB,CACtB,IAAMC,EAAU,KAAK,SACjBC,gBAAmB,KAAK,qBACxBA,iBAEJ,OAAOA,mBAAsB,KAAK,SAAW,iBAAmB;AAAA,QAC5DD;AAAA,eAEN,CAEQ,iBAAkB,CACxB,IAAME,EAAQ,KAAK,QAAUD,4BAA+B,KAAK,eAAiB,GAC5EE,EAAkB,KAAK,aACzBF;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKU,KAAK;AAAA;AAAA,uBAGf,GAEJ,OAAOA;AAAA;AAAA,UAEDC;AAAA;AAAA,YAEEC;AAAA;AAAA,sBAEU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQnB,KAAK,cAAc;AAAA,WAEzB,CAEA,QAAyB,CACvB,OAAI,KAAK,aACAF,wBAA2B,KAAK,gBAAgB,UAEhDA,GAEX,CACF,EAzJEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBb,EASnB,oBAMAY,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPb,EAenB,uBAMAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,GApB/Bb,EAqBnB,wBAMAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,eAAgB,CAAC,GA1BnCb,EA2BnB,4BAMAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,OAAQ,CAAC,GAhC3Bb,EAiCnB,qBAKiCY,EAAA,CAAhCT,EAAM,gBAAgB,GAtCJH,EAsCc,sBAKCY,EAAA,CAAjCT,EAAM,iBAAiB,GA3CLH,EA2Ce,uBAiEjBY,EAAA,CAAhBE,EAAM,GA5GYd,EA4GF,4BA5GEA,EAArBY,EAAA,CADCC,EAAc,WAAW,GACLb",
-  "names": ["styleToPixelConverter", "styleValue", "match", "value", "unit", "styleInPixel", "styles", "i", "bl_drawer_default", "BlDrawer", "s", "bl_drawer_default", "event", "changedProperties", "drawerWidth", "styleToPixelConverter", "newWidth", "content", "x", "title", "external_button", "__decorateClass", "e", "t"]
-}