@trendyol/baklava 2.0.0-beta.93 → 2.0.0-beta.94

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 (126) hide show
  1. package/README.md +14 -12
  2. package/dist/baklava-react.d.ts +25 -113
  3. package/dist/baklava-react.d.ts.map +1 -1
  4. package/dist/baklava.js +1 -1
  5. package/dist/chunk-32HGEMZF.js +15 -0
  6. package/dist/chunk-32HGEMZF.js.map +7 -0
  7. package/dist/{chunk-F3ZH5IV7.js → chunk-3SON7X7S.js} +1 -1
  8. package/dist/{chunk-F3ZH5IV7.js.map → chunk-3SON7X7S.js.map} +1 -1
  9. package/dist/chunk-4PG6AOX7.js +5 -0
  10. package/dist/chunk-4PG6AOX7.js.map +7 -0
  11. package/dist/chunk-5AIFOXPM.js +24 -0
  12. package/dist/chunk-5AIFOXPM.js.map +7 -0
  13. package/dist/chunk-5JHQZCHW.js +5 -0
  14. package/dist/chunk-5JHQZCHW.js.map +7 -0
  15. package/dist/chunk-6FK4ZU5B.js +2 -0
  16. package/dist/chunk-6FK4ZU5B.js.map +7 -0
  17. package/dist/chunk-6UPKDZRW.js +32 -0
  18. package/dist/chunk-6UPKDZRW.js.map +7 -0
  19. package/dist/chunk-AXRP3K2X.js +27 -0
  20. package/dist/chunk-AXRP3K2X.js.map +7 -0
  21. package/dist/{chunk-W6FBJD54.js → chunk-AZ42S4YP.js} +2 -2
  22. package/dist/chunk-AZ42S4YP.js.map +7 -0
  23. package/dist/chunk-CI65YME7.js +33 -0
  24. package/dist/chunk-CI65YME7.js.map +7 -0
  25. package/dist/chunk-FSYC7NDP.js +9 -0
  26. package/dist/chunk-FSYC7NDP.js.map +7 -0
  27. package/dist/chunk-KGIPG6EV.js +21 -0
  28. package/dist/chunk-KGIPG6EV.js.map +7 -0
  29. package/dist/chunk-MCS3XLXD.js +18 -0
  30. package/dist/chunk-MCS3XLXD.js.map +7 -0
  31. package/dist/{chunk-QV3A6DWH.js → chunk-N53HXW4A.js} +3 -3
  32. package/dist/{chunk-QV3A6DWH.js.map → chunk-N53HXW4A.js.map} +2 -2
  33. package/dist/chunk-PUNHEAEI.js +46 -0
  34. package/dist/chunk-PUNHEAEI.js.map +7 -0
  35. package/dist/chunk-QASRATPF.js +42 -0
  36. package/dist/chunk-QASRATPF.js.map +7 -0
  37. package/dist/chunk-RFAEPGC3.js +7 -0
  38. package/dist/chunk-RFAEPGC3.js.map +7 -0
  39. package/dist/chunk-TQBAGFBF.js +11 -0
  40. package/dist/chunk-TQBAGFBF.js.map +7 -0
  41. package/dist/chunk-VXGOQPWU.js +17 -0
  42. package/dist/chunk-VXGOQPWU.js.map +7 -0
  43. package/dist/{chunk-EMMMXLJJ.js → chunk-Y4UXIJSO.js} +2 -2
  44. package/dist/chunk-Y4UXIJSO.js.map +7 -0
  45. package/dist/chunk-YMS5JP47.js +37 -0
  46. package/dist/chunk-YMS5JP47.js.map +7 -0
  47. package/dist/chunk-YTUAZIEF.js +31 -0
  48. package/dist/chunk-YTUAZIEF.js.map +7 -0
  49. package/dist/components/alert/bl-alert.js +1 -1
  50. package/dist/components/badge/bl-badge.d.ts +2 -2
  51. package/dist/components/badge/bl-badge.js +1 -1
  52. package/dist/components/button/bl-button.d.ts +2 -2
  53. package/dist/components/button/bl-button.js +1 -1
  54. package/dist/components/checkbox-group/bl-checkbox-group.d.ts +1 -1
  55. package/dist/components/checkbox-group/bl-checkbox-group.js +1 -1
  56. package/dist/components/checkbox-group/checkbox/bl-checkbox.js +1 -1
  57. package/dist/components/dialog/bl-dialog.js +1 -1
  58. package/dist/components/drawer/bl-drawer.d.ts +1 -0
  59. package/dist/components/drawer/bl-drawer.d.ts.map +1 -1
  60. package/dist/components/drawer/bl-drawer.js +1 -1
  61. package/dist/components/dropdown/bl-dropdown.js +1 -1
  62. package/dist/components/dropdown/group/bl-dropdown-group.js +1 -1
  63. package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
  64. package/dist/components/icon/bl-icon.d.ts +2 -2
  65. package/dist/components/icon/bl-icon.js +1 -1
  66. package/dist/components/input/bl-input.js +1 -1
  67. package/dist/components/pagination/bl-pagination.js +1 -1
  68. package/dist/components/popover/bl-popover.d.ts +2 -2
  69. package/dist/components/popover/bl-popover.js +1 -1
  70. package/dist/components/progress-indicator/bl-progress-indicator.js +1 -1
  71. package/dist/components/radio-group/bl-radio-group.d.ts +1 -1
  72. package/dist/components/radio-group/bl-radio-group.js +1 -1
  73. package/dist/components/radio-group/radio/bl-radio.js +1 -1
  74. package/dist/components/select/bl-select.d.ts +1 -1
  75. package/dist/components/select/bl-select.js +1 -1
  76. package/dist/components/select/option/bl-select-option.js +1 -1
  77. package/dist/components/switch/bl-switch.d.ts +3 -0
  78. package/dist/components/switch/bl-switch.d.ts.map +1 -1
  79. package/dist/components/switch/bl-switch.js +1 -1
  80. package/dist/components/tab-group/bl-tab-group.js +1 -1
  81. package/dist/components/tab-group/tab/bl-tab.js +1 -1
  82. package/dist/components/tab-group/tab-panel/bl-tab-panel.js +1 -1
  83. package/dist/components/textarea/bl-textarea.js +1 -1
  84. package/dist/components/tooltip/bl-tooltip.js +1 -1
  85. package/dist/custom-elements.json +43 -16
  86. package/dist/themes/default.css +1 -1
  87. package/dist/themes/default.css.map +2 -2
  88. package/package.json +12 -11
  89. package/dist/chunk-4UWTC6BR.js +0 -18
  90. package/dist/chunk-4UWTC6BR.js.map +0 -7
  91. package/dist/chunk-6IV5ELOB.js +0 -32
  92. package/dist/chunk-6IV5ELOB.js.map +0 -7
  93. package/dist/chunk-72WMF254.js +0 -15
  94. package/dist/chunk-72WMF254.js.map +0 -7
  95. package/dist/chunk-EMMMXLJJ.js.map +0 -7
  96. package/dist/chunk-GO4KZIGU.js +0 -42
  97. package/dist/chunk-GO4KZIGU.js.map +0 -7
  98. package/dist/chunk-HTIGXY2B.js +0 -17
  99. package/dist/chunk-HTIGXY2B.js.map +0 -7
  100. package/dist/chunk-J73JZGIX.js +0 -11
  101. package/dist/chunk-J73JZGIX.js.map +0 -7
  102. package/dist/chunk-JMV2HWKD.js +0 -2
  103. package/dist/chunk-JMV2HWKD.js.map +0 -7
  104. package/dist/chunk-MGQL62CQ.js +0 -31
  105. package/dist/chunk-MGQL62CQ.js.map +0 -7
  106. package/dist/chunk-MU34JCL5.js +0 -7
  107. package/dist/chunk-MU34JCL5.js.map +0 -7
  108. package/dist/chunk-OSIYJGJP.js +0 -24
  109. package/dist/chunk-OSIYJGJP.js.map +0 -7
  110. package/dist/chunk-QRR36YKM.js +0 -46
  111. package/dist/chunk-QRR36YKM.js.map +0 -7
  112. package/dist/chunk-SEMLCEAH.js +0 -5
  113. package/dist/chunk-SEMLCEAH.js.map +0 -7
  114. package/dist/chunk-TJ47AW2B.js +0 -5
  115. package/dist/chunk-TJ47AW2B.js.map +0 -7
  116. package/dist/chunk-UVCOTTG2.js +0 -37
  117. package/dist/chunk-UVCOTTG2.js.map +0 -7
  118. package/dist/chunk-VQLW2744.js +0 -27
  119. package/dist/chunk-VQLW2744.js.map +0 -7
  120. package/dist/chunk-VYKKWEKI.js +0 -9
  121. package/dist/chunk-VYKKWEKI.js.map +0 -7
  122. package/dist/chunk-W6FBJD54.js.map +0 -7
  123. package/dist/chunk-XKX2GLBY.js +0 -33
  124. package/dist/chunk-XKX2GLBY.js.map +0 -7
  125. package/dist/chunk-ZEBKUNFE.js +0 -21
  126. package/dist/chunk-ZEBKUNFE.js.map +0 -7
@@ -0,0 +1,27 @@
1
+ import{a as m}from"./chunk-FSYC7NDP.js";import{a as n}from"./chunk-KPAWUBRO.js";import{a as l}from"./chunk-23UFIOHV.js";import{a as p,b as a,f as d,g as c,h as o,i as b,j as i}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var g=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)}`,f=g;var u="bl-dropdown",t=class extends d{constructor(){super(...arguments);this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.focusedOptionIndex=-1}static get styles(){return[f]}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(s){if(["ArrowDown","ArrowRight"].includes(s.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(s.key))this.focusedOptionIndex--;else if(s.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(),s.preventDefault()}get options(){return[].slice.call(this.querySelectorAll(h))}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 a`<bl-button
2
+ dropdown
3
+ .active=${this.opened}
4
+ ?disabled=${n(this.disabled)}
5
+ variant="${this.variant}"
6
+ kind="${this.kind}"
7
+ size="${this.size}"
8
+ aria-label="${n(this.label)}"
9
+ @bl-click="${this._handleClick}"
10
+ >
11
+ ${this.label}
12
+ </bl-button>
13
+ <bl-popover
14
+ fit-size
15
+ placement="bottom-start"
16
+ @bl-popover-hide="${this.close}"
17
+ >
18
+ <slot></slot>
19
+ </bl-popover> `}};e([i("bl-popover")],t.prototype,"_popover",2),e([i("bl-button")],t.prototype,"_button",2),e([b()],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:Boolean,reflect:!0})],t.prototype,"disabled",2),e([l("bl-dropdown-open")],t.prototype,"onOpen",2),e([l("bl-dropdown-close")],t.prototype,"onClose",2),t=e([c(u)],t);var w=p`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,v=w;var h="bl-dropdown-item",r=class extends d{static get styles(){return[v]}_handleClick(){this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(m),this.BlDropdownField=this.closest(u),!this.BlDropdownField&&!this.BlDropdownGroupField&&console.warn(`bl-dropdown-item is designed to be used inside a ${m} or ${u}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return a`<bl-button
20
+ variant="tertiary"
21
+ kind="neutral"
22
+ icon="${n(this.icon)}"
23
+ role="menuitem"
24
+ @click="${this._handleClick}"
25
+ ><slot></slot>
26
+ </bl-button>`}};e([o({type:String})],r.prototype,"icon",2),e([l("bl-dropdown-item-click")],r.prototype,"onClick",2),e([i("[role=menuitem]")],r.prototype,"menuElement",2),r=e([c(h)],r);export{h as a,r as b,u as c,t as d};
27
+ //# sourceMappingURL=chunk-AXRP3K2X.js.map
@@ -0,0 +1,7 @@
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"],
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)}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nimport style from './bl-dropdown.css';\n\nimport '../button/bl-button';\nimport BlButton, { ButtonSize, ButtonVariant, ButtonKind } from '../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport BlDropdownItem, { blDropdownItemTag } from './item/bl-dropdown-item';\nimport BlPopover from '../popover/bl-popover';\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 = 'Dropdown Button';\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 * 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 [].slice.call(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=${ifDefined(this.disabled)}\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n aria-label=\"${ifDefined(this.label)}\"\n @bl-click=\"${this._handleClick}\"\n >\n ${this.label}\n </bl-button>\n <bl-popover\n fit-size\n placement=\"bottom-start\"\n @bl-popover-hide=\"${this.close}\"\n >\n <slot></slot>\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 { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport type BlDropdownGroup from '../group/bl-dropdown-group';\nimport type BlDropdown from '../bl-dropdown';\n\nimport { blDropdownGroupTag } from '../group/bl-dropdown-group';\nimport { blDropdownTag } from '../bl-dropdown';\n\nimport style from './bl-dropdown-item.css';\n\nimport '../../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport BlButton from '../../button/bl-button';\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?: string;\n\n @event('bl-dropdown-item-click') private onClick: EventDispatcher<string>;\n\n private _handleClick() {\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\n connectedCallback(): void {\n super.connectedCallback();\n\n this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n\n if (!this.BlDropdownField && !this.BlDropdownGroupField) {\n console.warn(\n `bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag} or ${blDropdownTag}`,\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 @click=\"${this._handleClick}\"\n ><slot></slot>\n </bl-button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownItemTag]: BlDropdownItem;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "bl_dropdown_default", "event", "blDropdownItemTag", "y", "l", "__decorateClass", "t", "e", "styles", "i", "bl_dropdown_item_default", "blDropdownItemTag", "BlDropdownItem", "s", "bl_dropdown_item_default", "blDropdownGroupTag", "blDropdownTag", "y", "l", "__decorateClass", "e", "event"]
7
+ }
@@ -1,4 +1,4 @@
1
- import{a}from"./chunk-23UFIOHV.js";import{a as o,b as i,f as s,g as l,h as n,i as d}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var h=o`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:424px;padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-right:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-primary-background);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration,0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:0}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:24px;margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-secondary);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}@media only screen and (max-width:424px){:host([open]) .drawer{width:calc(100vw - 24px)}}`,c=h;var e=class extends s{constructor(){super(...arguments);this.open=!1;this.domExistence=!1}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",r=>{r.target!==this&&this.closeDrawer()})}updated(r){r.has("open")&&this.toggleDialogHandler()}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let r=this.embedUrl?i`<iframe src=${this.embedUrl}></iframe>`:i`<slot></slot>`;return i`<section class=${this.embedUrl?"iframe-content":"content"}>
1
+ import{a}from"./chunk-23UFIOHV.js";import{a as o,b as i,f as s,g as l,h as n,i as d}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var h=o`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:424px;padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-right:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration,0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:0}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}@media only screen and (max-width:424px){:host([open]) .drawer{width:calc(100vw - 24px)}}`,c=h;var e=class extends s{constructor(){super(...arguments);this.open=!1;this.domExistence=!1}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",r=>{r.target!==this&&this.closeDrawer()})}updated(r){r.has("open")&&this.toggleDialogHandler()}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let r=this.embedUrl?i`<iframe src=${this.embedUrl}></iframe>`:i`<slot></slot>`;return i`<section class=${this.embedUrl?"iframe-content":"content"}>
2
2
  ${r}
3
3
  </section>`}renderContainer(){let r=this.caption?i`<h2 id="drawer-caption">${this.caption}</h2>`:"",p=this.externalLink?i`<bl-button
4
4
  icon="external_link"
@@ -23,4 +23,4 @@ import{a}from"./chunk-23UFIOHV.js";import{a as o,b as i,f as s,g as l,h as n,i a
23
23
  </header>
24
24
  ${this.renderContent()}
25
25
  </div>`}render(){return this.domExistence?i`<div class="drawer">${this.renderContainer()}</div>`:i``}};t([n({type:Boolean,reflect:!0})],e.prototype,"open",2),t([n({type:String})],e.prototype,"caption",2),t([n({type:String,attribute:"embed-url"})],e.prototype,"embedUrl",2),t([n({type:String,attribute:"external-link"})],e.prototype,"externalLink",2),t([a("bl-drawer-open")],e.prototype,"onOpen",2),t([a("bl-drawer-close")],e.prototype,"onClose",2),t([d()],e.prototype,"domExistence",2),e=t([l("bl-drawer")],e);export{e as a};
26
- //# sourceMappingURL=chunk-W6FBJD54.js.map
26
+ //# sourceMappingURL=chunk-AZ42S4YP.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:424px;padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-right:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration,0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:0}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}@media only screen and (max-width:424px){:host([open]) .drawer{width:calc(100vw - 24px)}}`;\nexport default styles;\n", "import { customElement, property, state } from 'lit/decorators.js';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport style from './bl-drawer.css';\nimport { PropertyValues } from 'lit';\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 * Fires when the drawer is opened\n */\n @event('bl-drawer-open') private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when the drawer is closed\n */\n @event('bl-drawer-close') private onClose: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n window?.addEventListener('bl-drawer-open', event => {\n if (event.target !== this) this.closeDrawer();\n });\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has('open')) {\n this.toggleDialogHandler();\n }\n }\n\n private domExistenceSchedule: number;\n\n private toggleDialogHandler() {\n if (this.open) {\n if (this.domExistenceSchedule) {\n clearTimeout(this.domExistenceSchedule);\n }\n\n this.domExistence = true;\n // FIXME: Allow events without payload\n this.onOpen('');\n } else {\n // Give some time for exit animation\n this.domExistenceSchedule = window.setTimeout(() => {\n this.domExistence = false;\n }, 1000);\n\n // FIXME: Allow events without payload\n this.onClose('');\n }\n }\n\n @state() private domExistence = false;\n\n private closeDrawer() {\n this.open = false;\n }\n\n private renderContent() {\n const content = this.embedUrl\n ? html`<iframe src=${this.embedUrl}></iframe>`\n : html`<slot></slot>`;\n\n return html`<section class=${this.embedUrl ? 'iframe-content' : 'content'}>\n ${content}\n </section>`;\n }\n\n private renderContainer() {\n const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : '';\n const external_button = this.externalLink\n ? html`<bl-button\n icon=\"external_link\"\n variant=\"tertiary\"\n kind=\"neutral\"\n size=\"small\"\n href=\"${this.externalLink}\"\n target=\"_blank\"\n ></bl-button>`\n : '';\n\n return html`<div class=\"container\">\n <header>\n ${title}\n <div class=\"header-buttons\">\n ${external_button}\n <bl-button\n @click=\"${this.closeDrawer}\"\n icon=\"close\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>\n </div>\n </header>\n ${this.renderContent()}\n </div>`;\n }\n\n render(): TemplateResult {\n if (this.domExistence) {\n return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n } else {\n return html``;\n }\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-drawer': BlDrawer;\n }\n}\n"],
5
+ "mappings": "sJACO,IAAMA,EAASC,qmCACfC,EAAQF,ECaf,IAAqBG,EAArB,cAAsC,CAAW,CAAjD,kCASE,UAAO,GAiEE,KAAQ,aAAe,GAzEhC,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAoCA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,qBAAQ,iBAAiB,iBAAkBC,GAAS,CAC9CA,EAAM,SAAW,MAAM,KAAK,YAAY,CAC9C,EACF,CAEA,QAAQC,EAAyC,CAC3CA,EAAkB,IAAI,MAAM,GAC9B,KAAK,oBAAoB,CAE7B,CAIQ,qBAAsB,CACxB,KAAK,MACH,KAAK,sBACP,aAAa,KAAK,oBAAoB,EAGxC,KAAK,aAAe,GAEpB,KAAK,OAAO,EAAE,IAGd,KAAK,qBAAuB,OAAO,WAAW,IAAM,CAClD,KAAK,aAAe,EACtB,EAAG,GAAI,EAGP,KAAK,QAAQ,EAAE,EAEnB,CAIQ,aAAc,CACpB,KAAK,KAAO,EACd,CAEQ,eAAgB,CACtB,IAAMC,EAAU,KAAK,SACjBC,gBAAmB,KAAK,qBACxBA,iBAEJ,OAAOA,mBAAsB,KAAK,SAAW,iBAAmB;AAAA,QAC5DD;AAAA,eAEN,CAEQ,iBAAkB,CACxB,IAAME,EAAQ,KAAK,QAAUD,4BAA+B,KAAK,eAAiB,GAC5EE,EAAkB,KAAK,aACzBF;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKU,KAAK;AAAA;AAAA,uBAGf,GAEJ,OAAOA;AAAA;AAAA,UAEDC;AAAA;AAAA,YAEEC;AAAA;AAAA,sBAEU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQnB,KAAK,cAAc;AAAA,WAEzB,CAEA,QAAyB,CACvB,OAAI,KAAK,aACAF,wBAA2B,KAAK,gBAAgB,UAEhDA,GAEX,CACF,EAvHEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBT,EASnB,oBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPT,EAenB,uBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,GApB/BT,EAqBnB,wBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,eAAgB,CAAC,GA1BnCT,EA2BnB,4BAKiCQ,EAAA,CAAhCN,EAAM,gBAAgB,GAhCJF,EAgCc,sBAKCQ,EAAA,CAAjCN,EAAM,iBAAiB,GArCLF,EAqCe,uBAqCjBQ,EAAA,CAAhBE,EAAM,GA1EYV,EA0EF,4BA1EEA,EAArBQ,EAAA,CADCC,EAAc,WAAW,GACLT",
6
+ "names": ["styles", "i", "bl_drawer_default", "BlDrawer", "bl_drawer_default", "event", "changedProperties", "content", "y", "title", "external_button", "__decorateClass", "e", "t"]
7
+ }
@@ -0,0 +1,33 @@
1
+ import{a as c}from"./chunk-23UFIOHV.js";import{a as h,b as l,f as v,g,h as d,j as n}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var b=h`.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) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);overflow:auto}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{box-shadow:0 -4px 15px #27314226}@media only screen and (max-width:471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,m=b;var t=class extends v{constructor(){super(...arguments);this.open=!1;this.clickOutsideHandler=e=>{e.composedPath().includes(this.container)||this.closeDialog()};this.onKeydown=e=>{e.code==="Escape"&&this.open&&this.closeDialog()}}static get styles(){return[m]}updated(e){e.has("open")&&this.toggleDialogHandler()}get hasHtmlDialogSupport(){return!!window.HTMLDialogElement}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,a,i,r;this.open?((a=(e=this.dialog)==null?void 0:e.showModal)==null||a.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())):((r=(i=this.dialog)==null?void 0:i.close)==null||r.call(i),this.onClose({isOpen:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow))}closeDialog(){this.open=!1}toggleFooterShadow(){var e,a,i,r,s,p;((e=this.content)==null?void 0:e.scrollHeight)>((a=this.content)==null?void 0:a.offsetHeight)?(r=(i=this.footer)==null?void 0:i.classList)==null||r.add("shadow"):(p=(s=this.footer)==null?void 0:s.classList)==null||p.remove("shadow")}renderFooter(){return this._hasFooter?l`<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?l`<h2 id="dialog-caption">${this.caption}</h2>`:"";return l` <div class="container">
6
+ <header>
7
+ ${e}
8
+ <bl-button
9
+ @click="${this.closeDialog}"
10
+ icon="close"
11
+ variant="tertiary"
12
+ kind="neutral"
13
+ ></bl-button>
14
+ </header>
15
+ <section class="content"><slot /></section>
16
+ ${this.renderFooter()}
17
+ </div>`}render(){return this.hasHtmlDialogSupport?l`
18
+ <dialog
19
+ class="dialog"
20
+ aria-labelledby="dialog-caption"
21
+ @click=${this.clickOutsideHandler}
22
+ >
23
+ ${this.renderContainer()}
24
+ </dialog>
25
+ `:l`<div
26
+ class="dialog-polyfill"
27
+ role="dialog"
28
+ aria-labelledby="dialog-caption"
29
+ @click=${this.clickOutsideHandler}
30
+ >
31
+ ${this.renderContainer()}
32
+ </div>`}};o([d({type:Boolean,reflect:!0})],t.prototype,"open",2),o([d({type:String})],t.prototype,"caption",2),o([n(".dialog")],t.prototype,"dialog",2),o([n("footer")],t.prototype,"footer",2),o([n(".container")],t.prototype,"container",2),o([n(".content")],t.prototype,"content",2),o([c("bl-dialog-open")],t.prototype,"onOpen",2),o([c("bl-dialog-close")],t.prototype,"onClose",2),t=o([g("bl-dialog")],t);export{t as a};
33
+ //# sourceMappingURL=chunk-CI65YME7.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.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) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);overflow:auto}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{box-shadow:0 -4px 15px #27314226}@media only screen and (max-width:471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.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({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Sets the dialog title\n */\n @property({ type: String })\n caption?: string;\n\n @query('.dialog')\n private dialog: HTMLDialogElement & DialogElement;\n\n @query('footer')\n private footer: HTMLElement;\n\n @query('.container')\n private container: HTMLElement;\n\n @query('.content')\n private content: HTMLElement;\n\n /**\n * Fires when the dialog is opened\n */\n @event('bl-dialog-open') private onOpen: EventDispatcher<object>;\n\n /**\n * Fires 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')) {\n this.toggleDialogHandler();\n }\n }\n\n private get hasHtmlDialogSupport() {\n return !!window.HTMLDialogElement;\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() {\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();\n }\n };\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Escape' && this.open) {\n this.closeDialog();\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 return html` <div class=\"container\">\n <header>\n ${title}\n <bl-button\n @click=\"${this.closeDialog}\"\n icon=\"close\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>\n </header>\n <section class=\"content\"><slot /></section>\n ${this.renderFooter()}\n </div>`;\n }\n\n render(): TemplateResult {\n return this.hasHtmlDialogSupport\n ? html`\n <dialog\n class=\"dialog\"\n aria-labelledby=\"dialog-caption\"\n @click=${this.clickOutsideHandler}\n >\n ${this.renderContainer()}\n </dialog>\n `\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 }\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", "_e", "_f", "y", "title", "__decorateClass", "e", "i"]
7
+ }
@@ -0,0 +1,9 @@
1
+ import{a}from"./chunk-KPAWUBRO.js";import{a as e,b as l,f as r,g as i,h as s}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var d=e`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-neutral-lighter)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-neutral-lighter)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`,n=d;var c="bl-dropdown-group",t=class extends r{static get styles(){return[n]}render(){let p=this.caption?l`<span class="caption">${this.caption}</span>`:"";return l`<div
2
+ class="dropdown-group"
3
+ role="group"
4
+ aria-labelledby="${a(this.caption)}"
5
+ >
6
+ ${p}
7
+ <slot></slot>
8
+ </div>`}};o([s({type:String})],t.prototype,"caption",2),t=o([i(c)],t);export{c as a,t as b};
9
+ //# sourceMappingURL=chunk-FSYC7NDP.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/dropdown/group/bl-dropdown-group.css", "../src/components/dropdown/group/bl-dropdown-group.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-neutral-lighter)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-neutral-lighter)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport style from './bl-dropdown-group.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const blDropdownGroupTag = 'bl-dropdown-group';\n\n/**\n * @tag bl-dropdown-group\n * @summary Baklava Dropdown Group component\n */\n@customElement(blDropdownGroupTag)\nexport default class BlDropdownGroup extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the caption.\n */\n @property({ type: String })\n caption?: string;\n\n render(): TemplateResult {\n const caption = this.caption ? html`<span class=\"caption\">${this.caption}</span>` : '';\n\n return html`<div\n class=\"dropdown-group\"\n role=\"group\"\n aria-labelledby=\"${ifDefined(this.caption)}\"\n >\n ${caption}\n <slot></slot>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownGroupTag]: BlDropdownGroup;\n }\n}\n"],
5
+ "mappings": "+IACO,IAAMA,EAASC,4qBACfC,EAAQF,ECGR,IAAMG,EAAqB,oBAObC,EAArB,cAA6CC,CAAW,CACtD,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,QAAyB,CACvB,IAAMC,EAAU,KAAK,QAAUC,0BAA6B,KAAK,iBAAmB,GAEpF,OAAOA;AAAA;AAAA;AAAA,yBAGcC,EAAU,KAAK,OAAO;AAAA;AAAA,QAEvCF;AAAA;AAAA,WAGN,CACF,EAdEG,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARPP,EASnB,uBATmBA,EAArBM,EAAA,CADCC,EAAcR,CAAkB,GACZC",
6
+ "names": ["styles", "i", "bl_dropdown_group_default", "blDropdownGroupTag", "BlDropdownGroup", "s", "bl_dropdown_group_default", "caption", "y", "l", "__decorateClass", "e"]
7
+ }
@@ -0,0 +1,21 @@
1
+ import{a as _}from"./chunk-OLPYXE2P.js";import{a as i}from"./chunk-KPAWUBRO.js";import{a as y}from"./chunk-23UFIOHV.js";import{a as p,b as r,f as v,g as m,h as e,i as g,j as f}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var x=n=>{if(!(!n.noValidate&&!n.reportValidity())){let d=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});n.dispatchEvent(d),d.defaultPrevented||n.submit()}};var T=p`@keyframes spin{from{transform:rotate(0)}to{transform:rotate(359deg)}}:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-highlight);--text-hover-color:var(--bl-color-neutral-lightest);--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:var(--bl-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:var(--bl-border-radius-m);text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--main-color);border-radius:var(--bl-border-radius-l);content:'';position:absolute;inset:-4px}.loading-icon{animation:spin 1s linear infinite;font-size:var(--icon-size)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([loading]) ::slotted(bl-icon){display:none}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-neutral-darker);--main-hover-color:var(--bl-color-neutral-darkest)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-highlight)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-highlight)}:host([disabled]){cursor:not-allowed}:host([loading]){cursor:wait}:host([loading]) bl-icon:not(.loading-icon){display:none}:host .button[aria-disabled='true']{--main-color:var(--bl-color-neutral-lightest);--main-hover-color:var(--bl-color-neutral-lightest);--content-color:var(--bl-color-neutral-lighter);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='tertiary']) .button[aria-disabled='true']{--main-color:transparent}:host([variant='secondary']:hover) .button[aria-disabled='false'],:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled='false']{--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover) .button[aria-disabled='false'],:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled='false']{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant='secondary']) .active.button{--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-neutral-lightest);--border-color:transparent}`,z=T;var t=class extends v{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.loading=!1;this.disabled=!1;this.target="_self";this.dropdown=!1;this.autofocus=!1;this.active=!1}static get styles(){return[z]}get _isActive(){return this.active}connectedCallback(){super.connectedCallback(),this.form=this.closest("form")}caretTemplate(){return r` <bl-icon class="open" name="arrow_up"></bl-icon>
2
+ <bl-icon class="close" name="arrow_down"></bl-icon>`}_handleClick(){this.type==="submit"&&this.form&&x(this.form),this.onClick("Click event fired!")}focus(){this.button.focus()}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(a=>{var c;let l=a.nodeType;return l===a.TEXT_NODE&&((c=a.textContent)==null?void 0:c.trim())!==""||l===a.ELEMENT_NODE&&!a.hasAttribute("slot")})}render(){let s=this.loading||this.disabled,a=this.loading&&this.loadingLabel?this.loadingLabel:r`<slot></slot>`,l=!!this.href,c=this.icon?r`<bl-icon name=${this.icon}></bl-icon>`:"",b=this.loading?r`<bl-icon class="loading-icon" name="loading"></bl-icon>`:"",h=r`<slot name="icon">${c}</slot> <span class="label">${a}</span>`,O=this.dropdown?this.caretTemplate():"",u=_({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot,active:!l&&this._isActive});return l?r`<a
3
+ class=${u}
4
+ ?autofocus=${this.autofocus}
5
+ aria-disabled="${i(s)}"
6
+ aria-label="${i(this.label)}"
7
+ href=${i(this.href)}
8
+ target=${i(this.target)}
9
+ role="button"
10
+ >${b} ${h}
11
+ </a>`:r`<button
12
+ class=${u}
13
+ ?autofocus=${this.autofocus}
14
+ aria-disabled="${i(s)}"
15
+ aria-label="${i(this.label)}"
16
+ ?disabled=${s}
17
+ @click="${this._handleClick}"
18
+ >
19
+ ${b} ${h} ${O}
20
+ </button>`}};o([e({type:String,reflect:!0})],t.prototype,"variant",2),o([e({type:String,reflect:!0})],t.prototype,"kind",2),o([e({type:String,reflect:!0})],t.prototype,"size",2),o([e({type:String})],t.prototype,"label",2),o([e({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),o([e({type:Boolean,reflect:!0})],t.prototype,"loading",2),o([e({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([e({type:String})],t.prototype,"href",2),o([e({type:String})],t.prototype,"icon",2),o([e({type:String})],t.prototype,"target",2),o([e({type:String})],t.prototype,"type",2),o([e({type:Boolean})],t.prototype,"dropdown",2),o([e({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),o([g({})],t.prototype,"active",2),o([f(".button")],t.prototype,"button",2),o([y("bl-click")],t.prototype,"onClick",2),t=o([m("bl-button")],t);export{x as a,t as b};
21
+ //# sourceMappingURL=chunk-KGIPG6EV.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../node_modules/@open-wc/form-helpers/src/index.ts", "../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
4
+ "sourcesContent": ["/**\n * Implicitly submit a form by first validating all controls. If the form\n * is valid, issue a submit event and if that event is not prevented, manually\n * call the form's submit method.\n *\n * @param form {HTMLFormElement} - A form to implicitly submit\n */\nexport const submit = (form: HTMLFormElement): void => {\n if (!form.noValidate && !form.reportValidity()) {\n return;\n } else {\n const submitEvent = new SubmitEvent('submit', {\n bubbles: true,\n cancelable: true\n });\n form.dispatchEvent(submitEvent);\n if (!submitEvent.defaultPrevented) {\n form.submit();\n }\n }\n};\n\nexport type FormValue = string|FormData|File|FormValue[];\n\n/**\n * Parse a form and return a set of values based on the name/value pair.\n * If multiple controls of a similar name exist, return an array for those values;\n * otherwise return a single value.\n *\n * @param form {HTMLFormElement} - The form to parse for values\n * @returns {Record<string, any>} - An object representing the form's current values\n */\nexport const formValues = (form: HTMLFormElement): Record<string, FormValue> => {\n const formData = new FormData(form);\n const values: Record<string, FormValue> = {};\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore This does exist in all browsers. TypeScript is wrong\n for (const [key, value] of formData.entries()) {\n if (!values.hasOwnProperty(key)) {\n values[key] = value;\n } else if (Array.isArray(values[key])) {\n const pointer = values[key] as FormValue[];\n pointer.push(value);\n } else {\n values[key] = [values[key], value];\n }\n }\n\n return values;\n};\n\n/**\n * This method takes a form and parses it as an object. If any form control has a `.`\n * in its name, this utility will evaluate that name as a deep key for an object;\n * in other words, if a form has a named control, `name.first` and another, `name.last`\n * it will report back a nested object, name, with first and last properties\n * representing those controls' values.\n *\n * This can be useful when you have a complex model that you are attempting to represent\n * in declaratively in HTML.\n *\n * @param form {HTMLFormElement} - The form to grab values from\n * @returns {Object<string, FormValue>} - An object representation of the form\n */\nexport const parseFormAsObject = (form: HTMLFormElement): Record<string, FormValue> => {\n const data = formValues(form);\n const output: Record<string, FormValue> = {};\n\n Object.entries(data).forEach(([key, value]) => {\n /** If the key has a '.', parse it as an object */\n if (key.includes('.')) {\n const path = key.split('.');\n const destination: string | undefined = path.pop();\n let pointer = output;\n\n while (path.length) {\n const key = path.shift();\n pointer[key as string] = pointer[key as string] || ({} as FormValue);\n pointer = pointer[key as string] as unknown as Record<string, FormValue>;\n }\n\n pointer[destination as string] = value;\n } else {\n output[key] = data[key];\n }\n });\n\n return output;\n};\n", "import {css} from 'lit';\nexport const styles = css`@keyframes spin{from{transform:rotate(0)}to{transform:rotate(359deg)}}:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-highlight);--text-hover-color:var(--bl-color-neutral-lightest);--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:var(--bl-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:var(--bl-border-radius-m);text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--main-color);border-radius:var(--bl-border-radius-l);content:'';position:absolute;inset:-4px}.loading-icon{animation:spin 1s linear infinite;font-size:var(--icon-size)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([loading]) ::slotted(bl-icon){display:none}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-neutral-darker);--main-hover-color:var(--bl-color-neutral-darkest)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-highlight)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-highlight)}:host([disabled]){cursor:not-allowed}:host([loading]){cursor:wait}:host([loading]) bl-icon:not(.loading-icon){display:none}:host .button[aria-disabled='true']{--main-color:var(--bl-color-neutral-lightest);--main-hover-color:var(--bl-color-neutral-lightest);--content-color:var(--bl-color-neutral-lighter);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='tertiary']) .button[aria-disabled='true']{--main-color:transparent}:host([variant='secondary']:hover) .button[aria-disabled='false'],:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled='false']{--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover) .button[aria-disabled='false'],:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled='false']{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant='secondary']) .active.button{--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-neutral-lightest);--border-color:transparent}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { submit } from '@open-wc/form-helpers';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonKind = 'default' | 'neutral' | 'success' | 'danger';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-button-display=inline-block] Sets the display property of button\n * @cssproperty [--bl-button-justify=center] Sets the justify-content property of button\n *\n */\n@customElement('bl-button')\nexport default class BlButton extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = 'primary';\n\n /**\n * Sets the button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = 'default';\n\n /**\n * Sets the button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n /**\n * Sets the button label. Used for accessibility.\n */\n @property({ type: String })\n label: string;\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 loading state of button\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Set link url. If set, button will be rendered as anchor tag.\n */\n @property({ type: String })\n href?: string;\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n @property({ type: String })\n icon?: string;\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' | null;\n\n /**\n * Sets button type to dropdown\n */\n @property({ type: Boolean })\n dropdown = false;\n\n /**\n * Sets button to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Active state\n */\n @state({})\n active = false;\n\n @query('.button')\n private button: HTMLAnchorElement | HTMLButtonElement;\n\n /**\n * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n private get _isActive() {\n return this.active;\n }\n\n private form: HTMLFormElement | null;\n\n connectedCallback() {\n super.connectedCallback();\n this.form = this.closest('form');\n }\n\n private caretTemplate(): TemplateResult {\n return html` <bl-icon class=\"open\" name=\"arrow_up\"></bl-icon>\n <bl-icon class=\"close\" name=\"arrow_down\"></bl-icon>`;\n }\n\n private _handleClick() {\n if (this.type === 'submit' && this.form) {\n submit(this.form);\n }\n\n this.onClick('Click event fired!');\n }\n\n focus() {\n this.button.focus();\n }\n\n get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n get _hasDefaultSlot() {\n const childNodes = [...this.childNodes];\n return childNodes.some(node => {\n const nodeType = node.nodeType;\n // has only text node.\n if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n // has element node, it should not have slot attribute.\n if (nodeType === node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n return true;\n }\n }\n return false;\n });\n }\n\n render(): TemplateResult {\n const isDisabled = this.loading || this.disabled;\n const label = this.loading && this.loadingLabel ? this.loadingLabel : html`<slot></slot>`;\n const isAnchor = !!this.href;\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n const loadingIcon = this.loading\n ? html`<bl-icon class=\"loading-icon\" name=\"loading\"></bl-icon>`\n : '';\n const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\">${label}</span>`;\n const caret = this.dropdown ? this.caretTemplate() : '';\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n 'active': !isAnchor && this._isActive,\n });\n\n return isAnchor\n ? html`<a\n class=${classes}\n ?autofocus=${this.autofocus}\n aria-disabled=\"${ifDefined(isDisabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n role=\"button\"\n >${loadingIcon} ${slots}\n </a>`\n : html`<button\n class=${classes}\n ?autofocus=${this.autofocus}\n aria-disabled=\"${ifDefined(isDisabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n ?disabled=${isDisabled}\n @click=\"${this._handleClick}\"\n >\n ${loadingIcon} ${slots} ${caret}\n </button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["submit", "form", "submitEvent", "styles", "i", "bl_button_default", "BlButton", "s", "bl_button_default", "y", "submit", "node", "_a", "nodeType", "isDisabled", "label", "isAnchor", "icon", "loadingIcon", "slots", "caret", "classes", "o", "l", "__decorateClass", "t", "i", "event", "e"]
7
+ }
@@ -0,0 +1,18 @@
1
+ import{a as r}from"./chunk-23UFIOHV.js";import{a as n,b as l,f as a,g as c,h as i,i as p,j as u}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var d=n`: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-seperator: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:0}.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:0}.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(:hover) .single-option,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_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)}`,h=d;var t=class extends a{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.multiple=!1}static get styles(){return[h]}get value(){return this._value||this.textContent}set value(e){this._value=e}focus(){this.multiple||(this.focusTarget.tabIndex=0),this.focusTarget.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.focusTarget.tabIndex=-1}singleOptionTemplate(){return l`<div
2
+ class="single-option focus-target"
3
+ @blur=${this.blur}
4
+ @keydown=${this.handleKeydown}
5
+ @click="${this._onClickOption}"
6
+ >
7
+ <slot></slot>
8
+ </div>`}checkboxOptionTemplate(){return l`<bl-checkbox
9
+ class="checkbox-option focus-target"
10
+ .checked="${this.selected}"
11
+ .disabled="${this.disabled}"
12
+ @bl-checkbox-change="${this._onCheckboxChange}"
13
+ >
14
+ <slot></slot>
15
+ </bl-checkbox>`}render(){return l`<div class="option-container">
16
+ ${this.multiple?this.checkboxOptionTemplate():this.singleOptionTemplate()}
17
+ </div>`}handleKeydown(e){(e.code==="Enter"||e.code==="Space")&&(this._onClickOption(),e.preventDefault())}_handleEvent(){this._onSelect(this.value)}_onClickOption(){this.selected=!this.selected,this._handleEvent()}_onCheckboxChange(e){this.selected=e.detail,this._handleEvent()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{var e,s;this.blSelect=this.closest("bl-select"),this.multiple=((e=this.blSelect)==null?void 0:e.multiple)||!1,(s=this.blSelect)==null||s.registerOption(this)})}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.blSelect)==null||e.unregisterOption(this)}};o([i({})],t.prototype,"value",1),o([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([i({type:Boolean,reflect:!0})],t.prototype,"selected",2),o([p()],t.prototype,"multiple",2),o([r("bl-select-option")],t.prototype,"_onSelect",2),o([r("bl-focus")],t.prototype,"onFocus",2),o([r("bl-blur")],t.prototype,"onBlur",2),o([u(".focus-target")],t.prototype,"focusTarget",2),t=o([c("bl-select-option")],t);export{t as a};
18
+ //# sourceMappingURL=chunk-MCS3XLXD.js.map
@@ -0,0 +1,7 @@
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-seperator: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:0}.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:0}.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(:hover) .single-option,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_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 { FormValue } from '@open-wc/form-helpers';\nimport { CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\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 >\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 >\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": "kKACO,IAAMA,EAASC,28CACfC,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;AAAA,WAInB,CAEQ,wBAAyB,CAC/B,OAAOA;AAAA;AAAA,kBAEO,KAAK;AAAA,mBACJ,KAAK;AAAA,6BACK,KAAK;AAAA;AAAA;AAAA,mBAIhC,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,CArInC,IAAAC,EAAAC,EAsIM,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,CA9IzB,IAAAD,EA+II,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,iBAAiB,KAClC,CACF,EA9HME,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", "y", "event", "_a", "_b", "__decorateClass", "e", "t", "i"]
7
+ }
@@ -1,4 +1,4 @@
1
- import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as l,b as c,f as n,g as h,h as a}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=l`:host{display:inline-block;cursor:pointer}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);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-content-passive);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);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`,u=p;var m="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var i,o,s;let e=(s=(o=this.ariaLabel)!=null?o:(i=this.attributes.getNamedItem("aria-label"))==null?void 0:i.value)!=null?s:void 0;return c`
1
+ import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as s,b as c,f as h,g as n,h as a}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=s`:host{display:inline-block;cursor:pointer}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);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-neutral-lighter);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);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`,u=p;var m="bl-switch",t=class extends h{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var i,o,l;let e=(l=(o=this.ariaLabel)!=null?o:(i=this.attributes.getNamedItem("aria-label"))==null?void 0:i.value)!=null?l:void 0;return c`
2
2
  <span
3
3
  class="switch"
4
4
  role="switch"
@@ -10,5 +10,5 @@ import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";
10
10
  tabindex="0"
11
11
  >
12
12
  </span>
13
- `}};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(m)],t);export{m as a,t as b};
14
- //# sourceMappingURL=chunk-QV3A6DWH.js.map
13
+ `}};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([n(m)],t);export{m as a,t as b};
14
+ //# sourceMappingURL=chunk-N53HXW4A.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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}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);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-content-passive);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);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\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@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 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 <span\n class=\"switch\"\n role=\"switch\"\n aria-checked=${this.checked}\n aria-readonly=${!!this.disabled}\n @click=${this.toggle}\n @keydown=${this.handleKeyDown}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=\"0\"\n >\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSwitchTag]: BlSwitch;\n }\n}\n"],
5
- "mappings": "4LACO,IAAMA,EAASC,g6CACfC,EAAQF,ECIR,IAAMG,EAAc,YAONC,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,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CAjD3B,IAAAC,EAAAC,EAAAC,EAkDI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,wBACJ,CAAC,CAAC,KAAK;AAAA,iBACd,KAAK;AAAA,mBACH,KAAK;AAAA,qBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA,KAKtC,CACF,EA7CEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBX,EASnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBX,EAenB,wBAKmCU,EAAA,CAAlCP,EAAM,kBAAkB,GApBNH,EAoBgB,wBApBhBA,EAArBU,EAAA,CADCC,EAAcZ,CAAW,GACLC",
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer}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);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-neutral-lighter);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);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\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=--bl-color-primary] Set the accent 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 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 <span\n class=\"switch\"\n role=\"switch\"\n aria-checked=${this.checked}\n aria-readonly=${!!this.disabled}\n @click=${this.toggle}\n @keydown=${this.handleKeyDown}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=\"0\"\n >\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSwitchTag]: BlSwitch;\n }\n}\n"],
5
+ "mappings": "4LACO,IAAMA,EAASC,g6CACfC,EAAQF,ECIR,IAAMG,EAAc,YAUNC,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,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CApD3B,IAAAC,EAAAC,EAAAC,EAqDI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,wBACJ,CAAC,CAAC,KAAK;AAAA,iBACd,KAAK;AAAA,mBACH,KAAK;AAAA,qBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA,KAKtC,CACF,EA7CEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBX,EASnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBX,EAenB,wBAKmCU,EAAA,CAAlCP,EAAM,kBAAkB,GApBNH,EAoBgB,wBApBhBA,EAArBU,EAAA,CADCC,EAAcZ,CAAW,GACLC",
6
6
  "names": ["styles", "i", "bl_switch_default", "blSwitchTag", "BlSwitch", "s", "bl_switch_default", "event", "_a", "_b", "_c", "ariaLabel", "y", "l", "__decorateClass", "e"]
7
7
  }
@@ -0,0 +1,46 @@
1
+ import{a as m}from"./chunk-XQN3H7RG.js";import{a as f}from"./chunk-EPJ347EQ.js";import{a as g}from"./chunk-DJOD4BTL.js";import{a as u}from"./chunk-KGIPG6EV.js";import{a as p}from"./chunk-OLPYXE2P.js";import{a}from"./chunk-KPAWUBRO.js";import{a as n}from"./chunk-23UFIOHV.js";import{a as h,b as o,f as d,g as v,h as i,i as c,j as b}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var V=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:0;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;padding-left:var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within,.wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--padding-horizontal) - var(--label-padding));right:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within,.has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.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)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`,y=V;var e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&u(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(r){this._customInvalidText=r,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}forceCustomError(){this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}clearCustomError(){this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(r){let l=r.target.value;this.value=l,this.onInput(l)}changeHandler(r){let l=r.target.value;this.dirty=!0,this.value=l,this.onChange(l)}firstUpdated(){this.setValue(this.value)}async updated(r){r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let r=this.checkValidity()?"":o`<p id="errorMessage" aria-live="polite" class="invalid-text">
2
+ ${this.validationMessage}
3
+ </p>`,l=this.helpText?o`<p id="helpText" class="help-text">${this.helpText}</p>`:"",x=this.icon?o`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",w=this.label?o`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",k=s?o`<bl-button
4
+ size="small"
5
+ kind="neutral"
6
+ variant="tertiary"
7
+ class="${p({"reveal-button":!0,"password-visible":this.passwordVisible})}"
8
+ aria-label="Toggle password reveal"
9
+ @bl-click="${this.textVisibilityToggle}"
10
+ >
11
+ <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
12
+ <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
13
+ </bl-button>`:"",z={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":s||this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},$=this.passwordVisible?"text":"password",T=s?$:this.type;return o`<div class=${p(z)}>
14
+ ${w}
15
+ <fieldset class="input-wrapper">
16
+ <legend><span>${this.label}</span></legend>
17
+ <input
18
+ id=${this.inputId}
19
+ type=${T}
20
+ .value=${f(this.value)}
21
+ inputmode="${a(this.inputmode)}"
22
+ ?autofocus=${this.autofocus}
23
+ autocomplete="${a(this.autocomplete)}"
24
+ placeholder="${a(this.placeholder)}"
25
+ minlength="${a(this.minlength)}"
26
+ maxlength="${a(this.maxlength)}"
27
+ min="${a(this.min)}"
28
+ max="${a(this.max)}"
29
+ pattern="${a(this.pattern)}"
30
+ step="${a(this.step)}"
31
+ ?required=${this.required}
32
+ ?disabled=${this.disabled}
33
+ @change=${this.changeHandler}
34
+ @input=${this.inputHandler}
35
+ aria-invalid=${this.checkValidity()?"false":"true"}
36
+ aria-describedby=${a(this.helpText?"helpText":void 0)}
37
+ aria-errormessage=${a(this.checkValidity()?void 0:"errorMessage")}
38
+ />
39
+ <div class="icon">
40
+ ${k} ${x}
41
+ <bl-icon class="error-icon" name="alert"></bl-icon>
42
+ </div>
43
+ </fieldset>
44
+ <div class="hint">${r} ${l}</div>
45
+ </div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=m,t([b("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({type:Number,reflect:!0})],e.prototype,"min",2),t([i({type:Number,reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([v("bl-input")],e);export{e as a};
46
+ //# sourceMappingURL=chunk-PUNHEAEI.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:0;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;padding-left:var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within,.wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--padding-horizontal) - var(--label-padding));right:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within,.has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.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)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } 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 { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n */\n@customElement('bl-input')\nexport default class BlInput extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n static formControlValidators = innerInputValidators;\n\n @query('input')\n validationTarget: HTMLInputElement;\n\n /**\n * Sets name of the input\n */\n @property({ reflect: true })\n name?: string;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n */\n @property({ reflect: true })\n type: 'text' | 'password' | 'number' | 'tel' | 'url' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property({ reflect: true })\n value = '';\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number, reflect: true })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number, reflect: true })\n maxlength?: number;\n\n /**\n * Sets the smallest number can be entered to a `number` input\n */\n @property({ type: Number, reflect: true })\n min?: number;\n\n /**\n * Sets the biggest number can be entered to a `number` input\n */\n @property({ type: Number, reflect: true })\n max?: number;\n\n /**\n * Sets a regex pattern form the input validation\n */\n @property({ type: String, reflect: true })\n pattern?: string;\n\n /**\n * Sets the increase and decrease step to a `number` input\n */\n @property({ type: Number, reflect: true })\n step?: number;\n\n /**\n * Hints browser to autocomplete this field.\n */\n @property({ type: String, reflect: true })\n autocomplete: string;\n\n /**\n * Sets the input mode of the field for asking browser to show the desired keyboard.\n */\n @property({ type: String, reflect: true })\n inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String, reflect: true })\n icon?: string;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = 'medium';\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = 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 * Overrides error message. This message will override default error messages\n */\n @property({ type: String, attribute: 'invalid-text', reflect: true })\n set customInvalidText(value: string) {\n this._customInvalidText = value;\n this.setValue(this.value);\n }\n\n get customInvalidText(): string {\n return this._customInvalidText;\n }\n\n private _customInvalidText: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text', reflect: true })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event('bl-change') private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-input') private onInput: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.onKeydown);\n this.addEventListener('invalid', this.onError);\n\n this.form?.addEventListener('submit', () => {\n this.reportValidity();\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.onKeydown);\n this.removeEventListener('invalid', this.onError);\n }\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' && this.form) {\n submit(this.form);\n }\n };\n\n private onError = (): void => {\n this.onInvalid(this.internals.validity);\n };\n\n @state() private dirty = false;\n\n @state() private passwordVisible = false;\n\n private textVisibilityToggle() {\n this.passwordVisible = !this.passwordVisible;\n }\n\n validityCallback(): string | void {\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n /**\n * Force to set input as in invalid state.\n */\n forceCustomError() {\n this.validationTarget.setCustomValidity(this.customInvalidText || 'An error occurred');\n this.setValue(this.value);\n this.reportValidity();\n }\n\n /**\n * Clear forced invalid state\n */\n clearCustomError() {\n this.validationTarget.setCustomValidity('');\n this.setValue(this.value);\n this.reportValidity();\n }\n\n reportValidity() {\n this.dirty = true;\n this.requestUpdate();\n return this.checkValidity();\n }\n\n private inputHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.value = value;\n this.onInput(value);\n }\n\n private changeHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.dirty = true;\n this.value = value;\n this.onChange(value);\n }\n\n firstUpdated() {\n this.setValue(this.value);\n }\n\n protected async updated(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this.setValue(this.value);\n\n await this.validationComplete;\n\n this.requestUpdate();\n }\n }\n\n private inputId = Math.random().toString(36).substring(2);\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 const helpMessage = this.helpText\n ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n : ``;\n\n const icon = this.icon ? html`<bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>` : '';\n const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : '';\n const passwordInput = this.type === 'password';\n\n const revealButton = passwordInput\n ? html`<bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n class=\"${classMap({\n 'reveal-button': true,\n 'password-visible': this.passwordVisible,\n })}\"\n aria-label=\"Toggle password reveal\"\n @bl-click=\"${this.textVisibilityToggle}\"\n >\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n </bl-button>`\n : '';\n\n const classes = {\n 'wrapper': true,\n 'dirty': this.dirty,\n 'invalid': !this.checkValidity(),\n 'has-icon': passwordInput || this.icon || (this.dirty && !this.checkValidity()),\n 'has-value': this.value !== null && this.value !== '',\n };\n\n const passwordType = this.passwordVisible ? 'text' : 'password';\n const inputType = passwordInput ? passwordType : this.type;\n\n return html`<div class=${classMap(classes)}>\n ${label}\n <fieldset class=\"input-wrapper\">\n <legend><span>${this.label}</span></legend>\n <input\n id=${this.inputId}\n type=${inputType}\n .value=${live(this.value)}\n inputmode=\"${ifDefined(this.inputmode)}\"\n ?autofocus=${this.autofocus}\n autocomplete=\"${ifDefined(this.autocomplete)}\"\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n pattern=\"${ifDefined(this.pattern)}\"\n step=\"${ifDefined(this.step)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n />\n <div class=\"icon\">\n ${revealButton} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n </div>\n </fieldset>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["styles", "i", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "changedProperties", "invalidMessage", "y", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
7
+ }