diff --git a/projects/demo/src/app/components-example/message/message-error-example/message-error-example.component.html b/projects/demo/src/app/components-example/message/message-error-example/message-error-example.component.html
new file mode 100644
index 00000000..9ba2d2bf
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-error-example/message-error-example.component.html
@@ -0,0 +1 @@
+{{ "EXAMPLES.MESSAGE.COMMON.ERROR" | translate }}
diff --git a/projects/demo/src/app/components-example/message/message-error-example/message-error-example.component.ts b/projects/demo/src/app/components-example/message/message-error-example/message-error-example.component.ts
new file mode 100644
index 00000000..49ad84bb
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-error-example/message-error-example.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IdsErrorMessageComponent } from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+ selector: 'app-message-error-example',
+ imports: [
+ IdsErrorMessageComponent,
+ TranslateModule,
+ ],
+ templateUrl: './message-error-example.component.html',
+})
+export class MessageErrorExampleComponent {}
diff --git a/projects/demo/src/app/components-example/message/message-examples.ts b/projects/demo/src/app/components-example/message/message-examples.ts
new file mode 100644
index 00000000..040befaf
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-examples.ts
@@ -0,0 +1,96 @@
+import { MessageErrorExampleComponent } from './message-error-example/message-error-example.component';
+import { MessageHintExampleComponent } from './message-hint-example/message-hint-example.component';
+import { MessageSizesExampleComponent } from './message-sizes-example/message-sizes-example.component';
+import { MessageSuccessExampleComponent } from './message-success-example/message-success-example.component';
+import { MessageSuffixExampleComponent } from './message-suffix-example/message-suffix-example.component';
+import { MessageValidationExampleComponent } from './message-validation-example/message-validation-example.component';
+import { MessageVariantsExampleComponent } from './message-variants-example/message-variants-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const MESSAGE_EXAMPLES: IdsExampleDef[] = [
+ {
+ id: 'message-hint',
+ title: 'EXAMPLES.MESSAGE.HINT.TITLE',
+ description: 'EXAMPLES.MESSAGE.HINT.DESCRIPTION',
+ component: MessageHintExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/message/message-hint-example/message-hint-example.component.html',
+ TSpath: 'assets/examples/message/message-hint-example/message-hint-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'message-success',
+ title: 'EXAMPLES.MESSAGE.SUCCESS.TITLE',
+ description: 'EXAMPLES.MESSAGE.SUCCESS.DESCRIPTION',
+ component: MessageSuccessExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/message/message-success-example/message-success-example.component.html',
+ TSpath: 'assets/examples/message/message-success-example/message-success-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'message-error',
+ title: 'EXAMPLES.MESSAGE.ERROR.TITLE',
+ description: 'EXAMPLES.MESSAGE.ERROR.DESCRIPTION',
+ component: MessageErrorExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/message/message-error-example/message-error-example.component.html',
+ TSpath: 'assets/examples/message/message-error-example/message-error-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'message-suffix',
+ title: 'EXAMPLES.MESSAGE.SUFFIX.TITLE',
+ description: 'EXAMPLES.MESSAGE.SUFFIX.DESCRIPTION',
+ component: MessageSuffixExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/message/message-suffix-example/message-suffix-example.component.html',
+ TSpath: 'assets/examples/message/message-suffix-example/message-suffix-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'message-sizes',
+ title: 'EXAMPLES.MESSAGE.SIZES.TITLE',
+ description: 'EXAMPLES.MESSAGE.SIZES.DESCRIPTION',
+ component: MessageSizesExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/message/message-sizes-example/message-sizes-example.component.html',
+ TSpath: 'assets/examples/message/message-sizes-example/message-sizes-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'message-variants',
+ title: 'EXAMPLES.MESSAGE.VARIANTS.TITLE',
+ description: 'EXAMPLES.MESSAGE.VARIANTS.DESCRIPTION',
+ component: MessageVariantsExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/message/message-variants-example/message-variants-example.component.html',
+ TSpath: 'assets/examples/message/message-variants-example/message-variants-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'message-validation',
+ title: 'EXAMPLES.MESSAGE.VALIDATION.TITLE',
+ description: 'EXAMPLES.MESSAGE.VALIDATION.DESCRIPTION',
+ component: MessageValidationExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/message/message-validation-example/message-validation-example.component.html',
+ TSpath: 'assets/examples/message/message-validation-example/message-validation-example.component.ts',
+ },
+ ],
+ },
+];
diff --git a/projects/demo/src/app/components-example/message/message-hint-example/message-hint-example.component.html b/projects/demo/src/app/components-example/message/message-hint-example/message-hint-example.component.html
new file mode 100644
index 00000000..73703dfe
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-hint-example/message-hint-example.component.html
@@ -0,0 +1,10 @@
+
+
+ {{ "EXAMPLES.MESSAGE.HINT.DEFAULT" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+ {{ "EXAMPLES.MESSAGE.HINT.DISABLED" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+
+ dense
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+ compact
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+ comfortable
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+ spacious
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.SUFFIX" | translate }}
+
+
+ {{ "EXAMPLES.MESSAGE.COMMON.SUCCESS" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.SUFFIX" | translate }}
+
+
+ {{ "EXAMPLES.MESSAGE.COMMON.ERROR" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.SUFFIX" | translate }}
+
+
diff --git a/projects/demo/src/app/components-example/message/message-suffix-example/message-suffix-example.component.ts b/projects/demo/src/app/components-example/message/message-suffix-example/message-suffix-example.component.ts
new file mode 100644
index 00000000..c0de31cc
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-suffix-example/message-suffix-example.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import {
+ IdsErrorMessageComponent,
+ IdsHintMessageComponent,
+ IdsMessageSuffixDirective,
+ IdsSuccessMessageComponent,
+} from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+ selector: 'app-message-suffix-example',
+ imports: [
+ IdsErrorMessageComponent,
+ IdsHintMessageComponent,
+ IdsMessageSuffixDirective,
+ IdsSuccessMessageComponent,
+ TranslateModule,
+ ],
+ templateUrl: './message-suffix-example.component.html',
+})
+export class MessageSuffixExampleComponent {}
diff --git a/projects/demo/src/app/components-example/message/message-validation-example/message-validation-example.component.html b/projects/demo/src/app/components-example/message/message-validation-example/message-validation-example.component.html
new file mode 100644
index 00000000..4d79ce07
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-validation-example/message-validation-example.component.html
@@ -0,0 +1,22 @@
+@let fieldName = "EXAMPLES.MESSAGE.VALIDATION.CONTENT.LABEL" | translate;
+
+
diff --git a/projects/demo/src/app/components-example/message/message-validation-example/message-validation-example.component.ts b/projects/demo/src/app/components-example/message/message-validation-example/message-validation-example.component.ts
new file mode 100644
index 00000000..a1c9bf45
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-validation-example/message-validation-example.component.ts
@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { FormsModule, NgModel } from '@angular/forms';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import {
+ IdsErrorDefinitionDirective,
+ IdsErrorMessageComponent,
+ IdsFormFieldComponent,
+ IdsHintMessageComponent,
+ IdsInputDirective,
+ IdsLabelDirective,
+} from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+ selector: 'app-message-validation-example',
+ imports: [
+ FormsModule,
+ IdsButtonComponent,
+ IdsErrorDefinitionDirective,
+ IdsErrorMessageComponent,
+ IdsFormFieldComponent,
+ IdsHintMessageComponent,
+ IdsInputDirective,
+ IdsLabelDirective,
+ TranslateModule,
+ ],
+ templateUrl: './message-validation-example.component.html',
+})
+export class MessageValidationExampleComponent {
+ protected _email = '';
+
+ protected _onSubmit(field: NgModel): void {
+ field.control.markAllAsTouched();
+ }
+}
diff --git a/projects/demo/src/app/components-example/message/message-variants-example/message-variants-example.component.html b/projects/demo/src/app/components-example/message/message-variants-example/message-variants-example.component.html
new file mode 100644
index 00000000..5ab973ca
--- /dev/null
+++ b/projects/demo/src/app/components-example/message/message-variants-example/message-variants-example.component.html
@@ -0,0 +1,14 @@
+
+
+ {{ "EXAMPLES.MESSAGE.VARIANTS.CONTENT.SURFACE" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+ {{ "EXAMPLES.MESSAGE.VARIANTS.CONTENT.LIGHT" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
+ {{ "EXAMPLES.MESSAGE.VARIANTS.CONTENT.DARK" | translate }}
+ {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+
+
-
- @if (_messageDemoService.helperModel.isError) {
-
- {{ _messageDemoService.helperModel.message }}
- @if (_messageDemoService.helperModel.hasSuffix) {
- {{ _messageDemoService.helperModel.suffix }}
- }
-
- }
-
- @if (_messageDemoService.helperModel.isSuccess) {
-
- {{ _messageDemoService.helperModel.message }}
- @if (_messageDemoService.helperModel.hasSuffix) {
- {{ _messageDemoService.helperModel.suffix }}
- }
-
- }
-
- @if (!_messageDemoService.helperModel.isError && !_messageDemoService.helperModel.isSuccess) {
-
- {{ _messageDemoService.helperModel.message }}
- @if (_messageDemoService.helperModel.hasSuffix) {
- {{ _messageDemoService.helperModel.suffix }}
- }
-
- }
+
+ @for (example of messageExamples; track example.id) {
+
+ }
+
diff --git a/projects/demo/src/app/pages/message/message-demo.component.ts b/projects/demo/src/app/pages/message/message-demo.component.ts
index 7aa12be5..f8831f4f 100644
--- a/projects/demo/src/app/pages/message/message-demo.component.ts
+++ b/projects/demo/src/app/pages/message/message-demo.component.ts
@@ -1,34 +1,17 @@
+import { MessageDemoTryoutComponent } from './message-demo-tryout.component';
import { MessageDemoService } from './message-demo.service';
import { ControlTableComponent } from '../../components/control-table/control-table.component';
import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
import { TryoutComponent } from '../../components/tryout/tryout.component';
+import { MESSAGE_EXAMPLES } from '../../components-example/message/message-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
-import { Component, inject, Injectable, signal, DoCheck } from '@angular/core';
+import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { IdsSizeType } from '@i-cell/ids-angular/core';
-import {
- IdsHintMessageComponent,
- IdsErrorMessageComponent,
- IdsSuccessMessageComponent,
- IdsFormFieldVariantType,
- IdsMessageSuffixDirective,
- IdsMessageDirective,
-} from '@i-cell/ids-angular/forms';
-import {
- IDS_MESSAGE_PARENT_FORM_FIELD,
- IdsMessageParentFormField,
-} from '@i-cell/ids-angular/forms/components/message/types/message-parent-form-field';
import { TranslateModule } from '@ngx-translate/core';
-@Injectable()
-class DemoMessageState implements IdsMessageParentFormField {
- public size = signal('compact');
- public variant = signal('surface');
- public disabled = signal(false);
-}
-
@Component({
selector: 'app-message-demo',
imports: [
@@ -36,32 +19,17 @@ class DemoMessageState implements IdsMessageParentFormField {
TryoutComponent,
TranslateModule,
FormsModule,
- IdsHintMessageComponent,
- IdsErrorMessageComponent,
- IdsSuccessMessageComponent,
TryoutControlComponent,
ControlTableComponent,
- IdsMessageSuffixDirective,
- IdsMessageDirective,
- ],
- providers: [
- MessageDemoService,
- DemoMessageState,
- {
- provide: IDS_MESSAGE_PARENT_FORM_FIELD,
- useExisting: DemoMessageState,
- },
+ IdsExampleViewerComponent,
+ MessageDemoTryoutComponent,
],
+ providers: [MessageDemoService],
templateUrl: './message-demo.component.html',
styleUrl: './message-demo.component.scss',
})
-export class MessageDemoComponent implements DoCheck {
- protected _messageDemoService = inject(MessageDemoService);
- protected _demoMessageState = inject(DemoMessageState);
+export class MessageDemoComponent {
+ public readonly messageExamples = MESSAGE_EXAMPLES;
- public ngDoCheck(): void {
- this._demoMessageState.size.set(this._messageDemoService.model.size);
- this._demoMessageState.variant.set(this._messageDemoService.model.variant);
- this._demoMessageState.disabled.set(this._messageDemoService.inputModel.disabled);
- }
+ protected _messageDemoService = inject(MessageDemoService);
}
diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json
index c9775d35..f961f893 100644
--- a/projects/demo/src/assets/i18n/en.json
+++ b/projects/demo/src/assets/i18n/en.json
@@ -1729,6 +1729,56 @@
}
}
},
+ "MESSAGE": {
+ "COMMON": {
+ "HINT": "Use at least 8 characters with letters and numbers.",
+ "SUCCESS": "Your changes were saved successfully.",
+ "ERROR": "Something went wrong. Please try again.",
+ "SUFFIX": "Optional"
+ },
+ "HINT": {
+ "DEFAULT": "Default",
+ "DISABLED": "Disabled",
+ "TITLE": "Hint message",
+ "DESCRIPTION": "Use ids-hint-message for helper text below form fields or as standalone guidance."
+ },
+ "SUCCESS": {
+ "TITLE": "Success message",
+ "DESCRIPTION": "Use ids-success-message to confirm successful validation or completed actions."
+ },
+ "ERROR": {
+ "TITLE": "Error message",
+ "DESCRIPTION": "Use ids-error-message for error text. Project plain content for standalone messages, or ids-error-def mappings for form validation."
+ },
+ "SUFFIX": {
+ "TITLE": "Message suffix",
+ "DESCRIPTION": "Add optional trailing content with idsMessageSuffix on hint, success, and error messages."
+ },
+ "SIZES": {
+ "TITLE": "Message sizes",
+ "DESCRIPTION": "Messages support size: dense, compact (default), comfortable, and spacious."
+ },
+ "VARIANTS": {
+ "TITLE": "Message variants",
+ "DESCRIPTION": "Messages support variant: surface (default), light, and dark. Choose a background that matches the variant.",
+ "CONTENT": {
+ "SURFACE": "Surface",
+ "LIGHT": "Light",
+ "DARK": "Dark"
+ }
+ },
+ "VALIDATION": {
+ "TITLE": "Validation messages",
+ "DESCRIPTION": "Inside ids-form-field, ids-error-message with ids-error-def entries shows the first matching validation error when the control is touched or dirty.",
+ "CONTENT": {
+ "LABEL": "Email",
+ "PLACEHOLDER": "name@example.com",
+ "HINT": "We will never share your email.",
+ "INVALID_EMAIL": "Enter a valid email address.",
+ "SUBMIT": "Submit"
+ }
+ }
+ },
"TOOLTIP": {
"COMMON": {
"TRIGGER": "Hover me",
diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json
index e9ed9e4f..b79b5a2c 100644
--- a/projects/demo/src/assets/i18n/hu.json
+++ b/projects/demo/src/assets/i18n/hu.json
@@ -1725,6 +1725,56 @@
}
}
},
+ "MESSAGE": {
+ "COMMON": {
+ "HINT": "Használj legalább 8 karaktert betűkkel és számokkal.",
+ "SUCCESS": "A módosítások sikeresen mentve.",
+ "ERROR": "Valami hiba történt. Próbáld újra.",
+ "SUFFIX": "Opcionális"
+ },
+ "HINT": {
+ "DEFAULT": "Alapértelmezett",
+ "DISABLED": "Letiltva",
+ "TITLE": "Hint üzenet",
+ "DESCRIPTION": "Az ids-hint-message segítő szöveg mezők alatt vagy önálló útmutatóként."
+ },
+ "SUCCESS": {
+ "TITLE": "Success üzenet",
+ "DESCRIPTION": "Az ids-success-message sikeres validációt vagy befejezett műveletet jelez."
+ },
+ "ERROR": {
+ "TITLE": "Error üzenet",
+ "DESCRIPTION": "Az ids-error-message hibaszöveghez használható. Önálló üzenethez sima tartalom, validációhoz ids-error-def bejegyzések."
+ },
+ "SUFFIX": {
+ "TITLE": "Message suffix",
+ "DESCRIPTION": "Opcionális záró tartalom idsMessageSuffix attribútummal hint, success és error üzeneteknél."
+ },
+ "SIZES": {
+ "TITLE": "Message méretek",
+ "DESCRIPTION": "Az üzenetek méretei: dense, compact (alapértelmezett), comfortable és spacious."
+ },
+ "VARIANTS": {
+ "TITLE": "Message változatok",
+ "DESCRIPTION": "Az üzenetek változatai: surface (alapértelmezett), light és dark. A háttér illeszkedjen a változathoz.",
+ "CONTENT": {
+ "SURFACE": "Surface",
+ "LIGHT": "Light",
+ "DARK": "Dark"
+ }
+ },
+ "VALIDATION": {
+ "TITLE": "Validációs üzenetek",
+ "DESCRIPTION": "ids-form-field-en belül az ids-error-message ids-error-def bejegyzésekkel mutatja az első illeszkedő hibát, ha a mező touched vagy dirty.",
+ "CONTENT": {
+ "LABEL": "E-mail",
+ "PLACEHOLDER": "nev@pelda.hu",
+ "HINT": "Az e-mail címedet nem osztjuk meg.",
+ "INVALID_EMAIL": "Adj meg érvényes e-mail címet.",
+ "SUBMIT": "Küldés"
+ }
+ }
+ },
"TOOLTIP": {
"COMMON": {
"TRIGGER": "Vidd fölé az egeret",