refactor: Updated property descriptions

* Use leading trivia for Blazor metadata in input comoponent.
* Added CHANGELOG entry

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - Button group component now allows resetting the selection state via the `selectedItems` property [#1168](https://github.com/IgniteUI/igniteui-webcomponents/pull/1168)
+- Input, Textarea - exposed `validateOnly` to enable validation rules being enforced without restricting user input [#1178](https://github.com/IgniteUI/igniteui-webcomponents/pull/1178)
 
 ### Changed
 - Combo, Select and Dropdown components now use the native Popover API [#1082](https://github.com/IgniteUI/igniteui-webcomponents/pull/1082)

src/components/input/input.ts

@@ -3,9 +3,6 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 
-import { alternateName } from '../common/decorators/alternateName.js';
-import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
-import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partNameMap } from '../common/util.js';
@@ -111,12 +108,12 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
 
   protected _value = '';
 
+  /* @tsTwoWayProperty(true, "igcChange", "detail", false) */
   /**
    * The value of the control.
    * @attr
    */
   @property()
-  @blazorTwoWayBind('igcChange', 'detail')
   public set value(value: string) {
     this._value = value;
     this.setFormValue(value ? value : null);
@@ -128,11 +125,11 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     return this._value;
   }
 
+  /* alternateName: displayType */
   /**
    * The type attribute of the control.
    * @attr
    */
-  @alternateName('displayType')
   @property({ reflect: true })
   public type:
     | 'email'
@@ -248,8 +245,8 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
   public autocomplete!: string;
 
   /**
-   * Consider whether to permit user input to exceed the `maxLength` when it is specified for a string type input,
-   * or to allow spin buttons to surpass the established `min`/`max` limits for a number type input.
+   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for
+   * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.
    *
    * @attr validate-only
    */
@@ -279,8 +276,8 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     this.updateValidity();
   }
 
+  /* blazorSuppress */
   /** Replaces the selected text in the input. */
-  @blazorSuppress()
   public override setRangeText(
     replacement: string,
     start: number,

src/components/textarea/textarea.ts

@@ -253,7 +253,8 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   public wrap: 'hard' | 'soft' | 'off' = 'soft';
 
   /**
-   * Consider whether to permit user input to exceed the `maxLength` when it is specified.
+   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property
+   * when it is defined.
    *
    * @attr validate-only
    */

stories/input.stories.ts

@@ -106,7 +106,7 @@ const metadata: Meta<IgcInputComponent> = {
     validateOnly: {
       type: 'boolean',
       description:
-        'Consider whether to permit user input to exceed the `maxLength` when it is specified for a string type input,\nor to allow spin buttons to surpass the established `min`/`max` limits for a number type input.',
+        'Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for\nstring-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.',
       control: 'boolean',
       table: { defaultValue: { summary: false } },
     },
@@ -202,8 +202,8 @@ interface IgcInputArgs {
   /** The autocomplete attribute of the control. */
   autocomplete: string;
   /**
-   * Consider whether to permit user input to exceed the `maxLength` when it is specified for a string type input,
-   * or to allow spin buttons to surpass the established `min`/`max` limits for a number type input.
+   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for
+   * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.
    */
   validateOnly: boolean;
   /** Makes the control a required field in a form context. */

stories/textarea.stories.ts

@@ -133,7 +133,7 @@ const metadata: Meta<IgcTextareaComponent> = {
     validateOnly: {
       type: 'boolean',
       description:
-        'Consider whether to permit user input to exceed the `maxLength` when it is specified.',
+        'Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property\nwhen it is defined.',
       control: 'boolean',
       table: { defaultValue: { summary: false } },
     },
@@ -241,7 +241,10 @@ interface IgcTextareaArgs {
    * for explanation of the available values.
    */
   wrap: 'hard' | 'soft' | 'off';
-  /** Consider whether to permit user input to exceed the `maxLength` when it is specified. */
+  /**
+   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property
+   * when it is defined.
+   */
   validateOnly: boolean;
   /** Makes the control a required field in a form context. */
   required: boolean;
@@ -333,10 +336,12 @@ export const Form: Story = {
             value="I'm disabled"
             label="Disabled"
           >
-            <p slot="helper-text">
-              Disabled state. <strong>Does not </strong> participate in form
-              submission.
-            </p>
+            <div slot="helper-text">
+              <p>
+                Disabled state. <strong>Does not</strong> participate in form
+                submission.
+              </p>
+            </div>
           </igc-textarea>
         </fieldset>
 
@@ -347,10 +352,12 @@ export const Form: Story = {
             readonly
             label="Readonly"
           >
-            <p slot="helper-text">
-              Read-only state. <strong>Does </strong> participate in form
-              submission.
-            </p>
+            <div slot="helper-text">
+              <p>
+                Read-only state. <strong>Does</strong> participate in form
+                submission.
+              </p>
+            </div>
           </igc-textarea>
         </fieldset>