feat(ng): add new prop auto-invalid-off

baloise · Jan 4, 2024 · 10bfce0 · 10bfce0
1 parent d300406
commit 10bfce0
Show file tree

Hide file tree

Showing 17 changed files with 196 additions and 4 deletions.
diff --git a/.changeset/nice-pandas-allow.md b/.changeset/nice-pandas-allow.md
@@ -0,0 +1,7 @@
+---
+'@baloise/design-system-output-target-angular': minor
+'@baloise/design-system-components-angular': minor
+'@baloise/design-system-components': minor
+---
+
+Introduce a new property `auto-invalid-off` to exclude a form control in Angular reactive forms from being visibly set as invalid.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -462,6 +462,10 @@ export namespace Components {
         "value"?: string | number;
     }
     interface BalCheckbox {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * If `true`, the checkbox is selected.
          */
@@ -567,6 +571,10 @@ export namespace Components {
         "setChecked": (checked?: boolean) => Promise<void>;
     }
     interface BalCheckboxGroup {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Defines the column size like the grid.
          */
@@ -702,6 +710,10 @@ export namespace Components {
           * Callback to determine which date in the datepicker should be selectable.
          */
         "allowedDates": BalProps.BalDateCallback | undefined;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Closes the accordion
          */
@@ -846,6 +858,10 @@ export namespace Components {
           * Callback to determine which date in the datepicker should be selectable.
          */
         "allowedDates": BalProps.BalDatepickerCallback | undefined;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Closes the popover
          */
@@ -1089,6 +1105,10 @@ export namespace Components {
           * Accepted MIME-Types like `image/png,image/jpeg`.
          */
         "accept"?: string;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Sets the file list to an empty list
          */
@@ -1316,6 +1336,10 @@ export namespace Components {
           * A regular expression that the key of the key press event is checked against and if not matching the expression the event will be prevented.
          */
         "allowedKeyPress"?: string;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          */
@@ -1432,6 +1456,10 @@ export namespace Components {
         "value"?: string;
     }
     interface BalInputDate {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
          */
@@ -1507,6 +1535,10 @@ export namespace Components {
         "readonly": boolean;
     }
     interface BalInputSlider {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * The tabindex of the control.
          */
@@ -1566,6 +1598,10 @@ export namespace Components {
         "value"?: string | number;
     }
     interface BalInputStepper {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
@@ -2182,6 +2218,10 @@ export namespace Components {
         "color": BalProps.BalNotificationColor;
     }
     interface BalNumberInput {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
@@ -2569,6 +2609,10 @@ export namespace Components {
           * If `true`, the radios can be deselected.
          */
         "allowEmptySelection": boolean;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Defines the column size like the grid.
          */
@@ -2629,6 +2673,10 @@ export namespace Components {
         "verticalOnMobile": boolean;
     }
     interface BalSelect {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
          */
@@ -3233,6 +3281,10 @@ export namespace Components {
         "space": BalProps.BalTextSpace;
     }
     interface BalTextarea {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          */
@@ -3316,6 +3368,10 @@ export namespace Components {
         "wrap"?: BalProps.BalTextareaWrap;
     }
     interface BalTimeInput {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
@@ -5535,6 +5591,10 @@ declare namespace LocalJSX {
         "value"?: string | number;
     }
     interface BalCheckbox {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * If `true`, the checkbox is selected.
          */
@@ -5641,6 +5701,10 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
     }
     interface BalCheckboxGroup {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Defines the column size like the grid.
          */
@@ -5793,6 +5857,10 @@ declare namespace LocalJSX {
           * Callback to determine which date in the datepicker should be selectable.
          */
         "allowedDates"?: BalProps.BalDateCallback | undefined;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Closes the datepicker popover after selection
          */
@@ -5947,6 +6015,10 @@ declare namespace LocalJSX {
           * Callback to determine which date in the datepicker should be selectable.
          */
         "allowedDates"?: BalProps.BalDatepickerCallback | undefined;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Closes the datepicker popover after selection
          */
@@ -6191,6 +6263,10 @@ declare namespace LocalJSX {
           * Accepted MIME-Types like `image/png,image/jpeg`.
          */
         "accept"?: string;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
@@ -6410,6 +6486,10 @@ declare namespace LocalJSX {
           * A regular expression that the key of the key press event is checked against and if not matching the expression the event will be prevented.
          */
         "allowedKeyPress"?: string;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          */
@@ -6533,6 +6613,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface BalInputDate {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
          */
@@ -6614,6 +6698,10 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
     }
     interface BalInputSlider {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * The tabindex of the control.
          */
@@ -6684,6 +6772,10 @@ declare namespace LocalJSX {
         "value"?: string | number;
     }
     interface BalInputStepper {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
@@ -7334,6 +7426,10 @@ declare namespace LocalJSX {
         "color"?: BalProps.BalNotificationColor;
     }
     interface BalNumberInput {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
@@ -7729,6 +7825,10 @@ declare namespace LocalJSX {
           * If `true`, the radios can be deselected.
          */
         "allowEmptySelection"?: boolean;
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Defines the column size like the grid.
          */
@@ -7795,6 +7895,10 @@ declare namespace LocalJSX {
         "verticalOnMobile"?: boolean;
     }
     interface BalSelect {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
          */
@@ -8391,6 +8495,10 @@ declare namespace LocalJSX {
         "space"?: BalProps.BalTextSpace;
     }
     interface BalTextarea {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          */
@@ -8481,6 +8589,10 @@ declare namespace LocalJSX {
         "wrap"?: BalProps.BalTextareaWrap;
     }
     interface BalTimeInput {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */

diff --git a/packages/components/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx b/packages/components/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx
@@ -194,6 +194,11 @@ export class CheckboxGroup
     this.getCheckboxButtons().forEach(checkboxButton => (checkboxButton.colSizeMobile = value))
   }
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * Emitted when the checked property has changed.
    */

diff --git a/packages/components/src/components/bal-checkbox/bal-checkbox.tsx b/packages/components/src/components/bal-checkbox/bal-checkbox.tsx
@@ -114,6 +114,11 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
    */
   @Prop() required = false
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * @deprecated
    * Use non-submit instead

diff --git a/packages/components/src/components/bal-date/bal-date.tsx b/packages/components/src/components/bal-date/bal-date.tsx
@@ -161,6 +161,11 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking {
     this.balChange = debounceEvent(this.balChange, this.debounce)
   }
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * Emitted when a keyboard input occurred.
    */

diff --git a/packages/components/src/components/bal-datepicker/bal-datepicker.tsx b/packages/components/src/components/bal-datepicker/bal-datepicker.tsx
@@ -223,6 +223,11 @@ export class Datepicker
    */
   @Prop({ attribute: 'allowed-dates' }) allowedDates: BalProps.BalDatepickerCallback | undefined = undefined
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * Emitted when a option got selected.
    */

diff --git a/packages/components/src/components/bal-file-upload/bal-file-upload.tsx b/packages/components/src/components/bal-file-upload/bal-file-upload.tsx
@@ -126,6 +126,11 @@ export class FileUpload implements FormInput<File[]>, BalAriaFormLinking {
    */
   @Prop() subTitle?: (file: File) => string
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * Triggers when a file is added or removed.
    */

diff --git a/packages/components/src/components/bal-input-slider/bal-input-slider.tsx b/packages/components/src/components/bal-input-slider/bal-input-slider.tsx
@@ -85,6 +85,11 @@ export class InputSlider implements BalAriaFormLinking {
    */
   @Prop({ mutable: true }) value?: string | number = ''
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * Emitted when a keyboard input occurred.
    */

diff --git a/packages/components/src/components/bal-input-stepper/bal-input-stepper.tsx b/packages/components/src/components/bal-input-stepper/bal-input-stepper.tsx
@@ -110,6 +110,11 @@ export class InputStepper
   @Prop({ mutable: true }) value = 0
   private initialValue = 0
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * Emitted when the input value has changed.
    */