@trendyol/baklava 3.3.1-beta.3 → 3.3.1-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/baklava.js CHANGED
@@ -1,2 +1,2 @@
1
- import{b as q}from"./chunk-EZJ3WW6Y.js";import{b as N}from"./chunk-GISZRI4I.js";import{b as z}from"./chunk-JC4VETUE.js";import{b as j}from"./chunk-5EAI6722.js";import{b as O}from"./chunk-Y2Q465TD.js";import{b as y}from"./chunk-J5YZ4HBV.js";import{b as v}from"./chunk-P5TOP3NH.js";import{a as F}from"./chunk-G4DOH6BQ.js";import{a as D}from"./chunk-STZJ3LBU.js";import{a as t}from"./chunk-APLBTZ36.js";import{a as T}from"./chunk-QDYWH7BU.js";import{c as b,f as P}from"./chunk-X5XH4HTW.js";import{b as R}from"./chunk-4BLKAURK.js";import{a as C}from"./chunk-5TPDRTCU.js";import{a as g}from"./chunk-WPESQSKX.js";import{a as w}from"./chunk-QF4LGACD.js";import{a as s}from"./chunk-MWG4TBH7.js";import{b as G,d as k,f as A}from"./chunk-NXVLNG4L.js";import{b as S}from"./chunk-HYBPEELZ.js";import{b as H}from"./chunk-SBCJY5IU.js";import{a as c}from"./chunk-H4WETBHJ.js";import{a as i}from"./chunk-2IJL7HNY.js";import{a as n}from"./chunk-RER7OLAQ.js";import{b as u,e as x}from"./chunk-MWFGDECP.js";import{a as J}from"./chunk-GFBXJPT6.js";import{a as h}from"./chunk-DE3A37FL.js";import{b as I}from"./chunk-UOGCEUXK.js";import"./chunk-EZSEQHRH.js";import{a as m}from"./chunk-WC5CTIZH.js";import"./chunk-23PSWIUF.js";import{b as E}from"./chunk-OTAAXK2L.js";import"./chunk-IPYZIIRV.js";import"./chunk-WEEGH2F4.js";import"./chunk-EG7U7PM3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import"./chunk-AYJMIZZ3.js";import{a as B}from"./chunk-OXHRXOBD.js";import{b as d}from"./chunk-4UO3W4WP.js";import{b as p}from"./chunk-ZE7GYACV.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-ZLJF4SVG.js";import{a as l}from"./chunk-ERL6CBPO.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-T5MEA7JO.js";import{a as e,b as a,c as r}from"./chunk-BH64QNLE.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{t as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,d as BlButton,E as BlCalendar,u as BlCheckbox,x as BlCheckboxGroup,J as BlDatePicker,B as BlDialog,s as BlDrawer,A as BlDropdown,S as BlDropdownGroup,k as BlDropdownItem,r as BlIcon,m as BlInput,H as BlNotification,N as BlNotificationCard,c as BlPagination,I as BlPopover,T as BlProgressIndicator,b as BlRadio,P as BlRadioGroup,i as BlSelect,n as BlSelectOption,p as BlSpinner,G as BlSplitButton,R as BlSwitch,g as BlTab,C as BlTabGroup,w as BlTabPanel,v as BlTable,O as BlTableBody,z as BlTableCell,y as BlTableHeader,q as BlTableHeaderCell,j as BlTableRow,F as BlTag,D as BlTextarea,h as BlTooltip,a as getIconPath,e as setIconPath};
1
+ import{b as q}from"./chunk-EZJ3WW6Y.js";import{b as N}from"./chunk-GISZRI4I.js";import{b as z}from"./chunk-JC4VETUE.js";import{b as j}from"./chunk-5EAI6722.js";import{b as O}from"./chunk-Y2Q465TD.js";import{b as y}from"./chunk-J5YZ4HBV.js";import{b as v}from"./chunk-P5TOP3NH.js";import{a as F}from"./chunk-G4DOH6BQ.js";import{a as D}from"./chunk-STZJ3LBU.js";import{a as t}from"./chunk-APLBTZ36.js";import{a as T}from"./chunk-QDYWH7BU.js";import{c as b,f as P}from"./chunk-X5XH4HTW.js";import{b as R}from"./chunk-4BLKAURK.js";import{a as C}from"./chunk-5TPDRTCU.js";import{a as g}from"./chunk-WPESQSKX.js";import{a as w}from"./chunk-QF4LGACD.js";import{a as s}from"./chunk-MWG4TBH7.js";import{b as G,d as k,f as A}from"./chunk-NXVLNG4L.js";import{b as S}from"./chunk-HYBPEELZ.js";import{b as H}from"./chunk-SBCJY5IU.js";import{a as c}from"./chunk-H4WETBHJ.js";import{a as i}from"./chunk-2IJL7HNY.js";import{a as n}from"./chunk-RER7OLAQ.js";import{b as u,e as x}from"./chunk-MWFGDECP.js";import{a as J}from"./chunk-GFBXJPT6.js";import{a as h}from"./chunk-DE3A37FL.js";import{b as I}from"./chunk-UOGCEUXK.js";import"./chunk-EZSEQHRH.js";import{a as m}from"./chunk-WC5CTIZH.js";import"./chunk-23PSWIUF.js";import{b as E}from"./chunk-OTAAXK2L.js";import"./chunk-IPYZIIRV.js";import"./chunk-WEEGH2F4.js";import"./chunk-EG7U7PM3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import"./chunk-AYJMIZZ3.js";import{a as B}from"./chunk-QKII4FCI.js";import{b as d}from"./chunk-4UO3W4WP.js";import{b as p}from"./chunk-ZE7GYACV.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-ZLJF4SVG.js";import{a as l}from"./chunk-ERL6CBPO.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-T5MEA7JO.js";import{a as e,b as a,c as r}from"./chunk-BH64QNLE.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{t as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,d as BlButton,E as BlCalendar,u as BlCheckbox,x as BlCheckboxGroup,J as BlDatePicker,B as BlDialog,s as BlDrawer,A as BlDropdown,S as BlDropdownGroup,k as BlDropdownItem,r as BlIcon,m as BlInput,H as BlNotification,N as BlNotificationCard,c as BlPagination,I as BlPopover,T as BlProgressIndicator,b as BlRadio,P as BlRadioGroup,i as BlSelect,n as BlSelectOption,p as BlSpinner,G as BlSplitButton,R as BlSwitch,g as BlTab,C as BlTabGroup,w as BlTabPanel,v as BlTable,O as BlTableBody,z as BlTableCell,y as BlTableHeader,q as BlTableHeaderCell,j as BlTableRow,F as BlTag,D as BlTextarea,h as BlTooltip,a as getIconPath,e as setIconPath};
2
2
  //# sourceMappingURL=baklava.js.map
@@ -0,0 +1,32 @@
1
+ import{a as E}from"./chunk-6LT7O7T2.js";import{a as p}from"./chunk-GRL4DWKG.js";import{a as w,b as d,c as x,e as c}from"./chunk-5MOOXA2X.js";import{a as m,b as r,f as y}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var z=m`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);width:var(--bl-dialog-width,auto);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;inset-inline-start: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:flex-start;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bl-dialog-caption-line-clamp,1);margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.container.has-footer .content{padding-bottom:0}footer{display:none}.container.has-footer footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{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}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`,k=z;var t=class extends y{constructor(){super(...arguments);this.open=!1;this.critical=!1;this.polyfilled=!0;this._footerAssignedSlots=new Set;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,s,n,h,v,u,f;let e=(l=this.content)==null?void 0:l.scrollTop,i=(s=this.content)==null?void 0:s.scrollHeight,a=(n=this.content)==null?void 0:n.clientHeight;e+a>=i?(v=(h=this.footer)==null?void 0:h.classList)==null||v.remove("shadow"):(f=(u=this.footer)==null?void 0:u.classList)==null||f.add("shadow")}}static get styles(){return[k]}updated(e){(e.has("open")||e.has("polyfilled"))&&this.toggleDialogHandler()}get _hasFooter(){return this._footerAssignedSlots.size>0}toggleDialogHandler(){var e,i,a,l,s,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",h=>this.onKeydown(h)),window==null||window.addEventListener("resize",this.toggleFooterShadow),(a=this.content)==null||a.addEventListener("scroll",this.toggleFooterShadow)):((s=(l=this.dialog)==null?void 0:l.close)==null||s.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)}toggleFooterVisibility(e){let i=e.currentTarget;i.assignedNodes().length>0?this._footerAssignedSlots.add(i.name):this._footerAssignedSlots.delete(i.name),this.requestUpdate("_footerAssignedSlots")}renderContainer(){let e=this.caption?r`<h2 id="dialog-caption">${this.caption}</h2>`:"",i=this.critical?null:r`<bl-button
2
+ @click="${()=>this.closeDialog("close-button")}"
3
+ icon="close"
4
+ label="close"
5
+ variant="tertiary"
6
+ kind="neutral"
7
+ size="small"
8
+ ></bl-button>`,a={container:!0,"has-footer":this._hasFooter};return r` <div class="${E(a)}">
9
+ <header>${e} ${i}</header>
10
+ <section class="content"><slot></slot></section>
11
+ <footer>
12
+ <slot name="primary-action" @slotchange=${this.toggleFooterVisibility}></slot>
13
+ <slot name="secondary-action" @slotchange=${this.toggleFooterVisibility}></slot>
14
+ <slot name="tertiary-action" @slotchange=${this.toggleFooterVisibility}></slot>
15
+ </footer>
16
+ </div>`}render(){return this.polyfilled||!window.HTMLDialogElement?r`<div
17
+ class="dialog-polyfill"
18
+ role="dialog"
19
+ aria-labelledby="dialog-caption"
20
+ @click=${this.clickOutsideHandler}
21
+ >
22
+ ${this.renderContainer()}
23
+ </div>`:r`
24
+ <dialog
25
+ class="dialog"
26
+ aria-labelledby="dialog-caption"
27
+ @click=${this.clickOutsideHandler}
28
+ >
29
+ ${this.renderContainer()}
30
+ </dialog>
31
+ `}};o([d({type:Boolean,reflect:!0,hasChanged(g,b){return g===!1&&b===void 0?!1:g!==b}})],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([x()],t.prototype,"_footerAssignedSlots",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([p("bl-dialog-open")],t.prototype,"onOpen",2),o([p("bl-dialog-request-close")],t.prototype,"onRequestClose",2),o([p("bl-dialog-close")],t.prototype,"onClose",2),t=o([w("bl-dialog")],t);export{t as a};
32
+ //# sourceMappingURL=chunk-QKII4FCI.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
4
+ "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);width:var(--bl-dialog-width,auto);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;inset-inline-start: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:flex-start;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bl-dialog-caption-line-clamp,1);margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.container.has-footer .content{padding-bottom:0}footer{display:none}.container.has-footer footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{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}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } 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 * @cssproperty [--bl-dialog-width=auto] Sets the width of the dialog content\n * @cssproperty [--bl-dialog-caption-line-clamp=1] Sets the line clamp of the caption\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 @state()\n private _footerAssignedSlots = new Set<string>();\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._footerAssignedSlots.size > 0;\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 toggleFooterVisibility(e: Event) {\n const slot = e.currentTarget as HTMLSlotElement;\n\n if (slot.assignedNodes().length > 0) {\n this._footerAssignedSlots.add(slot.name);\n } else {\n this._footerAssignedSlots.delete(slot.name);\n }\n this.requestUpdate(\"_footerAssignedSlots\");\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 label=\"close\"\n variant=\"tertiary\"\n kind=\"neutral\"\n size=\"small\"\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 <footer>\n <slot name=\"primary-action\" @slotchange=${this.toggleFooterVisibility}></slot>\n <slot name=\"secondary-action\" @slotchange=${this.toggleFooterVisibility}></slot>\n <slot name=\"tertiary-action\" @slotchange=${this.toggleFooterVisibility}></slot>\n </footer>\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"],
5
+ "mappings": "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",
6
+ "names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "_a", "_b", "_c", "_d", "_e", "_f", "_g", "scrollTop", "scrollHeight", "clientHeight", "bl_dialog_default", "changedProperties", "source", "slot", "title", "x", "closeButton", "classes", "o", "__decorateClass", "e", "newVal", "oldVal", "t", "i"]
7
+ }
@@ -37,6 +37,7 @@ export default class BlDialog extends LitElement {
37
37
  * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413
38
38
  */
39
39
  polyfilled: boolean;
40
+ private _footerAssignedSlots;
40
41
  private dialog;
41
42
  private footer;
42
43
  private container;
@@ -61,7 +62,7 @@ export default class BlDialog extends LitElement {
61
62
  private clickOutsideHandler;
62
63
  private onKeydown;
63
64
  private toggleFooterShadow;
64
- private renderFooter;
65
+ private toggleFooterVisibility;
65
66
  private renderContainer;
66
67
  render(): TemplateResult;
67
68
  }
@@ -1 +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;;;;;;GAMG;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;IAyBvB,MAAM,IAAI,cAAc;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
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;;;;;;GAMG;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,oBAAoB,CAAqB;IAGjD,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,sBAAsB;IAW9B,OAAO,CAAC,eAAe;IA6BvB,MAAM,IAAI,cAAc;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-OXHRXOBD.js";import"../../chunk-4UO3W4WP.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.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};
1
+ import{a}from"../../chunk-QKII4FCI.js";import"../../chunk-4UO3W4WP.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.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};
2
2
  //# sourceMappingURL=bl-dialog.js.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@trendyol/baklava",
3
3
  "type": "module",
4
- "version": "3.3.1-beta.3",
4
+ "version": "3.3.1-beta.4",
5
5
  "description": "Trendyol Baklava Design System",
6
6
  "main": "dist/baklava.js",
7
7
  "module": "dist/baklava.js",
@@ -1,32 +0,0 @@
1
- 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 a,f as w}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var E=m`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);width:var(--bl-dialog-width,auto);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;inset-inline-start: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:flex-start;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bl-dialog-caption-line-clamp,1);margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.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{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}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`,k=E;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,v,g,f;let e=(l=this.content)==null?void 0:l.scrollTop,i=(n=this.content)==null?void 0:n.scrollHeight,r=(s=this.content)==null?void 0:s.clientHeight;e+r>=i?(v=(p=this.footer)==null?void 0:p.classList)==null||v.remove("shadow"):(f=(g=this.footer)==null?void 0:g.classList)==null||f.add("shadow")}}static get styles(){return[k]}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,r,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),(r=this.content)==null||r.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?a`<footer>
2
- <slot name="primary-action"></slot>
3
- <slot name="secondary-action"></slot>
4
- <slot name="tertiary-action"></slot>
5
- </footer>`:""}renderContainer(){let e=this.caption?a`<h2 id="dialog-caption">${this.caption}</h2>`:"",i=this.critical?null:a`<bl-button
6
- @click="${()=>this.closeDialog("close-button")}"
7
- icon="close"
8
- label="close"
9
- variant="tertiary"
10
- kind="neutral"
11
- size="small"
12
- ></bl-button>`,r={container:!0,"has-footer":this._hasFooter};return a` <div class="${x(r)}">
13
- <header>${e} ${i}</header>
14
- <section class="content"><slot></slot></section>
15
- ${this.renderFooter()}
16
- </div>`}render(){return this.polyfilled||!window.HTMLDialogElement?a`<div
17
- class="dialog-polyfill"
18
- role="dialog"
19
- aria-labelledby="dialog-caption"
20
- @click=${this.clickOutsideHandler}
21
- >
22
- ${this.renderContainer()}
23
- </div>`:a`
24
- <dialog
25
- class="dialog"
26
- aria-labelledby="dialog-caption"
27
- @click=${this.clickOutsideHandler}
28
- >
29
- ${this.renderContainer()}
30
- </dialog>
31
- `}};o([d({type:Boolean,reflect:!0,hasChanged(b,u){return b===!1&&u===void 0?!1:b!==u}})],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};
32
- //# sourceMappingURL=chunk-OXHRXOBD.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
4
- "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);width:var(--bl-dialog-width,auto);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;inset-inline-start: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:flex-start;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bl-dialog-caption-line-clamp,1);margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.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{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}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`;\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 * @cssproperty [--bl-dialog-width=auto] Sets the width of the dialog content\n * @cssproperty [--bl-dialog-caption-line-clamp=1] Sets the line clamp of the caption\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 label=\"close\"\n variant=\"tertiary\"\n kind=\"neutral\"\n size=\"small\"\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"],
5
- "mappings": "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",
6
- "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"]
7
- }