From 327b6d1f5a4ee497a62c2fb548cb636be5fdfcf9 Mon Sep 17 00:00:00 2001 From: "darina.reynish@idp.zyfra.com" Date: Wed, 7 Feb 2024 18:31:43 +0300 Subject: [PATCH 1/2] fix: custom error message is not displayed in input layout date time #185 --- .../dialog-with-parent-example.component.html | 2 +- ...ayout-date-time-required-example.component.html | 9 +++++++++ ...-layout-date-time-required-example.component.ts | 5 +++++ .../input-mask/input-mask-example.component.html | 2 +- .../input-number-example.component.html | 5 +++-- .../input-password-example.component.html | 2 +- .../input-validation-custom-texts.service.ts | 2 +- .../common/input-layout/input-layout.component.ts | 2 +- .../input-status-text.directive.ts | 4 ++-- .../input-layout-date-time.component.html | 5 ++++- .../input-layout-date-time.component.ts | 14 +++++++++++--- libs/components/src/lib/tokens/i18n.ts | 5 +++++ libs/i18n/src/lib/interfaces/language.ts | 6 ++++++ .../languages/russian/input-layout-date-time.ts | 7 +++++++ libs/i18n/src/lib/languages/russian/russian.ts | 2 ++ 15 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 libs/i18n/src/lib/languages/russian/input-layout-date-time.ts diff --git a/apps/doc/src/app/components/dialogs/dialog/examples/with-parent/dialog-with-parent-example.component.html b/apps/doc/src/app/components/dialogs/dialog/examples/with-parent/dialog-with-parent-example.component.html index 2d9a484173..6b4291fb43 100644 --- a/apps/doc/src/app/components/dialogs/dialog/examples/with-parent/dialog-with-parent-example.component.html +++ b/apps/doc/src/app/components/dialogs/dialog/examples/with-parent/dialog-with-parent-example.component.html @@ -15,7 +15,7 @@

Check Dropdown Host Parent Container And Position

- dddd + diff --git a/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.html b/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.html index 7d25ddc54e..c874ee202e 100644 --- a/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.html +++ b/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.html @@ -1,3 +1,12 @@ + +
+ +

With custom error text

+ + + + Warning text + diff --git a/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.ts b/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.ts index 87ff14bfb7..98adddbc36 100644 --- a/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.ts +++ b/apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.ts @@ -19,4 +19,9 @@ export class PrizmInputLayoutDateTimeRequiredExampleComponent { [new PrizmDay(2017, 2, 15), new PrizmTime(12, 30)], [Validators.required] ); + + public readonly customErrorValue = new UntypedFormControl( + [new PrizmDay(2017, 2, 15), new PrizmTime(12, 30)], + [Validators.required] + ); } diff --git a/apps/doc/src/app/components/input/input-mask/input-mask-example.component.html b/apps/doc/src/app/components/input/input-mask/input-mask-example.component.html index 3235a69ceb..c9c5b54954 100644 --- a/apps/doc/src/app/components/input/input-mask/input-mask-example.component.html +++ b/apps/doc/src/app/components/input/input-mask/input-mask-example.component.html @@ -30,7 +30,7 @@ prizmDocHostElementKey="PrizmInputText" prizmInput /> - Текст статуса + diff --git a/apps/doc/src/app/components/input/input-number/input-number-example.component.html b/apps/doc/src/app/components/input/input-number/input-number-example.component.html index 034852737b..2cdb04ac09 100644 --- a/apps/doc/src/app/components/input/input-number/input-number-example.component.html +++ b/apps/doc/src/app/components/input/input-number/input-number-example.component.html @@ -66,7 +66,7 @@

Number

prizm-input-right > - Текст статуса +
@@ -93,6 +93,7 @@

Counter

> Counter prizm-input-right > - Текст статуса +
diff --git a/apps/doc/src/app/components/input/input-password/input-password-example.component.html b/apps/doc/src/app/components/input/input-password/input-password-example.component.html index 6d55c5c9b4..933edeb37e 100644 --- a/apps/doc/src/app/components/input/input-password/input-password-example.component.html +++ b/apps/doc/src/app/components/input/input-password/input-password-example.component.html @@ -27,7 +27,7 @@ prizmDocHostElementKey="inputPasswordAuxiliaryControl" prizm-input-right > - Текст статуса + diff --git a/apps/doc/src/app/components/input/input-text/examples/input-validation-custom-example/input-validation-custom-texts.service.ts b/apps/doc/src/app/components/input/input-text/examples/input-validation-custom-example/input-validation-custom-texts.service.ts index 07400c66b6..5b0085828c 100644 --- a/apps/doc/src/app/components/input/input-text/examples/input-validation-custom-example/input-validation-custom-texts.service.ts +++ b/apps/doc/src/app/components/input/input-text/examples/input-validation-custom-example/input-validation-custom-texts.service.ts @@ -3,7 +3,7 @@ import { PrizmInputControl, PrizmInputValidationTexts } from '@prizm-ui/componen @Injectable() export class InputValidationCustomTextsService extends PrizmInputValidationTexts { - private readonly invalidTextCustomMap = new Map([['required', 'Обязательное поле']]); + private readonly invalidTextCustomMap = new Map([['required', 'Самое обязательное поле']]); public override getText(key: string, control?: PrizmInputControl): string | undefined { return this.invalidTextCustomMap.get(key); diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.ts b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.ts index 6870fb9d5f..abcc5e43a2 100644 --- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.ts +++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.ts @@ -20,7 +20,7 @@ import { PrizmInputControl } from '../base/input-control.class'; import { PrizmInputStatusTextDirective } from '../input-status-text/input-status-text.directive'; import { PrizmInputPosition, PrizmInputSize, PrizmInputStatus } from '../models/prizm-input.models'; import { debounceTime, map, startWith, takeUntil, tap } from 'rxjs/operators'; -import { isPolymorphPrimitive, PolymorphComponent, PolymorphContent } from '../../../../directives/polymorph'; +import { isPolymorphPrimitive, PolymorphContent } from '../../../../directives/polymorph'; import { Compare, filterTruthy, PrizmDestroyService, PrizmLetDirective } from '@prizm-ui/helpers'; import { PrizmAbstractTestId } from '../../../../abstract/interactive'; diff --git a/libs/components/src/lib/components/input/common/input-status-text/input-status-text.directive.ts b/libs/components/src/lib/components/input/common/input-status-text/input-status-text.directive.ts index 330b47d4db..2f39a57e82 100644 --- a/libs/components/src/lib/components/input/common/input-status-text/input-status-text.directive.ts +++ b/libs/components/src/lib/components/input/common/input-status-text/input-status-text.directive.ts @@ -23,11 +23,11 @@ export class PrizmInputStatusTextDirective extends DefaultInputInvalidTextClass protected override setInvalidText(text: string): void { super.setInvalidText(text); - this.changed.next(); } public getStatusMessage(): PolymorphContent { - return this.invalidText || this.templateRef; + const isTemplateEmpty = !this.templateRef.createEmbeddedView(null).rootNodes[0]; + return isTemplateEmpty ? this.invalidText : this.templateRef; } } diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html index 7863346c0d..f108b4d5db 100644 --- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html +++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html @@ -10,7 +10,6 @@ [closeByEsc]="true" (isOpenChange)="onOpenChange($event); $event && prizmDropdownHostComponent.reCalculatePositions()" > - Ошибка! Неправильный формат
+ + + {{ dictionary$ | async | prizmPluck : 'wrongFormat' }} + diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts index 404330f2d0..dd0296afff 100644 --- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts +++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts @@ -23,7 +23,7 @@ import { PRIZM_ALWAYS_FALSE_HANDLER } from '../../../constants/always-false-hand import { PRIZM_DATE_TIME_SEPARATOR } from '../../../constants/date-time-separator'; import { prizmDefaultProp, prizmPure } from '@prizm-ui/core'; import { PRIZM_DATE_TIME_VALUE_TRANSFORMER } from '../../../tokens/date-inputs-value-transformers'; -import { PRIZM_DATE_TEXTS, PRIZM_TIME_TEXTS } from '../../../tokens/i18n'; +import { PRIZM_DATE_TEXTS, PRIZM_INPUT_LAYOUT_DATE_TIME, PRIZM_TIME_TEXTS } from '../../../tokens/i18n'; import { PrizmContextWithImplicit } from '../../../types/context-with-implicit'; import { PrizmControlValueTransformer } from '../../../types/control-value-transformer'; import { PrizmDateMode } from '../../../types/date-mode'; @@ -36,8 +36,8 @@ import { prizmClamp } from '../../../util/math/clamp'; import { PRIZM_DATE_RIGHT_BUTTONS } from '../../../tokens/date-extra-buttons'; import { PrizmDateButton } from '../../../types/date-button'; import { PRIZM_STRICT_MATCHER } from '../../../constants'; -import { filterTruthy, PrizmDestroyService } from '@prizm-ui/helpers'; -import { PrizmInputControl, PrizmInputNgControl } from '../common'; +import { filterTruthy, PrizmDestroyService, PrizmPluckPipe } from '@prizm-ui/helpers'; +import { PrizmInputControl, PrizmInputNgControl, PrizmInputStatusTextDirective } from '../common'; import { PrizmInputZoneDirective, PrizmInputZoneModule } from '../../../directives/input-zone'; import { debounceTime, delay, map, takeUntil } from 'rxjs/operators'; import { PrizmLifecycleModule } from '../../../directives/lifecycle'; @@ -58,6 +58,7 @@ import { PrizmCalendarComponent } from '../../calendar'; import { PrizmLinkComponent } from '../../link'; import { PrizmValueAccessorModule } from '../../../directives/value-accessor/value-accessor.module'; import { PrizmListingItemComponent } from '../../listing-item'; +import { PrizmLanguageInputLayoutDateTime } from '@prizm-ui/i18n'; @Component({ selector: `prizm-input-layout-date-time`, @@ -71,6 +72,7 @@ import { PrizmListingItemComponent } from '../../listing-item'; ...prizmI18nInitWithKeys({ time: PRIZM_TIME_TEXTS, dateTexts: PRIZM_DATE_TEXTS, + inputLayoutDateTime: PRIZM_INPUT_LAYOUT_DATE_TIME, }), ...PRIZM_INPUT_DATE_TIME_PROVIDERS, { @@ -103,6 +105,7 @@ import { PrizmListingItemComponent } from '../../listing-item'; PrizmValueAccessorModule, PrizmInputNativeValueModule, PrizmListingItemComponent, + PrizmPluckPipe, ], }) export class PrizmInputLayoutDateTimeComponent @@ -118,6 +121,9 @@ export class PrizmInputLayoutDateTimeComponent @ViewChild('focusableElementRef', { read: PrizmInputZoneDirective }) public override readonly focusableElement?: PrizmInputZoneDirective; + @ViewChild(PrizmInputStatusTextDirective, { static: true }) + override statusText!: PrizmInputStatusTextDirective; + @Input() @prizmDefaultProp() timeItems: readonly PrizmTime[] = new Array(24).fill(null).map((_, i) => new PrizmTime(i, 0, 0, 0)); @@ -182,6 +188,8 @@ export class PrizmInputLayoutDateTimeComponent injector: Injector, @Inject(PRIZM_DATE_TEXTS) readonly dateTexts$: Observable>, + @Inject(PRIZM_INPUT_LAYOUT_DATE_TIME) + public readonly dictionary$: Observable, @Optional() @Inject(PRIZM_DATE_TIME_VALUE_TRANSFORMER) valueTransformer: PrizmControlValueTransformer<[PrizmDay | null, PrizmTime | null] | null> | null diff --git a/libs/components/src/lib/tokens/i18n.ts b/libs/components/src/lib/tokens/i18n.ts index cc6c5250a2..013a519831 100644 --- a/libs/components/src/lib/tokens/i18n.ts +++ b/libs/components/src/lib/tokens/i18n.ts @@ -7,6 +7,7 @@ import { PrizmLanguageCron, PrizmLanguageFileUpload, PrizmLanguageInputLayoutDateRelative, + PrizmLanguageInputLayoutDateTime, PrizmLanguageKit, PrizmLanguagePaginator, } from '@prizm-ui/i18n'; @@ -19,6 +20,10 @@ export const PRIZM_INPUT_LAYOUT_DATE_RELATIVE = new InjectionToken< Observable >(`Localized for input layout date relative component`); +export const PRIZM_INPUT_LAYOUT_DATE_TIME = new InjectionToken< + Observable +>(`Localized for input layout date time component`); + export const PRIZM_CRON = new InjectionToken>( `Localized for cron component` ); diff --git a/libs/i18n/src/lib/interfaces/language.ts b/libs/i18n/src/lib/interfaces/language.ts index ab1632578a..016d9c865e 100644 --- a/libs/i18n/src/lib/interfaces/language.ts +++ b/libs/i18n/src/lib/interfaces/language.ts @@ -21,6 +21,11 @@ export interface PrizmLanguageInputLayoutDateRelative { wrongFormat: string; }; } +export interface PrizmLanguageInputLayoutDateTime { + inputLayoutDateTime: { + wrongFormat: string; + }; +} export interface PrizmLanguageCron { cron: { title: string; @@ -219,6 +224,7 @@ export interface PrizmLanguage PrizmLanguageMeta, PrizmLanguageCron, PrizmLanguageInputLayoutDateRelative, + PrizmLanguageInputLayoutDateTime, PrizmLanguageFileUpload, PrizmLanguageColumnSettings, PrizmLanguagePaginator {} diff --git a/libs/i18n/src/lib/languages/russian/input-layout-date-time.ts b/libs/i18n/src/lib/languages/russian/input-layout-date-time.ts new file mode 100644 index 0000000000..2ed50480f8 --- /dev/null +++ b/libs/i18n/src/lib/languages/russian/input-layout-date-time.ts @@ -0,0 +1,7 @@ +import { PrizmLanguageInputLayoutDateTime } from '../../interfaces'; + +export const PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME: PrizmLanguageInputLayoutDateTime = { + inputLayoutDateTime: { + wrongFormat: 'Неправильный формат данных', + }, +}; diff --git a/libs/i18n/src/lib/languages/russian/russian.ts b/libs/i18n/src/lib/languages/russian/russian.ts index 4574770e1a..e8db4cbf2a 100644 --- a/libs/i18n/src/lib/languages/russian/russian.ts +++ b/libs/i18n/src/lib/languages/russian/russian.ts @@ -6,6 +6,7 @@ import { PRIZM_RUSSIAN_CRON } from './cron'; import { PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_RELATIVE } from './input-date-layout-relative'; import { PRIZM_RUSSIAN_COLUMN_SETTINGS } from './column-settings'; import { PRIZM_RUSSIAN_PAGINATOR } from './paginator'; +import { PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME } from './input-layout-date-time'; export const PRIZM_RUSSIAN_LANGUAGE = { name: `russian`, @@ -14,6 +15,7 @@ export const PRIZM_RUSSIAN_LANGUAGE = { ...PRIZM_RUSSIAN_LANGUAGE_KIT, ...PRIZM_RUSSIAN_FILE_UPLOAD, ...PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_RELATIVE, + ...PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME, ...PRIZM_RUSSIAN_CRON, ...PRIZM_RUSSIAN_COLUMN_SETTINGS, ...PRIZM_RUSSIAN_PAGINATOR, From 962b9d6be7e21b221e5c12a73803663435af96c2 Mon Sep 17 00:00:00 2001 From: "darina.reynish@idp.zyfra.com" Date: Wed, 7 Feb 2024 19:19:52 +0300 Subject: [PATCH 2/2] fix: input select examples prizm input status text fix #185 --- .../examples/base/select-base-example.component.html | 8 +------- .../full-width/select-full-width-example.component.html | 1 - .../select-virtual-scroll-example.component.html | 2 +- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/apps/doc/src/app/components/input/input-select/examples/base/select-base-example.component.html b/apps/doc/src/app/components/input/input-select/examples/base/select-base-example.component.html index 5a24665f04..868b39539e 100644 --- a/apps/doc/src/app/components/input/input-select/examples/base/select-base-example.component.html +++ b/apps/doc/src/app/components/input/input-select/examples/base/select-base-example.component.html @@ -1,12 +1,6 @@ - - - - - - - dddd +

diff --git a/apps/doc/src/app/components/input/input-select/examples/full-width/select-full-width-example.component.html b/apps/doc/src/app/components/input/input-select/examples/full-width/select-full-width-example.component.html index 27c524349f..d497218bd7 100644 --- a/apps/doc/src/app/components/input/input-select/examples/full-width/select-full-width-example.component.html +++ b/apps/doc/src/app/components/input/input-select/examples/full-width/select-full-width-example.component.html @@ -1,7 +1,6 @@ -

diff --git a/apps/doc/src/app/components/input/input-select/examples/virtual-scroll/select-virtual-scroll-example.component.html b/apps/doc/src/app/components/input/input-select/examples/virtual-scroll/select-virtual-scroll-example.component.html index 4fad677f95..ccbbcdf6dc 100644 --- a/apps/doc/src/app/components/input/input-select/examples/virtual-scroll/select-virtual-scroll-example.component.html +++ b/apps/doc/src/app/components/input/input-select/examples/virtual-scroll/select-virtual-scroll-example.component.html @@ -9,7 +9,7 @@ - dddd +