@trendyol/baklava 2.0.0-beta.82 → 2.0.0-beta.84

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{b as S}from"./chunk-4IAGV6FP.js";import{a as b}from"./chunk-2R4IL3VH.js";import{a as I}from"./chunk-MIGVYPFB.js";import{a as P}from"./chunk-GX7AW5WB.js";import{a as g}from"./chunk-KUOLIJCN.js";import{a as h}from"./chunk-K5PH753D.js";import{b as T,d as G}from"./chunk-VB5RPJV3.js";import{b as D}from"./chunk-KQBXYF3J.js";import{a as B}from"./chunk-J774WKKH.js";import{a as m}from"./chunk-R6WY2327.js";import{a as s}from"./chunk-THIPCHAK.js";import{a as x}from"./chunk-2FBI46AY.js";import"./chunk-RST5NVHY.js";import"./chunk-3B64VOWB.js";import{a as w}from"./chunk-54ROO7JA.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-6J4GSOJU.js";import{c,f as i}from"./chunk-BD5KXTYS.js";import{a as r}from"./chunk-C3X43Y7C.js";import{a}from"./chunk-TJ47AW2B.js";import{b as f,e as p}from"./chunk-DSM6T5MC.js";import"./chunk-EPJ347EQ.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-Y2EBT6QM.js";import{a as u}from"./chunk-AYSPIQ23.js";import{b as l}from"./chunk-MCWRM3WC.js";import"./chunk-OLPYXE2P.js";import"./chunk-KPAWUBRO.js";import{a as o,b as e,c as t}from"./chunk-F3ZH5IV7.js";import"./chunk-RLMJN536.js";import"./chunk-23UFIOHV.js";import"./chunk-57PTZNIL.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,w as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,h as BlTooltip,e as getIconPath,o as setIconPath};
+import{b as S}from"./chunk-4IAGV6FP.js";import{a as b}from"./chunk-2R4IL3VH.js";import{a as I}from"./chunk-MIGVYPFB.js";import{a as P}from"./chunk-GX7AW5WB.js";import{a as g}from"./chunk-FHOMHSA6.js";import{a as h}from"./chunk-K5PH753D.js";import{b as T,d as G}from"./chunk-VB5RPJV3.js";import{b as D}from"./chunk-KQBXYF3J.js";import{a as B}from"./chunk-J774WKKH.js";import{a as m}from"./chunk-TJKKAO25.js";import{a as s}from"./chunk-THIPCHAK.js";import{a as x}from"./chunk-4NHYWXCW.js";import"./chunk-L3EQLCFT.js";import"./chunk-3B64VOWB.js";import{a as w}from"./chunk-54ROO7JA.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-6J4GSOJU.js";import{c,f as i}from"./chunk-BD5KXTYS.js";import{a as r}from"./chunk-C3X43Y7C.js";import{a}from"./chunk-TJ47AW2B.js";import{b as f,e as p}from"./chunk-DSM6T5MC.js";import"./chunk-EPJ347EQ.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-2J3IFWM5.js";import{a as u}from"./chunk-AYSPIQ23.js";import{b as l}from"./chunk-SU6OEG6P.js";import"./chunk-OLPYXE2P.js";import"./chunk-KPAWUBRO.js";import{a as o,b as e,c as t}from"./chunk-F3ZH5IV7.js";import"./chunk-RLMJN536.js";import"./chunk-23UFIOHV.js";import"./chunk-57PTZNIL.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,w as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,h as BlTooltip,e as getIconPath,o as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/chunk-2J3IFWM5.js

@@ -0,0 +1,22 @@
+import{a as c}from"./chunk-23UFIOHV.js";import{a as h,b as r,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-primary-background);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:999}.dialog::backdrop{background:#273142;opacity:.7}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;background:#273142b3;z-index:999}: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-secondary);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,l;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())):((l=(i=this.dialog)==null?void 0:i.close)==null||l.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,l,s,p;((e=this.content)==null?void 0:e.scrollHeight)>((a=this.content)==null?void 0:a.offsetHeight)?(l=(i=this.footer)==null?void 0:i.classList)==null||l.add("shadow"):(p=(s=this.footer)==null?void 0:s.classList)==null||p.remove("shadow")}renderFooter(){return this._hasFooter?r`<footer>
+          <slot name="primary-action"></slot>
+          <slot name="secondary-action"></slot>
+          <slot name="tertiary-action"></slot>
+        </footer>`:""}renderContainer(){let e=this.caption?r`<h2 id="dialog-caption">${this.caption}</h2>`:"";return r` <div class="container">
+      <header>
+        ${e}
+        <bl-button
+          @click="${this.closeDialog}"
+          icon="close"
+          variant="tertiary"
+          kind="neutral"
+        ></bl-button>
+      </header>
+      <section class="content"><slot /></section>
+      ${this.renderFooter()}
+    </div>`}render(){return this.hasHtmlDialogSupport?r`
+          <dialog class="dialog" aria-labelledby="dialog-caption" @click=${this.clickOutsideHandler}>${this.renderContainer()}</dialog>
+        `:r`<div class="dialog-polyfill" role="dialog" aria-labelledby="dialog-caption" @click=${this.clickOutsideHandler}>
+          ${this.renderContainer()}
+        </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};
+//# sourceMappingURL=chunk-2J3IFWM5.js.map

package/dist/chunk-2J3IFWM5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.container{--background-color:var(--bl-color-primary-background);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:999}.dialog::backdrop{background:#273142;opacity:.7}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;background:#273142b3;z-index:999}: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-secondary);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/**\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 class=\"dialog\" aria-labelledby=\"dialog-caption\" @click=${this.clickOutsideHandler}>${this.renderContainer()}</dialog>\n        `\n      : html`<div class=\"dialog-polyfill\" role=\"dialog\" aria-labelledby=\"dialog-caption\" @click=${this.clickOutsideHandler}>\n          ${this.renderContainer()}\n        </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-dialog': BlDialog;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "bl_dialog_default", "changedProperties", "node", "_a", "_b", "_c", "_d", "_e", "_f", "y", "title", "__decorateClass", "e", "i"]
+}

package/dist/chunk-4NHYWXCW.js

@@ -0,0 +1,45 @@
+import{a as f}from"./chunk-L3EQLCFT.js";import{a as g}from"./chunk-EPJ347EQ.js";import{a as u}from"./chunk-DJOD4BTL.js";import{a as b}from"./chunk-SU6OEG6P.js";import{a as c}from"./chunk-OLPYXE2P.js";import{a as o}from"./chunk-KPAWUBRO.js";import{a as s}from"./chunk-23UFIOHV.js";import{a as d,b as l,f as p,g as h,h as i,i as n,j as v}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var E=d`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--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);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-accent-primary-background);display:flex;flex-direction:column;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)}: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)}.input-wrapper{--border-size:1px;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(--border-size));border-radius:var(--bl-size-3xs)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}.input-wrapper:has(input:autofill){background-color:var(--autofill-bg-color)}.input-wrapper:has(input:-webkit-autofill){background-color:var(--autofill-bg-color)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}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:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}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-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}: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}`,m=E;var e=class extends u(p){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&&b(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.passwordInput=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[m]}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)}reportValidity(){return this.dirty=!0,this.checkValidity()}inputHandler(r){let a=r.target.value;this.value=a,this.onInput(a)}changeHandler(r){let a=r.target.value;this.dirty=!0,this.value=a,this.onChange(a)}firstUpdated(){this.passwordInput=this.type==="password",this.setValue(this.value)}async updated(r){r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let r=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
+          ${this.validationMessage}
+        </p>`,a=this.helpText?l`<p id="helpText" class="help-text">${this.helpText}</p>`:"",y=this.icon?l`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",x=this.label?l`<label for=${this.inputId}>${this.label}</label>`:"",w=this.passwordInput?l`<bl-button
+          size="small"
+          kind="neutral"
+          variant="tertiary"
+          class="${c({"reveal-button":!0,"password-visible":this.passwordVisible})}"
+          aria-label="Toggle password reveal"
+          @bl-click="${this.textVisibilityToggle}"
+        >
+          <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
+          <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
+        </bl-button>`:"",k={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":this.passwordInput||this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},z=this.passwordVisible?"text":"password",$=this.passwordInput?z:this.type;return l`<div class=${c(k)}>
+      ${x}
+      <div class="input-wrapper">
+        <input
+          id=${this.inputId}
+          type=${$}
+          .value=${g(this.value)}
+          inputmode="${o(this.inputmode)}"
+          ?autofocus=${this.autofocus}
+          autocomplete="${o(this.autocomplete)}"
+          placeholder="${o(this.placeholder)}"
+          minlength="${o(this.minlength)}"
+          maxlength="${o(this.maxlength)}"
+          min="${o(this.min)}"
+          max="${o(this.max)}"
+          pattern="${o(this.pattern)}"
+          step="${o(this.step)}"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.changeHandler}
+          @input=${this.inputHandler}
+          aria-invalid=${this.checkValidity()?"false":"true"}
+          aria-describedby=${o(this.helpText?"helpText":void 0)}
+          aria-errormessage=${o(this.checkValidity()?void 0:"errorMessage")}
+        />
+        <div class="icon">
+          ${w} ${y}
+          <bl-icon class="error-icon" name="alert"></bl-icon>
+        </div>
+      </div>
+      <div class="hint">${r} ${a}</div>
+    </div>`}};e.formControlValidators=f,t([v("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",2),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([s("bl-change")],e.prototype,"onChange",2),t([s("bl-input")],e.prototype,"onInput",2),t([s("bl-invalid")],e.prototype,"onInvalid",2),t([n()],e.prototype,"dirty",2),t([n()],e.prototype,"passwordVisible",2),t([n()],e.prototype,"passwordInput",2),e=t([h("bl-input")],e);export{e as a};
+//# sourceMappingURL=chunk-4NHYWXCW.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--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);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-accent-primary-background);display:flex;flex-direction:column;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)}: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)}.input-wrapper{--border-size:1px;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(--border-size));border-radius:var(--bl-size-3xs)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}.input-wrapper:has(input:autofill){background-color:var(--autofill-bg-color)}.input-wrapper:has(input:-webkit-autofill){background-color:var(--autofill-bg-color)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}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:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}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-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}: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\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   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  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  @state() private passwordInput = 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  reportValidity() {\n    this.dirty = true;\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.passwordInput = this.type === 'password';\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\n    const revealButton = this.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': this.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 = this.passwordInput ? passwordType : this.type;\n\n    return html`<div class=${classMap(classes)}>\n      ${label}\n      <div class=\"input-wrapper\">\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      </div>\n      <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-input': BlInput;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "_a", "value", "changedProperties", "invalidMessage", "y", "helpMessage", "icon", "label", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
+}

package/dist/chunk-FHOMHSA6.js

@@ -0,0 +1,36 @@
+import{b as z}from"./chunk-L3EQLCFT.js";import{a as $}from"./chunk-EPJ347EQ.js";import{a as w}from"./chunk-DJOD4BTL.js";import{a as x}from"./chunk-OLPYXE2P.js";import{a as n}from"./chunk-KPAWUBRO.js";import{a as m,b as f,c as y}from"./chunk-RLMJN536.js";import{a as c}from"./chunk-23UFIOHV.js";import{a as p,b as s,c as u,f as v,g,h as a,i as h,j as b}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var k=f(class extends y{constructor(o){var l;if(super(o),o.type!==m.ATTRIBUTE||o.name!=="style"||((l=o.strings)===null||l===void 0?void 0:l.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(o){return Object.keys(o).reduce((l,r)=>{let i=o[r];return i==null?l:l+`${r=r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`},"")}update(o,[l]){let{style:r}=o.element;if(this.vt===void 0){this.vt=new Set;for(let i in l)this.vt.add(i);return this.render(l)}this.vt.forEach(i=>{l[i]==null&&(this.vt.delete(i),i.includes("-")?r.removeProperty(i):r[i]="")});for(let i in l){let d=l[i];d!=null&&(this.vt.add(i),i.includes("-")?r.setProperty(i,d):r[i]=d)}return u}});var V=p`:host{display:inline-block;width:200px;position:relative}.wrapper{--row-count:1;--maxrow-count:;--line-height:var(--bl-font-title-3-line-height);--scroll-height:var(--line-height);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--border-size:1px;--default-scroll-height:calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));--height:max(var(--scroll-height),var(--default-scroll-height));--input-font:var(--bl-font-body-text-2);--border-radius:var(--bl-size-3xs);--border-color:var(--bl-color-border);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.input-wrapper{border:solid var(--border-size) var(--border-color);border-radius:var(--border-radius);padding-top:var(--padding-vertical);display:flex;box-sizing:border-box}textarea{width:100%;align-self:stretch;outline:0;font:var(--input-font);padding:0 calc(var(--padding-horizontal) - var(--border-size));padding-bottom:var(--padding-vertical);margin:0;border:0;border-radius:var(--border-radius);color:var(--bl-color-content-primary);resize:vertical;display:block}:host([size='large']) .wrapper{--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--input-font:var(--bl-font-body-text-3);--line-height:var(--bl-font-title-4-line-height)}textarea:disabled{background-color:var(--bl-color-secondary-background);color:var(--bl-color-content-tertiary);cursor:not-allowed}:host([disabled]) .wrapper{background-color:var(--bl-color-secondary-background)}:host([expand]) textarea{overflow:hidden;resize:none;height:var(--height)}:host([expand][max-rows]) textarea{--maxrow-height:calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));overflow-y:scroll;height:min(var(--height),var(--maxrow-height))}.wrapper:focus-within{--border-color:var(--bl-color-primary)}.dirty.max-len-invalid,.dirty.invalid{--border-color:var(--bl-color-danger)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0;max-width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-content-primary-contrast);pointer-events:initial}:host ::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);background-color:initial;padding:0}.hint{display:none;font:var(--bl-font-body-text-3)}:host([character-counter]) .hint,:host([help-text]) .hint,.dirty.invalid .hint{display:flex;gap:var(--bl-size-3xs)}.hint>*{margin:0;padding:0}.help-text,.invalid-text{flex:1}.counter-text{color:var(--bl-color-content-secondary);margin-left:auto}:where(.max-len-invalid,.dirty.invalid) .hint>.counter-text{color:var(--bl-color-danger)}.dirty.invalid label{color:var(--bl-color-danger)}.invalid-text{display:none;color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:where(.dirty.max-len-invalid,.dirty.invalid) .hint>.invalid-text{display:inline-block}.dirty.invalid .hint>.help-text{display:none}`,C=V;var t=class extends w(v){constructor(){super(...arguments);this.name="";this.required=!1;this.disabled=!1;this.expand=!1;this.size="medium";this.labelFixed=!1;this.characterCounter=!1;this.value="";this.rows=4;this.autofocus=!1;this.spellchecker="false";this.customScrollHeight=null;this.inputId=Math.random().toString(36).substring(2);this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1}static get styles(){return[C]}connectedCallback(){var r;super.connectedCallback(),(r=this.internals.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}inputHandler(r){this.autoResize();let i=r.target.value;this.value=i,this.onInput(i)}changeHandler(r){let i=r.target.value;this.dirty=!0,this.value=i,this.onChange(i)}firstUpdated(){this.setValue(this.value),this.autoResize()}async updated(r){r.has("rows")&&this.autoResize(),r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(r){this.value=r}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}autoResize(){if(!this.expand)return;this.validationTarget.style.height="auto";let r=this.validationTarget.scrollHeight;this.customScrollHeight=`${r}px`,this.validationTarget.style.removeProperty("height")}render(){let r=this.internals.validity.tooLong,i=this.checkValidity()?"":s`<p class="invalid-text">${this.validationMessage}</p>`,d=this.helpText?s`<p class="help-text">${this.helpText}</p>`:"",S=this.label?s`<label for="${this.inputId}">${this.label}</label>`:"",E=this.characterCounter&&this.maxlength?`${this.value.length}/${this.maxlength}`:this.characterCounter?`${this.value.length}`:"",M=this.characterCounter?s`<p class="counter-text">${E}</p>`:"",H={wrapper:!0,"has-value":this.value!==null&&this.value!=="",dirty:this.dirty,"max-len-invalid":r,invalid:!this.checkValidity()},R={"--row-count":`${this.rows}`,"--maxrow-count":this.maxRows?`${this.maxRows}`:null,"--scroll-height":this.customScrollHeight};return s`
+      <div style=${k(R)} class=${x(H)}>
+        ${S}
+        <div class="input-wrapper">
+          <textarea
+            id="${this.inputId}"
+            name="${n(this.name)}"
+            .value=${$(this.value)}
+            ?autofocus=${this.autofocus}
+            autocomplete="${n(this.autocomplete)}"
+            inputmode="${n(this.inputmode)}"
+            placeholder="${n(this.placeholder)}"
+            minlength="${n(this.minlength)}"
+            rows="${n(this.rows)}"
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            spellcheck="${this.spellchecker}"
+            @change=${this.changeHandler}
+            @input=${this.inputHandler}
+            @invalid=${this.onError}
+          >
+          </textarea>
+        </div>
+        <div class="hint">${i}${d}${M}</div>
+      </div>
+    `}};t.formControlValidators=z,e([b("textarea")],t.prototype,"validationTarget",2),e([a({type:String,reflect:!0})],t.prototype,"name",2),e([a({type:Boolean,reflect:!0})],t.prototype,"required",2),e([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([a({type:Boolean,reflect:!0})],t.prototype,"expand",2),e([a({type:Number,reflect:!0,attribute:"max-rows"})],t.prototype,"maxRows",2),e([a({type:String,reflect:!0})],t.prototype,"size",2),e([a({reflect:!0})],t.prototype,"label",2),e([a({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),e([a({reflect:!0})],t.prototype,"placeholder",2),e([a({type:Boolean,attribute:"character-counter",reflect:!0})],t.prototype,"characterCounter",2),e([a({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),e([a({type:String,attribute:"invalid-text",reflect:!0})],t.prototype,"customInvalidText",2),e([a({type:Number,reflect:!0})],t.prototype,"minlength",2),e([a({type:Number,reflect:!0})],t.prototype,"maxlength",2),e([a({reflect:!0})],t.prototype,"value",2),e([a({type:Number,reflect:!0})],t.prototype,"rows",2),e([a({type:String,reflect:!0})],t.prototype,"inputmode",2),e([a({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),e([a({type:String,reflect:!0})],t.prototype,"autocomplete",2),e([a({type:String,reflect:!0,attribute:"spellcheck"})],t.prototype,"spellchecker",2),e([c("bl-input")],t.prototype,"onInput",2),e([c("bl-change")],t.prototype,"onChange",2),e([c("bl-invalid")],t.prototype,"onInvalid",2),e([h()],t.prototype,"customScrollHeight",2),e([h()],t.prototype,"dirty",2),t=e([g("bl-textarea")],t);export{t as a};
+/*! Bundled license information:
+
+lit-html/directives/style-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/
+//# sourceMappingURL=chunk-FHOMHSA6.js.map

package/dist/chunk-FHOMHSA6.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../node_modules/lit-html/src/directives/style-map.ts", "../src/components/textarea/bl-textarea.css", "../src/components/textarea/bl-textarea.ts"],
+  "sourcesContent": ["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {AttributePart, noChange} from '../lit-html.js';\nimport {\n  directive,\n  Directive,\n  DirectiveParameters,\n  PartInfo,\n  PartType,\n} from '../directive.js';\n\n/**\n * A key-value set of CSS properties and values.\n *\n * The key should be either a valid CSS property name string, like\n * `'background-color'`, or a valid JavaScript camel case property name\n * for CSSStyleDeclaration like `backgroundColor`.\n */\nexport interface StyleInfo {\n  [name: string]: string | undefined | null;\n}\n\nclass StyleMapDirective extends Directive {\n  _previousStyleProperties?: Set<string>;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (\n      partInfo.type !== PartType.ATTRIBUTE ||\n      partInfo.name !== 'style' ||\n      (partInfo.strings?.length as number) > 2\n    ) {\n      throw new Error(\n        'The `styleMap` directive must be used in the `style` attribute ' +\n          'and must be the only part in the attribute.'\n      );\n    }\n  }\n\n  render(styleInfo: Readonly<StyleInfo>) {\n    return Object.keys(styleInfo).reduce((style, prop) => {\n      const value = styleInfo[prop];\n      if (value == null) {\n        return style;\n      }\n      // Convert property names from camel-case to dash-case, i.e.:\n      //  `backgroundColor` -> `background-color`\n      // Vendor-prefixed names need an extra `-` appended to front:\n      //  `webkitAppearance` -> `-webkit-appearance`\n      // Exception is any property name containing a dash, including\n      // custom properties; we assume these are already dash-cased i.e.:\n      //  `--my-button-color` --> `--my-button-color`\n      prop = prop\n        .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')\n        .toLowerCase();\n      return style + `${prop}:${value};`;\n    }, '');\n  }\n\n  override update(part: AttributePart, [styleInfo]: DirectiveParameters<this>) {\n    const {style} = part.element as HTMLElement;\n\n    if (this._previousStyleProperties === undefined) {\n      this._previousStyleProperties = new Set();\n      for (const name in styleInfo) {\n        this._previousStyleProperties.add(name);\n      }\n      return this.render(styleInfo);\n    }\n\n    // Remove old properties that no longer exist in styleInfo\n    // We use forEach() instead of for-of so that re don't require down-level\n    // iteration.\n    this._previousStyleProperties!.forEach((name) => {\n      // If the name isn't in styleInfo or it's null/undefined\n      if (styleInfo[name] == null) {\n        this._previousStyleProperties!.delete(name);\n        if (name.includes('-')) {\n          style.removeProperty(name);\n        } else {\n          // Note reset using empty string (vs null) as IE11 does not always\n          // reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          (style as any)[name] = '';\n        }\n      }\n    });\n\n    // Add or update properties\n    for (const name in styleInfo) {\n      const value = styleInfo[name];\n      if (value != null) {\n        this._previousStyleProperties.add(name);\n        if (name.includes('-')) {\n          style.setProperty(name, value);\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          (style as any)[name] = value;\n        }\n      }\n    }\n    return noChange;\n  }\n}\n\n/**\n * A directive that applies CSS properties to an element.\n *\n * `styleMap` can only be used in the `style` attribute and must be the only\n * expression in the attribute. It takes the property names in the\n * {@link StyleInfo styleInfo} object and adds the property values as CSS\n * properties. Property names with dashes (`-`) are assumed to be valid CSS\n * property names and set on the element's style object using `setProperty()`.\n * Names without dashes are assumed to be camelCased JavaScript property names\n * and set on the element's style object using property assignment, allowing the\n * style object to translate JavaScript-style names to CSS property names.\n *\n * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\n * '0'})` sets the `background-color`, `border-top` and `--size` properties.\n *\n * @param styleInfo\n * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}\n */\nexport const styleMap = directive(StyleMapDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {StyleMapDirective};\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--row-count:1;--maxrow-count:;--line-height:var(--bl-font-title-3-line-height);--scroll-height:var(--line-height);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--border-size:1px;--default-scroll-height:calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));--height:max(var(--scroll-height),var(--default-scroll-height));--input-font:var(--bl-font-body-text-2);--border-radius:var(--bl-size-3xs);--border-color:var(--bl-color-border);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.input-wrapper{border:solid var(--border-size) var(--border-color);border-radius:var(--border-radius);padding-top:var(--padding-vertical);display:flex;box-sizing:border-box}textarea{width:100%;align-self:stretch;outline:0;font:var(--input-font);padding:0 calc(var(--padding-horizontal) - var(--border-size));padding-bottom:var(--padding-vertical);margin:0;border:0;border-radius:var(--border-radius);color:var(--bl-color-content-primary);resize:vertical;display:block}:host([size='large']) .wrapper{--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--input-font:var(--bl-font-body-text-3);--line-height:var(--bl-font-title-4-line-height)}textarea:disabled{background-color:var(--bl-color-secondary-background);color:var(--bl-color-content-tertiary);cursor:not-allowed}:host([disabled]) .wrapper{background-color:var(--bl-color-secondary-background)}:host([expand]) textarea{overflow:hidden;resize:none;height:var(--height)}:host([expand][max-rows]) textarea{--maxrow-height:calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));overflow-y:scroll;height:min(var(--height),var(--maxrow-height))}.wrapper:focus-within{--border-color:var(--bl-color-primary)}.dirty.max-len-invalid,.dirty.invalid{--border-color:var(--bl-color-danger)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0;max-width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-content-primary-contrast);pointer-events:initial}:host ::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);background-color:initial;padding:0}.hint{display:none;font:var(--bl-font-body-text-3)}:host([character-counter]) .hint,:host([help-text]) .hint,.dirty.invalid .hint{display:flex;gap:var(--bl-size-3xs)}.hint>*{margin:0;padding:0}.help-text,.invalid-text{flex:1}.counter-text{color:var(--bl-color-content-secondary);margin-left:auto}:where(.max-len-invalid,.dirty.invalid) .hint>.counter-text{color:var(--bl-color-danger)}.dirty.invalid label{color:var(--bl-color-danger)}.invalid-text{display:none;color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:where(.dirty.max-len-invalid,.dirty.invalid) .hint>.invalid-text{display:inline-block}.dirty.invalid .hint>.help-text{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { textAreaValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport style from './bl-textarea.css';\n\nexport type TextareaSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-textarea\n * @summary Baklava Textarea component\n */\n@customElement('bl-textarea')\nexport default class BlTextarea extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  static formControlValidators = textAreaValidators;\n\n  @query('textarea')\n  validationTarget: HTMLTextAreaElement;\n\n  /**\n   * Name of textarea\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Makes textarea a mandatory field\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Disables the textarea\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets expandity\n   */\n  @property({ type: Boolean, reflect: true })\n  expand = false;\n\n  /**\n   * Sets max row when expand is true\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-rows' })\n  maxRows?: number;\n\n  /**\n   * Sets textarea size.\n   */\n  @property({ type: String, reflect: true })\n  size?: TextareaSize = 'medium';\n\n  /**\n   * Sets label of the textarea\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n  labelFixed = false;\n\n  /**\n   * Sets placeholder of the textarea\n   */\n  @property({ reflect: true })\n  placeholder?: string;\n\n  /**\n   * Enables showing character counter.\n   */\n  @property({ type: Boolean, attribute: 'character-counter', reflect: true })\n  characterCounter = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  customInvalidText?: string;\n\n  /**\n   * Sets minimum length of the textarea\n   */\n  @property({ type: Number, reflect: true })\n  minlength?: number;\n\n  /**\n   * Sets max length of textarea\n   */\n  @property({ type: Number, reflect: true })\n  maxlength?: number;\n\n  /**\n   * Sets initial value of the textarea\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Sets textarea visible row count.\n   */\n  @property({ type: Number, reflect: true })\n  rows?: number = 4;\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   * Hints browser to autocomplete this field.\n   */\n  @property({ type: String, reflect: true })\n  autocomplete: string;\n\n  /**\n   * Enables/disables spellcheck feature inside the textarea\n   */\n  @property({ type: String, reflect: true, attribute: 'spellcheck' })\n  spellchecker: 'true' | 'false' = 'false';\n\n  @event('bl-input') private onInput: EventDispatcher<string>;\n\n  @event('bl-change') private onChange: EventDispatcher<string>;\n\n  @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n  @state()\n  private customScrollHeight: string | null = null;\n\n  private inputId = Math.random().toString(36).substring(2);\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.internals.form?.addEventListener('submit', () => {\n      this.reportValidity();\n    });\n  }\n\n  private onError = (): void => {\n    this.onInvalid(this.internals.validity);\n  };\n\n  private inputHandler(event: Event) {\n    this.autoResize();\n\n    const value = (event.target as HTMLTextAreaElement).value;\n    this.value = value;\n    this.onInput(value);\n  }\n\n  private changeHandler(event: Event) {\n    const value = (event.target as HTMLTextAreaElement).value;\n\n    this.dirty = true;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  firstUpdated() {\n    this.setValue(this.value);\n    this.autoResize();\n  }\n\n  protected async updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('rows')) {\n      this.autoResize();\n    }\n\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n\n      await this.validationComplete;\n\n      this.requestUpdate();\n    }\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  valueChangedCallback(value: string): void {\n    this.value = value;\n  }\n\n  validityCallback(): string | void {\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  private autoResize() {\n    if (!this.expand) {\n      return;\n    }\n\n    this.validationTarget.style.height = 'auto';\n    const scrollHeight = this.validationTarget.scrollHeight;\n    this.customScrollHeight = `${scrollHeight}px`;\n    this.validationTarget.style.removeProperty('height');\n  }\n\n  @state() private dirty = false;\n\n  render(): TemplateResult {\n    const maxLengthInvalid = this.internals.validity.tooLong;\n    const invalidMessage = !this.checkValidity()\n      ? html`<p class=\"invalid-text\">${this.validationMessage}</p>`\n      : ``;\n    const helpMessage =\n      this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n\n    const label = this.label ? html`<label for=\"${this.inputId}\">${this.label}</label>` : '';\n    const characterCounterText =\n      this.characterCounter && this.maxlength\n        ? `${this.value.length}/${this.maxlength}`\n        : this.characterCounter\n        ? `${this.value.length}`\n        : '';\n    const characterCounter = this.characterCounter\n      ? html`<p class=\"counter-text\">${characterCounterText}</p>`\n      : '';\n\n    const wrapperClasses = {\n      'wrapper': true,\n      'has-value': this.value !== null && this.value !== '',\n      'dirty': this.dirty,\n      'max-len-invalid': maxLengthInvalid,\n      'invalid': !this.checkValidity(),\n    };\n\n    const styles = {\n      '--row-count': `${this.rows}`,\n      '--maxrow-count': this.maxRows ? `${this.maxRows}` : null,\n      '--scroll-height': this.customScrollHeight,\n    };\n\n    return html`\n      <div style=${styleMap(styles)} class=${classMap(wrapperClasses)}>\n        ${label}\n        <div class=\"input-wrapper\">\n          <textarea\n            id=\"${this.inputId}\"\n            name=\"${ifDefined(this.name)}\"\n            .value=${live(this.value)}\n            ?autofocus=${this.autofocus}\n            autocomplete=\"${ifDefined(this.autocomplete)}\"\n            inputmode=\"${ifDefined(this.inputmode)}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            minlength=\"${ifDefined(this.minlength)}\"\n            rows=\"${ifDefined(this.rows)}\"\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            spellcheck=\"${this.spellchecker}\"\n            @change=${this.changeHandler}\n            @input=${this.inputHandler}\n            @invalid=${this.onError}\n          >\n          </textarea>\n        </div>\n        <div class=\"hint\">${invalidMessage}${helpMessage}${characterCounter}</div>\n      </div>\n    `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-textarea': BlTextarea;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styleMap", "directive", "Directive", "constructor", "partInfo", "super", "type", "PartType", "ATTRIBUTE", "name", "_a", "strings", "length", "Error", "render", "styleInfo", "Object", "keys", "reduce", "style", "prop", "value", "replace", "toLowerCase", "update", "part", "element", "this", "_previousStyleProperties", "Set", "add", "forEach", "delete", "includes", "removeProperty", "setProperty", "noChange", "styles", "i", "bl_textarea_default", "BlTextarea", "FormControlMixin", "s", "bl_textarea_default", "_a", "event", "value", "changedProperties", "scrollHeight", "maxLengthInvalid", "invalidMessage", "y", "helpMessage", "label", "characterCounterText", "characterCounter", "wrapperClasses", "styles", "i", "o", "l", "textAreaValidators", "__decorateClass", "e", "t"]
+}

package/dist/chunk-L3EQLCFT.js

@@ -0,0 +1,2 @@
+import{b as a}from"./chunk-3B64VOWB.js";var r=["valueMissing","typeMismatch","tooLong","tooShort","rangeUnderflow","rangeOverflow","stepMismatch","badInput","customError"],i=r.map(t=>({key:t,isValid(e){return e.validationTarget?!e.validationTarget.validity[t]:!0}})),o={...a,isValid(t){return t.validationTarget&&t.getAttribute("maxlength")?Number(t.getAttribute("maxlength"))>=t.validationTarget.value.length:!0}},n=[...i,o];export{i as a,n as b};
+//# sourceMappingURL=chunk-L3EQLCFT.js.map

package/dist/chunk-L3EQLCFT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utilities/form-control.ts"],
+  "sourcesContent": ["import { maxLengthValidator } from \"@open-wc/form-control\";\n\n\nconst validityStates: Array<keyof ValidityState> = [\n  'valueMissing',\n  'typeMismatch',\n  'tooLong',\n  'tooShort',\n  'rangeUnderflow',\n  'rangeOverflow',\n  'stepMismatch',\n  'badInput',\n  'customError',\n];\n\nexport const innerInputValidators = validityStates.map(key => ({\n  key,\n  isValid(instance: HTMLElement & { validationTarget: HTMLInputElement }) {\n    if (instance.validationTarget) {\n      return !instance.validationTarget.validity[key];\n    }\n    return true;\n  },\n}));\n\nexport const textareaLengthValidator = {\n  ...maxLengthValidator,\n  isValid(instance: HTMLElement & { validationTarget: HTMLTextAreaElement }) {\n    if(instance.validationTarget && instance.getAttribute('maxlength')){\n      return (Number(instance.getAttribute('maxlength')) >= instance.validationTarget.value.length);\n    }\n    return true;\n  }\n};\n\nexport const textAreaValidators = [\n  ...innerInputValidators,\n  textareaLengthValidator\n]\n"],
+  "mappings": "wCAGA,IAAMA,EAA6C,CACjD,eACA,eACA,UACA,WACA,iBACA,gBACA,eACA,WACA,aACF,EAEaC,EAAuBD,EAAe,IAAIE,IAAQ,CAC7D,IAAAA,EACA,QAAQC,EAAgE,CACtE,OAAIA,EAAS,iBACJ,CAACA,EAAS,iBAAiB,SAASD,CAAG,EAEzC,EACT,CACF,EAAE,EAEWE,EAA0B,CACrC,GAAGC,EACH,QAAQF,EAAmE,CACzE,OAAGA,EAAS,kBAAoBA,EAAS,aAAa,WAAW,EACvD,OAAOA,EAAS,aAAa,WAAW,CAAC,GAAKA,EAAS,iBAAiB,MAAM,OAEjF,EACT,CACF,EAEaG,EAAqB,CAChC,GAAGL,EACHG,CACF",
+  "names": ["validityStates", "innerInputValidators", "key", "instance", "textareaLengthValidator", "maxLengthValidator", "textAreaValidators"]
+}

package/dist/{chunk-MCWRM3WC.js → chunk-SU6OEG6P.js}

@@ -1,6 +1,7 @@
-import{a as _}from"./chunk-OLPYXE2P.js";import{a as n}from"./chunk-KPAWUBRO.js";import{a as y}from"./chunk-23UFIOHV.js";import{a as h,b as e,f as u,g as m,h as r,i as g,j as f}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var x=i=>{if(!(!i.noValidate&&!i.reportValidity())){let d=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});i.dispatchEvent(d),d.defaultPrevented||i.submit()}};var T=h`@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-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--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:6px;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-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}: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-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--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-content-primary-contrast);--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-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--border-color:transparent}`,z=T;var t=class extends u{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.active=!1}static get styles(){return[z]}get _isActive(){return this.active}connectedCallback(){super.connectedCallback(),this.form=this.closest("form")}caretTemplate(){return e` <bl-icon class="open" name="arrow_up"></bl-icon>
+import{a as _}from"./chunk-OLPYXE2P.js";import{a as n}from"./chunk-KPAWUBRO.js";import{a as y}from"./chunk-23UFIOHV.js";import{a as h,b as e,f as u,g as m,h as r,i as f,j as g}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var x=i=>{if(!(!i.noValidate&&!i.reportValidity())){let d=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});i.dispatchEvent(d),d.defaultPrevented||i.submit()}};var T=h`@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-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--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:6px;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-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}: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-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--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-content-primary-contrast);--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-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--border-color:transparent}`,z=T;var t=class extends u{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 e` <bl-icon class="open" name="arrow_up"></bl-icon>
       <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:e`<slot></slot>`,l=!!this.href,c=this.icon?e`<bl-icon name=${this.icon}></bl-icon>`:"",b=this.loading?e`<bl-icon class="loading-icon" name="loading"></bl-icon>`:"",p=e`<slot name="icon">${c}</slot> <span class="label">${a}</span>`,O=this.dropdown?this.caretTemplate():"",v=_({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot,active:!l&&this._isActive});return l?e`<a
           class=${v}
+          ?autofocus=${this.autofocus}
           aria-disabled="${n(s)}"
           aria-label="${n(this.label)}"
           href=${n(this.href)}
@@ -9,11 +10,12 @@ import{a as _}from"./chunk-OLPYXE2P.js";import{a as n}from"./chunk-KPAWUBRO.js";
           >${b} ${p}
         </a>`:e`<button
           class=${v}
+          ?autofocus=${this.autofocus}
           aria-disabled="${n(s)}"
           aria-label="${n(this.label)}"
           ?disabled=${s}
           @click="${this._handleClick}"
         >
          ${b} ${p} ${O}
-        </button>`}};o([r({type:String,reflect:!0})],t.prototype,"variant",2),o([r({type:String,reflect:!0})],t.prototype,"kind",2),o([r({type:String,reflect:!0})],t.prototype,"size",2),o([r({type:String})],t.prototype,"label",2),o([r({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),o([r({type:Boolean,reflect:!0})],t.prototype,"loading",2),o([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([r({type:String})],t.prototype,"href",2),o([r({type:String})],t.prototype,"icon",2),o([r({type:String})],t.prototype,"target",2),o([r({type:String})],t.prototype,"type",2),o([r({type:Boolean})],t.prototype,"dropdown",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};
-//# sourceMappingURL=chunk-MCWRM3WC.js.map
+        </button>`}};o([r({type:String,reflect:!0})],t.prototype,"variant",2),o([r({type:String,reflect:!0})],t.prototype,"kind",2),o([r({type:String,reflect:!0})],t.prototype,"size",2),o([r({type:String})],t.prototype,"label",2),o([r({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),o([r({type:Boolean,reflect:!0})],t.prototype,"loading",2),o([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([r({type:String})],t.prototype,"href",2),o([r({type:String})],t.prototype,"icon",2),o([r({type:String})],t.prototype,"target",2),o([r({type:String})],t.prototype,"type",2),o([r({type:Boolean})],t.prototype,"dropdown",2),o([r({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),o([f({})],t.prototype,"active",2),o([g(".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};
+//# sourceMappingURL=chunk-SU6OEG6P.js.map

package/dist/{chunk-MCWRM3WC.js.map → chunk-SU6OEG6P.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../node_modules/@open-wc/form-helpers/src/index.ts", "../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
-  "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-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--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:6px;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-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}: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-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--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-content-primary-contrast);--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-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--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 - Sets the display property of button. Default value is 'inline-block'.\n * @cssproperty --bl-button-justify - Sets the justify-content property of button. Default value is 'center'.\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   * 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 ? html`<bl-icon class=\"loading-icon\" name=\"loading\"></bl-icon>` : '';\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          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          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"],
-  "mappings": "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",
+  "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-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--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:6px;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-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}: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-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--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-content-primary-contrast);--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-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--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 - Sets the display property of button. Default value is 'inline-block'.\n * @cssproperty --bl-button-justify - Sets the justify-content property of button. Default value is 'center'.\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 ? html`<bl-icon class=\"loading-icon\" name=\"loading\"></bl-icon>` : '';\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"],
+  "mappings": "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",
   "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", "e", "t", "i", "event"]
 }

package/dist/{chunk-R6WY2327.js → chunk-TJKKAO25.js}

@@ -1,4 +1,4 @@
-import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as O}from"./chunk-ANYJUR6Q.js";import{a as f}from"./chunk-DJOD4BTL.js";import{a as p}from"./chunk-OLPYXE2P.js";import{a as b}from"./chunk-KPAWUBRO.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as d,b as n,f as c,g as u,h as l,i as r,j as a,k as v}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var T=d`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:flex;flex-direction:column;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:var(--bl-color-primary-background);--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:100;--menu-height:250px;--popover-position:var(--bl-popover-position,fixed)}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-content-passive)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);-webkit-user-select:none;user-select:none}.placeholder{color:var(--placeholder-color);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{flex:1;padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial;right:var(--padding-horizontal)}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`,w=T;var t=class extends f(c){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.multiple=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var s;let i=e.composedPath();(s=i==null?void 0:i.find(z=>z.tagName==="BL-SELECT"))!=null&&s.contains(this)||this.close()};this.focusedOptionIndex=-1}static get styles(){return[w]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let i=new FormData;e.forEach(s=>i.append(this.name,`${s}`)),this.setValue(i)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=_(this._selectInput,this._popover,()=>{O(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[y(),g(8),x({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:i})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${i}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",i=>{this.reportValidity()||i.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=n`<ul class="selected-options">
+import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as O}from"./chunk-ANYJUR6Q.js";import{a as b}from"./chunk-DJOD4BTL.js";import{a as p}from"./chunk-OLPYXE2P.js";import{a as f}from"./chunk-KPAWUBRO.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as d,b as n,f as c,g as u,h as l,i as r,j as a,k as v}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var T=d`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:flex;flex-direction:column;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:var(--bl-color-primary-background);--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:100;--menu-height:250px;--popover-position:var(--bl-popover-position,fixed)}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-content-passive)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);-webkit-user-select:none;user-select:none}.placeholder{color:var(--placeholder-color);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{flex:1;padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial;right:var(--padding-horizontal)}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`,w=T;var t=class extends b(c){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var s;let i=e.composedPath();(s=i==null?void 0:i.find(z=>z.tagName==="BL-SELECT"))!=null&&s.contains(this)||this.close()};this.focusedOptionIndex=-1}static get styles(){return[w]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let i=new FormData;e.forEach(s=>i.append(this.name,`${s}`)),this.setValue(i)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=_(this._selectInput,this._popover,()=>{O(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[y(),g(8),x({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:i})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${i}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",i=>{this.reportValidity()||i.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=n`<ul class="selected-options">
       ${this._selectedOptions.map(s=>n`<li>${s.textContent}</li>`)}
     </ul>`,i=n`<bl-button
         class="remove-all"
@@ -9,6 +9,7 @@ import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as
         @click=${this._onClickRemove}></bl-button>`;return n`<div
       class=${p({"select-input":!0,"has-overflowed-options":this._additionalSelectedOptionCount>0})}
       tabindex="${this.disabled?"-1":0}"
+      ?autofocus=${this.autofocus}
       @click=${this.togglePopover}
     >
       <span class="placeholder">${this.placeholder}</span>
@@ -34,9 +35,9 @@ import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as
     >
       ${s}
       ${this.inputTemplate()}
-      <div class="popover" tabindex="${b(this._isPopoverOpen?void 0:"-1")}" @bl-select-option=${this._handleSelectOptionEvent}>
+      <div class="popover" tabindex="${f(this._isPopoverOpen?void 0:"-1")}" @bl-select-option=${this._handleSelectOptionEvent}>
         <slot></slot>
       </div>
       <div class="hint">${e} ${i}</div>
-    </div> `}handleKeydown(e){this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code)?(this.togglePopover(),e.preventDefault()):this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code)?(this.open(),e.preventDefault()):e.code==="Escape"?(this.close(),e.preventDefault()):this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)&&(e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),e.preventDefault())}togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions.map(e=>({value:e.value,selected:e.selected,text:e.textContent})))}_handleSingleSelect(e){this.value=e.value,this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let i=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(i)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(i=>i.selected).forEach(i=>{i.selected=!1}),this.value=null,this._additionalSelectedOptionCount=0,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2)return;let e=[...this.selectedOptionsItems].findIndex(i=>i.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.value=""),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),this._checkAdditionalItemCount()}registerOption(e){this._connectedOptions.push(e),e.selected&&(this.multiple?(Array.isArray(this.value)||(this.value=[]),this.value=[...this.value,e.value]):this.value=e.value),this.setOptionsSelected(),this.requestUpdate()}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1)}};t.formControlValidators=[m],o([l()],t.prototype,"name",2),o([l()],t.prototype,"value",1),o([l({reflect:!0})],t.prototype,"label",2),o([l({})],t.prototype,"placeholder",2),o([l({type:String,reflect:!0})],t.prototype,"size",2),o([l({type:Boolean,reflect:!0})],t.prototype,"required",2),o([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([l({type:Boolean})],t.prototype,"multiple",2),o([l({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),o([l({type:String,attribute:"help-text"})],t.prototype,"helpText",2),o([l({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),o([r()],t.prototype,"_isPopoverOpen",2),o([r()],t.prototype,"_additionalSelectedOptionCount",2),o([a(".selected-options")],t.prototype,"selectedOptionsContainer",2),o([v(".selected-options li")],t.prototype,"selectedOptionsItems",2),o([a(".popover")],t.prototype,"_popover",2),o([a(".select-input")],t.prototype,"_selectInput",2),o([h("bl-select")],t.prototype,"_onBlSelect",2),o([r()],t.prototype,"_selectedOptions",2),o([r()],t.prototype,"dirty",2),o([a(".select-input")],t.prototype,"validationTarget",2),t=o([u("bl-select")],t);export{t as a};
-//# sourceMappingURL=chunk-R6WY2327.js.map
+    </div> `}handleKeydown(e){this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code)?(this.togglePopover(),e.preventDefault()):this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code)?(this.open(),e.preventDefault()):e.code==="Escape"?(this.close(),e.preventDefault()):this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)&&(e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),e.preventDefault())}togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions.map(e=>({value:e.value,selected:e.selected,text:e.textContent})))}_handleSingleSelect(e){this.value=e.value,this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let i=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(i)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(i=>i.selected).forEach(i=>{i.selected=!1}),this.value=null,this._additionalSelectedOptionCount=0,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(i=>i.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.value=""),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),this._checkAdditionalItemCount()}registerOption(e){this._connectedOptions.push(e),e.selected&&(this.multiple?(Array.isArray(this.value)||(this.value=[]),this.value=[...this.value,e.value]):this.value=e.value),this.setOptionsSelected(),this.requestUpdate()}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1)}};t.formControlValidators=[m],o([l()],t.prototype,"name",2),o([l()],t.prototype,"value",1),o([l({reflect:!0})],t.prototype,"label",2),o([l({})],t.prototype,"placeholder",2),o([l({type:String,reflect:!0})],t.prototype,"size",2),o([l({type:Boolean,reflect:!0})],t.prototype,"required",2),o([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([l({type:Boolean})],t.prototype,"multiple",2),o([l({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),o([l({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),o([l({type:String,attribute:"help-text"})],t.prototype,"helpText",2),o([l({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),o([r()],t.prototype,"_isPopoverOpen",2),o([r()],t.prototype,"_additionalSelectedOptionCount",2),o([a(".selected-options")],t.prototype,"selectedOptionsContainer",2),o([v(".selected-options li")],t.prototype,"selectedOptionsItems",2),o([a(".popover")],t.prototype,"_popover",2),o([a(".select-input")],t.prototype,"_selectInput",2),o([h("bl-select")],t.prototype,"_onBlSelect",2),o([r()],t.prototype,"_selectedOptions",2),o([r()],t.prototype,"dirty",2),o([a(".select-input")],t.prototype,"validationTarget",2),t=o([u("bl-select")],t);export{t as a};
+//# sourceMappingURL=chunk-TJKKAO25.js.map