diff --git a/.hintrc b/.hintrc index 5b02c110..1425d367 100644 --- a/.hintrc +++ b/.hintrc @@ -10,4 +10,4 @@ } ] } -} \ No newline at end of file +} diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html index 720eb37f..61275868 100644 --- a/projects/demo-app/src/app/app.component.html +++ b/projects/demo-app/src/app/app.component.html @@ -26,6 +26,12 @@

hug/ngx-components Demo

Overlay + + + home + Snackbar + + diff --git a/projects/demo-app/src/app/app.routes.ts b/projects/demo-app/src/app/app.routes.ts index fecd3d07..644558ff 100644 --- a/projects/demo-app/src/app/app.routes.ts +++ b/projects/demo-app/src/app/app.routes.ts @@ -5,5 +5,6 @@ export const appRoutes: Routes = [ { path: 'message-box', loadComponent: () => import('./message-box/message-box-demo.component').then(m => m.MessageBoxDemoComponent), data: { title: 'Message Box' } }, { path: 'numeric-stepper', loadComponent: () => import('./numeric-stepper/numeric-stepper-demo.component').then(m => m.NumericStepperDemoComponent), data: { title: 'Numeric Stepper' } }, { path: 'overlay', loadComponent: () => import('./overlay/overlay-demo.component').then(m => m.OverlayDemoComponent), data: { title: 'Overlay' } }, + { path: 'snackbar', loadComponent: () => import('./snackbar/snackbar-demo.component').then(m => m.SnackbarDemoComponent), data: { title: 'Snackbar' } }, { path: '**', redirectTo: 'message-box', pathMatch: 'prefix' } ]; diff --git a/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts b/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts index 8f98c4c6..923bfe30 100644 --- a/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts +++ b/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts @@ -8,7 +8,7 @@ import { MatTabsModule } from '@angular/material/tabs'; import { MatToolbarModule } from '@angular/material/toolbar'; import { Destroy } from '@hug/ngx-core'; import { NumericStepperComponent } from '@hug/ngx-numeric-stepper'; -import { Subject, debounceTime, distinctUntilChanged, map, takeUntil } from 'rxjs'; +import { debounceTime, distinctUntilChanged, map, Subject, takeUntil } from 'rxjs'; interface NumberFormControls { numberValue3: FormControl; @@ -17,7 +17,7 @@ interface NumberFormControls { numberValue6: FormControl; } -const numberValidator = (control: AbstractControl): Array | null => { +const numberValidator = (control: AbstractControl): string[] | null => { const val = +control.value; if (isNaN(val)) { return ['Not a number']; @@ -68,7 +68,7 @@ export class NumericStepperDemoComponent extends Destroy { super(); this.numberForm = this.formBuilder.group({ - numberValue3: this.formBuilder.control({ value: this.value3, disabled: false}, { validators: numberValidator, nonNullable: true }), + numberValue3: this.formBuilder.control({ value: this.value3, disabled: false }, { validators: numberValidator, nonNullable: true }), numberValue4: this.formBuilder.control(this.value4, { validators: [Validators.required, numberValidator], nonNullable: true }), numberValue5: this.formBuilder.control(this.value5, { validators: numberValidator, nonNullable: true }), numberValue6: this.formBuilder.control(this.value6, { validators: numberValidator, nonNullable: true }) diff --git a/projects/demo-app/src/app/snackbar/snackbar-demo.component.html b/projects/demo-app/src/app/snackbar/snackbar-demo.component.html new file mode 100644 index 00000000..e65d45a9 --- /dev/null +++ b/projects/demo-app/src/app/snackbar/snackbar-demo.component.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + +
+ + + + +
+ + + + + +
+ + + + Hello world ! I'm a simple snackbar. + + + + + + +
+ + + + {{ message.content }} + + + + + + +
+ + + + + + {{ message.content }} + + + + + + + + + + + {{ message.content }} + + + + + + + + + + + {{ message.content }} + + + + + + + +
+ + + + + + + {{ message.content }} + + + +
+
diff --git a/projects/demo-app/src/app/snackbar/snackbar-demo.component.scss b/projects/demo-app/src/app/snackbar/snackbar-demo.component.scss new file mode 100644 index 00000000..f6bcefd5 --- /dev/null +++ b/projects/demo-app/src/app/snackbar/snackbar-demo.component.scss @@ -0,0 +1,45 @@ +@use '@angular/material' as mat; + +:host { + .container { + display: block; + margin: auto; + max-width: 800px; + max-height: 800px; + min-height: 400px; + box-sizing: border-box; + border: solid rgba(0, 0, 0, 1) 1px; + } + + .btn-container { + width: 500px; + margin: auto; + margin-bottom: 12px; + + [background='danger'] { + background: mat.get-color-from-palette(mat.$red-palette, 400); + } + + [background='warning'] { + background: mat.get-color-from-palette(mat.$orange-palette, 400); + } + + [background='success'] { + background: mat.get-color-from-palette(mat.$green-palette, 400); + } + + [background='info'] { + background: mat.get-color-from-palette(mat.$blue-palette, 400); + } + + [background='default'] { + background: mat.get-color-from-palette(mat.$grey-palette, 900); + } + } + + .push-section { + width: 400px; + height: 4000px; + border: red solid 1px; + } +} diff --git a/projects/demo-app/src/app/snackbar/snackbar-demo.component.ts b/projects/demo-app/src/app/snackbar/snackbar-demo.component.ts new file mode 100644 index 00000000..e5a9125a --- /dev/null +++ b/projects/demo-app/src/app/snackbar/snackbar-demo.component.ts @@ -0,0 +1,81 @@ +import { AsyncPipe, NgFor, NgIf } from '@angular/common'; +import { ChangeDetectionStrategy, Component, EventEmitter } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MessageBoxComponent } from '@hug/ngx-message-box'; +import { SnackbarComponent } from '@hug/ngx-snackbar'; +import { Observable, defaultIfEmpty, filter, from, interval, map, scan } from 'rxjs'; + +class Message { + public constructor(public content = 'Some snackbar', public gate = true) { } +} + +@Component({ + selector: 'app-snackbar-demo', + styleUrls: ['./snackbar-demo.component.scss'], + templateUrl: './snackbar-demo.component.html', + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + AsyncPipe, + MatButtonModule, + MatCardModule, + MatIconModule, + MatTabsModule, + MessageBoxComponent, + NgIf, + NgFor, + SnackbarComponent + ] +}) +export class SnackbarDemoComponent { + public tabIndex = 1; + + /* + The example below demonstrate how you can dynamically add snackbars using *ngFor structural directive. + Here the Observable simulate items being push from the server + */ + public messages$: Observable; + + public dangers$: Observable; + public warnings$: Observable; + public successes$: Observable; + public infos$: Observable; + + public push = new EventEmitter(); + + public simpleGate = false; + + public constructor() { + this.dangers$ = from(this.push).pipe( + filter(type => type === 'danger'), + map(() => new Message('Danger snackbar')), + scan((acc, curr) => [...acc, curr], [] as Message[]), + defaultIfEmpty([] as Message[])); + + this.warnings$ = from(this.push).pipe( + filter(type => type === 'warning'), + map(() => new Message('Warning snackbar')), + scan((acc, curr) => [...acc, curr], [] as Message[]), + defaultIfEmpty([] as Message[])); + + this.successes$ = from(this.push).pipe( + filter(type => type === 'success'), + map(() => new Message('Success snackbar')), + scan((acc, curr) => [...acc, curr], [] as Message[]), + defaultIfEmpty([] as Message[])); + + this.infos$ = from(this.push).pipe( + filter(type => type === 'info'), + map(() => new Message('Info snackbar')), + scan((acc, curr) => [...acc, curr], [] as Message[]), + defaultIfEmpty([] as Message[])); + + this.messages$ = interval(2000).pipe( + map(() => new Message('Server push snackbar')), + scan((acc, curr) => [...acc, curr], [] as Message[]), + defaultIfEmpty([] as Message[])); + } +} diff --git a/projects/message-box/src/message-box.component.scss b/projects/message-box/src/message-box.component.scss index 0b489046..a874f6b4 100644 --- a/projects/message-box/src/message-box.component.scss +++ b/projects/message-box/src/message-box.component.scss @@ -90,9 +90,7 @@ message-box { > .mat-card-actions { margin: 0; padding: 0; - position: absolute; - right: 0; - top: 0; + flex: 0 0 auto; [mat-icon-button] { mat-icon {