feat(message): add samples

projects/demo/src/app/components-example/message/message-error-example/message-error-example.component.html

@@ -0,0 +1 @@
+<ids-error-message>{{ "EXAMPLES.MESSAGE.COMMON.ERROR" | translate }}</ids-error-message>

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 {}

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',
+      },
+    ],
+  },
+];

projects/demo/src/app/components-example/message/message-hint-example/message-hint-example.component.html

@@ -0,0 +1,10 @@
+<div class="flex flex-col gap-4 max-w-xl">
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.MESSAGE.HINT.DEFAULT" | translate }}</span>
+    <ids-hint-message>{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.MESSAGE.HINT.DISABLED" | translate }}</span>
+    <ids-hint-message [disabled]="true">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+</div>

projects/demo/src/app/components-example/message/message-hint-example/message-hint-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IdsHintMessageComponent } from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-message-hint-example',
+  imports: [
+    IdsHintMessageComponent,
+    TranslateModule,
+  ],
+  templateUrl: './message-hint-example.component.html',
+})
+export class MessageHintExampleComponent {}

projects/demo/src/app/components-example/message/message-sizes-example/message-sizes-example.component.html

@@ -0,0 +1,18 @@
+<div class="flex flex-col gap-4 max-w-xl">
+  <div class="grid gap-2">
+    <span>dense</span>
+    <ids-hint-message size="dense">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+  <div class="grid gap-2">
+    <span>compact</span>
+    <ids-hint-message size="compact">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+  <div class="grid gap-2">
+    <span>comfortable</span>
+    <ids-hint-message size="comfortable">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+  <div class="grid gap-2">
+    <span>spacious</span>
+    <ids-hint-message size="spacious">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+</div>

projects/demo/src/app/components-example/message/message-sizes-example/message-sizes-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IdsHintMessageComponent } from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-message-sizes-example',
+  imports: [
+    IdsHintMessageComponent,
+    TranslateModule,
+  ],
+  templateUrl: './message-sizes-example.component.html',
+})
+export class MessageSizesExampleComponent {}

projects/demo/src/app/components-example/message/message-success-example/message-success-example.component.html

@@ -0,0 +1 @@
+<ids-success-message>{{ "EXAMPLES.MESSAGE.COMMON.SUCCESS" | translate }}</ids-success-message>

projects/demo/src/app/components-example/message/message-success-example/message-success-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IdsSuccessMessageComponent } from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-message-success-example',
+  imports: [
+    IdsSuccessMessageComponent,
+    TranslateModule,
+  ],
+  templateUrl: './message-success-example.component.html',
+})
+export class MessageSuccessExampleComponent {}

projects/demo/src/app/components-example/message/message-suffix-example/message-suffix-example.component.html

@@ -0,0 +1,14 @@
+<div class="flex flex-col gap-4 max-w-xl">
+  <ids-hint-message>
+    {{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}
+    <span idsMessageSuffix>{{ "EXAMPLES.MESSAGE.COMMON.SUFFIX" | translate }}</span>
+  </ids-hint-message>
+  <ids-success-message>
+    {{ "EXAMPLES.MESSAGE.COMMON.SUCCESS" | translate }}
+    <span idsMessageSuffix>{{ "EXAMPLES.MESSAGE.COMMON.SUFFIX" | translate }}</span>
+  </ids-success-message>
+  <ids-error-message>
+    {{ "EXAMPLES.MESSAGE.COMMON.ERROR" | translate }}
+    <span idsMessageSuffix>{{ "EXAMPLES.MESSAGE.COMMON.SUFFIX" | translate }}</span>
+  </ids-error-message>
+</div>

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 {}

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;
+
+<form class="flex flex-col gap-ids-container-gap-4 max-w-80" (ngSubmit)="_onSubmit(emailField)">
+  <ids-form-field>
+    <ids-label>{{ fieldName }}</ids-label>
+    <input
+      #emailField="ngModel"
+      idsInput
+      email
+      name="email"
+      required
+      [placeholder]="'EXAMPLES.MESSAGE.VALIDATION.CONTENT.PLACEHOLDER' | translate"
+      [(ngModel)]="_email"
+    />
+    <ids-hint-message>{{ "EXAMPLES.MESSAGE.VALIDATION.CONTENT.HINT" | translate }}</ids-hint-message>
+    <ids-error-message>
+      <ids-error-def code="required">{{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName } }}</ids-error-def>
+      <ids-error-def code="email">{{ "EXAMPLES.MESSAGE.VALIDATION.CONTENT.INVALID_EMAIL" | translate }}</ids-error-def>
+    </ids-error-message>
+  </ids-form-field>
+  <button type="submit" idsButton>{{ "EXAMPLES.MESSAGE.VALIDATION.CONTENT.SUBMIT" | translate }}</button>
+</form>

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();
+  }
+}

projects/demo/src/app/components-example/message/message-variants-example/message-variants-example.component.html

@@ -0,0 +1,14 @@
+<div class="flex flex-col gap-4 max-w-xl">
+  <div class="grid gap-2 message-variants-example__panel">
+    <span>{{ "EXAMPLES.MESSAGE.VARIANTS.CONTENT.SURFACE" | translate }}</span>
+    <ids-hint-message variant="surface">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+  <div class="grid gap-2 message-variants-example__panel message-variants-example__panel--light">
+    <span>{{ "EXAMPLES.MESSAGE.VARIANTS.CONTENT.LIGHT" | translate }}</span>
+    <ids-hint-message variant="light">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+  <div class="grid gap-2 message-variants-example__panel">
+    <span>{{ "EXAMPLES.MESSAGE.VARIANTS.CONTENT.DARK" | translate }}</span>
+    <ids-hint-message variant="dark">{{ "EXAMPLES.MESSAGE.COMMON.HINT" | translate }}</ids-hint-message>
+  </div>
+</div>

projects/demo/src/app/components-example/message/message-variants-example/message-variants-example.component.scss

@@ -0,0 +1,9 @@
+.message-variants-example__panel {
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+}
+
+.message-variants-example__panel--light {
+  background-color: #1a1a1a;
+  color: #fff;
+}

projects/demo/src/app/components-example/message/message-variants-example/message-variants-example.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IdsHintMessageComponent } from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-message-variants-example',
+  imports: [
+    IdsHintMessageComponent,
+    TranslateModule,
+  ],
+  templateUrl: './message-variants-example.component.html',
+  styleUrl: './message-variants-example.component.scss',
+})
+export class MessageVariantsExampleComponent {}

projects/demo/src/app/pages/message/message-demo-tryout.component.html

@@ -0,0 +1,26 @@
+@if (_messageDemoService.helperModel.isError) {
+  <ids-error-message>
+    {{ _messageDemoService.helperModel.message }}
+    @if (_messageDemoService.helperModel.hasSuffix) {
+      <span idsMessageSuffix>{{ _messageDemoService.helperModel.suffix }}</span>
+    }
+  </ids-error-message>
+}
+
+@if (_messageDemoService.helperModel.isSuccess) {
+  <ids-success-message>
+    {{ _messageDemoService.helperModel.message }}
+    @if (_messageDemoService.helperModel.hasSuffix) {
+      <span idsMessageSuffix>{{ _messageDemoService.helperModel.suffix }}</span>
+    }
+  </ids-success-message>
+}
+
+@if (!_messageDemoService.helperModel.isError && !_messageDemoService.helperModel.isSuccess) {
+  <ids-hint-message>
+    {{ _messageDemoService.helperModel.message }}
+    @if (_messageDemoService.helperModel.hasSuffix) {
+      <span idsMessageSuffix>{{ _messageDemoService.helperModel.suffix }}</span>
+    }
+  </ids-hint-message>
+}