diff --git a/.changeset/nine-baboons-sleep.md b/.changeset/nine-baboons-sleep.md new file mode 100644 index 000000000..0658a9549 --- /dev/null +++ b/.changeset/nine-baboons-sleep.md @@ -0,0 +1,8 @@ +--- +"@astrouxds/angular": minor +"@astrouxds/astro-web-components": minor +"angular-workspace": minor +"@astrouxds/react": minor +--- + +Added autocomplete property to rux-input diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 2b0eea4de..f8e3fcc75 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -19380,6 +19380,10 @@ export namespace Components { interface RuxIndeterminateProgress { } interface RuxInput { + /** + * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'. + */ + "autocomplete": string; /** * Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. */ @@ -54907,6 +54911,10 @@ declare namespace LocalJSX { interface RuxIndeterminateProgress { } interface RuxInput { + /** + * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'. + */ + "autocomplete"?: string; /** * Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. */ diff --git a/packages/web-components/src/components/rux-input/readme.md b/packages/web-components/src/components/rux-input/readme.md index 81cdd773e..0a0da1830 100644 --- a/packages/web-components/src/components/rux-input/readme.md +++ b/packages/web-components/src/components/rux-input/readme.md @@ -5,24 +5,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------- | -| `disabled` | `disabled` | Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. | `boolean` | `false` | -| `errorText` | `error-text` | The validation error text | `string \| undefined` | `undefined` | -| `helpText` | `help-text` | The help or explanation text | `string \| undefined` | `undefined` | -| `invalid` | `invalid` | Presentational only. Renders the Input Field as invalid. | `boolean` | `false` | -| `label` | `label` | The input label text. For HTML content, use the `label` slot instead. | `string \| undefined` | `undefined` | -| `max` | `max` | The input max attribute | `string \| undefined` | `undefined` | -| `min` | `min` | The input min attribute | `string \| undefined` | `undefined` | -| `name` | `name` | The input name | `string` | `''` | -| `placeholder` | `placeholder` | The input placeholder text | `string \| undefined` | `undefined` | -| `readonly` | `readonly` | The inputs readonly attribute | `boolean` | `false` | -| `required` | `required` | Sets the input as required | `boolean` | `false` | -| `size` | `size` | Control the padding around the input field | `"large" \| "medium" \| "small"` | `'medium'` | -| `spellcheck` | `spellcheck` | The input's spellcheck attribute | `boolean` | `false` | -| `step` | `step` | The input step attribute | `string \| undefined` | `undefined` | -| `type` | `type` | The input type | `"date" \| "datetime-local" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `'text'` | -| `value` | `value` | The input value | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------- | +| `autocomplete` | `autocomplete` | | `string` | `'off'` | +| `disabled` | `disabled` | Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. | `boolean` | `false` | +| `errorText` | `error-text` | The validation error text | `string \| undefined` | `undefined` | +| `helpText` | `help-text` | The help or explanation text | `string \| undefined` | `undefined` | +| `invalid` | `invalid` | Presentational only. Renders the Input Field as invalid. | `boolean` | `false` | +| `label` | `label` | The input label text. For HTML content, use the `label` slot instead. | `string \| undefined` | `undefined` | +| `max` | `max` | The input max attribute | `string \| undefined` | `undefined` | +| `min` | `min` | The input min attribute | `string \| undefined` | `undefined` | +| `name` | `name` | The input name | `string` | `''` | +| `placeholder` | `placeholder` | The input placeholder text | `string \| undefined` | `undefined` | +| `readonly` | `readonly` | The inputs readonly attribute | `boolean` | `false` | +| `required` | `required` | Sets the input as required | `boolean` | `false` | +| `size` | `size` | Control the padding around the input field | `"large" \| "medium" \| "small"` | `'medium'` | +| `spellcheck` | `spellcheck` | The input's spellcheck attribute | `boolean` | `false` | +| `step` | `step` | The input step attribute | `string \| undefined` | `undefined` | +| `type` | `type` | The input type | `"date" \| "datetime-local" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `'text'` | +| `value` | `value` | The input value | `string` | `''` | ## Events diff --git a/packages/web-components/src/components/rux-input/rux-input.tsx b/packages/web-components/src/components/rux-input/rux-input.tsx index 6ca0134a4..df79150d9 100644 --- a/packages/web-components/src/components/rux-input/rux-input.tsx +++ b/packages/web-components/src/components/rux-input/rux-input.tsx @@ -143,6 +143,11 @@ export class RuxInput implements FormFieldInterface { */ @Prop() readonly = false + /** + * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'. + */ + @Prop() autocomplete = 'off' + /** * Fired when the value of the input changes - [HTMLElement/input_event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) */ @@ -244,6 +249,7 @@ export class RuxInput implements FormFieldInterface { this.type === 'password' ? (this.togglePassword = true) : (this.togglePassword = false) + if (this.type === 'password') this.autocomplete = 'off' } private _handleTogglePassword() { @@ -281,6 +287,7 @@ export class RuxInput implements FormFieldInterface { readonly, togglePassword, isPasswordVisible, + autocomplete, } = this renderHiddenInput(true, el, name, value, disabled) @@ -360,6 +367,7 @@ export class RuxInput implements FormFieldInterface { onBlur={_onBlur} onFocus={_onFocus} part="input" + autocomplete={autocomplete} > {togglePassword ? (