@trendyol/baklava 3.3.0-beta.1 → 3.3.0-beta.10

package/dist/{chunk-JCODVOWY.js.map → chunk-FTQX7CEW.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/checkbox-group/bl-checkbox-group.css", "../src/components/checkbox-group/bl-checkbox-group.ts", "../src/components/checkbox-group/checkbox/bl-checkbox.css", "../src/components/checkbox-group/checkbox/bl-checkbox.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:flex;flex-direction:row}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-checkbox-direction, column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}.dirty.invalid .options{margin-bottom:var(--bl-size-3xs)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-checkbox-group.css\";\nimport BlCheckbox, { blCheckboxTag } from \"./checkbox/bl-checkbox\";\n\nexport const blCheckboxGroupTag = \"bl-checkbox-group\";\n\nexport const blChangeEventName = \"bl-checkbox-group-change\";\n\n/**\n * @tag bl-checkbox-group\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-checkbox-direction=row] Can be used for showing checkbox options as columns instead of rows. Options are `row` or `column`\n */\n@customElement(blCheckboxGroupTag)\nexport default class BlCheckboxGroup extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static formControlValidators = [requiredValidator];\n\n  @query(\"fieldset\")\n  validationTarget: HTMLElement;\n\n  /**\n   * Sets name of the checkbox group\n   */\n  @property()\n  name: string;\n\n  /**\n   * Sets the checkbox group label\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Set and gets the actual value of the field\n   */\n  @property({ type: Array, reflect: true })\n  value: string[] | null;\n\n  /**\n   * Sets option as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: \"invalid-text\", reflect: true })\n  customInvalidText?: string;\n\n  @state()\n  private dirty = false;\n\n  get options(): BlCheckbox[] {\n    return [...this.querySelectorAll(blCheckboxTag)];\n  }\n\n  get checkedOptions(): string[] {\n    return this.options.filter(opt => opt.checked).map(opt => opt.value);\n  }\n\n  get availableOptions(): BlCheckbox[] {\n    return this.options.filter(option => !option.disabled);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.tabIndex = 0;\n    this.addEventListener(\"focus\", this.handleFocus);\n    this.addEventListener(\"keydown\", this.handleKeyDown);\n\n    this.form?.addEventListener(\"submit\", (e: SubmitEvent) => this.handleSubmit(e));\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"focus\", this.handleFocus);\n    this.removeEventListener(\"keydown\", this.handleKeyDown);\n    this.form?.removeEventListener(\"submit\", (e: SubmitEvent) => this.handleSubmit(e));\n  }\n\n  protected firstUpdated() {\n    if (this.required && !this.value) {\n      this.setValue(null);\n      this.onInvalid(this.internals.validity);\n    }\n  }\n\n  protected async updated(changedProperties: Map<string, unknown>): Promise<void> {\n    if (changedProperties.has(\"value\")) {\n      this.setFormValue();\n      this.checkOptionsValidity();\n\n      if (this.value !== null) this.onChange(this.value);\n\n      await this.validationComplete;\n\n      if (!this.checkValidity()) {\n        this.onInvalid(this.internals.validity);\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  private setFormValue() {\n    if (this.value !== null && this.value.length > 0) {\n      const formData = new FormData();\n\n      this.value?.forEach(checkbox => formData.append(this.name, `${checkbox}`));\n      this.setValue(formData);\n    } else if (this.value?.length === 0) {\n      this.setValue(null);\n    }\n  }\n\n  /**\n   * Fires when checkbox group value changed\n   */\n  @event(\"bl-checkbox-group-change\") private onChange: EventDispatcher<string[]>;\n\n  /**\n   * Fires when checkbox group is invalid\n   */\n  @event(\"bl-checkbox-group-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n  private focusedOptionIndex = 0;\n\n  private handleOptionChecked() {\n    this.dirty = true;\n    this.value = this.checkedOptions;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next option\n    if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous option\n    } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n      this.focusedOptionIndex--;\n\n      // next or previous option with tab / hold shift & tab\n    } else if (event.key === \"Tab\") {\n      event.shiftKey ? this.focusedOptionIndex-- : this.focusedOptionIndex++;\n\n      if (this.focusedOptionIndex === this.availableOptions.length) {\n        this.tabIndex = 0;\n        this.focusedOptionIndex = 0;\n        return;\n      }\n    } else {\n      // Other keys are not our interest here\n      return;\n    }\n\n    // Don't exceed array indexes\n    this.focusedOptionIndex = Math.max(\n      0,\n      Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n    );\n\n    this.availableOptions[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  private handleFocus() {\n    this.availableOptions[this.focusedOptionIndex].focus();\n  }\n\n  private handleSubmit(e: SubmitEvent) {\n    if (!this.reportValidity()) {\n      this.onInvalid(this.internals.validity);\n      e.preventDefault();\n    }\n    this.checkOptionsValidity();\n  }\n\n  checkOptionsValidity() {\n    if (this.checkValidity()) {\n      this.options?.forEach(option =>\n        option?.shadowRoot?.querySelector(\"div\")?.classList.remove(...[\"dirty\", \"invalid\"])\n      );\n    } else if (!this.checkValidity()) {\n      this.options?.forEach(option =>\n        option?.shadowRoot?.querySelector(\"div\")?.classList.add(...[\"dirty\", \"invalid\"])\n      );\n    }\n  }\n\n  validityCallback() {\n    if (this.customInvalidText) {\n      return this.customInvalidText;\n    }\n    return this.validationMessage;\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  render(): TemplateResult {\n    const invalidMessage = !this.checkValidity()\n      ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n          ${this.validationMessage}\n        </p>`\n      : \"\";\n\n    const classes = {\n      \"dirty\": this.dirty,\n      \"invalid\": !this.validity.valid,\n    };\n\n    return html`<div class=${classMap(classes)}>\n      <fieldset\n        role=\"group\"\n        aria-labelledby=\"label\"\n        aria-required=${this.required}\n        tabindex=${this.tabIndex}\n      >\n        <legend id=\"label\">${this.label}</legend>\n        <div class=\"options\" @bl-checkbox-change=${this.handleOptionChecked}>\n          <slot></slot>\n        </div>\n        <div class=\"hint\">${invalidMessage}</div>\n      </fieldset>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxGroupTag]: BlCheckboxGroup;\n  }\n  interface HTMLElementEventMap {\n    [blChangeEventName]: CustomEvent<string[]>;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;vertical-align:middle}:host *{outline:none}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none}.label{overflow-wrap:anywhere}.dirty.invalid label{margin-bottom:var(--bl-size-3xs)}.checkbox-container{position:relative}input[type=\"checkbox\"]{appearance:none;outline:none;margin:0;box-sizing:border-box;border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m)}.check-mark{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m);border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-neutral-full);font-size:var(--bl-font-size-2xs);background-color:var(--bl-color-neutral-full)}.required-suffix{color:var(--bl-color-danger);margin-inline-start:calc(var(--bl-size-2xs) * -1)}.dirty.invalid .check-mark{border-color:var(--bl-color-danger)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.dirty.invalid .hint{display:block}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .invalid-text{display:block}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host(:is([checked], [indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:none}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([disabled]) .check-mark{background-color:var(--bl-color-neutral-lightest)}:host(:not([disabled])) input:focus-visible + .check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport \"../../icon/bl-icon\";\nimport type BlCheckboxGroup from \"../bl-checkbox-group\";\nimport { blCheckboxGroupTag, blChangeEventName } from \"../bl-checkbox-group\";\nimport style from \"./bl-checkbox.css\";\n\nexport const blCheckboxTag = \"bl-checkbox\";\n\n/**\n * @tag bl-checkbox\n * @summary Baklava Checkbox component\n */\n@customElement(blCheckboxTag)\nexport default class BlCheckbox extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: false };\n\n  static formControlValidators = [requiredValidator];\n\n  @query(\"input\")\n  validationTarget: HTMLInputElement;\n\n  /**\n   * Sets the checked state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the checkbox value\n   */\n  @property()\n  value: string;\n\n  /**\n   * Sets checkbox as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: \"invalid-text\", reflect: true })\n  customInvalidText?: string;\n\n  /**\n   * Sets the disabled state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the indeterminate state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Fires whenever user change the value of the checkbox.\n   */\n  @event(\"bl-checkbox-change\") private onChange: EventDispatcher<boolean>;\n\n  /**\n   * Fires when checkbox is focused\n   */\n  @event(\"bl-focus\") private onFocus: EventDispatcher<string>;\n\n  /**\n   * Fires when checkbox is blurred\n   */\n  @event(\"bl-blur\") private onBlur: EventDispatcher<string>;\n\n  /**\n   * Fires when checkbox is invalid\n   */\n  @event(\"bl-checkbox-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n  @query(\"[type=checkbox]\") checkboxElement: HTMLElement;\n\n  @state()\n  private dirty = false;\n\n  protected field: BlCheckboxGroup | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.field = this.closest<BlCheckboxGroup>(blCheckboxGroupTag);\n    this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n\n    this.form?.addEventListener(\"submit\", e => this.handleSubmit(e));\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n    this.form?.removeEventListener(\"submit\", e => this.handleSubmit(e));\n  }\n\n  protected async updated(changedProperties: Map<string, unknown>): Promise<void> {\n    if (changedProperties.has(\"checked\") && this.required) {\n      if (this.checked) {\n        this.setValue(\"on\");\n      } else if (!this.checked) {\n        this.setValue(\"\");\n      }\n\n      await this.validationComplete;\n      if (!this.checkValidity()) {\n        this.onInvalid(this.internals.validity);\n      }\n      this.requestUpdate();\n    }\n  }\n\n  update(changedProperties: Map<string, unknown>) {\n    super.update(changedProperties);\n    if (this.indeterminate && this.checked) {\n      this.checked = false;\n      this.requestUpdate(\"checked\", true);\n    }\n  }\n\n  validityCallback(): string | void {\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  /**\n   * Focuses this option\n   */\n  focus() {\n    this.checkboxElement.tabIndex = 0;\n    this.checkboxElement.focus();\n    this.onFocus(this.value);\n  }\n\n  /**\n   * Blurs from this option\n   */\n  blur() {\n    this.onBlur(this.value);\n    if (!this.field) return;\n    this.checkboxElement.tabIndex = -1;\n  }\n\n  private handleSubmit(e: SubmitEvent) {\n    if (!this.reportValidity()) {\n      this.onInvalid(this.internals.validity);\n      e.preventDefault();\n    }\n  }\n\n  private async handleChange(event: CustomEvent) {\n    const target = event.target as HTMLInputElement;\n\n    this.dirty = true;\n    this.checked = target.checked;\n    this.onChange(target.checked);\n    this.indeterminate = false;\n  }\n\n  private handleFieldValueChange = (event: CustomEvent<Array<string>>) => {\n    this.checked = event.detail.includes(this.value);\n  };\n\n  render(): TemplateResult {\n    let icon = \"\";\n\n    if (this.checked) icon = \"check\";\n    if (this.indeterminate) icon = \"minus\";\n\n    const invalidMessage = !this.checkValidity()\n      ? html`<p class=\"invalid-text\">${this.validationMessage}</p>`\n      : \"\";\n\n    const requiredSuffix = this.required ? html`<span class=\"required-suffix\">*</span>` : \"\";\n\n    const classes = {\n      \"checkbox-container\": true,\n      \"dirty\": this.dirty,\n      \"invalid\": !this.checkValidity(),\n    };\n\n    return html`<div class=${classMap(classes)}>\n      <label>\n        <input\n          type=\"checkbox\"\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-readonly=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          @change=${this.handleChange}\n          value=${ifDefined(this.value)}\n          @blur=${this.blur}\n        />\n        <div class=\"check-mark\">${icon ? html`<bl-icon name=\"${icon}\"></bl-icon>` : null}</div>\n        <slot class=\"label\"></slot>${requiredSuffix}\n      </label>\n      <div class=\"hint\">${invalidMessage}</div>\n    </div> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxTag]: BlCheckbox;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:flex;flex-direction:row}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-checkbox-direction, column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}.dirty.invalid .options{margin-bottom:var(--bl-size-3xs)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-checkbox-group.css\";\nimport BlCheckbox, { blCheckboxTag } from \"./checkbox/bl-checkbox\";\n\nexport const blCheckboxGroupTag = \"bl-checkbox-group\";\n\nexport const blChangeEventName = \"bl-checkbox-group-change\";\n\n/**\n * @tag bl-checkbox-group\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-checkbox-direction=row] Can be used for showing checkbox options as columns instead of rows. Options are `row` or `column`\n */\n@customElement(blCheckboxGroupTag)\nexport default class BlCheckboxGroup extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static formControlValidators = [requiredValidator];\n\n  @query(\"fieldset\")\n  validationTarget: HTMLElement;\n\n  /**\n   * Sets name of the checkbox group\n   */\n  @property()\n  name: string;\n\n  /**\n   * Sets the checkbox group label\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Set and gets the actual value of the field\n   */\n  @property({ type: Array, reflect: true })\n  value: string[] | null;\n\n  /**\n   * Sets option as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: \"invalid-text\", reflect: true })\n  customInvalidText?: string;\n\n  @state()\n  private dirty = false;\n\n  get options(): BlCheckbox[] {\n    return [...this.querySelectorAll(blCheckboxTag)];\n  }\n\n  get checkedOptions(): string[] {\n    return this.options.filter(opt => opt.checked).map(opt => opt.value);\n  }\n\n  get availableOptions(): BlCheckbox[] {\n    return this.options.filter(option => !option.disabled);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.tabIndex = 0;\n    this.addEventListener(\"focus\", this.handleFocus);\n    this.addEventListener(\"keydown\", this.handleKeyDown);\n\n    this.form?.addEventListener(\"submit\", (e: SubmitEvent) => this.handleSubmit(e));\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"focus\", this.handleFocus);\n    this.removeEventListener(\"keydown\", this.handleKeyDown);\n    this.form?.removeEventListener(\"submit\", (e: SubmitEvent) => this.handleSubmit(e));\n  }\n\n  protected firstUpdated() {\n    if (this.required && !this.value) {\n      this.setValue(null);\n      this.onInvalid(this.internals.validity);\n    }\n  }\n\n  protected async updated(changedProperties: Map<string, unknown>): Promise<void> {\n    if (changedProperties.has(\"value\")) {\n      this.setFormValue();\n      this.checkOptionsValidity();\n\n      if (this.value !== null) this.onChange(this.value);\n\n      await this.validationComplete;\n\n      if (!this.checkValidity()) {\n        this.onInvalid(this.internals.validity);\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  private setFormValue() {\n    if (this.value !== null && this.value.length > 0) {\n      const formData = new FormData();\n\n      this.value?.forEach(checkbox => formData.append(this.name, `${checkbox}`));\n      this.setValue(formData);\n    } else if (this.value?.length === 0) {\n      this.setValue(null);\n    }\n  }\n\n  /**\n   * Fires when checkbox group value changed\n   */\n  @event(\"bl-checkbox-group-change\") private onChange: EventDispatcher<string[]>;\n\n  /**\n   * Fires when checkbox group is invalid\n   */\n  @event(\"bl-checkbox-group-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n  private focusedOptionIndex = 0;\n\n  private handleOptionChecked() {\n    this.dirty = true;\n    this.value = this.checkedOptions;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next option\n    if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous option\n    } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n      this.focusedOptionIndex--;\n\n      // next or previous option with tab / hold shift & tab\n    } else if (event.key === \"Tab\") {\n      event.shiftKey ? this.focusedOptionIndex-- : this.focusedOptionIndex++;\n\n      if (this.focusedOptionIndex === this.availableOptions.length) {\n        this.tabIndex = 0;\n        this.focusedOptionIndex = 0;\n        return;\n      }\n    } else {\n      // Other keys are not our interest here\n      return;\n    }\n\n    // Don't exceed array indexes\n    this.focusedOptionIndex = Math.max(\n      0,\n      Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n    );\n\n    this.availableOptions[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  private handleFocus() {\n    this.availableOptions[this.focusedOptionIndex].focus();\n  }\n\n  private handleSubmit(e: SubmitEvent) {\n    if (!this.reportValidity()) {\n      this.onInvalid(this.internals.validity);\n      e.preventDefault();\n    }\n    this.checkOptionsValidity();\n  }\n\n  checkOptionsValidity() {\n    if (this.checkValidity()) {\n      this.options?.forEach(option =>\n        option?.shadowRoot?.querySelector(\"div\")?.classList.remove(...[\"dirty\", \"invalid\"])\n      );\n    } else if (!this.checkValidity()) {\n      this.options?.forEach(option =>\n        option?.shadowRoot?.querySelector(\"div\")?.classList.add(...[\"dirty\", \"invalid\"])\n      );\n    }\n  }\n\n  validityCallback() {\n    if (this.customInvalidText) {\n      return this.customInvalidText;\n    }\n    return this.validationMessage;\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  render(): TemplateResult {\n    const invalidMessage = !this.checkValidity()\n      ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n          ${this.validationMessage}\n        </p>`\n      : \"\";\n\n    const classes = {\n      \"dirty\": this.dirty,\n      \"invalid\": !this.validity.valid,\n    };\n\n    return html`<div class=${classMap(classes)}>\n      <fieldset\n        role=\"group\"\n        aria-labelledby=\"label\"\n        aria-required=${this.required}\n        tabindex=${this.tabIndex}\n      >\n        <legend id=\"label\">${this.label}</legend>\n        <div class=\"options\" @bl-checkbox-change=${this.handleOptionChecked}>\n          <slot></slot>\n        </div>\n        <div class=\"hint\">${invalidMessage}</div>\n      </fieldset>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxGroupTag]: BlCheckboxGroup;\n  }\n  interface HTMLElementEventMap {\n    [blChangeEventName]: CustomEvent<string[]>;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;vertical-align:middle}:host *{outline:none}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none}.label{overflow-wrap:anywhere}.dirty.invalid label{margin-bottom:var(--bl-size-3xs)}.checkbox-container{position:relative}input[type=\"checkbox\"]{appearance:none;outline:none;margin:0;box-sizing:border-box;border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m)}.check-mark{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m);border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-neutral-full);font-size:var(--bl-font-size-2xs);background-color:var(--bl-color-neutral-full)}.required-suffix{color:var(--bl-color-danger);margin-inline-start:calc(var(--bl-size-2xs) * -1)}.dirty.invalid .check-mark{border-color:var(--bl-color-danger)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.dirty.invalid .hint{display:block}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .invalid-text{display:block}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host(:is([checked], [indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:none}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([disabled]) .check-mark{background-color:var(--bl-color-neutral-lightest)}:host(:not([disabled])) input:focus-visible + .check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport \"../../icon/bl-icon\";\nimport type BlCheckboxGroup from \"../bl-checkbox-group\";\nimport { blCheckboxGroupTag, blChangeEventName } from \"../bl-checkbox-group\";\nimport style from \"./bl-checkbox.css\";\n\nexport const blCheckboxTag = \"bl-checkbox\";\n\n/**\n * @tag bl-checkbox\n * @summary Baklava Checkbox component\n */\n@customElement(blCheckboxTag)\nexport default class BlCheckbox extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: false };\n\n  static formControlValidators = [requiredValidator];\n\n  @query(\"input\")\n  validationTarget: HTMLInputElement;\n\n  /**\n   * Sets the checked state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the checkbox value\n   */\n  @property()\n  value: string;\n\n  /**\n   * Sets checkbox as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: \"invalid-text\", reflect: true })\n  customInvalidText?: string;\n\n  /**\n   * Sets the disabled state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the indeterminate state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Fires whenever user change the value of the checkbox.\n   */\n  @event(\"bl-checkbox-change\") private onChange: EventDispatcher<boolean>;\n\n  /**\n   * Fires when checkbox is focused\n   */\n  @event(\"bl-focus\") private onFocus: EventDispatcher<string>;\n\n  /**\n   * Fires when checkbox is blurred\n   */\n  @event(\"bl-blur\") private onBlur: EventDispatcher<string>;\n\n  /**\n   * Fires when checkbox is invalid\n   */\n  @event(\"bl-checkbox-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n  @query(\"[type=checkbox]\") checkboxElement: HTMLElement;\n\n  @state()\n  private dirty = false;\n\n  protected field: BlCheckboxGroup | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.field = this.closest<BlCheckboxGroup>(blCheckboxGroupTag);\n    this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n\n    this.form?.addEventListener(\"submit\", e => this.handleSubmit(e));\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n    this.form?.removeEventListener(\"submit\", e => this.handleSubmit(e));\n  }\n\n  protected async updated(changedProperties: Map<string, unknown>): Promise<void> {\n    if (changedProperties.has(\"checked\") && this.required) {\n      if (this.checked) {\n        this.setValue(\"on\");\n      } else if (!this.checked) {\n        this.setValue(\"\");\n      }\n\n      await this.validationComplete;\n      if (!this.checkValidity()) {\n        this.onInvalid(this.internals.validity);\n      }\n      this.requestUpdate();\n    }\n  }\n\n  update(changedProperties: Map<string, unknown>) {\n    super.update(changedProperties);\n    if (this.indeterminate && this.checked) {\n      this.checked = false;\n      this.requestUpdate(\"checked\", true);\n    }\n  }\n\n  validityCallback(): string | void {\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  /**\n   * Focuses this option\n   */\n  focus() {\n    this.checkboxElement.tabIndex = 0;\n    this.checkboxElement.focus();\n    this.onFocus(this.value);\n  }\n\n  /**\n   * Blurs from this option\n   */\n  blur() {\n    this.onBlur(this.value);\n    if (!this.field) return;\n    this.checkboxElement.tabIndex = -1;\n  }\n\n  private handleSubmit(e: SubmitEvent) {\n    if (!this.reportValidity()) {\n      this.onInvalid(this.internals.validity);\n      e.preventDefault();\n    }\n  }\n\n  private async handleChange(event: CustomEvent) {\n    const target = event.target as HTMLInputElement;\n\n    this.dirty = true;\n    this.checked = target.checked;\n    this.onChange(target.checked);\n    this.indeterminate = false;\n  }\n\n  private handleFieldValueChange = (event: CustomEvent<Array<string>>) => {\n    this.checked = event.detail.includes(this.value);\n  };\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === \"Space\") {\n      this.checked = !this.checked;\n      this.onChange(this.checked);\n      event.preventDefault();\n    }\n  }\n\n  render(): TemplateResult {\n    let icon = \"\";\n\n    if (this.checked) icon = \"check\";\n    if (this.indeterminate) icon = \"minus\";\n\n    const invalidMessage = !this.checkValidity()\n      ? html`<p class=\"invalid-text\">${this.validationMessage}</p>`\n      : \"\";\n\n    const requiredSuffix = this.required ? html`<span class=\"required-suffix\">*</span>` : \"\";\n\n    const classes = {\n      \"checkbox-container\": true,\n      \"dirty\": this.dirty,\n      \"invalid\": !this.checkValidity(),\n    };\n\n    return html`<div class=${classMap(classes)}>\n      <label>\n        <input\n          type=\"checkbox\"\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-readonly=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeyDown}\n          value=${ifDefined(this.value)}\n          @blur=${this.blur}\n        />\n        <div class=\"check-mark\">${icon ? html`<bl-icon name=\"${icon}\"></bl-icon>` : null}</div>\n        <slot class=\"label\"></slot>${requiredSuffix}\n      </label>\n      <div class=\"hint\">${invalidMessage}</div>\n    </div> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxTag]: BlCheckbox;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["styles", "i", "bl_checkbox_group_default", "blCheckboxGroupTag", "blChangeEventName", "BlCheckboxGroup", "FormControlMixin", "s", "bl_checkbox_group_default", "blCheckboxTag", "opt", "option", "_a", "e", "changedProperties", "_b", "formData", "checkbox", "event", "invalidMessage", "x", "classes", "o", "requiredValidator", "__decorateClass", "i", "t", "styles", "i", "bl_checkbox_default", "blCheckboxTag", "BlCheckbox", "FormControlMixin", "s", "event", "bl_checkbox_default", "_a", "_b", "blCheckboxGroupTag", "blChangeEventName", "e", "changedProperties", "target", "icon", "invalidMessage", "x", "requiredSuffix", "classes", "o", "l", "requiredValidator", "__decorateClass", "i", "t"]
 }

package/dist/{chunk-2U3PTJEA.js → chunk-GMVJABPT.js}

@@ -1,7 +1,8 @@
 import{a as u,b as a,c as s,e as p}from"./chunk-5MOOXA2X.js";import{a as i,b as l,f as o}from"./chunk-4OT5AMS5.js";import{d as r}from"./chunk-IZ2LK5GK.js";var m=i`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-border-radius-s);position:relative;background-color:var(--bl-color-neutral-lightest);height:var(--height);border-radius:var(--radius);width:100%;transform:scaleX(var(--bl-text-x-direction))}.progress-indicator::before{content:"";position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius);transition:width ease var(--bl-progress-indicator-transition-duration, 0.2s)}:host([size="small"]) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-border-radius-xs)}:host([size="large"]) .progress-indicator{--height:var(--bl-size-xs);--radius:var(--bl-border-radius-m)}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`,d=m;var e=class extends o{constructor(){super(...arguments);this.size="medium";this.failed=!1;this._max=100;this._value=0}static get styles(){return d}get max(){return this._max}set max(t){this._max=t,this.updateCssVariable()}get value(){return this._value}set value(t){this._value=t,this.updateCssVariable()}async updateCssVariable(){await this.updateComplete,this.wrapper.style.setProperty("--value",`${this.value}`),this.wrapper.style.setProperty("--max",`${this.max}`)}render(){return l`<div
       class="progress-indicator"
       role="progressbar"
+      aria-label="progress indicator"
       aria-valuemax="${this._max}"
       aria-valuenow="${this._value}"
     ></div>`}};r([p(".progress-indicator")],e.prototype,"wrapper",2),r([a({type:String,reflect:!0})],e.prototype,"size",2),r([a({type:Boolean,reflect:!0})],e.prototype,"failed",2),r([a({type:Number})],e.prototype,"max",1),r([a({type:Number})],e.prototype,"value",1),r([s()],e.prototype,"_max",2),r([s()],e.prototype,"_value",2),e=r([u("bl-progress-indicator")],e);export{e as a};
-//# sourceMappingURL=chunk-2U3PTJEA.js.map
+//# sourceMappingURL=chunk-GMVJABPT.js.map

package/dist/{chunk-2U3PTJEA.js.map → chunk-GMVJABPT.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/progress-indicator/bl-progress-indicator.css", "../src/components/progress-indicator/bl-progress-indicator.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-border-radius-s);position:relative;background-color:var(--bl-color-neutral-lightest);height:var(--height);border-radius:var(--radius);width:100%;transform:scaleX(var(--bl-text-x-direction))}.progress-indicator::before{content:\"\";position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius);transition:width ease var(--bl-progress-indicator-transition-duration, 0.2s)}:host([size=\"small\"]) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-border-radius-xs)}:host([size=\"large\"]) .progress-indicator{--height:var(--bl-size-xs);--radius:var(--bl-border-radius-m)}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport style from \"./bl-progress-indicator.css\";\n\nexport type ProgressIndicatorSize = \"small\" | \"medium\" | \"large\";\n\n/**\n * @tag bl-progress-indicator\n * @summary Baklava Progress Indicator component\n *\n * @cssproperty [--bl-progress-indicator-transition-duration=.2s] Duration of the transition of progress bar\n * @property {max} [max=100]\n * @property {number} [value=0]\n */\n\n@customElement(\"bl-progress-indicator\")\nexport default class BlProgressIndicator extends LitElement {\n  static get styles(): CSSResultGroup {\n    return style;\n  }\n\n  @query(\".progress-indicator\") private wrapper: HTMLElement;\n\n  /**\n   * Sets the size\n   */\n  @property({ type: String, reflect: true })\n  size: ProgressIndicatorSize = \"medium\";\n\n  /**\n   * Sets the status\n   */\n  @property({ type: Boolean, reflect: true })\n  failed = false;\n\n  /**\n   * Sets the max\n   */\n  @property({ type: Number })\n  get max() {\n    return this._max;\n  }\n  set max(max: number) {\n    this._max = max;\n    this.updateCssVariable();\n  }\n\n  /**\n   * Sets the value\n   */\n  @property({ type: Number })\n  get value() {\n    return this._value;\n  }\n  set value(value: number) {\n    this._value = value;\n    this.updateCssVariable();\n  }\n\n  @state() private _max = 100;\n  @state() private _value = 0;\n\n  async updateCssVariable() {\n    await this.updateComplete;\n    this.wrapper.style.setProperty(\"--value\", `${this.value}`);\n    this.wrapper.style.setProperty(\"--max\", `${this.max}`);\n  }\n\n  render(): TemplateResult {\n    return html`<div\n      class=\"progress-indicator\"\n      role=\"progressbar\"\n      aria-valuemax=\"${this._max}\"\n      aria-valuenow=\"${this._value}\"\n    ></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-progress-indicator\": BlProgressIndicator;\n  }\n}\n"],
-  "mappings": "2JACO,IAAMA,EAAS,w1BACfC,EAAQD,ECcf,IAAqBE,EAArB,cAAiDC,CAAW,CAA5D,kCAWE,UAA8B,SAM9B,YAAS,GA0BA,KAAQ,KAAO,IACf,KAAQ,OAAS,EA3C1B,WAAW,QAAyB,CAClC,OAAOC,CACT,CAoBA,IAAI,KAAM,CACR,OAAO,KAAK,IACd,CACA,IAAI,IAAIC,EAAa,CACnB,KAAK,KAAOA,EACZ,KAAK,kBAAkB,CACzB,CAMA,IAAI,OAAQ,CACV,OAAO,KAAK,MACd,CACA,IAAI,MAAMC,EAAe,CACvB,KAAK,OAASA,EACd,KAAK,kBAAkB,CACzB,CAKA,MAAM,mBAAoB,CACxB,MAAM,KAAK,eACX,KAAK,QAAQ,MAAM,YAAY,UAAW,GAAG,KAAK,OAAO,EACzD,KAAK,QAAQ,MAAM,YAAY,QAAS,GAAG,KAAK,KAAK,CACvD,CAEA,QAAyB,CACvB,OAAOC;AAAA;AAAA;AAAA,uBAGY,KAAK;AAAA,uBACL,KAAK;AAAA,YAE1B,CACF,EAvDwCC,EAAA,CAArCC,EAAM,qBAAqB,GALTP,EAKmB,uBAMtCM,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAVtBR,EAWnB,oBAMAM,EAAA,CADCE,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhBvBR,EAiBnB,sBAMIM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAtBPR,EAuBf,mBAYAM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAlCPR,EAmCf,qBAQaM,EAAA,CAAhBG,EAAM,GA3CYT,EA2CF,oBACAM,EAAA,CAAhBG,EAAM,GA5CYT,EA4CF,sBA5CEA,EAArBM,EAAA,CADCE,EAAc,uBAAuB,GACjBR",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-border-radius-s);position:relative;background-color:var(--bl-color-neutral-lightest);height:var(--height);border-radius:var(--radius);width:100%;transform:scaleX(var(--bl-text-x-direction))}.progress-indicator::before{content:\"\";position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius);transition:width ease var(--bl-progress-indicator-transition-duration, 0.2s)}:host([size=\"small\"]) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-border-radius-xs)}:host([size=\"large\"]) .progress-indicator{--height:var(--bl-size-xs);--radius:var(--bl-border-radius-m)}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport style from \"./bl-progress-indicator.css\";\n\nexport type ProgressIndicatorSize = \"small\" | \"medium\" | \"large\";\n\n/**\n * @tag bl-progress-indicator\n * @summary Baklava Progress Indicator component\n *\n * @cssproperty [--bl-progress-indicator-transition-duration=.2s] Duration of the transition of progress bar\n * @property {max} [max=100]\n * @property {number} [value=0]\n */\n\n@customElement(\"bl-progress-indicator\")\nexport default class BlProgressIndicator extends LitElement {\n  static get styles(): CSSResultGroup {\n    return style;\n  }\n\n  @query(\".progress-indicator\") private wrapper: HTMLElement;\n\n  /**\n   * Sets the size\n   */\n  @property({ type: String, reflect: true })\n  size: ProgressIndicatorSize = \"medium\";\n\n  /**\n   * Sets the status\n   */\n  @property({ type: Boolean, reflect: true })\n  failed = false;\n\n  /**\n   * Sets the max\n   */\n  @property({ type: Number })\n  get max() {\n    return this._max;\n  }\n  set max(max: number) {\n    this._max = max;\n    this.updateCssVariable();\n  }\n\n  /**\n   * Sets the value\n   */\n  @property({ type: Number })\n  get value() {\n    return this._value;\n  }\n  set value(value: number) {\n    this._value = value;\n    this.updateCssVariable();\n  }\n\n  @state() private _max = 100;\n  @state() private _value = 0;\n\n  async updateCssVariable() {\n    await this.updateComplete;\n    this.wrapper.style.setProperty(\"--value\", `${this.value}`);\n    this.wrapper.style.setProperty(\"--max\", `${this.max}`);\n  }\n\n  render(): TemplateResult {\n    return html`<div\n      class=\"progress-indicator\"\n      role=\"progressbar\"\n      aria-label=\"progress indicator\"\n      aria-valuemax=\"${this._max}\"\n      aria-valuenow=\"${this._value}\"\n    ></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-progress-indicator\": BlProgressIndicator;\n  }\n}\n"],
+  "mappings": "2JACO,IAAMA,EAAS,w1BACfC,EAAQD,ECcf,IAAqBE,EAArB,cAAiDC,CAAW,CAA5D,kCAWE,UAA8B,SAM9B,YAAS,GA0BA,KAAQ,KAAO,IACf,KAAQ,OAAS,EA3C1B,WAAW,QAAyB,CAClC,OAAOC,CACT,CAoBA,IAAI,KAAM,CACR,OAAO,KAAK,IACd,CACA,IAAI,IAAIC,EAAa,CACnB,KAAK,KAAOA,EACZ,KAAK,kBAAkB,CACzB,CAMA,IAAI,OAAQ,CACV,OAAO,KAAK,MACd,CACA,IAAI,MAAMC,EAAe,CACvB,KAAK,OAASA,EACd,KAAK,kBAAkB,CACzB,CAKA,MAAM,mBAAoB,CACxB,MAAM,KAAK,eACX,KAAK,QAAQ,MAAM,YAAY,UAAW,GAAG,KAAK,OAAO,EACzD,KAAK,QAAQ,MAAM,YAAY,QAAS,GAAG,KAAK,KAAK,CACvD,CAEA,QAAyB,CACvB,OAAOC;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,uBACL,KAAK;AAAA,YAE1B,CACF,EAxDwCC,EAAA,CAArCC,EAAM,qBAAqB,GALTP,EAKmB,uBAMtCM,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAVtBR,EAWnB,oBAMAM,EAAA,CADCE,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhBvBR,EAiBnB,sBAMIM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAtBPR,EAuBf,mBAYAM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAlCPR,EAmCf,qBAQaM,EAAA,CAAhBG,EAAM,GA3CYT,EA2CF,oBACAM,EAAA,CAAhBG,EAAM,GA5CYT,EA4CF,sBA5CEA,EAArBM,EAAA,CADCE,EAAc,uBAAuB,GACjBR",
   "names": ["styles", "bl_progress_indicator_default", "BlProgressIndicator", "s", "bl_progress_indicator_default", "max", "value", "x", "__decorateClass", "i", "e", "t"]
 }

package/dist/{chunk-7NZ7DYVG.js → chunk-GXDVWGFU.js}

@@ -5,6 +5,7 @@ import{a as x}from"./chunk-6LT7O7T2.js";import{a as h}from"./chunk-GRL4DWKG.js";
         </footer>`:""}renderContainer(){let e=this.caption?a`<h2 id="dialog-caption">${this.caption}</h2>`:"",i=this.critical?null:a`<bl-button
           @click="${()=>this.closeDialog("close-button")}"
           icon="close"
+          label="close"
           variant="tertiary"
           kind="neutral"
           size="small"
@@ -28,4 +29,4 @@ import{a as x}from"./chunk-6LT7O7T2.js";import{a as h}from"./chunk-GRL4DWKG.js";
             ${this.renderContainer()}
           </dialog>
         `}};o([d({type:Boolean,reflect:!0,hasChanged(b,v){return b===!1&&v===void 0?!1:b!==v}})],t.prototype,"open",2),o([d({type:String})],t.prototype,"caption",2),o([d({type:Boolean,reflect:!0})],t.prototype,"critical",2),o([d({type:Boolean,reflect:!0})],t.prototype,"polyfilled",2),o([c(".dialog")],t.prototype,"dialog",2),o([c("footer")],t.prototype,"footer",2),o([c(".container")],t.prototype,"container",2),o([c(".content")],t.prototype,"content",2),o([h("bl-dialog-open")],t.prototype,"onOpen",2),o([h("bl-dialog-request-close")],t.prototype,"onRequestClose",2),o([h("bl-dialog-close")],t.prototype,"onClose",2),t=o([y("bl-dialog")],t);export{t as a};
-//# sourceMappingURL=chunk-7NZ7DYVG.js.map
+//# sourceMappingURL=chunk-GXDVWGFU.js.map

package/dist/{chunk-7NZ7DYVG.js.map → chunk-GXDVWGFU.js.map}

@@ -1,7 +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`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);width:var(--bl-dialog-width, auto);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;inset-inline-start:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bl-dialog-caption-line-clamp, 1);margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport style from \"./bl-dialog.css\";\n\ntype DialogElement = {\n  showModal: () => void;\n  close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n *\n * @cssproperty [--bl-dialog-width=auto] Sets the width of the dialog content\n * @cssproperty [--bl-dialog-caption-line-clamp=1] Sets the line clamp of the caption\n */\n@customElement(\"bl-dialog\")\nexport default class BlDialog extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets dialog open-close status\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    hasChanged(newVal: boolean, oldVal: boolean | undefined) {\n      if (newVal === false && oldVal === undefined) {\n        // Assume that the initial value is false\n        return false;\n      }\n      return newVal !== oldVal;\n    },\n  })\n  open = false;\n\n  /**\n   * Sets the dialog title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  /**\n   * Determines if the dialog is critical, which disables closing through keyboard, backdrop, and close button interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  critical = false;\n\n  /**\n   * Determines if dialog currently uses polyfilled version instead of native HTML Dialog. By\n   * default, it uses native Dialog if the browser supports it, otherwise polyfills. You can force\n   * using polyfill by setting this to true in some cases like to show some content on top of dialog\n   * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some\n   * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.\n   *\n   * As of the current implementation, you can render above the dialog HTML element using the Popover API. However,\n   * it will block any actions on the Popover element. This issue was encountered during the development of the `bl-notification` component.\n   * As a result, we decided to enable the polyfill for the `bl-dialog` component by default. If you prefer to use the native dialog, you can set\n   * this property to false. Please note, doing so will cause notifications to render under the dialog backdrop.\n   * For more information, refer to the comment linked below:\n   *\n   * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413\n   */\n  @property({ type: Boolean, reflect: true })\n  polyfilled = true;\n\n  @query(\".dialog\")\n  private dialog: HTMLDialogElement & DialogElement;\n\n  @query(\"footer\")\n  private footer: HTMLElement;\n\n  @query(\".container\")\n  private container: HTMLElement;\n\n  @query(\".content\")\n  private content: HTMLElement;\n\n  /**\n   * Fires when the dialog is opened\n   */\n  @event(\"bl-dialog-open\") private onOpen: EventDispatcher<object>;\n\n  /**\n   * Fires before the dialog is closed with internal actions like clicking close button,\n   * pressing Escape key or clicking backdrop. Can be prevented by calling `event.preventDefault()`\n   */\n  @event(\"bl-dialog-request-close\") private onRequestClose: EventDispatcher<{\n    source: \"close-button\" | \"keyboard\" | \"backdrop\";\n  }>;\n\n  /**\n   * Fires when the dialog is closed\n   */\n  @event(\"bl-dialog-close\") private onClose: EventDispatcher<object>;\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"open\") || changedProperties.has(\"polyfilled\")) {\n      this.toggleDialogHandler();\n    }\n  }\n\n  private get _hasFooter() {\n    return [...this.childNodes].some(node => node.nodeName === \"BL-BUTTON\");\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      this.dialog?.showModal?.();\n      this.onOpen({ isOpen: true });\n      document.body.style.overflow = \"hidden\";\n      this.toggleFooterShadow();\n      window?.addEventListener(\"keydown\", event => this.onKeydown(event));\n      window?.addEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.addEventListener(\"scroll\", this.toggleFooterShadow);\n    } else {\n      this.dialog?.close?.();\n      this.onClose({ isOpen: false }, { bubbles: false });\n      document.body.style.overflow = \"auto\";\n      window?.removeEventListener(\"keydown\", this.onKeydown);\n      window?.removeEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.removeEventListener(\"scroll\", this.toggleFooterShadow);\n    }\n  }\n\n  private closeDialog(source: \"close-button\" | \"keyboard\" | \"backdrop\") {\n    const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });\n\n    if (requestCloseEvent.defaultPrevented) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  private clickOutsideHandler = (event: MouseEvent) => {\n    if (this.critical) return;\n\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath.includes(this.container)) {\n      this.closeDialog(\"backdrop\");\n    }\n  };\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === \"Escape\" && this.open && !this.critical) {\n      event.preventDefault();\n      this.closeDialog(\"keyboard\");\n    }\n  };\n\n  private toggleFooterShadow = () => {\n    const scrollTop = this.content?.scrollTop;\n    const scrollHeight = this.content?.scrollHeight;\n    const clientHeight = this.content?.clientHeight;\n\n    if (scrollTop + clientHeight >= scrollHeight) {\n      this.footer?.classList?.remove(\"shadow\");\n    } else {\n      this.footer?.classList?.add(\"shadow\");\n    }\n  };\n\n  private renderFooter() {\n    return this._hasFooter\n      ? html`<footer>\n          <slot name=\"primary-action\"></slot>\n          <slot name=\"secondary-action\"></slot>\n          <slot name=\"tertiary-action\"></slot>\n        </footer>`\n      : \"\";\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : \"\";\n    const closeButton = !this.critical\n      ? html`<bl-button\n          @click=\"${() => this.closeDialog(\"close-button\")}\"\n          icon=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          size=\"small\"\n        ></bl-button>`\n      : null;\n\n    const classes = {\n      \"container\": true,\n      \"has-footer\": this._hasFooter,\n    };\n\n    return html` <div class=\"${classMap(classes)}\">\n      <header>${title} ${closeButton}</header>\n      <section class=\"content\"><slot></slot></section>\n      ${this.renderFooter()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    return this.polyfilled || !window.HTMLDialogElement\n      ? html`<div\n          class=\"dialog-polyfill\"\n          role=\"dialog\"\n          aria-labelledby=\"dialog-caption\"\n          @click=${this.clickOutsideHandler}\n        >\n          ${this.renderContainer()}\n        </div>`\n      : html`\n          <dialog\n            class=\"dialog\"\n            aria-labelledby=\"dialog-caption\"\n            @click=${this.clickOutsideHandler}\n          >\n            ${this.renderContainer()}\n          </dialog>\n        `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-dialog\": BlDialog;\n  }\n}\n"],
-  "mappings": "oOACO,IAAMA,EAASC,61DACfC,EAAQF,ECkBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCAmBE,UAAO,GAYP,cAAW,GAkBX,gBAAa,GAuEb,KAAQ,oBAAuBC,GAAsB,CACnD,GAAI,KAAK,SAAU,OAEDA,EAAM,aAAa,EAEtB,SAAS,KAAK,SAAS,GACpC,KAAK,YAAY,UAAU,CAE/B,EAEA,KAAQ,UAAaA,GAA+B,CAC9CA,EAAM,OAAS,UAAY,KAAK,MAAQ,CAAC,KAAK,WAChDA,EAAM,eAAe,EACrB,KAAK,YAAY,UAAU,EAE/B,EAEA,KAAQ,mBAAqB,IAAM,CA7JrC,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EA8JI,IAAMC,GAAYP,EAAA,KAAK,UAAL,YAAAA,EAAc,UAC1BQ,GAAeP,EAAA,KAAK,UAAL,YAAAA,EAAc,aAC7BQ,GAAeP,EAAA,KAAK,UAAL,YAAAA,EAAc,aAE/BK,EAAYE,GAAgBD,GAC9BJ,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,YAAb,MAAAC,EAAwB,OAAO,WAE/BE,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,YAAb,MAAAC,EAAwB,IAAI,SAEhC,EAlJA,WAAW,QAAyB,CAClC,MAAO,CAACI,CAAK,CACf,CA8EA,QAAQC,EAAyC,EAC3CA,EAAkB,IAAI,MAAM,GAAKA,EAAkB,IAAI,YAAY,IACrE,KAAK,oBAAoB,CAE7B,CAEA,IAAY,YAAa,CACvB,MAAO,CAAC,GAAG,KAAK,UAAU,EAAE,KAAKC,GAAQA,EAAK,WAAa,WAAW,CACxE,CAEQ,qBAAsB,CA/GhC,IAAAZ,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAgHQ,KAAK,OACPJ,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,YAAb,MAAAC,EAAA,KAAAD,GACA,KAAK,OAAO,CAAE,OAAQ,EAAK,CAAC,EAC5B,SAAS,KAAK,MAAM,SAAW,SAC/B,KAAK,mBAAmB,EACxB,qBAAQ,iBAAiB,UAAWD,GAAS,KAAK,UAAUA,CAAK,GACjE,qBAAQ,iBAAiB,SAAU,KAAK,qBACxCG,EAAA,KAAK,UAAL,MAAAA,EAAc,iBAAiB,SAAU,KAAK,uBAE9CE,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,QAAb,MAAAC,EAAA,KAAAD,GACA,KAAK,QAAQ,CAAE,OAAQ,EAAM,EAAG,CAAE,QAAS,EAAM,CAAC,EAClD,SAAS,KAAK,MAAM,SAAW,OAC/B,qBAAQ,oBAAoB,UAAW,KAAK,WAC5C,qBAAQ,oBAAoB,SAAU,KAAK,qBAC3CE,EAAA,KAAK,UAAL,MAAAA,EAAc,oBAAoB,SAAU,KAAK,oBAErD,CAEQ,YAAYQ,EAAkD,CAC1C,KAAK,eAAe,CAAE,OAAAA,CAAO,EAAG,CAAE,WAAY,EAAK,CAAC,EAExD,mBAItB,KAAK,KAAO,GACd,CA+BQ,cAAe,CACrB,OAAO,KAAK,WACRC;AAAA;AAAA;AAAA;AAAA,mBAKA,EACN,CAEQ,iBAAkB,CACxB,IAAMC,EAAQ,KAAK,QAAUD,4BAA+B,KAAK,eAAiB,GAC5EE,EAAe,KAAK,SAQtB,KAPAF;AAAA,oBACY,IAAM,KAAK,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQ/CG,EAAU,CACd,UAAa,GACb,aAAc,KAAK,UACrB,EAEA,OAAOH,iBAAoBI,EAASD,CAAO;AAAA,gBAC/BF,KAASC;AAAA;AAAA,QAEjB,KAAK,aAAa;AAAA,WAExB,CAEA,QAAyB,CACvB,OAAO,KAAK,YAAc,CAAC,OAAO,kBAC9BF;AAAA;AAAA;AAAA;AAAA,mBAIW,KAAK;AAAA;AAAA,YAEZ,KAAK,gBAAgB;AAAA,gBAEzBA;AAAA;AAAA;AAAA;AAAA,qBAIa,KAAK;AAAA;AAAA,cAEZ,KAAK,gBAAgB;AAAA;AAAA,SAGjC,CACF,EAxLEK,EAAA,CAXCC,EAAS,CACR,KAAM,QACN,QAAS,GACT,WAAWC,EAAiBC,EAA6B,CACvD,OAAID,IAAW,IAASC,IAAW,OAE1B,GAEFD,IAAWC,CACpB,CACF,CAAC,GAlBkBzB,EAmBnB,oBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxBPvB,EAyBnB,uBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA9BvBvB,EA+BnB,wBAkBAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhDvBvB,EAiDnB,0BAGQsB,EAAA,CADPI,EAAM,SAAS,GAnDG1B,EAoDX,sBAGAsB,EAAA,CADPI,EAAM,QAAQ,GAtDI1B,EAuDX,sBAGAsB,EAAA,CADPI,EAAM,YAAY,GAzDA1B,EA0DX,yBAGAsB,EAAA,CADPI,EAAM,UAAU,GA5DE1B,EA6DX,uBAKyBsB,EAAA,CAAhCpB,EAAM,gBAAgB,GAlEJF,EAkEc,sBAMSsB,EAAA,CAAzCpB,EAAM,yBAAyB,GAxEbF,EAwEuB,8BAORsB,EAAA,CAAjCpB,EAAM,iBAAiB,GA/ELF,EA+Ee,uBA/EfA,EAArBsB,EAAA,CADCC,EAAc,WAAW,GACLvB",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);width:var(--bl-dialog-width, auto);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;inset-inline-start:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bl-dialog-caption-line-clamp, 1);margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport style from \"./bl-dialog.css\";\n\ntype DialogElement = {\n  showModal: () => void;\n  close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n *\n * @cssproperty [--bl-dialog-width=auto] Sets the width of the dialog content\n * @cssproperty [--bl-dialog-caption-line-clamp=1] Sets the line clamp of the caption\n */\n@customElement(\"bl-dialog\")\nexport default class BlDialog extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets dialog open-close status\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    hasChanged(newVal: boolean, oldVal: boolean | undefined) {\n      if (newVal === false && oldVal === undefined) {\n        // Assume that the initial value is false\n        return false;\n      }\n      return newVal !== oldVal;\n    },\n  })\n  open = false;\n\n  /**\n   * Sets the dialog title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  /**\n   * Determines if the dialog is critical, which disables closing through keyboard, backdrop, and close button interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  critical = false;\n\n  /**\n   * Determines if dialog currently uses polyfilled version instead of native HTML Dialog. By\n   * default, it uses native Dialog if the browser supports it, otherwise polyfills. You can force\n   * using polyfill by setting this to true in some cases like to show some content on top of dialog\n   * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some\n   * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.\n   *\n   * As of the current implementation, you can render above the dialog HTML element using the Popover API. However,\n   * it will block any actions on the Popover element. This issue was encountered during the development of the `bl-notification` component.\n   * As a result, we decided to enable the polyfill for the `bl-dialog` component by default. If you prefer to use the native dialog, you can set\n   * this property to false. Please note, doing so will cause notifications to render under the dialog backdrop.\n   * For more information, refer to the comment linked below:\n   *\n   * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413\n   */\n  @property({ type: Boolean, reflect: true })\n  polyfilled = true;\n\n  @query(\".dialog\")\n  private dialog: HTMLDialogElement & DialogElement;\n\n  @query(\"footer\")\n  private footer: HTMLElement;\n\n  @query(\".container\")\n  private container: HTMLElement;\n\n  @query(\".content\")\n  private content: HTMLElement;\n\n  /**\n   * Fires when the dialog is opened\n   */\n  @event(\"bl-dialog-open\") private onOpen: EventDispatcher<object>;\n\n  /**\n   * Fires before the dialog is closed with internal actions like clicking close button,\n   * pressing Escape key or clicking backdrop. Can be prevented by calling `event.preventDefault()`\n   */\n  @event(\"bl-dialog-request-close\") private onRequestClose: EventDispatcher<{\n    source: \"close-button\" | \"keyboard\" | \"backdrop\";\n  }>;\n\n  /**\n   * Fires when the dialog is closed\n   */\n  @event(\"bl-dialog-close\") private onClose: EventDispatcher<object>;\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"open\") || changedProperties.has(\"polyfilled\")) {\n      this.toggleDialogHandler();\n    }\n  }\n\n  private get _hasFooter() {\n    return [...this.childNodes].some(node => node.nodeName === \"BL-BUTTON\");\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      this.dialog?.showModal?.();\n      this.onOpen({ isOpen: true });\n      document.body.style.overflow = \"hidden\";\n      this.toggleFooterShadow();\n      window?.addEventListener(\"keydown\", event => this.onKeydown(event));\n      window?.addEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.addEventListener(\"scroll\", this.toggleFooterShadow);\n    } else {\n      this.dialog?.close?.();\n      this.onClose({ isOpen: false }, { bubbles: false });\n      document.body.style.overflow = \"auto\";\n      window?.removeEventListener(\"keydown\", this.onKeydown);\n      window?.removeEventListener(\"resize\", this.toggleFooterShadow);\n      this.content?.removeEventListener(\"scroll\", this.toggleFooterShadow);\n    }\n  }\n\n  private closeDialog(source: \"close-button\" | \"keyboard\" | \"backdrop\") {\n    const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });\n\n    if (requestCloseEvent.defaultPrevented) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  private clickOutsideHandler = (event: MouseEvent) => {\n    if (this.critical) return;\n\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath.includes(this.container)) {\n      this.closeDialog(\"backdrop\");\n    }\n  };\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === \"Escape\" && this.open && !this.critical) {\n      event.preventDefault();\n      this.closeDialog(\"keyboard\");\n    }\n  };\n\n  private toggleFooterShadow = () => {\n    const scrollTop = this.content?.scrollTop;\n    const scrollHeight = this.content?.scrollHeight;\n    const clientHeight = this.content?.clientHeight;\n\n    if (scrollTop + clientHeight >= scrollHeight) {\n      this.footer?.classList?.remove(\"shadow\");\n    } else {\n      this.footer?.classList?.add(\"shadow\");\n    }\n  };\n\n  private renderFooter() {\n    return this._hasFooter\n      ? html`<footer>\n          <slot name=\"primary-action\"></slot>\n          <slot name=\"secondary-action\"></slot>\n          <slot name=\"tertiary-action\"></slot>\n        </footer>`\n      : \"\";\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : \"\";\n    const closeButton = !this.critical\n      ? html`<bl-button\n          @click=\"${() => this.closeDialog(\"close-button\")}\"\n          icon=\"close\"\n          label=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          size=\"small\"\n        ></bl-button>`\n      : null;\n\n    const classes = {\n      \"container\": true,\n      \"has-footer\": this._hasFooter,\n    };\n\n    return html` <div class=\"${classMap(classes)}\">\n      <header>${title} ${closeButton}</header>\n      <section class=\"content\"><slot></slot></section>\n      ${this.renderFooter()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    return this.polyfilled || !window.HTMLDialogElement\n      ? html`<div\n          class=\"dialog-polyfill\"\n          role=\"dialog\"\n          aria-labelledby=\"dialog-caption\"\n          @click=${this.clickOutsideHandler}\n        >\n          ${this.renderContainer()}\n        </div>`\n      : html`\n          <dialog\n            class=\"dialog\"\n            aria-labelledby=\"dialog-caption\"\n            @click=${this.clickOutsideHandler}\n          >\n            ${this.renderContainer()}\n          </dialog>\n        `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-dialog\": BlDialog;\n  }\n}\n"],
+  "mappings": "oOACO,IAAMA,EAASC,61DACfC,EAAQF,ECkBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCAmBE,UAAO,GAYP,cAAW,GAkBX,gBAAa,GAuEb,KAAQ,oBAAuBC,GAAsB,CACnD,GAAI,KAAK,SAAU,OAEDA,EAAM,aAAa,EAEtB,SAAS,KAAK,SAAS,GACpC,KAAK,YAAY,UAAU,CAE/B,EAEA,KAAQ,UAAaA,GAA+B,CAC9CA,EAAM,OAAS,UAAY,KAAK,MAAQ,CAAC,KAAK,WAChDA,EAAM,eAAe,EACrB,KAAK,YAAY,UAAU,EAE/B,EAEA,KAAQ,mBAAqB,IAAM,CA7JrC,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EA8JI,IAAMC,GAAYP,EAAA,KAAK,UAAL,YAAAA,EAAc,UAC1BQ,GAAeP,EAAA,KAAK,UAAL,YAAAA,EAAc,aAC7BQ,GAAeP,EAAA,KAAK,UAAL,YAAAA,EAAc,aAE/BK,EAAYE,GAAgBD,GAC9BJ,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,YAAb,MAAAC,EAAwB,OAAO,WAE/BE,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,YAAb,MAAAC,EAAwB,IAAI,SAEhC,EAlJA,WAAW,QAAyB,CAClC,MAAO,CAACI,CAAK,CACf,CA8EA,QAAQC,EAAyC,EAC3CA,EAAkB,IAAI,MAAM,GAAKA,EAAkB,IAAI,YAAY,IACrE,KAAK,oBAAoB,CAE7B,CAEA,IAAY,YAAa,CACvB,MAAO,CAAC,GAAG,KAAK,UAAU,EAAE,KAAKC,GAAQA,EAAK,WAAa,WAAW,CACxE,CAEQ,qBAAsB,CA/GhC,IAAAZ,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAgHQ,KAAK,OACPJ,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,YAAb,MAAAC,EAAA,KAAAD,GACA,KAAK,OAAO,CAAE,OAAQ,EAAK,CAAC,EAC5B,SAAS,KAAK,MAAM,SAAW,SAC/B,KAAK,mBAAmB,EACxB,qBAAQ,iBAAiB,UAAWD,GAAS,KAAK,UAAUA,CAAK,GACjE,qBAAQ,iBAAiB,SAAU,KAAK,qBACxCG,EAAA,KAAK,UAAL,MAAAA,EAAc,iBAAiB,SAAU,KAAK,uBAE9CE,GAAAD,EAAA,KAAK,SAAL,YAAAA,EAAa,QAAb,MAAAC,EAAA,KAAAD,GACA,KAAK,QAAQ,CAAE,OAAQ,EAAM,EAAG,CAAE,QAAS,EAAM,CAAC,EAClD,SAAS,KAAK,MAAM,SAAW,OAC/B,qBAAQ,oBAAoB,UAAW,KAAK,WAC5C,qBAAQ,oBAAoB,SAAU,KAAK,qBAC3CE,EAAA,KAAK,UAAL,MAAAA,EAAc,oBAAoB,SAAU,KAAK,oBAErD,CAEQ,YAAYQ,EAAkD,CAC1C,KAAK,eAAe,CAAE,OAAAA,CAAO,EAAG,CAAE,WAAY,EAAK,CAAC,EAExD,mBAItB,KAAK,KAAO,GACd,CA+BQ,cAAe,CACrB,OAAO,KAAK,WACRC;AAAA;AAAA;AAAA;AAAA,mBAKA,EACN,CAEQ,iBAAkB,CACxB,IAAMC,EAAQ,KAAK,QAAUD,4BAA+B,KAAK,eAAiB,GAC5EE,EAAe,KAAK,SAStB,KARAF;AAAA,oBACY,IAAM,KAAK,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAS/CG,EAAU,CACd,UAAa,GACb,aAAc,KAAK,UACrB,EAEA,OAAOH,iBAAoBI,EAASD,CAAO;AAAA,gBAC/BF,KAASC;AAAA;AAAA,QAEjB,KAAK,aAAa;AAAA,WAExB,CAEA,QAAyB,CACvB,OAAO,KAAK,YAAc,CAAC,OAAO,kBAC9BF;AAAA;AAAA;AAAA;AAAA,mBAIW,KAAK;AAAA;AAAA,YAEZ,KAAK,gBAAgB;AAAA,gBAEzBA;AAAA;AAAA;AAAA;AAAA,qBAIa,KAAK;AAAA;AAAA,cAEZ,KAAK,gBAAgB;AAAA;AAAA,SAGjC,CACF,EAzLEK,EAAA,CAXCC,EAAS,CACR,KAAM,QACN,QAAS,GACT,WAAWC,EAAiBC,EAA6B,CACvD,OAAID,IAAW,IAASC,IAAW,OAE1B,GAEFD,IAAWC,CACpB,CACF,CAAC,GAlBkBzB,EAmBnB,oBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxBPvB,EAyBnB,uBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA9BvBvB,EA+BnB,wBAkBAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhDvBvB,EAiDnB,0BAGQsB,EAAA,CADPI,EAAM,SAAS,GAnDG1B,EAoDX,sBAGAsB,EAAA,CADPI,EAAM,QAAQ,GAtDI1B,EAuDX,sBAGAsB,EAAA,CADPI,EAAM,YAAY,GAzDA1B,EA0DX,yBAGAsB,EAAA,CADPI,EAAM,UAAU,GA5DE1B,EA6DX,uBAKyBsB,EAAA,CAAhCpB,EAAM,gBAAgB,GAlEJF,EAkEc,sBAMSsB,EAAA,CAAzCpB,EAAM,yBAAyB,GAxEbF,EAwEuB,8BAORsB,EAAA,CAAjCpB,EAAM,iBAAiB,GA/ELF,EA+Ee,uBA/EfA,EAArBsB,EAAA,CADCC,EAAc,WAAW,GACLvB",
   "names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "_a", "_b", "_c", "_d", "_e", "_f", "_g", "scrollTop", "scrollHeight", "clientHeight", "bl_dialog_default", "changedProperties", "node", "source", "x", "title", "closeButton", "classes", "o", "__decorateClass", "e", "newVal", "oldVal", "i"]
 }

package/dist/{chunk-OUFOJQAS.js → chunk-J45OQI7D.js}

@@ -2,7 +2,7 @@ import{a as u}from"./chunk-IPYZIIRV.js";import{a as b}from"./chunk-DINNT5P2.js";
     calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))
   )}:host([checked][dir="rtl"]) .switch::before{transform:translateX(
     calc(calc(2 * var(--thumb-offset)) - var(--track-width) + var(--thumb-width))
-  )}:host([disabled]) .switch{opacity:0.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:"";position:absolute;inset:-3px}`,p=m;var v="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[p]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}connectedCallback(){super.connectedCallback(),u(this)}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var o,i,l;let e=(l=(i=this.ariaLabel)!=null?i:(o=this.attributes.getNamedItem("aria-label"))==null?void 0:o.value)!=null?l:void 0;return c`
+  )}:host([disabled]) .switch{opacity:0.5;cursor:not-allowed}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:"";position:absolute;inset:-3px}`,p=m;var v="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[p]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}connectedCallback(){super.connectedCallback(),u(this)}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var o,i,l;let e=(l=(i=this.ariaLabel)!=null?i:(o=this.attributes.getNamedItem("aria-label"))==null?void 0:o.value)!=null?l:void 0;return c`
       <label @click=${this.toggle}>
         <slot class="label"></slot>
         <span
@@ -17,4 +17,4 @@ import{a as u}from"./chunk-IPYZIIRV.js";import{a as b}from"./chunk-DINNT5P2.js";
         </span>
       </label>
     `}};r([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([d("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([h(v)],t);export{v as a,t as b};
-//# sourceMappingURL=chunk-OUFOJQAS.js.map
+//# sourceMappingURL=chunk-J45OQI7D.js.map

package/dist/{chunk-OUFOJQAS.js.map → chunk-J45OQI7D.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/switch/bl-switch.css", "../src/components/switch/bl-switch.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer;vertical-align:middle}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);/* TODO: use predefined animation duration once it is ready */--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:\"\";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);inset-inline-start:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none;line-height:normal;align-items:center;margin-block:0}.label{overflow-wrap:anywhere}:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(\n    calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))\n  )}:host([checked][dir=\"rtl\"]) .switch::before{transform:translateX(\n    calc(calc(2 * var(--thumb-offset)) - var(--track-width) + var(--thumb-width))\n  )}:host([disabled]) .switch{opacity:0.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:\"\";position:absolute;inset:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-switch.css\";\n\nexport const blSwitchTag = \"bl-switch\";\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n *\n * @cssproperty [--bl-switch-color-on=--bl-color-primary] Set the checked color\n * @cssproperty [--bl-switch-color-off=--bl-color-neutral-lighter] Set the unchecked color\n * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the disabled state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled? = false;\n\n  /**\n   * Fires whenever user toggles the switch\n   */\n  @event(\"bl-switch-toggle\") private onToggle: EventDispatcher<boolean>;\n\n  toggle() {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onToggle(this.checked);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    setDirectionProperty(this);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === \"Enter\" || event.code === \"Space\") {\n      this.toggle();\n      event.preventDefault();\n    }\n  }\n\n  render(): TemplateResult {\n    const ariaLabel =\n      this.ariaLabel ?? this.attributes.getNamedItem(\"aria-label\")?.value ?? undefined;\n\n    return html`\n      <label @click=${this.toggle}>\n        <slot class=\"label\"></slot>\n        <span\n          class=\"switch\"\n          role=\"switch\"\n          aria-checked=${this.checked}\n          aria-readonly=${!!this.disabled}\n          @keydown=${this.handleKeyDown}\n          aria-label=${ifDefined(ariaLabel)}\n          tabindex=\"0\"\n        >\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blSwitchTag]: BlSwitch;\n  }\n}\n"],
-  "mappings": "qQACO,IAAMA,EAASC;AAAA;AAAA;AAAA;AAAA,2RAKfC,EAAQF,ECCR,IAAMG,EAAc,YAWNC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEA,mBAA0B,CACxB,MAAM,kBAAkB,EAExBC,EAAqB,IAAI,CAC3B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CA5D3B,IAAAC,EAAAC,EAAAC,EA6DI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA,sBACW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,KAAK;AAAA,0BACJ,CAAC,CAAC,KAAK;AAAA,qBACZ,KAAK;AAAA,uBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxC,CACF,EArDEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBZ,EASnB,uBAMAW,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBZ,EAenB,wBAKmCW,EAAA,CAAlCP,EAAM,kBAAkB,GApBNJ,EAoBgB,wBApBhBA,EAArBW,EAAA,CADCC,EAAcb,CAAW,GACLC",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer;vertical-align:middle}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);/* TODO: use predefined animation duration once it is ready */--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:\"\";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);inset-inline-start:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none;line-height:normal;align-items:center;margin-block:0}.label{overflow-wrap:anywhere}:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(\n    calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))\n  )}:host([checked][dir=\"rtl\"]) .switch::before{transform:translateX(\n    calc(calc(2 * var(--thumb-offset)) - var(--track-width) + var(--thumb-width))\n  )}:host([disabled]) .switch{opacity:0.5;cursor:not-allowed}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:\"\";position:absolute;inset:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-switch.css\";\n\nexport const blSwitchTag = \"bl-switch\";\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n *\n * @cssproperty [--bl-switch-color-on=--bl-color-primary] Set the checked color\n * @cssproperty [--bl-switch-color-off=--bl-color-neutral-lighter] Set the unchecked color\n * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the disabled state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled? = false;\n\n  /**\n   * Fires whenever user toggles the switch\n   */\n  @event(\"bl-switch-toggle\") private onToggle: EventDispatcher<boolean>;\n\n  toggle() {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onToggle(this.checked);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    setDirectionProperty(this);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === \"Enter\" || event.code === \"Space\") {\n      this.toggle();\n      event.preventDefault();\n    }\n  }\n\n  render(): TemplateResult {\n    const ariaLabel =\n      this.ariaLabel ?? this.attributes.getNamedItem(\"aria-label\")?.value ?? undefined;\n\n    return html`\n      <label @click=${this.toggle}>\n        <slot class=\"label\"></slot>\n        <span\n          class=\"switch\"\n          role=\"switch\"\n          aria-checked=${this.checked}\n          aria-readonly=${!!this.disabled}\n          @keydown=${this.handleKeyDown}\n          aria-label=${ifDefined(ariaLabel)}\n          tabindex=\"0\"\n        >\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blSwitchTag]: BlSwitch;\n  }\n}\n"],
+  "mappings": "qQACO,IAAMA,EAASC;AAAA;AAAA;AAAA;AAAA,8SAKfC,EAAQF,ECCR,IAAMG,EAAc,YAWNC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEA,mBAA0B,CACxB,MAAM,kBAAkB,EAExBC,EAAqB,IAAI,CAC3B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CA5D3B,IAAAC,EAAAC,EAAAC,EA6DI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA,sBACW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,KAAK;AAAA,0BACJ,CAAC,CAAC,KAAK;AAAA,qBACZ,KAAK;AAAA,uBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxC,CACF,EArDEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBZ,EASnB,uBAMAW,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBZ,EAenB,wBAKmCW,EAAA,CAAlCP,EAAM,kBAAkB,GApBNJ,EAoBgB,wBApBhBA,EAArBW,EAAA,CADCC,EAAcb,CAAW,GACLC",
   "names": ["styles", "i", "bl_switch_default", "blSwitchTag", "BlSwitch", "s", "bl_switch_default", "setDirectionProperty", "event", "_a", "_b", "_c", "ariaLabel", "x", "l", "__decorateClass", "e"]
 }

package/dist/chunk-NGQ435PC.js

@@ -0,0 +1,50 @@
+import{a as f}from"./chunk-T3UQYGO3.js";import{a as m}from"./chunk-GRL4DWKG.js";import{a as v,b as n,c as p,e as u}from"./chunk-5MOOXA2X.js";import{a as d,b as r}from"./chunk-4OT5AMS5.js";import{d as i}from"./chunk-IZ2LK5GK.js";var _=d`:host{width:fit-content;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);--datepicker-width:314px;display:flex;flex-direction:column;gap:var(--bl-size-2xs);width:fit-content}.datepicker-input{width:var(--bl-datepicker-input-width, var(--datepicker-width));white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`,b=_;var e=class extends f{constructor(){super(...arguments);this.size="medium";this.labelFixed=!1;this.valueFormatter=null;this._inputValue="";this._selectedDates=[];this._floatingDateCount=0;this._fittingDateCount=0}static get styles(){return[b]}defaultInputValueFormatter(){if(this.type==="single")this._inputValue=this.formatDate(this._selectedDates[0]),this.closePopoverWithTimeout();else if(this.type==="multiple"){this.setFloatingDates();let t=this._selectedDates.slice(0,this._fittingDateCount).map(s=>this.formatDate(s));this._inputValue=t.join(",")+(this._floatingDateCount>0?" ,...":"")}else this.type==="range"&&(this._selectedDates[0]&&(this._inputValue=this.formatDate(this._selectedDates[0])),this._selectedDates[1]&&(this._inputValue=`${this._inputValue}-${this.formatDate(this._selectedDates[1])}`),this._selectedDates[0]&&this._selectedDates[1]&&this.closePopoverWithTimeout())}closePopoverWithTimeout(){setTimeout(()=>{this.closePopover(),this._inputEl.blur()},200)}setFloatingDates(){var a,l;let t=(a=this.shadowRoot)==null?void 0:a.getElementById("datepicker-input"),s=(l=this.shadowRoot)==null?void 0:l.getElementById("icon-container"),o=t.offsetWidth-s.offsetWidth;this._fittingDateCount=Math.floor(o/90),this._floatingDateCount=this._selectedDates.length-this._fittingDateCount}setDatePickerInput(t){t.length?(this._selectedDates=t,this.valueFormatter?this._inputValue=this.valueFormatter(this._selectedDates):this.defaultInputValueFormatter()):this._inputValue="",this._onBlDatepickerChange(this._selectedDates)}formatDate(t){return`${String(t==null?void 0:t.getDate()).padStart(2,"0")}/${String((t==null?void 0:t.getMonth())+1).padStart(2,"0")}/${t==null?void 0:t.getFullYear()}`}clearDatepicker(){this._calendarEl.handleClearSelectedDates(),this._selectedDates=[],this._inputValue="",this._floatingDateCount=0}openPopover(){this._popoverEl.target=this._inputEl,this._popoverEl.show()}closePopover(){this._popoverEl.hide()}_togglePopover(){this._popoverEl.visible?this.closePopover():this.openPopover()}formatAdditionalDates(t){let s=t.split(",");return s.reduce((o,a,l)=>(l>0&&l%3===0&&o.push(r`<br />`),o.push(r`<span>${a.trim()}${l<s.length-1?", ":""}</span>`),o),[])}async firstUpdated(){var t,s;this._onCalendarMouseDown=o=>{var a;o.preventDefault(),(a=this._inputEl)==null||a.focus()},this._onInputMouseDown=o=>{var a;o.preventDefault(),(a=this._inputEl)==null||a.focus()},(t=this._calendarEl)==null||t.addEventListener("mousedown",this._onCalendarMouseDown),(s=this._inputEl)==null||s.addEventListener("mousedown",this._onInputMouseDown),this._selectedDates&&this.setDatePickerInput(this._selectedDates)}disconnectedCallback(){var t,s;super.disconnectedCallback(),(t=this._calendarEl)==null||t.removeEventListener("mousedown",this._onCalendarMouseDown),(s=this._inputEl)==null||s.removeEventListener("mousedown",this._onInputMouseDown)}render(){var c;let t=r`
+      <bl-popover target="datepicker-content" placement="bottom-start">
+        <bl-calendar
+          type=${this.type}
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          .startOfWeek=${this.startOfWeek}
+          .disabledDates=${this.disabledDates}
+          .value=${this.value}
+          .locale=${this.locale}
+          @bl-calendar-change="${h=>this.setDatePickerInput(h.detail)}"
+        ></bl-calendar>
+      </bl-popover>
+    `,s=(c=this._selectedDates)==null?void 0:c.slice(this._fittingDateCount).map(h=>this.formatDate(h)).join(","),o=this.formatAdditionalDates(s),a=this._floatingDateCount>0?r` <bl-tooltip>
+            <span slot="tooltip-trigger">+${this._floatingDateCount}</span>
+            <div>${o}</div>
+          </bl-tooltip>`:"",l=this._selectedDates.length>0?r` <bl-button
+              size="small"
+              variant="tertiary"
+              kind="neutral"
+              icon="close"
+              @click=${()=>this.clearDatepicker()}
+            ></bl-button>
+            <div class="action-divider"></div>`:"";return r`
+      <div class="datepicker-content" id="datepicker-content" tabindex="-1">
+        <bl-input
+          .value="${this._inputValue}"
+          label="${this.label}"
+          placeholder="${this.placeholder}"
+          class="datepicker-input"
+          role="button"
+          id="datepicker-input"
+          aria-haspopup="listbox"
+          aria-labelledby="label"
+          @click=${this._togglePopover}
+          help-text=${this.helpText}
+          ?disabled=${this.disabled}
+          .size=${this.size}
+          .labelFixed=${this.labelFixed}
+          readonly
+        >
+          <div slot="icon" class="icon-container" id="icon-container">
+            ${a} ${l}
+            <bl-icon name="calendar" size="small" class="calendar-icon"></bl-icon>
+          </div>
+        </bl-input>
+        ${t}
+      </div>
+    `}};i([n({type:String,attribute:"placeholder",reflect:!0})],e.prototype,"placeholder",2),i([n({type:String,reflect:!0})],e.prototype,"size",2),i([n({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),i([n({type:String,attribute:"label",reflect:!0})],e.prototype,"label",2),i([n({type:Function,attribute:"value-formatter"})],e.prototype,"valueFormatter",2),i([n({type:Boolean})],e.prototype,"disabled",2),i([n({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),i([p()],e.prototype,"_inputValue",2),i([p()],e.prototype,"_selectedDates",2),i([p()],e.prototype,"_floatingDateCount",2),i([p()],e.prototype,"_fittingDateCount",2),i([u("bl-calendar")],e.prototype,"_calendarEl",2),i([u("bl-popover")],e.prototype,"_popoverEl",2),i([u("bl-input")],e.prototype,"_inputEl",2),i([m("bl-datepicker-change")],e.prototype,"_onBlDatepickerChange",2),e=i([v("bl-datepicker")],e);export{e as a};
+//# sourceMappingURL=chunk-NGQ435PC.js.map

package/dist/chunk-NGQ435PC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/datepicker/bl-datepicker.css", "../src/components/datepicker/bl-datepicker.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:fit-content;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);--datepicker-width:314px;display:flex;flex-direction:column;gap:var(--bl-size-2xs);width:fit-content}.datepicker-input{width:var(--bl-datepicker-input-width, var(--datepicker-width));white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`;\nexport default styles;\n", "import { CSSResultGroup, html, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { BlCalendar, BlPopover } from \"../../baklava\";\nimport DatepickerCalendarMixin from \"../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../calendar/bl-calendar\";\nimport { CALENDAR_TYPES } from \"../calendar/bl-calendar.constant\";\nimport \"../input/bl-input\";\nimport BlInput, { InputSize } from \"../input/bl-input\";\nimport \"../tooltip/bl-tooltip\";\nimport style from \"./bl-datepicker.css\";\n\n/**\n * @tag bl-datepicker\n * @summary Baklava DatePicker component\n *\n * @cssproperty [--bl-datepicker-input-width] - Sets the width of datepicker input\n **/\n@customElement(\"bl-datepicker\")\nexport default class BlDatepicker extends DatepickerCalendarMixin {\n  /**\n   * Defines the datepicker input placeholder\n   */\n  @property({ type: String, attribute: \"placeholder\", reflect: true })\n  placeholder: string;\n  /**\n   * Sets input size.\n   */\n  @property({ type: String, reflect: true })\n  size?: InputSize = \"medium\";\n\n  /**\n   * Makes datepicker input label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: \"label-fixed\", reflect: true })\n  labelFixed = false;\n  /**\n   * Defines the datepicker input label\n   */\n  @property({ type: String, attribute: \"label\", reflect: true })\n  label: string;\n  /**\n   * Defines the custom formatter function\n   */\n  @property({ type: Function, attribute: \"value-formatter\" })\n  valueFormatter: ((dates: Date[]) => string) | null = null;\n  /**\n   * Sets datepicker to disabled\n   */\n  @property({ type: Boolean })\n  disabled: boolean;\n  /**\n   * Defines help text to datepicker input for users\n   */\n  @property({ type: String, attribute: \"help-text\", reflect: true })\n  helpText: string;\n\n  @state()\n  _inputValue = \"\";\n\n  @state()\n  _selectedDates: Date[] = [];\n\n  @state()\n  _floatingDateCount: number = 0;\n\n  @state()\n  _fittingDateCount: number = 0;\n\n  @query(\"bl-calendar\")\n  _calendarEl: BlCalendar;\n\n  @query(\"bl-popover\")\n  _popoverEl: BlPopover;\n\n  @query(\"bl-input\")\n  _inputEl!: BlInput;\n\n  private _onCalendarMouseDown!: (event: MouseEvent) => void;\n  private _onInputMouseDown!: (event: MouseEvent) => void;\n\n  /**\n   * Fires when date selection is changed\n   */\n  @event(\"bl-datepicker-change\") private _onBlDatepickerChange: EventDispatcher<Date[]>;\n\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  defaultInputValueFormatter() {\n    if (this.type === CALENDAR_TYPES.SINGLE) {\n      this._inputValue = this.formatDate(this._selectedDates[0]);\n      this.closePopoverWithTimeout();\n    } else if (this.type === CALENDAR_TYPES.MULTIPLE) {\n      this.setFloatingDates();\n      const values = this._selectedDates\n        .slice(0, this._fittingDateCount)\n        .map(date => this.formatDate(date));\n\n      this._inputValue = values.join(\",\") + (this._floatingDateCount > 0 ? \" ,...\" : \"\");\n    } else if (this.type === CALENDAR_TYPES.RANGE) {\n      if (this._selectedDates[0]) this._inputValue = this.formatDate(this._selectedDates[0]);\n      if (this._selectedDates[1])\n        this._inputValue = `${this._inputValue}-${this.formatDate(this._selectedDates[1])}`;\n      if (this._selectedDates[0] && this._selectedDates[1]) this.closePopoverWithTimeout();\n    }\n  }\n\n  closePopoverWithTimeout() {\n    setTimeout(() => {\n      this.closePopover();\n      this._inputEl.blur();\n    }, 200);\n  }\n\n  setFloatingDates() {\n    const datepickerInput = this.shadowRoot?.getElementById(\"datepicker-input\");\n    const iconsContainer = this.shadowRoot?.getElementById(\"icon-container\");\n    const datesTextTotalWidth = datepickerInput!.offsetWidth! - iconsContainer!.offsetWidth!;\n\n    this._fittingDateCount = Math.floor(datesTextTotalWidth / 90);\n\n    this._floatingDateCount = this._selectedDates.length - this._fittingDateCount;\n  }\n\n  setDatePickerInput(dates: Date[] | []) {\n    if (!dates.length) {\n      this._inputValue = \"\";\n    } else {\n      this._selectedDates = dates;\n      if (this.valueFormatter) {\n        this._inputValue = this.valueFormatter(this._selectedDates);\n      } else {\n        this.defaultInputValueFormatter();\n      }\n    }\n\n    this._onBlDatepickerChange(this._selectedDates);\n  }\n\n  formatDate(date: Date): string {\n    return `${String(date?.getDate()).padStart(2, \"0\")}/${String(date?.getMonth() + 1).padStart(\n      2,\n      \"0\"\n    )}/${date?.getFullYear()}`;\n  }\n\n  clearDatepicker() {\n    this._calendarEl.handleClearSelectedDates();\n    this._selectedDates = [];\n    this._inputValue = \"\";\n    this._floatingDateCount = 0;\n  }\n\n  openPopover() {\n    this._popoverEl.target = this._inputEl;\n    this._popoverEl.show();\n  }\n\n  closePopover() {\n    this._popoverEl.hide();\n  }\n\n  _togglePopover() {\n    this._popoverEl.visible ? this.closePopover() : this.openPopover();\n  }\n\n  formatAdditionalDates(str: string): TemplateResult[] {\n    const parts = str.split(\",\");\n\n    return parts.reduce<TemplateResult[]>((acc, part, index) => {\n      if (index > 0 && index % 3 === 0) {\n        acc.push(html`<br />`);\n      }\n      acc.push(html`<span>${part.trim()}${index < parts.length - 1 ? \", \" : \"\"}</span>`);\n      return acc;\n    }, []);\n  }\n\n  async firstUpdated() {\n    this._onCalendarMouseDown = event => {\n      event.preventDefault();\n      this._inputEl?.focus();\n    };\n\n    this._onInputMouseDown = event => {\n      event.preventDefault();\n      this._inputEl?.focus();\n    };\n\n    this._calendarEl?.addEventListener(\"mousedown\", this._onCalendarMouseDown);\n    this._inputEl?.addEventListener(\"mousedown\", this._onInputMouseDown);\n\n    if (this._selectedDates) {\n      this.setDatePickerInput(this._selectedDates);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._calendarEl?.removeEventListener(\"mousedown\", this._onCalendarMouseDown);\n    this._inputEl?.removeEventListener(\"mousedown\", this._onInputMouseDown);\n  }\n\n  render() {\n    const renderCalendar = html`\n      <bl-popover target=\"datepicker-content\" placement=\"bottom-start\">\n        <bl-calendar\n          type=${this.type}\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          .startOfWeek=${this.startOfWeek}\n          .disabledDates=${this.disabledDates}\n          .value=${this.value}\n          .locale=${this.locale}\n          @bl-calendar-change=\"${(event: CustomEvent) => this.setDatePickerInput(event.detail)}\"\n        ></bl-calendar>\n      </bl-popover>\n    `;\n    const additionalDates = this._selectedDates\n      ?.slice(this._fittingDateCount)\n      .map(date => {\n        return this.formatDate(date);\n      })\n      .join(\",\");\n\n    const formattedAdditionalDates = this.formatAdditionalDates(additionalDates);\n\n    const additionalDatesView =\n      this._floatingDateCount > 0\n        ? html` <bl-tooltip>\n            <span slot=\"tooltip-trigger\">+${this._floatingDateCount}</span>\n            <div>${formattedAdditionalDates}</div>\n          </bl-tooltip>`\n        : \"\";\n\n    const clearDatepickerButton =\n      this._selectedDates.length > 0\n        ? html` <bl-button\n              size=\"small\"\n              variant=\"tertiary\"\n              kind=\"neutral\"\n              icon=\"close\"\n              @click=${() => this.clearDatepicker()}\n            ></bl-button>\n            <div class=\"action-divider\"></div>`\n        : \"\";\n\n    return html`\n      <div class=\"datepicker-content\" id=\"datepicker-content\" tabindex=\"-1\">\n        <bl-input\n          .value=\"${this._inputValue}\"\n          label=\"${this.label}\"\n          placeholder=\"${this.placeholder}\"\n          class=\"datepicker-input\"\n          role=\"button\"\n          id=\"datepicker-input\"\n          aria-haspopup=\"listbox\"\n          aria-labelledby=\"label\"\n          @click=${this._togglePopover}\n          help-text=${this.helpText}\n          ?disabled=${this.disabled}\n          .size=${this.size}\n          .labelFixed=${this.labelFixed}\n          readonly\n        >\n          <div slot=\"icon\" class=\"icon-container\" id=\"icon-container\">\n            ${additionalDatesView} ${clearDatepickerButton}\n            <bl-icon name=\"calendar\" size=\"small\" class=\"calendar-icon\"></bl-icon>\n          </div>\n        </bl-input>\n        ${renderCalendar}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_datepicker_default", "BlDatepicker", "DatepickerCalendarMixin", "bl_datepicker_default", "values", "date", "_a", "_b", "datepickerInput", "iconsContainer", "datesTextTotalWidth", "dates", "str", "parts", "acc", "part", "index", "x", "event", "renderCalendar", "additionalDates", "formattedAdditionalDates", "additionalDatesView", "clearDatepickerButton", "__decorateClass", "e", "t", "i"]
+}

package/dist/{chunk-2E2KYTNB.js → chunk-OAF3R4PW.js}

@@ -1,4 +1,4 @@
-import{b as C,d as E,f as I,g as L,h as V}from"./chunk-EZSEQHRH.js";import{a as $}from"./chunk-EG7U7PM3.js";import{a as k}from"./chunk-XDUIVR6I.js";import{a as f}from"./chunk-6LT7O7T2.js";import{a as z,c as b}from"./chunk-HBPBDC7T.js";import{a as y}from"./chunk-ECPWEUBG.js";import{a as x}from"./chunk-DINNT5P2.js";import{a as m}from"./chunk-GRL4DWKG.js";import{a as T,b as a,c as h,e as v,f as S}from"./chunk-5MOOXA2X.js";import{a as w,b as d,f as g}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var R=w`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([multiple][view-select-all]) .select-wrapper{--menu-height:290px}:host([size="large"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size="small"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-inline-start:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-inline-start:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled]) .select-input .selected-options{color:var(--bl-color-neutral-light)}.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]) .additional-selection-count{color:var(--bl-color-neutral-light)}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-4xs);margin-inline-start:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}:host(:empty) .popover{display:none}.popover-no-result{display:flex;flex-direction:column;gap:var(--bl-size-2xs);align-items:center;justify-content:center;height:80px}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);inset-inline-end:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:host([placeholder]) :where(.select-open, .selected) .label,:host(:not([placeholder])) .selected .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.select-all{position:sticky;top:0;padding:var(--bl-size-xs) 0;background:var(--background-color);z-index:1;font:var(--bl-font-title-3-regular);/* Make sure option focus doesn't overflow */box-shadow:10px 0 0 var(--background-color),-10px 0 0 var(--background-color)}.select-all::after{position:absolute;content:"";width:100%;bottom:0;border-bottom:1px solid var(--bl-color-neutral-lighter)}.search-bar-input{font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--text-color);border:none;outline:none;background-color:transparent;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box}.search-bar-input::placeholder{color:var(--placeholder-color)}.search-bar-input:focus-visible{outline:none}.search-spinner{padding-inline-end:var(--bl-font-size-2xs)}.action-divider{display:none}.select-wrapper .action-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}.actions bl-icon{padding:4px}`,P=R;var A,i=class extends k(g){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.clearable=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this.viewSelectAll=!1;this.searchBar=!1;this.searchBarLoadingState=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._searchText="";this.userLang=((A=document.querySelector("html"))==null?void 0:A.getAttribute("lang"))||navigator.language;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var l;let t=e.composedPath();(l=t==null?void 0:t.find(s=>s.tagName==="BL-SELECT"))!=null&&l.contains(this)||this.close()};this.focusedOptionIndex=-1;this.lastKeyPressedTime=0;this.typedCharacters="";this.keyPressThreshold=500}static get styles(){return[P]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let t=new FormData;e.forEach(l=>t.append(this.name,`${l}`)),this.setValue(t)}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 noResultFound(){return this._searchText!==""&&this._connectedOptions.every(e=>e.hidden)}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.searchBar&&setTimeout(()=>{var e,t,l;(l=(t=(e=document.activeElement)==null?void 0:e.shadowRoot)==null?void 0:t.querySelector("input"))==null||l.focus()},100),this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._handleSearchOptions({target:{value:""}}),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=L(this._selectInput,this._popover,()=>{V(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[C(),E(8),I({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:t})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${t}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",t=>{this.reportValidity()||t.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){var O;let e=d`<ul class="selected-options">
+import{b as C,d as E,f as I,g as V,h as L}from"./chunk-EZSEQHRH.js";import{a as $}from"./chunk-EG7U7PM3.js";import{a as k}from"./chunk-XDUIVR6I.js";import{a as f}from"./chunk-6LT7O7T2.js";import{a as z,c as b}from"./chunk-HBPBDC7T.js";import{a as y}from"./chunk-ECPWEUBG.js";import{a as x}from"./chunk-DINNT5P2.js";import{a as m}from"./chunk-GRL4DWKG.js";import{a as T,b as a,c as h,e as v,f as S}from"./chunk-5MOOXA2X.js";import{a as w,b as d,f as g}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var R=w`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([multiple][view-select-all]) .select-wrapper{--menu-height:290px}:host([size="large"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size="small"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-inline-start:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-inline-start:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled]) .select-input .selected-options{color:var(--bl-color-neutral-light)}.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]) .additional-selection-count{color:var(--bl-color-neutral-light)}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-4xs);margin-inline-start:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}:host(:empty) .popover{display:none}.popover-no-result{display:flex;flex-direction:column;gap:var(--bl-size-2xs);align-items:center;justify-content:center;height:80px}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);inset-inline-end:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:host([placeholder]) :where(.select-open, .selected) .label,:host(:not([placeholder])) .selected .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.select-all{position:sticky;top:0;padding:var(--bl-size-xs) 0;background:var(--background-color);z-index:1;font:var(--bl-font-title-3-regular);/* Make sure option focus doesn't overflow */box-shadow:10px 0 0 var(--background-color),-10px 0 0 var(--background-color)}.select-all::after{position:absolute;content:"";width:100%;bottom:0;border-bottom:1px solid var(--bl-color-neutral-lighter)}.search-bar-input{font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--text-color);border:none;outline:none;background-color:transparent;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box}.search-bar-input::placeholder{color:var(--placeholder-color)}.search-bar-input:focus-visible{outline:none}.search-spinner{padding-inline-end:var(--bl-font-size-2xs)}.action-divider{display:none}.select-wrapper .action-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}.actions bl-icon{padding:4px}`,P=R;var A,i=class extends k(g){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.clearable=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this.viewSelectAll=!1;this.searchBar=!1;this.searchBarLoadingState=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._searchText="";this.userLang=((A=document.querySelector("html"))==null?void 0:A.getAttribute("lang"))||navigator.language;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var l;let t=e.composedPath();(l=t==null?void 0:t.find(s=>s.tagName==="BL-SELECT"))!=null&&l.contains(this)||this.close()};this.focusedOptionIndex=-1;this.lastKeyPressedTime=0;this.typedCharacters="";this.keyPressThreshold=500}static get styles(){return[P]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let t=new FormData;e.forEach(l=>t.append(this.name,`${l}`)),this.setValue(t)}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 noResultFound(){return this._searchText!==""&&this._connectedOptions.every(e=>e.hidden)}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.searchBar&&setTimeout(()=>{var e,t,l;(l=(t=(e=document.activeElement)==null?void 0:e.shadowRoot)==null?void 0:t.querySelector("input"))==null||l.focus()},100),this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._handleSearchOptions({target:{value:""}}),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=V(this._selectInput,this._popover,()=>{L(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[C(),E(8),I({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:t})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${t}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",t=>{this.reportValidity()||t.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){var O;let e=d`<ul class="selected-options">
       ${this._selectedOptions.map(p=>d`<li>${p.getAttribute("label")||p.textContent}</li>`)}
     </ul>`,l=!(this._selectedOptions.length>0&&this._selectedOptions.every(p=>p.disabled))&&(this.clearable||this.multiple),s=l?d`<bl-button
           class="remove-all"
@@ -103,5 +103,5 @@ import{b as C,d as E,f as I,g as L,h as V}from"./chunk-EZSEQHRH.js";import{a as
             </div>`:""}
       </div>
       <div class="hint">${e} ${t}</div>
-    </div> `}handleFocusOptionByKey(e){let t=Date.now();t-this.lastKeyPressedTime>this.keyPressThreshold&&(this.typedCharacters=""),this.lastKeyPressedTime=t,this.typedCharacters+=e.toLowerCase();let s=this.options.findIndex(n=>n.disabled?!1:n.innerText.trim().toLowerCase().startsWith(this.typedCharacters));s!==-1&&(this.focusedOptionIndex=s,this.options[s].focus())}handleKeydown(e){if(this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code))this._togglePopover(),e.preventDefault();else if(this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code))this.open(),e.preventDefault();else if(e.code==="Escape")this.close(),e.preventDefault();else if(this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)){let t=this.options.filter(l=>!l.disabled);e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,t.length-1)),t[this.focusedOptionIndex].focus(),e.preventDefault()}else this._isPopoverOpen&&!this.searchBar&&this.handleFocusOptionByKey(e.key)}_togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){let e=this._selectedOptions.map(t=>({value:t.value,selected:t.selected,text:t.textContent}));this.multiple?this._onBlSelect(e):this._onBlSelect(e[0])}_handleSearchEvent(){this._onBlSearch(this._searchText)}_handleSearchOptions(e){this.searchBar&&(this._searchText=e.target.value,this._handleSearchEvent(),this._connectedOptions.forEach(t=>{var s;let l=(s=t.textContent)==null?void 0:s.toLocaleLowerCase(this.userLang).includes(this._searchText.toLocaleLowerCase(this.userLang));t.hidden=!l}),this._selectedOptions=this.options.filter(t=>t.selected),this._handleLastVisibleSearchedOption(),this.requestUpdate())}_handleLastVisibleSearchedOption(){var t,l;let e=[...this.options].reverse().find(s=>!s.hidden);e&&((l=(t=e==null?void 0:e.shadowRoot)==null?void 0:t.querySelector("div"))==null||l.classList.add("no-border-bottom")),this.options.map(s=>{var n,c;!s.hidden&&s!==e&&((c=(n=s.shadowRoot)==null?void 0:n.querySelector("div"))==null||c.classList.remove("no-border-bottom"))})}_handleSingleSelect(e){this.value=e.value,this._searchText="",this._handleSelectEvent(),this.close()}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let t=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(t)}_handleSelectAll(e){var c;let t=(c=this.shadowRoot)==null?void 0:c.querySelector(".select-all"),l=e.detail,n=this._connectedOptions.filter(r=>!r.selected&&!r.hidden).every(r=>r.disabled);if(l&&n){setTimeout(()=>{var u;let r=(u=t==null?void 0:t.shadowRoot)==null?void 0:u.querySelector("input");r==null||r.click()},0);return}this._connectedOptions.forEach(r=>{r.disabled||r.hidden||(r.selected=l)}),this._handleMultipleSelect()}_onClickRemove(e){e.stopPropagation(),this._searchText="";let t=this._selectedOptions.filter(l=>l.disabled);this._connectedOptions.filter(l=>!l.disabled&&l.selected).forEach(l=>{l.selected=!1}),this.value=t.length?t.map(l=>l.value):null,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(t=>t.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.multiple?this.value=[]:this.value=null),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),e.has("_selectedOptions")&&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)}};i.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},i.formControlValidators=[$],o([a()],i.prototype,"name",2),o([a()],i.prototype,"value",1),o([a({reflect:!0})],i.prototype,"label",2),o([a({reflect:!0})],i.prototype,"placeholder",2),o([a({type:String,reflect:!0})],i.prototype,"size",2),o([a({type:Boolean,reflect:!0})],i.prototype,"required",2),o([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2),o([a({type:Boolean,reflect:!0})],i.prototype,"clearable",2),o([a({type:Boolean,reflect:!0})],i.prototype,"multiple",2),o([a({type:Boolean,reflect:!0})],i.prototype,"autofocus",2),o([a({type:Boolean,attribute:"label-fixed",reflect:!0})],i.prototype,"labelFixed",2),o([a({type:String,attribute:"help-text",reflect:!0})],i.prototype,"helpText",2),o([a({type:String,attribute:"invalid-text",reflect:!0})],i.prototype,"customInvalidText",2),o([a({type:Boolean,attribute:"view-select-all",converter:y()})],i.prototype,"viewSelectAll",2),o([a({type:String,attribute:"select-all-text"})],i.prototype,"selectAllText",2),o([a({type:Boolean,attribute:"search-bar",reflect:!0})],i.prototype,"searchBar",2),o([a({type:String,attribute:"search-bar-placeholder",reflect:!0})],i.prototype,"searchBarPlaceholder",2),o([a({type:Boolean,attribute:"search-bar-loading-state",converter:y()})],i.prototype,"searchBarLoadingState",2),o([a({type:String,attribute:"search-not-found-text",reflect:!0})],i.prototype,"searchNotFoundText",2),o([a({type:String,attribute:"popover-clear-search-text",reflect:!0})],i.prototype,"popoverClearSearchText",2),o([h()],i.prototype,"_isPopoverOpen",2),o([h()],i.prototype,"_additionalSelectedOptionCount",2),o([h()],i.prototype,"_searchText",2),o([v(".selected-options")],i.prototype,"selectedOptionsContainer",2),o([S(".selected-options li")],i.prototype,"selectedOptionsItems",2),o([v(".popover")],i.prototype,"_popover",2),o([v(".select-input")],i.prototype,"_selectInput",2),o([m("bl-select")],i.prototype,"_onBlSelect",2),o([m("bl-search")],i.prototype,"_onBlSearch",2),o([h()],i.prototype,"_selectedOptions",2),o([h()],i.prototype,"dirty",2),o([v(".select-input")],i.prototype,"validationTarget",2),i=o([T("bl-select"),z()],i);export{i as a};
-//# sourceMappingURL=chunk-2E2KYTNB.js.map
+    </div> `}handleFocusOptionByKey(e){let t=Date.now();t-this.lastKeyPressedTime>this.keyPressThreshold&&(this.typedCharacters=""),this.lastKeyPressedTime=t,this.typedCharacters+=e.toLowerCase();let s=this.options.findIndex(n=>n.disabled?!1:n.innerText.trim().toLowerCase().startsWith(this.typedCharacters));s!==-1&&(this.focusedOptionIndex=s,this.options[s].focus())}handleKeydown(e){if(this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code))this._togglePopover(),e.preventDefault();else if(this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code))this.open(),e.preventDefault();else if(e.code==="Escape")this.close(),e.preventDefault();else if(this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)){let t=this.options.filter(l=>!l.disabled);e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,t.length-1)),t[this.focusedOptionIndex].focus(),e.preventDefault()}else this._isPopoverOpen&&!this.searchBar&&this.handleFocusOptionByKey(e.key)}_togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){let e=this._selectedOptions.map(t=>({value:t.value,selected:t.selected,text:t.textContent}));this.multiple?this._onBlSelect(e):this._onBlSelect(e[0])}_handleSearchEvent(){this._onBlSearch(this._searchText)}_handleSearchOptions(e){this.searchBar&&(this._searchText=e.target.value,this._handleSearchEvent(),this._connectedOptions.forEach(t=>{let l=this._searchText.toLowerCase(),s="";if(t.textContent)try{s=t.textContent.toLocaleLowerCase(this.userLang)}catch{s=t.textContent.toLowerCase()}let n=s.includes(l);t.hidden=!n}),this._selectedOptions=this.options.filter(t=>t.selected),this._handleLastVisibleSearchedOption(),this.requestUpdate())}_handleLastVisibleSearchedOption(){var t,l;let e=[...this.options].reverse().find(s=>!s.hidden);e&&((l=(t=e==null?void 0:e.shadowRoot)==null?void 0:t.querySelector("div"))==null||l.classList.add("no-border-bottom")),this.options.map(s=>{var n,c;!s.hidden&&s!==e&&((c=(n=s.shadowRoot)==null?void 0:n.querySelector("div"))==null||c.classList.remove("no-border-bottom"))})}_handleSingleSelect(e){this.value=e.value,this._searchText="",this._handleSelectEvent(),this.close()}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let t=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(t)}_handleSelectAll(e){var c;let t=(c=this.shadowRoot)==null?void 0:c.querySelector(".select-all"),l=e.detail,n=this._connectedOptions.filter(r=>!r.selected&&!r.hidden).every(r=>r.disabled);if(l&&n){setTimeout(()=>{var u;let r=(u=t==null?void 0:t.shadowRoot)==null?void 0:u.querySelector("input");r==null||r.click()},0);return}this._connectedOptions.forEach(r=>{r.disabled||r.hidden||(r.selected=l)}),this._handleMultipleSelect()}_onClickRemove(e){e.stopPropagation(),this._searchText="";let t=this._selectedOptions.filter(l=>l.disabled);this._connectedOptions.filter(l=>!l.disabled&&l.selected).forEach(l=>{l.selected=!1}),this.value=t.length?t.map(l=>l.value):null,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(t=>t.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.multiple?this.value=[]:this.value=null),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),e.has("_selectedOptions")&&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)}};i.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},i.formControlValidators=[$],o([a()],i.prototype,"name",2),o([a()],i.prototype,"value",1),o([a({reflect:!0})],i.prototype,"label",2),o([a({reflect:!0})],i.prototype,"placeholder",2),o([a({type:String,reflect:!0})],i.prototype,"size",2),o([a({type:Boolean,reflect:!0})],i.prototype,"required",2),o([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2),o([a({type:Boolean,reflect:!0})],i.prototype,"clearable",2),o([a({type:Boolean,reflect:!0})],i.prototype,"multiple",2),o([a({type:Boolean,reflect:!0})],i.prototype,"autofocus",2),o([a({type:Boolean,attribute:"label-fixed",reflect:!0})],i.prototype,"labelFixed",2),o([a({type:String,attribute:"help-text",reflect:!0})],i.prototype,"helpText",2),o([a({type:String,attribute:"invalid-text",reflect:!0})],i.prototype,"customInvalidText",2),o([a({type:Boolean,attribute:"view-select-all",converter:y()})],i.prototype,"viewSelectAll",2),o([a({type:String,attribute:"select-all-text"})],i.prototype,"selectAllText",2),o([a({type:Boolean,attribute:"search-bar",reflect:!0})],i.prototype,"searchBar",2),o([a({type:String,attribute:"search-bar-placeholder",reflect:!0})],i.prototype,"searchBarPlaceholder",2),o([a({type:Boolean,attribute:"search-bar-loading-state",converter:y()})],i.prototype,"searchBarLoadingState",2),o([a({type:String,attribute:"search-not-found-text",reflect:!0})],i.prototype,"searchNotFoundText",2),o([a({type:String,attribute:"popover-clear-search-text",reflect:!0})],i.prototype,"popoverClearSearchText",2),o([h()],i.prototype,"_isPopoverOpen",2),o([h()],i.prototype,"_additionalSelectedOptionCount",2),o([h()],i.prototype,"_searchText",2),o([v(".selected-options")],i.prototype,"selectedOptionsContainer",2),o([S(".selected-options li")],i.prototype,"selectedOptionsItems",2),o([v(".popover")],i.prototype,"_popover",2),o([v(".select-input")],i.prototype,"_selectInput",2),o([m("bl-select")],i.prototype,"_onBlSelect",2),o([m("bl-search")],i.prototype,"_onBlSearch",2),o([h()],i.prototype,"_selectedOptions",2),o([h()],i.prototype,"dirty",2),o([v(".select-input")],i.prototype,"validationTarget",2),i=o([T("bl-select"),z()],i);export{i as a};
+//# sourceMappingURL=chunk-OAF3R4PW.js.map