diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index 36a8dcdc..97f244f4 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -11,6 +11,15 @@ "tagName": "dnn-autocomplete", "description": "Building a component that is flexible enough for multiple use cases is not easy. This component externalizes some of its behavior to make it more reusable. To use it effectivelly please read the usage examples carefuly.", "attributes": [ + { + "name": "autocomplete", + "type": { + "text": "string" + }, + "description": "Defines the type of automatic completion the browser could use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete", + "default": "\"off\"", + "required": false + }, { "name": "disabled", "type": { @@ -1129,6 +1138,14 @@ "description": "Defines the help label displayed under the field.", "required": false }, + { + "name": "inputmode", + "type": { + "text": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"" + }, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.", + "required": false + }, { "name": "label", "type": { @@ -1748,6 +1765,15 @@ "tagName": "dnn-select", "description": "", "attributes": [ + { + "name": "autocomplete", + "type": { + "text": "string" + }, + "description": "Defines the type of automatic completion the browser can use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete", + "default": "\"off\"", + "required": false + }, { "name": "disable-validity-reporting", "type": { diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index d6f06c56..329615c9 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -408,6 +408,10 @@ export namespace Components { * Defines the help label displayed under the field. */ "helpText": string; + /** + * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. + */ + "inputmode": "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"; /** * The label for this input. */ @@ -1695,6 +1699,10 @@ declare namespace LocalJSX { * Defines the help label displayed under the field. */ "helpText"?: string; + /** + * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. + */ + "inputmode"?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"; /** * The label for this input. */ diff --git a/packages/stencil-library/src/components/dnn-autocomplete/readme.md b/packages/stencil-library/src/components/dnn-autocomplete/readme.md index d5aa60b7..fd68b669 100644 --- a/packages/stencil-library/src/components/dnn-autocomplete/readme.md +++ b/packages/stencil-library/src/components/dnn-autocomplete/readme.md @@ -231,6 +231,7 @@ private handleLoadMore(query){ | Property | Attribute | Description | Type | Default | | ------------------------ | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----------- | +| `autocomplete` | `autocomplete` | Defines the type of automatic completion the browser could use. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete | `string` | `"off"` | | `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` | | `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` | | `label` | `label` | The label for this autocomplete. | `string` | `undefined` | diff --git a/packages/stencil-library/src/components/dnn-input/dnn-input.tsx b/packages/stencil-library/src/components/dnn-input/dnn-input.tsx index 74a70252..ca2f4eda 100644 --- a/packages/stencil-library/src/components/dnn-input/dnn-input.tsx +++ b/packages/stencil-library/src/components/dnn-input/dnn-input.tsx @@ -67,6 +67,11 @@ export class DnnInput { /** If true, enables users to switch between a password and a text field (to view their password). */ @Prop() allowShowPassword: boolean; + /** Hints at the type of data that might be entered by the user while editing the element or its contents. + * This allows a browser to display an appropriate virtual keyboard. + */ + @Prop() inputmode: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"; + /** Fires when the value has changed and the user exits the input. */ @Event() valueChange: EventEmitter; @@ -112,9 +117,11 @@ export class DnnInput { } componentDidLoad() { - var validity = this.inputField.validity; - var validityMessage = validity.valid ? "" : this.inputField.validationMessage; - this.internals.setValidity(this.inputField.validity, validityMessage); + requestAnimationFrame(() => { + var validity = this.inputField.validity; + var validityMessage = validity.valid ? "" : this.inputField.validationMessage; + this.internals.setValidity(this.inputField.validity, validityMessage); + }); } // eslint-disable-next-line @stencil-community/own-methods-must-be-private @@ -179,6 +186,39 @@ export class DnnInput { return true; } + private getInputMode(): string { + if (this.inputmode != undefined) { + return this.inputmode; + } + + if (this.type === "number") { + var min = parseFloat(this.min?.toString()); + if ((this.step === 1 || this.step == undefined) && min >= 0) { + return "numeric"; + } + + return "decimal"; + } + + if (this.type === "tel") { + return "tel"; + } + + if (this.type === "url") { + return "url"; + } + + if (this.type === "email") { + return "email"; + } + + if (this.type === "search") { + return "search"; + } + + return "text"; + } + handleBlur(): void { this.focused = false var validity = this.inputField.checkValidity(); @@ -215,6 +255,7 @@ export class DnnInput { ref={el => this.inputField = el} name={this.name} type={this.type} + inputMode={this.getInputMode()} disabled={this.disabled} required={this.required} autoComplete={this.autocomplete} @@ -260,5 +301,5 @@ export class DnnInput { ); - } + } } diff --git a/packages/stencil-library/src/components/dnn-input/readme.md b/packages/stencil-library/src/components/dnn-input/readme.md index b656ca90..e733f7b7 100644 --- a/packages/stencil-library/src/components/dnn-input/readme.md +++ b/packages/stencil-library/src/components/dnn-input/readme.md @@ -18,6 +18,7 @@ A custom input component that wraps the html input element is a mobile friendly | `disableValidityReporting` | `disable-validity-reporting` | **[DEPRECATED]** This control has it's own validation reporting, will be removed in v0.25.0

| `boolean` | `undefined` | | `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` | | `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` | +| `inputmode` | `inputmode` | Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `undefined` | | `label` | `label` | The label for this input. | `string` | `undefined` | | `max` | `max` | Defines the maximum allowed value. | `number \| string` | `undefined` | | `maxlength` | `maxlength` | Defines the maximum amount of charaters. | `number` | `undefined` | diff --git a/packages/stencil-library/src/components/dnn-select/readme.md b/packages/stencil-library/src/components/dnn-select/readme.md index 51b0aa88..1dc90b65 100644 --- a/packages/stencil-library/src/components/dnn-select/readme.md +++ b/packages/stencil-library/src/components/dnn-select/readme.md @@ -7,15 +7,16 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | -| `disableValidityReporting` | `disable-validity-reporting` | **[DEPRECATED]** This control has its own validatin reporting, will be removed in v0.25.0

| `boolean` | `undefined` | -| `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` | -| `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` | -| `label` | `label` | The label for this input. | `string` | `undefined` | -| `name` | `name` | The name for this input, if used in forms. | `string` | `undefined` | -| `required` | `required` | Defines whether the field requires having a value. | `boolean` | `undefined` | -| `value` | `value` | The value of the input. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | +| `autocomplete` | `autocomplete` | Defines the type of automatic completion the browser can use. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete | `string` | `"off"` | +| `disableValidityReporting` | `disable-validity-reporting` | **[DEPRECATED]** This control has its own validatin reporting, will be removed in v0.25.0

| `boolean` | `undefined` | +| `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` | +| `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` | +| `label` | `label` | The label for this input. | `string` | `undefined` | +| `name` | `name` | The name for this input, if used in forms. | `string` | `undefined` | +| `required` | `required` | Defines whether the field requires having a value. | `boolean` | `undefined` | +| `value` | `value` | The value of the input. | `string` | `undefined` | ## Events diff --git a/packages/stencil-library/vscode-data.json b/packages/stencil-library/vscode-data.json index af68b1a0..63adaa39 100644 --- a/packages/stencil-library/vscode-data.json +++ b/packages/stencil-library/vscode-data.json @@ -8,6 +8,10 @@ "value": "Building a component that is flexible enough for multiple use cases is not easy. This component externalizes some of its behavior to make it more reusable. To use it effectivelly please read the usage examples carefuly." }, "attributes": [ + { + "name": "autocomplete", + "description": "Defines the type of automatic completion the browser could use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete" + }, { "name": "disabled", "description": "Defines whether the field is disabled." @@ -431,6 +435,36 @@ "name": "help-text", "description": "Defines the help label displayed under the field." }, + { + "name": "inputmode", + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.", + "values": [ + { + "name": "decimal" + }, + { + "name": "email" + }, + { + "name": "none" + }, + { + "name": "numeric" + }, + { + "name": "search" + }, + { + "name": "tel" + }, + { + "name": "text" + }, + { + "name": "url" + } + ] + }, { "name": "label", "description": "The label for this input." @@ -761,6 +795,10 @@ "value": "" }, "attributes": [ + { + "name": "autocomplete", + "description": "Defines the type of automatic completion the browser can use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete" + }, { "name": "disable-validity-reporting", "description": ""