chore(deps): update Stencil output targets (#1377)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

package.json

@@ -79,11 +79,11 @@
     "@nxext/stencil": "20.0.6",
     "@rollup/plugin-url": "8.0.2",
     "@schematics/angular": "18.2.12",
-    "@stencil/angular-output-target": "0.10.0",
+    "@stencil/angular-output-target": "0.10.1",
     "@stencil/core": "4.23.0",
-    "@stencil/react-output-target": "0.7.4",
+    "@stencil/react-output-target": "0.8.0",
     "@stencil/sass": "3.0.12",
-    "@stencil/vue-output-target": "0.9.0",
+    "@stencil/vue-output-target": "0.9.1",
     "@storybook/addon-a11y": "8.4.7",
     "@storybook/addon-actions": "8.4.7",
     "@storybook/addon-docs": "8.4.7",

packages/beeq/src/components.d.ts

@@ -716,6 +716,7 @@ export namespace Components {
      * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
      * @attr {Intl.DateTimeFormatOptions} format-options - 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
      * @attr {string} form - The ID of the form that the Date picker input belongs to.
+     * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
      * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
      * @attr {Intl.LocalesArgument} locale - 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
      * @attr {string} max - The latest date that can be selected.
@@ -797,6 +798,10 @@ export namespace Components {
           * The ID of the form that the Date picker input belongs to.
          */
         "form"?: string;
+        /**
+          * The native form validation message (mandatory if `required` is set)
+         */
+        "formValidationMessage"?: string;
         /**
           * 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
          */
@@ -3571,6 +3576,7 @@ declare global {
      * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
      * @attr {Intl.DateTimeFormatOptions} format-options - 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
      * @attr {string} form - The ID of the form that the Date picker input belongs to.
+     * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
      * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
      * @attr {Intl.LocalesArgument} locale - 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
      * @attr {string} max - The latest date that can be selected.
@@ -5849,6 +5855,7 @@ declare namespace LocalJSX {
      * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
      * @attr {Intl.DateTimeFormatOptions} format-options - 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
      * @attr {string} form - The ID of the form that the Date picker input belongs to.
+     * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
      * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
      * @attr {Intl.LocalesArgument} locale - 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
      * @attr {string} max - The latest date that can be selected.
@@ -5924,6 +5931,10 @@ declare namespace LocalJSX {
           * The ID of the form that the Date picker input belongs to.
          */
         "form"?: string;
+        /**
+          * The native form validation message (mandatory if `required` is set)
+         */
+        "formValidationMessage"?: string;
         /**
           * 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
          */
@@ -8668,6 +8679,7 @@ declare module "@stencil/core" {
              * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
              * @attr {Intl.DateTimeFormatOptions} format-options - 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
              * @attr {string} form - The ID of the form that the Date picker input belongs to.
+             * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
              * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
              * @attr {Intl.LocalesArgument} locale - 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
              * @attr {string} max - The latest date that can be selected.

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

@@ -11,7 +11,7 @@ import {
   TButtonType,
   TButtonVariant,
 } from './bq-button.types';
-import { hasSlotContent, isDefined, isNil, validatePropValue } from '../../shared/utils';
+import { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';
 
 /**
  * Buttons are designed for users to take action on a page or a screen.
@@ -239,7 +239,7 @@ export class BqButton {
   });
 
   private submitAssociatedForm = (form: HTMLFormElement) => {
-    if (typeof window === 'undefined' || isNil(form)) return;
+    if (!isClient() || isNil(form)) return;
 
     const btn = document.createElement('button');
     btn.type = this.type;

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

@@ -381,9 +381,10 @@ export const WithForm: Story = {
                 <label class="flex flex-grow items-center" slot="label">Passport number</label>
               </bq-input>
               <bq-date-picker
-                name="passportExpDate"
-                value="2024-05-20"
+                name="passportExpiration"
+                value="2034-05-20"
                 placeholder="Select a date"
+                form-validation-message="Please, you must provide your passport expiration date"
                 type="single"
                 required
               >
@@ -393,6 +394,7 @@ export const WithForm: Story = {
             <bq-date-picker
               name="tripDate"
               placeholder="Select a start and end date for your travel"
+              form-validation-message="Please, tell us when you are planning to travel"
               value="2024-12-25/2025-01-10"
               type="range"
               months="2"

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

@@ -17,6 +17,7 @@ import { DATE_PICKER_TYPE, DaysOfWeek, TDatePickerType } from './bq-date-picker.
 import { Placement } from '../../services/interfaces';
 import {
   hasSlotContent,
+  isClient,
   isDefined,
   isEventTargetChildOfElement,
   isHTMLElement,
@@ -64,6 +65,7 @@ import { TInputValidation } from '../input/bq-input.types';
  * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
  * @attr {Intl.DateTimeFormatOptions} format-options - 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
  * @attr {string} form - The ID of the form that the Date picker input belongs to.
+ * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
  * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
  * @attr {Intl.LocalesArgument} locale - 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
  * @attr {string} max - The latest date that can be selected.
@@ -226,6 +228,9 @@ export class BqDatePicker {
   /** The ID of the form that the Date picker input belongs to. */
   @Prop({ reflect: true }) form?: string;
 
+  /** The native form validation message (mandatory if `required` is set) */
+  @Prop({ mutable: true }) formValidationMessage?: string;
+
   /** A function that takes a date and returns true if the date should not be selectable */
   @Prop({ reflect: true }) isDateDisallowed?: (date: Date) => boolean;
 
@@ -305,7 +310,9 @@ export class BqDatePicker {
   @Watch('value')
   handleValueChange() {
     const { formatDisplayValue, internals, value } = this;
+
     internals.setFormValue(!isNil(value) ? `${value}` : undefined);
+    this.updateFormValidity();
 
     if (Array.isArray(value)) {
       this.hasValue = value.some((val) => val.length > 0);
@@ -346,10 +353,20 @@ export class BqDatePicker {
   // Ordered by their natural call order
   // =====================================
 
+  async connectedCallback() {
+    if (!isClient()) return;
+
+    await import('cally');
+  }
+
   componentWillLoad() {
     this.handleValueChange();
   }
 
+  formAssociatedCallback() {
+    this.updateFormValidity();
+  }
+
   formResetCallback() {
     if (isNil(this.value)) return;
 
@@ -560,6 +577,24 @@ export class BqDatePicker {
     return dateFormatter.format(new Date(value));
   };
 
+  private updateFormValidity = () => {
+    const { formValidationMessage, internals, required, value, inputElem } = this;
+
+    // Clear the validity state
+    internals?.states.clear();
+
+    if (required && (!value || value.toString().trim() === '')) {
+      // Set validity state to invalid
+      internals?.states.add('invalid');
+      internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);
+      return;
+    }
+
+    // Set validity state to valid if textarea has value or is not required
+    internals?.states.add('valid');
+    internals?.setValidity({});
+  };
+
   private get CalendarType() {
     const componentTypes = {
       single: 'calendar-date',