@beeq/core 1.8.3 → 1.8.4

package/dist/components/bq-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["DATE_PICKER_TYPE","bqDatePickerCss","BqDatePickerStyle0","BqDatePicker","proxyCustomElement","H","callyElem","inputElem","labelElem","prefixElem","suffixElem","fallbackInputId","COMMON_EXPORT_PARTS","BUTTON_EXPORT_PARTS","internals","focusedDate","displayDate","hasLabel","hasPrefix","hasRangeEnd","hasSuffix","hasValue","autofocus","clearButtonLabel","disableClear","disabled","distance","firstDayOfWeek","formatOptions","day","month","year","form","formValidationMessage","isDateDisallowed","locale","max","min","months","monthsPerView","name","open","panelHeight","placeholder","placement","required","skidding","showOutsideDays","strategy","tentative","type","validationStatus","value","handleValueChange","formatDisplayValue","this","setFormValue","isNil","undefined","updateFormValidity","Array","isArray","some","val","length","isDefined","setFocusedDate","checkPropValues","validatePropValue","el","bqBlur","bqChange","bqClear","bqFocus","connectedCallback","isClient","import","componentWillLoad","formAssociatedCallback","formResetCallback","clear","handleOpenChange","ev","composedPath","includes","detail","handleClickOutside","button","isEventTargetChildOfElement","emit","handleBlur","handleFocus","formatFocusedDate","Date","toLocaleDateString","handleChange","isHTMLElement","target","dateValue","isNaN","getTime","handleCalendarChange","focus","handleCalendarRangeStart","handleCalendarRangeEnd","handleClearClick","stopPropagation","handleLabelSlotChange","hasSlotContent","handlePrefixSlotChange","handleSuffixSlotChange","generateCalendarMonth","offset","className","h","class","exportparts","generateCalendarMonths","from","_","i","dateRegex","match","exec","dateFormatter","Intl","DateTimeFormat","start","end","split","map","dateStr","formatRange","dates","date","format","join","states","toString","trim","add","setValidity","valueMissing","CalendarType","componentTypes","single","multi","range","render","CallyCalendar","labelId","key","part","id","htmlFor","ref","onSlotchange","slot","spanElem","autoComplete","autoCapitalize","readonly","spellcheck","onBlur","onFocus","onChange","appearance","size","onBqClick","pageBy","onRangestart","onRangeend","elem","color","label"],"sources":["../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts","../../packages/beeq/src/components/date-picker/scss/bq-date-picker.scss?tag=bq-date-picker&encapsulation=shadow","../../packages/beeq/src/components/date-picker/bq-date-picker.tsx"],"sourcesContent":["export type DaysOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport const DATE_PICKER_TYPE = ['single', 'multi', 'range'] as const;\nexport type TDatePickerType = (typeof DATE_PICKER_TYPE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                        Date picker styles                                  */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-date-picker.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__label {\n  @apply flex flex-grow items-center gap-[--bq-date-picker--gap] m-be-[--bq-date-picker--label-margin-bottom];\n  @apply text-[length:--bq-date-picker--label-text-size] text-[color:--bq-date-picker--label-text-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Date picker input group control                    */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-date-picker--border-radius] border-[length:--bq-date-picker--border-width] border-[color:--bq-date-picker--border-color];\n  // Padding\n  @apply pe-[--bq-date-picker--padding-end] ps-[--bq-date-picker--padding-start] p-b-[--bq-date-picker--paddingY];\n  // Text\n  @apply select-none text-[length:--bq-date-picker--text-size] text-[color:--bq-date-picker--text-color] placeholder:text-[color:--bq-date-picker--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-date-picker--border-style);\n\n  // Focus\n  &:not(.disabled):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n\n    @apply focus border-[color:--bq-focus];\n  }\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-date-picker__control--clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-date-picker__control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-date-picker__control.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-date-picker__control.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-date-picker__control.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--input {\n  @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply border-none min-bs-[--bq-date-picker--icon-size] min-is-0 p-b-0 p-i-0 m-b-0 m-i-0 focus:outline-none focus-visible:outline-none;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n\n  @apply rounded-xs border-none bs-auto p-b-0 p-i-0;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--prefix,\n.bq-date-picker__control--suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-date-picker--text-color];\n}\n\n.bq-date-picker__control--prefix {\n  @apply me-[--bq-date-picker--gap];\n}\n\n.bq-date-picker__control--suffix {\n  @apply ms-[--bq-date-picker--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-date-picker--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Customize Cally date picker                         */\n/* -------------------------------------------------------------------------- */\n\ncalendar-date,\ncalendar-range,\ncalendar-multi {\n  &::part(header) {\n    @apply justify-center gap-s;\n  }\n\n  &::part(heading) {\n    @apply p-b-xs2 p-i-xs;\n  }\n\n  &::part(button) {\n    @apply rounded-s border-0 bg-transparent transition-colors duration-200 p-b-xs2 p-i-xs2;\n    @apply focus-visible:focus hover:bg-hover-ui-primary;\n  }\n\n  &::part(container) {\n    @apply bg-[--bq-date-picker--background-color] p-b-0 p-i-0;\n  }\n}\n\ncalendar-month {\n  /* stylelint-disable-next-line custom-property-pattern */\n  --color-accent: var(--bq-ui--brand);\n\n  &::part(button) {\n    @apply flex items-center justify-center rounded-s bg-transparent font-default text-primary transition-colors duration-200 ease-in-out p-b-0 p-i-0;\n    @apply size-[--bq-date-picker--day-size] focus-visible:focus enabled:hover:bg-hover-secondary disabled:cursor-not-allowed;\n  }\n\n  &::part(button day disallowed) {\n    @apply cursor-not-allowed bg-transparent #{!important};\n  }\n\n  &::part(button day selected) {\n    @apply rounded-s bg-[--bq-date-picker--range-background-color] text-alt enabled:hover:bg-hover-ui-brand;\n  }\n\n  &::part(button day selected range-inner) {\n    @apply rounded-none bg-[--bq-date-picker--range-inner-background-color] text-primary hover:text-alt;\n  }\n\n  &::part(button day outside) {\n    @apply cursor-pointer text-secondary opacity-100;\n  }\n\n  &::part(today) {\n    @apply rounded-s border-[length:--bq-date-picker--currentDate-border-width] border-[color:--bq-date-picker--currentDate-border-color];\n\n    border-style: var(--bq-date-picker--border-style);\n  }\n\n  &::part(today selected) {\n    @apply text-alt;\n  }\n\n  &::part(today range-inner) {\n    @apply rounded-none;\n  }\n\n  &::part(today range-start) {\n    @apply rounded-s rounded-es-none;\n  }\n\n  &::part(today range-end) {\n    @apply rounded-s rounded-ee-none;\n  }\n\n  &::part(range-start) {\n    @apply rounded-ee-none rounded-se-none;\n  }\n\n  &::part(range-end) {\n    @apply rounded-es-none rounded-ss-none;\n  }\n\n  &::part(range-start range-end) {\n    @apply rounded-s;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { CalendarDate } from 'cally';\n\nimport { DATE_PICKER_TYPE, DaysOfWeek, TDatePickerType } from './bq-date-picker.types';\nimport { Placement } from '../../services/interfaces';\nimport {\n  hasSlotContent,\n  isClient,\n  isDefined,\n  isEventTargetChildOfElement,\n  isHTMLElement,\n  isNil,\n  validatePropValue,\n} from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\n/**\n * The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n *\n * @example How to use it\n * ```html\n * <bq-date-picker\n *   first-day-of-week=\"1\"\n *   locale=\"en-GB\"\n *   months-per-view=\"single\"\n *   months=\"2\"\n *   name=\"bq-date-picker\"\n *   placeholder=\"Enter your date\"\n *   placement=\"bottom-end\"\n *   show-outside-days=\"false\"\n *   type=\"range\"\n *   validation-status=\"none\"\n *   value=\"2024-05-25\"\n * >\n *   <label class=\"flex flex-grow items-center\" slot=\"label\">\n *     Date picker label\n *   </label>\n * </bq-date-picker>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/5793a9-date-picker\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n *\n * @attr {boolean} autofocus - If `true`, the Date picker input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Date picker input is disabled or not.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Date picker panel and the input element.\n * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.\n * @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n * @attr {string} form - The ID of the form that the Date picker input belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.\n * @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n * @attr {string} max - The latest date that can be selected.\n * @attr {string} min - The earliest date that can be selected.\n * @attr {number} months - Number of months to show when range is `true`.\n * @attr {string} name - The Date picker input name.\n * @attr {boolean} open - If `true`, the Date picker panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Date picker panel.\n * @attr {\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\"} placement - Position of the Date picker panel.\n * @attr {boolean} required - Indicates whether or not the Date picker input is required to be filled out before submitting the form.\n * @attr {number} skidding - Represents the skidding between the Date picker panel and the input element.\n * @attr {boolean} show-outside-days - Whether to show days outside the month.\n * @attr {string} strategy - Defines the strategy to position the Date picker panel.\n * @attr {string} tentative - The date that is tentatively selected, e.g. the start of a range selection.\n * @attr {\"single\" | \"multi\" | \"range\"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.\n * @attr {\"error\" | \"none\" | \"success\" | \"warning\"} validation-status - The validation status of the Select input.\n * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n *\n * @method clear - Clears the selected value.\n *\n * @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n *\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part calendar__button - Any button used in the calendar-month component.\n * @part calendar__button - Any button within the calendar-range component.\n * @part calendar__container - The calendar-range container for the entire component.\n * @part calendar__day - The buttons corresponding to each day in the calendar-month grid.\n * @part calendar__disabled - A button that is disabled due to min/max on the calendar-range component.\n * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.\n * @part calendar__head - The calendar-month table's header row.\n * @part calendar__header - The calendar-range container for the heading and buttons.\n * @part calendar__heading - The calendar-month heading container that labels the month.\n * @part calendar__heading - The calendar-range heading containing the month and year.\n * @part calendar__next - The next page button on the calendar-range component.\n * @part calendar__outside - Any days which are outside the current month.\n * @part calendar__previous - The previous page button on the calendar-range component.\n * @part calendar__range-end - The day at the end of a date range.\n * @part calendar__range-inner - Any days between the start and end of a date range.\n * @part calendar__range-start - The day at the start of a date range.\n * @part calendar__selected - Any days which are selected.\n * @part calendar__table - The calendar-month <table> element.\n * @part calendar__td - The calendar-month table's body cells.\n * @part calendar__th - The calendar-month table's header cells.\n * @part calendar__today - The Today's day.\n * @part calendar__tr - Any row within the table on the calendar-month component.\n * @part calendar__week - The calendar-month table's body rows.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The date picker panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n *\n * @cssprop --bq-date-picker--background-color - Date picker background color.\n * @cssprop --bq-date-picker--border-color - Date picker border color.\n * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.\n * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.\n * @cssprop --bq-date-picker--border-radius - Date picker border radius.\n * @cssprop --bq-date-picker--border-style - Date picker border style.\n * @cssprop --bq-date-picker--border-width - Date picker border width.\n * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.\n * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.\n * @cssprop --bq-date-picker--day-size - Date picker button day size.\n * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.\n * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.\n * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.\n * @cssprop --bq-date-picker--label-text-color - Date picker label text color.\n * @cssprop --bq-date-picker--label-text-size - Date picker label text size.\n * @cssprop --bq-date-picker--padding-end - Date picker padding end.\n * @cssprop --bq-date-picker--padding-start - Date picker padding start.\n * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.\n * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.\n * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.\n * @cssprop --bq-date-picker--text-color - Date picker text color.\n * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.\n * @cssprop --bq-date-picker--text-size - Date picker text size.\n */\n@Component({\n  tag: 'bq-date-picker',\n  styleUrl: './scss/bq-date-picker.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqDatePicker {\n  // Own Properties\n  // ====================\n\n  private callyElem?: InstanceType<typeof CalendarDate>;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private fallbackInputId = 'date-picker';\n\n  // Export parts of the calendar-month component\n  private readonly COMMON_EXPORT_PARTS =\n    'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';\n  private readonly BUTTON_EXPORT_PARTS =\n    'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals: ElementInternals;\n  @Element() el!: HTMLBqDatePickerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() focusedDate: string;\n  @State() displayDate: string;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasRangeEnd = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /** If `true`, the Date picker input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /** If `true`, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /**\n   * Indicates whether the Date picker input is disabled or not.\n   * If `true`, the Date picker is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the Date picker panel and the input element. */\n  @Prop({ reflect: true }) distance?: number = 8;\n\n  /** The first day of the week, where Sunday is 0, Monday is 1, etc */\n  @Prop({ reflect: true }) firstDayOfWeek?: DaysOfWeek = 1;\n\n  /** The options to use when formatting the displayed value.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n   */\n  @Prop() formatOptions: Intl.DateTimeFormatOptions = {\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n  };\n\n  /** The ID of the form that the Date picker input belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message (mandatory if `required` is set) */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** A function that takes a date and returns true if the date should not be selectable */\n  @Prop({ reflect: true }) isDateDisallowed?: (date: Date) => boolean;\n\n  /** The locale for formatting dates. If not set, will use the browser's locale.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n   */\n  @Prop({ reflect: true }) locale: Intl.LocalesArgument = 'en-GB';\n\n  /** The latest date that can be selected */\n  @Prop({ reflect: true }) max?: string;\n\n  /** The earliest date that can be selected */\n  @Prop({ reflect: true }) min?: string;\n\n  /** Number of months to show when range is `true` */\n  @Prop({ reflect: true }) months: number;\n\n  /**\n   * Specifies how the next/previous buttons should navigate the calendar.\n   * - single: The buttons will navigate by a single month at a time.\n   * - months: The buttons will navigate by the number of months displayed per view.\n   */\n  @Prop({ reflect: true }) monthsPerView: 'single' | 'months' = 'single';\n\n  /** The Date picker input name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, the Date picker panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the Date picker panel. */\n  @Prop({ reflect: true, mutable: true }) panelHeight?: string = 'auto';\n\n  /** The Date picker input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** Position of the Date picker panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-end';\n\n  /** Indicates whether or not the Date picker input is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** Represents the skidding between the Date picker panel and the input element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Whether to show days outside the month */\n  @Prop({ reflect: true }) showOutsideDays: boolean = false;\n\n  /** Defines the strategy to position the Date picker panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  /** The date that is tentatively selected e.g. the start of a range selection  */\n  @Prop({ reflect: true, mutable: true }) tentative?: string;\n\n  /** It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection */\n  @Prop({ reflect: true }) type: TDatePickerType = 'single';\n\n  /**\n   * The validation status of the Select input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n   * All dates are expected in ISO-8601 format (YYYY-MM-DD). */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    const { formatDisplayValue, internals, value } = this;\n\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n    this.updateFormValidity();\n\n    if (Array.isArray(value)) {\n      this.hasValue = value.some((val) => val.length > 0);\n      return;\n    }\n\n    this.hasValue = isDefined(value);\n    this.displayDate = formatDisplayValue(value);\n\n    this.setFocusedDate();\n  }\n\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(DATE_PICKER_TYPE, 'single', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqDatePickerElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqDatePickerElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqDatePickerElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqDatePickerElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  async connectedCallback() {\n    if (!isClient()) return;\n\n    await import('cally');\n  }\n\n  componentWillLoad() {\n    this.handleValueChange();\n  }\n\n  formAssociatedCallback() {\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.clear();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqOpen', { capture: true })\n  handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n    if (!ev.composedPath().includes(this.el)) return;\n\n    this.open = ev.detail.open;\n    this.setFocusedDate();\n  }\n\n  @Listen('click', { target: 'body', capture: true })\n  handleClickOutside(ev: MouseEvent) {\n    const { open, type, hasRangeEnd } = this;\n    if (!open || type !== 'range' || ev.button !== 0) return;\n    if (isEventTargetChildOfElement(ev, this.el) || hasRangeEnd) return;\n    if (isEventTargetChildOfElement(ev, this.el)) return;\n\n    if (!hasRangeEnd) {\n      this.tentative = undefined;\n      this.hasRangeEnd = false;\n    }\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Clears the selected value.\n   *\n   * @return {Promise<void>}\n   * @memberof BqInput\n   */\n  @Method()\n  async clear(): Promise<void> {\n    if (this.disabled) return;\n\n    this.value = undefined;\n    this.internals.setFormValue(undefined);\n    this.bqClear.emit(this.el);\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private setFocusedDate = () => {\n    if (!this.callyElem) return;\n    // We need to set the focused date in the calendar component via a ref\n    // because it doesn't work when passed as a prop (the Cally element does not re-render)\n    this.focusedDate = this.value ? this.formatFocusedDate(this.value) : new Date().toLocaleDateString('fr-CA');\n    this.callyElem.focusedDate = this.focusedDate;\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n    if (!isHTMLElement(ev.target, 'input')) return;\n\n    const dateValue = new Date(ev.target.value);\n    if (!isNaN(dateValue.getTime())) {\n      // We need to force the value to respect the format: yyyy-mm-dd, hence the hardcoded locale\n      this.value = dateValue.toLocaleDateString('fr-CA');\n      this.displayDate = this.formatDisplayValue(this.value);\n      this.internals.setFormValue(`${this.value}`);\n      this.bqChange.emit({ value: this.value, el: this.el });\n    }\n  };\n\n  private handleCalendarChange = (ev: Event) => {\n    const { value } = ev.target as unknown as { value: string };\n\n    this.value = value;\n    this.displayDate = this.formatDisplayValue(this.value);\n    this.inputElem.value = this.displayDate;\n    this.inputElem.focus();\n\n    this.internals.setFormValue(`${this.value}`);\n    this.bqChange.emit({ value: this.value, el: this.el });\n\n    this.open = this.type === 'multi';\n  };\n\n  private handleCalendarRangeStart = (ev: CustomEvent) => {\n    this.hasRangeEnd = false;\n    this.tentative = new Date(ev.detail).toLocaleDateString('fr-CA');\n  };\n\n  private handleCalendarRangeEnd = () => {\n    this.hasRangeEnd = true;\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    if (this.disabled) return;\n\n    this.inputElem.value = '';\n    this.value = this.inputElem.value;\n    this.hasRangeEnd = false;\n\n    this.bqClear.emit(this.el);\n    this.bqChange.emit({ value: this.value, el: this.el });\n    this.internals.setFormValue(undefined);\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleLabelSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n  };\n\n  private handlePrefixSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n  };\n\n  private handleSuffixSlotChange = () => {\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n  };\n\n  private generateCalendarMonth = (offset?: number, className = ''): Element => {\n    return (\n      <calendar-month\n        offset={offset}\n        class={className}\n        exportparts={`${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}`}\n      />\n    );\n  };\n\n  /**\n   * Generates an array of Elements representing the calendar months.\n   *\n   * If the type of the date picker is 'range' or 'multi' and the number of months is specified,\n   * it generates an array of calendar months with the specified length. Each month will have an offset\n   * and a class name based on its position in the array. The offset is used to determine the month to display,\n   * and the class name is used for responsive design.\n   *\n   * If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,\n   * it generates an array with a single calendar month.\n   *\n   * @returns {Element[]} An array of elements representing the calendar months.\n   */\n  private generateCalendarMonths = (): Element[] => {\n    if (this.type === 'range' || (this.type === 'multi' && this.months)) {\n      return Array.from({ length: this.months }, (_, i) => {\n        const offset = i > 0 ? i : undefined;\n        const className = offset ? 'hidden sm:block' : '';\n        return this.generateCalendarMonth(offset, className);\n      });\n    }\n\n    return [this.generateCalendarMonth()];\n  };\n\n  /**\n   * Extracts and returns the first date part from a given string.\n   * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value\n   * should be the focused date in the calendar.\n   *\n   * @param value - The value to be processed, can be a string.\n   * @returns The extracted last date portion of the value.\n   */\n  private formatFocusedDate = (value: string): string | null => {\n    if (!value) return;\n\n    const dateRegex = /\\b\\d{4}-\\d{2}-\\d{2}\\b/;\n    const match = dateRegex.exec(value);\n    return match ? match[0] : null;\n  };\n\n  private formatDisplayValue = (value: string): string | undefined => {\n    if (!value) return;\n\n    const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);\n\n    if (this.type === 'range') {\n      const [start, end] = value.split('/').map((dateStr) => new Date(dateStr));\n      return dateFormatter.formatRange(start, end);\n    }\n\n    if (this.type === 'multi') {\n      const dates = value.split(' ').map((dateStr) => new Date(dateStr));\n      return dates.map((date) => dateFormatter.format(date)).join(', ');\n    }\n\n    return dateFormatter.format(new Date(value));\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, inputElem } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.toString().trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private get CalendarType() {\n    const componentTypes = {\n      single: 'calendar-date',\n      multi: 'calendar-multi',\n      range: 'calendar-range',\n    } as const;\n\n    // Return the corresponding component type, based on the type prop value\n    return componentTypes[this.type] || componentTypes.single;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const CallyCalendar = this.CalendarType;\n    const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;\n\n    return (\n      <div class=\"bq-date-picker\" part=\"base\">\n        {/* Label */}\n        <label\n          id={labelId}\n          class={{ 'bq-date-picker__label': true, '!hidden': !this.hasLabel }}\n          aria-label={this.name || this.fallbackInputId}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n        </label>\n        {/* Select date picker dropdown */}\n        <bq-dropdown\n          class=\"bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto\"\n          disabled={this.disabled}\n          distance={this.distance}\n          open={this.open}\n          panelHeight={this.panelHeight}\n          placement={this.placement}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          exportparts=\"panel\"\n        >\n          {/* Input control group */}\n          <div\n            class={{\n              'bq-date-picker__control': true,\n              [`validation-${this.validationStatus}`]: true,\n              disabled: this.disabled,\n            }}\n            part=\"control\"\n            slot=\"trigger\"\n          >\n            {/* Prefix */}\n            <span\n              class={{ 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }}\n              ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n              part=\"prefix\"\n            >\n              <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n            </span>\n            {/* HTML Input */}\n            <input\n              id={this.name || this.fallbackInputId}\n              class=\"bq-date-picker__control--input\"\n              autoComplete=\"off\"\n              autoCapitalize=\"off\"\n              aria-disabled={this.disabled ? 'true' : 'false'}\n              aria-controls={`${this.name}`}\n              aria-haspopup=\"dialog\"\n              disabled={this.disabled}\n              form={this.form}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.type !== 'single'}\n              ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n              required={this.required}\n              spellcheck={false}\n              type=\"text\"\n              value={this.displayDate}\n              part=\"input\"\n              // Events\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onChange={this.handleChange}\n            />\n            {/* Clear Button */}\n            {this.hasValue && !this.disabled && !this.disableClear && (\n              // The clear button will be visible as long as the input has a value\n              // and the parent group is hovered or has focus-within\n              <bq-button\n                class=\"bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden\"\n                appearance=\"text\"\n                aria-label={this.clearButtonLabel}\n                size=\"small\"\n                onBqClick={this.handleClearClick}\n                part=\"clear-btn\"\n                exportparts=\"button\"\n              >\n                <slot name=\"clear-icon\">\n                  <bq-icon name=\"x-circle\" class=\"flex\" />\n                </slot>\n              </bq-button>\n            )}\n            {/* Suffix */}\n            <span\n              class=\"bq-date-picker__control--suffix\"\n              ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange}>\n                <bq-icon name=\"calendar-blank\" class=\"flex\" />\n              </slot>\n            </span>\n          </div>\n          <CallyCalendar\n            isDateDisallowed={this.isDateDisallowed}\n            locale={this.locale as string}\n            value={this.value}\n            min={this.min}\n            max={this.max}\n            months={this.months}\n            tentative={this.tentative}\n            pageBy={this.monthsPerView}\n            firstDayOfWeek={this.firstDayOfWeek}\n            showOutsideDays={this.showOutsideDays}\n            onChange={this.handleCalendarChange}\n            onRangestart={this.handleCalendarRangeStart}\n            onRangeend={this.handleCalendarRangeEnd}\n            exportparts=\"container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading\"\n            ref={(elem) => (this.callyElem = elem as InstanceType<typeof CalendarDate>)}\n          >\n            <bq-icon color=\"text--primary\" slot=\"previous\" name=\"caret-left\" label=\"Previous\" />\n            <bq-icon color=\"text--primary\" slot=\"next\" name=\"caret-right\" label=\"Next\" />\n\n            <div class=\"flex flex-wrap justify-center gap-[--bq-spacing-m]\">{this.generateCalendarMonths()}</div>\n          </CallyCalendar>\n        </bq-dropdown>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;gcAEO,MAAMA,EAAmB,CAAC,SAAU,QAAS,SCFpD,MAAMC,EAAkB,2rkCACxB,MAAAC,EAAeD,E,MC6JFE,EAAYC,EAAA,MAAAD,UAAAE,E,4OAIfC,UACAC,UACAC,UACAC,WACAC,WAEAC,gBAAkB,cAGTC,oBACf,yGACeC,oBACf,2KAKiBC,U,qBAOVC,YACAC,YACAC,SAAW,MACXC,UAAY,MACZC,YAAc,MACdC,UAAY,MACZC,SAAW,MAMKC,UAGAC,iBAAoB,cAGpBC,aAAgB,MAMhBC,SAAqB,MAGrBC,SAAoB,EAGpBC,eAA8B,EAK/CC,cAA4C,CAClDC,IAAK,UACLC,MAAO,QACPC,KAAM,WAIiBC,KAGAC,sBAGAC,iBAKAC,OAA+B,QAG/BC,IAGAC,IAGAC,OAOAC,cAAqC,SAGrCC,KAGeC,KAAiB,MAGjBC,YAAuB,OAGtCC,YAGAC,UAAwB,aAGxBC,SAGAC,SAAoB,EAGpBC,gBAA2B,MAG3BC,SAAkC,QAGnBC,UAGfC,KAAwB,SAYxBC,iBAAqC,OAItBC,MAMxC,iBAAAC,GACE,MAAMC,mBAAEA,EAAkBxC,UAAEA,EAASsC,MAAEA,GAAUG,KAEjDzC,EAAU0C,cAAcC,EAAML,GAAS,GAAGA,IAAUM,WACpDH,KAAKI,qBAEL,GAAIC,MAAMC,QAAQT,GAAQ,CACxBG,KAAKlC,SAAW+B,EAAMU,MAAMC,GAAQA,EAAIC,OAAS,IACjD,M,CAGFT,KAAKlC,SAAW4C,EAAUb,GAC1BG,KAAKvC,YAAcsC,EAAmBF,GAEtCG,KAAKW,gB,CAIP,eAAAC,GACEC,EAAkBpE,EAAkB,SAAUuD,KAAKc,GAAI,O,CAQhDC,OAMAC,SAGAC,QAGAC,QAMT,uBAAMC,GACJ,IAAKC,IAAY,aAEXC,OAAO,kB,CAGf,iBAAAC,GACEtB,KAAKF,mB,CAGP,sBAAAyB,GACEvB,KAAKI,oB,CAGP,iBAAAoB,GACE,GAAItB,EAAMF,KAAKH,OAAQ,OAEvBG,KAAKyB,O,CAOP,gBAAAC,CAAiBC,GACf,IAAKA,EAAGC,eAAeC,SAAS7B,KAAKc,IAAK,OAE1Cd,KAAKd,KAAOyC,EAAGG,OAAO5C,KACtBc,KAAKW,gB,CAIP,kBAAAoB,CAAmBJ,GACjB,MAAMzC,KAAEA,EAAIS,KAAEA,EAAI/B,YAAEA,GAAgBoC,KACpC,IAAKd,GAAQS,IAAS,SAAWgC,EAAGK,SAAW,EAAG,OAClD,GAAIC,EAA4BN,EAAI3B,KAAKc,KAAOlD,EAAa,OAC7D,GAAIqE,EAA4BN,EAAI3B,KAAKc,IAAK,OAE9C,IAAKlD,EAAa,CAChBoC,KAAKN,UAAYS,UACjBH,KAAKpC,YAAc,K,EAkBvB,WAAM6D,GACJ,GAAIzB,KAAK9B,SAAU,OAEnB8B,KAAKH,MAAQM,UACbH,KAAKzC,UAAU0C,aAAaE,WAC5BH,KAAKiB,QAAQiB,KAAKlC,KAAKc,G,CAQjBqB,WAAa,KACnB,GAAInC,KAAK9B,SAAU,OAEnB8B,KAAKe,OAAOmB,KAAKlC,KAAKc,GAAG,EAGnBsB,YAAc,KACpB,GAAIpC,KAAK9B,SAAU,OAEnB8B,KAAKkB,QAAQgB,KAAKlC,KAAKc,GAAG,EAGpBH,eAAiB,KACvB,IAAKX,KAAKjD,UAAW,OAGrBiD,KAAKxC,YAAcwC,KAAKH,MAAQG,KAAKqC,kBAAkBrC,KAAKH,QAAS,IAAIyC,MAAOC,mBAAmB,SACnGvC,KAAKjD,UAAUS,YAAcwC,KAAKxC,WAAW,EAGvCgF,aAAgBb,IACtB,GAAI3B,KAAK9B,SAAU,OACnB,IAAKuE,EAAcd,EAAGe,OAAQ,SAAU,OAExC,MAAMC,EAAY,IAAIL,KAAKX,EAAGe,OAAO7C,OACrC,IAAK+C,MAAMD,EAAUE,WAAY,CAE/B7C,KAAKH,MAAQ8C,EAAUJ,mBAAmB,SAC1CvC,KAAKvC,YAAcuC,KAAKD,mBAAmBC,KAAKH,OAChDG,KAAKzC,UAAU0C,aAAa,GAAGD,KAAKH,SACpCG,KAAKgB,SAASkB,KAAK,CAAErC,MAAOG,KAAKH,MAAOiB,GAAId,KAAKc,I,GAI7CgC,qBAAwBnB,IAC9B,MAAM9B,MAAEA,GAAU8B,EAAGe,OAErB1C,KAAKH,MAAQA,EACbG,KAAKvC,YAAcuC,KAAKD,mBAAmBC,KAAKH,OAChDG,KAAKhD,UAAU6C,MAAQG,KAAKvC,YAC5BuC,KAAKhD,UAAU+F,QAEf/C,KAAKzC,UAAU0C,aAAa,GAAGD,KAAKH,SACpCG,KAAKgB,SAASkB,KAAK,CAAErC,MAAOG,KAAKH,MAAOiB,GAAId,KAAKc,KAEjDd,KAAKd,KAAOc,KAAKL,OAAS,OAAO,EAG3BqD,yBAA4BrB,IAClC3B,KAAKpC,YAAc,MACnBoC,KAAKN,UAAY,IAAI4C,KAAKX,EAAGG,QAAQS,mBAAmB,QAAQ,EAG1DU,uBAAyB,KAC/BjD,KAAKpC,YAAc,IAAI,EAGjBsF,iBAAoBvB,IAC1B,GAAI3B,KAAK9B,SAAU,OAEnB8B,KAAKhD,UAAU6C,MAAQ,GACvBG,KAAKH,MAAQG,KAAKhD,UAAU6C,MAC5BG,KAAKpC,YAAc,MAEnBoC,KAAKiB,QAAQiB,KAAKlC,KAAKc,IACvBd,KAAKgB,SAASkB,KAAK,CAAErC,MAAOG,KAAKH,MAAOiB,GAAId,KAAKc,KACjDd,KAAKzC,UAAU0C,aAAaE,WAC5BH,KAAKhD,UAAU+F,QAEfpB,EAAGwB,iBAAiB,EAGdC,sBAAwB,KAC9BpD,KAAKtC,SAAW2F,EAAerD,KAAK/C,UAAU,EAGxCqG,uBAAyB,KAC/BtD,KAAKrC,UAAY0F,EAAerD,KAAK9C,WAAW,EAG1CqG,uBAAyB,KAC/BvD,KAAKnC,UAAYwF,EAAerD,KAAK7C,WAAW,EAG1CqG,sBAAwB,CAACC,EAAiBC,EAAY,KAE1DC,EAAA,kBACEF,OAAQA,EACRG,MAAOF,EACPG,YAAa,GAAG7D,KAAK3C,uBAAuB2C,KAAK1C,wBAkB/CwG,uBAAyB,KAC/B,GAAI9D,KAAKL,OAAS,SAAYK,KAAKL,OAAS,SAAWK,KAAKjB,OAAS,CACnE,OAAOsB,MAAM0D,KAAK,CAAEtD,OAAQT,KAAKjB,SAAU,CAACiF,EAAGC,KAC7C,MAAMR,EAASQ,EAAI,EAAIA,EAAI9D,UAC3B,MAAMuD,EAAYD,EAAS,kBAAoB,GAC/C,OAAOzD,KAAKwD,sBAAsBC,EAAQC,EAAU,G,CAIxD,MAAO,CAAC1D,KAAKwD,wBAAwB,EAW/BnB,kBAAqBxC,IAC3B,IAAKA,EAAO,OAEZ,MAAMqE,EAAY,wBAClB,MAAMC,EAAQD,EAAUE,KAAKvE,GAC7B,OAAOsE,EAAQA,EAAM,GAAK,IAAI,EAGxBpE,mBAAsBF,IAC5B,IAAKA,EAAO,OAEZ,MAAMwE,EAAgB,IAAIC,KAAKC,eAAevE,KAAKpB,OAAQoB,KAAK3B,eAEhE,GAAI2B,KAAKL,OAAS,QAAS,CACzB,MAAO6E,EAAOC,GAAO5E,EAAM6E,MAAM,KAAKC,KAAKC,GAAY,IAAItC,KAAKsC,KAChE,OAAOP,EAAcQ,YAAYL,EAAOC,E,CAG1C,GAAIzE,KAAKL,OAAS,QAAS,CACzB,MAAMmF,EAAQjF,EAAM6E,MAAM,KAAKC,KAAKC,GAAY,IAAItC,KAAKsC,KACzD,OAAOE,EAAMH,KAAKI,GAASV,EAAcW,OAAOD,KAAOE,KAAK,K,CAG9D,OAAOZ,EAAcW,OAAO,IAAI1C,KAAKzC,GAAO,EAGtCO,mBAAqB,KAC3B,MAAM1B,sBAAEA,EAAqBnB,UAAEA,EAAS+B,SAAEA,EAAQO,MAAEA,EAAK7C,UAAEA,GAAcgD,KAGzEzC,GAAW2H,OAAOzD,QAElB,GAAInC,KAAcO,GAASA,EAAMsF,WAAWC,SAAW,IAAK,CAE1D7H,GAAW2H,OAAOG,IAAI,WACtB9H,GAAW+H,YAAY,CAAEC,aAAc,MAAQ7G,EAAuB1B,GACtE,M,CAIFO,GAAW2H,OAAOG,IAAI,SACtB9H,GAAW+H,YAAY,GAAG,EAG5B,gBAAYE,GACV,MAAMC,EAAiB,CACrBC,OAAQ,gBACRC,MAAO,iBACPC,MAAO,kBAIT,OAAOH,EAAezF,KAAKL,OAAS8F,EAAeC,M,CAOrD,MAAAG,GACE,MAAMC,EAAgB9F,KAAKwF,aAC3B,MAAMO,EAAU,yBAAyB/F,KAAKf,MAAQe,KAAK5C,kBAE3D,OACEuG,EAAA,OAAAqC,IAAA,2CAAKpC,MAAM,iBAAiBqC,KAAK,QAE/BtC,EAAA,SAAAqC,IAAA,2CACEE,GAAIH,EACJnC,MAAO,CAAE,wBAAyB,KAAM,WAAY5D,KAAKtC,UAAU,aACvDsC,KAAKf,MAAQe,KAAK5C,gBAC9B+I,QAASnG,KAAKf,MAAQe,KAAK5C,gBAC3BgJ,IAAMnJ,GAAgC+C,KAAK/C,UAAYA,EACvDgJ,KAAK,SAELtC,EAAA,QAAAqC,IAAA,2CAAM/G,KAAK,QAAQoH,aAAcrG,KAAKoD,yBAGxCO,EAAA,eAAAqC,IAAA,2CACEpC,MAAM,iFACN1F,SAAU8B,KAAK9B,SACfC,SAAU6B,KAAK7B,SACfe,KAAMc,KAAKd,KACXC,YAAaa,KAAKb,YAClBE,UAAWW,KAAKX,UAChBE,SAAUS,KAAKT,SACfE,SAAUO,KAAKP,SACfoE,YAAY,SAGZF,EAAA,OAAAqC,IAAA,2CACEpC,MAAO,CACL,0BAA2B,KAC3B,CAAC,cAAc5D,KAAKJ,oBAAqB,KACzC1B,SAAU8B,KAAK9B,UAEjB+H,KAAK,UACLK,KAAK,WAGL3C,EAAA,QAAAqC,IAAA,2CACEpC,MAAO,CAAE,kCAAmC,KAAM,WAAY5D,KAAKrC,WACnEyI,IAAMG,GAA+BvG,KAAK9C,WAAaqJ,EACvDN,KAAK,UAELtC,EAAA,QAAAqC,IAAA,2CAAM/G,KAAK,SAASoH,aAAcrG,KAAKsD,0BAGzCK,EAAA,SAAAqC,IAAA,2CACEE,GAAIlG,KAAKf,MAAQe,KAAK5C,gBACtBwG,MAAM,iCACN4C,aAAa,MACbC,eAAe,MAAK,gBACLzG,KAAK9B,SAAW,OAAS,QAAO,gBAChC,GAAG8B,KAAKf,OAAM,gBACf,SACdf,SAAU8B,KAAK9B,SACfO,KAAMuB,KAAKvB,KACXQ,KAAMe,KAAKf,KACXG,YAAaY,KAAKZ,YAClBsH,SAAU1G,KAAKL,OAAS,SACxByG,IAAMpJ,GAAiCgD,KAAKhD,UAAYA,EACxDsC,SAAUU,KAAKV,SACfqH,WAAY,MACZhH,KAAK,OACLE,MAAOG,KAAKvC,YACZwI,KAAK,QAELW,OAAQ5G,KAAKmC,WACb0E,QAAS7G,KAAKoC,YACd0E,SAAU9G,KAAKwC,eAGhBxC,KAAKlC,WAAakC,KAAK9B,WAAa8B,KAAK/B,cAGxC0F,EAAA,aAAAqC,IAAA,2CACEpC,MAAM,mEACNmD,WAAW,OAAM,aACL/G,KAAKhC,iBACjBgJ,KAAK,QACLC,UAAWjH,KAAKkD,iBAChB+C,KAAK,YACLpC,YAAY,UAEZF,EAAA,QAAAqC,IAAA,2CAAM/G,KAAK,cACT0E,EAAA,WAAAqC,IAAA,2CAAS/G,KAAK,WAAW2E,MAAM,WAKrCD,EAAA,QAAAqC,IAAA,2CACEpC,MAAM,kCACNwC,IAAMG,GAA+BvG,KAAK7C,WAAaoJ,EACvDN,KAAK,UAELtC,EAAA,QAAAqC,IAAA,2CAAM/G,KAAK,SAASoH,aAAcrG,KAAKuD,wBACrCI,EAAA,WAAAqC,IAAA,2CAAS/G,KAAK,iBAAiB2E,MAAM,YAI3CD,EAACmC,EAAa,CAAAE,IAAA,2CACZrH,iBAAkBqB,KAAKrB,iBACvBC,OAAQoB,KAAKpB,OACbiB,MAAOG,KAAKH,MACZf,IAAKkB,KAAKlB,IACVD,IAAKmB,KAAKnB,IACVE,OAAQiB,KAAKjB,OACbW,UAAWM,KAAKN,UAChBwH,OAAQlH,KAAKhB,cACbZ,eAAgB4B,KAAK5B,eACrBoB,gBAAiBQ,KAAKR,gBACtBsH,SAAU9G,KAAK8C,qBACfqE,aAAcnH,KAAKgD,yBACnBoE,WAAYpH,KAAKiD,uBACjBY,YAAY,sLACZuC,IAAMiB,GAAUrH,KAAKjD,UAAYsK,GAEjC1D,EAAA,WAAAqC,IAAA,2CAASsB,MAAM,gBAAgBhB,KAAK,WAAWrH,KAAK,aAAasI,MAAM,aACvE5D,EAAA,WAAAqC,IAAA,2CAASsB,MAAM,gBAAgBhB,KAAK,OAAOrH,KAAK,cAAcsI,MAAM,SAEpE5D,EAAA,OAAAqC,IAAA,2CAAKpC,MAAM,sDAAsD5D,KAAK8D,4B","ignoreList":[]}
+{"version":3,"names":["DATE_PICKER_TYPE","CALLY_SCRIPT_ATTRIBUTE","CALLY_LIB_VERSION","CALLY_LIB_HASH","isLibraryLoaded","isCallyLibraryLoaded","document","querySelector","loadCallyLibrary","async","loadScript","type","src","attributes","crossOrigin","integrity","error","Error","message","Promise","resolve","reject","script","createElement","onload","onerror","Object","entries","forEach","key","value","setAttribute","head","appendChild","bqDatePickerCss","BqDatePickerStyle0","BqDatePicker","proxyCustomElement","H","callyElem","inputElem","labelElem","prefixElem","suffixElem","fallbackInputId","COMMON_EXPORT_PARTS","BUTTON_EXPORT_PARTS","internals","isCallyLoaded","focusedDate","displayDate","hasLabel","hasPrefix","hasRangeEnd","hasSuffix","hasValue","autofocus","clearButtonLabel","disableClear","disabled","distance","firstDayOfWeek","formatOptions","day","month","year","form","formValidationMessage","isDateDisallowed","locale","max","min","months","monthsPerView","name","open","panelHeight","placeholder","placement","required","skidding","showOutsideDays","strategy","tentative","validationStatus","handleValueChange","formatDisplayValue","this","setFormValue","isNil","undefined","updateFormValidity","Array","isArray","some","val","length","isDefined","setFocusedDate","checkPropValues","validatePropValue","el","bqBlur","bqChange","bqClear","bqFocus","connectedCallback","isClient","console","componentDidLoad","handleSlotChange","formAssociatedCallback","formResetCallback","clear","handleOpenChange","ev","composedPath","includes","detail","handleClickOutside","button","isEventTargetChildOfElement","emit","handleBlur","handleFocus","formatFocusedDate","Date","toLocaleDateString","handleChange","isHTMLElement","target","dateValue","isNaN","getTime","handleCalendarChange","focus","handleCalendarRangeStart","handleCalendarRangeEnd","handleClearClick","stopPropagation","hasSlotContent","generateCalendarMonth","offset","className","h","class","exportparts","generateCalendarMonths","from","_","i","dateRegex","match","exec","dateFormatter","Intl","DateTimeFormat","start","end","split","map","dateStr","formatRange","dates","date","format","join","states","toString","trim","add","setValidity","valueMissing","CalendarType","componentTypes","single","multi","range","render","CallyCalendar","labelId","part","id","htmlFor","ref","onSlotchange","slot","spanElem","autoComplete","autoCapitalize","readonly","spellcheck","onBlur","onFocus","onChange","appearance","size","onBqClick","pageBy","onRangestart","onRangeend","elem","color","label"],"sources":["../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts","../../packages/beeq/src/components/date-picker/helper/callyLibrary.ts","../../packages/beeq/src/components/date-picker/scss/bq-date-picker.scss?tag=bq-date-picker&encapsulation=shadow","../../packages/beeq/src/components/date-picker/bq-date-picker.tsx"],"sourcesContent":["export type DaysOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport const DATE_PICKER_TYPE = ['single', 'multi', 'range'] as const;\nexport type TDatePickerType = (typeof DATE_PICKER_TYPE)[number];\n\nexport type TCalendarDate = {\n  focusedDate: string;\n  value: string;\n  min?: string;\n  max?: string;\n  months?: number;\n  tentative?: string;\n  pageBy?: 'single' | 'months';\n  firstDayOfWeek?: number;\n  showOutsideDays?: boolean;\n  isDateDisallowed?: (date: Date) => boolean;\n  locale?: string;\n  onChange?: (ev: Event) => void;\n  onRangestart?: (ev: CustomEvent) => void;\n  onRangeend?: (ev: CustomEvent) => void;\n};\n","/* -------------------------------------------------------------------------- */\n/*                         Cally Library loader helper                        */\n/* -------------------------------------------------------------------------- */\n\nconst CALLY_SCRIPT_ATTRIBUTE = 'data-cally-library';\n//❗ Make sure to update the version here when the library releases a new version\nconst CALLY_LIB_VERSION = '0.8.0';\n/**\n * ❗ Make sure to update the hash here if the `CALLY_LIB_VERSION` is updated\n * This hash is used to ensure the integrity of the library when loading it\n * from a CDN.\n * @see https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity\n */\nconst CALLY_LIB_HASH = 'sha384-giuY/f8D3+ehgOTmQMr4HvrreOITDmvXsZuDCJ1csQ+3dURHA24NqRd8lkSI6uGF';\n\nlet isLibraryLoaded = false;\n\n/**\n * Checks if the Cally library is already loaded in the document\n * @returns {boolean} True if the library is loaded\n */\nexport const isCallyLibraryLoaded = (): boolean => {\n  // This might be a bit redundant, but it's a sanity check to ensure the library is actually loaded\n  return isLibraryLoaded || document.querySelector(`script[${CALLY_SCRIPT_ATTRIBUTE}]`) !== null;\n};\n\n/**\n * Loads the Cally library for the date picker component\n * @throws {Error} If the library fails to load\n * @return {Promise<void>}\n */\nexport const loadCallyLibrary = async (): Promise<void> => {\n  if (isCallyLibraryLoaded()) return;\n\n  try {\n    await loadScript({\n      type: 'module',\n      src: `https://unpkg.com/cally@${CALLY_LIB_VERSION}/dist/cally.js`,\n      attributes: {\n        [CALLY_SCRIPT_ATTRIBUTE]: '',\n        crossOrigin: 'anonymous',\n        integrity: CALLY_LIB_HASH,\n      },\n    });\n\n    isLibraryLoaded = true;\n  } catch (error) {\n    isLibraryLoaded = false;\n    throw new Error(`Failed to load the cally library: ${error instanceof Error ? error.message : 'Unknown error'}`);\n  }\n};\n\ninterface ScriptConfig {\n  type: string;\n  src: string;\n  attributes?: Record<string, string>;\n}\n\n/**\n * Helper function to load a script with given configuration\n * @param {Object} config - Script configuration\n * @param {string} config.type - The type of the script\n * @param {string} config.src - The source URL of the script\n * @param {Object} [config.attributes] - Additional attributes to set on the script element\n * @returns {Promise<void>}\n */\nconst loadScript = ({ type, src, attributes = {} }: ScriptConfig): Promise<void> => {\n  return new Promise<void>((resolve, reject) => {\n    const script = document.createElement('script');\n    script.type = type;\n    script.src = src;\n\n    script.onload = () => resolve();\n    script.onerror = (error: Event) =>\n      reject(new Error(`Failed to load script: ${src}, ${error instanceof Error ? error.message : 'Unknown error'}`));\n\n    Object.entries(attributes).forEach(([key, value]) => {\n      script.setAttribute(key, value);\n    });\n\n    document.head.appendChild(script);\n  });\n};\n","/* -------------------------------------------------------------------------- */\n/*                        Date picker styles                                  */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-date-picker.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__label {\n  @apply flex flex-grow items-center gap-[--bq-date-picker--gap] m-be-[--bq-date-picker--label-margin-bottom];\n  @apply text-[length:--bq-date-picker--label-text-size] text-[color:--bq-date-picker--label-text-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Date picker input group control                    */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-date-picker--border-radius] border-[length:--bq-date-picker--border-width] border-[color:--bq-date-picker--border-color];\n  // Padding\n  @apply pe-[--bq-date-picker--padding-end] ps-[--bq-date-picker--padding-start] p-b-[--bq-date-picker--paddingY];\n  // Text\n  @apply select-none text-[length:--bq-date-picker--text-size] text-[color:--bq-date-picker--text-color] placeholder:text-[color:--bq-date-picker--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-date-picker--border-style);\n\n  // Focus\n  &:not(.disabled):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n\n    @apply focus border-[color:--bq-focus];\n  }\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-date-picker__control--clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-date-picker__control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-date-picker__control.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-date-picker__control.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-date-picker__control.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--input {\n  @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply border-none min-bs-[--bq-date-picker--icon-size] min-is-0 p-b-0 p-i-0 m-b-0 m-i-0 focus:outline-none focus-visible:outline-none;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n\n  @apply rounded-xs border-none bs-auto p-b-0 p-i-0;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--prefix,\n.bq-date-picker__control--suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-date-picker--text-color];\n}\n\n.bq-date-picker__control--prefix {\n  @apply me-[--bq-date-picker--gap];\n}\n\n.bq-date-picker__control--suffix {\n  @apply ms-[--bq-date-picker--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-date-picker--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Customize Cally date picker                         */\n/* -------------------------------------------------------------------------- */\n\ncalendar-date,\ncalendar-range,\ncalendar-multi {\n  &::part(header) {\n    @apply justify-center gap-s;\n  }\n\n  &::part(heading) {\n    @apply p-b-xs2 p-i-xs;\n  }\n\n  &::part(button) {\n    @apply rounded-s border-0 bg-transparent transition-colors duration-200 p-b-xs2 p-i-xs2;\n    @apply focus-visible:focus hover:bg-hover-ui-primary;\n  }\n\n  &::part(container) {\n    @apply bg-[--bq-date-picker--background-color] p-b-0 p-i-0;\n  }\n}\n\ncalendar-month {\n  /* stylelint-disable-next-line custom-property-pattern */\n  --color-accent: var(--bq-ui--brand);\n\n  &::part(button) {\n    @apply flex items-center justify-center rounded-s bg-transparent font-default text-primary transition-colors duration-200 ease-in-out p-b-0 p-i-0;\n    @apply size-[--bq-date-picker--day-size] focus-visible:focus enabled:hover:bg-hover-secondary disabled:cursor-not-allowed;\n  }\n\n  &::part(button day disallowed) {\n    @apply cursor-not-allowed bg-transparent #{!important};\n  }\n\n  &::part(button day selected) {\n    @apply rounded-s bg-[--bq-date-picker--range-background-color] text-alt enabled:hover:bg-hover-ui-brand;\n  }\n\n  &::part(button day selected range-inner) {\n    @apply rounded-none bg-[--bq-date-picker--range-inner-background-color] text-primary hover:text-alt;\n  }\n\n  &::part(button day outside) {\n    @apply cursor-pointer text-secondary opacity-100;\n  }\n\n  &::part(today) {\n    @apply rounded-s border-[length:--bq-date-picker--currentDate-border-width] border-[color:--bq-date-picker--currentDate-border-color];\n\n    border-style: var(--bq-date-picker--border-style);\n  }\n\n  &::part(today selected) {\n    @apply text-alt;\n  }\n\n  &::part(today range-inner) {\n    @apply rounded-none;\n  }\n\n  &::part(today range-start) {\n    @apply rounded-s rounded-es-none;\n  }\n\n  &::part(today range-end) {\n    @apply rounded-s rounded-ee-none;\n  }\n\n  &::part(range-start) {\n    @apply rounded-ee-none rounded-se-none;\n  }\n\n  &::part(range-end) {\n    @apply rounded-es-none rounded-ss-none;\n  }\n\n  &::part(range-start range-end) {\n    @apply rounded-s;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { DATE_PICKER_TYPE, DaysOfWeek, TCalendarDate, TDatePickerType } from './bq-date-picker.types';\nimport { isCallyLibraryLoaded, loadCallyLibrary } from './helper/callyLibrary';\nimport { Placement } from '../../services/interfaces';\nimport {\n  hasSlotContent,\n  isClient,\n  isDefined,\n  isEventTargetChildOfElement,\n  isHTMLElement,\n  isNil,\n  validatePropValue,\n} from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\n/**\n * The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n *\n * @example How to use it\n * ```html\n * <bq-date-picker\n *   first-day-of-week=\"1\"\n *   locale=\"en-GB\"\n *   months-per-view=\"single\"\n *   months=\"2\"\n *   name=\"bq-date-picker\"\n *   placeholder=\"Enter your date\"\n *   placement=\"bottom-end\"\n *   show-outside-days=\"false\"\n *   type=\"range\"\n *   validation-status=\"none\"\n *   value=\"2024-05-25\"\n * >\n *   <label class=\"flex flex-grow items-center\" slot=\"label\">\n *     Date picker label\n *   </label>\n * </bq-date-picker>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/5793a9-date-picker\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n *\n * @attr {boolean} autofocus - If `true`, the Date picker input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Date picker input is disabled or not.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Date picker panel and the input element.\n * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.\n * @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n * @attr {string} form - The ID of the form that the Date picker input belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.\n * @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n * @attr {string} max - The latest date that can be selected.\n * @attr {string} min - The earliest date that can be selected.\n * @attr {number} months - Number of months to show when range is `true`.\n * @attr {string} name - The Date picker input name.\n * @attr {boolean} open - If `true`, the Date picker panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Date picker panel.\n * @attr {\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\"} placement - Position of the Date picker panel.\n * @attr {boolean} required - Indicates whether or not the Date picker input is required to be filled out before submitting the form.\n * @attr {number} skidding - Represents the skidding between the Date picker panel and the input element.\n * @attr {boolean} show-outside-days - Whether to show days outside the month.\n * @attr {string} strategy - Defines the strategy to position the Date picker panel.\n * @attr {string} tentative - The date that is tentatively selected, e.g. the start of a range selection.\n * @attr {\"single\" | \"multi\" | \"range\"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.\n * @attr {\"error\" | \"none\" | \"success\" | \"warning\"} validation-status - The validation status of the Select input.\n * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n *\n * @method clear - Clears the selected value.\n *\n * @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n *\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part calendar__button - Any button used in the calendar-month component.\n * @part calendar__button - Any button within the calendar-range component.\n * @part calendar__container - The calendar-range container for the entire component.\n * @part calendar__day - The buttons corresponding to each day in the calendar-month grid.\n * @part calendar__disabled - A button that is disabled due to min/max on the calendar-range component.\n * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.\n * @part calendar__head - The calendar-month table's header row.\n * @part calendar__header - The calendar-range container for the heading and buttons.\n * @part calendar__heading - The calendar-month heading container that labels the month.\n * @part calendar__heading - The calendar-range heading containing the month and year.\n * @part calendar__next - The next page button on the calendar-range component.\n * @part calendar__outside - Any days which are outside the current month.\n * @part calendar__previous - The previous page button on the calendar-range component.\n * @part calendar__range-end - The day at the end of a date range.\n * @part calendar__range-inner - Any days between the start and end of a date range.\n * @part calendar__range-start - The day at the start of a date range.\n * @part calendar__selected - Any days which are selected.\n * @part calendar__table - The calendar-month <table> element.\n * @part calendar__td - The calendar-month table's body cells.\n * @part calendar__th - The calendar-month table's header cells.\n * @part calendar__today - The Today's day.\n * @part calendar__tr - Any row within the table on the calendar-month component.\n * @part calendar__week - The calendar-month table's body rows.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The date picker panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n *\n * @cssprop --bq-date-picker--background-color - Date picker background color.\n * @cssprop --bq-date-picker--border-color - Date picker border color.\n * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.\n * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.\n * @cssprop --bq-date-picker--border-radius - Date picker border radius.\n * @cssprop --bq-date-picker--border-style - Date picker border style.\n * @cssprop --bq-date-picker--border-width - Date picker border width.\n * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.\n * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.\n * @cssprop --bq-date-picker--day-size - Date picker button day size.\n * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.\n * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.\n * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.\n * @cssprop --bq-date-picker--label-text-color - Date picker label text color.\n * @cssprop --bq-date-picker--label-text-size - Date picker label text size.\n * @cssprop --bq-date-picker--padding-end - Date picker padding end.\n * @cssprop --bq-date-picker--padding-start - Date picker padding start.\n * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.\n * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.\n * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.\n * @cssprop --bq-date-picker--text-color - Date picker text color.\n * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.\n * @cssprop --bq-date-picker--text-size - Date picker text size.\n */\n@Component({\n  tag: 'bq-date-picker',\n  styleUrl: './scss/bq-date-picker.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqDatePicker {\n  // Own Properties\n  // ====================\n\n  private callyElem?: TCalendarDate;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private fallbackInputId = 'date-picker';\n\n  // Export parts of the calendar-month component\n  private readonly COMMON_EXPORT_PARTS =\n    'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';\n  private readonly BUTTON_EXPORT_PARTS =\n    'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals: ElementInternals;\n  @Element() el!: HTMLBqDatePickerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() isCallyLoaded = false;\n  @State() focusedDate: string;\n  @State() displayDate: string;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasRangeEnd = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /** If `true`, the Date picker input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /** If `true`, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /**\n   * Indicates whether the Date picker input is disabled or not.\n   * If `true`, the Date picker is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the Date picker panel and the input element. */\n  @Prop({ reflect: true }) distance?: number = 8;\n\n  /** The first day of the week, where Sunday is 0, Monday is 1, etc */\n  @Prop({ reflect: true }) firstDayOfWeek?: DaysOfWeek = 1;\n\n  /** The options to use when formatting the displayed value.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n   */\n  @Prop() formatOptions: Intl.DateTimeFormatOptions = {\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n  };\n\n  /** The ID of the form that the Date picker input belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message (mandatory if `required` is set) */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** A function that takes a date and returns true if the date should not be selectable */\n  @Prop({ reflect: true }) isDateDisallowed?: (date: Date) => boolean;\n\n  /** The locale for formatting dates. If not set, will use the browser's locale.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n   */\n  @Prop({ reflect: true }) locale: Intl.LocalesArgument = 'en-GB';\n\n  /** The latest date that can be selected */\n  @Prop({ reflect: true }) max?: string;\n\n  /** The earliest date that can be selected */\n  @Prop({ reflect: true }) min?: string;\n\n  /** Number of months to show when range is `true` */\n  @Prop({ reflect: true }) months: number;\n\n  /**\n   * Specifies how the next/previous buttons should navigate the calendar.\n   * - single: The buttons will navigate by a single month at a time.\n   * - months: The buttons will navigate by the number of months displayed per view.\n   */\n  @Prop({ reflect: true }) monthsPerView: 'single' | 'months' = 'single';\n\n  /** The Date picker input name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, the Date picker panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the Date picker panel. */\n  @Prop({ reflect: true, mutable: true }) panelHeight?: string = 'auto';\n\n  /** The Date picker input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** Position of the Date picker panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-end';\n\n  /** Indicates whether or not the Date picker input is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** Represents the skidding between the Date picker panel and the input element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Whether to show days outside the month */\n  @Prop({ reflect: true }) showOutsideDays: boolean = false;\n\n  /** Defines the strategy to position the Date picker panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  /** The date that is tentatively selected e.g. the start of a range selection  */\n  @Prop({ reflect: true, mutable: true }) tentative?: string;\n\n  /** It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection */\n  @Prop({ reflect: true }) type: TDatePickerType = 'single';\n\n  /**\n   * The validation status of the Select input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n   * All dates are expected in ISO-8601 format (YYYY-MM-DD). */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    const { formatDisplayValue, internals, isCallyLoaded, value } = this;\n    if (!isCallyLoaded) return;\n\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n    this.updateFormValidity();\n\n    if (Array.isArray(value)) {\n      this.hasValue = value.some((val) => val.length > 0);\n      return;\n    }\n\n    this.hasValue = isDefined(value);\n    this.displayDate = formatDisplayValue(value);\n\n    this.setFocusedDate();\n  }\n\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(DATE_PICKER_TYPE, 'single', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqDatePickerElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqDatePickerElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqDatePickerElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqDatePickerElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  async connectedCallback() {\n    if (!isClient() || this.isCallyLoaded) return;\n\n    try {\n      await loadCallyLibrary();\n      this.isCallyLoaded = isCallyLibraryLoaded();\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  async componentDidLoad() {\n    this.handleSlotChange();\n    this.handleValueChange();\n  }\n\n  formAssociatedCallback() {\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.clear();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqOpen', { capture: true })\n  handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n    if (!ev.composedPath().includes(this.el)) return;\n\n    this.open = ev.detail.open;\n    this.setFocusedDate();\n  }\n\n  @Listen('click', { target: 'body', capture: true })\n  handleClickOutside(ev: MouseEvent) {\n    const { open, type, hasRangeEnd } = this;\n    if (!open || type !== 'range' || ev.button !== 0) return;\n    if (isEventTargetChildOfElement(ev, this.el) || hasRangeEnd) return;\n    if (isEventTargetChildOfElement(ev, this.el)) return;\n\n    if (!hasRangeEnd) {\n      this.tentative = undefined;\n      this.hasRangeEnd = false;\n    }\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Clears the selected value.\n   *\n   * @return {Promise<void>}\n   * @memberof BqInput\n   */\n  @Method()\n  async clear(): Promise<void> {\n    if (this.disabled) return;\n\n    this.value = undefined;\n    this.internals.setFormValue(undefined);\n    this.bqClear.emit(this.el);\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private setFocusedDate = () => {\n    const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;\n    if (!(callyElem && isCallyLoaded)) return;\n    // We need to set the focused date in the calendar component via a ref\n    // because it doesn't work when passed as a prop (the Cally element does not re-render)\n    this.focusedDate = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');\n    this.callyElem.focusedDate = this.focusedDate;\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n    if (!isHTMLElement(ev.target, 'input')) return;\n\n    const dateValue = new Date(ev.target.value);\n    if (!isNaN(dateValue.getTime())) {\n      // We need to force the value to respect the format: yyyy-mm-dd, hence the hardcoded locale\n      this.value = dateValue.toLocaleDateString('fr-CA');\n      this.displayDate = this.formatDisplayValue(this.value);\n      this.internals.setFormValue(`${this.value}`);\n      this.bqChange.emit({ value: this.value, el: this.el });\n    }\n  };\n\n  private handleCalendarChange = (ev: Event) => {\n    const { value } = ev.target as unknown as { value: string };\n\n    this.value = value;\n    this.displayDate = this.formatDisplayValue(this.value);\n    this.inputElem.value = this.displayDate;\n    this.inputElem.focus();\n\n    this.internals.setFormValue(`${this.value}`);\n    this.bqChange.emit({ value: this.value, el: this.el });\n\n    this.open = this.type === 'multi';\n  };\n\n  private handleCalendarRangeStart = (ev: CustomEvent) => {\n    this.hasRangeEnd = false;\n    this.tentative = new Date(ev.detail).toLocaleDateString('fr-CA');\n  };\n\n  private handleCalendarRangeEnd = () => {\n    this.hasRangeEnd = true;\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    if (this.disabled) return;\n\n    this.inputElem.value = '';\n    this.value = this.inputElem.value;\n    this.hasRangeEnd = false;\n\n    this.bqClear.emit(this.el);\n    this.bqChange.emit({ value: this.value, el: this.el });\n    this.internals.setFormValue(undefined);\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n  };\n\n  private generateCalendarMonth = (offset?: number, className = ''): Element | null => {\n    if (!this.isCallyLoaded) return null;\n\n    return (\n      <calendar-month\n        offset={offset}\n        class={className}\n        exportparts={`${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}`}\n      />\n    );\n  };\n\n  /**\n   * Generates an array of Elements representing the calendar months.\n   *\n   * If the type of the date picker is 'range' or 'multi' and the number of months is specified,\n   * it generates an array of calendar months with the specified length. Each month will have an offset\n   * and a class name based on its position in the array. The offset is used to determine the month to display,\n   * and the class name is used for responsive design.\n   *\n   * If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,\n   * it generates an array with a single calendar month.\n   *\n   * @returns {Element[]} An array of elements representing the calendar months.\n   */\n  private generateCalendarMonths = (): Element[] => {\n    if (!this.isCallyLoaded) return [];\n\n    if (this.type === 'range' || (this.type === 'multi' && this.months)) {\n      return Array.from({ length: this.months }, (_, i) => {\n        const offset = i > 0 ? i : undefined;\n        const className = offset ? 'hidden sm:block' : '';\n        return this.generateCalendarMonth(offset, className);\n      });\n    }\n\n    return [this.generateCalendarMonth()];\n  };\n\n  /**\n   * Extracts and returns the first date part from a given string.\n   * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value\n   * should be the focused date in the calendar.\n   *\n   * @param value - The value to be processed, can be a string.\n   * @returns The extracted last date portion of the value.\n   */\n  private formatFocusedDate = (value: string): string | null => {\n    if (!value) return;\n\n    const dateRegex = /\\b\\d{4}-\\d{2}-\\d{2}\\b/;\n    const match = dateRegex.exec(value);\n    return match ? match[0] : null;\n  };\n\n  private formatDisplayValue = (value: string): string | undefined => {\n    if (!value) return;\n\n    const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);\n\n    if (this.type === 'range') {\n      const [start, end] = value.split('/').map((dateStr) => new Date(dateStr));\n      return dateFormatter.formatRange(start, end);\n    }\n\n    if (this.type === 'multi') {\n      const dates = value.split(' ').map((dateStr) => new Date(dateStr));\n      return dates.map((date) => dateFormatter.format(date)).join(', ');\n    }\n\n    return dateFormatter.format(new Date(value));\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, inputElem } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.toString().trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private get CalendarType() {\n    const componentTypes = {\n      single: 'calendar-date',\n      multi: 'calendar-multi',\n      range: 'calendar-range',\n    } as const;\n\n    // Return the corresponding component type, based on the type prop value\n    return componentTypes[this.type] || componentTypes.single;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const CallyCalendar = this.CalendarType;\n    const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;\n\n    return (\n      <div class=\"bq-date-picker\" part=\"base\">\n        {/* Label */}\n        <label\n          id={labelId}\n          class={{ 'bq-date-picker__label': true, '!hidden': !this.hasLabel }}\n          aria-label={this.name || this.fallbackInputId}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        {/* Select date picker dropdown */}\n        <bq-dropdown\n          class=\"bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto\"\n          disabled={this.disabled}\n          distance={this.distance}\n          open={this.open}\n          panelHeight={this.panelHeight}\n          placement={this.placement}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          exportparts=\"panel\"\n        >\n          {/* Input control group */}\n          <div\n            class={{\n              'bq-date-picker__control': true,\n              [`validation-${this.validationStatus}`]: true,\n              disabled: this.disabled,\n            }}\n            part=\"control\"\n            slot=\"trigger\"\n          >\n            {/* Prefix */}\n            <span\n              class={{ 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }}\n              ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n              part=\"prefix\"\n            >\n              <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n            </span>\n            {/* HTML Input */}\n            <input\n              id={this.name || this.fallbackInputId}\n              class=\"bq-date-picker__control--input\"\n              autoComplete=\"off\"\n              autoCapitalize=\"off\"\n              aria-disabled={this.disabled ? 'true' : 'false'}\n              aria-controls={`${this.name}`}\n              aria-haspopup=\"dialog\"\n              disabled={this.disabled}\n              form={this.form}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.type !== 'single'}\n              ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n              required={this.required}\n              spellcheck={false}\n              type=\"text\"\n              value={this.displayDate}\n              part=\"input\"\n              // Events\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onChange={this.handleChange}\n            />\n            {/* Clear Button */}\n            {this.hasValue && !this.disabled && !this.disableClear && (\n              // The clear button will be visible as long as the input has a value\n              // and the parent group is hovered or has focus-within\n              <bq-button\n                class=\"bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden\"\n                appearance=\"text\"\n                aria-label={this.clearButtonLabel}\n                size=\"small\"\n                onBqClick={this.handleClearClick}\n                part=\"clear-btn\"\n                exportparts=\"button\"\n              >\n                <slot name=\"clear-icon\">\n                  <bq-icon name=\"x-circle\" class=\"flex\" />\n                </slot>\n              </bq-button>\n            )}\n            {/* Suffix */}\n            <span\n              class=\"bq-date-picker__control--suffix\"\n              ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n                <bq-icon name=\"calendar-blank\" class=\"flex\" />\n              </slot>\n            </span>\n          </div>\n          {this.isCallyLoaded && (\n            <CallyCalendar\n              isDateDisallowed={this.isDateDisallowed}\n              locale={this.locale as string}\n              value={this.value}\n              min={this.min}\n              max={this.max}\n              months={this.months}\n              tentative={this.tentative}\n              pageBy={this.monthsPerView}\n              firstDayOfWeek={this.firstDayOfWeek}\n              showOutsideDays={this.showOutsideDays}\n              onChange={this.handleCalendarChange}\n              onRangestart={this.handleCalendarRangeStart}\n              onRangeend={this.handleCalendarRangeEnd}\n              exportparts=\"container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading\"\n              ref={(elem: TCalendarDate) => (this.callyElem = elem)}\n            >\n              <bq-icon color=\"text--primary\" slot=\"previous\" name=\"caret-left\" label=\"Previous\" />\n              <bq-icon color=\"text--primary\" slot=\"next\" name=\"caret-right\" label=\"Next\" />\n\n              <div class=\"flex flex-wrap justify-center gap-[--bq-spacing-m]\">{this.generateCalendarMonths()}</div>\n            </CallyCalendar>\n          )}\n        </bq-dropdown>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/bq-dialog.js

@@ -2,5 +2,5 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import{p as a,H as r,c as e,h as b}from"./p-d16482dc.js";import{v as t}from"./p-687da041.js";import{b as i}from"./p-d7ce7165.js";import{l as n,e as o}from"./p-a5dc1c94.js";import{d as q}from"./p-37483f1c.js";import{d}from"./p-c58e0d87.js";const s=["small","medium","large"];const l=["standard","highlight"];const c='.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-dialog,.shadow-\\[shadow\\:--bq-dialog--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.sticky{position:sticky}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-\\[--bq-dialog--content-footer-gap\\]{gap:var(--bq-dialog--content-footer-gap)}.gap-m{gap:var(--bq-spacing-m)}.gap-xs{gap:var(--bq-spacing-xs)}.rounded-\\[--bq-dialog--border-radius\\]{border-radius:var(--bq-dialog--border-radius)}.border-\\[length\\:--bq-dialog--border-width\\]{border-width:var(--bq-dialog--border-width)}.border-none{border-style:none}.border-\\[color\\:--bq-dialog--border-color\\]{border-color:var(--bq-dialog--border-color)}.bg-\\[--bq-dialog--background-backdrop\\]{background-color:var(--bq-dialog--background-backdrop)}.bg-\\[--bq-dialog--background\\]{background-color:var(--bq-dialog--background)}.text-\\[--bq-dialog--text-color\\]{color:var(--bq-dialog--text-color)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.shadow-\\[shadow\\:--bq-dialog--box-shadow\\]{--tw-shadow:var(--bq-dialog--box-shadow);--tw-shadow-colored:var(--bq-dialog--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-\\[opacity\\]{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.is-\\[90vw\\]{inline-size:90vw}.is-full{inline-size:100%}.p-b-0{padding-block:0}.p-b-\\[--bq-dialog--padding\\]{padding-block:var(--bq-dialog--padding)}.p-be-0{padding-block-end:0}.p-bs-0{padding-block-start:0}.p-i-\\[--bq-dialog--padding\\]{padding-inline:var(--bq-dialog--padding)}.inset-bs-0{inset-block-start:0}.inset-bs-\\[100\\%\\]{inset-block-start:100%}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}::-ms-backdrop{--bq-dialog--background:var(--bq-ui--primary);--bq-dialog--background-backdrop:var(--bq-background--overlay);--bq-dialog--text-color:var(--bq-text--primary);--bq-dialog--box-shadow:var(--bq-box-shadow--l);--bq-dialog--border-color:transparent;--bq-dialog--border-radius:var(--bq-radius--m);--bq-dialog--border-style:none;--bq-dialog--border-width:unset;--bq-dialog--padding:var(--bq-spacing-l);--bq-dialog--content-footer-gap:var(--bq-spacing-l);--bq-dialog--title-body-gap:var(--bq-spacing-s);--bq-dialog--width-small:320px;--bq-dialog--width-medium:480px;--bq-dialog--width-large:640px;--bq-dialog-z-index:10}::backdrop,:host{--bq-dialog--background:var(--bq-ui--primary);--bq-dialog--background-backdrop:var(--bq-background--overlay);--bq-dialog--text-color:var(--bq-text--primary);--bq-dialog--box-shadow:var(--bq-box-shadow--l);--bq-dialog--border-color:transparent;--bq-dialog--border-radius:var(--bq-radius--m);--bq-dialog--border-style:none;--bq-dialog--border-width:unset;--bq-dialog--padding:var(--bq-spacing-l);--bq-dialog--content-footer-gap:var(--bq-spacing-l);--bq-dialog--title-body-gap:var(--bq-spacing-s);--bq-dialog--width-small:320px;--bq-dialog--width-medium:480px;--bq-dialog--width-large:640px;--bq-dialog-z-index:10}:host{visibility:hidden!important}:host(.bq-dialog--open){visibility:visible!important}.bq-dialog{--tw-shadow:var(--bq-dialog--box-shadow);--tw-shadow-colored:var(--bq-dialog--box-shadow);background-color:var(--bq-dialog--background);border-color:var(--bq-dialog--border-color);border-radius:var(--bq-dialog--border-radius);border-style:var(--bq-dialog--border-style);border-width:var(--bq-dialog--border-width);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--bq-dialog--text-color);display:flex;flex-direction:column;gap:var(--bq-dialog--content-footer-gap);inline-size:90vw;padding-block:0;padding-inline:0;position:absolute}@media (min-width:640px){.bq-dialog.small{inline-size:var(--bq-dialog--width-small)}.bq-dialog.medium{inline-size:var(--bq-dialog--width-medium)}.bq-dialog.large{inline-size:var(--bq-dialog--width-large)}}.bq-dialog::-ms-backdrop{background-color:var(--bq-dialog--background-backdrop);opacity:0;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-dialog::backdrop{background-color:var(--bq-dialog--background-backdrop);opacity:0;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-dialog[open]::-ms-backdrop{opacity:.6}.bq-dialog[open]::backdrop{opacity:.6}.bq-dialog--header{gap:var(--bq-spacing-m);inset-block-start:0;padding-block:var(--bq-dialog--padding);padding-block-end:0;padding-inline:var(--bq-dialog--padding)}.bq-dialog--footer,.bq-dialog--header{align-items:center;display:flex;position:sticky}.bq-dialog--footer{gap:var(--bq-spacing-xs);inline-size:100%;inset-block-start:100%;justify-content:flex-end;padding-block:var(--bq-dialog--padding);padding-block-start:0;padding-inline:var(--bq-dialog--padding)}.bq-dialog--close{--bq-radius--m:var(--bq-radius--s);--bq-button--small-paddingX:var(--bq-spacing-xs2);--bq-button--small-paddingY:var(--bq-spacing-xs2)}.bq-dialog--close::part(button){border-style:none}@media (min-width:640px){.sm\\:is-\\[--bq-dialog--width-large\\]{inline-size:var(--bq-dialog--width-large)}.sm\\:is-\\[--bq-dialog--width-medium\\]{inline-size:var(--bq-dialog--width-medium)}.sm\\:is-\\[--bq-dialog--width-small\\]{inline-size:var(--bq-dialog--width-small)}}.scale-100,.scale-90{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.static{position:static}.m-auto{margin:auto}.\\!hidden{display:none!important}.hidden{display:none}.flex-1{flex:1 1 0%}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-90{--tw-scale-x:.9;--tw-scale-y:.9}.cursor-pointer{cursor:pointer}.justify-between{justify-content:space-between}.gap-\\[--bq-dialog--title-body-gap\\]{gap:var(--bq-dialog--title-body-gap)}.gap-s{gap:var(--bq-spacing-s)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.bg-ui-alt{background-color:var(--bq-ui--alt)}.opacity-100{opacity:1}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\!p-b-s{padding-block:var(--bq-spacing-s)!important}.\\!p-be-\\[--bq-dialog--padding\\]{padding-block-end:var(--bq-dialog--padding)!important}.inset-be-\\[50\\%\\]{inset-block-end:50%}.inset-bs-\\[50\\%\\]{inset-block-start:50%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}.block{display:block}.inline{display:inline}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}';const g=c;const v=a(class a extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.bqCancel=e(this,"bqCancel",7);this.bqClose=e(this,"bqClose",7);this.bqOpen=e(this,"bqOpen",7);this.bqAfterOpen=e(this,"bqAfterOpen",7);this.bqAfterClose=e(this,"bqAfterClose",7)}dialogElem;contentElem;footerElem;closeSlotElem;OPEN_CSS_CLASS="bq-dialog--open";get el(){return this}hasContent=false;hasFooter=false;border="m";disableBackdrop=false;disableCloseEscKeydown=false;disableCloseClickOutside=false;footerAppearance="standard";hideCloseButton=false;open=false;size="medium";checkPropValues(){t(s,"large",this.el,"size");t(l,"standard",this.el,"footerAppearance")}async handleOpenChange(){if(this.open){await this.handleOpen();return}await this.handleClose()}bqCancel;bqClose;bqOpen;bqAfterOpen;bqAfterClose;componentWillLoad(){this.checkPropValues()}componentDidLoad(){this.handleOpenChange();this.closeSlotElem=this.el.shadowRoot.querySelector('slot[name="button-close"]');this.closeSlotElem?.addEventListener("click",(()=>this.hide()))}disconnectedCallback(){this.closeSlotElem?.removeEventListener("click",(()=>this.hide()))}async handleMouseClick(a){if(!this.open)return;if(!this.dialogElem||this.disableCloseClickOutside)return;if(a.button!==0)return;const r=this.dialogElem.getBoundingClientRect();if(a.clientY<r.top||a.clientY>r.bottom||a.clientX<r.left||a.clientX>r.right){await this.cancel()}}async handleKeyDown(a){const r=a.key==="Escape"||a.key==="Esc";if(!this.open||!this.dialogElem||!r)return;if(this.disableCloseEscKeydown){a.preventDefault();return}await this.cancel()}async show(){const a=this.bqOpen.emit();if(a.defaultPrevented)return;this.open=true}async hide(){const a=this.bqClose.emit();if(a.defaultPrevented)return;this.open=false}async cancel(){const a=this.bqCancel.emit();if(a.defaultPrevented)return;this.open=false}handleClose=async()=>{if(!this.dialogElem)return;await n(this.dialogElem);this.dialogElem.close();this.handleTransitionEnd()};handleOpen=async()=>{if(!this.dialogElem)return;this.el.classList.add(this.OPEN_CSS_CLASS);if(this.disableBackdrop){this.dialogElem.show()}else{this.dialogElem.showModal()}await o(this.dialogElem);this.handleTransitionEnd()};handleTransitionEnd=()=>{if(this.open){this.bqAfterOpen.emit();return}this.bqAfterClose.emit();this.el.classList.remove(this.OPEN_CSS_CLASS)};handleContentSlotChange=()=>{this.hasContent=i(this.contentElem)};handleFooterSlotChange=()=>{this.hasFooter=i(this.footerElem,"footer")};render(){const a={...this.border&&{"--bq-dialog--border-radius":`var(--bq-radius--${this.border})`}};return b("dialog",{key:"3cd44a424a5e44fc3a74b8d2c3f56f1d489760d6",style:a,class:{[`bq-dialog hidden ${this.size} m-auto focus-visible:outline-none`]:true,"inset-be-[50%] inset-bs-[50%]":this.disableBackdrop},"data-transition-enter":"transition ease-in duration-300","data-transition-enter-start":"opacity-0 scale-90","data-transition-enter-end":"opacity-100 scale-100","data-transition-leave":"transition ease-out duration-300","data-transition-leave-start":"opacity-100 scale-100","data-transition-leave-end":"opacity-0 scale-90",inert:this.open?undefined:true,ref:a=>this.dialogElem=a,"aria-modal":"true","aria-labelledby":"bq-dialog--title",part:"dialog"},b("main",{key:"c967e58afe1dc96623506cbc86ee414b1043a263",class:"flex flex-col gap-[--bq-dialog--title-body-gap] overflow-hidden",part:"content"},b("header",{key:"17135bc61996c8896ec713a1331d7e1ff21e48a1",class:"bq-dialog--header",part:"header"},b("div",{key:"a31dda76fe4a33da03a7e8ef3883c6b2a6c85dcf",id:"bq-dialog--title",class:"bq-dialog--title flex flex-1 items-center justify-between",part:"title"},b("slot",{key:"eb4199ff50b409cb8b1435e54199b137248f9cb8",name:"title"})),b("slot",{key:"81cbc62aae11a6cb1eb23a16516157cfb904689d",name:"button-close"},!this.hideCloseButton&&b("bq-button",{key:"8f79cf67625472520c7d5025bef8bf37d00a0c17",class:"bq-dialog--close",appearance:"text",size:"small"},b("bq-icon",{key:"eb6c9f7186e1d68294bb2bbfab73848d804a443c",class:"cursor-pointer",name:"x",role:"img",title:"Close"})))),b("div",{key:"7f103bd3befe76498d33727930311a70bc6ceac6",class:{"!hidden":!this.hasContent,"overflow-y-auto p-i-[--bq-dialog--padding]":this.hasContent,"!p-be-[--bq-dialog--padding]":!this.hasFooter},ref:a=>this.contentElem=a,part:"body"},b("slot",{key:"09f66573a12a920560fca112333c817fba366bef",onSlotchange:this.handleContentSlotChange}))),b("footer",{key:"a44d7e507c56d6c1de5535e77658a24de8361b57",class:{"!hidden":!this.hasFooter,"bq-dialog--footer":this.hasFooter,"bg-ui-alt !p-b-s":this.footerAppearance==="highlight"},ref:a=>this.footerElem=a,part:"footer"},b("slot",{key:"7bbd41828e3c30a3a35916b448fb48e65d4e0d63",name:"footer",onSlotchange:this.handleFooterSlotChange})))}static get watchers(){return{footerAppearance:["checkPropValues"],size:["checkPropValues"],open:["handleOpenChange"]}}static get style(){return g}},[1,"bq-dialog",{border:[513],disableBackdrop:[516,"disable-backdrop"],disableCloseEscKeydown:[516,"disable-close-esc-keydown"],disableCloseClickOutside:[516,"disable-close-click-outside"],footerAppearance:[513,"footer-appearance"],hideCloseButton:[516,"hide-close-button"],open:[1540],size:[1537],hasContent:[32],hasFooter:[32],show:[64],hide:[64],cancel:[64]},[[11,"mousedown","handleMouseClick"],[10,"keydown","handleKeyDown"]],{footerAppearance:["checkPropValues"],size:["checkPropValues"],open:["handleOpenChange"]}]);function u(){if(typeof customElements==="undefined"){return}const a=["bq-dialog","bq-button","bq-icon"];a.forEach((a=>{switch(a){case"bq-dialog":if(!customElements.get(a)){customElements.define(a,v)}break;case"bq-button":if(!customElements.get(a)){q()}break;case"bq-icon":if(!customElements.get(a)){d()}break}}))}const f=v;const p=u;export{f as BqDialog,p as defineCustomElement};
+import{p as a,H as r,c as e,h as b}from"./p-f0fcfdea.js";import{v as t}from"./p-687da041.js";import{b as i}from"./p-260d4ca0.js";import{l as n,e as o}from"./p-a5dc1c94.js";import{d as q}from"./p-66fcce92.js";import{d}from"./p-1629a472.js";const s=["small","medium","large"];const l=["standard","highlight"];const c='.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-dialog,.shadow-\\[shadow\\:--bq-dialog--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.sticky{position:sticky}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-\\[--bq-dialog--content-footer-gap\\]{gap:var(--bq-dialog--content-footer-gap)}.gap-m{gap:var(--bq-spacing-m)}.gap-xs{gap:var(--bq-spacing-xs)}.rounded-\\[--bq-dialog--border-radius\\]{border-radius:var(--bq-dialog--border-radius)}.border-\\[length\\:--bq-dialog--border-width\\]{border-width:var(--bq-dialog--border-width)}.border-none{border-style:none}.border-\\[color\\:--bq-dialog--border-color\\]{border-color:var(--bq-dialog--border-color)}.bg-\\[--bq-dialog--background-backdrop\\]{background-color:var(--bq-dialog--background-backdrop)}.bg-\\[--bq-dialog--background\\]{background-color:var(--bq-dialog--background)}.text-\\[--bq-dialog--text-color\\]{color:var(--bq-dialog--text-color)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.shadow-\\[shadow\\:--bq-dialog--box-shadow\\]{--tw-shadow:var(--bq-dialog--box-shadow);--tw-shadow-colored:var(--bq-dialog--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-\\[opacity\\]{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.is-\\[90vw\\]{inline-size:90vw}.is-full{inline-size:100%}.p-b-0{padding-block:0}.p-b-\\[--bq-dialog--padding\\]{padding-block:var(--bq-dialog--padding)}.p-be-0{padding-block-end:0}.p-bs-0{padding-block-start:0}.p-i-\\[--bq-dialog--padding\\]{padding-inline:var(--bq-dialog--padding)}.inset-bs-0{inset-block-start:0}.inset-bs-\\[100\\%\\]{inset-block-start:100%}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}::-ms-backdrop{--bq-dialog--background:var(--bq-ui--primary);--bq-dialog--background-backdrop:var(--bq-background--overlay);--bq-dialog--text-color:var(--bq-text--primary);--bq-dialog--box-shadow:var(--bq-box-shadow--l);--bq-dialog--border-color:transparent;--bq-dialog--border-radius:var(--bq-radius--m);--bq-dialog--border-style:none;--bq-dialog--border-width:unset;--bq-dialog--padding:var(--bq-spacing-l);--bq-dialog--content-footer-gap:var(--bq-spacing-l);--bq-dialog--title-body-gap:var(--bq-spacing-s);--bq-dialog--width-small:320px;--bq-dialog--width-medium:480px;--bq-dialog--width-large:640px;--bq-dialog-z-index:10}::backdrop,:host{--bq-dialog--background:var(--bq-ui--primary);--bq-dialog--background-backdrop:var(--bq-background--overlay);--bq-dialog--text-color:var(--bq-text--primary);--bq-dialog--box-shadow:var(--bq-box-shadow--l);--bq-dialog--border-color:transparent;--bq-dialog--border-radius:var(--bq-radius--m);--bq-dialog--border-style:none;--bq-dialog--border-width:unset;--bq-dialog--padding:var(--bq-spacing-l);--bq-dialog--content-footer-gap:var(--bq-spacing-l);--bq-dialog--title-body-gap:var(--bq-spacing-s);--bq-dialog--width-small:320px;--bq-dialog--width-medium:480px;--bq-dialog--width-large:640px;--bq-dialog-z-index:10}:host{visibility:hidden!important}:host(.bq-dialog--open){visibility:visible!important}.bq-dialog{--tw-shadow:var(--bq-dialog--box-shadow);--tw-shadow-colored:var(--bq-dialog--box-shadow);background-color:var(--bq-dialog--background);border-color:var(--bq-dialog--border-color);border-radius:var(--bq-dialog--border-radius);border-style:var(--bq-dialog--border-style);border-width:var(--bq-dialog--border-width);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--bq-dialog--text-color);display:flex;flex-direction:column;gap:var(--bq-dialog--content-footer-gap);inline-size:90vw;padding-block:0;padding-inline:0;position:absolute}@media (min-width:640px){.bq-dialog.small{inline-size:var(--bq-dialog--width-small)}.bq-dialog.medium{inline-size:var(--bq-dialog--width-medium)}.bq-dialog.large{inline-size:var(--bq-dialog--width-large)}}.bq-dialog::-ms-backdrop{background-color:var(--bq-dialog--background-backdrop);opacity:0;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-dialog::backdrop{background-color:var(--bq-dialog--background-backdrop);opacity:0;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-dialog[open]::-ms-backdrop{opacity:.6}.bq-dialog[open]::backdrop{opacity:.6}.bq-dialog--header{gap:var(--bq-spacing-m);inset-block-start:0;padding-block:var(--bq-dialog--padding);padding-block-end:0;padding-inline:var(--bq-dialog--padding)}.bq-dialog--footer,.bq-dialog--header{align-items:center;display:flex;position:sticky}.bq-dialog--footer{gap:var(--bq-spacing-xs);inline-size:100%;inset-block-start:100%;justify-content:flex-end;padding-block:var(--bq-dialog--padding);padding-block-start:0;padding-inline:var(--bq-dialog--padding)}.bq-dialog--close{--bq-radius--m:var(--bq-radius--s);--bq-button--small-paddingX:var(--bq-spacing-xs2);--bq-button--small-paddingY:var(--bq-spacing-xs2)}.bq-dialog--close::part(button){border-style:none}@media (min-width:640px){.sm\\:is-\\[--bq-dialog--width-large\\]{inline-size:var(--bq-dialog--width-large)}.sm\\:is-\\[--bq-dialog--width-medium\\]{inline-size:var(--bq-dialog--width-medium)}.sm\\:is-\\[--bq-dialog--width-small\\]{inline-size:var(--bq-dialog--width-small)}}.scale-100,.scale-90{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.static{position:static}.m-auto{margin:auto}.\\!hidden{display:none!important}.hidden{display:none}.flex-1{flex:1 1 0%}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-90{--tw-scale-x:.9;--tw-scale-y:.9}.cursor-pointer{cursor:pointer}.justify-between{justify-content:space-between}.gap-\\[--bq-dialog--title-body-gap\\]{gap:var(--bq-dialog--title-body-gap)}.gap-s{gap:var(--bq-spacing-s)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.bg-ui-alt{background-color:var(--bq-ui--alt)}.opacity-100{opacity:1}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\!p-b-s{padding-block:var(--bq-spacing-s)!important}.\\!p-be-\\[--bq-dialog--padding\\]{padding-block-end:var(--bq-dialog--padding)!important}.inset-be-\\[50\\%\\]{inset-block-end:50%}.inset-bs-\\[50\\%\\]{inset-block-start:50%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}.block{display:block}.inline{display:inline}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}';const g=c;const v=a(class a extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.bqCancel=e(this,"bqCancel",7);this.bqClose=e(this,"bqClose",7);this.bqOpen=e(this,"bqOpen",7);this.bqAfterOpen=e(this,"bqAfterOpen",7);this.bqAfterClose=e(this,"bqAfterClose",7)}dialogElem;contentElem;footerElem;closeSlotElem;OPEN_CSS_CLASS="bq-dialog--open";get el(){return this}hasContent=false;hasFooter=false;border="m";disableBackdrop=false;disableCloseEscKeydown=false;disableCloseClickOutside=false;footerAppearance="standard";hideCloseButton=false;open=false;size="medium";checkPropValues(){t(s,"large",this.el,"size");t(l,"standard",this.el,"footerAppearance")}async handleOpenChange(){if(this.open){await this.handleOpen();return}await this.handleClose()}bqCancel;bqClose;bqOpen;bqAfterOpen;bqAfterClose;componentWillLoad(){this.checkPropValues()}componentDidLoad(){this.handleSlotChange();this.handleOpenChange();this.closeSlotElem=this.el.shadowRoot.querySelector('slot[name="button-close"]');this.closeSlotElem?.addEventListener("click",(()=>this.hide()))}disconnectedCallback(){this.closeSlotElem?.removeEventListener("click",(()=>this.hide()))}async handleMouseClick(a){if(!this.open)return;if(!this.dialogElem||this.disableCloseClickOutside)return;if(a.button!==0)return;const r=this.dialogElem.getBoundingClientRect();if(a.clientY<r.top||a.clientY>r.bottom||a.clientX<r.left||a.clientX>r.right){await this.cancel()}}async handleKeyDown(a){const r=a.key==="Escape"||a.key==="Esc";if(!this.open||!this.dialogElem||!r)return;if(this.disableCloseEscKeydown){a.preventDefault();return}await this.cancel()}async show(){const a=this.bqOpen.emit();if(a.defaultPrevented)return;this.open=true}async hide(){const a=this.bqClose.emit();if(a.defaultPrevented)return;this.open=false}async cancel(){const a=this.bqCancel.emit();if(a.defaultPrevented)return;this.open=false}handleClose=async()=>{if(!this.dialogElem)return;await n(this.dialogElem);this.dialogElem.close();this.handleTransitionEnd()};handleOpen=async()=>{if(!this.dialogElem)return;this.el.classList.add(this.OPEN_CSS_CLASS);if(this.disableBackdrop){this.dialogElem.show()}else{this.dialogElem.showModal()}await o(this.dialogElem);this.handleTransitionEnd()};handleTransitionEnd=()=>{if(this.open){this.bqAfterOpen.emit();return}this.bqAfterClose.emit();this.el.classList.remove(this.OPEN_CSS_CLASS)};handleSlotChange=()=>{this.hasContent=i(this.contentElem);this.hasFooter=i(this.footerElem,"footer")};render(){const a={...this.border&&{"--bq-dialog--border-radius":`var(--bq-radius--${this.border})`}};return b("dialog",{key:"135ba080be5d1283779bab5563f72f5e840781ef",style:a,class:{[`bq-dialog hidden ${this.size} m-auto focus-visible:outline-none`]:true,"inset-be-[50%] inset-bs-[50%]":this.disableBackdrop},"data-transition-enter":"transition ease-in duration-300","data-transition-enter-start":"opacity-0 scale-90","data-transition-enter-end":"opacity-100 scale-100","data-transition-leave":"transition ease-out duration-300","data-transition-leave-start":"opacity-100 scale-100","data-transition-leave-end":"opacity-0 scale-90",inert:this.open?undefined:true,ref:a=>this.dialogElem=a,"aria-modal":"true","aria-labelledby":"bq-dialog--title",part:"dialog"},b("main",{key:"f24799fddd755cf16ceee241946ad87719a28769",class:"flex flex-col gap-[--bq-dialog--title-body-gap] overflow-hidden",part:"content"},b("header",{key:"caca1dffb20724b200bf368f3b6b8e50ca3fbaad",class:"bq-dialog--header",part:"header"},b("div",{key:"c859333b1df5ec270cbb0484b7d74257283eba7b",id:"bq-dialog--title",class:"bq-dialog--title flex flex-1 items-center justify-between",part:"title"},b("slot",{key:"6efb1aa83bf4e37efdbdfb4b7d0580b8c6c068f5",name:"title"})),b("slot",{key:"86cb87c4074a571b18bdc2033a8395f8ce0af484",name:"button-close"},!this.hideCloseButton&&b("bq-button",{key:"f9fface9461e62501a7770024ca3b599f8ce0e10",class:"bq-dialog--close",appearance:"text",size:"small"},b("bq-icon",{key:"c68d894a421ced27a57fd5bdf40638082d224f56",class:"cursor-pointer",name:"x",role:"img",title:"Close"})))),b("div",{key:"5b58345eb77b8c1d21439a7eb36ff17cc0e5932e",class:{"!hidden":!this.hasContent,"overflow-y-auto p-i-[--bq-dialog--padding]":this.hasContent,"!p-be-[--bq-dialog--padding]":!this.hasFooter},ref:a=>this.contentElem=a,part:"body"},b("slot",{key:"266d2c5b892814dd0b253ce83ee03df849263a0f",onSlotchange:this.handleSlotChange}))),b("footer",{key:"1ce0fbcc5213ebb56e18d03e22c498f44674eef4",class:{"!hidden":!this.hasFooter,"bq-dialog--footer":this.hasFooter,"bg-ui-alt !p-b-s":this.footerAppearance==="highlight"},ref:a=>this.footerElem=a,part:"footer"},b("slot",{key:"7cfba4b2c8dd4512fed61e81304b4e9bec317ad9",name:"footer",onSlotchange:this.handleSlotChange})))}static get watchers(){return{footerAppearance:["checkPropValues"],size:["checkPropValues"],open:["handleOpenChange"]}}static get style(){return g}},[1,"bq-dialog",{border:[513],disableBackdrop:[516,"disable-backdrop"],disableCloseEscKeydown:[516,"disable-close-esc-keydown"],disableCloseClickOutside:[516,"disable-close-click-outside"],footerAppearance:[513,"footer-appearance"],hideCloseButton:[516,"hide-close-button"],open:[1540],size:[1537],hasContent:[32],hasFooter:[32],show:[64],hide:[64],cancel:[64]},[[11,"mousedown","handleMouseClick"],[10,"keydown","handleKeyDown"]],{footerAppearance:["checkPropValues"],size:["checkPropValues"],open:["handleOpenChange"]}]);function u(){if(typeof customElements==="undefined"){return}const a=["bq-dialog","bq-button","bq-icon"];a.forEach((a=>{switch(a){case"bq-dialog":if(!customElements.get(a)){customElements.define(a,v)}break;case"bq-button":if(!customElements.get(a)){q()}break;case"bq-icon":if(!customElements.get(a)){d()}break}}))}const f=v;const p=u;export{f as BqDialog,p as defineCustomElement};
 //# sourceMappingURL=bq-dialog.js.map

package/dist/components/bq-dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["DIALOG_SIZE","DIALOG_FOOTER_APPEARANCE","bqDialogCss","BqDialogStyle0","BqDialog","proxyCustomElement","H","dialogElem","contentElem","footerElem","closeSlotElem","OPEN_CSS_CLASS","hasContent","hasFooter","border","disableBackdrop","disableCloseEscKeydown","disableCloseClickOutside","footerAppearance","hideCloseButton","open","size","checkPropValues","validatePropValue","this","el","handleOpenChange","handleOpen","handleClose","bqCancel","bqClose","bqOpen","bqAfterOpen","bqAfterClose","componentWillLoad","componentDidLoad","shadowRoot","querySelector","addEventListener","hide","disconnectedCallback","removeEventListener","handleMouseClick","event","button","rect","getBoundingClientRect","clientY","top","bottom","clientX","left","right","cancel","handleKeyDown","ev","isEscapeKey","key","preventDefault","show","emit","defaultPrevented","async","leave","close","handleTransitionEnd","classList","add","showModal","enter","remove","handleContentSlotChange","hasSlotContent","handleFooterSlotChange","render","style","h","class","inert","undefined","ref","part","id","name","appearance","role","title","mainElem","onSlotchange"],"sources":["../../packages/beeq/src/components/dialog/bq-dialog.types.ts","../../packages/beeq/src/components/dialog/scss/bq-dialog.scss?tag=bq-dialog&encapsulation=shadow","../../packages/beeq/src/components/dialog/bq-dialog.tsx"],"sourcesContent":["export const DIALOG_SIZE = ['small', 'medium', 'large'] as const;\nexport type TDialogSize = (typeof DIALOG_SIZE)[number];\n\nexport const DIALOG_FOOTER_APPEARANCE = ['standard', 'highlight'] as const;\nexport type TDialogFooterAppearance = (typeof DIALOG_FOOTER_APPEARANCE)[number];\n\nexport const DIALOG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TDialogBorderRadius = (typeof DIALOG_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Dialog styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-dialog.variables';\n\n:host {\n  @apply invisible #{!important};\n}\n\n:host(.bq-dialog--open) {\n  @apply visible #{!important};\n}\n\n/* --------------------------------- Dialog --------------------------------- */\n\n.bq-dialog {\n  @apply absolute flex flex-col gap-[--bq-dialog--content-footer-gap] p-b-0 p-i-0;\n  @apply bg-[--bq-dialog--background] text-[--bq-dialog--text-color] shadow-[shadow:--bq-dialog--box-shadow];\n  @apply rounded-[--bq-dialog--border-radius] border-[length:--bq-dialog--border-width] border-[color:--bq-dialog--border-color];\n  // If mobile resolution, dialog will be full width\n  @apply is-[90vw];\n\n  border-style: var(--bq-dialog--border-style);\n\n  &.small {\n    @apply sm:is-[--bq-dialog--width-small];\n  }\n\n  &.medium {\n    @apply sm:is-[--bq-dialog--width-medium];\n  }\n\n  &.large {\n    @apply sm:is-[--bq-dialog--width-large];\n  }\n}\n\n/* ----------------------------- Dialog backdrop ---------------------------- */\n\n.bq-dialog::backdrop {\n  @apply bg-[--bq-dialog--background-backdrop] opacity-0 transition-[opacity] duration-300 ease-in-out;\n}\n\n.bq-dialog[open]::backdrop {\n  @apply opacity-60;\n}\n\n/* ------------------------------ Dialog header ----------------------------- */\n\n.bq-dialog--header {\n  @apply sticky flex items-center gap-m inset-bs-0 p-b-[--bq-dialog--padding] p-be-0 p-i-[--bq-dialog--padding];\n}\n\n/* ------------------------------ Dialog footer ----------------------------- */\n\n.bq-dialog--footer {\n  @apply sticky flex items-center justify-end gap-xs is-full inset-bs-[100%] p-b-[--bq-dialog--padding] p-bs-0 p-i-[--bq-dialog--padding];\n}\n\n/* --------------------------- Dialog close button -------------------------- */\n\n.bq-dialog--close {\n  --bq-radius--m: theme(borderRadius.s);\n  --bq-button--small-paddingX: theme(spacing.xs2);\n  --bq-button--small-paddingY: theme(spacing.xs2);\n\n  &::part(button) {\n    @apply border-none;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  DIALOG_FOOTER_APPEARANCE,\n  DIALOG_SIZE,\n  TDialogBorderRadius,\n  TDialogFooterAppearance,\n  TDialogSize,\n} from './bq-dialog.types';\nimport { enter, hasSlotContent, leave, validatePropValue } from '../../shared/utils';\n\n/**\n * The Dialog component is used to display additional content or prompt a user for action.\n * It provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n *\n * @example How to use it\n * ```html\n * <bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n *   <h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n *     <bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\n *     Title\n *   </h5>\n *   <p>\n *     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\n *     standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\n *     type specimen book.\n *   </p>\n *   <div class=\"flex gap-xs\" slot=\"footer\">\n *     <bq-button appearance=\"link\">Button</bq-button>\n *     <bq-button variant=\"ghost\">Button</bq-button>\n *     <bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n *   </div>\n * </bq-dialog>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/15b6fc-dialog\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\"} border - Border radius of the dialog component.\n * @attr {boolean} disable-backdrop - If true, the backdrop overlay won't be shown when the dialog opens.\n * @attr {boolean} disable-close-esc-keydown - If true, the dialog will not close when the [Esc] key is pressed.\n * @attr {boolean} disable-close-click-outside - If true, the dialog will not close when clicking on the backdrop overlay.\n * @attr {\"standard\" | \"highlight\"} footer-appearance - The appearance of the footer.\n * @attr {boolean} hide-close-button - If true, it hides the close button.\n * @attr {boolean} open - If true, the dialog will be shown as open.\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the dialog.\n *\n * @method show - Open the dialog.\n * @method hide - Closes the dialog.\n * @method cancel - Dismiss or cancel the dialog.\n *\n * @event bqCancel - Callback handler emitted when the dialog has been canceled or dismissed.\n * @event bqClose - Callback handler emitted when the dialog will close.\n * @event bqOpen - Callback handler emitted when the dialog will open.\n * @event bqAfterOpen - Callback handler emitted when the dialog finish opening.\n * @event bqAfterClose - Callback handler emitted when the dialog finish closing.\n *\n * @slot title - The title content of the dialog.\n * @slot - The body content of the dialog.\n * @slot footer - The footer content of the dialog.\n * @slot button-close - The close button content of the dialog.\n *\n * @part body - The `<main>` that holds the dialog body content.\n * @part button-close - The button that closes the dialog on click.\n * @part content - The `<div>` container that holds the dialog title and body content.\n * @part dialog - The `<dialog>` wrapper container inside the shadow DOM.\n * @part footer - The `<footer>` that holds footer content.\n * @part header - The `<header>` that holds the icon, title, description and close button.\n * @part title - The `<div>` that holds the title content.\n *\n * @cssprop --bq-dialog--background - Dialog background color\n * @cssprop --bq-dialog--background-backdrop - Dialog backdrop background color\n * @cssprop --bq-dialog--box-shadow - Dialog box shadow\n * @cssprop --bq-dialog--border-color - Dialog border color\n * @cssprop --bq-dialog--border-style - Dialog border style\n * @cssprop --bq-dialog--border-width - Dialog border width\n * @cssprop --bq-dialog--border-radius - Dialog border radius\n * @cssprop --bq-dialog--padding - Dialog padding\n * @cssprop --bq-dialog--content-footer-gap - Dialog gap distance between content and footer elements\n * @cssprop --bq-dialog--title-body-gap - Dialog gap distance between title and body elements\n * @cssprop --bq-dialog--width-small - Dialog small width\n * @cssprop --bq-dialog--width-medium - Dialog medium width\n * @cssprop --bq-dialog--width-large - Dialog large width\n * @cssprop --bq-dialog-z-index - Dialog z-index applied when opened\n */\n@Component({\n  tag: 'bq-dialog',\n  styleUrl: './scss/bq-dialog.scss',\n  shadow: true,\n})\nexport class BqDialog {\n  // Own Properties\n  // ====================\n\n  private dialogElem: HTMLDialogElement;\n  private contentElem: HTMLElement;\n  private footerElem: HTMLElement;\n  private closeSlotElem: HTMLElement;\n  private OPEN_CSS_CLASS = 'bq-dialog--open';\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqDialogElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasContent = false;\n  @State() private hasFooter = false;\n\n  // Public Property API\n  // ========================\n\n  /** Border radius of the dialog component */\n  @Prop({ reflect: true }) border: TDialogBorderRadius = 'm';\n\n  /** If true, the backdrop overlay won't be shown when the dialog opens */\n  @Prop({ reflect: true }) disableBackdrop = false;\n\n  /** If true, the dialog will not close when the [Esc] key is press */\n  @Prop({ reflect: true }) disableCloseEscKeydown = false;\n\n  /** If true, the dialog will not close when clicking on the backdrop overlay */\n  @Prop({ reflect: true }) disableCloseClickOutside = false;\n\n  /** The appearance of footer */\n  @Prop({ reflect: true }) footerAppearance: TDialogFooterAppearance = 'standard';\n\n  /** If true, it hides the close button */\n  @Prop({ reflect: true }) hideCloseButton = false;\n\n  /** If true, the dialog will be shown as open */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /** The size of the dialog */\n  @Prop({ reflect: true, mutable: true }) size: TDialogSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n  @Watch('footerAppearance')\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(DIALOG_SIZE, 'large', this.el, 'size');\n    validatePropValue(DIALOG_FOOTER_APPEARANCE, 'standard', this.el, 'footerAppearance');\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      await this.handleOpen();\n      return;\n    }\n\n    await this.handleClose();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the dialog has been canceled or dismissed */\n  @Event() bqCancel!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog will close */\n  @Event() bqClose!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog will open */\n  @Event() bqOpen!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog finish opening */\n  @Event() bqAfterOpen!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog finish closing */\n  @Event() bqAfterClose!: EventEmitter<void>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleOpenChange();\n    this.closeSlotElem = this.el.shadowRoot.querySelector('slot[name=\"button-close\"]');\n    this.closeSlotElem?.addEventListener('click', () => this.hide());\n  }\n\n  disconnectedCallback() {\n    this.closeSlotElem?.removeEventListener('click', () => this.hide());\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('mousedown', { target: 'window', capture: true })\n  async handleMouseClick(event: MouseEvent) {\n    if (!this.open) return;\n    if (!this.dialogElem || this.disableCloseClickOutside) return;\n    // Skip if the mouse button is not the main button\n    if (event.button !== 0) return;\n\n    const rect = this.dialogElem.getBoundingClientRect();\n    if (\n      event.clientY < rect.top ||\n      event.clientY > rect.bottom ||\n      event.clientX < rect.left ||\n      event.clientX > rect.right\n    ) {\n      await this.cancel();\n    }\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  async handleKeyDown(ev: KeyboardEvent) {\n    const isEscapeKey = ev.key === 'Escape' || ev.key === 'Esc';\n    if (!this.open || !this.dialogElem || !isEscapeKey) return;\n\n    if (this.disableCloseEscKeydown) {\n      ev.preventDefault();\n      return;\n    }\n\n    await this.cancel();\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /** Open the dialog */\n  @Method()\n  async show() {\n    const ev = this.bqOpen.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = true;\n  }\n\n  /** Closes the dialog */\n  @Method()\n  async hide() {\n    const ev = this.bqClose.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = false;\n  }\n\n  /** Dismiss or cancel the dialog */\n  @Method()\n  async cancel() {\n    const ev = this.bqCancel.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = false;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClose = async () => {\n    if (!this.dialogElem) return;\n\n    await leave(this.dialogElem);\n    this.dialogElem.close();\n    // Emit bqAfterClose event after the dialog is closed\n    this.handleTransitionEnd();\n  };\n\n  private handleOpen = async () => {\n    if (!this.dialogElem) return;\n\n    this.el.classList.add(this.OPEN_CSS_CLASS);\n    // Show the dialog\n    if (this.disableBackdrop) {\n      this.dialogElem.show();\n    } else {\n      this.dialogElem.showModal();\n    }\n    await enter(this.dialogElem);\n    // Emit bqAfterOpen event after the dialog is opened\n    this.handleTransitionEnd();\n  };\n\n  private handleTransitionEnd = () => {\n    if (this.open) {\n      this.bqAfterOpen.emit();\n      return;\n    }\n\n    this.bqAfterClose.emit();\n    this.el.classList.remove(this.OPEN_CSS_CLASS);\n  };\n\n  private handleContentSlotChange = () => {\n    this.hasContent = hasSlotContent(this.contentElem);\n  };\n\n  private handleFooterSlotChange = () => {\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-dialog--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <dialog\n        style={style}\n        class={{\n          [`bq-dialog hidden ${this.size} m-auto focus-visible:outline-none`]: true,\n          'inset-be-[50%] inset-bs-[50%]': this.disableBackdrop,\n        }}\n        data-transition-enter=\"transition ease-in duration-300\"\n        data-transition-enter-start=\"opacity-0 scale-90\"\n        data-transition-enter-end=\"opacity-100 scale-100\"\n        data-transition-leave=\"transition ease-out duration-300\"\n        data-transition-leave-start=\"opacity-100 scale-100\"\n        data-transition-leave-end=\"opacity-0 scale-90\"\n        inert={this.open ? undefined : true}\n        ref={(dialogElem) => (this.dialogElem = dialogElem)}\n        aria-modal=\"true\"\n        aria-labelledby=\"bq-dialog--title\"\n        part=\"dialog\"\n      >\n        <main class=\"flex flex-col gap-[--bq-dialog--title-body-gap] overflow-hidden\" part=\"content\">\n          <header class=\"bq-dialog--header\" part=\"header\">\n            <div id=\"bq-dialog--title\" class=\"bq-dialog--title flex flex-1 items-center justify-between\" part=\"title\">\n              <slot name=\"title\" />\n            </div>\n            <slot name=\"button-close\">\n              {!this.hideCloseButton && (\n                <bq-button class=\"bq-dialog--close\" appearance=\"text\" size=\"small\">\n                  <bq-icon class=\"cursor-pointer\" name=\"x\" role=\"img\" title=\"Close\" />\n                </bq-button>\n              )}\n            </slot>\n          </header>\n          <div\n            class={{\n              '!hidden': !this.hasContent,\n              'overflow-y-auto p-i-[--bq-dialog--padding]': this.hasContent,\n              '!p-be-[--bq-dialog--padding]': !this.hasFooter,\n            }}\n            ref={(mainElem) => (this.contentElem = mainElem)}\n            part=\"body\"\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </main>\n        <footer\n          class={{\n            '!hidden': !this.hasFooter,\n            'bq-dialog--footer': this.hasFooter,\n            'bg-ui-alt !p-b-s': this.footerAppearance === 'highlight',\n          }}\n          ref={(footerElem) => (this.footerElem = footerElem)}\n          part=\"footer\"\n        >\n          <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n        </footer>\n      </dialog>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["DIALOG_SIZE","DIALOG_FOOTER_APPEARANCE","bqDialogCss","BqDialogStyle0","BqDialog","proxyCustomElement","H","dialogElem","contentElem","footerElem","closeSlotElem","OPEN_CSS_CLASS","hasContent","hasFooter","border","disableBackdrop","disableCloseEscKeydown","disableCloseClickOutside","footerAppearance","hideCloseButton","open","size","checkPropValues","validatePropValue","this","el","handleOpenChange","handleOpen","handleClose","bqCancel","bqClose","bqOpen","bqAfterOpen","bqAfterClose","componentWillLoad","componentDidLoad","handleSlotChange","shadowRoot","querySelector","addEventListener","hide","disconnectedCallback","removeEventListener","handleMouseClick","event","button","rect","getBoundingClientRect","clientY","top","bottom","clientX","left","right","cancel","handleKeyDown","ev","isEscapeKey","key","preventDefault","show","emit","defaultPrevented","async","leave","close","handleTransitionEnd","classList","add","showModal","enter","remove","hasSlotContent","render","style","h","class","inert","undefined","ref","part","id","name","appearance","role","title","mainElem","onSlotchange"],"sources":["../../packages/beeq/src/components/dialog/bq-dialog.types.ts","../../packages/beeq/src/components/dialog/scss/bq-dialog.scss?tag=bq-dialog&encapsulation=shadow","../../packages/beeq/src/components/dialog/bq-dialog.tsx"],"sourcesContent":["export const DIALOG_SIZE = ['small', 'medium', 'large'] as const;\nexport type TDialogSize = (typeof DIALOG_SIZE)[number];\n\nexport const DIALOG_FOOTER_APPEARANCE = ['standard', 'highlight'] as const;\nexport type TDialogFooterAppearance = (typeof DIALOG_FOOTER_APPEARANCE)[number];\n\nexport const DIALOG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TDialogBorderRadius = (typeof DIALOG_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Dialog styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-dialog.variables';\n\n:host {\n  @apply invisible #{!important};\n}\n\n:host(.bq-dialog--open) {\n  @apply visible #{!important};\n}\n\n/* --------------------------------- Dialog --------------------------------- */\n\n.bq-dialog {\n  @apply absolute flex flex-col gap-[--bq-dialog--content-footer-gap] p-b-0 p-i-0;\n  @apply bg-[--bq-dialog--background] text-[--bq-dialog--text-color] shadow-[shadow:--bq-dialog--box-shadow];\n  @apply rounded-[--bq-dialog--border-radius] border-[length:--bq-dialog--border-width] border-[color:--bq-dialog--border-color];\n  // If mobile resolution, dialog will be full width\n  @apply is-[90vw];\n\n  border-style: var(--bq-dialog--border-style);\n\n  &.small {\n    @apply sm:is-[--bq-dialog--width-small];\n  }\n\n  &.medium {\n    @apply sm:is-[--bq-dialog--width-medium];\n  }\n\n  &.large {\n    @apply sm:is-[--bq-dialog--width-large];\n  }\n}\n\n/* ----------------------------- Dialog backdrop ---------------------------- */\n\n.bq-dialog::backdrop {\n  @apply bg-[--bq-dialog--background-backdrop] opacity-0 transition-[opacity] duration-300 ease-in-out;\n}\n\n.bq-dialog[open]::backdrop {\n  @apply opacity-60;\n}\n\n/* ------------------------------ Dialog header ----------------------------- */\n\n.bq-dialog--header {\n  @apply sticky flex items-center gap-m inset-bs-0 p-b-[--bq-dialog--padding] p-be-0 p-i-[--bq-dialog--padding];\n}\n\n/* ------------------------------ Dialog footer ----------------------------- */\n\n.bq-dialog--footer {\n  @apply sticky flex items-center justify-end gap-xs is-full inset-bs-[100%] p-b-[--bq-dialog--padding] p-bs-0 p-i-[--bq-dialog--padding];\n}\n\n/* --------------------------- Dialog close button -------------------------- */\n\n.bq-dialog--close {\n  --bq-radius--m: theme(borderRadius.s);\n  --bq-button--small-paddingX: theme(spacing.xs2);\n  --bq-button--small-paddingY: theme(spacing.xs2);\n\n  &::part(button) {\n    @apply border-none;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  DIALOG_FOOTER_APPEARANCE,\n  DIALOG_SIZE,\n  TDialogBorderRadius,\n  TDialogFooterAppearance,\n  TDialogSize,\n} from './bq-dialog.types';\nimport { enter, hasSlotContent, leave, validatePropValue } from '../../shared/utils';\n\n/**\n * The Dialog component is used to display additional content or prompt a user for action.\n * It provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n *\n * @example How to use it\n * ```html\n * <bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n *   <h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n *     <bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\n *     Title\n *   </h5>\n *   <p>\n *     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\n *     standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\n *     type specimen book.\n *   </p>\n *   <div class=\"flex gap-xs\" slot=\"footer\">\n *     <bq-button appearance=\"link\">Button</bq-button>\n *     <bq-button variant=\"ghost\">Button</bq-button>\n *     <bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n *   </div>\n * </bq-dialog>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/15b6fc-dialog\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\"} border - Border radius of the dialog component.\n * @attr {boolean} disable-backdrop - If true, the backdrop overlay won't be shown when the dialog opens.\n * @attr {boolean} disable-close-esc-keydown - If true, the dialog will not close when the [Esc] key is pressed.\n * @attr {boolean} disable-close-click-outside - If true, the dialog will not close when clicking on the backdrop overlay.\n * @attr {\"standard\" | \"highlight\"} footer-appearance - The appearance of the footer.\n * @attr {boolean} hide-close-button - If true, it hides the close button.\n * @attr {boolean} open - If true, the dialog will be shown as open.\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the dialog.\n *\n * @method show - Open the dialog.\n * @method hide - Closes the dialog.\n * @method cancel - Dismiss or cancel the dialog.\n *\n * @event bqCancel - Callback handler emitted when the dialog has been canceled or dismissed.\n * @event bqClose - Callback handler emitted when the dialog will close.\n * @event bqOpen - Callback handler emitted when the dialog will open.\n * @event bqAfterOpen - Callback handler emitted when the dialog finish opening.\n * @event bqAfterClose - Callback handler emitted when the dialog finish closing.\n *\n * @slot title - The title content of the dialog.\n * @slot - The body content of the dialog.\n * @slot footer - The footer content of the dialog.\n * @slot button-close - The close button content of the dialog.\n *\n * @part body - The `<main>` that holds the dialog body content.\n * @part button-close - The button that closes the dialog on click.\n * @part content - The `<div>` container that holds the dialog title and body content.\n * @part dialog - The `<dialog>` wrapper container inside the shadow DOM.\n * @part footer - The `<footer>` that holds footer content.\n * @part header - The `<header>` that holds the icon, title, description and close button.\n * @part title - The `<div>` that holds the title content.\n *\n * @cssprop --bq-dialog--background - Dialog background color\n * @cssprop --bq-dialog--background-backdrop - Dialog backdrop background color\n * @cssprop --bq-dialog--box-shadow - Dialog box shadow\n * @cssprop --bq-dialog--border-color - Dialog border color\n * @cssprop --bq-dialog--border-style - Dialog border style\n * @cssprop --bq-dialog--border-width - Dialog border width\n * @cssprop --bq-dialog--border-radius - Dialog border radius\n * @cssprop --bq-dialog--padding - Dialog padding\n * @cssprop --bq-dialog--content-footer-gap - Dialog gap distance between content and footer elements\n * @cssprop --bq-dialog--title-body-gap - Dialog gap distance between title and body elements\n * @cssprop --bq-dialog--width-small - Dialog small width\n * @cssprop --bq-dialog--width-medium - Dialog medium width\n * @cssprop --bq-dialog--width-large - Dialog large width\n * @cssprop --bq-dialog-z-index - Dialog z-index applied when opened\n */\n@Component({\n  tag: 'bq-dialog',\n  styleUrl: './scss/bq-dialog.scss',\n  shadow: true,\n})\nexport class BqDialog {\n  // Own Properties\n  // ====================\n\n  private dialogElem: HTMLDialogElement;\n  private contentElem: HTMLElement;\n  private footerElem: HTMLElement;\n  private closeSlotElem: HTMLElement;\n  private OPEN_CSS_CLASS = 'bq-dialog--open';\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqDialogElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasContent = false;\n  @State() private hasFooter = false;\n\n  // Public Property API\n  // ========================\n\n  /** Border radius of the dialog component */\n  @Prop({ reflect: true }) border: TDialogBorderRadius = 'm';\n\n  /** If true, the backdrop overlay won't be shown when the dialog opens */\n  @Prop({ reflect: true }) disableBackdrop = false;\n\n  /** If true, the dialog will not close when the [Esc] key is press */\n  @Prop({ reflect: true }) disableCloseEscKeydown = false;\n\n  /** If true, the dialog will not close when clicking on the backdrop overlay */\n  @Prop({ reflect: true }) disableCloseClickOutside = false;\n\n  /** The appearance of footer */\n  @Prop({ reflect: true }) footerAppearance: TDialogFooterAppearance = 'standard';\n\n  /** If true, it hides the close button */\n  @Prop({ reflect: true }) hideCloseButton = false;\n\n  /** If true, the dialog will be shown as open */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /** The size of the dialog */\n  @Prop({ reflect: true, mutable: true }) size: TDialogSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n  @Watch('footerAppearance')\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(DIALOG_SIZE, 'large', this.el, 'size');\n    validatePropValue(DIALOG_FOOTER_APPEARANCE, 'standard', this.el, 'footerAppearance');\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      await this.handleOpen();\n      return;\n    }\n\n    await this.handleClose();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the dialog has been canceled or dismissed */\n  @Event() bqCancel!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog will close */\n  @Event() bqClose!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog will open */\n  @Event() bqOpen!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog finish opening */\n  @Event() bqAfterOpen!: EventEmitter<void>;\n\n  /** Callback handler emitted when the dialog finish closing */\n  @Event() bqAfterClose!: EventEmitter<void>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n    this.handleOpenChange();\n\n    this.closeSlotElem = this.el.shadowRoot.querySelector('slot[name=\"button-close\"]');\n    this.closeSlotElem?.addEventListener('click', () => this.hide());\n  }\n\n  disconnectedCallback() {\n    this.closeSlotElem?.removeEventListener('click', () => this.hide());\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('mousedown', { target: 'window', capture: true })\n  async handleMouseClick(event: MouseEvent) {\n    if (!this.open) return;\n    if (!this.dialogElem || this.disableCloseClickOutside) return;\n    // Skip if the mouse button is not the main button\n    if (event.button !== 0) return;\n\n    const rect = this.dialogElem.getBoundingClientRect();\n    if (\n      event.clientY < rect.top ||\n      event.clientY > rect.bottom ||\n      event.clientX < rect.left ||\n      event.clientX > rect.right\n    ) {\n      await this.cancel();\n    }\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  async handleKeyDown(ev: KeyboardEvent) {\n    const isEscapeKey = ev.key === 'Escape' || ev.key === 'Esc';\n    if (!this.open || !this.dialogElem || !isEscapeKey) return;\n\n    if (this.disableCloseEscKeydown) {\n      ev.preventDefault();\n      return;\n    }\n\n    await this.cancel();\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /** Open the dialog */\n  @Method()\n  async show() {\n    const ev = this.bqOpen.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = true;\n  }\n\n  /** Closes the dialog */\n  @Method()\n  async hide() {\n    const ev = this.bqClose.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = false;\n  }\n\n  /** Dismiss or cancel the dialog */\n  @Method()\n  async cancel() {\n    const ev = this.bqCancel.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = false;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClose = async () => {\n    if (!this.dialogElem) return;\n\n    await leave(this.dialogElem);\n    this.dialogElem.close();\n    // Emit bqAfterClose event after the dialog is closed\n    this.handleTransitionEnd();\n  };\n\n  private handleOpen = async () => {\n    if (!this.dialogElem) return;\n\n    this.el.classList.add(this.OPEN_CSS_CLASS);\n    // Show the dialog\n    if (this.disableBackdrop) {\n      this.dialogElem.show();\n    } else {\n      this.dialogElem.showModal();\n    }\n    await enter(this.dialogElem);\n    // Emit bqAfterOpen event after the dialog is opened\n    this.handleTransitionEnd();\n  };\n\n  private handleTransitionEnd = () => {\n    if (this.open) {\n      this.bqAfterOpen.emit();\n      return;\n    }\n\n    this.bqAfterClose.emit();\n    this.el.classList.remove(this.OPEN_CSS_CLASS);\n  };\n\n  private handleSlotChange = () => {\n    this.hasContent = hasSlotContent(this.contentElem);\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-dialog--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <dialog\n        style={style}\n        class={{\n          [`bq-dialog hidden ${this.size} m-auto focus-visible:outline-none`]: true,\n          'inset-be-[50%] inset-bs-[50%]': this.disableBackdrop,\n        }}\n        data-transition-enter=\"transition ease-in duration-300\"\n        data-transition-enter-start=\"opacity-0 scale-90\"\n        data-transition-enter-end=\"opacity-100 scale-100\"\n        data-transition-leave=\"transition ease-out duration-300\"\n        data-transition-leave-start=\"opacity-100 scale-100\"\n        data-transition-leave-end=\"opacity-0 scale-90\"\n        inert={this.open ? undefined : true}\n        ref={(dialogElem) => (this.dialogElem = dialogElem)}\n        aria-modal=\"true\"\n        aria-labelledby=\"bq-dialog--title\"\n        part=\"dialog\"\n      >\n        <main class=\"flex flex-col gap-[--bq-dialog--title-body-gap] overflow-hidden\" part=\"content\">\n          <header class=\"bq-dialog--header\" part=\"header\">\n            <div id=\"bq-dialog--title\" class=\"bq-dialog--title flex flex-1 items-center justify-between\" part=\"title\">\n              <slot name=\"title\" />\n            </div>\n            <slot name=\"button-close\">\n              {!this.hideCloseButton && (\n                <bq-button class=\"bq-dialog--close\" appearance=\"text\" size=\"small\">\n                  <bq-icon class=\"cursor-pointer\" name=\"x\" role=\"img\" title=\"Close\" />\n                </bq-button>\n              )}\n            </slot>\n          </header>\n          <div\n            class={{\n              '!hidden': !this.hasContent,\n              'overflow-y-auto p-i-[--bq-dialog--padding]': this.hasContent,\n              '!p-be-[--bq-dialog--padding]': !this.hasFooter,\n            }}\n            ref={(mainElem) => (this.contentElem = mainElem)}\n            part=\"body\"\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </div>\n        </main>\n        <footer\n          class={{\n            '!hidden': !this.hasFooter,\n            'bq-dialog--footer': this.hasFooter,\n            'bg-ui-alt !p-b-s': this.footerAppearance === 'highlight',\n          }}\n          ref={(footerElem) => (this.footerElem = footerElem)}\n          part=\"footer\"\n        >\n          <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n        </footer>\n      </dialog>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/bq-divider.js

@@ -2,5 +2,5 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import{B as o,d as s}from"./p-ac26ffcd.js";const c=o;const t=s;export{c as BqDivider,t as defineCustomElement};
+import{B as o,d as s}from"./p-242345e1.js";const t=o;const p=s;export{t as BqDivider,p as defineCustomElement};
 //# sourceMappingURL=bq-divider.js.map