@beeq/core 1.5.1 → 1.6.0

package/dist/hydrate/package.json

@@ -2,5 +2,11 @@
   "name": "@beeq/core/hydrate",
   "description": "beeq component hydration app.",
   "main": "index.js",
-  "types": "index.d.ts"
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
 }

package/dist/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

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

@@ -22,6 +22,11 @@ export declare class BqAccordion {
     disabled: boolean;
     /** If true accordion is expanded */
     expanded: boolean;
+    /**
+     * Animation is set through JS when the browser does not support CSS calc-size()
+     * If true, the accordion animation, will be disabled. No animation will be applied.
+     */
+    noAnimation: boolean;
     /** If true accordion expand icon is rotate 180deg when expanded */
     rotate: boolean;
     /** The size of accordion */
@@ -29,6 +34,7 @@ export declare class BqAccordion {
     checkPropValues(): void;
     handleExpandedChange(): void;
     handleDisabledChange(): void;
+    handleJsAnimation(): void;
     /** Handler to be called when the accordion loses focus */
     bqBlur: EventEmitter<HTMLBqAccordionElement>;
     /** Handler to be called when the accordion gets focus */
@@ -52,5 +58,6 @@ export declare class BqAccordion {
     private handlePrefixSlotChange;
     private handleSuffixSlotChange;
     private get open();
+    private get isCssCalcSizeSupported();
     render(): any;
 }

package/dist/types/components/accordion-group/bq-accordion-group.d.ts

@@ -4,12 +4,17 @@ import { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.
  */
 export declare class BqAccordionGroup {
     el: HTMLBqAccordionGroupElement;
+    /** The appearance style of accordion to be applied to all accordions */
+    appearance: TAccordionAppearance;
     /** If true all accordions are expanded */
     expandAll: boolean;
+    /**
+     * Animation is set through JS when the browser does not support CSS calc-size()
+     * If true, the accordion animation, will be disabled. No animation will be applied.
+     */
+    noAnimation: boolean;
     /** If true multiple accordions can be expanded at the same time */
     multiple: boolean;
-    /** The appearance style of accordion to be applied to all accordions */
-    appearance: TAccordionAppearance;
     /** The size of accordion to be applied to all accordions */
     size: TAccordionSize;
     checkPropValues(): void;

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

@@ -22,7 +22,7 @@ export declare class BqAvatar {
     size: TAvatarSize;
     handleImagePropChange(): void;
     checkPropValues(): void;
-    onInitialsChnage(): void;
+    onInitialsChange(): void;
     componentWillLoad(): void;
     private onImageError;
     private trimInitialsBasedOnSize;

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

@@ -27,7 +27,7 @@ export declare class BqCheckbox {
     /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */
     value: string;
     handleIndeterminatePropChange(): void;
-    /** Handler to be called when the chebkbox state changes */
+    /** Handler to be called when the checkbox state changes */
     bqChange: EventEmitter<{
         checked: boolean;
     }>;

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { DaysOfWeek, TDatePickerType } from './bq-date-picker.types';
-import { FloatingUIPlacement } from '../../services/interfaces';
+import { Placement } from '../../services/interfaces';
 import { TInputValidation } from '../input/bq-input.types';
 /**
  * @part base - The component's base wrapper.
@@ -14,33 +14,34 @@ import { TInputValidation } from '../input/bq-input.types';
  * @part suffix - The suffix slot container.
 
 // Parts from the Cally library for calendar-date and calendar-range components:
- * @part container - The container for the entire component.
- * @part header - The container for heading and button's.
- * @part button - Any button within the component.
- * @part previous - The previous page button.
- * @part next - The next page button.
- * @part disabled - A button that is disabled due to min/max.
- * @part heading - The heading containing the month and year.
+ * @part calendar__container - The container for the entire component.
+ * @part calendar__header - The container for heading and button's.
+ * @part calendar__button - Any button within the component.
+ * @part calendar__previous - The previous page button.
+ * @part calendar__next - The next page button.
+ * @part calendar__disabled - A button that is disabled due to min/max.
+ * @part calendar__heading - The heading containing the month and year.
 
 // Parts specific to the calendar-month component:
- * @part heading - The heading that labels the month.
- * @part table - The <table> element.
- * @part tr - Any row within the table.
- * @part head - The table's header row.
- * @part week - The table's body rows.
- * @part th - The table's header cells.
- * @part td - The table's body cells.
- * @part button - Any button used in the component.
- * @part day - The buttons corresponding to each day in the grid.
- * @part selected - Any days which are selected.
- * @part today - Today's day.
- * @part disallowed - Any day that has been disallowed via isDateDisallowed.
- * @part outside - Any days which are outside the current month.
- * @part range-start - The day at the start of a date range.
- * @part range-end - The day at the end of a date range.
- * @part range-inner - Any days between the start and end of a date range.
+ * @part calendar__heading - The heading that labels the month.
+ * @part calendar__table - The <table> element.
+ * @part calendar__tr - Any row within the table.
+ * @part calendar__head - The table's header row.
+ * @part calendar__week - The table's body rows.
+ * @part calendar__th - The table's header cells.
+ * @part calendar__td - The table's body cells.
+ * @part calendar__button - Any button used in the component.
+ * @part calendar__day - The buttons corresponding to each day in the grid.
+ * @part calendar__selected - Any days which are selected.
+ * @part calendar__today - Today's day.
+ * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.
+ * @part calendar__outside - Any days which are outside the current month.
+ * @part calendar__range-start - The day at the start of a date range.
+ * @part calendar__range-end - The day at the end of a date range.
+ * @part calendar__range-inner - Any days between the start and end of a date range.
  */
 export declare class BqDatePicker {
+    private callyElem?;
     private inputElem?;
     private labelElem?;
     private prefixElem?;
@@ -49,9 +50,11 @@ export declare class BqDatePicker {
     private readonly COMMON_EXPORT_PARTS;
     private readonly BUTTON_EXPORT_PARTS;
     el: HTMLBqDatePickerElement;
-    formattedDate: string;
+    focusedDate: string;
+    displayDate: string;
     hasLabel: boolean;
     hasPrefix: boolean;
+    hasRangeEnd: boolean;
     hasSuffix: boolean;
     hasValue: boolean;
     /** If `true`, the Date picker input will be focused on component render */
@@ -87,8 +90,12 @@ export declare class BqDatePicker {
     min?: string;
     /** Number of months to show when range is `true` */
     months: number;
-    /** The number of months to display per page when using next/previous buttons. */
-    monthsPerView: number;
+    /**
+     * Specifies how the next/previous buttons should navigate the calendar.
+     * - single: The buttons will navigate by a single month at a time.
+     * - months: The buttons will navigate by the number of months displayed per view.
+     */
+    monthsPerView: 'single' | 'months';
     /** The Date picker input name. */
     name: string;
     /** If `true`, the Date picker panel will be visible. */
@@ -98,7 +105,7 @@ export declare class BqDatePicker {
     /** The Date picker input placeholder text value */
     placeholder?: string;
     /** Position of the Date picker panel */
-    placement?: FloatingUIPlacement;
+    placement?: Placement;
     /** Indicates whether or not the Date picker input is required to be filled out before submitting the form. */
     required?: boolean;
     /** Represents the skidding between the Date picker panel and the input element. */
@@ -107,6 +114,8 @@ export declare class BqDatePicker {
     showOutsideDays: boolean;
     /** Defines the strategy to position the Date picker panel */
     strategy?: 'fixed' | 'absolute';
+    /** The date that is tentatively selected e.g. the start of a range selection  */
+    tentative?: string;
     /** It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection */
     type: TDatePickerType;
     /**
@@ -139,10 +148,11 @@ export declare class BqDatePicker {
     bqClear: EventEmitter<HTMLBqDatePickerElement>;
     /** Callback handler emitted when the input has received focus */
     bqFocus: EventEmitter<HTMLBqDatePickerElement>;
-    componentDidLoad(): void;
+    connectedCallback(): void;
     handleOpenChange(ev: CustomEvent<{
         open: boolean;
     }>): void;
+    handleClickOutside(ev: MouseEvent): void;
     /**
      * Clears the selected value.
      *
@@ -152,8 +162,11 @@ export declare class BqDatePicker {
     clear(): Promise<void>;
     private handleBlur;
     private handleFocus;
+    private setFocusedDate;
     private handleChange;
     private handleCalendarChange;
+    private handleCalendarRangeStart;
+    private handleCalendarRangeEnd;
     private handleClearClick;
     private handleLabelSlotChange;
     private handlePrefixSlotChange;
@@ -181,8 +194,8 @@ export declare class BqDatePicker {
      * @param value - The value to be processed, can be a string.
      * @returns The extracted last date portion of the value.
      */
-    private focusedDate;
-    private formatDate;
+    private formatFocusedDate;
+    private formatDisplayValue;
     private get CalendarType();
     render(): any;
 }

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

@@ -13,6 +13,7 @@ export declare class BqDialog {
     private dialogElem;
     private contentElem;
     private footerElem;
+    private closeSlotElem;
     private OPEN_CSS_CLASS;
     el: HTMLBqDialogElement;
     private hasContent;
@@ -47,6 +48,7 @@ export declare class BqDialog {
     bqAfterClose: EventEmitter<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     handleMouseClick(event: MouseEvent): Promise<void>;
     handleKeyDown(ev: KeyboardEvent): Promise<void>;
     /** Open the dialog */

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

@@ -29,11 +29,11 @@ export declare class BqDivider {
     /** Set the line of the divider's stroke. This is applicable when the stroke is dashed */
     strokeLinecap?: TDividerStrokeLinecap;
     checkPropValues(): void;
-    componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
-    private getStrokeDrawPositions;
-    private getStrokeDasharray;
-    private getStrokeAttributes;
     private handleSlotChange;
+    private get strokeAttributes();
+    private get strokeDrawPositions();
+    private get strokeDasharray();
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { TDrawerPlacement } from './bq-drawer.types';
+import { TDrawerPlacement, TDrawerPosition } from './bq-drawer.types';
 /**
  * @part backdrop - The `<div>` that holds the backdrop overlay
  * @part button-close - The button that close the dialog on click
@@ -16,18 +16,25 @@ export declare class BqDrawer {
     el: HTMLBqDrawerElement;
     private hasFooter;
     hasIcon: boolean;
-    /** If true, the drawer component will be shown */
-    open: boolean;
-    /** Defines the position of the drawer */
-    placement: TDrawerPlacement;
     /** If true, the backdrop overlay will be shown when the drawer opens */
     enableBackdrop: boolean;
-    /** If true, the dialog will not close when the [Esc] key is pressed */
-    closeOnEsc: boolean;
     /** If true, the drawer will not close when clicking outside the panel */
     closeOnClickOutside: boolean;
+    /** If true, the dialog will not close when the [Esc] key is pressed */
+    closeOnEsc: boolean;
+    /** If true, the drawer component will be shown */
+    open: boolean;
+    /** @deprecated Defines the position of the drawer */
+    placement: TDrawerPlacement;
+    /** Defines the position of the drawer */
+    position: TDrawerPosition;
     handleOpenChange(): Promise<void>;
-    checkPropValues(): void;
+    /**
+     * !⚠️ Delete this `@Watch()` once the deprecated `placement` property is removed
+     * We need to maintain retro-compatibility with the deprecated `placement` property
+     */
+    handlePlacementChange(): void;
+    handlePositionChange(): void;
     /** Callback handler to be called when the drawer is closed */
     bqClose: EventEmitter;
     /** Callback handler to be called when the drawer is opened */
@@ -37,7 +44,6 @@ export declare class BqDrawer {
     /** Callback handler to be called after the drawer has been closed */
     bqAfterClose: EventEmitter;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     handleMouseClick(event: MouseEvent): Promise<void>;
     handleKeyDown(event: KeyboardEvent): Promise<void>;
     /** Method to be called to hide the drawer component */
@@ -45,9 +51,10 @@ export declare class BqDrawer {
     /** Method to be called to show the drawer component */
     show(): Promise<void>;
     private handleFooterSlotChange;
-    private handleHide;
-    private handleShow;
+    private handleAfterHide;
+    private handleAfterShow;
     private handleTransitionEnd;
-    private getMoveTranslate;
+    private get isPositionStart();
+    private get isPositionEnd();
     render(): any;
 }

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

@@ -1,2 +1,4 @@
+export declare const DRAWER_POSITIONS: readonly ["start", "end"];
+export type TDrawerPosition = (typeof DRAWER_POSITIONS)[number];
 export declare const DRAWER_PLACEMENT: readonly ["left", "right"];
 export type TDrawerPlacement = (typeof DRAWER_PLACEMENT)[number];

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { FloatingUIPlacement } from '../../services/interfaces';
+import { Placement } from '../../services/interfaces';
 /**
  * @part base - The component's internal wrapper.
  * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel
@@ -17,7 +17,7 @@ export declare class BqDropdown {
     /** If true, the panel will remain open after a selection is made. */
     keepOpenOnSelect?: boolean;
     /** Position of the panel */
-    placement?: FloatingUIPlacement;
+    placement?: Placement;
     /** If true, the panel will be visible. */
     open?: boolean;
     /** When set, it will override the height of the dropdown panel */

package/dist/types/components/page-title/bq-page-title.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @part base - The inner container `<div>`of element that contains the base page title component.
+ * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.
+ * @part title-suffix - Defines the container that holds the title and any suffix content.
+ * @part back - The container `<div>` page title element that acts as back slot container.
+ * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.
+ * @part suffix - The `<div>` page title element that acts as suffix slot container.
+ * @part sub-title - The `<div>` page title element that acts as sub-title slot container.
+ */
+export declare class BqPageTitle {
+    private backNavigationElem;
+    private suffixElem;
+    private subTitleElem;
+    el: HTMLBqPageTitleElement;
+    private haveBackNavigation;
+    private hasSuffix;
+    private hasSubTitle;
+    private handleSlotChange;
+    render(): any;
+}

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

@@ -1,4 +1,4 @@
-import { FloatingUIPlacement } from '../../services/interfaces';
+import { Placement } from '../../services/interfaces';
 /**
  * @part panel - The `<div>` element used to display and style the panel
  */
@@ -10,7 +10,7 @@ export declare class BqPanel {
     /** Represents the distance (gutter or margin) between the panel and the trigger element. */
     distance?: number;
     /** Position of the panel */
-    placement?: FloatingUIPlacement;
+    placement?: Placement;
     /** If true, the panel will be visible. */
     open?: boolean;
     /** Whether the panel should have the same width as the trigger element */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { FloatingUIPlacement } from '../../services/interfaces';
+import { Placement } from '../../services/interfaces';
 import { TInputValidation } from '../input/bq-input.types';
 export type TSelectValue = string | string[];
 /**
@@ -73,7 +73,7 @@ export declare class BqSelect {
     /** The Select input placeholder text value */
     placeholder?: string;
     /** Position of the Select panel */
-    placement?: FloatingUIPlacement;
+    placement?: Placement;
     /** 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. */

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

@@ -15,11 +15,12 @@ export declare class BqStepItem {
     /** It defines the step item type used */
     type?: TStepsType;
     checkPropValues(): void;
+    /** Callback handler emitted when the step item is clicked */
     bqClick: EventEmitter<{
         target: HTMLBqStepItemElement;
         value: string;
     }>;
-    componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
     private get isDisabled();
     private get isCurrent();

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

@@ -1,4 +1,4 @@
-import { FloatingUIPlacement } from '../../services/interfaces';
+import { Placement } from '../../services/interfaces';
 /**
  * @part base - The component wrapper container inside the shadow DOM
  * @part trigger - The `<div>` container that holds the element which displays tooltip on hover
@@ -16,7 +16,7 @@ export declare class BqTooltip {
     distance?: number;
     /** If true, the arrow on the tooltip content won't be shown */
     hideArrow?: boolean;
-    placement?: FloatingUIPlacement;
+    placement?: Placement;
     /** Whether the tooltip should have the same width as the trigger element
      * (applicable only for content shorter than the trigger element) */
     sameWidth?: boolean;