@beeq/angular 1.12.4 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeq/angular",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "license": "Apache-2.0",
   "description": "Angular specific wrapper for BEEQ Design System components",
   "main": "dist/esm2015/index.js",

package/types/beeq-angular-standalone.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ElementRef, NgZone, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { BqAccordionCustomEvent, Components, BqAlertCustomEvent, BqBreadcrumbItemCustomEvent, BqButtonCustomEvent, BqCheckboxCustomEvent, BqDatePickerCustomEvent, BqDialogCustomEvent, BqDrawerCustomEvent, BqDropdownCustomEvent, BqIconCustomEvent, BqInputCustomEvent, BqNotificationCustomEvent, BqOptionCustomEvent, BqOptionListCustomEvent, BqRadioCustomEvent, BqRadioGroupCustomEvent, BqSelectCustomEvent, BqSideMenuCustomEvent, BqSideMenuItemCustomEvent, BqSliderCustomEvent, TSliderValue, BqStepItemCustomEvent, BqSwitchCustomEvent, BqTabCustomEvent, BqTabGroupCustomEvent, BqTagCustomEvent, BqTextareaCustomEvent, BqToastCustomEvent, BqTooltipCustomEvent } from '@beeq/core/dist/components';
+import { BqAccordionCustomEvent, Components, BqAlertCustomEvent, BqBreadcrumbItemCustomEvent, BqButtonCustomEvent, BqCheckboxCustomEvent, BqDatePickerCustomEvent, TCalendarView, BqDialogCustomEvent, BqDrawerCustomEvent, BqDropdownCustomEvent, BqIconCustomEvent, BqInputCustomEvent, BqNotificationCustomEvent, BqOptionCustomEvent, BqOptionListCustomEvent, BqRadioCustomEvent, BqRadioGroupCustomEvent, BqSelectCustomEvent, BqSideMenuCustomEvent, BqSideMenuItemCustomEvent, BqSliderCustomEvent, TSliderValue, BqStepItemCustomEvent, BqSwitchCustomEvent, BqTabCustomEvent, BqTabGroupCustomEvent, BqTagCustomEvent, BqTextareaCustomEvent, BqToastCustomEvent, BqTooltipCustomEvent } from '@beeq/core/dist/components';
 
 declare class ValueAccessor implements ControlValueAccessor {
     protected el: ElementRef;
@@ -250,36 +250,47 @@ declare class BqDatePicker {
     protected el: HTMLBqDatePickerElement;
     bqBlur: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     bqChange: EventEmitter<BqDatePickerCustomEvent<{
-        value: string;
+        value: string | undefined;
         el: HTMLBqDatePickerElement;
     }>>;
     bqClear: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     bqFocus: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
+    bqViewChange: EventEmitter<BqDatePickerCustomEvent<{
+        view: TCalendarView;
+        el: HTMLBqDatePickerElement;
+    }>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqDatePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqDatePicker, "bq-date-picker", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "isDateDisallowed": { "alias": "isDateDisallowed"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "months": { "alias": "months"; "required": false; }; "monthsPerView": { "alias": "monthsPerView"; "required": false; }; "name": { "alias": "name"; "required": true; }; "open": { "alias": "open"; "required": false; }; "panelHeight": { "alias": "panelHeight"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "required": { "alias": "required"; "required": false; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "tentative": { "alias": "tentative"; "required": false; }; "type": { "alias": "type"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "bqBlur": "bqBlur"; "bqChange": "bqChange"; "bqClear": "bqClear"; "bqFocus": "bqFocus"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqDatePicker, "bq-date-picker", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "calendarButtonLabel": { "alias": "calendarButtonLabel"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "initialView": { "alias": "initialView"; "required": false; }; "isDateDisallowed": { "alias": "isDateDisallowed"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "months": { "alias": "months"; "required": false; }; "monthsPerView": { "alias": "monthsPerView"; "required": false; }; "name": { "alias": "name"; "required": true; }; "open": { "alias": "open"; "required": false; }; "panelHeight": { "alias": "panelHeight"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "required": { "alias": "required"; "required": false; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "type": { "alias": "type"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "bqBlur": "bqBlur"; "bqChange": "bqChange"; "bqClear": "bqClear"; "bqFocus": "bqFocus"; "bqViewChange": "bqViewChange"; }, never, ["*"], true, never>;
 }
 declare interface BqDatePicker extends Components.BqDatePicker {
     /**
-     * Callback handler emitted when the input loses focus
+     * Callback handler emitted when the input loses focus.
      */
     bqBlur: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     /**
-     * Callback handler emitted when the input value has changed and the input loses focus.
-  This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.
+     * Callback handler emitted when the input value changes.
      */
     bqChange: EventEmitter<BqDatePickerCustomEvent<{
-        value: string;
+        value: string | undefined;
         el: HTMLBqDatePickerElement;
     }>>;
     /**
-     * Callback handler emitted when the input value has been cleared
+     * Callback handler emitted when the value is cleared.
      */
     bqClear: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     /**
-     * Callback handler emitted when the input has received focus
+     * Callback handler emitted when the input receives focus.
      */
     bqFocus: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
+    /**
+     * Callback handler emitted when the internal calendar view changes
+  (e.g. from `days` to `months`, or from `years` back to `days`).
+     */
+    bqViewChange: EventEmitter<BqDatePickerCustomEvent<{
+        view: TCalendarView;
+        el: HTMLBqDatePickerElement;
+    }>>;
 }
 declare class BqDialog {
     protected z: NgZone;

package/types/beeq-angular.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ElementRef, NgZone, EventEmitter, ChangeDetectorRef, ModuleWithProviders } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { Components, BqAccordionCustomEvent, BqAlertCustomEvent, BqBreadcrumbItemCustomEvent, BqButtonCustomEvent, BqCheckboxCustomEvent, BqDatePickerCustomEvent, BqDialogCustomEvent, BqDrawerCustomEvent, BqDropdownCustomEvent, BqIconCustomEvent, BqInputCustomEvent, BqNotificationCustomEvent, BqOptionCustomEvent, BqOptionListCustomEvent, BqRadioCustomEvent, BqRadioGroupCustomEvent, BqSelectCustomEvent, BqSideMenuCustomEvent, BqSideMenuItemCustomEvent, BqSliderCustomEvent, TSliderValue, BqStepItemCustomEvent, BqSwitchCustomEvent, BqTabCustomEvent, BqTabGroupCustomEvent, BqTagCustomEvent, BqTextareaCustomEvent, BqToastCustomEvent, BqTooltipCustomEvent } from '@beeq/core';
+import { Components, BqAccordionCustomEvent, BqAlertCustomEvent, BqBreadcrumbItemCustomEvent, BqButtonCustomEvent, BqCheckboxCustomEvent, BqDatePickerCustomEvent, TCalendarView, BqDialogCustomEvent, BqDrawerCustomEvent, BqDropdownCustomEvent, BqIconCustomEvent, BqInputCustomEvent, BqNotificationCustomEvent, BqOptionCustomEvent, BqOptionListCustomEvent, BqRadioCustomEvent, BqRadioGroupCustomEvent, BqSelectCustomEvent, BqSideMenuCustomEvent, BqSideMenuItemCustomEvent, BqSliderCustomEvent, TSliderValue, BqStepItemCustomEvent, BqSwitchCustomEvent, BqTabCustomEvent, BqTabGroupCustomEvent, BqTagCustomEvent, BqTextareaCustomEvent, BqToastCustomEvent, BqTooltipCustomEvent } from '@beeq/core';
 import * as i7 from '@angular/common';
 
 declare class ValueAccessor implements ControlValueAccessor {
@@ -482,72 +482,80 @@ declare class BqDatePicker {
     protected z: NgZone;
     protected el: HTMLBqDatePickerElement;
     /**
-   * If `true`, the Date picker input will be focused on component render
+   * If `true`, the Date picker input will be focused on component render. @default false
    */
     set autofocus(_: Components.BqDatePicker['autofocus']);
     /**
-   * The clear button aria label @default 'Clear value'
+   * The clear button aria label. @default 'Clear value'
    */
     set clearButtonLabel(_: Components.BqDatePicker['clearButtonLabel']);
     /**
-   * If `true`, the clear button won't be displayed @default false
+   * The aria-label for the calendar trigger button. @default 'Open calendar'
+   */
+    set calendarButtonLabel(_: Components.BqDatePicker['calendarButtonLabel']);
+    /**
+   * If `true`, the clear button won't be displayed. @default false
    */
     set disableClear(_: Components.BqDatePicker['disableClear']);
     /**
-   * Indicates whether the Date picker input is disabled or not.
-If `true`, the Date picker is disabled and cannot be interacted with. @default false
+   * Indicates whether the Date picker input is disabled or not. @default false
    */
     set disabled(_: Components.BqDatePicker['disabled']);
     /**
-   * Represents the distance (gutter or margin) between the Date picker panel and the input element. @default 8
+   * Distance (gutter) between the Date picker panel and the input element. @default 8
    */
     set distance(_: Components.BqDatePicker['distance']);
     /**
-   * The first day of the week, where Sunday is 0, Monday is 1, etc @default 1
+   * The first day of the week, where Sunday is 0, Monday is 1, etc. @default 1
    */
     set firstDayOfWeek(_: Components.BqDatePicker['firstDayOfWeek']);
     /**
-   * The options to use when formatting the displayed value.
-Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options @default {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  }
+   * Options used when formatting the displayed value.
+
+When omitted, sensible defaults are picked based on `precision`:
+- `day`   → `{ day: 'numeric', month: 'short', year: 'numeric' }`
+- `month` → `{ month: 'long', year: 'numeric' }`
+- `year`  → `{ year: 'numeric' }`
    */
     set formatOptions(_: Components.BqDatePicker['formatOptions']);
     /**
-   * The ID of the form that the Date picker input belongs to.
+   * The ID of the form the input belongs to.
    */
     set form(_: Components.BqDatePicker['form']);
     /**
-   * The native form validation message (mandatory if `required` is set)
+   * Native form validation message (mandatory if `required` is set).
    */
     set formValidationMessage(_: Components.BqDatePicker['formValidationMessage']);
     /**
-   * A function that takes a date and returns true if the date should not be selectable
+   * The view opened first when the panel becomes visible. @default 'days'
+   */
+    set initialView(_: Components.BqDatePicker['initialView']);
+    /**
+   * Predicate that marks specific dates as unselectable.
    */
     set isDateDisallowed(_: Components.BqDatePicker['isDateDisallowed']);
     /**
-   * The locale for formatting dates. If not set, will use the browser's locale.
-Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument @default 'en-GB'
+   * Locale used for formatting dates. @default 'en-GB'
    */
     set locale(_: Components.BqDatePicker['locale']);
     /**
-   * The latest date that can be selected
+   * Latest date that can be selected (ISO).
    */
     set max(_: Components.BqDatePicker['max']);
     /**
-   * The earliest date that can be selected
+   * Earliest date that can be selected (ISO).
    */
     set min(_: Components.BqDatePicker['min']);
     /**
-   * Number of months to show when range is `true`
+   * Number of months to show side by side (range / multi). Capped at 2.
+Larger values are silently clamped to keep the popover from overflowing
+the viewport and to preserve keyboard navigation semantics. @default 1
    */
     set months(_: Components.BqDatePicker['months']);
     /**
-   * 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. @default 'single'
+   * How the next/previous buttons should navigate the calendar.
+- single: navigate one month at a time.
+- months: navigate by the number of months displayed. @default 'single'
    */
     set monthsPerView(_: Components.BqDatePicker['monthsPerView']);
     /**
@@ -555,90 +563,114 @@ Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Globa
    */
     set name(_: Components.BqDatePicker['name']);
     /**
-   * If `true`, the Date picker panel will be visible. @default false
+   * If `true`, the panel is visible. @default false
    */
     set open(_: Components.BqDatePicker['open']);
     /**
-   * When set, it will override the height of the Date picker panel. @default 'auto'
+   * Overrides the height of the Date picker panel. @default 'auto'
    */
     set panelHeight(_: Components.BqDatePicker['panelHeight']);
     /**
-   * The Date picker input placeholder text value
+   * Placeholder text shown when no value is selected.
    */
     set placeholder(_: Components.BqDatePicker['placeholder']);
     /**
-   * Position of the Date picker panel @default 'bottom-end'
+   * Position of the Date picker panel. @default 'bottom-end'
    */
     set placement(_: Components.BqDatePicker['placement']);
     /**
-   * Indicates whether or not the Date picker input is required to be filled out before submitting the form.
+   * Precision of the value produced by the picker.
+
+- `day`   → `YYYY-MM-DD` (default). Standard drill-down.
+- `month` → `YYYY-MM`. Selection commits on the months view; no days view.
+- `year`  → `YYYY`. Selection commits on the years view; no months/days view.
+
+When precision is coarser than day, `initialView` is forced to match and
+the header title cycles through the views available for that precision. @default 'day'
+   */
+    set precision(_: Components.BqDatePicker['precision']);
+    /**
+   * Whether a value must be selected before submitting the form. @default false
    */
     set required(_: Components.BqDatePicker['required']);
     /**
-   * Represents the skidding between the Date picker panel and the input element. @default 0
+   * Skidding between the panel and the input element. @default 0
    */
     set skidding(_: Components.BqDatePicker['skidding']);
     /**
-   * Whether to show days outside the month @default false
+   * Whether to render days outside the current month. @default false
    */
     set showOutsideDays(_: Components.BqDatePicker['showOutsideDays']);
     /**
-   * Defines the strategy to position the Date picker panel @default 'fixed'
+   * Positioning strategy for the panel. @default 'fixed'
    */
     set strategy(_: Components.BqDatePicker['strategy']);
     /**
-   * The date that is tentatively selected e.g. the start of a range selection
-   */
-    set tentative(_: Components.BqDatePicker['tentative']);
-    /**
-   * It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection @default 'single'
+   * Selection type.
+- `single`: single date.
+- `multi`: multiple discrete dates.
+- `range`: contiguous range. @default 'single'
    */
     set type(_: Components.BqDatePicker['type']);
     /**
-   * The validation status of the Select input. @remarks This property is used to indicate the validation status of the select input. It can be set to one of the following values:
-- `'none'`: No validation status is set.
-- `'error'`: The input has a validation error.
-- `'warning'`: The input has a validation warning.
-- `'success'`: The input has passed validation.,@default 'none'
+   * Validation state applied to the input. @default 'none'
    */
     set validationStatus(_: Components.BqDatePicker['validationStatus']);
     /**
-   * The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
-All dates are expected in ISO-8601 format (YYYY-MM-DD).
+   * Currently selected value, in the precision-aware wire format:
+- `precision="day"`   → tokens are `YYYY-MM-DD`
+- `precision="month"` → tokens are `YYYY-MM`
+- `precision="year"`  → tokens are `YYYY`
+
+How multiple tokens are combined depends on `type`:
+- `single` → a single token (e.g. `"2025-05-15"`, `"2025-05"`, `"2025"`)
+- `range`  → `"start/end"` — two tokens joined with `/`
+- `multi`  → space-separated tokens (e.g. `"2025-05-15 2025-05-20"`)
    */
     set value(_: Components.BqDatePicker['value']);
     bqBlur: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     bqChange: EventEmitter<BqDatePickerCustomEvent<{
-        value: string;
+        value: string | undefined;
         el: HTMLBqDatePickerElement;
     }>>;
     bqClear: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     bqFocus: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
+    bqViewChange: EventEmitter<BqDatePickerCustomEvent<{
+        view: TCalendarView;
+        el: HTMLBqDatePickerElement;
+    }>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqDatePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqDatePicker, "bq-date-picker", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "isDateDisallowed": { "alias": "isDateDisallowed"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "months": { "alias": "months"; "required": false; }; "monthsPerView": { "alias": "monthsPerView"; "required": false; }; "name": { "alias": "name"; "required": true; }; "open": { "alias": "open"; "required": false; }; "panelHeight": { "alias": "panelHeight"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "required": { "alias": "required"; "required": false; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "tentative": { "alias": "tentative"; "required": false; }; "type": { "alias": "type"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "bqBlur": "bqBlur"; "bqChange": "bqChange"; "bqClear": "bqClear"; "bqFocus": "bqFocus"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqDatePicker, "bq-date-picker", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "calendarButtonLabel": { "alias": "calendarButtonLabel"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "initialView": { "alias": "initialView"; "required": false; }; "isDateDisallowed": { "alias": "isDateDisallowed"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "months": { "alias": "months"; "required": false; }; "monthsPerView": { "alias": "monthsPerView"; "required": false; }; "name": { "alias": "name"; "required": true; }; "open": { "alias": "open"; "required": false; }; "panelHeight": { "alias": "panelHeight"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "required": { "alias": "required"; "required": false; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "type": { "alias": "type"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "bqBlur": "bqBlur"; "bqChange": "bqChange"; "bqClear": "bqClear"; "bqFocus": "bqFocus"; "bqViewChange": "bqViewChange"; }, never, ["*"], false, never>;
 }
 declare interface BqDatePicker extends Components.BqDatePicker {
     /**
-     * Callback handler emitted when the input loses focus
+     * Callback handler emitted when the input loses focus.
      */
     bqBlur: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     /**
-     * Callback handler emitted when the input value has changed and the input loses focus.
-  This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.
+     * Callback handler emitted when the input value changes.
      */
     bqChange: EventEmitter<BqDatePickerCustomEvent<{
-        value: string;
+        value: string | undefined;
         el: HTMLBqDatePickerElement;
     }>>;
     /**
-     * Callback handler emitted when the input value has been cleared
+     * Callback handler emitted when the value is cleared.
      */
     bqClear: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
     /**
-     * Callback handler emitted when the input has received focus
+     * Callback handler emitted when the input receives focus.
      */
     bqFocus: EventEmitter<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
+    /**
+     * Callback handler emitted when the internal calendar view changes
+  (e.g. from `days` to `months`, or from `years` back to `days`).
+     */
+    bqViewChange: EventEmitter<BqDatePickerCustomEvent<{
+        view: TCalendarView;
+        el: HTMLBqDatePickerElement;
+    }>>;
 }
 declare class BqDialog {
     protected z: NgZone;