From 1a57b08faae8b367561b233d68e55d4fd1cfc607 Mon Sep 17 00:00:00 2001 From: Benjamin Pagelsdorf Date: Thu, 16 Sep 2021 14:44:48 +0200 Subject: [PATCH 1/3] feat(elements|ino-datepicker): provide error property --- .../elements/src/directives/proxies.ts | 4 ++-- packages/elements/src/components.d.ts | 8 +++++++ .../ino-datepicker/ino-datepicker.tsx | 23 ++++++++++++++++++- .../src/components/ino-datepicker/readme.md | 1 + packages/storybook/custom-elements.json | 14 ++++++++++- .../ino-datepicker/ino-datepicker.stories.ts | 2 ++ 6 files changed, 48 insertions(+), 4 deletions(-) diff --git a/packages/elements-angular/elements/src/directives/proxies.ts b/packages/elements-angular/elements/src/directives/proxies.ts index c2464b57f4..519ae2ae7b 100644 --- a/packages/elements-angular/elements/src/directives/proxies.ts +++ b/packages/elements-angular/elements/src/directives/proxies.ts @@ -210,13 +210,13 @@ export class InoControlItem { import { Datepicker as IDatepicker } from '@inovex.de/elements/dist/types/components/ino-datepicker/ino-datepicker'; export declare interface InoDatepicker extends Components.InoDatepicker {} @ProxyCmp({ - inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value'] + inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value'] }) @Component({ selector: 'ino-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', - inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value'], + inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value'], outputs: ['valueChange'] }) export class InoDatepicker { diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts index e70e57731d..2c015f9b64 100644 --- a/packages/elements/src/components.d.ts +++ b/packages/elements/src/components.d.ts @@ -249,6 +249,10 @@ export namespace Components { * Disables this element. */ "disabled"?: boolean; + /** + * Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation. + */ + "error"?: boolean; /** * The helper text. */ @@ -1802,6 +1806,10 @@ declare namespace LocalJSX { * Disables this element. */ "disabled"?: boolean; + /** + * Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation. + */ + "error"?: boolean; /** * The helper text. */ diff --git a/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx b/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx index 601566452c..b1a0b18923 100644 --- a/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx +++ b/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx @@ -244,6 +244,26 @@ export class Datepicker implements ComponentInterface { this.flatpickr.toggle(); } + /** + * Displays the datepicker as invalid if set to true. + * If the property is not set or set to false, + * the validation is handled by the default validation. + */ + @Prop() error?: boolean; + + @Watch('error') + errorHandler(value?: boolean) { + if (this.disabled || !this.flatpickr) { + return; + } + + if (value) { + this.isValid = false; + } else { + this.validate(); + } + } + /** * Emits when the value of the datepicker changes. * The value can be found in `event.detail` @@ -269,7 +289,7 @@ export class Datepicker implements ComponentInterface { } private validate(value: string = this.value) { - this.isValid = this.validator.validate(value); + this.isValid = !this.error && this.validator.validate(value); } private create() { @@ -310,6 +330,7 @@ export class Datepicker implements ComponentInterface { if (this.value) { this.flatpickr?.setDate(this.value); } + this.errorHandler(this.error); } private dispose() { diff --git a/packages/elements/src/components/ino-datepicker/readme.md b/packages/elements/src/components/ino-datepicker/readme.md index e51e9b02bf..97aeee8cc4 100644 --- a/packages/elements/src/components/ino-datepicker/readme.md +++ b/packages/elements/src/components/ino-datepicker/readme.md @@ -152,6 +152,7 @@ The type of the picker is selected based on the type` property. See the example | `defaultHour` | `default-hour` | A number containing the initial hour in the date-time picker overlay. If a `value` is given, this will be ignored. | `number` | `12` | | `defaultMinute` | `default-minute` | A number containing the initial minute in the date-time picker overlay. If a `value` is given, this will be ignored. | `number` | `0` | | `disabled` | `disabled` | Disables this element. | `boolean` | `undefined` | +| `error` | `error` | Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation. | `boolean` | `undefined` | | `helper` | `helper` | The helper text. | `string` | `undefined` | | `helperPersistent` | `helper-persistent` | Displays the helper permanently. | `boolean` | `undefined` | | `helperValidation` | `helper-validation` | Styles the helper text as a validation message. | `boolean` | `undefined` | diff --git a/packages/storybook/custom-elements.json b/packages/storybook/custom-elements.json index 2244d5c65b..ad3d07300a 100644 --- a/packages/storybook/custom-elements.json +++ b/packages/storybook/custom-elements.json @@ -1022,6 +1022,12 @@ "description": "Disables this element.", "required": false }, + { + "name": "error", + "type": "boolean", + "description": "Displays the datepicker as invalid if set to true.\nIf the property is not set or set to false,\nthe validation is handled by the default validation.", + "required": false + }, { "name": "helper", "type": "string", @@ -1163,6 +1169,12 @@ "description": "Disables this element.", "required": false }, + { + "name": "error", + "type": "boolean", + "description": "Displays the datepicker as invalid if set to true.\nIf the property is not set or set to false,\nthe validation is handled by the default validation.", + "required": false + }, { "name": "helper", "type": "string", @@ -4186,7 +4198,7 @@ { "name": "ino-snackbar", "path": "./src/components/ino-snackbar/ino-snackbar.tsx", - "description": "Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component", + "description": "Snackbars provide brief messages about app processes. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.", "attributes": [ { "name": "action-text", diff --git a/packages/storybook/src/stories/ino-datepicker/ino-datepicker.stories.ts b/packages/storybook/src/stories/ino-datepicker/ino-datepicker.stories.ts index d831fd28dc..4154f25304 100644 --- a/packages/storybook/src/stories/ino-datepicker/ino-datepicker.stories.ts +++ b/packages/storybook/src/stories/ino-datepicker/ino-datepicker.stories.ts @@ -46,6 +46,7 @@ export const Playground: Story = (args) => html` outline="${args.outline}" range="${args.range}" required="${args.required}" + error="${args.error}" show-label-hint="${args.showLabelHint}" twelve-hour-time="${args.twelveHourTime}" type="${args.type}" @@ -65,6 +66,7 @@ Playground.args = { outline: false, range: false, required: false, + error: false, showLabelHint: false, twelveHourTime: false, type: 'date', From 36ac8bc5a6157ff40d1db3855b7880b230967065 Mon Sep 17 00:00:00 2001 From: Benjamin Pagelsdorf Date: Tue, 12 Oct 2021 11:51:45 +0200 Subject: [PATCH 2/3] feat(elements|ino-datepicker): change error state handling --- .../src/components/ino-datepicker/ino-datepicker.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx b/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx index b1a0b18923..512d549f75 100644 --- a/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx +++ b/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx @@ -257,10 +257,13 @@ export class Datepicker implements ComponentInterface { return; } - if (value) { - this.isValid = false; - } else { - this.validate(); + switch (value) { + case true: + case false: + this.isValid = value; + break; + default: + this.validate(); } } From 106bd8848ce0116f75cae05c771f21a90cbe2228 Mon Sep 17 00:00:00 2001 From: Benjamin Pagelsdorf Date: Thu, 14 Oct 2021 11:25:43 +0200 Subject: [PATCH 3/3] feat(elements|ino-datepicker): negation of error value --- .../elements/src/components/ino-datepicker/ino-datepicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx b/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx index 512d549f75..a7cf44bf25 100644 --- a/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx +++ b/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx @@ -260,7 +260,7 @@ export class Datepicker implements ComponentInterface { switch (value) { case true: case false: - this.isValid = value; + this.isValid = !value; break; default: this.validate();