feature core/input: validation in input components #2278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

1307-Dev wants to merge 50 commits into siemens:main from 1307-Dev:(feature/core)validation-input-components

packages/angular/src/components.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -401,7 +401,8 @@ export declare interface IxCategoryFilter extends Components.IxCategoryFilter {
  
    @ProxyCmp({

      inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value']

      inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-checkbox',

    @@ -441,7 +442,8 @@ export declare interface IxCheckbox extends Components.IxCheckbox {
  
    @ProxyCmp({

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText']

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-checkbox-group',

    @@ -629,7 +631,7 @@ The event payload contains information about the selected date range.
  
    @ProxyCmp({

      inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-date-input',

    @@ -1326,7 +1328,7 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
  
    @ProxyCmp({

      inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'getValidityState', 'focusInput']

      methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-input',

    @@ -2003,7 +2005,7 @@ Can be prevented, in which case only the event is triggered, and the modal remai
  
    @ProxyCmp({

      inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-number-input',

    @@ -2214,7 +2216,8 @@ export declare interface IxPushCard extends Components.IxPushCard {}
  
    @ProxyCmp({

      inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value']

      inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-radio',

    @@ -2254,7 +2257,8 @@ export declare interface IxRadio extends Components.IxRadio {
  
    @ProxyCmp({

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText']

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-radio-group',

    @@ -2528,7 +2532,7 @@ export declare interface IxTabs extends Components.IxTabs {
  
    @ProxyCmp({

      inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-textarea',

    @@ -2592,7 +2596,7 @@ export declare interface IxTile extends Components.IxTile {}
  
    @ProxyCmp({

      inputs: ['disabled', 'enableTopLayer', 'format', 'helperText', 'hideHeader', 'hourInterval', 'i18nErrorTimeUnparsable', 'i18nHourColumnHeader', 'i18nMillisecondColumnHeader', 'i18nMinuteColumnHeader', 'i18nSecondColumnHeader', 'i18nSelectTime', 'i18nTime', 'infoText', 'invalidText', 'label', 'millisecondInterval', 'minuteInterval', 'name', 'placeholder', 'readonly', 'required', 'secondInterval', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-time-input',

packages/angular/standalone/src/components.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -502,7 +502,8 @@ export declare interface IxCategoryFilter extends Components.IxCategoryFilter {
  
    @ProxyCmp({

      defineCustomElementFn: defineIxCheckbox,

      inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value']

      inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-checkbox',

    @@ -542,7 +543,8 @@ export declare interface IxCheckbox extends Components.IxCheckbox {
  
    @ProxyCmp({

      defineCustomElementFn: defineIxCheckboxGroup,

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText']

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-checkbox-group',

    @@ -730,7 +732,7 @@ The event payload contains information about the selected date range.
  
    @ProxyCmp({

      defineCustomElementFn: defineIxDateInput,

      inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-date-input',

    @@ -1427,7 +1429,7 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
  
    @ProxyCmp({

      defineCustomElementFn: defineIxInput,

      inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'getValidityState', 'focusInput']

      methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-input',

    @@ -2104,7 +2106,7 @@ Can be prevented, in which case only the event is triggered, and the modal remai
  
    @ProxyCmp({

      defineCustomElementFn: defineIxNumberInput,

      inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-number-input',

    @@ -2315,7 +2317,8 @@ export declare interface IxPushCard extends Components.IxPushCard {}
  
    @ProxyCmp({

      defineCustomElementFn: defineIxRadio,

      inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value']

      inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-radio',

    @@ -2355,7 +2358,8 @@ export declare interface IxRadio extends Components.IxRadio {
  
    @ProxyCmp({

      defineCustomElementFn: defineIxRadioGroup,

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText']

      inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText'],

      methods: ['clear']

    })

    @Component({

      selector: 'ix-radio-group',

    @@ -2629,7 +2633,7 @@ export declare interface IxTabs extends Components.IxTabs {
  
    @ProxyCmp({

      defineCustomElementFn: defineIxTextarea,

      inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-textarea',

    @@ -2693,7 +2697,7 @@ export declare interface IxTile extends Components.IxTile {}
  
    @ProxyCmp({

      defineCustomElementFn: defineIxTimeInput,

      inputs: ['disabled', 'enableTopLayer', 'format', 'helperText', 'hideHeader', 'hourInterval', 'i18nErrorTimeUnparsable', 'i18nHourColumnHeader', 'i18nMillisecondColumnHeader', 'i18nMinuteColumnHeader', 'i18nSecondColumnHeader', 'i18nSelectTime', 'i18nTime', 'infoText', 'invalidText', 'label', 'millisecondInterval', 'minuteInterval', 'name', 'placeholder', 'readonly', 'required', 'secondInterval', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],

      methods: ['getNativeInputElement', 'focusInput']

      methods: ['getNativeInputElement', 'focusInput', 'clear']

    })

    @Component({

      selector: 'ix-time-input',

packages/core/src/components.d.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -629,6 +629,10 @@ export namespace Components { @@
               * @default false
              */
             "checked": boolean;
+            /**
+              * Clear the checked state and reset validation
+             */
+            "clear": () => Promise<void>;
             /**
               * Disabled state of the checkbox component
               * @default false
@@ Expand Down Expand Up / @@ -665,6 +669,10 @@ export namespace Components { @@
          * @form-ready
          */
         interface IxCheckboxGroup {
+            /**
+              * Clear all checked checkboxes and reset validation state
+             */
+            "clear": () => Promise<void>;
             /**
               * Alignment of the checkboxes in the group
               * @default 'column'
@@ Expand Down Expand Up / @@ -978,6 +986,7 @@ export namespace Components { @@
               * ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
              */
             "ariaLabelPreviousMonthButton"?: string;
+            "clear": () => Promise<void>;
             /**
               * Disabled attribute
               * @default false
@@ Expand All / @@ -989,19 +998,13 @@ export namespace Components { @@
               * @since 4.3.0
              */
             "enableTopLayer": boolean;
-            /**
-              * Focuses the input field
-             */
             "focusInput": () => Promise<void>;
             /**
               * Date format string. See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
               * @default 'yyyy/LL/dd'
              */
             "format": string;
             "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
-            /**
-              * Get the native input element
-             */
             "getNativeInputElement": () => Promise<HTMLInputElement>;
             "getValidityState": () => Promise<ValidityState>;
             "hasValidValue": () => Promise<boolean>;
@@ Expand All / @@ -1022,9 +1025,6 @@ export namespace Components { @@
               * Error text below the input field
              */
             "invalidText"?: string;
-            /**
-              * Returns whether the text field has been touched.
-             */
             "isTouched": () => Promise<boolean>;
             /**
               * Label of the input field
@@ Expand Down Expand Up / @@ -1958,6 +1958,10 @@ export namespace Components { @@
               * The allowed characters pattern for the text field.
              */
             "allowedCharactersPattern"?: string;
+            /**
+              * Clears the input field value and resets validation state. Sets the value to empty and removes touched state to suppress validation.
+             */
+            "clear": () => Promise<void>;
             /**
               * Specifies whether the text field is disabled.
               * @default false
@@ Expand Down Expand Up / @@ -2601,6 +2605,10 @@ export namespace Components { @@
               * The allowed characters pattern for the input field
              */
             "allowedCharactersPattern"?: string;
+            /**
+              * Clears the input field value and resets validation state. Sets the value to empty and removes touched state to suppress validation.
+             */
+            "clear": () => Promise<void>;
             /**
               * Disables the input field
               * @default false
@@ Expand Down Expand Up / @@ -2992,6 +3000,10 @@ export namespace Components { @@
               * @default false
              */
             "checked": boolean;
+            /**
+              * Clear the checked state and reset validation
+             */
+            "clear": () => Promise<void>;
             /**
               * Disabled state of the radio component
               * @default false
@@ Expand Down Expand Up / @@ -3023,6 +3035,10 @@ export namespace Components { @@
          * @form-ready
          */
         interface IxRadioGroup {
+            /**
+              * Clear the selected radio button and reset validation state
+             */
+            "clear": () => Promise<void>;
             /**
               * Alignment of the radio buttons in the group
               * @default 'column'
@@ Expand Down Expand Up / @@ -3488,6 +3504,10 @@ export namespace Components { @@
          * @form-ready
          */
         interface IxTextarea {
+            /**
+              * Clears the input field value and resets validation state. Sets the value to empty and removes touched state to suppress validation.
+             */
+            "clear": () => Promise<void>;
             /**
               * Determines if the textarea field is disabled.
               * @default false
@@ Expand All / @@ -3502,6 +3522,10 @@ export namespace Components { @@
               * Get the native textarea element.
              */
             "getNativeInputElement": () => Promise<HTMLTextAreaElement>;
+            /**
+              * Returns the validity state of the textarea field.
+             */
+            "getValidityState": () => Promise<ValidityState>;
             "hasValidValue": () => Promise<boolean>;
             /**
               * The helper text for the textarea field.
@@ Expand Down Expand Up / @@ -3600,6 +3624,7 @@ export namespace Components { @@
          * @form-ready
          */
         interface IxTimeInput {
+            "clear": () => Promise<void>;
             /**
               * Disabled attribute
               * @default false
@@ Expand All / @@ -3611,19 +3636,13 @@ export namespace Components { @@
               * @since 4.3.0
              */
             "enableTopLayer": boolean;
-            /**
-              * Focuses the input field
-             */
             "focusInput": () => Promise<void>;
             /**
               * Format of time string See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
               * @default 'TT'
              */
             "format": string;
             "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
-            /**
-              * Get the native input element
-             */
             "getNativeInputElement": () => Promise<HTMLInputElement>;
             "getValidityState": () => Promise<ValidityState>;
             "hasValidValue": () => Promise<boolean>;
@@ Expand Down Expand Up / @@ -3685,9 +3704,6 @@ export namespace Components { @@
               * Error text below the input field
              */
             "invalidText"?: string;
-            /**
-              * Returns whether the text field has been touched.
-             */
             "isTouched": () => Promise<boolean>;
             /**
               * Label of the input field
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature core/input: validation in input components #2278

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

feature core/input: validation in input components #2278

Are you sure you want to change the base?

Uh oh!

feature core/input: validation in input components #2278

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!