@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
68 lines • 10 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { IconButtonComponent } from '../icon-button/icon-button.component';
import { StatusIndicatorComponent } from '../status-indicator/status-indicator.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class InlineMessageComponent {
constructor(el) {
this.el = el;
/**
* @ignore
*/
this.inlineMessageClass = 'nj-inline-message';
/**
* Inline message variant
*/
this.variant = 'error';
/**
* Whether inline message has status indicator or not
*/
this.hasStatus = true;
/**
* Whether inline message is closeable or not
*/
this.isClosable = false;
/**
* Output event when inline message is closed
*/
this.closeClick = new EventEmitter();
}
/**
* @ignore
*/
getVariantClass() {
if (!this.variant && this.variant === 'error') {
return '';
}
return `${this.inlineMessageClass}--${this.variant}`;
}
/**
* @ignore
*/
removeInlineMessage(event) {
this.el?.nativeElement?.remove();
this.closeClick.emit(event);
}
/**
* @ignore
*/
get isFatalError() {
return this.variant === 'fatal-error';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineMessageComponent, isStandalone: true, selector: "nj-inline-message", inputs: { variant: "variant", hasStatus: "hasStatus", isClosable: "isClosable" }, outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<div class=\"nj-inline-message\" [ngClass]=\"getVariantClass()\">\n <nj-status-indicator class=\"nj-inline-message__status\" *ngIf=\"hasStatus && !isFatalError\" [status]=\"variant\"></nj-status-indicator>\n <div class=\"nj-inline-message__content\">\n <h4 class=\"nj-inline-message__title\">\n <ng-content select=\"[njInlineMessageTitle]\"></ng-content>\n </h4>\n <p class=\"nj-inline-message__body\">\n <ng-content></ng-content>\n </p>\n </div>\n <nj-icon-button *ngIf=\"isClosable\" class=\"nj-inline-message__close\" icon=\"close\" [variant]=\"!isFatalError ? 'primary' : 'inverse'\"\n (buttonClick)=\"removeInlineMessage($event)\">\n </nj-icon-button>\n</div>\n", dependencies: [{ kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "component", type: StatusIndicatorComponent, selector: "nj-status-indicator", inputs: ["status", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-inline-message', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconButtonComponent, StatusIndicatorComponent, CommonModule], template: "<div class=\"nj-inline-message\" [ngClass]=\"getVariantClass()\">\n <nj-status-indicator class=\"nj-inline-message__status\" *ngIf=\"hasStatus && !isFatalError\" [status]=\"variant\"></nj-status-indicator>\n <div class=\"nj-inline-message__content\">\n <h4 class=\"nj-inline-message__title\">\n <ng-content select=\"[njInlineMessageTitle]\"></ng-content>\n </h4>\n <p class=\"nj-inline-message__body\">\n <ng-content></ng-content>\n </p>\n </div>\n <nj-icon-button *ngIf=\"isClosable\" class=\"nj-inline-message__close\" icon=\"close\" [variant]=\"!isFatalError ? 'primary' : 'inverse'\"\n (buttonClick)=\"removeInlineMessage($event)\">\n </nj-icon-button>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
type: Input
}], hasStatus: [{
type: Input
}], isClosable: [{
type: Input
}], closeClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5saW5lLW1lc3NhZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaW5saW5lLW1lc3NhZ2UvaW5saW5lLW1lc3NhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaW5saW5lLW1lc3NhZ2UvaW5saW5lLW1lc3NhZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUcsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDM0UsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sZ0RBQWdELENBQUM7OztBQVUxRixNQUFNLE9BQU8sc0JBQXNCO0lBMEJqQyxZQUFvQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQXpCbEM7O1dBRUc7UUFDYyx1QkFBa0IsR0FBRyxtQkFBbUIsQ0FBQztRQUUxRDs7V0FFRztRQUNNLFlBQU8sR0FBeUIsT0FBTyxDQUFDO1FBRWpEOztXQUVHO1FBQ00sY0FBUyxHQUFHLElBQUksQ0FBQztRQUUxQjs7V0FFRztRQUNNLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFFNUI7O1dBRUc7UUFDTyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztJQUVaLENBQUM7SUFFdEM7O09BRUc7SUFDSCxlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxPQUFPLEVBQUU7WUFDN0MsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUNELE9BQU8sR0FBRyxJQUFJLENBQUMsa0JBQWtCLEtBQUssSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ3ZELENBQUM7SUFFRDs7T0FFRztJQUNILG1CQUFtQixDQUFDLEtBQWlCO1FBQ25DLElBQUksQ0FBQyxFQUFFLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQUksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLE9BQU8sS0FBSyxhQUFhLENBQUM7SUFDeEMsQ0FBQzsrR0FuRFUsc0JBQXNCO21HQUF0QixzQkFBc0Isc01DYm5DLHdzQkFjQSw0Q0RIWSxtQkFBbUIsMk9BQUUsd0JBQXdCLDJGQUFFLFlBQVk7OzRGQUUxRCxzQkFBc0I7a0JBUGxDLFNBQVM7K0JBQ0UsbUJBQW1CLG1CQUVaLHVCQUF1QixDQUFDLE1BQU0sY0FDbkMsSUFBSSxXQUNQLENBQUMsbUJBQW1CLEVBQUUsd0JBQXdCLEVBQUUsWUFBWSxDQUFDO2lHQVc3RCxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csU0FBUztzQkFBakIsS0FBSztnQkFLRyxVQUFVO3NCQUFsQixLQUFLO2dCQUtJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IFN0YXR1c0luZGljYXRvckNvbXBvbmVudCB9IGZyb20gJy4uL3N0YXR1cy1pbmRpY2F0b3Ivc3RhdHVzLWluZGljYXRvci5jb21wb25lbnQnO1xuaW1wb3J0IHsgSW5saW5lTWVzc2FnZVZhcmlhbnQgfSBmcm9tICcuL2lubGluZS1tZXNzYWdlLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmotaW5saW5lLW1lc3NhZ2UnLFxuICB0ZW1wbGF0ZVVybDogJy4vaW5saW5lLW1lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0ljb25CdXR0b25Db21wb25lbnQsIFN0YXR1c0luZGljYXRvckNvbXBvbmVudCwgQ29tbW9uTW9kdWxlXVxufSlcbmV4cG9ydCBjbGFzcyBJbmxpbmVNZXNzYWdlQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHByaXZhdGUgcmVhZG9ubHkgaW5saW5lTWVzc2FnZUNsYXNzID0gJ25qLWlubGluZS1tZXNzYWdlJztcblxuICAvKipcbiAgICogSW5saW5lIG1lc3NhZ2UgdmFyaWFudFxuICAgKi9cbiAgQElucHV0KCkgdmFyaWFudDogSW5saW5lTWVzc2FnZVZhcmlhbnQgPSAnZXJyb3InO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIGlubGluZSBtZXNzYWdlIGhhcyBzdGF0dXMgaW5kaWNhdG9yIG9yIG5vdFxuICAgKi9cbiAgQElucHV0KCkgaGFzU3RhdHVzID0gdHJ1ZTtcblxuICAvKipcbiAgICogV2hldGhlciBpbmxpbmUgbWVzc2FnZSBpcyBjbG9zZWFibGUgb3Igbm90XG4gICAqL1xuICBASW5wdXQoKSBpc0Nsb3NhYmxlID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIE91dHB1dCBldmVudCB3aGVuIGlubGluZSBtZXNzYWdlIGlzIGNsb3NlZFxuICAgKi9cbiAgQE91dHB1dCgpIGNsb3NlQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHt9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGdldFZhcmlhbnRDbGFzcygpOiBzdHJpbmcge1xuICAgIGlmICghdGhpcy52YXJpYW50ICYmIHRoaXMudmFyaWFudCA9PT0gJ2Vycm9yJykge1xuICAgICAgcmV0dXJuICcnO1xuICAgIH1cbiAgICByZXR1cm4gYCR7dGhpcy5pbmxpbmVNZXNzYWdlQ2xhc3N9LS0ke3RoaXMudmFyaWFudH1gO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHJlbW92ZUlubGluZU1lc3NhZ2UoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcbiAgICB0aGlzLmVsPy5uYXRpdmVFbGVtZW50Py5yZW1vdmUoKTtcbiAgICB0aGlzLmNsb3NlQ2xpY2suZW1pdChldmVudCk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgZ2V0IGlzRmF0YWxFcnJvcigpIHtcbiAgICByZXR1cm4gdGhpcy52YXJpYW50ID09PSAnZmF0YWwtZXJyb3InO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibmotaW5saW5lLW1lc3NhZ2VcIiBbbmdDbGFzc109XCJnZXRWYXJpYW50Q2xhc3MoKVwiPlxuICA8bmotc3RhdHVzLWluZGljYXRvciBjbGFzcz1cIm5qLWlubGluZS1tZXNzYWdlX19zdGF0dXNcIiAqbmdJZj1cImhhc1N0YXR1cyAmJiAhaXNGYXRhbEVycm9yXCIgW3N0YXR1c109XCJ2YXJpYW50XCI+PC9uai1zdGF0dXMtaW5kaWNhdG9yPlxuICA8ZGl2IGNsYXNzPVwibmotaW5saW5lLW1lc3NhZ2VfX2NvbnRlbnRcIj5cbiAgICA8aDQgY2xhc3M9XCJuai1pbmxpbmUtbWVzc2FnZV9fdGl0bGVcIj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltuaklubGluZU1lc3NhZ2VUaXRsZV1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9oND5cbiAgICA8cCBjbGFzcz1cIm5qLWlubGluZS1tZXNzYWdlX19ib2R5XCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9wPlxuICA8L2Rpdj5cbiAgPG5qLWljb24tYnV0dG9uICpuZ0lmPVwiaXNDbG9zYWJsZVwiIGNsYXNzPVwibmotaW5saW5lLW1lc3NhZ2VfX2Nsb3NlXCIgaWNvbj1cImNsb3NlXCIgW3ZhcmlhbnRdPVwiIWlzRmF0YWxFcnJvciA/ICdwcmltYXJ5JyA6ICdpbnZlcnNlJ1wiXG4gICAgICAgICAgICAgICAgICAoYnV0dG9uQ2xpY2spPVwicmVtb3ZlSW5saW5lTWVzc2FnZSgkZXZlbnQpXCI+XG4gIDwvbmotaWNvbi1idXR0b24+XG48L2Rpdj5cbiJdfQ==