@beeq/core 1.12.4-beta.2 → 1.12.4

package/dist/stencil.config.js

@@ -26,6 +26,7 @@ export const config = {
     enableCache: true,
     cacheDir: resolvePath('../../.stencil'),
     sourceMap: true,
+    tsconfig: resolvePath('./tsconfig.lib.json'),
     globalStyle: resolvePath('./src/global/styles/default.scss'),
     plugins: [
         sass({

package/dist/stencil.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../packages/beeq/stencil.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolve } from 'node:path';\n\nimport { angularOutputTarget as angular } from '@stencil/angular-output-target';\nimport type { 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, { type PluginConfigOpts, tailwindHMR } from 'stencil-tailwind-plugin';\n\nimport tailwindConf from '../../tailwind.config';\nimport { angularValueAccessorBindings, generateCustomElementsJson, vueComponentModels } from './src/tools';\n\nconst namespace = 'beeq';\nconst componentCorePackage = `@${namespace}/core`;\nconst customElementsDir = 'dist/components';\nconst resolvePath = (path: string) => resolve(__dirname, path).replace(/\\\\/g, '/');\n\nconst tailwindOpts: PluginConfigOpts = {\n  postcss: resolvePath('../../postcss.config.js'),\n  tailwindConf: tailwindConf,\n  stripComments: true,\n};\n\nexport const config: Config = {\n  namespace,\n  taskQueue: 'async',\n  buildDist: true,\n  enableCache: true,\n  cacheDir: resolvePath('../../.stencil'),\n  sourceMap: true,\n  globalStyle: resolvePath('./src/global/styles/default.scss'),\n  plugins: [\n    sass({\n      includePaths: [resolvePath('../../node_modules'), resolvePath('src/global/styles')],\n      injectGlobalPaths: [resolvePath('src/global/styles/mixins/index.scss')],\n      outputStyle: 'compressed',\n      sourceMap: true,\n      sourceMapEmbed: true,\n      sourceMapContents: true,\n      silenceDeprecations: ['import'],\n    }),\n    tailwind(tailwindOpts),\n    tailwindHMR({ tailwindConf }),\n  ],\n  outputTargets: [\n    { type: 'docs-readme' },\n    /**\n     * The output custom-elements.json file is used by Storybook to generate the documentation.\n     * @see packages/beeq/.storybook/custom-elements.json\n     */\n    { type: 'docs-custom', generator: generateCustomElementsJson },\n    // NOTE: enable the standard custom-elements.json output target once it's stable and supports the features we need (e.g. right path in a monorepo, CSS properties, etc.)\n    // { type: 'docs-custom-elements-manifest', file: `beeq/cem/cem.json` },\n    {\n      type: 'dist',\n      copy: [\n        { src: 'global/scripts', dest: 'scripts', warn: true },\n        { src: '../README.md', dest: '../../README.md', warn: true },\n        { src: '../cem/*.*', dest: '../', warn: true },\n      ],\n    },\n    { type: 'dist-hydrate-script', dir: 'dist/hydrate' },\n    {\n      type: 'dist-custom-elements',\n      customElementsExportBehavior: 'single-export-module',\n      externalRuntime: false,\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      /* --------------------------- Angular output target -------------------------- */\n      componentCorePackage,\n      outputType: 'component', // Generate many component wrappers tied to a single Angular module (lazy/hydrated approach)\n      directivesProxyFile: resolvePath('../beeq-angular/src/directives/components.ts'),\n      directivesArrayFile: resolvePath('../beeq-angular/src/directives/index.ts'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      inlineProperties: true,\n      customElementsDir,\n    }),\n    angular({\n      /* -------------------- Angular Standalone output target -------------------- */\n      componentCorePackage,\n      outputType: 'standalone', // Generate a component with the standalone flag set to true.\n      directivesProxyFile: resolvePath('../beeq-angular/standalone/src/directives/components.ts'),\n      directivesArrayFile: resolvePath('../beeq-angular/standalone/src/directives/index.ts'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    react({\n      /* --------------------------- React output target -------------------------- */\n      outDir: resolvePath('../beeq-react/src/'),\n      customElementsDir,\n    }),\n    react({\n      /* ------------------------- React SSR output target ------------------------ */\n      outDir: resolvePath('../beeq-react/ssr'),\n      clientModule: '@beeq/react',\n      hydrateModule: '@beeq/core/dist/hydrate',\n      customElementsDir,\n    }),\n    vue({\n      /* ---------------------------- Vue output target --------------------------- */\n      componentCorePackage,\n      proxiesFile: resolvePath('../beeq-vue/src/components.ts'),\n      includeImportCustomElements: true,\n      includePolyfills: false,\n      includeDefineCustomElements: false,\n      componentModels: vueComponentModels,\n      // hydrateModule: '@beeq/core/dist/hydrate',\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  testing: {\n    browserHeadless: 'shell',\n    browserArgs: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],\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    strictPort: true,\n  },\n};\n"]}
+{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../packages/beeq/stencil.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolve } from 'node:path';\n\nimport { angularOutputTarget as angular } from '@stencil/angular-output-target';\nimport type { 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, { type PluginConfigOpts, tailwindHMR } from 'stencil-tailwind-plugin';\n\nimport tailwindConf from '../../tailwind.config';\nimport { angularValueAccessorBindings, generateCustomElementsJson, vueComponentModels } from './src/tools';\n\nconst namespace = 'beeq';\nconst componentCorePackage = `@${namespace}/core`;\nconst customElementsDir = 'dist/components';\nconst resolvePath = (path: string) => resolve(__dirname, path).replace(/\\\\/g, '/');\n\nconst tailwindOpts: PluginConfigOpts = {\n  postcss: resolvePath('../../postcss.config.js'),\n  tailwindConf: tailwindConf,\n  stripComments: true,\n};\n\nexport const config: Config = {\n  namespace,\n  taskQueue: 'async',\n  buildDist: true,\n  enableCache: true,\n  cacheDir: resolvePath('../../.stencil'),\n  sourceMap: true,\n  tsconfig: resolvePath('./tsconfig.lib.json'),\n  globalStyle: resolvePath('./src/global/styles/default.scss'),\n  plugins: [\n    sass({\n      includePaths: [resolvePath('../../node_modules'), resolvePath('src/global/styles')],\n      injectGlobalPaths: [resolvePath('src/global/styles/mixins/index.scss')],\n      outputStyle: 'compressed',\n      sourceMap: true,\n      sourceMapEmbed: true,\n      sourceMapContents: true,\n      silenceDeprecations: ['import'],\n    }),\n    tailwind(tailwindOpts),\n    tailwindHMR({ tailwindConf }),\n  ],\n  outputTargets: [\n    { type: 'docs-readme' },\n    /**\n     * The output custom-elements.json file is used by Storybook to generate the documentation.\n     * @see packages/beeq/.storybook/custom-elements.json\n     */\n    { type: 'docs-custom', generator: generateCustomElementsJson },\n    // NOTE: enable the standard custom-elements.json output target once it's stable and supports the features we need (e.g. right path in a monorepo, CSS properties, etc.)\n    // { type: 'docs-custom-elements-manifest', file: `beeq/cem/cem.json` },\n    {\n      type: 'dist',\n      copy: [\n        { src: 'global/scripts', dest: 'scripts', warn: true },\n        { src: '../README.md', dest: '../../README.md', warn: true },\n        { src: '../cem/*.*', dest: '../', warn: true },\n      ],\n    },\n    { type: 'dist-hydrate-script', dir: 'dist/hydrate' },\n    {\n      type: 'dist-custom-elements',\n      customElementsExportBehavior: 'single-export-module',\n      externalRuntime: false,\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      /* --------------------------- Angular output target -------------------------- */\n      componentCorePackage,\n      outputType: 'component', // Generate many component wrappers tied to a single Angular module (lazy/hydrated approach)\n      directivesProxyFile: resolvePath('../beeq-angular/src/directives/components.ts'),\n      directivesArrayFile: resolvePath('../beeq-angular/src/directives/index.ts'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      inlineProperties: true,\n      customElementsDir,\n    }),\n    angular({\n      /* -------------------- Angular Standalone output target -------------------- */\n      componentCorePackage,\n      outputType: 'standalone', // Generate a component with the standalone flag set to true.\n      directivesProxyFile: resolvePath('../beeq-angular/standalone/src/directives/components.ts'),\n      directivesArrayFile: resolvePath('../beeq-angular/standalone/src/directives/index.ts'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    react({\n      /* --------------------------- React output target -------------------------- */\n      outDir: resolvePath('../beeq-react/src/'),\n      customElementsDir,\n    }),\n    react({\n      /* ------------------------- React SSR output target ------------------------ */\n      outDir: resolvePath('../beeq-react/ssr'),\n      clientModule: '@beeq/react',\n      hydrateModule: '@beeq/core/dist/hydrate',\n      customElementsDir,\n    }),\n    vue({\n      /* ---------------------------- Vue output target --------------------------- */\n      componentCorePackage,\n      proxiesFile: resolvePath('../beeq-vue/src/components.ts'),\n      includeImportCustomElements: true,\n      includePolyfills: false,\n      includeDefineCustomElements: false,\n      componentModels: vueComponentModels,\n      // hydrateModule: '@beeq/core/dist/hydrate',\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  testing: {\n    browserHeadless: 'shell',\n    browserArgs: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],\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    strictPort: true,\n  },\n};\n"]}

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

@@ -45,7 +45,7 @@ import type { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class BqCheckbox {
     private inputElem;
-    private prevCheckedValue;
+    private userTriggeredChange;
     el: HTMLBqCheckboxElement;
     internals: ElementInternals;
     /** If true checkbox displays background on hover */
@@ -66,6 +66,7 @@ export declare class BqCheckbox {
     required?: boolean;
     /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */
     value: string;
+    handleCheckedPropChange(): void;
     handleIndeterminatePropChange(): void;
     handleRequiredPropChange(): void;
     /** Handler to be called when the checkbox state changes */
@@ -76,7 +77,6 @@ export declare class BqCheckbox {
     bqFocus: EventEmitter<HTMLBqCheckboxElement>;
     /** Handler to be called when the checkbox loses focus */
     bqBlur: EventEmitter<HTMLBqCheckboxElement>;
-    componentWillLoad(): void;
     componentDidUpdate(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;

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

@@ -192,6 +192,7 @@ export declare class BqInput {
     /** The input value, it can be used to reset the input to a previous value */
     value: TInputValue;
     handleValueChange(): void;
+    handleRequiredPropChange(): void;
     /** Callback handler emitted when the input loses focus */
     bqBlur: EventEmitter<HTMLBqInputElement>;
     /**

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

@@ -36,6 +36,7 @@ export type TSelectValue = string | string[];
  * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
  * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
  * @attr {string} form - The ID of the form that Select input field belongs to.
+ * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
  * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
  * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
  * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.
@@ -147,6 +148,8 @@ export declare class BqSelect {
     distance?: number;
     /** The ID of the form that the Select input belongs to. */
     form?: string;
+    /** The native form validation message (mandatory if `required` is set) */
+    formValidationMessage?: string;
     /** If true, the Select panel will remain open after a selection is made. */
     keepOpenOnSelect?: boolean;
     /** The Select input name. */
@@ -187,6 +190,7 @@ export declare class BqSelect {
     /** The select input value, it can be used to reset the field to a previous value */
     value: TSelectValue;
     handleValueChange(): void;
+    handleRequiredPropChange(): void;
     /** Callback handler emitted when the Select input loses focus */
     bqBlur: EventEmitter<HTMLBqSelectElement>;
     /** Callback handler emitted when the selected value has been cleared */
@@ -257,6 +261,7 @@ export declare class BqSelect {
     private updateDisplayLabel;
     private getOptionLabel;
     private getItemTextContent;
+    private updateFormValidity;
     private get options();
     private get displayPlaceholder();
     private get displayTags();

package/dist/types/components.d.ts

@@ -2050,6 +2050,7 @@ export namespace Components {
      * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
      * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
      * @attr {string} form - The ID of the form that Select input field belongs to.
+     * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
      * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
      * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
      * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.
@@ -2137,6 +2138,10 @@ export namespace Components {
           * The ID of the form that the Select input belongs to.
          */
         "form"?: string;
+        /**
+          * The native form validation message (mandatory if `required` is set)
+         */
+        "formValidationMessage"?: string;
         /**
           * If true, the Select panel will remain open after a selection is made.
           * @default false
@@ -4664,6 +4669,7 @@ declare global {
      * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
      * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
      * @attr {string} form - The ID of the form that Select input field belongs to.
+     * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
      * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
      * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
      * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.
@@ -7577,6 +7583,7 @@ declare namespace LocalJSX {
      * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
      * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
      * @attr {string} form - The ID of the form that Select input field belongs to.
+     * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
      * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
      * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
      * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.
@@ -7658,6 +7665,10 @@ declare namespace LocalJSX {
           * The ID of the form that the Select input belongs to.
          */
         "form"?: string;
+        /**
+          * The native form validation message (mandatory if `required` is set)
+         */
+        "formValidationMessage"?: string;
         /**
           * If true, the Select panel will remain open after a selection is made.
           * @default false
@@ -9073,6 +9084,7 @@ declare namespace LocalJSX {
         "disableClear": boolean;
         "distance": number;
         "form": string;
+        "formValidationMessage": string;
         "keepOpenOnSelect": boolean;
         "name": string;
         "maxTagsVisible": number;
@@ -10252,6 +10264,7 @@ declare module "@stencil/core" {
              * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
              * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
              * @attr {string} form - The ID of the form that Select input field belongs to.
+             * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
              * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
              * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
              * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.

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

@@ -0,0 +1,2 @@
+declare const _default: Promise<import("vite").UserConfig>;
+export default _default;

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

@@ -1,8 +1,9 @@
-import type { E2EPage } from '@stencil/core/testing';
 /**
- * Enhances page to retrieve element style by a given selector
- * @param {E2EPage} page - stencil instance of puppeteer page
- * @param {String} selector - selector to be passed to querySelector, it supports stencil `>>>` selector
- * @returns {Object} style declaration
+ * Retrieves computed CSS styles for an element, with support for shadow DOM piercing via `>>>` selector.
+ * Works directly with the DOM (designed for browser-mode e2e tests).
+ *
+ * @param {string} selector - CSS selector, supports `>>>` to pierce into shadow DOM
+ * @param {ReadonlyArray<T>} [filter] - Optional list of CSS property names to return
+ * @returns {Pick<CSSStyleDeclaration, T>} The computed style (filtered if specified)
  */
-export declare const computedStyle: <T extends keyof CSSStyleDeclaration>(page: E2EPage, selector: string, filter?: ReadonlyArray<T>) => Promise<Pick<CSSStyleDeclaration, T>>;
+export declare const computedStyle: <T extends keyof CSSStyleDeclaration>(selector: string, filter?: ReadonlyArray<T>) => Pick<CSSStyleDeclaration, T>;

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

@@ -9,4 +9,4 @@ export type BqHTMLTagNameMap = keyof {
  * @param {Object} attributes - attributes that will be set on element instance
  * @returns {Object} attributes that were set on element instance
  */
-export declare const setProperties: <T extends keyof HTMLElementTagNameMap = BqHTMLTagNameMap>(page: E2EPage, element: T, attributes: Partial<HTMLElementTagNameMap[T]>) => Promise<Record<string, unknown>>;
+export declare const setProperties: <T extends keyof HTMLElementTagNameMap = BqHTMLTagNameMap>(page: E2EPage, element: T, attributes: Partial<HTMLElementTagNameMap[T]>) => Promise<any>;

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

@@ -1 +1,5 @@
-export { setTimeout as sleep } from 'node:timers/promises';
+/**
+ * Returns a promise that resolves after the given number of milliseconds.
+ * Compatible with both Node.js (unit tests) and browser environments (e2e tests).
+ */
+export declare const sleep: (ms: number) => Promise<void>;

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

@@ -1070,6 +1070,7 @@ export declare namespace JSXBase {
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
+        referrerPolicy?: ReferrerPolicy;
         sizes?: string;
         src?: string;
         srcSet?: string;

package/dist/vitest.config.js

@@ -0,0 +1,81 @@
+/*!
+ * Built by Endavans
+ * © https://beeq.design - Apache 2 License.
+ */
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { defineVitestConfig } from "@stencil/vitest/config";
+import { playwright } from "@vitest/browser-playwright";
+const resolvePath = (path) => resolve(__dirname, path).replace(/\\/g, '/');
+const SVG_DIR = resolvePath('../../dist/beeq/dist/beeq/svg');
+/**
+ * Vite plugin to serve BEEQ SVG icons from the local dist directory.
+ * Maps `/svg/*` requests to `dist/beeq/dist/beeq/svg/*` files.
+ */
+function serveBeeqSvg() {
+    return {
+        name: 'serve-beeq-svg',
+        configureServer(server) {
+            server.middlewares.use((req, res, next) => {
+                if (!req.url?.startsWith('/svg/') || !req.url.endsWith('.svg'))
+                    return next();
+                const filePath = resolve(SVG_DIR, req.url.slice(5)).replace(/\\/g, '/');
+                // Prevent path traversal
+                if (!filePath.startsWith(SVG_DIR))
+                    return next();
+                readFile(filePath)
+                    .then((content) => {
+                    res.setHeader('Content-Type', 'image/svg+xml');
+                    res.setHeader('Cache-Control', 'public, max-age=31536000');
+                    res.end(content);
+                })
+                    .catch(() => next());
+            });
+        },
+    };
+}
+export default defineVitestConfig({
+    stencilConfig: resolvePath('./stencil.config.ts'),
+    test: {
+        projects: [
+            {
+                test: {
+                    name: 'spec',
+                    include: ['src/**/*.spec.{ts,tsx}'],
+                    environment: 'stencil',
+                    setupFiles: [resolvePath('./vitest-spec-setup.ts')],
+                },
+            },
+            {
+                // The browser project needs its own plugins array — top-level plugins
+                // aren't forwarded to the browser's Vite dev server.
+                plugins: [serveBeeqSvg()],
+                test: {
+                    name: 'e2e',
+                    include: ['src/**/*.e2e.tsx'],
+                    setupFiles: [resolvePath('./vitest-e2e-setup.ts')],
+                    browser: {
+                        enabled: true,
+                        provider: playwright(),
+                        headless: true,
+                        instances: [{ browser: 'chromium' }],
+                    },
+                },
+            },
+        ],
+        coverage: {
+            provider: 'istanbul',
+            reportsDirectory: resolvePath('coverage'),
+            reporter: ['text', 'html', 'lcov'],
+            include: ['src/shared/test-utils/**/*.{ts,tsx}', 'src/shared/utils/**/*.{ts,tsx}'],
+            exclude: [
+                'src/**/*.{spec,e2e}.{ts,tsx}',
+                'src/**/*.stories.tsx',
+                'src/components.d.ts',
+                'src/global.d.ts',
+                'src/index.ts',
+            ],
+        },
+    },
+});
+//# sourceMappingURL=vitest.config.js.map

package/dist/vitest.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../../../packages/beeq/vitest.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { readFile } from 'node:fs/promises';\nimport { resolve } from 'node:path';\n\nimport { defineVitestConfig } from '@stencil/vitest/config';\nimport { playwright } from '@vitest/browser-playwright';\nimport type { Plugin } from 'vite';\n\nconst resolvePath = (path: string) => resolve(__dirname, path).replace(/\\\\/g, '/');\nconst SVG_DIR = resolvePath('../../dist/beeq/dist/beeq/svg');\n\n/**\n * Vite plugin to serve BEEQ SVG icons from the local dist directory.\n * Maps `/svg/*` requests to `dist/beeq/dist/beeq/svg/*` files.\n */\nfunction serveBeeqSvg(): Plugin {\n  return {\n    name: 'serve-beeq-svg',\n    configureServer(server) {\n      server.middlewares.use((req, res, next) => {\n        if (!req.url?.startsWith('/svg/') || !req.url.endsWith('.svg')) return next();\n\n        const filePath = resolve(SVG_DIR, req.url.slice(5)).replace(/\\\\/g, '/');\n        // Prevent path traversal\n        if (!filePath.startsWith(SVG_DIR)) return next();\n\n        readFile(filePath)\n          .then((content) => {\n            res.setHeader('Content-Type', 'image/svg+xml');\n            res.setHeader('Cache-Control', 'public, max-age=31536000');\n            res.end(content);\n          })\n          .catch(() => next());\n      });\n    },\n  };\n}\n\nexport default defineVitestConfig({\n  stencilConfig: resolvePath('./stencil.config.ts'),\n  test: {\n    projects: [\n      {\n        test: {\n          name: 'spec',\n          include: ['src/**/*.spec.{ts,tsx}'],\n          environment: 'stencil',\n          setupFiles: [resolvePath('./vitest-spec-setup.ts')],\n        },\n      },\n      {\n        // The browser project needs its own plugins array — top-level plugins\n        // aren't forwarded to the browser's Vite dev server.\n        plugins: [serveBeeqSvg()],\n        test: {\n          name: 'e2e',\n          include: ['src/**/*.e2e.tsx'],\n          setupFiles: [resolvePath('./vitest-e2e-setup.ts')],\n          browser: {\n            enabled: true,\n            provider: playwright(),\n            headless: true,\n            instances: [{ browser: 'chromium' }],\n          },\n        },\n      },\n    ],\n    coverage: {\n      provider: 'istanbul',\n      reportsDirectory: resolvePath('coverage'),\n      reporter: ['text', 'html', 'lcov'],\n      include: ['src/shared/test-utils/**/*.{ts,tsx}', 'src/shared/utils/**/*.{ts,tsx}'],\n      exclude: [\n        'src/**/*.{spec,e2e}.{ts,tsx}',\n        'src/**/*.stories.tsx',\n        'src/components.d.ts',\n        'src/global.d.ts',\n        'src/index.ts',\n      ],\n    },\n  },\n});\n"]}

package/package.json

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

package/dist/beeq/p-07172ac5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqInputCss","BqInput","helperTextElem","inputElem","labelElem","prefixElem","suffixElem","debounceBqInput","fallbackInputId","internals","hasHelperText","hasLabel","hasPrefix","hasSuffix","hasValue","autocapitalize","autocomplete","autofocus","clearButtonLabel","debounceTime","disabled","disableClear","form","formValidationMessage","inputmode","max","maxlength","min","minlength","name","pattern","placeholder","readonly","required","step","type","validationStatus","value","handleValueChange","this","Array","isArray","some","val","length","setFormValue","join","isDefined","isNil","undefined","bqBlur","bqChange","bqClear","bqFocus","bqInput","componentWillLoad","componentDidLoad","handleSlotChange","formAssociatedCallback","toString","updateFormValidity","formResetCallback","handleClear","handleBlur","emit","el","handleFocus","handleInput","ev","cancel","isHTMLElement","target","Number","debounce","handleChange","handleClearClick","stopPropagation","focus","states","clear","trim","add","setValidity","valueMissing","hasSlotContent","render","h","key","class","part","htmlFor","ref","onSlotchange","spanElem","id","inputMode","maxLength","minLength","onBlur","onChange","onFocus","onInput","readOnly","appearance","border","exportparts","label","onBqClick","onlyIcon","size","divElem"],"sources":["../../packages/beeq/src/components/input/scss/bq-input.scss?tag=bq-input&encapsulation=shadow","../../packages/beeq/src/components/input/bq-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Input styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-input.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--label {\n  @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];\n  @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];\n}\n\n.bq-input--helper-text {\n  @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];\n}\n\n.bq-input--helper-text.validation-error {\n  @apply text-danger;\n}\n\n.bq-input--helper-text.validation-success {\n  @apply text-success;\n}\n\n.bq-input--helper-text.validation-warning {\n  @apply text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Input group control                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];\n  // Padding\n  @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];\n  // Text\n  @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-input--border-style);\n\n  // Focus\n  &:not(.disabled):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-input--border-color-focus);\n\n    @apply focus border-[color:--bq-input--border-color-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-input--control__clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-input--control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-input--control.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-input--control.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-input--control.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__input {\n  @apply flex-auto cursor-inherit appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply border-none min-bs-[--bq-input--icon-size] min-is-0 p-b-0 p-i-0 m-b-0 m-i-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--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\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__prefix,\n.bq-input--control__suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];\n}\n\n.bq-input--control__prefix {\n  @apply me-[--bq-input--gap];\n}\n\n.bq-input--control__suffix {\n  @apply ms-[--bq-input--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-input--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                          Hide webkit clear button                          */\n/* -------------------------------------------------------------------------- */\n\n/* Remove clear controls from search input */\n\n.bq-input--control__input::-moz-search-cancel {\n  @apply hidden appearance-none;\n}\n\n.bq-input--control__input::-webkit-search-decoration,\n.bq-input--control__input::-webkit-search-cancel-button,\n.bq-input--control__input::-webkit-search-results-button,\n.bq-input--control__input::-webkit-search-results-decoration {\n  @apply hidden appearance-none;\n}\n\n/* Remove native control extra padding from input date and datetime */\n\n.bq-input--control__input::-webkit-datetime-edit-fields-wrapper,\n.bq-input--control__input::-webkit-datetime-edit,\n.bq-input--control__input::-webkit-datetime-edit-year-field,\n.bq-input--control__input::-webkit-datetime-edit-month-field,\n.bq-input--control__input::-webkit-datetime-edit-day-field,\n.bq-input--control__input::-webkit-datetime-edit-hour-field,\n.bq-input--control__input::-webkit-datetime-edit-minute-field,\n.bq-input--control__input::-webkit-datetime-edit-second-field,\n.bq-input--control__input::-webkit-datetime-edit-millisecond-field,\n.bq-input--control__input::-webkit-datetime-edit-meridiem-field {\n  @apply p-b-0 p-i-0;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';\n\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, type TDebounce } from '../../shared/utils';\nimport type { TInputType, TInputValidation, TInputValue } from './bq-input.types';\n\n/**\n * The Input component is a fundamental user interface element that allows users to input data by typing it into a text field.\n * It is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms.\n *\n * @example How to use it\n * ```html\n * <bq-input name=\"username\" label=\"Username\" placeholder=\"Enter your username\"></bq-input>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/980362-input\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.\n * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.\n * @attr {boolean} autofocus - If true, the input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disabled - Indicates whether the input is disabled or not.\n * @attr {boolean} disable-clear - If true, the clear button won't be displayed.\n * @attr {string} form - The ID of the form that the input field belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {string} inputmode - The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n * @attr {number | string} max - The maximum value that the input field can accept.\n * @attr {number} maxlength - The maximum number of characters that the input field can accept.\n * @attr {number | string} min - The minimum value that the input field can accept.\n * @attr {number} minlength - The minimum number of characters that the input field can accept.\n * @attr {string} name - The input field name.\n * @attr {string} pattern - Specifies a regular expression the form control's value should match.\n * @attr {string} placeholder - The input placeholder text value.\n * @attr {boolean} readonly - If true, the input field cannot be modified.\n * @attr {boolean} required - Indicates whether or not the input field is required to be filled out before submitting the form.\n * @attr {number | 'any'} step - A number that specifies the granularity that the value must adhere to.\n * @attr {string} type - The type attribute specifies the type of input field to display.\n * @attr {'none' | 'error' | 'warning' | 'success'} validation-status - The validation status of the input.\n * @attr {string | number | string[]} value - The input value, it can be used to reset the input to a previous value.\n *\n * @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n * @event bqInput - Callback handler emitted when the input value changes.\n *\n * @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\n * @slot clear-icon - The clear icon slot container.\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 helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n *\n * @cssprop --bq-input--background-color - Input background color\n * @cssprop --bq-input--border-color - Input border color\n * @cssprop --bq-input--border-color-focus - Input border color on focus\n * @cssprop --bq-input--border-radius - Input border radius\n * @cssprop --bq-input--border-width - Input border width\n * @cssprop --bq-input--border-style - Input border style\n * @cssprop --bq-input--gap - Gap between input content and prefix/suffix\n * @cssprop --bq-input--helper-margin-top - Helper text margin top\n * @cssprop --bq-input--helper-text-color - Helper text color\n * @cssprop --bq-input--helper-text-size - Helper text size\n * @cssprop --bq-input--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-input--label-margin-bottom - Input label margin bottom\n * @cssprop --bq-input--label-text-color - Input label text color\n * @cssprop --bq-input--label-text-size - Input label text size\n * @cssprop --bq-input--padding-start - Input padding start\n * @cssprop --bq-input--padding-end - Input padding end\n * @cssprop --bq-input--paddingY - Input padding top and bottom\n * @cssprop --bq-input--text-color - Input text color\n * @cssprop --bq-input--text-size - Input text size\n * @cssprop --bq-input--text-placeholder-color - Input placeholder text color\n */\n@Component({\n  tag: 'bq-input',\n  styleUrl: './scss/bq-input.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqInput {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackInputId = 'input';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqInputElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasHelperText = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the input field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n  /**\n   * Specifies whether or not the input field should have autocomplete enabled.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /** If true, the input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean = false;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /**\n   * Indicates whether the input is disabled or not.\n   * If `true`, the input is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** The ID of the form that the input field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message (mandatory if `required` is set) */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /**\n   * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n   * This allows a browser to display an appropriate virtual keyboard while editing.\n   * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n   */\n  @Prop() inputmode?: string;\n\n  /**\n   * The maximum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) max?: number | string;\n\n  /** The maximum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /**\n   * The minimum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) min?: number | string;\n\n  /** The minimum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The input field name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /**\n   * Specifies a regular expression the form control's value should match.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n   */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /** The input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** If true, the input field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /**\n   * A number that specifies the granularity that the value must adhere to.\n   * Valid for date, month, week, time, datetime-local, number, and range.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @Prop({ reflect: true }) step: number | 'any';\n\n  /**\n   * The type attribute specifies the type of input field to display.\n   * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   */\n  @Prop({ reflect: true }) type: TInputType = 'text';\n\n  /**\n   * The validation status of the input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the 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 input value, it can be used to reset the input to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    const { internals, value } = this;\n    if (Array.isArray(value)) {\n      this.hasValue = value.some((val) => val.length > 0);\n      this.internals.setFormValue(value.join(','));\n      return;\n    }\n\n    this.hasValue = isDefined(value);\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\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<HTMLBqInputElement>;\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 | number | string[]; el: HTMLBqInputElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value changes.\n   * This handler is called whenever the user types or pastes text into the input field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.value?.toString());\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.handleClear();\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    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 handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n    // Update form value and validity\n    this.setFormValue(`${this.value}`);\n    this.updateFormValidity();\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleClear = () => {\n    if (this.disabled) return;\n\n    const { inputElem, setFormValue, updateFormValidity } = this;\n    // Clear input element value\n    inputElem.value = '';\n    this.value = inputElem.value;\n    // Set form value to empty string abd update validity\n    setFormValue(this.value);\n    updateFormValidity();\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    this.handleClear();\n\n    const { bqClear, bqChange, bqInput, el, inputElem } = this;\n    // Emit events\n    bqClear.emit(el);\n    bqInput.emit({ value: this.value, el });\n    bqChange.emit({ value: this.value, el });\n    // Refocus input element\n    inputElem.focus();\n  };\n\n  private setFormValue = (value?: string) => {\n    this.internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, inputElem } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.toString().trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-input\" part=\"base\">\n        {/* Label */}\n        <label\n          aria-label={this.name || this.fallbackInputId}\n          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name || this.fallbackInputId}\n          part=\"label\"\n          ref={(labelElem) => {\n            this.labelElem = labelElem;\n          }}\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        {/* Input control group */}\n        <div\n          class={{\n            'bq-input--control': true,\n            [`validation-${this.validationStatus}`]: true,\n            disabled: this.disabled,\n          }}\n          part=\"control\"\n        >\n          {/* Prefix */}\n          <span\n            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n            part=\"prefix\"\n            ref={(spanElem) => {\n              this.prefixElem = spanElem;\n            }}\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {/* HTML Input */}\n          <input\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            autocapitalize={this.autocapitalize}\n            autocomplete={this.autocomplete}\n            autofocus={this.autofocus}\n            class=\"bq-input--control__input\"\n            disabled={this.disabled}\n            form={this.form}\n            id={this.name || this.fallbackInputId}\n            inputMode={this.inputmode}\n            max={this.max}\n            maxLength={this.maxlength}\n            min={this.min}\n            minLength={this.minlength}\n            name={this.name}\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onInput={this.handleInput}\n            part=\"input\"\n            pattern={this.pattern}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            ref={(inputElem) => {\n              this.inputElem = inputElem;\n            }}\n            required={this.required}\n            step={this.step}\n            type={this.type}\n            value={this.value}\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              appearance=\"text\"\n              border=\"s\"\n              class=\"bq-input--control__clear ms-[--bq-date-picker--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0\"\n              exportparts=\"button\"\n              label={this.clearButtonLabel}\n              onBqClick={this.handleClearClick}\n              onlyIcon\n              part=\"clear-btn\"\n              size=\"small\"\n            >\n              <slot name=\"clear-icon\">\n                <bq-icon aria-hidden=\"true\" class=\"flex\" name=\"x-circle\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* Suffix */}\n          <span\n            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n            part=\"suffix\"\n            ref={(spanElem) => {\n              this.suffixElem = spanElem;\n            }}\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n        </div>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          part=\"helper-text\"\n          ref={(divElem) => {\n            this.helperTextElem = divElem;\n          }}\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-4d863871.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqCheckboxCss","BqCheckbox","inputElem","prevCheckedValue","internals","backgroundOnHover","formId","formValidationMessage","checked","disabled","indeterminate","name","required","value","handleIndeterminatePropChange","this","handleRequiredPropChange","updateFormValidity","bqChange","bqFocus","bqBlur","componentWillLoad","componentDidUpdate","emit","formAssociatedCallback","setFormValue","formResetCallback","removeAttribute","undefined","vClick","click","vFocus","focus","vBlur","blur","states","clear","add","setValidity","valueMissing","handleChange","handleOnFocus","el","handleOnBlur","render","h","key","class","part","form","isNil","onBlur","onChange","onFocus","ref","input","tabindex","type","viewBox","xmlns","d","fill","stroke"],"sources":["../../packages/beeq/src/components/checkbox/scss/bq-checkbox.scss?tag=bq-checkbox&encapsulation=shadow","../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Checkbox styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-checkbox.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-checkbox {\n  @apply box-border inline-flex cursor-pointer select-none rounded-s transition-colors duration-300 ease-in-out p-b-xs p-i-xs;\n\n  // Default hover state\n  &:not(.is-checked),\n  &:not(.is-indeterminate) {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply border-hover-brand;\n    }\n  }\n\n  // Display background on hover (if enabled)\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  // Checked/Indeterminate hover state\n  &.is-checked,\n  &.is-indeterminate {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply bg-hover-ui-brand border-hover-brand;\n    }\n  }\n}\n\n.bq-checkbox__input {\n  // Checkbox square icon has `FOCUS`\n  &:focus,\n  &:focus-visible {\n    ~ .bq-checkbox__checkbox {\n      @apply focus border-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE`\n  &:checked,\n  &:indeterminate {\n    ~ .bq-checkbox__checkbox {\n      @apply border-brand bg-ui-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE` and `DISABLED`\n  &:checked:disabled,\n  &:indeterminate:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n\n  &:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n}\n\n// Checkbox square icon `DEFAULT` state (not checked/indeterminate, not hover, not disabled)\n.bq-checkbox__checkbox {\n  @apply rounded-[--bq-checkbox--border-radius] border-[length:--bq-checkbox--border-width] border-solid border-[color:--bq-icon--primary];\n}\n\n.bq-checkbox__checkbox,\n.bq-checkbox__label {\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n *\n * @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n *   Checkbox label\n * </bq-checkbox>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n *\n * @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n *\n * @slot - The content of the checkbox component\n *\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.indeterminate = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\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  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the checkbox (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the checkbox is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        aria-label={this.name || 'checkbox'}\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            checked={this.checked}\n            class=\"bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0\"\n            disabled={this.disabled}\n            form={this.formId}\n            indeterminate={this.indeterminate}\n            name={!isNil(this.name) ? this.name : undefined}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            ref={(input: HTMLInputElement) => {\n              this.inputElem = input;\n            }}\n            required={this.required}\n            tabindex=\"0\"\n            type=\"checkbox\"\n            value={this.value}\n          />\n          <span\n            class=\"bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M216 72 104 184l-56-56\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M40 128h176\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}