feat(bq-date-picker): extend component with custom calendar views

Author: vela-paul

packages/beeq/src/components.d.ts

@@ -766,6 +766,8 @@ export namespace Components {
      * @attr {"single" | "multi" | "range"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.
      * @attr {"error" | "none" | "success" | "warning"} validation-status - The validation status of the Select input.
      * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
+     * @attr {boolean} allowHeaderViewToggle - Enable custom header to toggle views.
+     * @attr {"day" | "month" | "year" | "decade" } calendarView - Panel type  when the panel opens.
      * @method clear - Clears the selected value.
      * @event bqBlur - Callback handler emitted when the input loses focus.
      * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
@@ -796,10 +798,19 @@ export namespace Components {
      * @cssprop --bq-date-picker--text-size - Date picker text size.
      */
     interface BqDatePicker {
+        /**
+          * Enable custom header to toggle views
+          * @default false
+         */
+        "allowHeaderViewToggle": boolean;
         /**
           * If `true`, the Date picker input will be focused on component render
          */
         "autofocus": boolean;
+        /**
+          * @default 'days'
+         */
+        "calendarView": 'days' | 'months' | 'years' | 'decades';
         /**
           * Clears the selected value.
           * @return 
@@ -3833,6 +3844,8 @@ declare global {
      * @attr {"single" | "multi" | "range"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.
      * @attr {"error" | "none" | "success" | "warning"} validation-status - The validation status of the Select input.
      * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
+     * @attr {boolean} allowHeaderViewToggle - Enable custom header to toggle views.
+     * @attr {"day" | "month" | "year" | "decade" } calendarView - Panel type  when the panel opens.
      * @method clear - Clears the selected value.
      * @event bqBlur - Callback handler emitted when the input loses focus.
      * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
@@ -6160,6 +6173,8 @@ declare namespace LocalJSX {
      * @attr {"single" | "multi" | "range"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.
      * @attr {"error" | "none" | "success" | "warning"} validation-status - The validation status of the Select input.
      * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
+     * @attr {boolean} allowHeaderViewToggle - Enable custom header to toggle views.
+     * @attr {"day" | "month" | "year" | "decade" } calendarView - Panel type  when the panel opens.
      * @method clear - Clears the selected value.
      * @event bqBlur - Callback handler emitted when the input loses focus.
      * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
@@ -6190,10 +6205,19 @@ declare namespace LocalJSX {
      * @cssprop --bq-date-picker--text-size - Date picker text size.
      */
     interface BqDatePicker {
+        /**
+          * Enable custom header to toggle views
+          * @default false
+         */
+        "allowHeaderViewToggle"?: boolean;
         /**
           * If `true`, the Date picker input will be focused on component render
          */
         "autofocus"?: boolean;
+        /**
+          * @default 'days'
+         */
+        "calendarView"?: 'days' | 'months' | 'years' | 'decades';
         /**
           * The clear button aria label
           * @default 'Clear value'
@@ -9211,6 +9235,8 @@ declare module "@stencil/core" {
              * @attr {"single" | "multi" | "range"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.
              * @attr {"error" | "none" | "success" | "warning"} validation-status - The validation status of the Select input.
              * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
+             * @attr {boolean} allowHeaderViewToggle - Enable custom header to toggle views.
+             * @attr {"day" | "month" | "year" | "decade" } calendarView - Panel type  when the panel opens.
              * @method clear - Clears the selected value.
              * @event bqBlur - Callback handler emitted when the input loses focus.
              * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.

packages/beeq/src/components/date-picker/__tests__/bq-date-picker.e2e.ts

@@ -73,4 +73,52 @@ describe('bq-date-picker', () => {
 
     expect(calendarMonthElement.length).toEqual(4);
   });
+
+  it('should toggle views when heading is clicked if allow-header-view-toggle is true', async () => {
+    const page = await newE2EPage({
+      html: '<bq-date-picker open allow-header-view-toggle calendarView="days"></bq-date-picker>',
+    });
+
+    const headingBtn = await page.find('bq-date-picker >>> .bq-date-picker__heading-btn');
+    expect(headingBtn).not.toBeNull();
+    // Initially: days grid exists
+    let dayGridMonth = await page.find('bq-date-picker >>> calendar-month');
+    expect(dayGridMonth).not.toBeNull();
+
+    // Click 1 → months
+    await headingBtn.click();
+    await page.waitForChanges();
+    let monthsContainer = await page.find('bq-date-picker >>> .bq-date-picker_custom_container');
+    dayGridMonth = await page.find('bq-date-picker >>> calendar-month');
+    expect(monthsContainer).not.toBeNull();
+    expect(dayGridMonth).toBeNull();
+
+    // Click 2 → years
+    await headingBtn.click();
+    await page.waitForChanges();
+    const yearsContainer = await page.find('bq-date-picker >>> .bq-date-picker_custom_container');
+    expect(yearsContainer).not.toBeNull();
+
+    // Click 3 → decades
+    await headingBtn.click();
+    await page.waitForChanges();
+    const decadesContainer = await page.find('bq-date-picker >>> .bq-date-picker_custom_container');
+    expect(decadesContainer).not.toBeNull();
+  });
+
+  it('should not toggle views when heading is clicked if allow-header-view-toggle is false', async () => {
+    const page = await newE2EPage({ html: '<bq-date-picker open calendarView="days"></bq-date-picker>' });
+
+    const headingBtn = await page.find('bq-date-picker >>> .bq-date-picker__heading-btn');
+    expect(await headingBtn.getProperty('disabled')).toBe(true);
+
+    const dayGridMonth = await page.find('bq-date-picker >>> calendar-month');
+    expect(dayGridMonth).not.toBeNull();
+
+    await headingBtn.click();
+    await page.waitForChanges();
+
+    const stillDayGrid = await page.find('bq-date-picker >>> calendar-month');
+    expect(stillDayGrid).not.toBeNull();
+  });
 });

packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx

@@ -53,6 +53,12 @@ const meta: Meta = {
     'show-outside-days': { control: 'boolean' },
     skidding: { control: 'number' },
     strategy: { control: 'select', options: ['fixed', 'absolute'] },
+
+    allowHeaderViewToggle: { control: 'boolean' },
+    calendarView: {
+      control: 'select',
+      options: ['days', 'months', 'years', 'decades'],
+    },
     tentative: { control: 'text' },
     type: { control: 'select', options: [...DATE_PICKER_TYPE] },
     'validation-status': { control: 'select', options: [...INPUT_VALIDATION] },
@@ -96,6 +102,8 @@ const meta: Meta = {
     'show-outside-days': false,
     skidding: 0,
     strategy: 'absolute',
+    allowHeaderViewToggle: true,
+    calendarView: 'days',
     tentative: undefined,
     type: 'single',
     'validation-status': 'none',
@@ -179,6 +187,8 @@ const Template = (args: Args) => {
       ?show-outside-days=${args['show-outside-days']}
       skidding=${ifDefined(args.skidding)}
       strategy=${ifDefined(args.strategy)}
+      .allowHeaderViewToggle=${args.allowHeaderViewToggle}
+      .calendarView=${args.calendarView}
       tentative=${ifDefined(args.tentative)}
       type=${ifDefined(args.type)}
       validation-status=${ifDefined(args['validation-status'])}