diff --git a/CHANGELOG.md b/CHANGELOG.md index d3178d285..076d4dac0 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/input/input.ts b/src/components/input/input.ts index f9425b85d..a2b5a263e 100644 --- a/src/components/input/input.ts +++ b/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, diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index c610d4855..cd5d29ae7 100644 --- a/src/components/textarea/textarea.ts +++ b/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 */ diff --git a/stories/input.stories.ts b/stories/input.stories.ts index 0a352786b..60007df76 100644 --- a/stories/input.stories.ts +++ b/stories/input.stories.ts @@ -106,7 +106,7 @@ const metadata: Meta = { 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. */ diff --git a/stories/textarea.stories.ts b/stories/textarea.stories.ts index cebfc3c7b..870102b0b 100644 --- a/stories/textarea.stories.ts +++ b/stories/textarea.stories.ts @@ -133,7 +133,7 @@ const metadata: Meta = { 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" > -

- Disabled state. Does not participate in form - submission. -

+
+

+ Disabled state. Does not participate in form + submission. +

+
@@ -347,10 +352,12 @@ export const Form: Story = { readonly label="Readonly" > -

- Read-only state. Does participate in form - submission. -

+
+

+ Read-only state. Does participate in form + submission. +

+