@beeq/core 1.2.0 → 1.3.1

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

@@ -19,7 +19,7 @@ export declare class BqCheckbox {
     /** If true checkbox is disabled */
     disabled?: boolean;
     /** A state that is neither checked nor unchecked */
-    indeterminate: false;
+    indeterminate?: boolean;
     /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */
     name: string;
     /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */

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

@@ -11,6 +11,8 @@ export declare class BqOption {
     el: HTMLBqOptionElement;
     hasPrefix: boolean;
     hasSuffix: boolean;
+    /** If true, the option is hidden. */
+    hidden: boolean;
     /** If true, the option is disabled. */
     disabled?: boolean;
     /** A string representing the value of the option. Can be used to identify the item */
@@ -31,5 +33,6 @@ export declare class BqOption {
     private onClick;
     private onSlotChange;
     private handleSuffixSlotChange;
+    private get isDisabledOrHidden();
     render(): any;
 }

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

@@ -1,17 +1,26 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FloatingUIPlacement } from '../../services/interfaces';
-import { TInputValidation, TInputValue } from '../input/bq-input.types';
+import { TInputValidation } from '../input/bq-input.types';
+export type TSelectValue = string | string[];
 /**
  * @part base - The component's base wrapper.
  * @part button - The native HTML button used under the hood in the clear button.
  * @part clear-btn - The clear button.
  * @part control - The input control wrapper.
+ * @part input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.
  * @part helper-text - The helper text slot container.
  * @part input - The native HTML input element used under the hood.
  * @part label - The label slot container.
  * @part panel - The select panel container
  * @part prefix - The prefix slot container.
  * @part suffix - The suffix slot container.
+ * @part tags - The tags container of the BqTags for multiple selection.
+ * @part tag - The tag container of the BqTag for multiple selection.
+ * @part tag__base - The base wrapper of the BqTag for multiple selection.
+ * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.
+ * @part tag__text - The text slot container of the BqTag for multiple selection.
+ * @part tag__btn-close - The close button of the BqTag for multiple selection.
+ * @part option-list - The option list container.
  */
 export declare class BqSelect {
     private helperTextElem?;
@@ -19,10 +28,12 @@ export declare class BqSelect {
     private labelElem?;
     private prefixElem?;
     private suffixElem?;
+    private debounceQuery;
     private fallbackInputId;
     el: HTMLBqSelectElement;
     displayValue?: string;
     hasHelperText: boolean;
+    selectedOptions: HTMLBqOptionElement[];
     hasLabel: boolean;
     hasPrefix: boolean;
     hasSuffix: boolean;
@@ -31,6 +42,11 @@ export declare class BqSelect {
     autofocus: boolean;
     /** The clear button aria label */
     clearButtonLabel?: string;
+    /**
+     * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
+     * A value of 0 means no debouncing will occur.
+     */
+    debounceTime?: number;
     /**
      * Indicates whether the Select input is disabled or not.
      * If `true`, the Select is disabled and cannot be interacted with.
@@ -46,6 +62,10 @@ export declare class BqSelect {
     keepOpenOnSelect?: boolean;
     /** The Select input name. */
     name: string;
+    /** The maximum number of tags to display when multiple selection is enabled */
+    maxTagsVisible: number;
+    /** If true, the Select input will allow multiple selections. */
+    multiple?: boolean;
     /** If true, the Select panel will be visible. */
     open?: boolean;
     /** When set, it will override the height of the Select panel. */
@@ -54,7 +74,7 @@ export declare class BqSelect {
     placeholder?: string;
     /** Position of the Select panel */
     placement?: FloatingUIPlacement;
-    /** If true, the Select input cannot be modified. */
+    /** If true, the list of options cannot be filtered (searching won't be available) */
     readonly?: boolean;
     /** Indicates whether or not the Select input is required to be filled out before submitting the form. */
     required?: boolean;
@@ -76,7 +96,7 @@ export declare class BqSelect {
      */
     validationStatus: TInputValidation;
     /** The select input value, it can be used to reset the field to a previous value */
-    value: TInputValue;
+    value: TSelectValue;
     handleValueChange(): void;
     /** Callback handler emitted when the Select input loses focus */
     bqBlur: EventEmitter<HTMLBqSelectElement>;
@@ -89,6 +109,7 @@ export declare class BqSelect {
         value: string | number | string[];
         item: HTMLBqOptionElement;
     }>;
+    connectedCallback(): void;
     componentDidLoad(): void;
     handleOpenChange(ev: CustomEvent<{
         open: boolean;
@@ -104,13 +125,20 @@ export declare class BqSelect {
     private handleBlur;
     private handleFocus;
     private handleSelect;
+    private handleMultipleSelection;
+    private handleSearchFilter;
     private handleClearClick;
+    private handleTagRemove;
     private handleLabelSlotChange;
     private handlePrefixSlotChange;
     private handleSuffixSlotChange;
     private handleHelperTextSlotChange;
+    private resetOptionsVisibility;
     private syncItemsFromValue;
     private getOptionLabel;
     private get options();
+    private get displayPlaceholder();
+    private get displayTags();
+    private get hasClearIcon();
     render(): any;
 }

package/dist/types/components/side-menu-item/bq-side-menu-item.d.ts

@@ -1,4 +1,4 @@
-import { Event, EventEmitter } from '../../stencil-public-runtime';
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @part base - The component wrapper container inside the shadow DOM
  * @part label - The label slot

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

@@ -1,58 +1,105 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { TSliderType } from './bq-slider.types';
+import { TSliderType, TSliderValue } from './bq-slider.types';
+/**
+ * @part base - The component's base wrapper.
+ * @part container - The container of the slider.
+ * @part track-area - The track area of the slider.
+ * @part progress-area - The progress area of the slider.
+ * @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`.
+ * @part input-max - The input element for the maximum value.
+ * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.
+ * @part label-end - The label for maximum value when the slider type is `range`.
+ */
 export declare class BqSlider {
-    private progressDivElement;
-    private minRangeInputElement;
-    private maxRangeInputElement;
-    private bqChangeDebounced;
+    private inputMinElem;
+    private inputMaxElem;
+    private minTooltipElem;
+    private maxTooltipElem;
+    private progressElem;
+    private trackElem;
+    private debounceBqChange;
     el: HTMLBqSliderElement;
-    private minRangeValue;
-    private maxRangeValue;
-    /** If `true` slider is disabled */
-    disabled?: boolean;
-    /** A number representing the delay value applied to bqChange event handler */
+    /**
+     * The `minValue` state is the only value when the slider type is `single`
+     * and the minimum value when the slider type is `range`.
+     */
+    minValue: number;
+    /** The `maxValue` state is only used when the slider type is `range`. */
+    maxValue: number;
+    /** It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) */
+    minThumbPosition: number;
+    /** It hold the left position of the Thumb for the maximum value (if the slider type is `range`) */
+    maxThumbPosition: number;
+    /** The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. */
     debounceTime: number;
-    /** A number representing the minimum value between the min and max range selected. */
+    /** If `true` the slider is disabled. */
+    disabled?: boolean;
+    /** If `true` it will show the value label on a side of the slider track area */
+    enableValueIndicator?: boolean;
+    /** A number representing the amount to remain between the minimum and maximum values (only for range type). */
     gap: number;
-    /** A number representing the min value of the slider. */
-    min: number;
     /** A number representing the max value of the slider. */
     max: number;
-    /** A number representing the step of the slider. */
+    /** A number representing the min value of the slider. */
+    min: number;
+    /**
+     * A number representing the step of the slider.
+     * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.
+     */
     step: number;
     /** It defines the type of slider to display  */
     type: TSliderType;
-    /** If `true` it will display the min and max values */
-    valueIndicator?: boolean;
-    /** A number representing the value of the slider. */
-    value: number | Array<number> | string;
-    handleTypePropChange(): void;
-    handleValuePropChange(): void;
+    /**
+     * The value of the slider.
+     * - If the slider type is `single`, the value is a number.
+     * - 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).
+     */
+    value: TSliderValue;
+    /** If `true`, a tooltip will be shown displaying the progress value */
+    enableTooltip: boolean;
+    /**
+     * If `true`, a tooltip will always display the progress value.
+     * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.
+     */
+    tooltipAlwaysVisible: boolean;
+    handleValuePropChange(newValue: TSliderValue): void;
+    handleStepPropChange(): void;
+    handleGapChange(newValue: number): void;
     /** Handler to be called when change the value on range inputs */
     bqChange: EventEmitter<{
-        value: number | Array<number> | string;
+        value: Exclude<TSliderValue, string>;
         el: HTMLBqSliderElement;
     }>;
     /** Handler to be called when the slider loses focus */
     bqBlur: EventEmitter<HTMLBqSliderElement>;
     /** Handler to be called when the slider gets focused */
     bqFocus: EventEmitter<HTMLBqSliderElement>;
-    componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
-    private get isSingleSlider();
-    private get stepDecimalNumber();
-    private setPropValue;
-    private handleMinRangeInput;
-    private handleMaxRangeInput;
-    private updateProgressSize;
-    private sanitizeArrayValue;
-    private sanitizePropValue;
-    private setElementValue;
-    private getMinRangeValue;
-    private getMaxRangeValue;
-    private handleRangeInputBlur;
-    private handleRangeInputFocus;
-    private handleRangeInputChange;
+    private runUpdates;
+    private calculateMinValue;
+    private calculateMaxValue;
+    private setState;
+    private setThumbPosition;
+    private syncInputsValue;
+    private stringToObject;
+    private handleInputChange;
+    private calculatePercent;
+    private updateProgressTrack;
+    private calculateThumbPosition;
+    private thumbPosition;
+    private emitBqChange;
+    private handleBlur;
+    private handleFocus;
+    private handleMouseDown;
+    private handleMouseUp;
+    private handleTooltipVisibility;
+    private get decimalCount();
+    private get isRangeType();
+    private get isTooltipAlwaysVisible();
+    private renderLabel;
+    private renderInput;
+    private renderTooltip;
     render(): any;
 }

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

@@ -1,2 +1,3 @@
 export declare const SLIDER_TYPE: readonly ["single", "range"];
 export type TSliderType = (typeof SLIDER_TYPE)[number];
+export type TSliderValue = string | number | [number, number];

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

@@ -4,6 +4,7 @@ import { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.typ
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.
  * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).
  * @part text - The `<div>` element containing the text of the tag component.
+ * @part btn-close - The close button element to remove the tag component.
  */
 export declare class BqTag {
     private prefixElem;

package/dist/types/components.d.ts

@@ -21,8 +21,9 @@ import { TInputType, TInputValidation, TInputValue } from "./components/input/bq
 import { TNotificationBorderRadius, TNotificationType } from "./components/notification/bq-notification.types";
 import { TProgressBorderShape, TProgressThickness, TProgressType } from "./components/progress/bq-progress.types";
 import { TRadioGroupOrientation } from "./components/radio-group/bq-radio-group.types";
+import { TSelectValue } from "./components/select/bq-select";
 import { TSideMenuAppearance, TSideMenuSize } from "./components/side-menu/bq-side-menu.types";
-import { TSliderType } from "./components/slider/bq-slider.types";
+import { TSliderType, TSliderValue } from "./components/slider/bq-slider.types";
 import { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spinner.types";
 import { TStatusType } from "./components/status/bq-status.types";
 import { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
@@ -48,8 +49,9 @@ export { TInputType, TInputValidation, TInputValue } from "./components/input/bq
 export { TNotificationBorderRadius, TNotificationType } from "./components/notification/bq-notification.types";
 export { TProgressBorderShape, TProgressThickness, TProgressType } from "./components/progress/bq-progress.types";
 export { TRadioGroupOrientation } from "./components/radio-group/bq-radio-group.types";
+export { TSelectValue } from "./components/select/bq-select";
 export { TSideMenuAppearance, TSideMenuSize } from "./components/side-menu/bq-side-menu.types";
-export { TSliderType } from "./components/slider/bq-slider.types";
+export { TSliderType, TSliderValue } from "./components/slider/bq-slider.types";
 export { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spinner.types";
 export { TStatusType } from "./components/status/bq-status.types";
 export { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
@@ -293,7 +295,7 @@ export namespace Components {
         /**
           * A state that is neither checked nor unchecked
          */
-        "indeterminate": false;
+        "indeterminate"?: boolean;
         /**
           * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
          */
@@ -648,6 +650,10 @@ export namespace Components {
           * If true, the option is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If true, the option is hidden.
+         */
+        "hidden": boolean;
         /**
           * If true, the option is selected and active.
          */
@@ -808,6 +814,10 @@ export namespace Components {
           * The clear button aria label
          */
         "clearButtonLabel"?: string;
+        /**
+          * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes. A value of 0 means no debouncing will occur.
+         */
+        "debounceTime"?: number;
         /**
           * If true, the clear button won't be displayed
          */
@@ -828,6 +838,14 @@ export namespace Components {
           * If true, the Select panel will remain open after a selection is made.
          */
         "keepOpenOnSelect"?: boolean;
+        /**
+          * The maximum number of tags to display when multiple selection is enabled
+         */
+        "maxTagsVisible": number;
+        /**
+          * If true, the Select input will allow multiple selections.
+         */
+        "multiple"?: boolean;
         /**
           * The Select input name.
          */
@@ -849,7 +867,7 @@ export namespace Components {
          */
         "placement"?: FloatingUIPlacement;
         /**
-          * If true, the Select input cannot be modified.
+          * If true, the list of options cannot be filtered (searching won't be available)
          */
         "readonly"?: boolean;
         /**
@@ -876,7 +894,7 @@ export namespace Components {
         /**
           * The select input value, it can be used to reset the field to a previous value
          */
-        "value": TInputValue;
+        "value": TSelectValue;
     }
     interface BqSideMenu {
         /**
@@ -912,15 +930,23 @@ export namespace Components {
     }
     interface BqSlider {
         /**
-          * A number representing the delay value applied to bqChange event handler
+          * The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change.
          */
         "debounceTime": number;
         /**
-          * If `true` slider is disabled
+          * If `true` the slider is disabled.
          */
         "disabled"?: boolean;
         /**
-          * A number representing the minimum value between the min and max range selected.
+          * If `true`, a tooltip will be shown displaying the progress value
+         */
+        "enableTooltip": boolean;
+        /**
+          * If `true` it will show the value label on a side of the slider track area
+         */
+        "enableValueIndicator"?: boolean;
+        /**
+          * A number representing the amount to remain between the minimum and maximum values (only for range type).
          */
         "gap": number;
         /**
@@ -932,21 +958,21 @@ export namespace Components {
          */
         "min": number;
         /**
-          * A number representing the step of the slider.
+          * A number representing the step of the slider. ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.
          */
         "step": number;
         /**
-          * It defines the type of slider to display
+          * If `true`, a tooltip will always display the progress value. It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.
          */
-        "type": TSliderType;
+        "tooltipAlwaysVisible": boolean;
         /**
-          * A number representing the value of the slider.
+          * It defines the type of slider to display
          */
-        "value": number | Array<number> | string;
+        "type": TSliderType;
         /**
-          * If `true` it will display the min and max values
+          * The value of the slider. - If the slider type is `single`, the value is a number. - 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).
          */
-        "valueIndicator"?: boolean;
+        "value": TSliderValue;
     }
     /**
      * Spinners are designed for users to display data loading.
@@ -1848,7 +1874,7 @@ declare global {
         new (): HTMLBqSideMenuItemElement;
     };
     interface HTMLBqSliderElementEventMap {
-        "bqChange": { value: number | Array<number> | string; el: HTMLBqSliderElement };
+        "bqChange": { value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement };
         "bqBlur": HTMLBqSliderElement;
         "bqFocus": HTMLBqSliderElement;
     }
@@ -2375,7 +2401,7 @@ declare namespace LocalJSX {
         /**
           * A state that is neither checked nor unchecked
          */
-        "indeterminate"?: false;
+        "indeterminate"?: boolean;
         /**
           * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
          */
@@ -2778,6 +2804,10 @@ declare namespace LocalJSX {
           * If true, the option is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If true, the option is hidden.
+         */
+        "hidden"?: boolean;
         /**
           * Handler to be called when item loses focus
          */
@@ -2960,6 +2990,10 @@ declare namespace LocalJSX {
           * The clear button aria label
          */
         "clearButtonLabel"?: string;
+        /**
+          * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes. A value of 0 means no debouncing will occur.
+         */
+        "debounceTime"?: number;
         /**
           * If true, the clear button won't be displayed
          */
@@ -2980,6 +3014,14 @@ declare namespace LocalJSX {
           * If true, the Select panel will remain open after a selection is made.
          */
         "keepOpenOnSelect"?: boolean;
+        /**
+          * The maximum number of tags to display when multiple selection is enabled
+         */
+        "maxTagsVisible"?: number;
+        /**
+          * If true, the Select input will allow multiple selections.
+         */
+        "multiple"?: boolean;
         /**
           * The Select input name.
          */
@@ -3017,7 +3059,7 @@ declare namespace LocalJSX {
          */
         "placement"?: FloatingUIPlacement;
         /**
-          * If true, the Select input cannot be modified.
+          * If true, the list of options cannot be filtered (searching won't be available)
          */
         "readonly"?: boolean;
         /**
@@ -3044,7 +3086,7 @@ declare namespace LocalJSX {
         /**
           * The select input value, it can be used to reset the field to a previous value
          */
-        "value"?: TInputValue;
+        "value"?: TSelectValue;
     }
     interface BqSideMenu {
         /**
@@ -3096,15 +3138,23 @@ declare namespace LocalJSX {
     }
     interface BqSlider {
         /**
-          * A number representing the delay value applied to bqChange event handler
+          * The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change.
          */
         "debounceTime"?: number;
         /**
-          * If `true` slider is disabled
+          * If `true` the slider is disabled.
          */
         "disabled"?: boolean;
         /**
-          * A number representing the minimum value between the min and max range selected.
+          * If `true`, a tooltip will be shown displaying the progress value
+         */
+        "enableTooltip"?: boolean;
+        /**
+          * If `true` it will show the value label on a side of the slider track area
+         */
+        "enableValueIndicator"?: boolean;
+        /**
+          * A number representing the amount to remain between the minimum and maximum values (only for range type).
          */
         "gap"?: number;
         /**
@@ -3122,27 +3172,27 @@ declare namespace LocalJSX {
         /**
           * Handler to be called when change the value on range inputs
          */
-        "onBqChange"?: (event: BqSliderCustomEvent<{ value: number | Array<number> | string; el: HTMLBqSliderElement }>) => void;
+        "onBqChange"?: (event: BqSliderCustomEvent<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>) => void;
         /**
           * Handler to be called when the slider gets focused
          */
         "onBqFocus"?: (event: BqSliderCustomEvent<HTMLBqSliderElement>) => void;
         /**
-          * A number representing the step of the slider.
+          * A number representing the step of the slider. ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.
          */
         "step"?: number;
         /**
-          * It defines the type of slider to display
+          * If `true`, a tooltip will always display the progress value. It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.
          */
-        "type"?: TSliderType;
+        "tooltipAlwaysVisible"?: boolean;
         /**
-          * A number representing the value of the slider.
+          * It defines the type of slider to display
          */
-        "value"?: number | Array<number> | string;
+        "type"?: TSliderType;
         /**
-          * If `true` it will display the min and max values
+          * The value of the slider. - If the slider type is `single`, the value is a number. - 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).
          */
-        "valueIndicator"?: boolean;
+        "value"?: TSliderValue;
     }
     /**
      * Spinners are designed for users to display data loading.

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

@@ -258,6 +258,7 @@ declare const _default: {
                     tertiary: string;
                     inverse: string;
                     brand: string;
+                    alt: string;
                     success: string;
                     warning: string;
                     danger: string;

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

@@ -0,0 +1,7 @@
+/**
+ * Check if the event target is a child of the host element
+ * @param event - The event to check
+ * @param hostElement - The host element to check against
+ * @returns True if the event target is a child of the host element
+ */
+export declare const isEventTargetChildOfElement: (event: Event, hostElement: HTMLElement) => boolean;

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

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

package/package.json

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