From b71694432ff568909ac10813da0b63a7535f0c07 Mon Sep 17 00:00:00 2001 From: KY Date: Sat, 13 Jul 2024 08:53:39 +0200 Subject: [PATCH] feat: invert messages --- .../lib/components/error/error.component.ts | 13 ++++++++--- .../src/lib/components/info/info.component.ts | 15 +++++++++---- .../message/message-defaults.component.ts | 8 ++++++- .../components/message/message.component.ts | 22 ++++++++++++++----- .../components/warning/warning.component.ts | 12 +++++++--- .../semantic-ui-theme.component.html | 1 + .../semantic-ui-theme.component.ts | 4 ++-- 7 files changed, 57 insertions(+), 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 index a0a3d29..13525a4 100644 --- a/projects/mantic-ui/src/lib/components/error/error.component.ts +++ b/projects/mantic-ui/src/lib/components/error/error.component.ts @@ -1,6 +1,8 @@ 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', @@ -8,11 +10,16 @@ import { IgnoredDirective } from '../../directives/ignored.directive'; 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 index e6c2409..9bb78a6 100644 --- a/projects/mantic-ui/src/lib/components/info/info.component.ts +++ b/projects/mantic-ui/src/lib/components/info/info.component.ts @@ -1,6 +1,8 @@ -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', @@ -8,11 +10,16 @@ import { IgnoredDirective } from '../../directives/ignored.directive'; 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 index f11468e..0ac0c57 100644 --- 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 index 53c6ade..8d8c215 100644 --- 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: 'close', closeIconSize: undefined }; +export class MessageComponent extends InvertibleComponent implements OnInit { + public static readonly defaults = { + closeIcon: 'close', + closeIconSize: undefined, + inverted: false, + invertedChange: new ReplaySubject(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 index dd5074b..0245086 100644 --- 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 index 0a7e15a..ae3c1e1 100644 --- 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 @@ + 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 index 79b0c04..e8e441f 100644 --- 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