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

package.json

@@ -38,8 +38,8 @@
     "@angular/core": "20.2.3",
     "@angular/forms": "20.2.3",
     "@angular/router": "20.2.3",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
@@ -54,7 +54,7 @@
     "@babel/core": "7.28.0",
     "@babel/preset-react": "7.27.1",
     "@beeq/storybook-addon-html": "6.0.0",
-    "@biomejs/biome": "2.2.5",
+    "@biomejs/biome": "2.2.7",
     "@chromatic-com/storybook": "4.1.1",
     "@commitlint/cli": "19.8.1",
     "@commitlint/config-angular": "19.8.1",
@@ -92,8 +92,8 @@
     "@types/jest": "29.5.14",
     "@types/mdx": "2.0.13",
     "@types/node": "22.14.1",
-    "@types/react": "19.1.9",
-    "@types/react-dom": "19.1.7",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "@wc-toolkit/jsdoc-tags": "1.1.0",
     "@wc-toolkit/type-parser": "1.1.0",
     "autoprefixer": "10.4.21",

packages/beeq/src/components/button/scss/bq-button.scss

@@ -14,6 +14,13 @@
     @apply disabled:cursor-not-allowed disabled:opacity-60;
     // `FOCUS` state
     @apply focus-visible:focus;
+    // Internal workaround to allow overriding icon color via CSS variables from slotted bq-buttons
+    // @see: packages/beeq/src/components/side-menu/scss/bq-side-menu.scss
+    @apply [&_::slotted(bq-icon)]:[--bq-icon--color:_var(--bq-button--icon-color,_currentColor)];
+    // On hover, update the icon color if custom property is defined
+    &:hover:not(:disabled) ::slotted(bq-icon) {
+      --bq-icon--color: var(--bq-button-hover--icon-color, var(--bq-button--icon-color, currentColor));
+    }
   }
 }
 

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

@@ -73,4 +73,144 @@ describe('bq-date-picker', () => {
 
     expect(calendarMonthElement.length).toEqual(4);
   });
+
+  it('should clamp input value to min when below range', async () => {
+    const page = await newE2EPage({
+      html: '<bq-date-picker type="single" min="2024-05-20" max="2024-05-30"></bq-date-picker>',
+    });
+
+    await page.type('bq-date-picker >>> input', '2024-05-10');
+    await page.keyboard.press('Tab');
+    await page.waitForChanges();
+
+    const datePicker = await page.find('bq-date-picker');
+    const value = await datePicker.getProperty('value');
+    expect(value).toBe('2024-05-20');
+  });
+
+  it('should clamp input value to max when above range', async () => {
+    const page = await newE2EPage({
+      html: '<bq-date-picker type="single" min="2024-05-20" max="2024-05-30"></bq-date-picker>',
+    });
+
+    await page.type('bq-date-picker >>> input', '2024-06-10');
+    await page.keyboard.press('Tab');
+    await page.waitForChanges();
+
+    const datePicker = await page.find('bq-date-picker');
+    const value = await datePicker.getProperty('value');
+    expect(value).toBe('2024-05-30');
+  });
+
+  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();
+    const 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();
+  });
+
+  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();
+  });
+
+  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();
+    const 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'])}