@beeq/core 1.11.0 → 1.11.2

package/dist/types/components.d.ts

@@ -1357,7 +1357,6 @@ export namespace Components {
      * @dependency bq-icon
      * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.
      * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.
-     * @attr {string} autocorrect - Controls whether or not the input field should have autocorrect enabled.
      * @attr {boolean} autofocus - If true, the input will be focused on component render.
      * @attr {string} clear-button-label - The clear button aria label.
      * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
@@ -1407,22 +1406,20 @@ export namespace Components {
      */
     interface BqInput {
         /**
-          * Controls whether or not the input field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
+          * Controls whether or not the input field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
           * @default 'off'
          */
         "autocapitalize": string;
         /**
-          * Specifies whether or not the input field should have autocomplete enabled. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+          * Specifies whether or not the input field should have autocomplete enabled.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
           * @default 'off'
          */
         "autocomplete": string;
-        /**
-          * Controls whether or not the input field should have autocorrect enabled. Possible values are 'on' and 'off'.
-          * @default 'off'
-         */
-        "autocorrect": 'on' | 'off';
         /**
           * If true, the input will be focused on component render
+          * @default false
          */
         "autofocus": boolean;
         /**
@@ -1478,7 +1475,8 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
+          * Specifies a regular expression the form control's value should match.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
          */
         "pattern"?: string;
         /**
@@ -1494,11 +1492,13 @@ export namespace Components {
          */
         "required"?: boolean;
         /**
-          * A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+          * A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
          */
         "step": number | 'any';
         /**
-          * The type attribute specifies the type of input field to display. Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+          * The type attribute specifies the type of input field to display. Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
           * @default 'text'
          */
         "type": TInputType;
@@ -1644,6 +1644,10 @@ export namespace Components {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The display value of the option. It can be used to override the default displayed value.
+         */
+        "displayValue"?: string;
         /**
           * If true, the option is hidden.
           * @default false
@@ -2783,7 +2787,7 @@ export namespace Components {
      * @attr {boolean} clickable - If `true`, the Tag can be clickable
      * @attr {"error" | "gray" | "info" | "success" | "warning"} color - The color style of the Tag
      * @attr {boolean} disabled - If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
-     * @attr {boolean} hidden - If `true`, the Tag component will hidden (only if removable = `true`)
+     * @attr {boolean} hidden - If `true`, the Tag component will be hidden
      * @attr {boolean} removable - If `true`, the Tag component can be removed
      * @attr {boolean} selected - If `true`, the Tag is selected (only if clickable = `true`)
      * @attr {"xsmall" | "small" | "medium"} size - The size of the Tag component
@@ -2828,7 +2832,7 @@ export namespace Components {
          */
         "disabled"?: boolean;
         /**
-          * If true, the Tag component will hidden (only if removable = `true`)
+          * If true, the Tag component will be hidden
          */
         "hidden": boolean;
         /**
@@ -2876,7 +2880,6 @@ export namespace Components {
      * @status stable
      * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.
      * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.
-     * @attr {string} autocorrect - Controls whether or not the textarea field should have autocorrect enabled.
      * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.
      * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.
      * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.
@@ -2925,22 +2928,20 @@ export namespace Components {
          */
         "autoGrow": boolean;
         /**
-          * Controls whether or not the textarea field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
+          * Controls whether or not the textarea field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
           * @default 'off'
          */
         "autocapitalize": TTextareaAutoCapitalize;
         /**
-          * Specifies whether or not the textarea field should have autocomplete enabled. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+          * Specifies whether or not the textarea field should have autocomplete enabled.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
           * @default 'off'
          */
         "autocomplete": string;
-        /**
-          * Controls whether or not the textarea field should have autocorrect enabled. Possible values are 'on' and 'off'.
-          * @default 'off'
-         */
-        "autocorrect": 'on' | 'off';
         /**
           * If true, the textarea will be focused on component render
+          * @default false
          */
         "autofocus": boolean;
         /**
@@ -4169,7 +4170,6 @@ declare global {
      * @dependency bq-icon
      * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.
      * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.
-     * @attr {string} autocorrect - Controls whether or not the input field should have autocorrect enabled.
      * @attr {boolean} autofocus - If true, the input will be focused on component render.
      * @attr {string} clear-button-label - The clear button aria label.
      * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
@@ -5123,7 +5123,7 @@ declare global {
      * @attr {boolean} clickable - If `true`, the Tag can be clickable
      * @attr {"error" | "gray" | "info" | "success" | "warning"} color - The color style of the Tag
      * @attr {boolean} disabled - If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
-     * @attr {boolean} hidden - If `true`, the Tag component will hidden (only if removable = `true`)
+     * @attr {boolean} hidden - If `true`, the Tag component will be hidden
      * @attr {boolean} removable - If `true`, the Tag component can be removed
      * @attr {boolean} selected - If `true`, the Tag is selected (only if clickable = `true`)
      * @attr {"xsmall" | "small" | "medium"} size - The size of the Tag component
@@ -5185,7 +5185,6 @@ declare global {
      * @status stable
      * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.
      * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.
-     * @attr {string} autocorrect - Controls whether or not the textarea field should have autocorrect enabled.
      * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.
      * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.
      * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.
@@ -6785,7 +6784,6 @@ declare namespace LocalJSX {
      * @dependency bq-icon
      * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.
      * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.
-     * @attr {string} autocorrect - Controls whether or not the input field should have autocorrect enabled.
      * @attr {boolean} autofocus - If true, the input will be focused on component render.
      * @attr {string} clear-button-label - The clear button aria label.
      * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
@@ -6835,22 +6833,20 @@ declare namespace LocalJSX {
      */
     interface BqInput {
         /**
-          * Controls whether or not the input field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
+          * Controls whether or not the input field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
           * @default 'off'
          */
         "autocapitalize"?: string;
         /**
-          * Specifies whether or not the input field should have autocomplete enabled. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+          * Specifies whether or not the input field should have autocomplete enabled.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
           * @default 'off'
          */
         "autocomplete"?: string;
-        /**
-          * Controls whether or not the input field should have autocorrect enabled. Possible values are 'on' and 'off'.
-          * @default 'off'
-         */
-        "autocorrect"?: 'on' | 'off';
         /**
           * If true, the input will be focused on component render
+          * @default false
          */
         "autofocus"?: boolean;
         /**
@@ -6926,7 +6922,8 @@ declare namespace LocalJSX {
          */
         "onBqInput"?: (event: BqInputCustomEvent<{ value: string | number | string[]; el: HTMLBqInputElement }>) => void;
         /**
-          * Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
+          * Specifies a regular expression the form control's value should match.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
          */
         "pattern"?: string;
         /**
@@ -6942,11 +6939,13 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+          * A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
          */
         "step"?: number | 'any';
         /**
-          * The type attribute specifies the type of input field to display. Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+          * The type attribute specifies the type of input field to display. Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
           * @default 'text'
          */
         "type"?: TInputType;
@@ -7096,6 +7095,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The display value of the option. It can be used to override the default displayed value.
+         */
+        "displayValue"?: string;
         /**
           * If true, the option is hidden.
           * @default false
@@ -8308,7 +8311,7 @@ declare namespace LocalJSX {
      * @attr {boolean} clickable - If `true`, the Tag can be clickable
      * @attr {"error" | "gray" | "info" | "success" | "warning"} color - The color style of the Tag
      * @attr {boolean} disabled - If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
-     * @attr {boolean} hidden - If `true`, the Tag component will hidden (only if removable = `true`)
+     * @attr {boolean} hidden - If `true`, the Tag component will be hidden
      * @attr {boolean} removable - If `true`, the Tag component can be removed
      * @attr {boolean} selected - If `true`, the Tag is selected (only if clickable = `true`)
      * @attr {"xsmall" | "small" | "medium"} size - The size of the Tag component
@@ -8353,7 +8356,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * If true, the Tag component will hidden (only if removable = `true`)
+          * If true, the Tag component will be hidden
          */
         "hidden"?: boolean;
         /**
@@ -8413,7 +8416,6 @@ declare namespace LocalJSX {
      * @status stable
      * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.
      * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.
-     * @attr {string} autocorrect - Controls whether or not the textarea field should have autocorrect enabled.
      * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.
      * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.
      * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.
@@ -8462,22 +8464,20 @@ declare namespace LocalJSX {
          */
         "autoGrow"?: boolean;
         /**
-          * Controls whether or not the textarea field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
+          * Controls whether or not the textarea field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
           * @default 'off'
          */
         "autocapitalize"?: TTextareaAutoCapitalize;
         /**
-          * Specifies whether or not the textarea field should have autocomplete enabled. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+          * Specifies whether or not the textarea field should have autocomplete enabled.
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
           * @default 'off'
          */
         "autocomplete"?: string;
-        /**
-          * Controls whether or not the textarea field should have autocorrect enabled. Possible values are 'on' and 'off'.
-          * @default 'off'
-         */
-        "autocorrect"?: 'on' | 'off';
         /**
           * If true, the textarea will be focused on component render
+          * @default false
          */
         "autofocus"?: boolean;
         /**
@@ -9442,7 +9442,6 @@ declare module "@stencil/core" {
              * @dependency bq-icon
              * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.
              * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.
-             * @attr {string} autocorrect - Controls whether or not the input field should have autocorrect enabled.
              * @attr {boolean} autofocus - If true, the input will be focused on component render.
              * @attr {string} clear-button-label - The clear button aria label.
              * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
@@ -10107,7 +10106,7 @@ declare module "@stencil/core" {
              * @attr {boolean} clickable - If `true`, the Tag can be clickable
              * @attr {"error" | "gray" | "info" | "success" | "warning"} color - The color style of the Tag
              * @attr {boolean} disabled - If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
-             * @attr {boolean} hidden - If `true`, the Tag component will hidden (only if removable = `true`)
+             * @attr {boolean} hidden - If `true`, the Tag component will be hidden
              * @attr {boolean} removable - If `true`, the Tag component can be removed
              * @attr {boolean} selected - If `true`, the Tag is selected (only if clickable = `true`)
              * @attr {"xsmall" | "small" | "medium"} size - The size of the Tag component
@@ -10149,7 +10148,6 @@ declare module "@stencil/core" {
              * @status stable
              * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.
              * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.
-             * @attr {string} autocorrect - Controls whether or not the textarea field should have autocorrect enabled.
              * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.
              * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.
              * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.

package/dist/types/global.d.ts

@@ -1,12 +1,9 @@
 import type { JSXBase } from './stencil-public-runtime';
 
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-ignore: this imported file declaration is generated by the build process
-// eslint-disable-next-line import-x/no-unresolved
+// @ts-expect-error: this imported file declaration is generated by the build process
 import type { CustomElements } from '../cem/beeq';
 
 declare module '@stencil/core' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
   export namespace JSX {
     interface IntrinsicElements extends CustomElements {
       // Extend the global slot HTML element to include the id and class attributes

package/dist/types/home/runner/work/BEEQ/BEEQ/.stencil/packages/beeq/jest.config.d.ts

@@ -12,5 +12,8 @@ declare const _default: {
     };
     moduleFileExtensions: string[];
     coverageDirectory: string;
+    testTimeout: number;
+    detectOpenHandles: true;
+    forceExit: false;
 };
 export default _default;

package/dist/types/services/interfaces/floating-ui.d.ts

@@ -1,4 +1,4 @@
-import { Placement, Strategy } from '@floating-ui/core';
+import type { Placement, Strategy } from '@floating-ui/core';
 export interface FloatingUIOptions {
     distance?: number;
     placement?: Placement;

package/dist/types/services/libraries/floating-ui/index.d.ts

@@ -1,5 +1,5 @@
-import { ReferenceElement } from '@floating-ui/dom';
-import { FloatingUIOptions } from '../../interfaces';
+import { type ReferenceElement } from '@floating-ui/dom';
+import type { FloatingUIOptions } from '../../interfaces';
 export declare class FloatingUI {
     panel: HTMLElement;
     trigger: ReferenceElement;
@@ -15,5 +15,8 @@ export declare class FloatingUI {
             placement: any;
         }) => {};
     };
+    private applyPanelPosition;
+    private applyArrowPosition;
+    private applyVisibility;
     private roundByDPR;
 }

package/dist/types/shared/test-utils/setProperties.d.ts

@@ -9,4 +9,4 @@ export type BqHTMLTagNameMap = keyof {
  * @param {Object} attributes - attributes that will be set on element instance
  * @returns {Object} attributes that were set on element instance
  */
-export declare const setProperties: <T extends keyof HTMLElementTagNameMap = "bq-checkbox" | "bq-switch" | "bq-radio-group" | "bq-select" | "bq-date-picker" | "bq-textarea" | "bq-input" | "bq-slider" | "bq-accordion" | "bq-accordion-group" | "bq-alert" | "bq-avatar" | "bq-badge" | "bq-breadcrumb" | "bq-breadcrumb-item" | "bq-button" | "bq-card" | "bq-dialog" | "bq-divider" | "bq-drawer" | "bq-dropdown" | "bq-empty-state" | "bq-icon" | "bq-notification" | "bq-option" | "bq-option-group" | "bq-option-list" | "bq-page-title" | "bq-panel" | "bq-progress" | "bq-radio" | "bq-side-menu" | "bq-side-menu-item" | "bq-spinner" | "bq-status" | "bq-step-item" | "bq-steps" | "bq-tab" | "bq-tab-group" | "bq-tag" | "bq-toast" | "bq-tooltip">(page: E2EPage, element: T, attributes: Partial<HTMLElementTagNameMap[T]>) => Promise<Record<string, unknown>>;
+export declare const setProperties: <T extends keyof HTMLElementTagNameMap = BqHTMLTagNameMap>(page: E2EPage, element: T, attributes: Partial<HTMLElementTagNameMap[T]>) => Promise<Record<string, unknown>>;

package/dist/types/shared/test-utils/sleep.d.ts

@@ -1 +1 @@
-export { setTimeout as sleep } from 'timers/promises';
+export { setTimeout as sleep } from 'node:timers/promises';

package/dist/types/shared/utils/date.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Parses various date input formats and returns a Date object
+ * Supports:
+ * - ISO format: "2024-05-30"
+ * - Text format: "30 May 2024", "May 30, 2024", "30 January 2024", "January 1, 1970" (locale-aware)
+ * - Numeric formats: "30/05/2024", "05-30-2024", "30.05.2024", "05.30.2024" (with heuristic for day/month)
+ *
+ * @param {string} inputValue - The date string to parse
+ * @param {Intl.LocalesArgument} locale - The locale for month name recognition (defaults to 'en-GB')
+ * @returns {Date | null} Parsed Date object or null if parsing fails
+ */
+export declare const parseDateInput: (inputValue: string, locale?: Intl.LocalesArgument) => Date | null;
+/**
+ * Validates if a string is in ISO date format (YYYY-MM-DD) with actual valid date values
+ * @param {string} dateStr - The date string to validate
+ * @returns {boolean} True if the date string is valid in ISO format and represents an actual valid date
+ */
+export declare const isValidISODate: (dateStr: string) => boolean;

package/dist/types/shared/utils/debounce.d.ts

@@ -1,4 +1,4 @@
-export type TFunction = (...args: any[]) => unknown;
+export type TFunction = (...args: unknown[]) => unknown;
 type TDebounceFnReturn<T> = T extends unknown[] ? (...params: T) => void : (param: T) => void;
 export type TDebounce<T> = TDebounceFnReturn<T> & {
     cancel: () => void;

package/dist/types/shared/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './assetsPath';
 export * from './clamp';
 export * from './cssVariables';
+export * from './date';
 export * from './debounce';
 export * from './event';
 export * from './getNextElement';

package/dist/types/shared/utils/setRafTimeout.d.ts

@@ -6,4 +6,4 @@
  * @param {Any[]} args - The arguments of func.
  * @returns {void}
  */
-export declare const setRafTimeout: <TFunc extends (...args: any[]) => void>(func: TFunc, wait: number, ...args: Parameters<TFunc>) => (() => void);
+export declare const setRafTimeout: <TFunc extends (...args: unknown[]) => void>(func: TFunc, wait: number, ...args: Parameters<TFunc>) => (() => void);

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,6 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -151,7 +153,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -233,6 +241,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -349,6 +365,37 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
+ *
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports

package/dist/types/tools/angular-value-accessor-config.d.ts

@@ -1,4 +1,4 @@
-import { ValueAccessorConfig } from '@stencil/angular-output-target';
+import type { ValueAccessorConfig } from '@stencil/angular-output-target';
 /**
  * This lets you define which components should be integrated with ngModel (i.e. form components).
  * It lets you set what the target prop is (i.e. value), which event will cause the target prop to change.

package/dist/types/tools/vue-model-config.d.ts

@@ -1,2 +1,2 @@
-import { ComponentModelConfig } from '@stencil/vue-output-target';
+import type { ComponentModelConfig } from '@stencil/vue-output-target';
 export declare const vueComponentModels: ComponentModelConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeq/core",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "license": "Apache-2.0",
   "description": "BEEQ, a Design System components ruled by Endavan developers :)",
   "main": "./dist/index.cjs.js",

package/dist/beeq/p-04745600.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqTabGroupCss","BqTabGroup","debouncedBqChange","debounceTime","disableDivider","orientation","placement","size","value","checkDebounceChange","this","Math","max","cancel","debounce","event","bqChange","emit","checkPropValues","validatePropValue","TAB_SIZE","el","TAB_ORIENTATION","TAB_PLACEMENT","bqTabElements","forEach","bqTabElement","active","isNil","tabId","componentWillLoad","componentDidLoad","onKeyUp","target","isHTMLElement","makeTabsFocusable","onBqClick","detail","selectTab","onBqKeyDown","keyActions","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","direction","key","focusTabSibling","onBqBlur","restoreTabsFocus","async","currentTarget","index","elements","getNextElement","vFocus","disabled","enableFocus","Array","from","querySelectorAll","render","h","Host","class","part","role"],"sources":["../../packages/beeq/src/components/tab-group/scss/bq-tab-group.scss?tag=bq-tab-group&encapsulation=shadow","../../packages/beeq/src/components/tab-group/bq-tab-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply block;\n}\n\n.bq-tab-group {\n  @apply relative;\n\n  &::after {\n    @apply absolute flex border-0 border-solid border-primary content-empty;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      @apply is-full inset-be-0 [border-block-end-width:--bq-stroke-s];\n    }\n  }\n\n  &--horizontal-start {\n    @apply justify-start;\n  }\n\n  &--horizontal-end {\n    @apply justify-end;\n  }\n\n  &--vertical-start::after {\n    @apply end-0 bs-full is-0 [border-block-end-width:0px] [border-inline-end-width:--bq-stroke-s];\n  }\n\n  &--vertical-end::after {\n    @apply start-0 bs-full is-0 [border-block-end-width:0px] [border-inline-start-width:--bq-stroke-s];\n  }\n}\n\n.bq-tab-group.no-divider {\n  &::after {\n    @apply content-none;\n  }\n}\n\n.bq-tab-group--container {\n  @include hide-scrollbar;\n  @apply gap-xs2 p-xs2; // This will avoid cutting the outline focus style\n}\n","import { Component, Element, Event, h, Host, Listen, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { debounce, getNextElement, isHTMLElement, isNil, TDebounce, validatePropValue } from '../../shared/utils';\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from '../tab/bq-tab.types';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from '../tab/bq-tab.types';\n\n/**\n * The tab group is a user interface element that allows users wrap a set of tab items.\n *\n * @example How to use it\n * ```html\n * <bq-tab-group value=\"5\">\n *   <bq-tab tab-id=\"1\">Tab</bq-tab>\n *   <bq-tab tab-id=\"2\" active>Tab</bq-tab>\n *   <bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n *   <bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n * </bq-tab-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {number} debounce-time - A number representing the delay value applied to bqChange event handler\n * @attr {boolean} disable-divider - If true, the underline divider below the tabs won't be shown\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} value - A string representing the id of the selected tab.\n *\n * @event bqChange - Handler to be called when the tab value changes\n *\n * @slot - The bq-tab items\n *\n * @part base - The HTML div wrapper inside the shadow DOM.\n * @part tabs - The HTML div used to hold the tab buttons.\n */\n@Component({\n  tag: 'bq-tab-group',\n  styleUrl: './scss/bq-tab-group.scss',\n  shadow: true,\n})\nexport class BqTabGroup {\n  // Own Properties\n  // ====================\n\n  private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqTabElement }>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** A number representing the delay value applied to bqChange event handler */\n  @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n  /** If true, the underline divider below the tabs won't be shown  */\n  @Prop({ reflect: true }) disableDivider = false;\n\n  /** The direction that tab should be render */\n  @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n  /** The placement that tab should be render */\n  @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n  /** A string representing the id of the selected tab. */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('debounceTime')\n  checkDebounceChange() {\n    if (this.debounceTime < 0) {\n      this.debounceTime = Math.max(0, this.debounceTime);\n    }\n\n    if (this.debouncedBqChange) {\n      this.debouncedBqChange.cancel();\n    }\n\n    this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n      this.bqChange.emit(event);\n    }, this.debounceTime);\n  }\n\n  @Watch('size')\n  @Watch('value')\n  @Watch('orientation')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n\n    this.bqTabElements.forEach((bqTabElement) => {\n      bqTabElement.size = this.size;\n      bqTabElement.orientation = this.orientation;\n      bqTabElement.placement = this.placement;\n      bqTabElement.active = !isNil(this.value) ? bqTabElement.tabId === this.value : false;\n    });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab value changes */\n  @Event() bqChange: EventEmitter<{ target: HTMLBqTabElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkDebounceChange();\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('keyup', { target: 'body', passive: true, capture: true })\n  onKeyUp(event: KeyboardEvent) {\n    const { target } = event;\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    this.makeTabsFocusable();\n  }\n\n  @Listen('bqClick', { passive: true })\n  onBqClick(event: CustomEvent<HTMLBqTabElement>) {\n    const { detail: target } = event;\n    this.bqTabElements.forEach((bqTabElement) => (bqTabElement.active = bqTabElement === target));\n    this.debouncedBqChange({ value: target.tabId, target });\n    this.selectTab(target);\n  }\n\n  @Listen('bqKeyDown', { passive: true })\n  async onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n    const { target } = event;\n\n    // NOTE: ensures the target is an HTML element with the tag name 'bq-tab'\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    const keyActions: { [key: string]: 'forward' | 'backward' } = {\n      ArrowDown: 'forward',\n      ArrowRight: 'forward',\n      ArrowUp: 'backward',\n      ArrowLeft: 'backward',\n    };\n\n    // NOTE: gets the direction based on key pressed\n    const direction = keyActions[event.detail.key];\n\n    if (!direction) return;\n\n    await this.focusTabSibling(target, direction);\n  }\n\n  @Listen('bqBlur', { capture: true, passive: true })\n  onBqBlur() {\n    this.restoreTabsFocus();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private focusTabSibling = async (\n    currentTarget: HTMLBqTabElement,\n    direction: 'forward' | 'backward',\n  ): Promise<void> => {\n    let target: HTMLBqTabElement | null = null;\n\n    this.bqTabElements.forEach((bqTabElement, index, elements) => {\n      bqTabElement.active = false;\n\n      if (bqTabElement === currentTarget) {\n        target = getNextElement(elements, index, direction);\n      }\n    });\n\n    if (target) {\n      await target.vFocus();\n      this.selectTab(target);\n    }\n  };\n\n  private makeTabsFocusable = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled) return;\n\n      /**\n       * This is a \"fire and forget\" operation. The callback itself doesn't do anything special\n       * with the asynchronous code (doesn't await it or do anything with the result)\n       * Details: https://stackoverflow.com/a/63488201\n       */\n      (async () => {\n        await bqTabElement.enableFocus(true);\n      })();\n    });\n  };\n\n  private restoreTabsFocus = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled || bqTabElement.active) return;\n\n      /** @See line #173 */\n      (async () => {\n        await bqTabElement.enableFocus(false);\n      })();\n    });\n  };\n\n  private get bqTabElements(): HTMLBqTabElement[] {\n    return Array.from(this.el.querySelectorAll('bq-tab'));\n  }\n\n  private selectTab = (target: HTMLBqTabElement): void => {\n    const { tabId } = target;\n    target.active = true;\n    this.value = tabId;\n    this.debouncedBqChange({ value: tabId, target });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host class={{ 'inline-block': this.orientation === 'vertical' }}>\n        <div\n          class={{\n            [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} flex is-full`]: true,\n            'no-divider': this.disableDivider,\n          }}\n          part=\"base\"\n        >\n          <div\n            class={{\n              'bq-tab-group--container flex overflow-x-auto': true,\n              'flex-col': this.orientation !== 'horizontal',\n            }}\n            role=\"tablist\"\n            part=\"tabs\"\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-0deed5d1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ALERT_TYPE","bqAlertCss","BqAlert","autoDismissDebounce","bodyElem","footerElem","alertElement","hasContent","hasFooter","autoDismiss","border","disableClose","hideIcon","open","time","type","sticky","handleTimeout","this","cancel","debounce","hide","handleOpenChange","handleHide","handleShow","checkPropValues","validatePropValue","el","bqHide","bqShow","bqAfterShow","bqAfterHide","componentWillLoad","componentDidLoad","handleSlotChange","classList","add","show","async","ev","emit","defaultPrevented","leave","handleTransitionEnd","remove","enter","hasSlotContent","iconName","error","success","warning","render","style","h","Host","key","class","hidden","role","ref","div","part","appearance","size","onClick","bind","name","exportparts","onSlotchange"],"sources":["../../packages/beeq/src/components/alert/bq-alert.types.ts","../../packages/beeq/src/components/alert/scss/bq-alert.scss?tag=bq-alert&encapsulation=shadow","../../packages/beeq/src/components/alert/bq-alert.tsx"],"sourcesContent":["export const ALERT_TYPE = ['info', 'success', 'warning', 'error', 'default'] as const;\nexport type TAlertType = (typeof ALERT_TYPE)[number];\n\nexport const ALERT_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TAlertBorderRadius = (typeof ALERT_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                        Alert styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-alert.variables';\n\n:host {\n  @apply block;\n}\n\n:host(.is-hidden) {\n  @apply hidden;\n}\n\n:host(.is-sticky) {\n  @apply fixed inset-0 z-[var(--bq-alert--z-index)] is-full inset-bs-0;\n\n  .bq-alert {\n    @apply items-center justify-center rounded-none;\n  }\n}\n\n.bq-alert {\n  @apply relative flex transition-all min-is-[--bq-alert--min-width] p-b-[--bq-alert--padding] p-i-[--bq-alert--padding];\n  @apply rounded-[var(--bq-alert--border-radius)] border-[length:--bq-alert--border-width];\n\n  border-style: var(--bq-alert--border-style);\n}\n\n/**\n * Set the alert background and border color based on the type value selected\n */\n\n.bq-alert__default {\n  @apply border-[color:--bq-alert--border-default] bg-[color:--bq-alert--background-default];\n}\n\n.bq-alert__error {\n  @apply border-[color:--bq-alert--border-error] bg-[color:--bq-alert--background-error];\n}\n\n.bq-alert__info {\n  @apply border-[color:--bq-alert--border-info] bg-[color:--bq-alert--background-info];\n}\n\n.bq-alert__success {\n  @apply border-[color:--bq-alert--border-success] bg-[color:--bq-alert--background-success];\n}\n\n.bq-alert__warning {\n  @apply border-[color:--bq-alert--border-warning] bg-[color:--bq-alert--background-warning];\n}\n\n/**\n * Set the alert icon color based on the type value selected\n */\n.bq-alert__icon {\n  &--default {\n    @apply text-[color:--bq-alert--icon-color-default];\n  }\n\n  &--error {\n    @apply text-[color:--bq-alert--icon-color-error];\n  }\n\n  &--info {\n    @apply text-[color:--bq-alert--icon-color-info];\n  }\n\n  &--success {\n    @apply text-[color:--bq-alert--icon-color-success];\n  }\n\n  &--warning {\n    @apply text-[color:--bq-alert--icon-color-warning];\n  }\n}\n\n/**\n * Tweak the close bq-button styles so it remain small without extra padding\n */\n.bq-alert__close::part(button) {\n  @apply rounded-s border-0 bs-fit p-b-0 p-i-0;\n}\n","import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { ALERT_TYPE } from './bq-alert.types';\nimport type { TAlertBorderRadius, TAlertType } from './bq-alert.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\n/**\n * The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\n * It can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n *\n * @example How to use it\n * ```html\n * <bq-alert>\n *   <bq-icon name=\"star\" slot=\"icon\"></bq-icon>\n *   Title\n *   <span slot=\"body\">\n *     Description\n *     <a class=\"bq-link\" href=\"https://example.com\">Link</a>\n *   </span>\n *   <div slot=\"footer\">\n *     <bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n *     <bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n *   </div>\n * </bq-alert>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/848a50-alert\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {boolean} [auto-dismiss=false] - If true, the alert will automatically hide after the specified amount of time\n * @attr {\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\"} [border='s'] - The corner radius of the alert component\n * @attr {boolean} [disable-close=false] - If true, the close button at the top right of the alert won't be shown\n * @attr {boolean} [hide-icon=false] - If true, the alert icon won't be shown\n * @attr {boolean} [open=false] - If true, the alert will be shown\n * @attr {number} [time=3000] - The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"`\n * @attr {\"info\" | \"success\" | \"warning\" | \"error\" | \"default\"} [type='default'] - Type of Alert\n * @attr {boolean} [sticky=false] - If true, the alert component will remain fixed at the top of the page, occupying the full viewport\n *\n * @event bqHide - Callback handler to be called when the alert is hidden\n * @event bqShow - Callback handler to be called when the alert is shown\n * @event bqAfterShow - Callback handler to be called after the alert has been shown\n * @event bqAfterHide - Callback handler to be called after the alert has been hidden\n *\n * @slot - The alert title content (no slot name required)\n * @slot body - The alert description content\n * @slot footer - The alert footer content\n * @slot icon - The predefined icon based on the alert type (info, success, warning, error, default)\n * @slot btn-close - The close button of the alert\n *\n * @part base - The `<div>` container of the predefined bq-icon component\n * @part body - The container `<div>` that wraps the alert description content\n * @part btn-close - The `bq-button` used to close the alert\n * @part content - The container `<div>` that wraps all the alert content (title, description, footer)\n * @part footer - The container `<div>` that wraps the alert footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the alert main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component\n * @part title - The container `<div>` that wraps the alert title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n *\n * @cssprop --bq-alert--background - The alert background color\n * @cssprop --bq-alert--border-radius - The alert border radius\n * @cssprop --bq-alert--content-footer-gap - The alert content and footer gap\n * @cssprop --bq-alert--title-body-gap - The alert title and body gap\n *\n * @cssprop --bq-alert--border-color - The alert border color\n * @cssprop --bq-alert--border-style - The alert border style\n * @cssprop --bq-alert--border-width - The alert border width\n *\n * @cssprop --bq-alert--background-info - The alert background color for info type\n * @cssprop --bq-alert--background-success - The alert background color for success type\n * @cssprop --bq-alert--background-warning - The alert background color for warning type\n * @cssprop --bq-alert--background-error - The alert background color for error type\n *\n * @cssprop --bq-alert--border-info - The alert border color for info type\n * @cssprop --bq-alert--border-success - The alert border color for success type\n * @cssprop --bq-alert--border-warning - The alert border color for warning type\n * @cssprop --bq-alert--border-error - The alert border color for error type\n *\n * @cssprop --bq-alert--icon-color-info - The alert icon color for info type\n * @cssprop --bq-alert--icon-color-success - The alert icon color for success type\n * @cssprop --bq-alert--icon-color-warning - The alert icon color for warning type\n * @cssprop --bq-alert--icon-color-error - The alert icon color for error type\n *\n * @cssprop --bq-alert--padding - The alert padding\n * @cssprop --bq-alert--min-width - The alert min width\n */\n@Component({\n  tag: 'bq-alert',\n  styleUrl: './scss/bq-alert.scss',\n  shadow: true,\n})\nexport class BqAlert {\n  // Own Properties\n  // ====================\n\n  private autoDismissDebounce: TDebounce<void>;\n  private bodyElem: HTMLDivElement;\n  private footerElem: HTMLDivElement;\n  private alertElement: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAlertElement;\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  /** If true, the alert will automatically hide after the specified amount of time */\n  @Prop({ reflect: true }) autoDismiss: boolean;\n\n  /** The corner radius of the alert component */\n  @Prop({ reflect: true }) border: TAlertBorderRadius = 's';\n\n  /** If true, the close button at the top right of the alert won't be shown */\n  @Prop({ reflect: true }) disableClose: boolean;\n\n  /** If true, the alert icon won't be shown */\n  @Prop({ reflect: true }) hideIcon: boolean;\n\n  /** If true, the alert will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"` */\n  @Prop({ reflect: true }) time: number = 3000;\n\n  /** Type of Alert */\n  @Prop({ reflect: true }) type: TAlertType = 'default';\n\n  /** If true, the alert component will remain fixed at the top of the page, occupying the full viewport */\n  @Prop({ reflect: true }) sticky: boolean;\n\n  // Prop lifecycle events\n  // =======================\n  @Watch('autoDismiss')\n  @Watch('time')\n  handleTimeout() {\n    this.autoDismissDebounce?.cancel();\n    if (!this.autoDismiss) return;\n\n    this.autoDismissDebounce = debounce(() => {\n      this.hide();\n    }, this.time);\n    // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n    if (this.open) this.autoDismissDebounce();\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.autoDismissDebounce?.cancel();\n\n    if (!this.open) {\n      this.handleHide();\n      return;\n    }\n\n    this.handleShow();\n\n    if (this.autoDismiss) {\n      this.autoDismissDebounce();\n    }\n  }\n\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(ALERT_TYPE, 'info', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the alert is hidden */\n  @Event() bqHide!: EventEmitter;\n\n  /** Callback handler to be called when the alert is shown */\n  @Event() bqShow!: EventEmitter;\n\n  /** Callback handler to be called after the alert has been shown */\n  @Event() bqAfterShow!: EventEmitter;\n\n  /** Callback handler to be called after the alert has been hidden */\n  @Event() bqAfterHide!: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.handleTimeout();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n\n    if (!this.open) {\n      this.el.classList.add('is-hidden');\n    }\n  }\n\n  // Listeners\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  /** Method to be called to hide the alert component */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /** Method to be called to show the alert component */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleHide = async () => {\n    const ev = this.bqHide.emit(this.el);\n    if (!ev.defaultPrevented) {\n      await leave(this.alertElement);\n      this.el.classList.add('is-hidden');\n      this.handleTransitionEnd();\n    }\n  };\n\n  private handleShow = async () => {\n    const ev = this.bqShow.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.el.classList.remove('is-hidden');\n      await enter(this.alertElement);\n      this.handleTransitionEnd();\n    }\n  };\n\n  private handleTransitionEnd = () => {\n    if (this.open) {\n      this.bqAfterShow.emit();\n      return;\n    }\n\n    this.bqAfterHide.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasContent = hasSlotContent(this.bodyElem, 'body');\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  private get iconName(): string {\n    const iconName = {\n      error: 'x-circle',\n      success: 'check-circle',\n      warning: 'warning-circle',\n    };\n\n    return iconName[this.type] || 'info';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-alert--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host\n        style={style}\n        class={{ 'is-sticky': this.sticky }}\n        aria-hidden={!this.open ? 'true' : 'false'}\n        hidden={!this.open ? 'true' : 'false'}\n        role=\"alert\"\n      >\n        <div\n          class={{\n            [`bq-alert bq-alert__${this.type}`]: true,\n            'is-sticky': this.sticky,\n          }}\n          data-transition-enter=\"transition ease-out duration-300\"\n          data-transition-enter-start=\"opacity-0\"\n          data-transition-enter-end=\"opacity-100\"\n          data-transition-leave=\"transition ease-in duration-200\"\n          data-transition-leave-start=\"opacity-100\"\n          data-transition-leave-end=\"opacity-0\"\n          ref={(div) => (this.alertElement = div)}\n          part=\"wrapper\"\n        >\n          {/* CLOSE BUTTON */}\n          {!this.disableClose && (\n            <bq-button\n              class=\"bq-alert__close absolute end-5 focus-visible:focus [&::part(label)]:inline-flex\"\n              appearance=\"text\"\n              size=\"small\"\n              onClick={this.hide.bind(this)}\n              part=\"btn-close\"\n            >\n              <slot name=\"btn-close\">\n                <bq-icon name=\"x\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* ICON */}\n          <div\n            class={{\n              [`bq-alert__icon--${this.type} me-s flex text-left align-top`]: true,\n              '!hidden': this.hideIcon,\n            }}\n            part=\"icon-outline\"\n          >\n            <slot name=\"icon\">\n              {this.type !== 'default' && <bq-icon name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />}\n            </slot>\n          </div>\n          {/* MAIN */}\n          <div class=\"flex flex-col items-start gap-[--bq-alert--content-footer-gap]\" part=\"main\">\n            <div class=\"flex flex-col gap-[--bq-alert--title-body-gap]\" part=\"content\">\n              {/* TITLE */}\n              <div\n                class={{\n                  'title-font font-semibold leading-regular text-primary': true,\n                  'flex items-center': this.sticky,\n                }}\n                part=\"title\"\n              >\n                <slot />\n              </div>\n              {/* BODY */}\n              <div\n                class={{ 'text-s leading-regular text-primary': true, '!hidden': !this.hasContent }}\n                ref={(div) => (this.bodyElem = div)}\n                part=\"body\"\n              >\n                <slot name=\"body\" onSlotchange={this.handleSlotChange} />\n              </div>\n            </div>\n            {/* FOOTER */}\n            <div\n              class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n              ref={(div) => (this.footerElem = div)}\n              part=\"footer\"\n            >\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}