@beeq/core 1.8.0-beta.1 → 1.8.0-beta.2

package/dist/stencil.config.js

@@ -77,9 +77,12 @@ export const config = {
             customElementsDir,
         }),
         react({
-            componentCorePackage,
-            proxiesFile: resolve(__dirname, '../beeq-react/src/components.ts').replace(/\\/g, '/'),
-            includeImportCustomElements: true,
+            outDir: resolve(__dirname, '../beeq-react/src/').replace(/\\/g, '/'),
+            customElementsDir,
+        }),
+        react({
+            outDir: resolve(__dirname, '../beeq-react/ssr').replace(/\\/g, '/'),
+            hydrateModule: '@beeq/core/dist/hydrate',
             customElementsDir,
         }),
         vue({

package/dist/stencil.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../stencil.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolve } from 'path';\n\nimport { angularOutputTarget as angular } from '@stencil/angular-output-target';\nimport { Config } from '@stencil/core';\nimport { reactOutputTarget as react } from '@stencil/react-output-target';\nimport { sass } from '@stencil/sass';\nimport { vueOutputTarget as vue } from '@stencil/vue-output-target';\nimport tailwind, { PluginConfigOpts, tailwindHMR } from 'stencil-tailwind-plugin';\n\nimport { angularValueAccessorBindings, generateCustomElementsJson, vueComponentModels } from './src/tools';\nimport tailwindConf from '../../tailwind.config';\n\nconst tailwindOpts: PluginConfigOpts = {\n  postcss: resolve(__dirname, '../../postcss.config.js').replace(/\\\\/g, '/'),\n  tailwindConf: tailwindConf,\n  stripComments: true,\n};\n\nconst namespace = 'beeq';\nconst componentCorePackage = `@${namespace}/core`;\nconst customElementsDir = 'dist/components';\n\nexport const config: Config = {\n  namespace,\n  taskQueue: 'async',\n  buildDist: true,\n  enableCache: true,\n  globalScript: resolve(__dirname, './src/global/scripts/global.ts').replace(/\\\\/g, '/'),\n  globalStyle: resolve(__dirname, './src/global/styles/default.scss').replace(/\\\\/g, '/'),\n  plugins: [\n    sass({\n      includePaths: [\n        resolve(__dirname, '../../node_modules').replace(/\\\\/g, '/'),\n        resolve(__dirname, 'src/global/styles').replace(/\\\\/g, '/'),\n      ],\n      injectGlobalPaths: [resolve(__dirname, 'src/global/styles/mixins/index.scss').replace(/\\\\/g, '/')],\n      outputStyle: 'compressed',\n      sourceMap: true,\n      sourceMapEmbed: true,\n      sourceMapContents: true,\n    }),\n    tailwind(tailwindOpts),\n    tailwindHMR({ tailwindConf }),\n  ],\n  outputTargets: [\n    { type: 'docs-readme' },\n    { type: 'docs-custom', generator: generateCustomElementsJson },\n    { type: 'docs-vscode', file: 'custom-elements.json' },\n    { type: 'dist', copy: [{ src: '../README.md' }] },\n    { type: 'dist-hydrate-script', dir: 'dist/hydrate' },\n    {\n      type: 'dist-custom-elements',\n      customElementsExportBehavior: 'single-export-module',\n      dir: customElementsDir,\n      minify: true,\n    },\n    {\n      type: 'www',\n      copy: [\n        { src: 'global/assets', dest: 'assets' },\n        { src: 'global/scripts', dest: 'scripts' },\n      ],\n      serviceWorker: null, // disable service workers\n    },\n    angular({\n      componentCorePackage,\n      outputType: 'component', // Generate many component wrappers tied to a single Angular module (lazy/hydrated approach)\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/src/directives/components.ts').replace(/\\\\/g, '/'),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    angular({\n      componentCorePackage,\n      outputType: 'standalone', // Generate a component with the standalone flag set to true.\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/components.ts').replace(\n        /\\\\/g,\n        '/',\n      ),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    react({\n      componentCorePackage,\n      proxiesFile: resolve(__dirname, '../beeq-react/src/components.ts').replace(/\\\\/g, '/'),\n      includeImportCustomElements: true,\n      customElementsDir,\n    }),\n    vue({\n      componentCorePackage,\n      proxiesFile: resolve(__dirname, '../beeq-vue/src/components.ts').replace(/\\\\/g, '/'),\n      componentModels: vueComponentModels,\n      includeImportCustomElements: true,\n      customElementsDir,\n    }),\n  ],\n  extras: {\n    /**\n     * Details:\n     * https://stenciljs.com/docs/config-extras\n     */\n    enableImportInjection: true,\n    experimentalScopedSlotChanges: true,\n    experimentalSlotFixes: true,\n  },\n  preamble: 'Built by Endavans\\n© https://beeq.design - Apache 2 License.',\n  watchIgnoredRegex: /(custom-elements\\.)((d\\.ts)|(json))$/g,\n  devServer: {\n    openBrowser: false,\n    port: 8001,\n    reloadStrategy: 'pageReload',\n  },\n};\n"]}
+{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../stencil.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolve } from 'path';\n\nimport { angularOutputTarget as angular } from '@stencil/angular-output-target';\nimport { Config } from '@stencil/core';\nimport { reactOutputTarget as react } from '@stencil/react-output-target';\nimport { sass } from '@stencil/sass';\nimport { vueOutputTarget as vue } from '@stencil/vue-output-target';\nimport tailwind, { PluginConfigOpts, tailwindHMR } from 'stencil-tailwind-plugin';\n\nimport { angularValueAccessorBindings, generateCustomElementsJson, vueComponentModels } from './src/tools';\nimport tailwindConf from '../../tailwind.config';\n\nconst tailwindOpts: PluginConfigOpts = {\n  postcss: resolve(__dirname, '../../postcss.config.js').replace(/\\\\/g, '/'),\n  tailwindConf: tailwindConf,\n  stripComments: true,\n};\n\nconst namespace = 'beeq';\nconst componentCorePackage = `@${namespace}/core`;\nconst customElementsDir = 'dist/components';\n\nexport const config: Config = {\n  namespace,\n  taskQueue: 'async',\n  buildDist: true,\n  enableCache: true,\n  globalScript: resolve(__dirname, './src/global/scripts/global.ts').replace(/\\\\/g, '/'),\n  globalStyle: resolve(__dirname, './src/global/styles/default.scss').replace(/\\\\/g, '/'),\n  plugins: [\n    sass({\n      includePaths: [\n        resolve(__dirname, '../../node_modules').replace(/\\\\/g, '/'),\n        resolve(__dirname, 'src/global/styles').replace(/\\\\/g, '/'),\n      ],\n      injectGlobalPaths: [resolve(__dirname, 'src/global/styles/mixins/index.scss').replace(/\\\\/g, '/')],\n      outputStyle: 'compressed',\n      sourceMap: true,\n      sourceMapEmbed: true,\n      sourceMapContents: true,\n    }),\n    tailwind(tailwindOpts),\n    tailwindHMR({ tailwindConf }),\n  ],\n  outputTargets: [\n    { type: 'docs-readme' },\n    { type: 'docs-custom', generator: generateCustomElementsJson },\n    { type: 'docs-vscode', file: 'custom-elements.json' },\n    { type: 'dist', copy: [{ src: '../README.md' }] },\n    { type: 'dist-hydrate-script', dir: 'dist/hydrate' },\n    {\n      type: 'dist-custom-elements',\n      customElementsExportBehavior: 'single-export-module',\n      dir: customElementsDir,\n      minify: true,\n    },\n    {\n      type: 'www',\n      copy: [\n        { src: 'global/assets', dest: 'assets' },\n        { src: 'global/scripts', dest: 'scripts' },\n      ],\n      serviceWorker: null, // disable service workers\n    },\n    angular({\n      componentCorePackage,\n      outputType: 'component', // Generate many component wrappers tied to a single Angular module (lazy/hydrated approach)\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/src/directives/components.ts').replace(/\\\\/g, '/'),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    angular({\n      componentCorePackage,\n      outputType: 'standalone', // Generate a component with the standalone flag set to true.\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/components.ts').replace(\n        /\\\\/g,\n        '/',\n      ),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    react({\n      outDir: resolve(__dirname, '../beeq-react/src/').replace(/\\\\/g, '/'),\n      customElementsDir,\n    }),\n    react({\n      outDir: resolve(__dirname, '../beeq-react/ssr').replace(/\\\\/g, '/'),\n      hydrateModule: '@beeq/core/dist/hydrate',\n      customElementsDir,\n    }),\n    vue({\n      componentCorePackage,\n      proxiesFile: resolve(__dirname, '../beeq-vue/src/components.ts').replace(/\\\\/g, '/'),\n      componentModels: vueComponentModels,\n      includeImportCustomElements: true,\n      customElementsDir,\n    }),\n  ],\n  extras: {\n    /**\n     * Details:\n     * https://stenciljs.com/docs/config-extras\n     */\n    enableImportInjection: true,\n    experimentalScopedSlotChanges: true,\n    experimentalSlotFixes: true,\n  },\n  preamble: 'Built by Endavans\\n© https://beeq.design - Apache 2 License.',\n  watchIgnoredRegex: /(custom-elements\\.)((d\\.ts)|(json))$/g,\n  devServer: {\n    openBrowser: false,\n    port: 8001,\n    reloadStrategy: 'pageReload',\n  },\n};\n"]}

package/dist/types/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/.stencil/packages/beeq/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/components/alert/bq-alert.d.ts

@@ -12,6 +12,12 @@ import { TAlertBorderRadius, TAlertType } from './bq-alert.types';
  * @part svg - The `<svg>` element of the predefined bq-icon component
  * @part title - The container `<div>` that wraps the alert title content
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM
+ *
+ * @slot - The alert title content (no slot name required)
+ * @slot body - The alert description content
+ * @slot footer - The alert footer content
+ * @slot icon - The predefined icon based on the alert type (info, success, warning, error, default)
+ * @slot btn-close - The close button of the alert
  */
 export declare class BqAlert {
     private autoDismissDebounce;
@@ -44,10 +50,10 @@ export declare class BqAlert {
     bqHide: EventEmitter;
     /** Callback handler to be called when the alert is shown */
     bqShow: EventEmitter;
-    /** Callback handler to be called after the alert has been opened */
-    bqAfterOpen: EventEmitter;
-    /** Callback handler to be called after the alert has been closed */
-    bqAfterClose: EventEmitter;
+    /** Callback handler to be called after the alert has been shown */
+    bqAfterShow: EventEmitter;
+    /** Callback handler to be called after the alert has been hidden */
+    bqAfterHide: EventEmitter;
     componentWillLoad(): void;
     componentDidLoad(): void;
     /** Method to be called to hide the alert component */

package/dist/types/components/date-picker/bq-date-picker.d.ts

@@ -149,6 +149,7 @@ export declare class BqDatePicker {
     /** Callback handler emitted when the input has received focus */
     bqFocus: EventEmitter<HTMLBqDatePickerElement>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     handleOpenChange(ev: CustomEvent<{
         open: boolean;
     }>): void;

package/dist/types/components/divider/bq-divider.d.ts

@@ -30,6 +30,7 @@ export declare class BqDivider {
     strokeLinecap?: TDividerStrokeLinecap;
     checkPropValues(): void;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private handleSlotChange;
     private get strokeAttributes();

package/dist/types/components/icon/bq-icon.d.ts

@@ -13,7 +13,7 @@ export declare class BqIcon {
     /** Set the stroke color of the SVG. The value should be a valid value of the palette color */
     color?: string;
     /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */
-    name: string;
+    name?: string;
     /** Set the size of the SVG */
     size?: string | number;
     /** Set the source of the SVG. If the source is set, the name property will be ignored */
@@ -29,6 +29,8 @@ export declare class BqIcon {
     /** Callback handler to be called when the SVG has loaded */
     svgLoaded: EventEmitter;
     connectedCallback(): void;
+    componentWillLoad(): void;
+    private setupIconComponent;
     private getIconSource;
     private loadIcon;
     render(): any;

package/dist/types/components/notification/bq-notification.d.ts

@@ -12,6 +12,12 @@ import { TNotificationBorderRadius, TNotificationType } from './bq-notification.
  * @part svg - The `<svg>` element of the predefined bq-icon component.
  * @part title - The container `<div>` that wraps the notification title content
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM
+ *
+ * @slot - The notification title content
+ * @slot body - The notification description content
+ * @slot footer - The notification footer content
+ * @slot icon - The icon to be displayed in the notification
+ * @slot btn-close - The close button of the notification
  */
 export declare class BqNotification {
     private autoDismissDebounce;
@@ -21,6 +27,7 @@ export declare class BqNotification {
     el: HTMLBqNotificationElement;
     private hasContent;
     private hasFooter;
+    private notificationPortal;
     /** If true, the notification will automatically hide after the specified amount of time */
     autoDismiss: boolean;
     /** The corder radius of the notification component */
@@ -46,6 +53,7 @@ export declare class BqNotification {
     bqAfterOpen: EventEmitter;
     /** Callback handler to be called after the notification has been closed */
     bqAfterClose: EventEmitter;
+    connectedCallback(): void;
     componentWillLoad(): void;
     afterNotificationClose(): void;
     /** Method to be called to hide the notification component */

package/dist/types/components/select/bq-select.d.ts

@@ -111,6 +111,7 @@ export declare class BqSelect {
         item: HTMLBqOptionElement;
     }>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     formAssociatedCallback(): void;
     formResetCallback(): Promise<void>;
@@ -125,6 +126,7 @@ export declare class BqSelect {
      * @memberof BqSelect
      */
     clear(): Promise<void>;
+    private initMultipleValue;
     private handleBlur;
     private handleFocus;
     private handleSelect;

package/dist/types/components/slider/bq-slider.d.ts

@@ -75,8 +75,10 @@ export declare class BqSlider {
     /** Handler to be called when the slider gets focused */
     bqFocus: EventEmitter<HTMLBqSliderElement>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    private init;
     private runUpdates;
     private setState;
     private setThumbPosition;

package/dist/types/components/step-item/bq-step-item.d.ts

@@ -21,6 +21,7 @@ export declare class BqStepItem {
         value: string;
     }>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private get isDisabled();
     private get isCurrent();

package/dist/types/components/toast/bq-toast.d.ts

@@ -5,10 +5,14 @@ import { TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.type
  * @part icon-info - The `<div>` container that holds the icon component.
  * @part base - The `<div>` container of the internal bq-icon component.
  * @part svg - The `<svg>` element of the internal bq-icon component.
+ *
+ * @slot - The content to be displayed in the toast component.
+ * @slot icon - The icon to be displayed in the toast component.
  */
 export declare class BqToast {
     private autoDismissDebounce;
     el: HTMLBqToastElement;
+    private toastPortal;
     /** The corder radius of the toast component */
     border: TToastBorderRadius;
     /** Type of toast */
@@ -28,6 +32,7 @@ export declare class BqToast {
     bqHide: EventEmitter<HTMLBqToastElement>;
     /** Callback handler to be called when the notification is shown */
     bqShow: EventEmitter<HTMLBqToastElement>;
+    connectedCallback(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
     onNotificationHide(): void;

package/dist/types/components.d.ts

@@ -629,7 +629,7 @@ export namespace Components {
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */
-        "name": string;
+        "name"?: string;
         /**
           * Set the size of the SVG
          */
@@ -1636,8 +1636,8 @@ declare global {
     interface HTMLBqAlertElementEventMap {
         "bqHide": any;
         "bqShow": any;
-        "bqAfterOpen": any;
-        "bqAfterClose": any;
+        "bqAfterShow": any;
+        "bqAfterHide": any;
     }
     interface HTMLBqAlertElement extends Components.BqAlert, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBqAlertElementEventMap>(type: K, listener: (this: HTMLBqAlertElement, ev: BqAlertCustomEvent<HTMLBqAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2375,13 +2375,13 @@ declare namespace LocalJSX {
          */
         "hideIcon"?: boolean;
         /**
-          * Callback handler to be called after the alert has been closed
+          * Callback handler to be called after the alert has been hidden
          */
-        "onBqAfterClose"?: (event: BqAlertCustomEvent<any>) => void;
+        "onBqAfterHide"?: (event: BqAlertCustomEvent<any>) => void;
         /**
-          * Callback handler to be called after the alert has been opened
+          * Callback handler to be called after the alert has been shown
          */
-        "onBqAfterOpen"?: (event: BqAlertCustomEvent<any>) => void;
+        "onBqAfterShow"?: (event: BqAlertCustomEvent<any>) => void;
         /**
           * Callback handler to be called when the alert is hidden
          */
@@ -2948,7 +2948,7 @@ declare namespace LocalJSX {
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */
-        "name": string;
+        "name"?: string;
         /**
           * Callback handler to be called when the SVG has loaded
          */

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export type * from './components.d.ts';
+export * from './components.d';
 export * from './shared/utils';

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

@@ -25,4 +25,4 @@ export declare const setBasePath: (path: string) => void;
  * @param subpath - The subpath to append to the base path.
  * @returns The full base path including the subpath.
  */
-export declare const getBasePath: (subpath?: string) => string;
+export declare const getBasePath: (subpath?: string) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beeq/core",
-    "version": "1.8.0-beta.1",
+    "version": "1.8.0-beta.2",
     "license": "Apache-2.0",
     "description": "BEEQ, a Design System components ruled by Endavan developers :)",
     "main": "./dist/index.cjs.js",
@@ -13,9 +13,9 @@
         "dist/"
     ],
     "dependencies": {
-        "@floating-ui/core": "^1.6.3",
-        "@floating-ui/dom": "^1.6.6",
-        "@stencil/core": "^4.19.2",
+        "@floating-ui/core": "^1.6.7",
+        "@floating-ui/dom": "^1.6.10",
+        "@stencil/core": "^4.20.0",
         "cally": "^0.7.1"
     },
     "repository": {

package/dist/beeq/p-063a3968.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BUTTON_SIZE","BUTTON_TYPE","BUTTON_APPEARANCE","BUTTON_VARIANT","bqButtonCss","BqButtonStyle0","BqButton","this","handleBlur","bqBlur","emit","el","handleFocus","bqFocus","handleClick","ev","disabled","loading","preventDefault","stopPropagation","type","wrapperForm","closest","isNil","btn","document","createElement","hidden","append","click","remove","bqClick","handleSlotChange","hasPrefix","hasSlotContent","prefixElem","hasSuffix","suffixElem","checkPropValues","validatePropValue","componentWillLoad","render","isLink","isDefined","href","TagElem","style","border","h","Host","key","class","appearance","justifyContent","variant","size","block","download","undefined","part","rel","target","tabIndex","onBlur","onFocus","onClick","ref","spanElem","name","onSlotchange","role","title","requests","Map","fetchSvg","async","url","sanitize","fetch","has","get","response","ok","iconContent","set","svgContent","text","validateContent","error","console","getSvgContent","req","svgTag","iconCssClass","div","innerHTML","i","childNodes","length","nodeName","toLowerCase","removeChild","svgElm","firstElementChild","othersCssClasses","getAttribute","setAttribute","trim","removeAttribute","isValid","elm","nodeType","Node","ELEMENT_NODE","attribute","Array","from","attributes","value","isString","startsWith","childNode","children","bqIconCss","BqIconStyle0","BqIcon","getIconSource","src","SVG_EXTENSION","iconFileName","getBasePath","loadIcon","then","_svgContent","svgLoaded","handlePropsChange","handleWeightChange","includes","weight","warn","REGULAR","isWeightedIcon","weightSuffix","iconName","connectedCallback","styles","color","getColorCSSVariable","_a","label"],"sources":["../../packages/beeq/src/components/button/bq-button.types.ts","../../packages/beeq/src/components/button/scss/bq-button.scss?tag=bq-button&encapsulation=shadow","../../packages/beeq/src/components/button/bq-button.tsx","../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["export const BUTTON_SIZE = ['small', 'medium', 'large'] as const;\nexport type TButtonSize = (typeof BUTTON_SIZE)[number];\n\nexport const BUTTON_TYPE = ['button', 'submit', 'reset'] as const;\nexport type TButtonType = (typeof BUTTON_TYPE)[number];\n\nexport const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'] as const;\nexport type TButtonAppearance = (typeof BUTTON_APPEARANCE)[number];\n\nexport const BUTTON_VARIANT = ['standard', 'ghost', 'danger'] as const;\nexport type TButtonVariant = (typeof BUTTON_VARIANT)[number];\n\nexport const BUTTON_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TButtonBorderRadius = (typeof BUTTON_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Button styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-button.variables';\n\n@layer components {\n  // Common button base style\n  .bq-button {\n    @apply box-border flex cursor-[inherit] items-center justify-center font-medium leading-regular;\n    @apply rounded-[--bq-button--border-radius] border-[length:--bq-button--border-width] border-[color:--bq-button--border-color];\n    @apply transition-[background-color,border-color,color] duration-300 ease-in-out;\n    // `DISABLED` state\n    @apply disabled:cursor-not-allowed disabled:opacity-60;\n    // `FOCUS` state\n    @apply focus-visible:focus;\n  }\n}\n\n:host {\n  @apply relative inline-block cursor-pointer is-auto;\n}\n\n:host([block]),\n.block {\n  @apply is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Appearance                                 */\n/* -------------------------------------------------------------------------- */\n\n.bq-button--primary {\n  @apply bg-ui-brand text-text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-brand;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-brand active:enabled:hover:bg-active-ui-brand;\n}\n\n.bq-button--primary.ghost {\n  @apply border-m border-solid border-stroke-brand bg-transparent text-text-brand;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-primary active:enabled:hover:bg-active-ui-primary;\n}\n\n.bq-button--primary.danger {\n  @apply bg-ui-danger text-text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-danger;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-danger active:enabled:hover:bg-active-ui-danger;\n}\n\n.bq-button--secondary {\n  @apply bg-ui-secondary text-text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--secondary.ghost {\n  @apply border-m border-solid border-stroke-tertiary bg-transparent text-text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--link {\n  @apply bg-transparent text-text-brand no-underline;\n  // Primary `HOVER` state\n  @apply [&:not(.disabled)]:hover:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply [&:not(.disabled)]:active:bg-active-ui-secondary [&:not(.disabled)]:active:hover:bg-active-ui-secondary;\n  // HTML `<a>` elements does not have a `disabled` state so we need to handle it manually\n  &.disabled {\n    @apply cursor-not-allowed opacity-60;\n  }\n}\n\n.bq-button--text {\n  @apply bg-transparent text-text-primary;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Size                                    */\n/* -------------------------------------------------------------------------- */\n\n.small {\n  @apply text-[length:--bq-button--small-font-size] bs-[--bq-button--small-height] p-b-[--bq-button--small-paddingY] p-i-[--bq-button--small-paddingX];\n}\n\n.medium {\n  @apply text-[length:--bq-button--medium-font-size] bs-[--bq-button--medium-height] p-b-[--bq-button--medium-paddingY] p-i-[--bq-button--medium-paddingX];\n}\n\n.large {\n  @apply text-[length:--bq-button--large-font-size] bs-[--bq-button--large-height] p-b-[--bq-button--large-paddingY] p-i-[--bq-button--large-paddingX];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__label ::slotted(bq-icon) {\n  @apply flex;\n}\n\n.content-left {\n  @apply justify-start;\n}\n\n.content-right {\n  @apply justify-end;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                           Prefix and Suffix slots                          */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__prefix,\n.bq-button__suffix {\n  @apply pointer-events-none flex shrink-0 grow-0 basis-auto items-center;\n}\n\n.bq-button.has-prefix .bq-button__label {\n  @apply ps-xs2;\n}\n\n.bq-button.has-suffix .bq-button__label {\n  @apply pe-xs2;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                   Loading                                  */\n/* -------------------------------------------------------------------------- */\n\n.bq-button.loading {\n  @apply relative cursor-wait;\n}\n\n.bq-button.loading .bq-button__prefix,\n.bq-button.loading .bq-button__label,\n.bq-button.loading .bq-button__suffix {\n  @apply invisible;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Spinner icon                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__loader {\n  @include animation-spin;\n  @apply absolute;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  BUTTON_APPEARANCE,\n  BUTTON_SIZE,\n  BUTTON_TYPE,\n  BUTTON_VARIANT,\n  TButtonAppearance,\n  TButtonBorderRadius,\n  TButtonSize,\n  TButtonType,\n  TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * Buttons are designed for users to take action on a page or a screen.\n *\n * @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n */\n@Component({\n  tag: 'bq-button',\n  styleUrl: './scss/bq-button.scss',\n  shadow: true,\n})\nexport class BqButton {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n  private suffixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqButtonElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style to apply to the button */\n  @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n  /** If `true`, it will make the button fit to its parent width. */\n  @Prop({ reflect: true }) block: boolean = false;\n\n  /** The corner radius of the button */\n  @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n  /** If true, the button will be disabled (no interaction allowed) */\n  @Prop() disabled = false;\n\n  /**\n   * Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n   */\n  @Prop() download?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */\n  @Prop({ reflect: true }) href: string;\n\n  /** It determinate how the content should be aligned */\n  @Prop({ reflect: true }) justifyContent: 'left' | 'center' | 'right' = 'center';\n\n  /** If `true` it will display the button in a loading state */\n  @Prop() loading = false;\n\n  /** The size of the button */\n  @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n   */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The default behavior of the button */\n  @Prop({ reflect: true }) type: TButtonType = 'button';\n\n  /** The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) */\n  @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('type')\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n    validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n    validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n    validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleClick = (ev: Event) => {\n    if (this.disabled || this.loading) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    if (this.type === 'submit' || this.type === 'reset') {\n      const wrapperForm = this.el.closest('form');\n      if (!isNil(wrapperForm)) {\n        const btn = document.createElement('button');\n        btn.type = this.type;\n        btn.hidden = true;\n        wrapperForm.append(btn);\n\n        btn.click();\n        btn.remove();\n      }\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n    const style = {\n      ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host style={style}>\n        <TagElem\n          class={{\n            'bq-button': true,\n            [`bq-button--${this.appearance}`]: true,\n            [`content-${this.justifyContent}`]: true,\n            [`${this.variant}`]: true,\n            [`${this.size}`]: true,\n            block: this.block,\n            disabled: this.disabled,\n            'has-prefix': this.hasPrefix,\n            'has-suffix': this.hasSuffix,\n            loading: this.loading,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          disabled={this.disabled}\n          download={isLink ? this.download : undefined}\n          href={isLink ? this.href : undefined}\n          part=\"button\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          target={isLink ? this.target : undefined}\n          type={this.type}\n          tabIndex={this.disabled ? -1 : 0}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.handleClick}\n        >\n          <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span class=\"bq-button__label\" part=\"label\">\n            <slot />\n          </span>\n          <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {this.loading && (\n            <bq-icon\n              class=\"bq-button__loader\"\n              name=\"spinner-gap\"\n              role=\"img\"\n              title={`${this.appearance} button loader`}\n            />\n          )}\n        </TagElem>\n      </Host>\n    );\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isNil, isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  if (typeof fetch === 'undefined' || typeof document === 'undefined') return;\n\n  if (requests.has(url)) return requests.get(url);\n\n  try {\n    const response = await fetch(url);\n\n    if (!response.ok) {\n      iconContent.set(url, '');\n      return;\n    }\n\n    let svgContent = (await response.text()) || '';\n\n    if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n\n    iconContent.set(url, svgContent);\n  } catch (error) {\n    console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n    iconContent.set(url, '');\n  }\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n  let req = requests.get(url);\n\n  // NOTE: if the request does not exists we will cache it\n  if (isNil(req)) {\n    req = fetchSvg(url, sanitize);\n    requests.set(url, req);\n  }\n  return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n    // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n    const othersCssClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n    // set the shadow DOM part for the SVG element\n    svgElm.setAttribute('part', svgTag);\n\n    // remove height and width attribute, if for some reason they are still present in the SVG tag\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n  }\n\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n  if (elm.nodeType === Node.ELEMENT_NODE) {\n    if (elm.nodeName.toLowerCase() === 'script') return false;\n\n    for (const attribute of Array.from(elm.attributes)) {\n      const value = attribute.value;\n      if (isString(value) && value.toLowerCase().startsWith('on')) {\n        return false;\n      }\n    }\n\n    for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n      if (!isValid(childNode)) return false;\n    }\n  }\n  return true;\n};\n","/* -------------------------------------------------------------------------- */\n/*                                 Icon styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n  @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n  @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n  assetsDirs: ['svg'],\n  tag: 'bq-icon',\n  styleUrl: './scss/bq-icon.scss',\n  shadow: true,\n})\nexport class BqIcon {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private _svgContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** Label for the icon, used for accessibility */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n  @Prop({ reflect: true }) name!: string;\n\n  /** Set the size of the SVG */\n  @Prop({ reflect: true }) size?: string | number = 24;\n\n  /** Set the source of the SVG. If the source is set, the name property will be ignored */\n  @Prop({ reflect: true }) src?: string;\n\n  /** @deprecated It set the icon weight/style */\n  @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('color')\n  @Watch('name')\n  @Watch('size')\n  handlePropsChange() {\n    this.loadIcon(this.name);\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n   * We need to maintain retro-compatibility until the next major release\n   */\n  @Watch('weight')\n  handleWeightChange() {\n    if (this.name.includes(this.weight)) return;\n\n    console.warn(\n      `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n       For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n    );\n    // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n    // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n    const REGULAR = 'regular';\n    const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n    // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n    // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n    const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n    // Construct the icon name by appending the weight suffix (if any) and the file extension.\n    // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n    const iconName = `${this.name}${weightSuffix}`;\n    this.loadIcon(iconName);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the SVG has loaded */\n  @Event() svgLoaded: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.handlePropsChange();\n\n    // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n    if (!isNil(this.weight)) this.handleWeightChange();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private getIconSource = (name: string) => {\n    if (!this.name && !this.src) return;\n    // Return the src if it is set\n    if (this.src) return this.src;\n\n    const SVG_EXTENSION = '.svg';\n    const iconFileName = `${name}${SVG_EXTENSION}`;\n\n    return getBasePath(iconFileName);\n  };\n\n  private loadIcon = (name: string) => {\n    const url = this.getIconSource(name);\n    getSvgContent(url, true).then(() => {\n      this._svgContent = iconContent.get(url);\n      this.svgLoaded.emit(this._svgContent);\n    });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n      ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          aria-label={this.label ?? `${this.name} icon`}\n          class=\"flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n          innerHTML={this._svgContent}\n          part=\"base\"\n          role=\"img\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-0979fdfd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqSliderCss","BqSliderStyle0","BqSlider","this","runUpdates","updateProgressTrack","syncInputsValue","setThumbPosition","setState","newValue","isRangeType","value","stringToObject","minValue","clamp","min","max","gap","maxValue","enableTooltip","minThumbPosition","maxThumbPosition","thumbPosition","_a","inputMinElem","setAttribute","toString","_b","inputMaxElem","isString","JSON","parse","handleInputChange","type","event","target","parseFloat","Math","reflectedValue","calculatePercent","totalRange","Number","progressElem","left","width","style","insetInlineStart","inlineSize","calculateThumbPosition","trackAreaWidth","trackElem","getBoundingClientRect","inputThumbSize","parseInt","getComputedStyle","el","getPropertyValue","totalWidth","undefined","emitBqChange","debounceBqChange","cancel","debounce","bqChange","emit","debounceTime","handleBlur","bqBlur","handleFocus","bqFocus","handleMouseDown","handleTooltipVisibility","handleMouseUp","action","tooltipAlwaysVisible","tooltipElem","minTooltipElem","maxTooltipElem","classList","renderLabel","position","css","h","class","hidden","enableValueIndicator","part","toFixed","decimalCount","renderInput","refCallback","zIndexValue","zIndex","disabled","step","ref","onInput","ev","onBlur","onFocus","onMouseDown","onMouseUp","renderTooltip","isTooltipAlwaysVisible","exportparts","alwaysVisible","distance","fontVariant","slot","handleValuePropChange","handleStepPropChange","round","handleGapChange","isNil","connectedCallback","componentDidLoad","componentDidUpdate","split","replace","length","render","key","elem","input"],"sources":["../../packages/beeq/src/components/slider/scss/bq-slider.scss?tag=bq-slider&encapsulation=shadow","../../packages/beeq/src/components/slider/bq-slider.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                               Slider styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-slider.variables';\n\n@layer components {\n  .thumb {\n    @apply pointer-events-auto box-content size-[--bq-slider--thumb-size] cursor-pointer appearance-none rounded-full border-m border-solid border-stroke-brand bg-ui-primary;\n    @apply transition-[background-color,border-color,box-shadow] duration-300;\n  }\n\n  .thumb-focus {\n    @apply focus;\n  }\n\n  .thumb-hover {\n    @apply border-hover-stroke-brand;\n  }\n\n  .thumb-active {\n    @apply cursor-grabbing bg-active-ui-brand border-active-stroke-brand;\n  }\n}\n\n:host {\n  @apply block is-full;\n}\n\n/* ---------------------- Webkit (Chrome, Safari, Edge) --------------------- */\n\ninput[type='range']::-webkit-slider-thumb {\n  @apply thumb;\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n  @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-webkit-slider-thumb {\n  @apply thumb-focus;\n}\n\ninput[type='range']:hover::-webkit-slider-thumb {\n  @apply thumb-hover;\n}\n\ninput[type='range']:active::-webkit-slider-thumb {\n  @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-webkit-slider-thumb {\n  @apply cursor-not-allowed;\n}\n\n/* ---------------------------- Mozilla (Firefox) --------------------------- */\n\ninput[type='range']::-moz-range-thumb {\n  @apply thumb;\n}\n\ninput[type='range']::-moz-range-track {\n  @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-moz-range-thumb {\n  @apply thumb-focus;\n}\n\ninput[type='range']:hover::-moz-range-thumb {\n  @apply thumb-hover;\n}\n\ninput[type='range']:active::-moz-range-thumb {\n  @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-moz-range-thumb {\n  @apply cursor-not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part container - The container of the slider.\n * @part track-area - The track area of the slider.\n * @part progress-area - The progress area of the slider.\n * @part input-min - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part input-max - The input element for the maximum value.\n * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part label-end - The label for maximum value when the slider type is `range`.\n */\n@Component({\n  tag: 'bq-slider',\n  styleUrl: './scss/bq-slider.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSlider {\n  // Own Properties\n  // ====================\n\n  private inputMinElem: HTMLInputElement;\n  private inputMaxElem: HTMLInputElement;\n  private minTooltipElem: HTMLBqTooltipElement;\n  private maxTooltipElem: HTMLBqTooltipElement;\n  private progressElem: HTMLSpanElement;\n  private trackElem: HTMLSpanElement;\n  private debounceBqChange: TDebounce<void>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSliderElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  /**\n   * The `minValue` state is the only value when the slider type is `single`\n   * and the minimum value when the slider type is `range`.\n   */\n  @State() minValue: number;\n  /** The `maxValue` state is only used when the slider type is `range`. */\n  @State() maxValue: number;\n  /** It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) */\n  @State() minThumbPosition: number;\n  /** It hold the left position of the Thumb for the maximum value (if the slider type is `range`) */\n  @State() maxThumbPosition: number;\n\n  // Public Property API\n  // ========================\n\n  /** The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. */\n  @Prop({ reflect: true }) debounceTime = 0;\n\n  /** If `true` the slider is disabled. */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** If `true` it will show the value label on a side of the slider track area */\n  @Prop({ reflect: true }) enableValueIndicator? = false;\n\n  /** A number representing the amount to remain between the minimum and maximum values (only for range type). */\n  @Prop({ reflect: true, mutable: true }) gap = 0;\n\n  /** A number representing the max value of the slider. */\n  @Prop({ reflect: true }) max = 100;\n\n  /** A number representing the min value of the slider. */\n  @Prop({ reflect: true }) min = 0;\n\n  /**\n   * A number representing the step of the slider.\n   * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.\n   */\n  @Prop({ reflect: true }) step = 1;\n\n  /** It defines the type of slider to display  */\n  @Prop({ reflect: true }) type: TSliderType = 'single';\n\n  /**\n   * The value of the slider.\n   * - If the slider type is `single`, the value is a number.\n   * - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).\n   */\n  @Prop({ reflect: true, mutable: true }) value: TSliderValue;\n\n  /** If `true`, a tooltip will be shown displaying the progress value */\n  @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n  /**\n   * If `true`, a tooltip will always display the progress value.\n   * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n   */\n  @Prop({ reflect: true }) tooltipAlwaysVisible: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValuePropChange(newValue: TSliderValue) {\n    this.setState(newValue);\n    this.emitBqChange();\n  }\n\n  @Watch('step')\n  handleStepPropChange() {\n    this.minValue = Math.round(this.minValue / this.step) * this.step;\n    this.maxValue = Math.round(this.maxValue / this.step) * this.step;\n  }\n\n  @Watch('gap')\n  handleGapChange(newValue: number) {\n    if (!this.isRangeType) return;\n    // Use the this.value prop value when the component is initialized\n    // Otherwise, use the current this.min and this.max state values\n    const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);\n    // If the gap is less than the min or greater than the max, set it to 0\n    this.gap = newValue < value[0] || newValue > value[1] ? 0 : newValue;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when change the value on range inputs */\n  @Event() bqChange: EventEmitter<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>;\n\n  /** Handler to be called when the slider loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSliderElement>;\n\n  /** Handler to be called when the slider gets focused */\n  @Event() bqFocus: EventEmitter<HTMLBqSliderElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.handleGapChange(this.gap);\n    this.setState(this.value);\n    this.handleStepPropChange();\n  }\n\n  componentDidLoad() {\n    this.runUpdates();\n  }\n\n  componentDidUpdate() {\n    this.runUpdates();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private runUpdates = () => {\n    this.updateProgressTrack();\n    this.syncInputsValue();\n    this.setThumbPosition();\n  };\n\n  private setState = (newValue: TSliderValue) => {\n    const isRangeType = this.isRangeType;\n    const value = this.stringToObject(newValue);\n\n    this.minValue = isRangeType ? clamp(value[0], this.min, this.max - this.gap) : value;\n    this.maxValue = isRangeType ? clamp(value[1], this.minValue + this.gap, this.max) : this.minValue;\n  };\n\n  private setThumbPosition = () => {\n    if (!this.enableTooltip) return;\n\n    // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition\n    ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());\n  };\n\n  private syncInputsValue = () => {\n    this.inputMinElem?.setAttribute('value', this.minValue.toString());\n    this.inputMaxElem?.setAttribute('value', this.maxValue.toString());\n  };\n\n  private stringToObject = (value: TSliderValue) => (isString(value) ? JSON.parse(value) : value);\n\n  private handleInputChange = (type: 'min' | 'max', event: InputEvent) => {\n    const target = event.target as HTMLInputElement;\n    const value = parseFloat(target.value);\n\n    if (type === 'min') {\n      this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;\n    } else if (type === 'max') {\n      this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;\n    }\n\n    // Update the input value to reflect the clamped value\n    const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();\n    target.value = reflectedValue;\n    target.setAttribute('value', reflectedValue);\n\n    // Sync the prop value.\n    // This will trigger the `@Watch('value')` method and emit the `bqChange` event.\n    this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n  };\n\n  private calculatePercent = (value: number) => {\n    const totalRange = Number(this.max) - Number(this.min);\n    return (value / totalRange) * 100;\n  };\n\n  private updateProgressTrack = () => {\n    if (!this.progressElem) return;\n\n    // For range type, left starts from the `min` value and width is the difference between `max` and `min`.\n    // For non-range type, left starts from 0 and width is the `min` value.\n    const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;\n    const width = this.isRangeType\n      ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue))\n      : this.calculatePercent(this.minValue);\n\n    this.progressElem.style.insetInlineStart = `${left}%`;\n    this.progressElem.style.inlineSize = `${width}%`;\n  };\n\n  private calculateThumbPosition = (value: number): number => {\n    if (!this.progressElem) return;\n\n    // Get the width of the track area and the size of the input range thumb\n    const trackAreaWidth = this.trackElem.getBoundingClientRect().width;\n    // We need to also add 4px to the thumb size,\n    // this is because the thumb is 2px border (`border-m`)\n    const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;\n    const totalWidth = trackAreaWidth - inputThumbSize;\n\n    return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;\n  };\n\n  private thumbPosition = (): { minThumbPosition: number; maxThumbPosition?: number } => {\n    const minThumbPosition = this.calculateThumbPosition(this.minValue);\n    const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;\n\n    return { minThumbPosition, maxThumbPosition };\n  };\n\n  private emitBqChange = () => {\n    this.debounceBqChange?.cancel();\n\n    const value: Exclude<TSliderValue, string> = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n    this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);\n\n    this.debounceBqChange();\n  };\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    this.handleTooltipVisibility(event, 'remove');\n  };\n\n  private handleMouseUp = (event: MouseEvent) => {\n    this.handleTooltipVisibility(event, 'add');\n  };\n\n  private handleTooltipVisibility = (event: MouseEvent, action: 'add' | 'remove') => {\n    if (!this.enableTooltip || this.tooltipAlwaysVisible) return;\n\n    const target = event.target as HTMLElement;\n    const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;\n    tooltipElem.classList[action]('hidden');\n  };\n\n  private get decimalCount(): number {\n    // Return the length of the decimal part of the step value.\n    return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;\n  }\n\n  private get isRangeType() {\n    return this.type === 'range';\n  }\n\n  private get isTooltipAlwaysVisible(): boolean {\n    return this.tooltipAlwaysVisible && this.enableTooltip;\n  }\n\n  private renderLabel = (value: number, position: 'start' | 'end', css?: string) => {\n    return (\n      <span\n        class={{\n          [`${css} box-content block text-s font-medium leading-regular text-text-primary is-fit min-is-8 [font-variant:tabular-nums]`]:\n            true,\n          hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator || !this.isRangeType,\n        }}\n        part={`label-${position}`}\n      >\n        {value.toFixed(this.decimalCount)}\n      </span>\n    );\n  };\n\n  private renderInput = (type: 'max' | 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {\n    // Determine the zIndex value based on the type and the current min and max values.\n    const zIndexValue = (type: 'min' | 'max'): string => {\n      const zIndex = {\n        min: this.minValue === this.min && this.maxValue === this.minValue,\n        max: this.maxValue === this.max && this.minValue === this.maxValue,\n      };\n\n      // If the value of both thumbs is the same as the min or max value, set the zIndex to -1\n      return zIndex[type] ? '-1' : '0';\n    };\n\n    return (\n      <input\n        type=\"range\"\n        class={{\n          'absolute start-0 -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none is-full inset-bs-[50%] disabled:cursor-not-allowed':\n            true,\n          'pointer-events-none': this.isRangeType,\n        }}\n        style={this.isRangeType ? { zIndex: zIndexValue(type) } : undefined}\n        disabled={this.disabled}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        ref={refCallback}\n        onInput={(ev) => this.handleInputChange(type, ev)}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        onMouseUp={this.handleMouseUp}\n        value={value}\n        part={`input-${type}`}\n      />\n    );\n  };\n\n  private renderTooltip = (\n    value: number,\n    thumbPosition: number,\n    refCallback: (elem: HTMLBqTooltipElement) => void,\n  ): HTMLBqTooltipElement => (\n    <bq-tooltip\n      class={{\n        'absolute [&::part(panel)]:absolute': true,\n        hidden: !this.isTooltipAlwaysVisible,\n      }}\n      exportparts=\"base,trigger,panel\"\n      alwaysVisible={true}\n      distance={this.enableValueIndicator ? 6 : 16}\n      style={{ insetInlineStart: `${thumbPosition}px`, fontVariant: 'tabular-nums' }}\n      ref={refCallback}\n    >\n      <div class=\"absolute bs-1 is-1\" slot=\"trigger\" />\n      {value.toFixed(this.decimalCount)}\n    </bq-tooltip>\n  );\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        class={{ 'flex is-full': true, 'cursor-not-allowed opacity-60': this.disabled }}\n        part=\"base\"\n      >\n        {/* LABEL (start) */}\n        {this.renderLabel(this.minValue, 'start', 'me-xs text-end')}\n        {/* SLIDER */}\n        <div class=\"relative is-full\" part=\"container\">\n          {/* TRACK AREA */}\n          <span\n            class=\"absolute start-0 -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color] bs-1 is-full inset-bs-[50%]\"\n            ref={(elem) => (this.trackElem = elem)}\n            part=\"track-area\"\n          />\n          {/* PROGRESS AREA */}\n          <span\n            class=\"absolute -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color] bs-1 is-[50%] inset-bs-[50%]\"\n            ref={(elem) => (this.progressElem = elem)}\n            part=\"progress-area\"\n          />\n          {/* TOOLTIP on top of the value or min value (if the slider type is `range`) */}\n          {this.enableTooltip &&\n            this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem))}\n          {/* INPUT (Min), used on single type */}\n          {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}\n          {/* TOOLTIP on top of the max value (if the slider type is `range`) */}\n          {this.enableTooltip &&\n            this.isRangeType &&\n            this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem))}\n          {/* INPUT (Max) */}\n          {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}\n        </div>\n        {/* LABEL (end) */}\n        {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-1715ac80.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["NOTIFICATION_TYPE","bqNotificationCss","BqNotificationStyle0","notificationPortal","Object","assign","document","createElement","className","BqNotification","this","handleHide","async","ev","bqHide","emit","el","defaultPrevented","leave","notificationElem","open","handleTransitionEnd","handleShow","bqShow","enter","bqAfterOpen","bqAfterClose","handleContentSlotChange","hasContent","hasSlotContent","bodyElem","handleFooterSlotChange","hasFooter","footerElem","handleTimeout","_a","autoDismissDebounce","cancel","autoDismiss","debounce","hide","time","handleOpenChange","checkPropValues","validatePropValue","componentWillLoad","afterNotificationClose","removeChild","querySelector","remove","error","DOMException","show","toast","parentElement","body","append","appendChild","requestAnimationFrame","iconName","type","render","style","border","h","Host","key","class","hidden","role","ref","div","part","disableClose","appearance","size","onClick","name","hideIcon","exportparts","onSlotchange"],"sources":["../../packages/beeq/src/components/notification/bq-notification.types.ts","../../packages/beeq/src/components/notification/scss/bq-notification.scss?tag=bq-notification&encapsulation=shadow","../../packages/beeq/src/components/notification/bq-notification.tsx"],"sourcesContent":["export const NOTIFICATION_TYPE = ['error', 'info', 'neutral', 'success', 'warning'] as const;\nexport type TNotificationType = (typeof NOTIFICATION_TYPE)[number];\n\nexport const NOTIFICATION_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TNotificationBorderRadius = (typeof NOTIFICATION_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                             Notification styles                            */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-notification.variables';\n\n:host {\n  @apply block;\n}\n\n:host(.is-hidden) {\n  @apply hidden;\n}\n\n.bq-notification {\n  @apply relative flex transition-all min-is-[--bq-notification--min-width] p-b-[--bq-notification--padding] p-i-[--bq-notification--padding];\n  @apply rounded-[--bq-notification--border-radius] bg-[--bq-notification--background] shadow-[shadow:--bq-notification--box-shadow];\n}\n\n/**\n * Set the notification icon color based on the type value selected\n */\n.notification--icon.color {\n  &-error {\n    @apply text-[color:--bq-notification--icon-color-error];\n  }\n\n  &-info {\n    @apply text-[color:--bq-notification--icon-color-info];\n  }\n\n  &-neutral {\n    @apply text-[color:--bq-notification--icon-color-neutral];\n  }\n\n  &-success {\n    @apply text-[color:--bq-notification--icon-color-success];\n  }\n\n  &-warning {\n    @apply text-[color:--bq-notification--icon-color-warning];\n  }\n}\n\n/**\n * Tweak the close bq-button styles so it remain small without extra padding\n */\n.notification--close::part(button) {\n  @apply rounded-s border-0 bs-fit p-b-0 p-i-0;\n}\n\n/**\n * Here we guarantee that if the footer actions are wrapped in a div container from the consumer side,\n * the styles get applied to the that wrapping container directly\n */\n[part='footer'] ::slotted(*) {\n  @apply flex items-start gap-xs;\n}\n\n[part='body'],\n[part='footer'] {\n  ::slotted(*) {\n    @apply block m-bs-m;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { NOTIFICATION_TYPE, TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst notificationPortal = Object.assign(document.createElement('div'), { className: 'bq-notification-portal' });\n\n/**\n * @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification 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 notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n */\n\n@Component({\n  tag: 'bq-notification',\n  styleUrl: './scss/bq-notification.scss',\n  shadow: true,\n})\nexport class BqNotification {\n  // Own Properties\n  // ====================\n\n  private autoDismissDebounce: TDebounce<void>;\n  private bodyElem: HTMLDivElement;\n  private footerElem: HTMLDivElement;\n  private notificationElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqNotificationElement;\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 notification will automatically hide after the specified amount of time */\n  @Prop({ reflect: true }) autoDismiss: boolean;\n\n  /** The corder radius of the notification component */\n  @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n  /** If true, the close button at the top right of the notification won't be shown */\n  @Prop({ reflect: true }) disableClose: boolean;\n\n  /** If true, the notification icon won't be shown */\n  @Prop({ reflect: true }) hideIcon: boolean;\n\n  /** If true, the notification will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` */\n  @Prop({ reflect: true }) time: number = 3000;\n\n  /** Type of Notification */\n  @Prop({ reflect: true }) type: TNotificationType = 'info';\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.autoDismiss && this.open)) return;\n    this.autoDismissDebounce();\n  }\n\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(NOTIFICATION_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 notification is hidden */\n  @Event() bqHide!: EventEmitter;\n\n  /** Callback handler to be called when the notification is shown */\n  @Event() bqShow!: EventEmitter;\n\n  /** Callback handler to be called after the notification has been opened */\n  @Event() bqAfterOpen!: EventEmitter;\n\n  /** Callback handler to be called after the notification has been closed */\n  @Event() bqAfterClose!: 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  // Listeners\n  // ==============\n\n  @Listen('bqAfterClose')\n  afterNotificationClose() {\n    try {\n      notificationPortal.removeChild(this.el);\n      // Remove the notification portal from the DOM when there are no more notifications\n      if (notificationPortal.querySelector('bq-notification') === null) {\n        notificationPortal.remove();\n      }\n    } catch (error) {\n      /**\n       * Skip DOMException error since it could be possible that\n       * in some situations the notification portal is missing\n       */\n      if (error instanceof DOMException) return;\n      throw error;\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  /** Method to be called to hide the notification component */\n  @Method()\n  async hide(): Promise<void> {\n    await this.handleHide();\n  }\n\n  /** Method to be called to show the notification component */\n  @Method()\n  async show(): Promise<void> {\n    await this.handleShow();\n  }\n\n  /** This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically */\n  @Method()\n  async toast() {\n    if (notificationPortal.parentElement === null) {\n      document.body.append(notificationPortal);\n    }\n\n    notificationPortal.appendChild(this.el);\n    requestAnimationFrame(() => {\n      this.show();\n    });\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.notificationElem);\n      this.open = false;\n      this.handleTransitionEnd();\n    }\n  };\n\n  private handleShow = async () => {\n    const ev = this.bqShow.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = true;\n      await enter(this.notificationElem);\n      this.handleTransitionEnd();\n    }\n  };\n\n  private handleTransitionEnd = () => {\n    if (this.open) {\n      this.bqAfterOpen.emit();\n      return;\n    }\n\n    this.bqAfterClose.emit();\n  };\n\n  private handleContentSlotChange = () => {\n    this.hasContent = hasSlotContent(this.bodyElem);\n  };\n\n  private handleFooterSlotChange = () => {\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  private get iconName(): string {\n    switch (this.type) {\n      case 'error':\n        return 'x-circle';\n      case 'success':\n        return 'check-circle';\n      case 'warning':\n        return 'warning-circle';\n      default:\n        return 'info';\n    }\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host\n        style={style}\n        class={{ 'is-hidden': !this.open }}\n        aria-hidden={!this.open ? 'true' : 'false'}\n        hidden={!this.open ? 'true' : 'false'}\n        role=\"alert\"\n      >\n        <div\n          class=\"bq-notification\"\n          data-transition-enter=\"transform transition ease-out duration-300\"\n          data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n          data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n          data-transition-leave=\"transform transition ease-in duration-100\"\n          data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n          data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n          ref={(div) => (this.notificationElem = div)}\n          part=\"wrapper\"\n        >\n          {/* CLOSE BUTTON */}\n          {!this.disableClose && (\n            <bq-button\n              class=\"notification--close absolute inset-ie-5\"\n              appearance=\"text\"\n              size=\"small\"\n              onClick={() => this.hide()}\n              part=\"btn-close\"\n            >\n              <bq-icon name=\"x\" />\n            </bq-button>\n          )}\n          {/* ICON */}\n          <div\n            class={{\n              '!hidden': this.hideIcon,\n              [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n              'notification--icon me-xs flex text-left align-top': true,\n            }}\n            part=\"icon-outline\"\n          >\n            <slot name=\"icon\">\n              <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-notification--content-footer-gap]\" part=\"main\">\n            <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n              {/* TITLE */}\n              <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n                <slot />\n              </div>\n              {/* BODY */}\n              <div\n                class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n                ref={(div) => (this.bodyElem = div)}\n                part=\"body\"\n              >\n                <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\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.handleFooterSlotChange} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-2e66fc4f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DATE_PICKER_TYPE","bqDatePickerCss","BqDatePickerStyle0","BqDatePicker","this","fallbackInputId","COMMON_EXPORT_PARTS","BUTTON_EXPORT_PARTS","handleBlur","disabled","bqBlur","emit","el","handleFocus","bqFocus","setFocusedDate","callyElem","focusedDate","value","formatFocusedDate","Date","toLocaleDateString","handleChange","ev","isHTMLElement","target","dateValue","isNaN","getTime","displayDate","formatDisplayValue","bqChange","handleCalendarChange","inputElem","focus","open","type","handleCalendarRangeStart","hasRangeEnd","tentative","detail","handleCalendarRangeEnd","handleClearClick","bqClear","stopPropagation","handleLabelSlotChange","hasLabel","hasSlotContent","labelElem","handlePrefixSlotChange","hasPrefix","prefixElem","handleSuffixSlotChange","hasSuffix","suffixElem","generateCalendarMonth","offset","className","h","class","exportparts","generateCalendarMonths","months","Array","from","length","_","i","undefined","dateRegex","match","exec","dateFormatter","Intl","DateTimeFormat","locale","formatOptions","start","end","split","map","dateStr","formatRange","dates","date","format","join","day","month","year","handleValueChange","isArray","hasValue","some","val","isDefined","checkPropValues","validatePropValue","connectedCallback","handleOpenChange","composedPath","includes","handleClickOutside","button","isEventTargetChildOfElement","clear","CalendarType","componentTypes","single","multi","range","render","CallyCalendar","labelId","name","key","part","id","htmlFor","ref","onSlotchange","distance","panelHeight","placement","skidding","strategy","validationStatus","slot","spanElem","autoComplete","autoCapitalize","autoFocus","autofocus","form","placeholder","readonly","required","spellcheck","onBlur","onFocus","onChange","disableClear","appearance","clearButtonLabel","size","onBqClick","weight","isDateDisallowed","min","max","pageBy","monthsPerView","firstDayOfWeek","showOutsideDays","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-stroke-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-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.danger);\n\n    @apply border-active-stroke-danger;\n  }\n}\n\n.bq-date-picker__control.validation-success {\n  @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.success);\n\n    @apply border-active-stroke-success;\n  }\n}\n\n.bq-date-picker__control.validation-warning {\n  @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.warning);\n\n    @apply border-active-stroke-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-[color:inherit];\n  @apply border-none min-bs-[--bq-date-picker--icon-size] min-is-0 m-b-0 m-i-0 p-b-0 p-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-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 hover:bg-hover-bg-secondary;\n  }\n\n  &::part(button day selected) {\n    @apply bg-[--bq-date-picker--range-background-color] hover:bg-hover-ui-brand;\n  }\n\n  &::part(outside) {\n    @apply text-[--bq-text--secondary] opacity-100;\n  }\n\n  &::part(selected) {\n    @apply rounded-s text-[color:--bq-text--alt];\n  }\n\n  &::part(range-inner) {\n    @apply rounded-none;\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] text-[color:--bq-date-picker--currentDate-text-color];\n\n    border-style: var(--bq-date-picker--border-style);\n  }\n\n  &::part(today selected) {\n    @apply text-[color:--bq-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 { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } 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  isDefined,\n  isEventTargetChildOfElement,\n  isHTMLElement,\n  validatePropValue,\n} from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\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 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// Parts from the Cally library for calendar-date and calendar-range components:\n * @part calendar__container - The container for the entire component.\n * @part calendar__header - The container for heading and button's.\n * @part calendar__button - Any button within the component.\n * @part calendar__previous - The previous page button.\n * @part calendar__next - The next page button.\n * @part calendar__disabled - A button that is disabled due to min/max.\n * @part calendar__heading - The heading containing the month and year.\n\n// Parts specific to the calendar-month component:\n * @part calendar__heading - The heading that labels the month.\n * @part calendar__table - The <table> element.\n * @part calendar__tr - Any row within the table.\n * @part calendar__head - The table's header row.\n * @part calendar__week - The table's body rows.\n * @part calendar__th - The table's header cells.\n * @part calendar__td - The table's body cells.\n * @part calendar__button - Any button used in the component.\n * @part calendar__day - The buttons corresponding to each day in the grid.\n * @part calendar__selected - Any days which are selected.\n * @part calendar__today - Today's day.\n * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.\n * @part calendar__outside - Any days which are outside the current month.\n * @part calendar__range-start - The day at the start of a date range.\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 */\n@Component({\n  tag: 'bq-date-picker',\n  styleUrl: './scss/bq-date-picker.scss',\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  @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  /** 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    if (Array.isArray(this.value)) {\n      this.hasValue = this.value.some((val) => val.length > 0);\n      return;\n    }\n\n    this.hasValue = isDefined(this.value);\n    this.displayDate = this.formatDisplayValue(this.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  connectedCallback() {\n    this.handleValueChange();\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\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.callyElem.focusedDate = this.value\n      ? this.formatFocusedDate(this.value)\n      : new Date().toLocaleDateString('fr-CA');\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\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.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.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.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 = ''): JSX.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 JSX.Element representing 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 {JSX.Element[]} An array of JSX.Element representing calendar months.\n   */\n  private generateCalendarMonths = (): JSX.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 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          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              autoFocus={this.autofocus}\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 weight=\"bold\" 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\" weight=\"bold\" 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":"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","ignoreList":[]}