@trendyol/baklava 3.3.0-beta.22 → 3.3.0-beta.24

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.
Files changed (170) hide show
  1. package/README.md +3 -1
  2. package/dist/baklava-react.d.ts +12 -0
  3. package/dist/baklava-react.d.ts.map +1 -1
  4. package/dist/baklava-react.js +1 -1
  5. package/dist/baklava-react.js.map +3 -3
  6. package/dist/baklava-vue.d.ts +1 -0
  7. package/dist/baklava.d.ts +1 -0
  8. package/dist/baklava.d.ts.map +1 -1
  9. package/dist/baklava.js +1 -1
  10. package/dist/{chunk-OAF3R4PW.js → chunk-2IJL7HNY.js} +2 -2
  11. package/dist/chunk-2IJL7HNY.js.map +7 -0
  12. package/dist/chunk-4BLKAURK.js +16 -0
  13. package/dist/chunk-4BLKAURK.js.map +7 -0
  14. package/dist/chunk-7VMGFJ5X.js +2 -0
  15. package/dist/chunk-7VMGFJ5X.js.map +7 -0
  16. package/dist/chunk-APLBTZ36.js +24 -0
  17. package/dist/chunk-APLBTZ36.js.map +7 -0
  18. package/dist/chunk-DE3A37FL.js +20 -0
  19. package/dist/chunk-DE3A37FL.js.map +7 -0
  20. package/dist/chunk-DIGACNOH.js +21 -0
  21. package/dist/chunk-DIGACNOH.js.map +7 -0
  22. package/dist/chunk-ERL6CBPO.js +31 -0
  23. package/dist/chunk-ERL6CBPO.js.map +7 -0
  24. package/dist/{chunk-5VEXMTA4.js → chunk-H4WETBHJ.js} +2 -2
  25. package/dist/chunk-H4WETBHJ.js.map +7 -0
  26. package/dist/chunk-HYBPEELZ.js +5 -0
  27. package/dist/chunk-HYBPEELZ.js.map +7 -0
  28. package/dist/chunk-HZV6GUII.js +26 -0
  29. package/dist/chunk-HZV6GUII.js.map +7 -0
  30. package/dist/chunk-IDRA37BX.js +59 -0
  31. package/dist/chunk-IDRA37BX.js.map +7 -0
  32. package/dist/chunk-KJUZJAHW.js +84 -0
  33. package/dist/chunk-KJUZJAHW.js.map +7 -0
  34. package/dist/chunk-LEAVDIGF.js +2 -0
  35. package/dist/chunk-LEAVDIGF.js.map +7 -0
  36. package/dist/chunk-MWFGDECP.js +35 -0
  37. package/dist/chunk-MWFGDECP.js.map +7 -0
  38. package/dist/chunk-MWG4TBH7.js +27 -0
  39. package/dist/chunk-MWG4TBH7.js.map +7 -0
  40. package/dist/chunk-NXVLNG4L.js +65 -0
  41. package/dist/chunk-NXVLNG4L.js.map +7 -0
  42. package/dist/chunk-OXHRXOBD.js +32 -0
  43. package/dist/chunk-OXHRXOBD.js.map +7 -0
  44. package/dist/{chunk-CAIHRZ24.js → chunk-Q5D7W6YP.js} +2 -2
  45. package/dist/chunk-Q7CEGCDI.js +50 -0
  46. package/dist/chunk-Q7CEGCDI.js.map +7 -0
  47. package/dist/{chunk-GMVJABPT.js → chunk-QDYWH7BU.js} +2 -2
  48. package/dist/chunk-QDYWH7BU.js.map +7 -0
  49. package/dist/chunk-RER7OLAQ.js +22 -0
  50. package/dist/chunk-RER7OLAQ.js.map +7 -0
  51. package/dist/chunk-SBCJY5IU.js +34 -0
  52. package/dist/{chunk-75V3FKJS.js.map → chunk-SBCJY5IU.js.map} +2 -2
  53. package/dist/chunk-STZJ3LBU.js +37 -0
  54. package/dist/{chunk-KBNVATXF.js.map → chunk-STZJ3LBU.js.map} +2 -2
  55. package/dist/{chunk-4BZSILLM.js → chunk-T5MEA7JO.js} +2 -2
  56. package/dist/chunk-T5MEA7JO.js.map +7 -0
  57. package/dist/chunk-TUUQIEDI.js +25 -0
  58. package/dist/chunk-TUUQIEDI.js.map +7 -0
  59. package/dist/{chunk-BNUJWONI.js → chunk-UOGCEUXK.js} +2 -2
  60. package/dist/chunk-UOGCEUXK.js.map +7 -0
  61. package/dist/chunk-WPESQSKX.js +31 -0
  62. package/dist/chunk-WPESQSKX.js.map +7 -0
  63. package/dist/chunk-X5XH4HTW.js +17 -0
  64. package/dist/chunk-X5XH4HTW.js.map +7 -0
  65. package/dist/{chunk-IGNJQVQF.js → chunk-ZE7GYACV.js} +2 -2
  66. package/dist/chunk-ZE7GYACV.js.map +7 -0
  67. package/dist/{chunk-N4GAO7FQ.js → chunk-ZJBBQHF3.js} +2 -2
  68. package/dist/chunk-ZLJF4SVG.js +4 -0
  69. package/dist/chunk-ZLJF4SVG.js.map +7 -0
  70. package/dist/components/accordion-group/accordion/bl-accordion.js +1 -1
  71. package/dist/components/accordion-group/bl-accordion-group.js +1 -1
  72. package/dist/components/alert/bl-alert.js +1 -1
  73. package/dist/components/badge/bl-badge.js +1 -1
  74. package/dist/components/button/bl-button.js +1 -1
  75. package/dist/components/calendar/bl-calendar.js +1 -1
  76. package/dist/components/checkbox-group/bl-checkbox-group.js +1 -1
  77. package/dist/components/checkbox-group/checkbox/bl-checkbox.js +1 -1
  78. package/dist/components/datepicker/bl-datepicker.js +1 -1
  79. package/dist/components/dialog/bl-dialog.js +1 -1
  80. package/dist/components/dialog/bl-dialog.stories.d.ts +1 -0
  81. package/dist/components/dialog/bl-dialog.stories.d.ts.map +1 -1
  82. package/dist/components/dialog/bl-dialog.stories.js +36 -6
  83. package/dist/components/dialog/bl-dialog.stories.js.map +3 -3
  84. package/dist/components/drawer/bl-drawer.js +1 -1
  85. package/dist/components/dropdown/bl-dropdown.js +1 -1
  86. package/dist/components/dropdown/group/bl-dropdown-group.js +1 -1
  87. package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
  88. package/dist/components/input/bl-input.js +1 -1
  89. package/dist/components/notification/bl-notification.js +1 -1
  90. package/dist/components/notification/bl-notification.stories.d.ts +1 -0
  91. package/dist/components/notification/bl-notification.stories.d.ts.map +1 -1
  92. package/dist/components/notification/bl-notification.stories.js +31 -15
  93. package/dist/components/notification/bl-notification.stories.js.map +3 -3
  94. package/dist/components/notification/card/bl-notification-card.js +1 -1
  95. package/dist/components/pagination/bl-pagination.js +1 -1
  96. package/dist/components/popover/bl-popover.js +1 -1
  97. package/dist/components/progress-indicator/bl-progress-indicator.js +1 -1
  98. package/dist/components/radio-group/bl-radio-group.js +1 -1
  99. package/dist/components/radio-group/radio/bl-radio.js +1 -1
  100. package/dist/components/select/bl-select.js +1 -1
  101. package/dist/components/select/option/bl-select-option.js +1 -1
  102. package/dist/components/spinner/bl-spinner.js +1 -1
  103. package/dist/components/split-button/bl-split-button.js +1 -1
  104. package/dist/components/switch/bl-switch.js +1 -1
  105. package/dist/components/tab-group/bl-tab-group.js +1 -1
  106. package/dist/components/tab-group/tab/bl-tab.js +1 -1
  107. package/dist/components/table/table-cell/bl-table-cell.js +1 -1
  108. package/dist/components/table/table-header/bl-table-header.js +1 -1
  109. package/dist/components/table/table-header-cell/bl-table-header-cell.js +1 -1
  110. package/dist/components/table/table-row/bl-table-row.js +1 -1
  111. package/dist/components/tag/bl-tag.d.ts +52 -0
  112. package/dist/components/tag/bl-tag.d.ts.map +1 -0
  113. package/dist/components/tag/bl-tag.js +2 -0
  114. package/dist/components/tag/bl-tag.js.map +7 -0
  115. package/dist/components/tag/bl-tag.test.d.ts +2 -0
  116. package/dist/components/tag/bl-tag.test.d.ts.map +1 -0
  117. package/dist/components/textarea/bl-textarea.js +1 -1
  118. package/dist/components/tooltip/bl-tooltip.js +1 -1
  119. package/dist/custom-elements.json +112 -0
  120. package/package.json +1 -1
  121. package/dist/chunk-4BZSILLM.js.map +0 -7
  122. package/dist/chunk-4KQZCR3J.js +0 -84
  123. package/dist/chunk-4KQZCR3J.js.map +0 -7
  124. package/dist/chunk-4QFXDW3W.js +0 -31
  125. package/dist/chunk-4QFXDW3W.js.map +0 -7
  126. package/dist/chunk-5VEXMTA4.js.map +0 -7
  127. package/dist/chunk-73RGV4UX.js +0 -16
  128. package/dist/chunk-73RGV4UX.js.map +0 -7
  129. package/dist/chunk-757CMI4A.js +0 -78
  130. package/dist/chunk-757CMI4A.js.map +0 -7
  131. package/dist/chunk-75V3FKJS.js +0 -34
  132. package/dist/chunk-BNUJWONI.js.map +0 -7
  133. package/dist/chunk-FCEMOH4J.js +0 -27
  134. package/dist/chunk-FCEMOH4J.js.map +0 -7
  135. package/dist/chunk-FTQX7CEW.js +0 -35
  136. package/dist/chunk-FTQX7CEW.js.map +0 -7
  137. package/dist/chunk-FVBGMXMC.js +0 -17
  138. package/dist/chunk-FVBGMXMC.js.map +0 -7
  139. package/dist/chunk-GMVJABPT.js.map +0 -7
  140. package/dist/chunk-GXDVWGFU.js +0 -32
  141. package/dist/chunk-GXDVWGFU.js.map +0 -7
  142. package/dist/chunk-IGNJQVQF.js.map +0 -7
  143. package/dist/chunk-ILK55FB6.js +0 -65
  144. package/dist/chunk-ILK55FB6.js.map +0 -7
  145. package/dist/chunk-J45OQI7D.js +0 -20
  146. package/dist/chunk-J45OQI7D.js.map +0 -7
  147. package/dist/chunk-JAZGOWKA.js +0 -2
  148. package/dist/chunk-JAZGOWKA.js.map +0 -7
  149. package/dist/chunk-KBNVATXF.js +0 -37
  150. package/dist/chunk-NGJM4NWA.js +0 -4
  151. package/dist/chunk-NGJM4NWA.js.map +0 -7
  152. package/dist/chunk-OAF3R4PW.js.map +0 -7
  153. package/dist/chunk-QMVEWMEI.js +0 -20
  154. package/dist/chunk-QMVEWMEI.js.map +0 -7
  155. package/dist/chunk-QPODIOFV.js +0 -50
  156. package/dist/chunk-QPODIOFV.js.map +0 -7
  157. package/dist/chunk-T5EQ4OXS.js +0 -2
  158. package/dist/chunk-T5EQ4OXS.js.map +0 -7
  159. package/dist/chunk-UZJOCLOO.js +0 -21
  160. package/dist/chunk-UZJOCLOO.js.map +0 -7
  161. package/dist/chunk-VU6LRFZR.js +0 -26
  162. package/dist/chunk-VU6LRFZR.js.map +0 -7
  163. package/dist/chunk-WXWKIQAK.js +0 -22
  164. package/dist/chunk-WXWKIQAK.js.map +0 -7
  165. package/dist/chunk-X73CSBRO.js +0 -24
  166. package/dist/chunk-X73CSBRO.js.map +0 -7
  167. package/dist/chunk-YZRAUVUQ.js +0 -31
  168. package/dist/chunk-YZRAUVUQ.js.map +0 -7
  169. /package/dist/{chunk-CAIHRZ24.js.map → chunk-Q5D7W6YP.js.map} +0 -0
  170. /package/dist/{chunk-N4GAO7FQ.js.map → chunk-ZJBBQHF3.js.map} +0 -0
@@ -1,27 +0,0 @@
1
- import{a as o}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 r,f as h}from"./chunk-4OT5AMS5.js";import{d as i}from"./chunk-IZ2LK5GK.js";var u=d=>{let l=d.match(/^(\d+(\.\d+)?)(.*)$/);if(!l)return null;let e=parseFloat(l[1]),a=l[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;bottom:0;inset-inline-end: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-inline-end: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)}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-inline-start: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?r`<iframe id="drawer-iframe" src=${this.embedUrl}></iframe>`:r`<slot></slot>`;return r`<section class=${this.embedUrl?"iframe-content":"content"}>
2
- ${e}
3
- </section>`}renderContainer(){let e=this.caption?r`<h2 id="drawer-caption">${this.caption}</h2>`:"",a=this.externalLink?r`<bl-button
4
- icon="external_link"
5
- variant="tertiary"
6
- kind="neutral"
7
- size="small"
8
- href="${this.externalLink}"
9
- target="_blank"
10
- ></bl-button>`:"";return r`<div class="container">
11
- <header>
12
- ${e}
13
- <div class="header-buttons">
14
- ${a}
15
- <bl-button
16
- @click="${this.closeDrawer}"
17
- icon="close"
18
- label="close"
19
- size="small"
20
- variant="tertiary"
21
- kind="neutral"
22
- ></bl-button>
23
- </div>
24
- </header>
25
- ${this.renderContent()}
26
- </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([o("bl-drawer-open")],t.prototype,"onOpen",2),i([o("bl-drawer-close")],t.prototype,"onClose",2),i([b("#drawer-iframe")],t.prototype,"_drawerIframe",2),i([m()],t.prototype,"domExistence",2),t=i([p("bl-drawer")],t);export{t as a};
27
- //# sourceMappingURL=chunk-FCEMOH4J.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/utilities/style-to-px.converter.ts", "../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
4
- "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;bottom:0;inset-inline-end: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-inline-end: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)}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-inline-start: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, PropertyValues, TemplateResult } 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 label=\"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"],
5
- "mappings": "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",
6
- "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"]
7
- }
@@ -1,35 +0,0 @@
1
- import{a as g,c as w}from"./chunk-EG7U7PM3.js";import{a as f}from"./chunk-XDUIVR6I.js";import{a as b}from"./chunk-6LT7O7T2.js";import{a as E}from"./chunk-DINNT5P2.js";import{a as d}from"./chunk-GRL4DWKG.js";import{a as p,b as l,c as m,e as u}from"./chunk-5MOOXA2X.js";import{a as v,b as o,f as c}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var S=v`:host{display:flex;flex-direction:row}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-checkbox-direction, column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}.dirty.invalid .options{margin-bottom:var(--bl-size-3xs)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}`,O=S;var k="bl-checkbox-group",x="bl-checkbox-group-change",r=class extends f(c){constructor(){super(...arguments);this.required=!1;this.dirty=!1;this.focusedOptionIndex=0}static get styles(){return[O]}get options(){return[...this.querySelectorAll(y)]}get checkedOptions(){return this.options.filter(e=>e.checked).map(e=>e.value)}get availableOptions(){return this.options.filter(e=>!e.disabled)}connectedCallback(){var e;super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown),(e=this.form)==null||e.addEventListener("submit",i=>this.handleSubmit(i))}disconnectedCallback(){var e;super.disconnectedCallback(),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("keydown",this.handleKeyDown),(e=this.form)==null||e.removeEventListener("submit",i=>this.handleSubmit(i))}firstUpdated(){this.required&&!this.value&&(this.setValue(null),this.onInvalid(this.internals.validity))}async updated(e){e.has("value")&&(this.setFormValue(),this.checkOptionsValidity(),this.value!==null&&this.onChange(this.value),await this.validationComplete,this.checkValidity()||this.onInvalid(this.internals.validity),this.requestUpdate())}setFormValue(){var e,i;if(this.value!==null&&this.value.length>0){let s=new FormData;(e=this.value)==null||e.forEach(n=>s.append(this.name,`${n}`)),this.setValue(s)}else((i=this.value)==null?void 0:i.length)===0&&this.setValue(null)}handleOptionChecked(){this.dirty=!0,this.value=this.checkedOptions}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if(e.key==="Tab"){if(e.shiftKey?this.focusedOptionIndex--:this.focusedOptionIndex++,this.focusedOptionIndex===this.availableOptions.length){this.tabIndex=0,this.focusedOptionIndex=0;return}}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}handleSubmit(e){this.reportValidity()||(this.onInvalid(this.internals.validity),e.preventDefault()),this.checkOptionsValidity()}checkOptionsValidity(){var e,i;this.checkValidity()?(e=this.options)==null||e.forEach(s=>{var n,h;return(h=(n=s==null?void 0:s.shadowRoot)==null?void 0:n.querySelector("div"))==null?void 0:h.classList.remove("dirty","invalid")}):this.checkValidity()||(i=this.options)==null||i.forEach(s=>{var n,h;return(h=(n=s==null?void 0:s.shadowRoot)==null?void 0:n.querySelector("div"))==null?void 0:h.classList.add("dirty","invalid")})}validityCallback(){return this.customInvalidText?this.customInvalidText:this.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}render(){let e=this.checkValidity()?"":o`<p id="errorMessage" aria-live="polite" class="invalid-text">
2
- ${this.validationMessage}
3
- </p>`,i={dirty:this.dirty,invalid:!this.validity.valid};return o`<div class=${b(i)}>
4
- <fieldset
5
- role="group"
6
- aria-labelledby="label"
7
- aria-required=${this.required}
8
- tabindex=${this.tabIndex}
9
- >
10
- <legend id="label">${this.label}</legend>
11
- <div class="options" @bl-checkbox-change=${this.handleOptionChecked}>
12
- <slot></slot>
13
- </div>
14
- <div class="hint">${e}</div>
15
- </fieldset>
16
- </div>`}};r.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},r.formControlValidators=[g],t([u("fieldset")],r.prototype,"validationTarget",2),t([l()],r.prototype,"name",2),t([l({type:String})],r.prototype,"label",2),t([l({type:Array,reflect:!0})],r.prototype,"value",2),t([l({type:Boolean,reflect:!0})],r.prototype,"required",2),t([l({type:String,attribute:"invalid-text",reflect:!0})],r.prototype,"customInvalidText",2),t([m()],r.prototype,"dirty",2),t([d("bl-checkbox-group-change")],r.prototype,"onChange",2),t([d("bl-checkbox-group-invalid")],r.prototype,"onInvalid",2),r=t([p(k)],r);var M=v`:host{display:inline-block;vertical-align:middle}:host *{outline:none}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none}.label{overflow-wrap:anywhere}.dirty.invalid label{margin-bottom:var(--bl-size-3xs)}.checkbox-container{position:relative}input[type="checkbox"]{appearance:none;outline:none;margin:0;box-sizing:border-box;border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m)}.check-mark{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m);border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-neutral-full);font-size:var(--bl-font-size-2xs);background-color:var(--bl-color-neutral-full)}.required-suffix{color:var(--bl-color-danger);margin-inline-start:calc(var(--bl-size-2xs) * -1)}.dirty.invalid .check-mark{border-color:var(--bl-color-danger)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.dirty.invalid .hint{display:block}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .invalid-text{display:block}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host(:is([checked], [indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:none}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([disabled]) .check-mark{background-color:var(--bl-color-neutral-lightest)}:host(:not([disabled])) input:focus-visible + .check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`,V=M;var y="bl-checkbox",a=class extends f(c){constructor(){super(...arguments);this.checked=!1;this.required=!1;this.disabled=!1;this.indeterminate=!1;this.dirty=!1;this.handleFieldValueChange=e=>{this.checked=e.detail.includes(this.value)}}static get styles(){return[V]}connectedCallback(){var e,i;super.connectedCallback(),this.field=this.closest(k),(e=this.field)==null||e.addEventListener(x,this.handleFieldValueChange),(i=this.form)==null||i.addEventListener("submit",s=>this.handleSubmit(s))}reportValidity(){return this.dirty=!0,this.checkValidity()}disconnectedCallback(){var e,i;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(x,this.handleFieldValueChange),(i=this.form)==null||i.removeEventListener("submit",s=>this.handleSubmit(s))}async updated(e){e.has("checked")&&this.required&&(this.checked?this.setValue("on"):this.checked||this.setValue(""),await this.validationComplete,this.checkValidity()||this.onInvalid(this.internals.validity),this.requestUpdate())}update(e){super.update(e),this.indeterminate&&this.checked&&(this.checked=!1,this.requestUpdate("checked",!0))}validityCallback(){var e;return this.customInvalidText||((e=this.validationTarget)==null?void 0:e.validationMessage)}focus(){this.checkboxElement.tabIndex=0,this.checkboxElement.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.field&&(this.checkboxElement.tabIndex=-1)}handleSubmit(e){this.reportValidity()||(this.onInvalid(this.internals.validity),e.preventDefault())}async handleChange(e){let i=e.target;this.dirty=!0,this.checked=i.checked,this.onChange(i.checked),this.indeterminate=!1}handleKeyDown(e){e.code==="Space"&&(this.checked=!this.checked,this.onChange(this.checked),e.preventDefault())}render(){let e="";this.checked&&(e="check"),this.indeterminate&&(e="minus");let i=this.checkValidity()?"":o`<p class="invalid-text">${this.validationMessage}</p>`,s=this.required?o`<span class="required-suffix">*</span>`:"",n={"checkbox-container":!0,dirty:this.dirty,invalid:!this.checkValidity()};return o`<div class=${b(n)}>
17
- <label>
18
- <input
19
- type="checkbox"
20
- .checked=${w(this.checked)}
21
- ?disabled=${this.disabled}
22
- aria-required=${this.required}
23
- aria-readonly=${this.disabled}
24
- .indeterminate=${this.indeterminate}
25
- @change=${this.handleChange}
26
- @keydown=${this.handleKeyDown}
27
- value=${E(this.value)}
28
- @blur=${this.blur}
29
- />
30
- <div class="check-mark">${e?o`<bl-icon name="${e}"></bl-icon>`:null}</div>
31
- <slot class="label"></slot>${s}
32
- </label>
33
- <div class="hint">${i}</div>
34
- </div> `}};a.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!1},a.formControlValidators=[g],t([u("input")],a.prototype,"validationTarget",2),t([l({type:Boolean,reflect:!0})],a.prototype,"checked",2),t([l()],a.prototype,"value",2),t([l({type:Boolean,reflect:!0})],a.prototype,"required",2),t([l({type:String,attribute:"invalid-text",reflect:!0})],a.prototype,"customInvalidText",2),t([l({type:Boolean,reflect:!0})],a.prototype,"disabled",2),t([l({type:Boolean,reflect:!0})],a.prototype,"indeterminate",2),t([d("bl-checkbox-change")],a.prototype,"onChange",2),t([d("bl-focus")],a.prototype,"onFocus",2),t([d("bl-blur")],a.prototype,"onBlur",2),t([d("bl-checkbox-invalid")],a.prototype,"onInvalid",2),t([u("[type=checkbox]")],a.prototype,"checkboxElement",2),t([m()],a.prototype,"dirty",2),a=t([p(y)],a);export{y as a,a as b,k as c,x as d,r as e};
35
- //# sourceMappingURL=chunk-FTQX7CEW.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/checkbox-group/bl-checkbox-group.css", "../src/components/checkbox-group/bl-checkbox-group.ts", "../src/components/checkbox-group/checkbox/bl-checkbox.css", "../src/components/checkbox-group/checkbox/bl-checkbox.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:flex;flex-direction:row}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-checkbox-direction, column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}.dirty.invalid .options{margin-bottom:var(--bl-size-3xs)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-checkbox-group.css\";\nimport BlCheckbox, { blCheckboxTag } from \"./checkbox/bl-checkbox\";\n\nexport const blCheckboxGroupTag = \"bl-checkbox-group\";\n\nexport const blChangeEventName = \"bl-checkbox-group-change\";\n\n/**\n * @tag bl-checkbox-group\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-checkbox-direction=row] Can be used for showing checkbox options as columns instead of rows. Options are `row` or `column`\n */\n@customElement(blCheckboxGroupTag)\nexport default class BlCheckboxGroup extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = [requiredValidator];\n\n @query(\"fieldset\")\n validationTarget: HTMLElement;\n\n /**\n * Sets name of the checkbox group\n */\n @property()\n name: string;\n\n /**\n * Sets the checkbox group label\n */\n @property({ type: String })\n label: string;\n\n /**\n * Set and gets the actual value of the field\n */\n @property({ type: Array, reflect: true })\n value: string[] | null;\n\n /**\n * Sets option as required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: \"invalid-text\", reflect: true })\n customInvalidText?: string;\n\n @state()\n private dirty = false;\n\n get options(): BlCheckbox[] {\n return [...this.querySelectorAll(blCheckboxTag)];\n }\n\n get checkedOptions(): string[] {\n return this.options.filter(opt => opt.checked).map(opt => opt.value);\n }\n\n get availableOptions(): BlCheckbox[] {\n return this.options.filter(option => !option.disabled);\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.tabIndex = 0;\n this.addEventListener(\"focus\", this.handleFocus);\n this.addEventListener(\"keydown\", this.handleKeyDown);\n\n this.form?.addEventListener(\"submit\", (e: SubmitEvent) => this.handleSubmit(e));\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"focus\", this.handleFocus);\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n this.form?.removeEventListener(\"submit\", (e: SubmitEvent) => this.handleSubmit(e));\n }\n\n protected firstUpdated() {\n if (this.required && !this.value) {\n this.setValue(null);\n this.onInvalid(this.internals.validity);\n }\n }\n\n protected async updated(changedProperties: Map<string, unknown>): Promise<void> {\n if (changedProperties.has(\"value\")) {\n this.setFormValue();\n this.checkOptionsValidity();\n\n if (this.value !== null) this.onChange(this.value);\n\n await this.validationComplete;\n\n if (!this.checkValidity()) {\n this.onInvalid(this.internals.validity);\n }\n\n this.requestUpdate();\n }\n }\n\n private setFormValue() {\n if (this.value !== null && this.value.length > 0) {\n const formData = new FormData();\n\n this.value?.forEach(checkbox => formData.append(this.name, `${checkbox}`));\n this.setValue(formData);\n } else if (this.value?.length === 0) {\n this.setValue(null);\n }\n }\n\n /**\n * Fires when checkbox group value changed\n */\n @event(\"bl-checkbox-group-change\") private onChange: EventDispatcher<string[]>;\n\n /**\n * Fires when checkbox group is invalid\n */\n @event(\"bl-checkbox-group-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n private focusedOptionIndex = 0;\n\n private handleOptionChecked() {\n this.dirty = true;\n this.value = this.checkedOptions;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next option\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous option\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n\n // next or previous option with tab / hold shift & tab\n } else if (event.key === \"Tab\") {\n event.shiftKey ? this.focusedOptionIndex-- : this.focusedOptionIndex++;\n\n if (this.focusedOptionIndex === this.availableOptions.length) {\n this.tabIndex = 0;\n this.focusedOptionIndex = 0;\n return;\n }\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n );\n\n this.availableOptions[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n private handleFocus() {\n this.availableOptions[this.focusedOptionIndex].focus();\n }\n\n private handleSubmit(e: SubmitEvent) {\n if (!this.reportValidity()) {\n this.onInvalid(this.internals.validity);\n e.preventDefault();\n }\n this.checkOptionsValidity();\n }\n\n checkOptionsValidity() {\n if (this.checkValidity()) {\n this.options?.forEach(option =>\n option?.shadowRoot?.querySelector(\"div\")?.classList.remove(...[\"dirty\", \"invalid\"])\n );\n } else if (!this.checkValidity()) {\n this.options?.forEach(option =>\n option?.shadowRoot?.querySelector(\"div\")?.classList.add(...[\"dirty\", \"invalid\"])\n );\n }\n }\n\n validityCallback() {\n if (this.customInvalidText) {\n return this.customInvalidText;\n }\n return this.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : \"\";\n\n const classes = {\n \"dirty\": this.dirty,\n \"invalid\": !this.validity.valid,\n };\n\n return html`<div class=${classMap(classes)}>\n <fieldset\n role=\"group\"\n aria-labelledby=\"label\"\n aria-required=${this.required}\n tabindex=${this.tabIndex}\n >\n <legend id=\"label\">${this.label}</legend>\n <div class=\"options\" @bl-checkbox-change=${this.handleOptionChecked}>\n <slot></slot>\n </div>\n <div class=\"hint\">${invalidMessage}</div>\n </fieldset>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blCheckboxGroupTag]: BlCheckboxGroup;\n }\n interface HTMLElementEventMap {\n [blChangeEventName]: CustomEvent<string[]>;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;vertical-align:middle}:host *{outline:none}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none}.label{overflow-wrap:anywhere}.dirty.invalid label{margin-bottom:var(--bl-size-3xs)}.checkbox-container{position:relative}input[type=\"checkbox\"]{appearance:none;outline:none;margin:0;box-sizing:border-box;border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m)}.check-mark{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m);border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-neutral-full);font-size:var(--bl-font-size-2xs);background-color:var(--bl-color-neutral-full)}.required-suffix{color:var(--bl-color-danger);margin-inline-start:calc(var(--bl-size-2xs) * -1)}.dirty.invalid .check-mark{border-color:var(--bl-color-danger)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.dirty.invalid .hint{display:block}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .invalid-text{display:block}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host(:is([checked], [indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:none}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([disabled]) .check-mark{background-color:var(--bl-color-neutral-lightest)}:host(:not([disabled])) input:focus-visible + .check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport \"../../icon/bl-icon\";\nimport type BlCheckboxGroup from \"../bl-checkbox-group\";\nimport { blCheckboxGroupTag, blChangeEventName } from \"../bl-checkbox-group\";\nimport style from \"./bl-checkbox.css\";\n\nexport const blCheckboxTag = \"bl-checkbox\";\n\n/**\n * @tag bl-checkbox\n * @summary Baklava Checkbox component\n */\n@customElement(blCheckboxTag)\nexport default class BlCheckbox extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: false };\n\n static formControlValidators = [requiredValidator];\n\n @query(\"input\")\n validationTarget: HTMLInputElement;\n\n /**\n * Sets the checked state for checkbox\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * Sets the checkbox value\n */\n @property()\n value: string;\n\n /**\n * Sets checkbox as required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: \"invalid-text\", reflect: true })\n customInvalidText?: string;\n\n /**\n * Sets the disabled state for checkbox\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets the indeterminate state for checkbox\n */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /**\n * Fires whenever user change the value of the checkbox.\n */\n @event(\"bl-checkbox-change\") private onChange: EventDispatcher<boolean>;\n\n /**\n * Fires when checkbox is focused\n */\n @event(\"bl-focus\") private onFocus: EventDispatcher<string>;\n\n /**\n * Fires when checkbox is blurred\n */\n @event(\"bl-blur\") private onBlur: EventDispatcher<string>;\n\n /**\n * Fires when checkbox is invalid\n */\n @event(\"bl-checkbox-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n @query(\"[type=checkbox]\") checkboxElement: HTMLElement;\n\n @state()\n private dirty = false;\n\n protected field: BlCheckboxGroup | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.field = this.closest<BlCheckboxGroup>(blCheckboxGroupTag);\n this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n\n this.form?.addEventListener(\"submit\", e => this.handleSubmit(e));\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n this.form?.removeEventListener(\"submit\", e => this.handleSubmit(e));\n }\n\n protected async updated(changedProperties: Map<string, unknown>): Promise<void> {\n if (changedProperties.has(\"checked\") && this.required) {\n if (this.checked) {\n this.setValue(\"on\");\n } else if (!this.checked) {\n this.setValue(\"\");\n }\n\n await this.validationComplete;\n if (!this.checkValidity()) {\n this.onInvalid(this.internals.validity);\n }\n this.requestUpdate();\n }\n }\n\n update(changedProperties: Map<string, unknown>) {\n super.update(changedProperties);\n if (this.indeterminate && this.checked) {\n this.checked = false;\n this.requestUpdate(\"checked\", true);\n }\n }\n\n validityCallback(): string | void {\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n /**\n * Focuses this option\n */\n focus() {\n this.checkboxElement.tabIndex = 0;\n this.checkboxElement.focus();\n this.onFocus(this.value);\n }\n\n /**\n * Blurs from this option\n */\n blur() {\n this.onBlur(this.value);\n if (!this.field) return;\n this.checkboxElement.tabIndex = -1;\n }\n\n private handleSubmit(e: SubmitEvent) {\n if (!this.reportValidity()) {\n this.onInvalid(this.internals.validity);\n e.preventDefault();\n }\n }\n\n private async handleChange(event: CustomEvent) {\n const target = event.target as HTMLInputElement;\n\n this.dirty = true;\n this.checked = target.checked;\n this.onChange(target.checked);\n this.indeterminate = false;\n }\n\n private handleFieldValueChange = (event: CustomEvent<Array<string>>) => {\n this.checked = event.detail.includes(this.value);\n };\n private handleKeyDown(event: KeyboardEvent) {\n if (event.code === \"Space\") {\n this.checked = !this.checked;\n this.onChange(this.checked);\n event.preventDefault();\n }\n }\n\n render(): TemplateResult {\n let icon = \"\";\n\n if (this.checked) icon = \"check\";\n if (this.indeterminate) icon = \"minus\";\n\n const invalidMessage = !this.checkValidity()\n ? html`<p class=\"invalid-text\">${this.validationMessage}</p>`\n : \"\";\n\n const requiredSuffix = this.required ? html`<span class=\"required-suffix\">*</span>` : \"\";\n\n const classes = {\n \"checkbox-container\": true,\n \"dirty\": this.dirty,\n \"invalid\": !this.checkValidity(),\n };\n\n return html`<div class=${classMap(classes)}>\n <label>\n <input\n type=\"checkbox\"\n .checked=${live(this.checked)}\n ?disabled=${this.disabled}\n aria-required=${this.required}\n aria-readonly=${this.disabled}\n .indeterminate=${this.indeterminate}\n @change=${this.handleChange}\n @keydown=${this.handleKeyDown}\n value=${ifDefined(this.value)}\n @blur=${this.blur}\n />\n <div class=\"check-mark\">${icon ? html`<bl-icon name=\"${icon}\"></bl-icon>` : null}</div>\n <slot class=\"label\"></slot>${requiredSuffix}\n </label>\n <div class=\"hint\">${invalidMessage}</div>\n </div> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blCheckboxTag]: BlCheckbox;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["styles", "i", "bl_checkbox_group_default", "blCheckboxGroupTag", "blChangeEventName", "BlCheckboxGroup", "FormControlMixin", "s", "bl_checkbox_group_default", "blCheckboxTag", "opt", "option", "_a", "e", "changedProperties", "_b", "formData", "checkbox", "event", "invalidMessage", "x", "classes", "o", "requiredValidator", "__decorateClass", "i", "t", "styles", "i", "bl_checkbox_default", "blCheckboxTag", "BlCheckbox", "FormControlMixin", "s", "event", "bl_checkbox_default", "_a", "_b", "blCheckboxGroupTag", "blChangeEventName", "e", "changedProperties", "target", "icon", "invalidMessage", "x", "requiredSuffix", "classes", "o", "l", "requiredValidator", "__decorateClass", "i", "t"]
7
- }
@@ -1,17 +0,0 @@
1
- import{a as g}from"./chunk-XDUIVR6I.js";import{a as v}from"./chunk-6LT7O7T2.js";import{a as i}from"./chunk-GRL4DWKG.js";import{a as c,b as a,c as u,e as m}from"./chunk-5MOOXA2X.js";import{a as s,b as n,f as d}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var y=s`:host{display:block}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction, column) wrap;align-items:var(--bl-radio-group-cross-axis-item-alignment, normal);align-content:var(--bl-radio-group-cross-axis-content-alignment, normal);justify-content:var(--bl-radio-group-main-axis-content-alignment, normal);gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,f=y;var h="bl-radio-group",p="bl-radio-change",r=class extends g(d){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[f]}get options(){return[...this.querySelectorAll(b)]}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let o=e.target;this.setValue(o.value),this.onChange(o.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset role="radiogroup" aria-labelledby="label" aria-required=${this.required}>
2
- <legend id="label">${this.label}</legend>
3
- <div class="options" @bl-checked=${this.handleOptionChecked}>
4
- <slot></slot>
5
- </div>
6
- </fieldset>`}};t([a({type:String})],r.prototype,"label",2),t([a()],r.prototype,"value",2),t([a({type:Boolean,reflect:!0})],r.prototype,"required",2),t([i("bl-radio-change")],r.prototype,"onChange",2),r=t([c(h)],r);var C=s`:host{cursor:pointer;outline:none}.wrapper{--size:var(--bl-size-m);outline:none}#label{display:flex;font:var(--bl-font-title-3-regular);line-height:normal;align-items:var(--bl-radio-align-items, center);margin-block:0;color:var(--bl-color-neutral-darker);gap:var(--bl-size-2xs)}#label::before{content:"";display:inline-block;box-sizing:border-box;min-width:var(--size);min-height:var(--size);max-width:var(--size);max-height:var(--size);background-color:white;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter)}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label,:host(:hover) #label,.selected #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`,x=C;var b="bl-radio",W="bl-checked",l=class extends d{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.handleFieldValueChange=e=>{let o=e.detail;this.selected=o===this.value}}static get styles(){return[x]}select(){this.selected=!0,this.onChecked(this.value)}get checked(){return this.selected}focus(){this.radioElement.tabIndex=0,this.radioElement.focus(),this.onFocus(this.value)}blur(){this.radioElement.tabIndex=-1,this.onBlur(this.value)}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(h),this.field||console.warn("bl-radio is designed to be used inside a bl-radio-group",this),(e=this.field)==null||e.addEventListener(p,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(p,this.handleFieldValueChange)}render(){let e=v({wrapper:!0,selected:this.selected});return n`<div
7
- class=${e}
8
- role="radio"
9
- aria-labelledby="label"
10
- aria-disabled=${this.disabled}
11
- aria-readonly=${this.disabled}
12
- @blur=${this.blur}
13
- @click=${this.select}
14
- >
15
- <p id="label"><slot></slot></p>
16
- </div>`}};t([a()],l.prototype,"name",2),t([a()],l.prototype,"value",2),t([a({type:Boolean,reflect:!0})],l.prototype,"disabled",2),t([u()],l.prototype,"selected",2),t([i("bl-checked")],l.prototype,"onChecked",2),t([i("bl-focus")],l.prototype,"onFocus",2),t([i("bl-blur")],l.prototype,"onBlur",2),t([m("[role=radio]")],l.prototype,"radioElement",2),l=t([c(b)],l);export{b as a,W as b,l as c,h as d,p as e,r as f};
17
- //# sourceMappingURL=chunk-FVBGMXMC.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/radio-group/bl-radio-group.css", "../src/components/radio-group/bl-radio-group.ts", "../src/components/radio-group/radio/bl-radio.css", "../src/components/radio-group/radio/bl-radio.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction, column) wrap;align-items:var(--bl-radio-group-cross-axis-item-alignment, normal);align-content:var(--bl-radio-group-cross-axis-content-alignment, normal);justify-content:var(--bl-radio-group-main-axis-content-alignment, normal);gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { FormControlMixin } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-radio-group.css\";\nimport BlRadio, { blRadioTag } from \"./radio/bl-radio\";\n\nexport const blRadioGroupTag = \"bl-radio-group\";\n\nexport const blChangeEventName = \"bl-radio-change\";\n\n/**\n * @tag bl-radio-group\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-radio-direction=row] Can be used for showing radio options as columns instead of rows. Options are `row` or `column`\n * @cssproperty [--bl-radio-group-cross-axis-item-alignment=normal] Can be used for aligning radio items on cross axis. Acts same with align-item\n * @cssproperty [--bl-radio-group-cross-axis-content-alignment=normal] Can be used for aligning radio group content on cross axis. Acts same with align-content\n * @cssproperty [--bl-radio-group-main-axis-content-alignment=normal] Can be used for aligning radio group content on main axis. Acts same with justify-content\n */\n@customElement(blRadioGroupTag)\nexport default class BlRadioGroup extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the radio group label\n */\n @property({ type: String })\n label: string;\n\n /**\n * Set and gets the actual value of the field\n */\n @property()\n value = \"\";\n\n /**\n * Sets option as required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n get options(): BlRadio[] {\n return [...this.querySelectorAll(blRadioTag)];\n }\n\n get availableOptions(): BlRadio[] {\n return this.options.filter(option => !option.disabled);\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has(\"value\")) {\n this.setValue(this.value);\n this.onChange(this.value);\n }\n }\n\n /**\n * Fires when radio group value changed\n */\n @event(\"bl-radio-change\") private onChange: EventDispatcher<string>;\n\n private focusedOptionIndex = 0;\n\n private handleOptionChecked(event: CustomEvent) {\n const checkedOption = event.target as BlRadio;\n\n this.setValue(checkedOption.value);\n this.onChange(checkedOption.value);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next option\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous option\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n\n // Select option\n } else if ([\" \"].includes(event.key)) {\n this.availableOptions[this.focusedOptionIndex].select();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n );\n\n this.availableOptions[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.tabIndex = 0;\n this.addEventListener(\"focus\", this.handleFocus);\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n private handleFocus() {\n this.availableOptions[this.focusedOptionIndex].focus();\n }\n\n render(): TemplateResult {\n return html`<fieldset role=\"radiogroup\" aria-labelledby=\"label\" aria-required=${this.required}>\n <legend id=\"label\">${this.label}</legend>\n <div class=\"options\" @bl-checked=${this.handleOptionChecked}>\n <slot></slot>\n </div>\n </fieldset>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blRadioGroupTag]: BlRadioGroup;\n }\n interface HTMLElementEventMap {\n [blChangeEventName]: CustomEvent<string>;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{cursor:pointer;outline:none}.wrapper{--size:var(--bl-size-m);outline:none}#label{display:flex;font:var(--bl-font-title-3-regular);line-height:normal;align-items:var(--bl-radio-align-items, center);margin-block:0;color:var(--bl-color-neutral-darker);gap:var(--bl-size-2xs)}#label::before{content:\"\";display:inline-block;box-sizing:border-box;min-width:var(--size);min-height:var(--size);max-width:var(--size);max-height:var(--size);background-color:white;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter)}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label,:host(:hover) #label,.selected #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, 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 type BlRadioGroup from \"../bl-radio-group\";\nimport { blChangeEventName, blRadioGroupTag } from \"../bl-radio-group\";\nimport style from \"./bl-radio.css\";\n\nexport const blRadioTag = \"bl-radio\";\n\nexport const blCheckedEventName = \"bl-checked\";\n\n/**\n * @tag bl-radio\n * @summary Baklava Radio Option component\n *\n * @cssprop [--bl-radio-align-items=center] Align items of radio option\n */\n@customElement(blRadioTag)\nexport default class BlRadio extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @property()\n name: string;\n\n @property()\n value: string;\n\n /**\n * Sets option as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @state() private selected = false;\n\n /**\n * Fires when radio is checked\n */\n @event(\"bl-checked\") private onChecked: EventDispatcher<string>;\n\n /**\n * Fires when radio is blurred\n */\n @event(\"bl-focus\") private onFocus: EventDispatcher<string>;\n\n /**\n * Fires when radio is blurred\n */\n @event(\"bl-blur\") private onBlur: EventDispatcher<string>;\n\n /**\n * Sets this option selected\n */\n select() {\n this.selected = true;\n this.onChecked(this.value);\n }\n\n /**\n * Readonly property to determine if option is currently checked\n */\n get checked() {\n return this.selected;\n }\n\n @query(\"[role=radio]\") private radioElement: HTMLElement;\n\n /**\n * Focuses this option\n */\n focus() {\n this.radioElement.tabIndex = 0;\n this.radioElement.focus();\n this.onFocus(this.value);\n }\n\n /**\n * Blurs from this option\n */\n blur() {\n this.radioElement.tabIndex = -1;\n this.onBlur(this.value);\n }\n\n private handleFieldValueChange = (event: CustomEvent<string>) => {\n const newValue = event.detail;\n\n this.selected = newValue === this.value;\n };\n\n private field: BlRadioGroup | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.field = this.closest<BlRadioGroup>(blRadioGroupTag);\n\n if (!this.field) {\n console.warn(\"bl-radio is designed to be used inside a bl-radio-group\", this);\n }\n\n this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n }\n\n render(): TemplateResult {\n const classes = classMap({\n wrapper: true,\n selected: this.selected,\n });\n\n return html`<div\n class=${classes}\n role=\"radio\"\n aria-labelledby=\"label\"\n aria-disabled=${this.disabled}\n aria-readonly=${this.disabled}\n @blur=${this.blur}\n @click=${this.select}\n >\n <p id=\"label\"><slot></slot></p>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blRadioTag]: BlRadio;\n }\n interface HTMLElementEventMap {\n [blCheckedEventName]: CustomEvent<string>;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["styles", "i", "bl_radio_group_default", "blRadioGroupTag", "blChangeEventName", "BlRadioGroup", "FormControlMixin", "s", "bl_radio_group_default", "blRadioTag", "option", "changedProperties", "event", "checkedOption", "x", "__decorateClass", "e", "styles", "i", "bl_radio_default", "blRadioTag", "blCheckedEventName", "BlRadio", "s", "event", "newValue", "bl_radio_default", "_a", "blRadioGroupTag", "blChangeEventName", "classes", "o", "x", "__decorateClass", "e", "t", "i"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/progress-indicator/bl-progress-indicator.css", "../src/components/progress-indicator/bl-progress-indicator.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-border-radius-s);position:relative;background-color:var(--bl-color-neutral-lightest);height:var(--height);border-radius:var(--radius);width:100%;transform:scaleX(var(--bl-text-x-direction))}.progress-indicator::before{content:\"\";position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius);transition:width ease var(--bl-progress-indicator-transition-duration, 0.2s)}:host([size=\"small\"]) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-border-radius-xs)}:host([size=\"large\"]) .progress-indicator{--height:var(--bl-size-xs);--radius:var(--bl-border-radius-m)}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport style from \"./bl-progress-indicator.css\";\n\nexport type ProgressIndicatorSize = \"small\" | \"medium\" | \"large\";\n\n/**\n * @tag bl-progress-indicator\n * @summary Baklava Progress Indicator component\n *\n * @cssproperty [--bl-progress-indicator-transition-duration=.2s] Duration of the transition of progress bar\n * @property {max} [max=100]\n * @property {number} [value=0]\n */\n\n@customElement(\"bl-progress-indicator\")\nexport default class BlProgressIndicator extends LitElement {\n static get styles(): CSSResultGroup {\n return style;\n }\n\n @query(\".progress-indicator\") private wrapper: HTMLElement;\n\n /**\n * Sets the size\n */\n @property({ type: String, reflect: true })\n size: ProgressIndicatorSize = \"medium\";\n\n /**\n * Sets the status\n */\n @property({ type: Boolean, reflect: true })\n failed = false;\n\n /**\n * Sets the max\n */\n @property({ type: Number })\n get max() {\n return this._max;\n }\n set max(max: number) {\n this._max = max;\n this.updateCssVariable();\n }\n\n /**\n * Sets the value\n */\n @property({ type: Number })\n get value() {\n return this._value;\n }\n set value(value: number) {\n this._value = value;\n this.updateCssVariable();\n }\n\n @state() private _max = 100;\n @state() private _value = 0;\n\n async updateCssVariable() {\n await this.updateComplete;\n this.wrapper.style.setProperty(\"--value\", `${this.value}`);\n this.wrapper.style.setProperty(\"--max\", `${this.max}`);\n }\n\n render(): TemplateResult {\n return html`<div\n class=\"progress-indicator\"\n role=\"progressbar\"\n aria-label=\"progress indicator\"\n aria-valuemax=\"${this._max}\"\n aria-valuenow=\"${this._value}\"\n ></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-progress-indicator\": BlProgressIndicator;\n }\n}\n"],
5
- "mappings": "2JACO,IAAMA,EAAS,w1BACfC,EAAQD,ECcf,IAAqBE,EAArB,cAAiDC,CAAW,CAA5D,kCAWE,UAA8B,SAM9B,YAAS,GA0BA,KAAQ,KAAO,IACf,KAAQ,OAAS,EA3C1B,WAAW,QAAyB,CAClC,OAAOC,CACT,CAoBA,IAAI,KAAM,CACR,OAAO,KAAK,IACd,CACA,IAAI,IAAIC,EAAa,CACnB,KAAK,KAAOA,EACZ,KAAK,kBAAkB,CACzB,CAMA,IAAI,OAAQ,CACV,OAAO,KAAK,MACd,CACA,IAAI,MAAMC,EAAe,CACvB,KAAK,OAASA,EACd,KAAK,kBAAkB,CACzB,CAKA,MAAM,mBAAoB,CACxB,MAAM,KAAK,eACX,KAAK,QAAQ,MAAM,YAAY,UAAW,GAAG,KAAK,OAAO,EACzD,KAAK,QAAQ,MAAM,YAAY,QAAS,GAAG,KAAK,KAAK,CACvD,CAEA,QAAyB,CACvB,OAAOC;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,uBACL,KAAK;AAAA,YAE1B,CACF,EAxDwCC,EAAA,CAArCC,EAAM,qBAAqB,GALTP,EAKmB,uBAMtCM,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAVtBR,EAWnB,oBAMAM,EAAA,CADCE,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhBvBR,EAiBnB,sBAMIM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAtBPR,EAuBf,mBAYAM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAlCPR,EAmCf,qBAQaM,EAAA,CAAhBG,EAAM,GA3CYT,EA2CF,oBACAM,EAAA,CAAhBG,EAAM,GA5CYT,EA4CF,sBA5CEA,EAArBM,EAAA,CADCE,EAAc,uBAAuB,GACjBR",
6
- "names": ["styles", "bl_progress_indicator_default", "BlProgressIndicator", "s", "bl_progress_indicator_default", "max", "value", "x", "__decorateClass", "i", "e", "t"]
7
- }
@@ -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 k=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{/* 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}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`,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,u,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?(u=(p=this.footer)==null?void 0:p.classList)==null||u.remove("shadow"):(f=(g=this.footer)==null?void 0:g.classList)==null||f.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,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,v){return b===!1&&v===void 0?!1:b!==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};
32
- //# sourceMappingURL=chunk-GXDVWGFU.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{/* 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}}::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
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/spinner/bl-spinner.css", "../src/components/spinner/bl-spinner.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{cursor:wait;display:inline-flex;align-items:center}.spinner{animation:spin 1s linear infinite}:host([overlay]){position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(39 49 66 / 70%);z-index:10}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"../icon/bl-icon\";\nimport style from \"./bl-spinner.css\";\n\nexport const blSpinnerTag = \"bl-spinner\";\n/**\n * @tag bl-spinner\n * @summary Baklava Spinner component\n *\n */\n@customElement(blSpinnerTag)\nexport default class BlSpinner extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the spinner size\n */\n @property({ type: String, reflect: true })\n size = \"var(--bl-font-size-m)\";\n\n /**\n * Sets the disabled state for spinner\n */\n @property({ type: Boolean, reflect: true })\n disabled? = false;\n\n /**\n * Sets the overlay state for spinner\n */\n @property({ type: Boolean, reflect: true })\n overlay? = false;\n\n /**\n * Sets the color of the spinner\n */\n @property({ type: String, reflect: true })\n color: string = \"var(--bl-color-primary)\";\n\n render(): TemplateResult {\n return html`<bl-icon\n class=\"spinner\"\n name=\"loading\"\n style=\"color: ${this.disabled\n ? \"var(--bl-color-neutral-light)\"\n : this.color}; font-size: ${this.size};\"\n ></bl-icon>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSpinnerTag]: BlSpinner;\n }\n}\n"],
5
- "mappings": "6IACO,IAAMA,EAASC,8WACfC,EAAQF,ECGR,IAAMG,EAAe,aAOPC,EAArB,cAAuC,CAAW,CAAlD,kCASE,UAAO,wBAMP,cAAY,GAMZ,aAAW,GAMX,WAAgB,0BA1BhB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA0BA,QAAyB,CACvB,OAAOC;AAAA;AAAA;AAAA,sBAGW,KAAK,SACjB,gCACA,KAAK,qBAAqB,KAAK;AAAA,gBAEvC,CACF,EA7BEC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBJ,EASnB,oBAMAG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBJ,EAenB,wBAMAG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBvBJ,EAqBnB,uBAMAG,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA1BtBJ,EA2BnB,qBA3BmBA,EAArBG,EAAA,CADCC,EAAcL,CAAY,GACNC",
6
- "names": ["styles", "i", "bl_spinner_default", "blSpinnerTag", "BlSpinner", "bl_spinner_default", "x", "__decorateClass", "e"]
7
- }
@@ -1,65 +0,0 @@
1
- import{a as f}from"./chunk-73RGV4UX.js";import{a as w}from"./chunk-IPYZIIRV.js";import{a as s}from"./chunk-DINNT5P2.js";import{a as l}from"./chunk-GRL4DWKG.js";import{a as b,b as o,c as h,e as n}from"./chunk-5MOOXA2X.js";import{a as p,b as d,f as c}from"./chunk-4OT5AMS5.js";import{d as e}from"./chunk-IZ2LK5GK.js";var D=p`:host{position:relative;display:inline-block}:host([kind="neutral"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind="success"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind="danger"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.popover-content{display:flex;flex-direction:column;gap:var(--bl-size-xs)}`,x=D;var v="bl-dropdown",r=class extends c{constructor(){super(...arguments);this._isPopoverOpen=!1;this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.focusedOptionIndex=-1}static get styles(){return[x]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this._popover.target=this._button}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}handleKeyDown(i){if(["ArrowDown","ArrowRight"].includes(i.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(i.key))this.focusedOptionIndex--;else if(i.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),i.preventDefault()}get options(){return[...this.querySelectorAll(u)]}open(){this._isPopoverOpen=!0,this._popover.show(),this.onOpen("Dropdown opened!")}close(){this._isPopoverOpen=!1,this._popover.visible&&this._popover.hide(),this.onClose("Dropdown closed!")}render(){return d`<bl-button
2
- dropdown
3
- .active=${this.opened}
4
- ?disabled=${this.disabled}
5
- variant="${this.variant}"
6
- kind="${this.kind}"
7
- size="${this.size}"
8
- icon="${s(this.icon)}"
9
- @bl-click="${this._handleClick}"
10
- >
11
- ${this.label}
12
- </bl-button>
13
- <bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}"
14
- ><div class="popover-content">
15
- <slot></slot></div
16
- ></bl-popover> `}};e([n("bl-popover")],r.prototype,"_popover",2),e([n("bl-button")],r.prototype,"_button",2),e([h()],r.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],r.prototype,"label",2),e([o({type:String,reflect:!0})],r.prototype,"variant",2),e([o({type:String,reflect:!0})],r.prototype,"kind",2),e([o({type:String,reflect:!0})],r.prototype,"size",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({type:String,reflect:!0})],r.prototype,"icon",2),e([l("bl-dropdown-open")],r.prototype,"onOpen",2),e([l("bl-dropdown-close")],r.prototype,"onClose",2),r=e([b(v)],r);var C=p`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,$=C;var u="bl-dropdown-item",a=class extends c{constructor(){super(...arguments);this.disabled=!1}static get styles(){return[$]}_handleClick(){var i,k;(i=this.BlDropdownField)==null||i.close(),(k=this.BlSplitButtonField)==null||k.close(),this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(f),this.BlDropdownField=this.closest(v),this.BlSplitButtonField=this.closest(m),!this.BlDropdownField&&!this.BlDropdownGroupField&&!this.BlSplitButtonField&&console.warn(`bl-dropdown-item is designed to be used inside a ${f}, ${v} or ${m}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return d`<bl-button
17
- variant="tertiary"
18
- kind="neutral"
19
- icon="${s(this.icon)}"
20
- role="menuitem"
21
- ?disabled="${this.disabled}"
22
- @bl-click="${this._handleClick}"
23
- ><slot></slot>
24
- </bl-button>`}};e([o({type:String})],a.prototype,"icon",2),e([o({type:Boolean,reflect:!0})],a.prototype,"disabled",2),e([l("bl-dropdown-item-click")],a.prototype,"onClick",2),e([n("[role=menuitem]")],a.prototype,"menuElement",2),a=e([b(u)],a);var E=p`:host{position:relative;display:inline-block}:host([kind="neutral"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind="success"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind="danger"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.split-button-container{display:flex}.split-main-button{width:100%;--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}:host([dir="rtl"]) .split-main-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}.split-main-button:focus{--bl-border-radius-l:calc(var(--bl-size-m) / 2) 0 0 calc(var(--bl-size-m) / 2)}.dropdown-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}:host([dir="rtl"]) .dropdown-button{--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}.dropdown-button:focus{--bl-border-radius-l:0 calc(var(--bl-size-m) / 2) calc(var(--bl-size-m) / 2) 0}:host([variant="secondary"][dir="rtl"]) .dropdown-button{inset-inline-end:-1px}:host([variant="secondary"]) .dropdown-button{inset-inline-start:-1px}:host([dropdown-disabled][variant="secondary"]) .dropdown-button{inset-inline-start:0}:host([dropdown-disabled][variant="secondary"][dir="rtl"]) .dropdown-button{inset-inline-end:0}.split-divider{display:block;height:var(--bl-size-2xl);width:1px;background-color:var(--bl-color-neutral-full)}:host([variant="secondary"]) .split-divider{display:none}:host([size="small"]) .split-divider{height:var(--bl-size-xl)}:host([size="large"]) .split-divider{height:var(--bl-size-3xl)}:host([dropdown-disabled][disabled]) .split-divider{display:block;background-color:var(--bl-color-neutral-lighter)}`,_=E;var m="bl-split-button",t=class extends c{constructor(){super(...arguments);this._isPopoverOpen=!1;this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.loading=!1;this.dropdownDisabled=!1;this.target="_self";this.autofocus=!1;this.focusedOptionIndex=-1}static get styles(){return[_]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown),w(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this._popover.target=this.trigger,this.dropdownButton.addEventListener("bl-click",i=>i.stopPropagation()),this.mainButton.addEventListener("bl-click",i=>i.stopPropagation())}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.dropdownDisabled?this.open():this.close()}_handlePrimaryClick(){this.onClick("Click event fired!")}handleKeyDown(i){if(this._isPopoverOpen&&["ArrowDown","ArrowRight"].includes(i.key))this.focusedOptionIndex++;else if(this._isPopoverOpen&&["ArrowUp","ArrowLeft"].includes(i.key))this.focusedOptionIndex--;else if(this._isPopoverOpen&&i.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),i.preventDefault()}get options(){return[...this.querySelectorAll(u)]}open(){this._isPopoverOpen=!0,this._popover.show(),this.onOpen("Dropdown opened!")}close(){this._isPopoverOpen&&(this._isPopoverOpen=!1,this._popover.visible&&this._popover.hide(),this.onClose("Dropdown closed!"))}render(){return d` <div class="split-button-container" id="split-button-container">
25
- <bl-button
26
- id="split-main-button"
27
- class="split-main-button"
28
- variant="${this.variant}"
29
- kind="${this.kind}"
30
- size="${this.size}"
31
- loading-label="${s(this.loadingLabel)}"
32
- icon="${s(this.icon)}"
33
- href="${s(this.type)}"
34
- ?disabled="${this.disabled}"
35
- ?loading="${this.loading}"
36
- type="${this.type}"
37
- target="${s(this.target)}"
38
- form="${s(this.form)}"
39
- ?autofocus="${this.autofocus}"
40
- @bl-click="${this._handlePrimaryClick}"
41
- >
42
- ${this.label}
43
- </bl-button>
44
- <div class="split-divider"></div>
45
- <bl-button
46
- id="dropdown-button"
47
- class="dropdown-button"
48
- .active="${this.opened}"
49
- icon="${this.opened?"arrow_up":"arrow_down"}"
50
- ?disabled="${this.dropdownDisabled}"
51
- variant="${this.variant}"
52
- kind="${this.kind}"
53
- size="${this.size}"
54
- ?loading="${this.loading}"
55
- label="split-dropdown-button"
56
- @bl-click="${this._handleClick}"
57
- >
58
- </bl-button>
59
- <bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}">
60
- <div class="popover-content">
61
- <slot></slot>
62
- </div>
63
- </bl-popover>
64
- </div>`}};e([n("#split-button-container")],t.prototype,"trigger",2),e([n("bl-popover")],t.prototype,"_popover",2),e([n("#split-main-button")],t.prototype,"mainButton",2),e([n("#dropdown-button")],t.prototype,"dropdownButton",2),e([h()],t.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],t.prototype,"label",2),e([o({type:String,reflect:!0})],t.prototype,"variant",2),e([o({type:String,reflect:!0})],t.prototype,"kind",2),e([o({type:String,reflect:!0})],t.prototype,"size",2),e([o({type:String,reflect:!0})],t.prototype,"href",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([o({type:Boolean,reflect:!0})],t.prototype,"loading",2),e([o({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),e([o({attribute:"dropdown-disabled",type:Boolean})],t.prototype,"dropdownDisabled",2),e([o({type:String})],t.prototype,"icon",2),e([o({type:String})],t.prototype,"target",2),e([o({type:String})],t.prototype,"type",2),e([o({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),e([o({type:String})],t.prototype,"form",2),e([l("bl-dropdown-open")],t.prototype,"onOpen",2),e([l("bl-dropdown-close")],t.prototype,"onClose",2),e([l("bl-click")],t.prototype,"onClick",2),t=e([b(m)],t);export{m as a,t as b,u as c,a as d,v as e,r as f};
65
- //# sourceMappingURL=chunk-ILK55FB6.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/dropdown/bl-dropdown.css", "../src/components/dropdown/bl-dropdown.ts", "../src/components/dropdown/item/bl-dropdown-item.css", "../src/components/dropdown/item/bl-dropdown-item.ts", "../src/components/split-button/bl-split-button.css", "../src/components/split-button/bl-split-button.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}:host([kind=\"neutral\"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind=\"success\"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind=\"danger\"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.popover-content{display:flex;flex-direction:column;gap:var(--bl-size-xs)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport BlButton, { ButtonKind, ButtonSize, ButtonVariant } from \"../button/bl-button\";\nimport BlPopover from \"../popover/bl-popover\";\nimport style from \"./bl-dropdown.css\";\nimport BlDropdownItem, { blDropdownItemTag } from \"./item/bl-dropdown-item\";\n\nexport const blDropdownTag = \"bl-dropdown\";\n\n/**\n * @tag bl-dropdown\n * @summary Baklava Dropdown component\n */\n@customElement(blDropdownTag)\nexport default class BlDropdown extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\"bl-popover\")\n private _popover: BlPopover;\n\n @query(\"bl-button\")\n private _button: BlButton;\n\n @state() private _isPopoverOpen = false;\n\n /**\n * Sets the dropdown button label\n */\n @property({ type: String, reflect: true })\n label: string;\n\n /**\n * Sets the dropdown button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = \"primary\";\n\n /**\n * Sets the dropdown button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = \"default\";\n\n /**\n * Sets the dropdown button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = \"medium\";\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets the icon name to be displayed on the left side of the button label\n */\n @property({ type: String, reflect: true })\n icon?: string;\n\n /**\n * Fires when dropdown opened\n */\n @event(\"bl-dropdown-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when dropdown closed\n */\n @event(\"bl-dropdown-close\") private onClose: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n }\n\n firstUpdated() {\n // `_button` will be undefined during the initial render.\n // To ensure proper rendering, we set `_popover.target` after the template has been created.\n this._popover.target = this._button;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n private _handleClick() {\n !this._isPopoverOpen && !this.disabled ? this.open() : this.close();\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next action\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous action\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n // Select action\n } else if (event.key === \"Escape\") {\n this.focusedOptionIndex = -1;\n this.close();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n get options(): BlDropdownItem[] {\n return [...this.querySelectorAll(blDropdownItemTag)];\n }\n\n open() {\n this._isPopoverOpen = true;\n this._popover.show();\n this.onOpen(\"Dropdown opened!\");\n }\n\n close() {\n this._isPopoverOpen = false;\n this._popover.visible && this._popover.hide();\n this.onClose(\"Dropdown closed!\");\n }\n\n render(): TemplateResult {\n return html`<bl-button\n dropdown\n .active=${this.opened}\n ?disabled=${this.disabled}\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n icon=\"${ifDefined(this.icon)}\"\n @bl-click=\"${this._handleClick}\"\n >\n ${this.label}\n </bl-button>\n <bl-popover fit-size placement=\"bottom-start\" @bl-popover-hide=\"${this.close}\"\n ><div class=\"popover-content\">\n <slot></slot></div\n ></bl-popover> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownTag]: BlDropdown;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport \"../../button/bl-button\";\nimport BlButton from \"../../button/bl-button\";\nimport { BaklavaIcon } from \"../../icon/icon-list\";\nimport type BlSplitButton from \"../../split-button/bl-split-button\";\nimport { blSplitButtonTag } from \"../../split-button/bl-split-button\";\nimport type BlDropdown from \"../bl-dropdown\";\nimport { blDropdownTag } from \"../bl-dropdown\";\nimport type BlDropdownGroup from \"../group/bl-dropdown-group\";\nimport { blDropdownGroupTag } from \"../group/bl-dropdown-group\";\nimport style from \"./bl-dropdown-item.css\";\n\nexport const blDropdownItemTag = \"bl-dropdown-item\";\n\n/**\n * @tag bl-dropdown-item\n * @summary Baklava Dropdown Item component\n */\n@customElement(blDropdownItemTag)\nexport default class BlDropdownItem extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n\n @property({ type: String })\n icon?: BaklavaIcon;\n\n /**\n * Sets item as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @event(\"bl-dropdown-item-click\") private onClick: EventDispatcher<string>;\n\n private _handleClick() {\n this.BlDropdownField?.close();\n this.BlSplitButtonField?.close();\n this.onClick(\"Action clicked!\");\n }\n\n @query(\"[role=menuitem]\") private menuElement: BlButton;\n\n /**\n * Focuses this action\n */\n focus() {\n this.menuElement.focus();\n }\n\n private BlDropdownGroupField: BlDropdownGroup | null;\n private BlDropdownField: BlDropdown | null;\n private BlSplitButtonField: BlSplitButton | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n this.BlSplitButtonField = this.closest<BlSplitButton>(blSplitButtonTag);\n\n if (!this.BlDropdownField && !this.BlDropdownGroupField && !this.BlSplitButtonField) {\n console.warn(\n `bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag}, ${blDropdownTag} or ${blSplitButtonTag}`,\n this\n );\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n render(): TemplateResult {\n return html`<bl-button\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"${ifDefined(this.icon)}\"\n role=\"menuitem\"\n ?disabled=\"${this.disabled}\"\n @bl-click=\"${this._handleClick}\"\n ><slot></slot>\n </bl-button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownItemTag]: BlDropdownItem;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}:host([kind=\"neutral\"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind=\"success\"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind=\"danger\"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.split-button-container{display:flex}.split-main-button{width:100%;--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}:host([dir=\"rtl\"]) .split-main-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}.split-main-button:focus{--bl-border-radius-l:calc(var(--bl-size-m) / 2) 0 0 calc(var(--bl-size-m) / 2)}.dropdown-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}:host([dir=\"rtl\"]) .dropdown-button{--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}.dropdown-button:focus{--bl-border-radius-l:0 calc(var(--bl-size-m) / 2) calc(var(--bl-size-m) / 2) 0}:host([variant=\"secondary\"][dir=\"rtl\"]) .dropdown-button{inset-inline-end:-1px}:host([variant=\"secondary\"]) .dropdown-button{inset-inline-start:-1px}:host([dropdown-disabled][variant=\"secondary\"]) .dropdown-button{inset-inline-start:0}:host([dropdown-disabled][variant=\"secondary\"][dir=\"rtl\"]) .dropdown-button{inset-inline-end:0}.split-divider{display:block;height:var(--bl-size-2xl);width:1px;background-color:var(--bl-color-neutral-full)}:host([variant=\"secondary\"]) .split-divider{display:none}:host([size=\"small\"]) .split-divider{height:var(--bl-size-xl)}:host([size=\"large\"]) .split-divider{height:var(--bl-size-3xl)}:host([dropdown-disabled][disabled]) .split-divider{display:block;background-color:var(--bl-color-neutral-lighter)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ReferenceElement } from \"@floating-ui/core\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport BlButton, { ButtonKind, ButtonSize, ButtonVariant, TargetType } from \"../button/bl-button\";\nimport BlDropdownItem, { blDropdownItemTag } from \"../dropdown/item/bl-dropdown-item\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport BlPopover from \"../popover/bl-popover\";\nimport style from \"./bl-split-button.css\";\n\nexport const blSplitButtonTag = \"bl-split-button\";\n\n/**\n * @tag bl-split-button\n * @summary Baklava Split Button component\n */\n\n@customElement(blSplitButtonTag)\nexport default class BlSplitButton extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\"#split-button-container\") private trigger: ReferenceElement;\n\n @query(\"bl-popover\")\n private _popover: BlPopover;\n\n @query(\"#split-main-button\")\n private mainButton: BlButton;\n\n @query(\"#dropdown-button\")\n private dropdownButton: BlButton;\n\n @state() private _isPopoverOpen = false;\n\n /**\n * Sets the split button label\n */\n @property({ type: String, reflect: true })\n label: string;\n\n /**\n * Sets the split button variant\n */\n @property({ type: String, reflect: true })\n variant: Exclude<ButtonVariant, \"tertiary\"> = \"primary\";\n\n /**\n * Sets the split button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = \"default\";\n\n /**\n * Sets the split button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = \"medium\";\n\n /**\n * Set link url. If set, split main button will be rendered as anchor tag.\n */\n @property({ type: String, reflect: true })\n href: string;\n\n /**\n * Sets main button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets loading state of button\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Sets the button label for loading status.\n */\n @property({ type: String, attribute: \"loading-label\" })\n loadingLabel: string;\n\n /**\n * Sets dropdown button as disabled\n */\n @property({ attribute: \"dropdown-disabled\", type: Boolean })\n dropdownDisabled = false;\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n @property({ type: String })\n icon?: BaklavaIcon;\n\n /**\n * Sets the anchor target. Used when `href` is set.\n */\n @property({ type: String })\n target?: TargetType = \"_self\";\n\n /**\n * Sets the type of the button. Set `submit` to use button as the submitter of parent form.\n */\n @property({ type: String })\n type: \"submit\";\n\n /**\n * Sets button to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Sets the associated form of the button. Use when `type` is set to `submit` and button is not inside the target form.\n */\n @property({ type: String })\n form: HTMLFormElement | string;\n\n /**\n * Fires when dropdown opened\n */\n @event(\"bl-dropdown-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when dropdown closed\n */\n @event(\"bl-dropdown-close\") private onClose: EventDispatcher<string>;\n\n /**\n * Fires when main button click\n */\n @event(\"bl-click\") private onClick: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\"keydown\", this.handleKeyDown);\n\n setDirectionProperty(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n }\n\n firstUpdated() {\n // To ensure proper rendering, we set `_popover.target` after the template has been created.\n this._popover.target = this.trigger;\n this.dropdownButton.addEventListener(\"bl-click\", e => e.stopPropagation());\n this.mainButton.addEventListener(\"bl-click\", e => e.stopPropagation());\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n private _handleClick() {\n !this._isPopoverOpen && !this.dropdownDisabled ? this.open() : this.close();\n }\n\n private _handlePrimaryClick() {\n this.onClick(\"Click event fired!\");\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next action\n if (this._isPopoverOpen && [\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n // Previous action\n } else if (this._isPopoverOpen && [\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n // Select action\n } else if (this._isPopoverOpen && event.key === \"Escape\") {\n this.focusedOptionIndex = -1;\n this.close();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n get options(): BlDropdownItem[] {\n return [...this.querySelectorAll(blDropdownItemTag)];\n }\n\n open() {\n this._isPopoverOpen = true;\n this._popover.show();\n this.onOpen(\"Dropdown opened!\");\n }\n\n close() {\n if (!this._isPopoverOpen) {\n return;\n }\n\n this._isPopoverOpen = false;\n this._popover.visible && this._popover.hide();\n this.onClose(\"Dropdown closed!\");\n }\n\n render(): TemplateResult {\n return html` <div class=\"split-button-container\" id=\"split-button-container\">\n <bl-button\n id=\"split-main-button\"\n class=\"split-main-button\"\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n loading-label=\"${ifDefined(this.loadingLabel)}\"\n icon=\"${ifDefined(this.icon)}\"\n href=\"${ifDefined(this.type)}\"\n ?disabled=\"${this.disabled}\"\n ?loading=\"${this.loading}\"\n type=\"${this.type}\"\n target=\"${ifDefined(this.target)}\"\n form=\"${ifDefined(this.form)}\"\n ?autofocus=\"${this.autofocus}\"\n @bl-click=\"${this._handlePrimaryClick}\"\n >\n ${this.label}\n </bl-button>\n <div class=\"split-divider\"></div>\n <bl-button\n id=\"dropdown-button\"\n class=\"dropdown-button\"\n .active=\"${this.opened}\"\n icon=\"${this.opened ? \"arrow_up\" : \"arrow_down\"}\"\n ?disabled=\"${this.dropdownDisabled}\"\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n ?loading=\"${this.loading}\"\n label=\"split-dropdown-button\"\n @bl-click=\"${this._handleClick}\"\n >\n </bl-button>\n <bl-popover fit-size placement=\"bottom-start\" @bl-popover-hide=\"${this.close}\">\n <div class=\"popover-content\">\n <slot></slot>\n </div>\n </bl-popover>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSplitButtonTag]: BlSplitButton;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "bl_dropdown_default", "event", "blDropdownItemTag", "x", "l", "__decorateClass", "i", "t", "e", "styles", "i", "bl_dropdown_item_default", "blDropdownItemTag", "BlDropdownItem", "s", "bl_dropdown_item_default", "_a", "_b", "blDropdownGroupTag", "blDropdownTag", "blSplitButtonTag", "x", "l", "__decorateClass", "e", "event", "i", "styles", "i", "bl_split_button_default", "blSplitButtonTag", "BlSplitButton", "s", "bl_split_button_default", "setDirectionProperty", "e", "event", "blDropdownItemTag", "x", "l", "__decorateClass", "i", "t"]
7
- }
@@ -1,20 +0,0 @@
1
- import{a as u}from"./chunk-IPYZIIRV.js";import{a as b}from"./chunk-DINNT5P2.js";import{a as d}from"./chunk-GRL4DWKG.js";import{a as h,b as a}from"./chunk-5MOOXA2X.js";import{a as s,b as c,f as n}from"./chunk-4OT5AMS5.js";import{d as r}from"./chunk-IZ2LK5GK.js";var m=s`:host{display:inline-block;cursor:pointer;vertical-align:middle}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);/* TODO: use predefined animation duration once it is ready */--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:"";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);inset-inline-start:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none;line-height:normal;align-items:center;margin-block:0}.label{overflow-wrap:anywhere}:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(
2
- calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))
3
- )}:host([checked][dir="rtl"]) .switch::before{transform:translateX(
4
- calc(calc(2 * var(--thumb-offset)) - var(--track-width) + var(--thumb-width))
5
- )}:host([disabled]) .switch{opacity:0.5;cursor:not-allowed}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:"";position:absolute;inset:-3px}`,p=m;var v="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[p]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}connectedCallback(){super.connectedCallback(),u(this)}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var o,i,l;let e=(l=(i=this.ariaLabel)!=null?i:(o=this.attributes.getNamedItem("aria-label"))==null?void 0:o.value)!=null?l:void 0;return c`
6
- <label @click=${this.toggle}>
7
- <slot class="label"></slot>
8
- <span
9
- class="switch"
10
- role="switch"
11
- aria-checked=${this.checked}
12
- aria-readonly=${!!this.disabled}
13
- @keydown=${this.handleKeyDown}
14
- aria-label=${b(e)}
15
- tabindex="0"
16
- >
17
- </span>
18
- </label>
19
- `}};r([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([d("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([h(v)],t);export{v as a,t as b};
20
- //# sourceMappingURL=chunk-J45OQI7D.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/switch/bl-switch.css", "../src/components/switch/bl-switch.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer;vertical-align:middle}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);/* TODO: use predefined animation duration once it is ready */--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:\"\";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);inset-inline-start:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none;line-height:normal;align-items:center;margin-block:0}.label{overflow-wrap:anywhere}:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(\n calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))\n )}:host([checked][dir=\"rtl\"]) .switch::before{transform:translateX(\n calc(calc(2 * var(--thumb-offset)) - var(--track-width) + var(--thumb-width))\n )}:host([disabled]) .switch{opacity:0.5;cursor:not-allowed}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:\"\";position:absolute;inset:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-switch.css\";\n\nexport const blSwitchTag = \"bl-switch\";\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n *\n * @cssproperty [--bl-switch-color-on=--bl-color-primary] Set the checked color\n * @cssproperty [--bl-switch-color-off=--bl-color-neutral-lighter] Set the unchecked color\n * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the checked state for switch\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * Sets the disabled state for switch\n */\n @property({ type: Boolean, reflect: true })\n disabled? = false;\n\n /**\n * Fires whenever user toggles the switch\n */\n @event(\"bl-switch-toggle\") private onToggle: EventDispatcher<boolean>;\n\n toggle() {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.onToggle(this.checked);\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n setDirectionProperty(this);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.code === \"Enter\" || event.code === \"Space\") {\n this.toggle();\n event.preventDefault();\n }\n }\n\n render(): TemplateResult {\n const ariaLabel =\n this.ariaLabel ?? this.attributes.getNamedItem(\"aria-label\")?.value ?? undefined;\n\n return html`\n <label @click=${this.toggle}>\n <slot class=\"label\"></slot>\n <span\n class=\"switch\"\n role=\"switch\"\n aria-checked=${this.checked}\n aria-readonly=${!!this.disabled}\n @keydown=${this.handleKeyDown}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=\"0\"\n >\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSwitchTag]: BlSwitch;\n }\n}\n"],
5
- "mappings": "qQACO,IAAMA,EAASC;AAAA;AAAA;AAAA;AAAA,8SAKfC,EAAQF,ECCR,IAAMG,EAAc,YAWNC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEA,mBAA0B,CACxB,MAAM,kBAAkB,EAExBC,EAAqB,IAAI,CAC3B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CA5D3B,IAAAC,EAAAC,EAAAC,EA6DI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA,sBACW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,KAAK;AAAA,0BACJ,CAAC,CAAC,KAAK;AAAA,qBACZ,KAAK;AAAA,uBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxC,CACF,EArDEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBZ,EASnB,uBAMAW,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBZ,EAenB,wBAKmCW,EAAA,CAAlCP,EAAM,kBAAkB,GApBNJ,EAoBgB,wBApBhBA,EAArBW,EAAA,CADCC,EAAcb,CAAW,GACLC",
6
- "names": ["styles", "i", "bl_switch_default", "blSwitchTag", "BlSwitch", "s", "bl_switch_default", "setDirectionProperty", "event", "_a", "_b", "_c", "ariaLabel", "x", "l", "__decorateClass", "e"]
7
- }
@@ -1,2 +0,0 @@
1
- import{a as u}from"./chunk-VJRVHJVZ.js";import{a as n}from"./chunk-T5EQ4OXS.js";import{a as c,b as h}from"./chunk-5MOOXA2X.js";import{a,b as d,f as b}from"./chunk-4OT5AMS5.js";import{d as l}from"./chunk-IZ2LK5GK.js";var y=a`:host{display:table-row}:host([checked]),:host([checked]) ::slotted(bl-table-cell){background-color:var(--bl-color-primary-contrast)}:host([disabled]),:host([disabled]) ::slotted(bl-table-cell){background-color:var(--bl-color-neutral-lightest);color:var(--bl-color-neutral-light)}:host(:not([checked], [disabled]).__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__),:host(:not([checked], [disabled]):hover) ::slotted(bl-table-cell),:host(:not([checked], [disabled]):hover),:host(:not([checked], [disabled]):hover) ::slotted(bl-table-cell){background-color:var(--bl-color-tertiary-background)}:host ::slotted(*:first-child){border-inline-start:none}:host ::slotted(*:last-child){border-inline-end:none}:host(:first-child) ::slotted(bl-table-header-cell){border-top:none;border-inline-end:none}:host(:first-child) ::slotted(bl-table-header-cell:first-child){border-top-left-radius:var(--bl-size-3xs)}:host(:first-child) ::slotted(bl-table-header-cell:last-child){border-top-right-radius:var(--bl-size-3xs);border-inline-end:1px}:host(:last-child) ::slotted(bl-table-cell){border-bottom:none}:host(:first-child) ::slotted(bl-table-cell){border-top:none}:host(:last-child) ::slotted(bl-table-cell:first-child){border-bottom-left-radius:var(--bl-size-3xs)}:host(:last-child) ::slotted(bl-table-cell:last-child){border-bottom-right-radius:var(--bl-size-3xs)}:host([sticky-first-column]) ::slotted(bl-table-header-cell:first-child),:host([sticky-first-column]) ::slotted(bl-table-cell:first-child){position:sticky;z-index:2;inset-inline-start:0}:host([sticky-last-column]) ::slotted(bl-table-header-cell:last-child),:host([sticky-last-column]) ::slotted(bl-table-cell:last-child){position:sticky;z-index:2;inset-inline-end:0}`,m=y;var f="bl-table-row",t=class extends b{constructor(){super(...arguments);this.selectionKey=""}static get styles(){return[m]}connectedCallback(){super.connectedCallback(),!this.closest(n)&&!this.closest(u)&&console.warn("bl-table-row is designed to be used inside a bl-table-header or bl-table-body",this)}updated(e){super.updated(e),this.removeAttribute("checked"),this.removeAttribute("disabled"),this.removeAttribute("sticky-first-column"),this.removeAttribute("sticky-last-column"),this.stickyFirstColumn&&this.setAttribute("sticky-first-column","true"),this.stickyLastColumn&&this.setAttribute("sticky-last-column","true"),this.checked?this.setAttribute("checked","true"):this.disabled&&this.setAttribute("disabled","true"),e.has("selectionKey")&&this.updateComplete.then(()=>{var s,r,o,i;Array.from(this.querySelectorAll("bl-table-header-cell,bl-table-cell")).map(p=>{p.requestUpdate()}),(s=this._table)!=null&&s.multiple&&((r=this._table)!=null&&r.selectable)&&((i=(o=this._table)==null?void 0:o.querySelector("bl-table-header-cell"))==null||i.requestUpdate())})}get _table(){return this.closest("bl-table")}get _firstTableCell(){return this.querySelector("bl-table-cell")}get disabled(){var e;return!!((e=this._firstTableCell)!=null&&e.disabled)}get checked(){var e;return!!((e=this._table)!=null&&e.isRowSelected(this.selectionKey))}get stickyFirstColumn(){var e;return!!((e=this._table)!=null&&e.isFirstColumnSticky())}get stickyLastColumn(){var e;return!!((e=this._table)!=null&&e.isLastColumnSticky())}render(){return d`<slot></slot>`}};l([h({type:String,reflect:!0,attribute:"selection-key"})],t.prototype,"selectionKey",2),t=l([c(f)],t);export{f as a,t as b};
2
- //# sourceMappingURL=chunk-JAZGOWKA.js.map