feat: invert messages

KY-Programming · Jul 13, 2024 · b716944 · b716944
1 parent 202f41c
commit b716944
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 18 deletions.
diff --git a/projects/mantic-ui/src/lib/components/error/error.component.ts b/projects/mantic-ui/src/lib/components/error/error.component.ts
@@ -1,18 +1,25 @@
 import { Component } from '@angular/core';
-import { BaseComponent } from '../../base/base.component';
+import { takeUntil } from 'rxjs/operators';
+import { InvertibleComponent } from '../../base/invertible.component';
 import { IgnoredDirective } from '../../directives/ignored.directive';
+import { MessageComponent } from '../message/message.component';
 
 @Component({
     selector: 'm-error',
     templateUrl: './error.component.html',
     styleUrls: ['./error.component.scss'],
     standalone: true,
     hostDirectives: [IgnoredDirective.default],
-    providers: [...BaseComponent.providers]
+    providers: [...InvertibleComponent.providers]
 })
-export class ErrorComponent extends BaseComponent {
+export class ErrorComponent extends InvertibleComponent {
     public constructor() {
         super();
         this.classes.registerFixed('visible', 'error', 'message');
     }
+
+    public override ngOnInit(): void {
+        super.ngOnInit();
+        MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));
+    }
 }
diff --git a/projects/mantic-ui/src/lib/components/info/info.component.ts b/projects/mantic-ui/src/lib/components/info/info.component.ts
@@ -1,18 +1,25 @@
-import { Component } from '@angular/core';
-import { BaseComponent } from '../../base/base.component';
+import { Component, OnInit } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { InvertibleComponent } from '../../base/invertible.component';
 import { IgnoredDirective } from '../../directives/ignored.directive';
+import { MessageComponent } from '../message/message.component';
 
 @Component({
     selector: 'm-info',
     templateUrl: './info.component.html',
     styleUrls: ['./info.component.scss'],
     standalone: true,
     hostDirectives: [IgnoredDirective.default],
-    providers: [...BaseComponent.providers]
+    providers: [...InvertibleComponent.providers]
 })
-export class InfoComponent extends BaseComponent {
+export class InfoComponent extends InvertibleComponent implements OnInit {
     public constructor() {
         super();
         this.classes.registerFixed('visible', 'info', 'message');
     }
+
+    public override ngOnInit(): void {
+        super.ngOnInit();
+        MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));
+    }
 }
diff --git a/projects/mantic-ui/src/lib/components/message/message-defaults.component.ts b/projects/mantic-ui/src/lib/components/message/message-defaults.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnDestroy } from '@angular/core';
+import { IconSize } from '../icon/icon-size';
 import { IconType } from '../icon/icon-type';
 import { MessageComponent } from './message.component';
-import { IconSize } from '../icon/icon-size';
 
 @Component({
     selector: 'm-message-defaults',
@@ -26,6 +26,12 @@ export class MessageDefaultsComponent implements OnDestroy {
         MessageComponent.defaults.closeIconSize = value;
     }
 
+    @Input()
+    public set inverted(value: boolean) {
+        MessageComponent.defaults.inverted = value;
+        MessageComponent.defaults.invertedChange.next(value);
+    }
+
     public ngOnDestroy(): void {
         if (this.currentCloseIcon === MessageComponent.defaults.closeIcon) {
             MessageComponent.defaults.closeIcon = this.previousCloseIcon;

diff --git a/projects/mantic-ui/src/lib/components/message/message.component.ts b/projects/mantic-ui/src/lib/components/message/message.component.ts
@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
-import { BaseComponent } from '../../base/base.component';
+import { Component, EventEmitter, HostBinding, HostListener, Input, OnInit, Output } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { InvertibleComponent } from '../../base/invertible.component';
 import { IgnoredDirective } from '../../directives/ignored.directive';
 import { BooleanLike } from '../../models/boolean-like';
 import { IconSize } from '../icon/icon-size';
@@ -21,10 +23,15 @@ export declare type MessageAttached = 'bottom' | 'top' | undefined;
         LoaderComponent
     ],
     hostDirectives: [IgnoredDirective.default],
-    providers: [...BaseComponent.providers]
+    providers: [...InvertibleComponent.providers]
 })
-export class MessageComponent extends BaseComponent {
-    public static readonly defaults = { closeIcon: <IconType>'close', closeIconSize: <IconSize>undefined };
+export class MessageComponent extends InvertibleComponent implements OnInit {
+    public static readonly defaults = {
+        closeIcon: <IconType>'close',
+        closeIconSize: <IconSize>undefined,
+        inverted: false,
+        invertedChange: new ReplaySubject<boolean>(1)
+    };
 
     private isPositive = false;
     private isSuccess = false;
@@ -158,6 +165,11 @@ export class MessageComponent extends BaseComponent {
             .registerFixed('visible', 'message');
     }
 
+    public override ngOnInit(): void {
+        super.ngOnInit();
+        MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));
+    }
+
     @HostListener('click')
     private onClick(): void {
         if (this.closable) {

diff --git a/projects/mantic-ui/src/lib/components/warning/warning.component.ts b/projects/mantic-ui/src/lib/components/warning/warning.component.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
-import { BaseComponent } from '../../base/base.component';
+import { takeUntil } from 'rxjs/operators';
+import { InvertibleComponent } from '../../base/invertible.component';
 import { IconComponent } from '../icon/icon.component';
 import { MessageComponent } from '../message/message.component';
 
@@ -13,9 +14,9 @@ import { MessageComponent } from '../message/message.component';
         CommonModule,
         IconComponent
     ],
-    providers: [...BaseComponent.providers]
+    providers: [...InvertibleComponent.providers]
 })
-export class WarningComponent extends BaseComponent {
+export class WarningComponent extends InvertibleComponent {
     protected readonly defaults = MessageComponent.defaults;
 
     @Input()
@@ -38,6 +39,11 @@ export class WarningComponent extends BaseComponent {
         this.classes.registerFixed('warning', 'message');
     }
 
+    public override ngOnInit(): void {
+        super.ngOnInit();
+        MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));
+    }
+
     public onClose(): void {
         this.closed = true;
         this.close.emit();

diff --git a/projects/semantic-ui/src/lib/semantic-ui-theme/semantic-ui-theme.component.html b/projects/semantic-ui/src/lib/semantic-ui-theme/semantic-ui-theme.component.html
@@ -7,5 +7,6 @@
 <m-dropdown-defaults [inverted]="dark" />
 <m-textarea-defaults [inverted]="dark" />
 <m-tab-group-defaults [inverted]="dark" />
+<m-message-defaults [inverted]="dark" />
 <m-modal-defaults [inverted]="dark" />
 <ng-content />
diff --git a/projects/semantic-ui/src/lib/semantic-ui-theme/semantic-ui-theme.component.ts b/projects/semantic-ui/src/lib/semantic-ui-theme/semantic-ui-theme.component.ts
@@ -1,10 +1,10 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { BooleanLike, ButtonDefaultsComponent, CheckboxDefaultsComponent, DropdownDefaultsComponent, FormDefaultsComponent, InputDefaultsComponent, ModalDefaultsComponent, SegmentDefaultsComponent, TabGroupDefaultsComponent, TableDefaultsComponent, TextareaDefaultsComponent, ThemeService, toBoolean } from '@mantic-ui/angular';
+import { BooleanLike, ButtonDefaultsComponent, CheckboxDefaultsComponent, DropdownDefaultsComponent, FormDefaultsComponent, InputDefaultsComponent, MessageDefaultsComponent, ModalDefaultsComponent, SegmentDefaultsComponent, TabGroupDefaultsComponent, TableDefaultsComponent, TextareaDefaultsComponent, ThemeService, toBoolean } from '@mantic-ui/angular';
 
 @Component({
     selector: 'm-semantic-ui-theme',
     standalone: true,
-    imports: [SegmentDefaultsComponent, TableDefaultsComponent, FormDefaultsComponent, InputDefaultsComponent, CheckboxDefaultsComponent, DropdownDefaultsComponent, TextareaDefaultsComponent, TabGroupDefaultsComponent, ModalDefaultsComponent, ButtonDefaultsComponent],
+    imports: [SegmentDefaultsComponent, TableDefaultsComponent, FormDefaultsComponent, InputDefaultsComponent, CheckboxDefaultsComponent, DropdownDefaultsComponent, TextareaDefaultsComponent, TabGroupDefaultsComponent, ModalDefaultsComponent, ButtonDefaultsComponent, MessageDefaultsComponent],
     templateUrl: './semantic-ui-theme.component.html',
     styleUrls: ['./semantic-ui-theme.component.scss'],
     encapsulation: ViewEncapsulation.None