@trendyol/baklava 2.4.0-beta.1 → 2.4.0-beta.11

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 (142) hide show
  1. package/dist/baklava-react.d.ts +24 -1
  2. package/dist/baklava-react.d.ts.map +1 -1
  3. package/dist/baklava-react.js +1 -1
  4. package/dist/baklava-react.js.map +3 -3
  5. package/dist/baklava-vue.d.ts +2 -0
  6. package/dist/baklava.d.ts +2 -0
  7. package/dist/baklava.d.ts.map +1 -1
  8. package/dist/baklava.js +1 -1
  9. package/dist/{chunk-SX5PCXCH.js → chunk-5EFPA3CA.js} +2 -2
  10. package/dist/chunk-5EFPA3CA.js.map +7 -0
  11. package/dist/{chunk-RD3RUK2N.js → chunk-6UTBN2XX.js} +2 -2
  12. package/dist/chunk-7QGSFS64.js +16 -0
  13. package/dist/chunk-7QGSFS64.js.map +7 -0
  14. package/dist/chunk-AAGDUS7G.js +11 -0
  15. package/dist/chunk-AAGDUS7G.js.map +7 -0
  16. package/dist/chunk-AMAOGVPQ.js +106 -0
  17. package/dist/chunk-AMAOGVPQ.js.map +7 -0
  18. package/dist/{chunk-6F253HWQ.js → chunk-AVMAZXZT.js} +2 -2
  19. package/dist/chunk-AYJMIZZ3.js +11 -0
  20. package/dist/{chunk-YOV2DMM7.js.map → chunk-AYJMIZZ3.js.map} +4 -4
  21. package/dist/chunk-BEGAFK2I.js +18 -0
  22. package/dist/chunk-BEGAFK2I.js.map +7 -0
  23. package/dist/chunk-CYCIT2TG.js +2 -0
  24. package/dist/chunk-ECPWEUBG.js +2 -0
  25. package/dist/chunk-ECPWEUBG.js.map +7 -0
  26. package/dist/{chunk-VGRVU3IL.js → chunk-EPFBV6RC.js} +2 -2
  27. package/dist/chunk-EPFBV6RC.js.map +7 -0
  28. package/dist/{chunk-OQ22A5U6.js → chunk-FJTTJ5ZT.js} +2 -2
  29. package/dist/{chunk-2HHDYA7P.js → chunk-FSFO7DCO.js} +2 -2
  30. package/dist/{chunk-LDNUCSUE.js → chunk-JI2OEPG2.js} +2 -2
  31. package/dist/{chunk-RMYPWPMS.js → chunk-KR6AUZ77.js} +2 -2
  32. package/dist/{chunk-4CK6AU4F.js → chunk-KXWP6EDU.js} +2 -2
  33. package/dist/{chunk-5PMB453Q.js → chunk-L4XYDFNG.js} +2 -2
  34. package/dist/{chunk-GYWKNHAH.js → chunk-LWG2UXQG.js} +2 -2
  35. package/dist/{chunk-FAMBVSX3.js → chunk-MNNOI75G.js} +2 -2
  36. package/dist/chunk-MPKYBU46.js +33 -0
  37. package/dist/chunk-MPKYBU46.js.map +7 -0
  38. package/dist/chunk-PCREGBBF.js +7 -0
  39. package/dist/chunk-PCREGBBF.js.map +7 -0
  40. package/dist/chunk-RFUZBNM4.js +34 -0
  41. package/dist/chunk-RFUZBNM4.js.map +7 -0
  42. package/dist/{chunk-AIIJINAR.js → chunk-RQG2GHCK.js} +2 -2
  43. package/dist/{chunk-7RZ45QDQ.js → chunk-SLY6IY2R.js} +2 -2
  44. package/dist/chunk-V5OMCBVZ.js +23 -0
  45. package/dist/chunk-V5OMCBVZ.js.map +7 -0
  46. package/dist/{chunk-5F2BYHAE.js → chunk-VOYAVKU3.js} +2 -2
  47. package/dist/{chunk-R5GCM62W.js → chunk-WA7DDIST.js} +2 -2
  48. package/dist/{chunk-IRDH7CN2.js → chunk-X2KXJYXQ.js} +5 -5
  49. package/dist/{chunk-IRDH7CN2.js.map → chunk-X2KXJYXQ.js.map} +4 -4
  50. package/dist/chunk-X5MXYPRD.js +31 -0
  51. package/dist/chunk-X5MXYPRD.js.map +7 -0
  52. package/dist/chunk-XQUQIQBO.js +21 -0
  53. package/dist/chunk-XQUQIQBO.js.map +7 -0
  54. package/dist/components/alert/bl-alert.js +1 -1
  55. package/dist/components/badge/bl-badge.js +1 -1
  56. package/dist/components/button/bl-button.js +1 -1
  57. package/dist/components/checkbox-group/bl-checkbox-group.js +1 -1
  58. package/dist/components/checkbox-group/checkbox/bl-checkbox.js +1 -1
  59. package/dist/components/dialog/bl-dialog.d.ts +8 -0
  60. package/dist/components/dialog/bl-dialog.d.ts.map +1 -1
  61. package/dist/components/dialog/bl-dialog.js +1 -1
  62. package/dist/components/dialog/bl-dialog.stories.js +8 -13
  63. package/dist/components/dialog/bl-dialog.stories.js.map +4 -4
  64. package/dist/components/drawer/bl-drawer.js +1 -1
  65. package/dist/components/dropdown/bl-dropdown.d.ts.map +1 -1
  66. package/dist/components/dropdown/bl-dropdown.js +1 -1
  67. package/dist/components/dropdown/group/bl-dropdown-group.js +1 -1
  68. package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
  69. package/dist/components/icon/bl-icon.js +1 -1
  70. package/dist/components/icon/icon-list.js +1 -1
  71. package/dist/components/input/bl-input.js +1 -1
  72. package/dist/components/notification/bl-notification.d.ts +70 -0
  73. package/dist/components/notification/bl-notification.d.ts.map +1 -0
  74. package/dist/components/notification/bl-notification.js +2 -0
  75. package/dist/components/notification/bl-notification.js.map +7 -0
  76. package/dist/components/notification/bl-notification.stories.d.ts +18 -0
  77. package/dist/components/notification/bl-notification.stories.d.ts.map +1 -0
  78. package/dist/components/notification/bl-notification.stories.js +149 -0
  79. package/dist/components/notification/bl-notification.stories.js.map +7 -0
  80. package/dist/components/notification/bl-notification.test.d.ts +2 -0
  81. package/dist/components/notification/bl-notification.test.d.ts.map +1 -0
  82. package/dist/components/notification/card/bl-notification-card.d.ts +83 -0
  83. package/dist/components/notification/card/bl-notification-card.d.ts.map +1 -0
  84. package/dist/components/notification/card/bl-notification-card.js +2 -0
  85. package/dist/components/notification/card/bl-notification-card.js.map +7 -0
  86. package/dist/components/notification/card/bl-notification-card.test.d.ts +2 -0
  87. package/dist/components/notification/card/bl-notification-card.test.d.ts.map +1 -0
  88. package/dist/components/pagination/bl-pagination.js +1 -1
  89. package/dist/components/popover/bl-popover.js +1 -1
  90. package/dist/components/progress-indicator/bl-progress-indicator.js +1 -1
  91. package/dist/components/radio-group/bl-radio-group.js +1 -1
  92. package/dist/components/radio-group/radio/bl-radio.js +1 -1
  93. package/dist/components/select/bl-select.d.ts +39 -0
  94. package/dist/components/select/bl-select.d.ts.map +1 -1
  95. package/dist/components/select/bl-select.js +1 -1
  96. package/dist/components/select/bl-select.test.d.ts +1 -1
  97. package/dist/components/select/bl-select.test.d.ts.map +1 -1
  98. package/dist/components/select/option/bl-select-option.js +1 -1
  99. package/dist/components/switch/bl-switch.d.ts.map +1 -1
  100. package/dist/components/switch/bl-switch.js +1 -1
  101. package/dist/components/tab-group/bl-tab-group.js +1 -1
  102. package/dist/components/tab-group/tab/bl-tab.js +1 -1
  103. package/dist/components/tab-group/tab-panel/bl-tab-panel.js +1 -1
  104. package/dist/components/textarea/bl-textarea.js +1 -1
  105. package/dist/components/tooltip/bl-tooltip.js +1 -1
  106. package/dist/custom-elements.json +280 -4
  107. package/dist/themes/default.css +1 -1
  108. package/dist/themes/default.css.map +2 -2
  109. package/dist/utilities/elements.d.ts +5 -0
  110. package/dist/utilities/elements.d.ts.map +1 -0
  111. package/package.json +2 -2
  112. package/dist/chunk-4HHOA5GY.js +0 -23
  113. package/dist/chunk-4HHOA5GY.js.map +0 -7
  114. package/dist/chunk-5HXMVHTD.js +0 -5
  115. package/dist/chunk-5HXMVHTD.js.map +0 -7
  116. package/dist/chunk-DOUEBILK.js +0 -16
  117. package/dist/chunk-DOUEBILK.js.map +0 -7
  118. package/dist/chunk-FJQ4VEP3.js +0 -31
  119. package/dist/chunk-FJQ4VEP3.js.map +0 -7
  120. package/dist/chunk-IRY7JHJ4.js +0 -50
  121. package/dist/chunk-IRY7JHJ4.js.map +0 -7
  122. package/dist/chunk-M4N2NT5C.js +0 -33
  123. package/dist/chunk-M4N2NT5C.js.map +0 -7
  124. package/dist/chunk-SX5PCXCH.js.map +0 -7
  125. package/dist/chunk-VGRVU3IL.js.map +0 -7
  126. package/dist/chunk-VO7C5OZC.js +0 -2
  127. package/dist/chunk-YOV2DMM7.js +0 -18
  128. /package/dist/{chunk-RD3RUK2N.js.map → chunk-6UTBN2XX.js.map} +0 -0
  129. /package/dist/{chunk-6F253HWQ.js.map → chunk-AVMAZXZT.js.map} +0 -0
  130. /package/dist/{chunk-VO7C5OZC.js.map → chunk-CYCIT2TG.js.map} +0 -0
  131. /package/dist/{chunk-OQ22A5U6.js.map → chunk-FJTTJ5ZT.js.map} +0 -0
  132. /package/dist/{chunk-2HHDYA7P.js.map → chunk-FSFO7DCO.js.map} +0 -0
  133. /package/dist/{chunk-LDNUCSUE.js.map → chunk-JI2OEPG2.js.map} +0 -0
  134. /package/dist/{chunk-RMYPWPMS.js.map → chunk-KR6AUZ77.js.map} +0 -0
  135. /package/dist/{chunk-4CK6AU4F.js.map → chunk-KXWP6EDU.js.map} +0 -0
  136. /package/dist/{chunk-5PMB453Q.js.map → chunk-L4XYDFNG.js.map} +0 -0
  137. /package/dist/{chunk-GYWKNHAH.js.map → chunk-LWG2UXQG.js.map} +0 -0
  138. /package/dist/{chunk-FAMBVSX3.js.map → chunk-MNNOI75G.js.map} +0 -0
  139. /package/dist/{chunk-AIIJINAR.js.map → chunk-RQG2GHCK.js.map} +0 -0
  140. /package/dist/{chunk-7RZ45QDQ.js.map → chunk-SLY6IY2R.js.map} +0 -0
  141. /package/dist/{chunk-5F2BYHAE.js.map → chunk-VOYAVKU3.js.map} +0 -0
  142. /package/dist/{chunk-R5GCM62W.js.map → chunk-WA7DDIST.js.map} +0 -0
@@ -1,31 +0,0 @@
1
- import{a as v}from"./chunk-GRL4DWKG.js";import{a as u,b as e}from"./chunk-IRDH7CN2.js";import{a as m}from"./chunk-DINNT5P2.js";import{a as p,b as a,f as d}from"./chunk-4OT5AMS5.js";import{c as r}from"./chunk-VO7C5OZC.js";var b=()=>({fromAttribute:n=>!n||n==="true"?!0:n==="false"?!1:n});var y=p`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-primary-contrast);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-neutral-darker);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding);padding-right:calc(var(--padding) / 2)}.description{font:var(--bl-font-body-text-2)}.wrapper{display:flex;flex-flow:column;flex-wrap:wrap;justify-content:space-between;flex:auto}.content{display:flex;margin-right:var(--bl-size-2xs);flex:20 1 70%;padding:calc(var(--padding) / 2) 0}.icon{padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:var(--bl-size-m);padding:calc(var(--padding) / 2) 0}.close{--bl-color-neutral-lightest:transparent}.caption + .description{margin-top:var(--bl-size-2xs)}:host([closed]){display:none}:host([variant="success"]) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-contrast)}:host([variant="warning"]) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-contrast)}:host([variant="danger"]) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-contrast)}`,f=y;var t=class extends d{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[f]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check_fill";case"danger":return"close_fill";default:return this.variant}}_getIcon(){if(this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(s){let i=s.target;i.assignedElements().forEach(o=>{var c;if(o.tagName!=="BL-BUTTON"){(c=o.parentNode)==null||c.removeChild(o);return}i.parentElement.style.display="flex";let g=o.slot==="action-secondary"?"secondary":"primary",h={info:"default",warning:"neutral",success:"success",danger:"danger"};o.setAttribute("variant",g),o.setAttribute("kind",h[this.variant]),o.setAttribute("size","medium"),o.removeAttribute("icon")})}render(){let s=this.caption||this._hasAlertCaptionSlot?a`<span class="caption">
2
- <slot name="caption"> ${this.caption} </slot>
3
- </span>`:null,i=this._getIcon()?a`<bl-icon class="icon" name=${m(this._getIcon())}></bl-icon>`:null,l=this.closable?a`<bl-button
4
- class="close"
5
- label="close"
6
- kind="neutral"
7
- icon="close"
8
- variant="tertiary"
9
- @click=${this._closeHandler}
10
- ></bl-button>`:null,o=a`<span class="description">
11
- <slot> ${this.description} </slot>
12
- </span>`;return a`
13
- <div class="alert">
14
- ${i}
15
- <div class="wrapper">
16
- <div class="content">
17
- <div class="text-content">${s} ${o}</div>
18
- </div>
19
- <div class="actions">
20
- <slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
21
- <slot
22
- class="action-secondary"
23
- name="action-secondary"
24
- @slotchange=${this._initAlertActionSlot}
25
- ></slot>
26
- </div>
27
- </div>
28
- ${l}
29
- </div>
30
- `}};r([e({reflect:!0})],t.prototype,"variant",2),r([e()],t.prototype,"description",2),r([e({converter:b()})],t.prototype,"icon",2),r([e({type:Boolean,reflect:!0})],t.prototype,"closable",2),r([e()],t.prototype,"caption",2),r([e({type:Boolean,reflect:!0})],t.prototype,"closed",2),r([v("bl-close")],t.prototype,"onClose",2),t=r([u("bl-alert")],t);export{t as a};
31
- //# sourceMappingURL=chunk-FJQ4VEP3.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/utilities/string-boolean.converter.ts", "../src/components/alert/bl-alert.css", "../src/components/alert/bl-alert.ts"],
4
- "sourcesContent": ["import type { ComplexAttributeConverter } from \"lit\";\n\nexport const stringBooleanConverter = (): ComplexAttributeConverter<string | boolean> => {\n return {\n fromAttribute: (value: string): string | boolean => {\n if (!value || value === \"true\") return true;\n if (value === \"false\") return false;\n return value;\n },\n };\n};\n", "import {css} from 'lit';\nexport const styles = css`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-primary-contrast);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-neutral-darker);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding);padding-right:calc(var(--padding) / 2)}.description{font:var(--bl-font-body-text-2)}.wrapper{display:flex;flex-flow:column;flex-wrap:wrap;justify-content:space-between;flex:auto}.content{display:flex;margin-right:var(--bl-size-2xs);flex:20 1 70%;padding:calc(var(--padding) / 2) 0}.icon{padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:var(--bl-size-m);padding:calc(var(--padding) / 2) 0}.close{--bl-color-neutral-lightest:transparent}.caption + .description{margin-top:var(--bl-size-2xs)}:host([closed]){display:none}:host([variant=\"success\"]) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-contrast)}:host([variant=\"warning\"]) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-contrast)}:host([variant=\"danger\"]) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-contrast)}`;\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 { event, EventDispatcher } from \"../../utilities/event\";\nimport { stringBooleanConverter } from \"../../utilities/string-boolean.converter\";\nimport { ButtonVariant, ButtonKind, ButtonSize } from \"../button/bl-button\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-alert.css\";\n\nexport type AlertVariant = \"info\" | \"warning\" | \"success\" | \"danger\";\n\n/**\n * @tag bl-alert\n * @summary Baklava Alert component\n */\n\n@customElement(\"bl-alert\")\nexport default class BlAlert extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets alert variant\n */\n @property({ reflect: true })\n variant: AlertVariant = \"info\";\n\n /**\n * Sets alert description\n */\n @property()\n description?: string;\n\n /**\n * Allows to customize alert icon\n */\n @property({ converter: stringBooleanConverter() })\n icon?: boolean | BaklavaIcon;\n\n /**\n * Displays a close button.\n */\n @property({ type: Boolean, reflect: true })\n closable = false;\n\n /**\n * Sets alert caption.\n */\n @property()\n caption?: string;\n\n /**\n * Sets alert components display state.\n */\n @property({ type: Boolean, reflect: true })\n closed = false;\n\n /**\n * Opens alert component.\n */\n public open() {\n this.closed = false;\n }\n\n /**\n * Closes alert component.\n */\n public close() {\n this.closed = true;\n }\n\n /**\n * Fires when close button clicked.\n */\n @event(\"bl-close\") private onClose: EventDispatcher<boolean>;\n\n private get _hasAlertCaptionSlot() {\n return this.querySelector(':scope > [slot=\"caption\"]') !== null;\n }\n\n private _closeHandler() {\n this.closed = true;\n this.onClose(true);\n }\n\n private _predefinedIcons() {\n switch (this.variant) {\n case \"success\":\n return \"check_fill\";\n case \"danger\":\n return \"close_fill\";\n default:\n return this.variant;\n }\n }\n\n private _getIcon(): BaklavaIcon | undefined {\n if (!this.icon) return;\n if (this.icon === true) return this._predefinedIcons();\n return this.icon;\n }\n\n private _initAlertActionSlot(event: Event) {\n const slotElement = event.target as HTMLSlotElement;\n const slotElements = slotElement.assignedElements();\n\n slotElements.forEach(element => {\n if (element.tagName !== \"BL-BUTTON\") {\n element.parentNode?.removeChild(element);\n return;\n }\n\n (slotElement.parentElement as HTMLElement).style.display = \"flex\";\n\n const variant = element.slot === \"action-secondary\" ? \"secondary\" : \"primary\";\n const buttonTypes: Record<AlertVariant, string> = {\n info: \"default\",\n warning: \"neutral\",\n success: \"success\",\n danger: \"danger\",\n };\n\n element.setAttribute(\"variant\", variant as ButtonVariant);\n element.setAttribute(\"kind\", buttonTypes[this.variant] as ButtonKind);\n element.setAttribute(\"size\", \"medium\" as ButtonSize);\n element.removeAttribute(\"icon\");\n });\n }\n\n render(): TemplateResult {\n const caption =\n this.caption || this._hasAlertCaptionSlot\n ? html`<span class=\"caption\">\n <slot name=\"caption\"> ${this.caption} </slot>\n </span>`\n : null;\n const icon = this._getIcon()\n ? html`<bl-icon class=\"icon\" name=${ifDefined(this._getIcon())}></bl-icon>`\n : null;\n\n const closable = this.closable\n ? html`<bl-button\n class=\"close\"\n label=\"close\"\n kind=\"neutral\"\n icon=\"close\"\n variant=\"tertiary\"\n @click=${this._closeHandler}\n ></bl-button>`\n : null;\n const description = html`<span class=\"description\">\n <slot> ${this.description} </slot>\n </span>`;\n\n return html`\n <div class=\"alert\">\n ${icon}\n <div class=\"wrapper\">\n <div class=\"content\">\n <div class=\"text-content\">${caption} ${description}</div>\n </div>\n <div class=\"actions\">\n <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n <slot\n class=\"action-secondary\"\n name=\"action-secondary\"\n @slotchange=${this._initAlertActionSlot}\n ></slot>\n </div>\n </div>\n ${closable}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-alert\": BlAlert;\n }\n}\n"],
5
- "mappings": "6NAEO,IAAMA,EAAyB,KAC7B,CACL,cAAgBC,GACV,CAACA,GAASA,IAAU,OAAe,GACnCA,IAAU,QAAgB,GACvBA,CAEX,GCRK,IAAMC,EAASC,o/CACfC,EAAQF,ECgBf,IAAqBG,EAArB,cAAqCC,CAAW,CAAhD,kCASE,aAAwB,OAkBxB,cAAW,GAYX,YAAS,GAtCT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyCO,MAAO,CACZ,KAAK,OAAS,EAChB,CAKO,OAAQ,CACb,KAAK,OAAS,EAChB,CAOA,IAAY,sBAAuB,CACjC,OAAO,KAAK,cAAc,2BAA2B,IAAM,IAC7D,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,QAAQ,EAAI,CACnB,CAEQ,kBAAmB,CACzB,OAAQ,KAAK,QAAS,CACpB,IAAK,UACH,MAAO,aACT,IAAK,SACH,MAAO,aACT,QACE,OAAO,KAAK,OAChB,CACF,CAEQ,UAAoC,CAC1C,GAAK,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACzC,IAAMC,EAAcD,EAAM,OACLC,EAAY,iBAAiB,EAErC,QAAQC,GAAW,CA5GpC,IAAAC,EA6GM,GAAID,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,OAGDD,EAAY,cAA8B,MAAM,QAAU,OAE3D,IAAMG,EAAUF,EAAQ,OAAS,mBAAqB,YAAc,UAC9DG,EAA4C,CAChD,KAAM,UACN,QAAS,UACT,QAAS,UACT,OAAQ,QACV,EAEAH,EAAQ,aAAa,UAAWE,CAAwB,EACxDF,EAAQ,aAAa,OAAQG,EAAY,KAAK,OAAO,CAAe,EACpEH,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMI,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAW,KAAK,SAClBH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMW,KAAK;AAAA,uBAEhB,KACEI,EAAcJ;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA,UAEDC;AAAA;AAAA;AAAA,wCAG8BF,KAAWK;AAAA;AAAA;AAAA,6DAGU,KAAK;AAAA;AAAA;AAAA;AAAA,4BAItC,KAAK;AAAA;AAAA;AAAA;AAAA,UAIvBD;AAAA;AAAA,KAGR,CACF,EArJEE,EAAA,CADC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRf,EASnB,uBAMAe,EAAA,CADC,EAAS,GAdSf,EAenB,2BAMAe,EAAA,CADC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BhB,EAqBnB,oBAMAe,EAAA,CADC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBf,EA2BnB,wBAMAe,EAAA,CADC,EAAS,GAhCSf,EAiCnB,uBAMAe,EAAA,CADC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBf,EAuCnB,sBAmB2Be,EAAA,CAA1BZ,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBe,EAAA,CADCE,EAAc,UAAU,GACJjB",
6
- "names": ["stringBooleanConverter", "value", "styles", "i", "bl_alert_default", "BlAlert", "s", "bl_alert_default", "event", "slotElement", "element", "_a", "variant", "buttonTypes", "caption", "x", "icon", "l", "closable", "description", "__decorateClass", "stringBooleanConverter", "e"]
7
- }
@@ -1,50 +0,0 @@
1
- import{a as m}from"./chunk-3B64VOWB.js";import{b as g,d as y,f as x,g as O,h as _}from"./chunk-EZSEQHRH.js";import{a as f}from"./chunk-DJOD4BTL.js";import{a as p}from"./chunk-6LT7O7T2.js";import{a as b}from"./chunk-GRL4DWKG.js";import{a as u,b as o,c as s,d as r,e as h}from"./chunk-IRDH7CN2.js";import{a as v}from"./chunk-DINNT5P2.js";import{a as c,b as n,f as d}from"./chunk-4OT5AMS5.js";import{c as l}from"./chunk-VO7C5OZC.js";var T=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([size="large"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size="small"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.remove-all::after{content:"";position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-neutral-lighter)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:", "}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:where(.selected) .label,:host(:not([placeholder]).select-open) .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`,w=T;var t=class extends f(d){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.clearable=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var a;let i=e.composedPath();(a=i==null?void 0:i.find(z=>z.tagName==="BL-SELECT"))!=null&&a.contains(this)||this.close()};this.focusedOptionIndex=-1}static get styles(){return[w]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let i=new FormData;e.forEach(a=>i.append(this.name,`${a}`)),this.setValue(i)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=O(this._selectInput,this._popover,()=>{_(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[g(),y(8),x({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:i})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${i}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",i=>{this.reportValidity()||i.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=n`<ul class="selected-options">
2
- ${this._selectedOptions.map(a=>n`<li>${a.textContent}</li>`)}
3
- </ul>`,i=this.clearable||this.multiple?n`<bl-button
4
- class="remove-all"
5
- size="small"
6
- variant="tertiary"
7
- kind="neutral"
8
- icon="close"
9
- @click=${this._onClickRemove}
10
- ></bl-button>`:"";return n`<fieldset
11
- class=${p({"select-input":!0,"has-overflowed-options":this._additionalSelectedOptionCount>0})}
12
- tabindex="${this.disabled?"-1":0}"
13
- ?autofocus=${this.autofocus}
14
- @click=${this.togglePopover}
15
- role="button"
16
- aria-haspopup="listbox"
17
- aria-expanded="${this.opened}"
18
- aria-labelledby="label"
19
- >
20
- <legend><span>${this.label}</span></legend>
21
- <span class="placeholder">${this.placeholder}</span>
22
- <span class="label">${this.label}</span>
23
- ${e}
24
- <span class="additional-selection-count">+${this._additionalSelectedOptionCount}</span>
25
- <div class="actions">
26
- ${i}
27
- <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
28
-
29
- <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
30
- </div>
31
- </fieldset>`}render(){let e=this.checkValidity()?"":n`<p id="errorMessage" aria-live="polite" class="invalid-text">
32
- ${this.validationMessage}
33
- </p>`,i=this.helpText?n`<p class="help-text">${this.helpText}</p>`:"",a=this.label?n`<label id="label">${this.label}</label>`:"";return n`<div
34
- class=${p({"select-wrapper":!0,"select-open":this.opened,selected:this._selectedOptions.length>0,invalid:!this.validity.valid,dirty:this.dirty})}
35
- @keydown=${this.handleKeydown}
36
- >
37
- ${a} ${this.inputTemplate()}
38
- <div
39
- class="popover"
40
- tabindex="${v(this._isPopoverOpen?void 0:"-1")}"
41
- @bl-select-option=${this._handleSelectOptionEvent}
42
- role="listbox"
43
- aria-multiselectable="${this.multiple}"
44
- aria-labelledby="label"
45
- >
46
- <slot></slot>
47
- </div>
48
- <div class="hint">${e} ${i}</div>
49
- </div> `}handleKeydown(e){this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code)?(this.togglePopover(),e.preventDefault()):this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code)?(this.open(),e.preventDefault()):e.code==="Escape"?(this.close(),e.preventDefault()):this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)&&(e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),e.preventDefault())}togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions.map(e=>({value:e.value,selected:e.selected,text:e.textContent})))}_handleSingleSelect(e){this.value=e.value,this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let i=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(i)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(i=>i.selected).forEach(i=>{i.selected=!1}),this.value=null,this._additionalSelectedOptionCount=0,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(i=>i.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.value=""),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),this._checkAdditionalItemCount()}registerOption(e){this._connectedOptions.push(e),e.selected&&(this.multiple?(Array.isArray(this.value)||(this.value=[]),this.value=[...this.value,e.value]):this.value=e.value),this.setOptionsSelected(),this.requestUpdate()}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1)}};t.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},t.formControlValidators=[m],l([o()],t.prototype,"name",2),l([o()],t.prototype,"value",1),l([o({reflect:!0})],t.prototype,"label",2),l([o({reflect:!0})],t.prototype,"placeholder",2),l([o({type:String,reflect:!0})],t.prototype,"size",2),l([o({type:Boolean,reflect:!0})],t.prototype,"required",2),l([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),l([o({type:Boolean,reflect:!0})],t.prototype,"clearable",2),l([o({type:Boolean,reflect:!0})],t.prototype,"multiple",2),l([o({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),l([o({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),l([o({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),l([o({type:String,attribute:"invalid-text",reflect:!0})],t.prototype,"customInvalidText",2),l([s()],t.prototype,"_isPopoverOpen",2),l([s()],t.prototype,"_additionalSelectedOptionCount",2),l([r(".selected-options")],t.prototype,"selectedOptionsContainer",2),l([h(".selected-options li")],t.prototype,"selectedOptionsItems",2),l([r(".popover")],t.prototype,"_popover",2),l([r(".select-input")],t.prototype,"_selectInput",2),l([b("bl-select")],t.prototype,"_onBlSelect",2),l([s()],t.prototype,"_selectedOptions",2),l([s()],t.prototype,"dirty",2),l([r(".select-input")],t.prototype,"validationTarget",2),t=l([u("bl-select")],t);export{t as a};
50
- //# sourceMappingURL=chunk-IRY7JHJ4.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([size=\"large\"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size=\"small\"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.remove-all::after{content:\"\";position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-neutral-lighter)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:\", \"}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:where(.selected) .label,:host(:not([placeholder]).select-open) .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\nimport { customElement, property, query, queryAll, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { autoUpdate, computePosition, flip, MiddlewareState, offset, size } from \"@floating-ui/dom\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport { FormValue } from \"@open-wc/form-helpers\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../icon/bl-icon\";\nimport style from \"../select/bl-select.css\";\nimport \"../select/option/bl-select-option\";\nimport type BlSelectOption from \"./option/bl-select-option\";\n\nexport interface ISelectOption<T = string> {\n value: T;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = \"medium\" | \"large\" | \"small\";\n\nexport type CleanUpFunction = () => void;\n\n/**\n * @tag bl-select\n * @summary Baklava Select component\n *\n * @cssproperty [--bl-popover-position=fixed] Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element.\n */\n@customElement(\"bl-select\")\nexport default class BlSelect<ValueType extends FormValue = string> extends FormControlMixin(\n LitElement\n) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = [requiredValidator];\n\n /**\n * Sets name of the select field\n */\n @property()\n name: string;\n\n private _value: ValueType | ValueType[] | null;\n\n private _initialValue: ValueType | ValueType[] | null;\n\n /**\n * Sets the value of the select\n */\n @property()\n get value(): ValueType | ValueType[] | null {\n return this._value;\n }\n\n set value(val: ValueType | ValueType[] | null) {\n this._value = val;\n\n if (Array.isArray(val)) {\n const formData = new FormData();\n\n val.forEach(option => formData.append(this.name, `${option}`));\n this.setValue(formData);\n } else {\n this.setValue(val);\n }\n\n this.setOptionsSelected();\n }\n\n shouldFormValueUpdate(): boolean {\n return this.value !== null && this.value !== \"\";\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets the size value. Select component's height value will be changed accordingly\n */\n @property({ type: String, reflect: true })\n size: SelectSize = \"medium\";\n\n /**\n * When option is not selected, shows component in error state\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets whether the selected option is clearable\n */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /**\n * Allows multiple options to be selected\n */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: \"label-fixed\", reflect: true })\n labelFixed = false;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: \"help-text\", reflect: true })\n helpText?: string;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: \"invalid-text\", reflect: true })\n customInvalidText?: string;\n\n /* Declare internal reactive properties */\n @state()\n private _isPopoverOpen = false;\n\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @query(\".selected-options\")\n private selectedOptionsContainer!: HTMLElement;\n\n @queryAll(\".selected-options li\")\n private selectedOptionsItems!: NodeListOf<HTMLElement>;\n\n @query(\".popover\")\n private _popover: HTMLElement;\n\n @query(\".select-input\")\n private _selectInput: HTMLElement;\n\n /**\n * Fires when selection changes\n */\n @event(\"bl-select\") private _onBlSelect: EventDispatcher<ISelectOption<ValueType>[]>;\n\n private _connectedOptions: BlSelectOption<ValueType>[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n private setOptionsSelected() {\n this._connectedOptions.forEach(\n option =>\n (option.selected =\n this.value === option.value ||\n (Array.isArray(this.value) && this.value.includes(option.value)))\n );\n\n this._selectedOptions = [...this.options.filter(option => option.selected)];\n }\n\n get options() {\n return this._connectedOptions;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n @state()\n private _selectedOptions: BlSelectOption<ValueType>[] = [];\n\n @state()\n private dirty = false;\n\n get selectedOptions(): BlSelectOption<ValueType>[] {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n validityCallback(): string | void {\n if (this.customInvalidText) {\n return this.customInvalidText;\n }\n const select = document.createElement(\"select\");\n\n select.required = this.required;\n\n return select.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n resetFormControl(): void {\n this.value = this._initialValue;\n }\n\n @query(\".select-input\")\n validationTarget: HTMLElement;\n\n open() {\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener(\"click\", this._interactOutsideHandler, true);\n document.addEventListener(\"focus\", this._interactOutsideHandler, true);\n }\n\n close() {\n this._isPopoverOpen = false;\n this.focusedOptionIndex = -1;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener(\"click\", this._interactOutsideHandler, true);\n document.removeEventListener(\"focus\", this._interactOutsideHandler, true);\n }\n\n private _interactOutsideHandler = (event: MouseEvent | FocusEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === \"BL-SELECT\")?.contains(this)) {\n this.close();\n }\n };\n\n private _setupPopover() {\n this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n computePosition(this._selectInput, this._popover, {\n placement: \"bottom\",\n strategy: \"fixed\",\n middleware: [\n flip(),\n offset(8),\n size({\n apply(args: MiddlewareState) {\n Object.assign(args.elements.floating.style, {\n width: `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n },\n }),\n ],\n }).then(({ x, y }) => {\n this._popover.style.setProperty(\"--left\", `${x}px`);\n this._popover.style.setProperty(\"--top\", `${y}px`);\n });\n });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.form?.addEventListener(\"submit\", (e: SubmitEvent) => {\n if (!this.reportValidity()) {\n e.preventDefault();\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._cleanUpPopover && this._cleanUpPopover();\n }\n\n private inputTemplate() {\n const inputSelectedOptions = html`<ul class=\"selected-options\">\n ${this._selectedOptions.map(item => html`<li>${item.textContent}</li>`)}\n </ul>`;\n const removeButton =\n this.clearable || this.multiple\n ? html`<bl-button\n class=\"remove-all\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this._onClickRemove}\n ></bl-button>`\n : \"\";\n\n return html`<fieldset\n class=${classMap({\n \"select-input\": true,\n \"has-overflowed-options\": this._additionalSelectedOptionCount > 0,\n })}\n tabindex=\"${this.disabled ? \"-1\" : 0}\"\n ?autofocus=${this.autofocus}\n @click=${this.togglePopover}\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"${this.opened}\"\n aria-labelledby=\"label\"\n >\n <legend><span>${this.label}</span></legend>\n <span class=\"placeholder\">${this.placeholder}</span>\n <span class=\"label\">${this.label}</span>\n ${inputSelectedOptions}\n <span class=\"additional-selection-count\">+${this._additionalSelectedOptionCount}</span>\n <div class=\"actions\">\n ${removeButton}\n <bl-icon class=\"dropdown-icon open\" name=\"arrow_up\"></bl-icon>\n\n <bl-icon class=\"dropdown-icon closed\" name=\"arrow_down\"></bl-icon>\n </div>\n </fieldset>`;\n }\n\n render() {\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 helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : \"\";\n\n const label = this.label ? html`<label id=\"label\">${this.label}</label>` : \"\";\n\n return html`<div\n class=${classMap({\n \"select-wrapper\": true,\n \"select-open\": this.opened,\n \"selected\": this._selectedOptions.length > 0,\n \"invalid\": !this.validity.valid,\n \"dirty\": this.dirty,\n })}\n @keydown=${this.handleKeydown}\n >\n ${label} ${this.inputTemplate()}\n <div\n class=\"popover\"\n tabindex=\"${ifDefined(this._isPopoverOpen ? undefined : \"-1\")}\"\n @bl-select-option=${this._handleSelectOptionEvent}\n role=\"listbox\"\n aria-multiselectable=\"${this.multiple}\"\n aria-labelledby=\"label\"\n >\n <slot></slot>\n </div>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div> `;\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.focusedOptionIndex === -1 && [\"Enter\", \"Space\"].includes(event.code)) {\n this.togglePopover();\n event.preventDefault();\n } else if (this._isPopoverOpen === false && [\"ArrowDown\", \"ArrowUp\"].includes(event.code)) {\n this.open();\n event.preventDefault();\n } else if (event.code === \"Escape\") {\n this.close();\n event.preventDefault();\n } else if (this._isPopoverOpen && [\"ArrowDown\", \"ArrowUp\"].includes(event.code)) {\n event.code === \"ArrowDown\" && this.focusedOptionIndex++;\n event.code === \"ArrowUp\" && this.focusedOptionIndex--;\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\n private togglePopover() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n this._onBlSelect(\n this._selectedOptions.map(\n option =>\n ({\n value: option.value,\n selected: option.selected,\n text: option.textContent,\n } as ISelectOption<ValueType>)\n )\n );\n }\n\n private _handleSingleSelect(optionItem: BlSelectOption<ValueType>) {\n this.value = optionItem.value;\n\n this._handleSelectEvent();\n this._isPopoverOpen = false;\n }\n\n private _handleMultipleSelect() {\n this.value = this._connectedOptions\n .filter(option => option.selected)\n .map(option => option.value);\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.target as BlSelectOption<ValueType>;\n\n this.dirty = true;\n\n if (this.multiple) {\n this._handleMultipleSelect();\n } else {\n this._handleSingleSelect(optionItem);\n }\n }\n\n private _onClickRemove(e: MouseEvent) {\n e.stopPropagation();\n\n this._connectedOptions\n .filter(option => option.selected)\n .forEach(option => {\n option.selected = false;\n });\n\n this.value = null;\n this._additionalSelectedOptionCount = 0;\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) {\n this._additionalSelectedOptionCount = 0;\n return;\n }\n\n const firstNonVisibleItemIndex = [...this.selectedOptionsItems].findIndex(\n item => item.offsetLeft > this.selectedOptionsContainer.offsetWidth\n );\n\n if (firstNonVisibleItemIndex > -1) {\n this._additionalSelectedOptionCount =\n this.selectedOptionsItems.length - firstNonVisibleItemIndex;\n } else {\n this._additionalSelectedOptionCount = 0;\n }\n }\n\n protected firstUpdated(): void {\n if (this.value === undefined) {\n this.value = \"\" as ValueType;\n }\n\n this._initialValue = this._value;\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has(\"multiple\") &&\n typeof _changedProperties.get(\"multiple\") === \"boolean\"\n ) {\n this.value = null;\n }\n\n this._checkAdditionalItemCount();\n }\n\n /**\n * This method is used by `bl-select-option` component to register itself to bl-select.\n * @param option BlSelectOption reference to be registered\n */\n registerOption(option: BlSelectOption<ValueType>) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n if (this.multiple) {\n if (!Array.isArray(this.value)) {\n this.value = [];\n }\n this.value = [...this.value, option.value];\n } else {\n this.value = option.value;\n }\n }\n\n this.setOptionsSelected();\n this.requestUpdate();\n }\n\n /**\n * This method is used by `bl-select-option` component to unregister itself from bl-select.\n * @param option BlSelectOption reference to be unregistered\n */\n unregisterOption(option: BlSelectOption<ValueType>) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-select\": BlSelect;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["styles", "i", "bl_select_default", "BlSelect", "FormControlMixin", "s", "event", "_a", "eventPath", "el", "bl_select_default", "val", "formData", "option", "select", "autoUpdate", "computePosition", "flip", "offset", "size", "args", "x", "y", "e", "inputSelectedOptions", "item", "removeButton", "o", "invalidMessage", "helpMessage", "label", "l", "optionItem", "firstNonVisibleItemIndex", "_changedProperties", "requiredValidator", "__decorateClass", "t", "i"]
7
- }
@@ -1,33 +0,0 @@
1
- import{a as g}from"./chunk-6LT7O7T2.js";import{a as c}from"./chunk-GRL4DWKG.js";import{a as b,b as d,d as n}from"./chunk-IRDH7CN2.js";import{a as f,b as r,f as u}from"./chunk-4OT5AMS5.js";import{c as t}from"./chunk-VO7C5OZC.js";var y=f`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,m=y;var o=class extends u{constructor(){super(...arguments);this.open=!1;this.polyfilled=!window.HTMLDialogElement;this.clickOutsideHandler=e=>{e.composedPath().includes(this.container)||this.closeDialog("backdrop")};this.onKeydown=e=>{e.code==="Escape"&&this.open&&(e.preventDefault(),this.closeDialog("keyboard"))}}static get styles(){return[m]}updated(e){(e.has("open")||e.has("polyfilled"))&&this.toggleDialogHandler()}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,i,a,l;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",s=>this.onKeydown(s)),window==null||window.addEventListener("resize",()=>this.toggleFooterShadow())):((l=(a=this.dialog)==null?void 0:a.close)==null||l.call(a),this.onClose({isOpen:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow))}closeDialog(e){this.onRequestClose({source:e},{cancelable:!0}).defaultPrevented||(this.open=!1)}toggleFooterShadow(){var e,i,a,l,s,v;((e=this.content)==null?void 0:e.scrollHeight)>((i=this.content)==null?void 0:i.offsetHeight)?(l=(a=this.footer)==null?void 0:a.classList)==null||l.add("shadow"):(v=(s=this.footer)==null?void 0:s.classList)==null||v.remove("shadow")}renderFooter(){return this._hasFooter?r`<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?r`<h2 id="dialog-caption">${this.caption}</h2>`:"",i={container:!0,"has-footer":this._hasFooter};return r` <div class="${g(i)}">
6
- <header>
7
- ${e}
8
- <bl-button
9
- @click="${()=>this.closeDialog("close-button")}"
10
- icon="close"
11
- variant="tertiary"
12
- kind="neutral"
13
- ></bl-button>
14
- </header>
15
- <section class="content"><slot></slot></section>
16
- ${this.renderFooter()}
17
- </div>`}render(){return this.polyfilled?r`<div
18
- class="dialog-polyfill"
19
- role="dialog"
20
- aria-labelledby="dialog-caption"
21
- @click=${this.clickOutsideHandler}
22
- >
23
- ${this.renderContainer()}
24
- </div>`:r`
25
- <dialog
26
- class="dialog"
27
- aria-labelledby="dialog-caption"
28
- @click=${this.clickOutsideHandler}
29
- >
30
- ${this.renderContainer()}
31
- </dialog>
32
- `}};t([d({type:Boolean,reflect:!0,hasChanged(p,h){return p===!1&&h===void 0?!1:p!==h}})],o.prototype,"open",2),t([d({type:String})],o.prototype,"caption",2),t([d({type:Boolean,reflect:!0})],o.prototype,"polyfilled",2),t([n(".dialog")],o.prototype,"dialog",2),t([n("footer")],o.prototype,"footer",2),t([n(".container")],o.prototype,"container",2),t([n(".content")],o.prototype,"content",2),t([c("bl-dialog-open")],o.prototype,"onOpen",2),t([c("bl-dialog-request-close")],o.prototype,"onRequestClose",2),t([c("bl-dialog-close")],o.prototype,"onClose",2),o=t([b("bl-dialog")],o);export{o as a};
33
- //# sourceMappingURL=chunk-M4N2NT5C.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);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport style from \"./bl-dialog.css\";\n\ntype DialogElement = {\n showModal: () => void;\n close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n */\n@customElement(\"bl-dialog\")\nexport default class BlDialog extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets dialog open-close status\n */\n @property({\n type: Boolean,\n reflect: true,\n hasChanged(newVal: boolean, oldVal: boolean | undefined) {\n if (newVal === false && oldVal === undefined) {\n // Assume that the initial value is false\n return false;\n }\n return newVal !== oldVal;\n },\n })\n open = false;\n\n /**\n * Sets the dialog title\n */\n @property({ type: String })\n caption?: string;\n\n /**\n * Determines if dialog currently uses polyfilled version instead of native HTML Dialog. By\n * default, it uses native Dialog if the browser supports it, otherwise polyfills. You can force\n * using polyfill by setting this to true in some cases like to show some content on top of dialog\n * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some\n * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.\n */\n @property({ type: Boolean, reflect: true })\n polyfilled = !window.HTMLDialogElement;\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 } else {\n this.dialog?.close?.();\n this.onClose({ isOpen: false });\n document.body.style.overflow = \"auto\";\n window?.removeEventListener(\"keydown\", this.onKeydown);\n window?.removeEventListener(\"resize\", this.toggleFooterShadow);\n }\n }\n\n private closeDialog(source: \"close-button\" | \"keyboard\" | \"backdrop\") {\n const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });\n\n if (requestCloseEvent.defaultPrevented) {\n return;\n }\n\n this.open = false;\n }\n\n private clickOutsideHandler = (event: MouseEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath.includes(this.container)) {\n this.closeDialog(\"backdrop\");\n }\n };\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === \"Escape\" && this.open) {\n event.preventDefault();\n this.closeDialog(\"keyboard\");\n }\n };\n\n private toggleFooterShadow() {\n if (this.content?.scrollHeight > this.content?.offsetHeight) {\n this.footer?.classList?.add(\"shadow\");\n } else {\n this.footer?.classList?.remove(\"shadow\");\n }\n }\n\n private renderFooter() {\n return this._hasFooter\n ? html`<footer>\n <slot name=\"primary-action\"></slot>\n <slot name=\"secondary-action\"></slot>\n <slot name=\"tertiary-action\"></slot>\n </footer>`\n : \"\";\n }\n\n private renderContainer() {\n const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : \"\";\n\n const classes = {\n \"container\": true,\n \"has-footer\": this._hasFooter,\n };\n\n return html` <div class=\"${classMap(classes)}\">\n <header>\n ${title}\n <bl-button\n @click=\"${() => this.closeDialog(\"close-button\")}\"\n icon=\"close\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>\n </header>\n <section class=\"content\"><slot></slot></section>\n ${this.renderFooter()}\n </div>`;\n }\n\n render(): TemplateResult {\n return this.polyfilled\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", "bl_dialog_default", "changedProperties", "node", "_a", "_b", "_c", "_d", "source", "_e", "_f", "x", "title", "classes", "o", "__decorateClass", "e", "newVal", "oldVal", "i"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/select/option/bl-select-option.css", "../src/components/select/option/bl-select-option.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative}.option-container{--option-font:var(--bl-font-title-3-regular);--option-spacing:var(--bl-size-xs) 0;--option-selected-color:var(--bl-color-primary);--option-hover-color:var(--bl-color-primary-highlight);--option-color:var(--bl-color-neutral-darker);--option-disabled-color:var(--bl-color-neutral-light);--option-separator:1px solid var(--bl-color-neutral-lighter);--option-gap:var(--bl-size-2xs);--option-transition:color 120ms ease-out}.option-container::after{position:absolute;content:\"\";width:100%;bottom:0;border-bottom:var(--option-separator)}:host(:last-of-type) .option-container::after{border-bottom:none}.single-option{width:100%;display:block;cursor:pointer;color:var(--option-color);margin:var(--option-spacing);transition:var(--option-transition);font:var(--option-font);user-select:none;position:relative;outline:none}.single-option:focus-visible::after{content:\"\";position:absolute;inset:calc(var(--bl-size-3xs) * -1);border:var(--bl-size-4xs) solid var(--option-hover-color);border-radius:var(--bl-size-4xs)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .single-option,:host(:hover) .single-option{color:var(--option-hover-color)}:host([selected]) .single-option{color:var(--option-selected-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .single-option{color:var(--option-disabled-color);cursor:not-allowed;pointer-events:none}.checkbox-option{width:100%;display:block;color:var(--option-color);padding:var(--option-spacing)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { FormValue } from \"@open-wc/form-helpers\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport BlSelect from \"../bl-select\";\nimport style from \"./bl-select-option.css\";\n\n@customElement(\"bl-select-option\")\nexport default class BlSelectOption<ValueType extends FormValue = string> extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private _value: ValueType;\n\n /* Declare reactive properties */\n /**\n * Sets the value for the option\n */\n @property({})\n get value(): ValueType {\n return this._value || (this.textContent as ValueType);\n }\n\n set value(val: ValueType) {\n this._value = val;\n }\n\n /**\n * Sets option as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets option as selected state\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @state()\n multiple = false;\n\n /**\n * Fires when clicked on the option\n */\n @event(\"bl-select-option\") private _onSelect: EventDispatcher<ValueType | string | null>;\n\n /**\n * Fires when checkbox is focused\n */\n @event(\"bl-focus\") private onFocus: EventDispatcher<ValueType | string | null>;\n\n /**\n * Fires when checkbox is blurred\n */\n @event(\"bl-blur\") private onBlur: EventDispatcher<ValueType | string | null>;\n\n @query(\".focus-target\") private focusTarget: HTMLElement;\n\n /**\n * Focuses this option\n */\n focus() {\n if (!this.multiple) {\n this.focusTarget.tabIndex = 0;\n }\n this.focusTarget.focus();\n this.onFocus(this.value);\n }\n\n /**\n * Blurs from this option\n */\n blur() {\n this.onBlur(this.value);\n this.focusTarget.tabIndex = -1;\n }\n\n private blSelect: BlSelect<ValueType> | null;\n\n private singleOptionTemplate() {\n return html`<div\n class=\"single-option focus-target\"\n @blur=${this.blur}\n @keydown=${this.handleKeydown}\n @click=\"${this._onClickOption}\"\n role=\"option\"\n aria-selected=\"${this.selected}\"\n >\n <slot></slot>\n </div>`;\n }\n\n private checkboxOptionTemplate() {\n return html`<bl-checkbox\n class=\"checkbox-option focus-target\"\n .checked=\"${this.selected}\"\n .disabled=\"${this.disabled}\"\n @bl-checkbox-change=\"${this._onCheckboxChange}\"\n role=\"option\"\n aria-selected=\"${this.selected}\"\n >\n <slot></slot>\n </bl-checkbox>`;\n }\n\n render() {\n return html`<div class=\"option-container\">\n ${this.multiple ? this.checkboxOptionTemplate() : this.singleOptionTemplate()}\n </div>`;\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (event.code === \"Enter\" || event.code === \"Space\") {\n this._onClickOption();\n event.preventDefault();\n }\n }\n\n private _handleEvent() {\n this._onSelect(this.value);\n }\n\n private _onClickOption() {\n this.selected = !this.selected;\n this._handleEvent();\n }\n\n private _onCheckboxChange(event: CustomEvent) {\n this.selected = event.detail;\n this._handleEvent();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this.blSelect = this.closest<BlSelect<ValueType>>(\"bl-select\");\n // FIXME: We should warn when parent is not bl-select\n\n this.multiple = this.blSelect?.multiple || false;\n this.blSelect?.registerOption(this);\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.blSelect?.unregisterOption(this);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-select-option\": BlSelectOption;\n }\n}\n"],
5
- "mappings": "mMACO,IAAMA,EAASC,i9CACfC,EAAQF,ECMf,IAAqBG,EAArB,cAAkFC,CAAW,CAA7F,kCAwBE,cAAW,GAMX,cAAW,GAGX,cAAW,GAhCX,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CASA,IAAI,OAAmB,CACrB,OAAO,KAAK,QAAW,KAAK,WAC9B,CAEA,IAAI,MAAMC,EAAgB,CACxB,KAAK,OAASA,CAChB,CAqCA,OAAQ,CACD,KAAK,WACR,KAAK,YAAY,SAAW,GAE9B,KAAK,YAAY,MAAM,EACvB,KAAK,QAAQ,KAAK,KAAK,CACzB,CAKA,MAAO,CACL,KAAK,OAAO,KAAK,KAAK,EACtB,KAAK,YAAY,SAAW,EAC9B,CAIQ,sBAAuB,CAC7B,OAAOC;AAAA;AAAA,cAEG,KAAK;AAAA,iBACF,KAAK;AAAA,gBACN,KAAK;AAAA;AAAA,uBAEE,KAAK;AAAA;AAAA;AAAA,WAI1B,CAEQ,wBAAyB,CAC/B,OAAOA;AAAA;AAAA,kBAEO,KAAK;AAAA,mBACJ,KAAK;AAAA,6BACK,KAAK;AAAA;AAAA,uBAEX,KAAK;AAAA;AAAA;AAAA,mBAI1B,CAEA,QAAS,CACP,OAAOA;AAAA,QACH,KAAK,SAAW,KAAK,uBAAuB,EAAI,KAAK,qBAAqB;AAAA,WAEhF,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,eAAe,EACpBA,EAAM,eAAe,EAEzB,CAEQ,cAAe,CACrB,KAAK,UAAU,KAAK,KAAK,CAC3B,CAEQ,gBAAiB,CACvB,KAAK,SAAW,CAAC,KAAK,SACtB,KAAK,aAAa,CACpB,CAEQ,kBAAkBA,EAAoB,CAC5C,KAAK,SAAWA,EAAM,OACtB,KAAK,aAAa,CACpB,CAEA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,eAAe,KAAK,IAAM,CAzInC,IAAAC,EAAAC,EA0IM,KAAK,SAAW,KAAK,QAA6B,WAAW,EAG7D,KAAK,WAAWD,EAAA,KAAK,WAAL,YAAAA,EAAe,WAAY,IAC3CC,EAAA,KAAK,WAAL,MAAAA,EAAe,eAAe,KAChC,CAAC,CACH,CAEA,sBAAuB,CAlJzB,IAAAD,EAmJI,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,iBAAiB,KAClC,CACF,EAlIME,EAAA,CADHC,EAAS,CAAC,CAAC,GAXOT,EAYf,qBAYJQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAvBvBT,EAwBnB,wBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BvBT,EA8BnB,wBAGAQ,EAAA,CADCE,EAAM,GAhCYV,EAiCnB,wBAKmCQ,EAAA,CAAlCH,EAAM,kBAAkB,GAtCNL,EAsCgB,yBAKRQ,EAAA,CAA1BH,EAAM,UAAU,GA3CEL,EA2CQ,uBAKDQ,EAAA,CAAzBH,EAAM,SAAS,GAhDGL,EAgDO,sBAEMQ,EAAA,CAA/BG,EAAM,eAAe,GAlDHX,EAkDa,2BAlDbA,EAArBQ,EAAA,CADCC,EAAc,kBAAkB,GACZT",
6
- "names": ["styles", "i", "bl_select_option_default", "BlSelectOption", "s", "bl_select_option_default", "val", "x", "event", "_a", "_b", "__decorateClass", "e", "t", "i"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/tooltip/bl-tooltip.css", "../src/components/tooltip/bl-tooltip.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.trigger{display:var(--bl-tooltip-trigger-display, inline-flex);cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-neutral-darker);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`;\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 { ReferenceElement } from \"@floating-ui/core\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../popover/bl-popover\";\nimport type BlPopover from \"../popover/bl-popover\";\nimport { Placement } from \"../popover/bl-popover\";\nimport style from \"./bl-tooltip.css\";\n\n/**\n * @tag bl-tooltip\n * @summary Baklava Tooltip component\n * @dependency bl-popover\n *\n * @cssproperty [--bl-tooltip-trigger-display=inline-flex] Set the display of the tooltip trigger.\n */\n@customElement(\"bl-tooltip\")\nexport default class BlTooltip extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\".trigger\") private trigger: ReferenceElement;\n @query(\"bl-popover\") private popover: BlPopover;\n\n /**\n * Sets placement of the tooltip\n */\n @property({ type: String })\n placement: Placement = \"top\";\n\n /**\n * Fires when hovering over a trigger\n */\n @event(\"bl-tooltip-show\") private onShow: EventDispatcher<string>;\n\n /**\n * Fires when leaving over from trigger\n */\n @event(\"bl-tooltip-hide\") private onHide: EventDispatcher<string>;\n\n /**\n * Shows tooltip\n */\n show() {\n this.popover.target = this.trigger;\n this.popover.show();\n this.onShow(\"\");\n }\n\n /**\n * Hides tooltip\n */\n hide() {\n this.popover.hide();\n this.onHide(\"\");\n }\n\n /**\n * Gives the visibility status of the tooltip\n */\n get visible(): boolean {\n return this.popover.visible;\n }\n\n private triggerTemplate() {\n return html`<slot\n class=\"trigger\"\n name=\"tooltip-trigger\"\n aria-describedby=\"tooltip\"\n @focus=${{ handleEvent: () => this.show(), capture: true }}\n @blur=${{ handleEvent: () => this.hide(), capture: true }}\n @mouseover=${() => this.show()}\n @mouseleave=${() => this.hide()}\n >\n </slot>`;\n }\n\n render(): TemplateResult {\n return html`\n ${this.triggerTemplate()}\n <bl-popover\n .target=\"${this.trigger}\"\n placement=\"${ifDefined(this.placement)}\"\n @bl-popover-hide=\"${() => this.onHide(\"\")}\"\n >\n <slot class=\"content\" id=\"tooltip\" role=\"tooltip\"></slot>\n </bl-popover>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-tooltip\": BlTooltip;\n }\n}\n"],
5
- "mappings": "oOACO,IAAMA,EAAS,yTACfC,EAAQD,ECgBf,IAAqBE,EAArB,cAAuCC,CAAW,CAAlD,kCAYE,eAAuB,MAXvB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAwBA,MAAO,CACL,KAAK,QAAQ,OAAS,KAAK,QAC3B,KAAK,QAAQ,KAAK,EAClB,KAAK,OAAO,EAAE,CAChB,CAKA,MAAO,CACL,KAAK,QAAQ,KAAK,EAClB,KAAK,OAAO,EAAE,CAChB,CAKA,IAAI,SAAmB,CACrB,OAAO,KAAK,QAAQ,OACtB,CAEQ,iBAAkB,CACxB,OAAOC;AAAA;AAAA;AAAA;AAAA,eAII,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,cACjD,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,mBAC3C,IAAM,KAAK,KAAK;AAAA,oBACf,IAAM,KAAK,KAAK;AAAA;AAAA,YAGlC,CAEA,QAAyB,CACvB,OAAOA;AAAA,QACH,KAAK,gBAAgB;AAAA;AAAA,mBAEV,KAAK;AAAA,qBACHC,EAAU,KAAK,SAAS;AAAA,4BACjB,IAAM,KAAK,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA,KAK9C,CACF,EApE6BC,EAAA,CAA1BC,EAAM,UAAU,GALEN,EAKQ,uBACEK,EAAA,CAA5BC,EAAM,YAAY,GANAN,EAMU,uBAM7BK,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GAXPP,EAYnB,yBAKkCK,EAAA,CAAjCG,EAAM,iBAAiB,GAjBLR,EAiBe,sBAKAK,EAAA,CAAjCG,EAAM,iBAAiB,GAtBLR,EAsBe,sBAtBfA,EAArBK,EAAA,CADCE,EAAc,YAAY,GACNP",
6
- "names": ["styles", "bl_tooltip_default", "BlTooltip", "s", "bl_tooltip_default", "x", "l", "__decorateClass", "i", "e", "event"]
7
- }
@@ -1,2 +0,0 @@
1
- var j=Object.create;var h=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var o=(b,a)=>()=>(a||b((a={exports:{}}).exports,a),a.exports);var n=(b,a,d,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of k(a))!m.call(b,c)&&c!==d&&h(b,c,{get:()=>a[c],enumerable:!(e=i(a,c))||e.enumerable});return b};var p=(b,a,d)=>(d=b!=null?j(l(b)):{},n(a||!b||!b.__esModule?h(d,"default",{value:b,enumerable:!0}):d,b));var q=(b,a,d,e)=>{for(var c=e>1?void 0:e?i(a,d):a,f=b.length-1,g;f>=0;f--)(g=b[f])&&(c=(e?g(a,d,c):g(c))||c);return e&&c&&h(a,d,c),c};export{o as a,p as b,q as c};
2
- //# sourceMappingURL=chunk-VO7C5OZC.js.map
@@ -1,18 +0,0 @@
1
- import{a as i,b as a,c as u}from"./chunk-7GK5LKBV.js";import{c as r,d as n,e as o}from"./chunk-4OT5AMS5.js";var{I:c}=o;var v=e=>e.strings===void 0;var p={},d=(e,t=p)=>e._$AH=t;var T=a(class extends u{constructor(e){if(super(e),e.type!==i.PROPERTY&&e.type!==i.ATTRIBUTE&&e.type!==i.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!v(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===r||t===n)return t;let s=e.element,l=e.name;if(e.type===i.PROPERTY){if(t===s[l])return r}else if(e.type===i.BOOLEAN_ATTRIBUTE){if(!!t===s.hasAttribute(l))return r}else if(e.type===i.ATTRIBUTE&&s.getAttribute(l)===t+"")return r;return d(e),t}});export{T as a};
2
- /*! Bundled license information:
3
-
4
- lit-html/directive-helpers.js:
5
- (**
6
- * @license
7
- * Copyright 2020 Google LLC
8
- * SPDX-License-Identifier: BSD-3-Clause
9
- *)
10
-
11
- lit-html/directives/live.js:
12
- (**
13
- * @license
14
- * Copyright 2020 Google LLC
15
- * SPDX-License-Identifier: BSD-3-Clause
16
- *)
17
- */
18
- //# sourceMappingURL=chunk-YOV2DMM7.js.map