sdk-message
Version:
Simple to use (Angular) component for displaying messages for a brief moment.
119 lines (113 loc) • 6.84 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, ViewChild, Output, Input, Component, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class SDKMessageComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.message = "";
this.height = "";
this.style = "";
this.timer = 5;
this.messageChange = new EventEmitter();
this.showMessage = false;
this._message = "";
}
/**************************************************************************
* Component Lifecycle Methods
**************************************************************************/
ngOnChanges(_args) {
if (_args.message) {
this._message = _args.message.currentValue;
if (this._message && this._message !== "") {
this.stopTimer();
this.showMessage = true;
this.startTimer();
}
else {
this.showMessage = false;
this._message = "";
this.stopTimer();
}
}
}
ngAfterViewInit() {
setTimeout(() => {
if (this.sdkmessage) {
if (this.height !== "") {
this.sdkmessage.nativeElement.style.setProperty("--message-height", this.height);
this.sdkmessage.nativeElement.style.height = this.height;
}
if (!this.sdkmessage.nativeElement.style.height) {
this.sdkmessage.nativeElement.style.height = "35px";
}
let messageHeight = parseInt(this.sdkmessage.nativeElement.style.height) * -1;
this.sdkmessage.nativeElement.style.setProperty("--message-top", `${messageHeight}px`);
}
}, 1);
}
/**************************************************************************
* Protected Methods
**************************************************************************/
startTimer() {
this._timer = setInterval(() => {
this.clearMessage();
}, (this.timer * 1000));
}
stopTimer() {
clearInterval(this._timer);
}
clearMessage() {
this.stopTimer();
this._message = "";
this.messageChange.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKMessageComponent, isStandalone: true, selector: "sdk-message", inputs: { message: "message", height: "height", style: "style", timer: "timer" }, outputs: { messageChange: "messageChange" }, viewQueries: [{ propertyName: "sdkmessage", first: true, predicate: ["sdkmessage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #sdkmessage class=\"sdk-message\" [ngClass]=\"{ show: showMessage }\" [ngStyle]=\"{ visibility: (showMessage) ? 'visible' : 'hidden' }\" [style]=\"style\" (click)=\"clearMessage()\" (mouseover)=\"stopTimer()\" (mouseout)=\"startTimer()\">\n <div class=\"message\" [innerHTML]=\"_message\"></div>\n</div>\n", styles: [".sdk-message{position:absolute;top:var(--message-top, -35px);left:0;right:0;margin:0;height:var(--message-height, 35px);overflow:hidden;overflow-y:auto;z-index:99;display:flex;align-items:center;justify-content:center;background-color:var(--sdk-blue);color:#fff;transition:.25s;-webkit-transition:.25s;-moz-transition:.25s}.sdk-message .message{margin:0;padding:5px}.sdk-message.show{top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-message', standalone: true, imports: [CommonModule], template: "<div #sdkmessage class=\"sdk-message\" [ngClass]=\"{ show: showMessage }\" [ngStyle]=\"{ visibility: (showMessage) ? 'visible' : 'hidden' }\" [style]=\"style\" (click)=\"clearMessage()\" (mouseover)=\"stopTimer()\" (mouseout)=\"startTimer()\">\n <div class=\"message\" [innerHTML]=\"_message\"></div>\n</div>\n", styles: [".sdk-message{position:absolute;top:var(--message-top, -35px);left:0;right:0;margin:0;height:var(--message-height, 35px);overflow:hidden;overflow-y:auto;z-index:99;display:flex;align-items:center;justify-content:center;background-color:var(--sdk-blue);color:#fff;transition:.25s;-webkit-transition:.25s;-moz-transition:.25s}.sdk-message .message{margin:0;padding:5px}.sdk-message.show{top:0}\n"] }]
}], propDecorators: { message: [{
type: Input
}], height: [{
type: Input
}], style: [{
type: Input
}], timer: [{
type: Input
}], messageChange: [{
type: Output
}], sdkmessage: [{
type: ViewChild,
args: ['sdkmessage']
}] } });
class SDKMessageModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SDKMessageModule, imports: [SDKMessageComponent], exports: [SDKMessageComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKMessageModule, imports: [SDKMessageComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKMessageModule, decorators: [{
type: NgModule,
args: [{
imports: [
SDKMessageComponent
],
exports: [
SDKMessageComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
}]
}] });
/*
* Public API Surface of sdk-loading
*/
/**
* Generated bundle index. Do not edit.
*/
export { SDKMessageComponent, SDKMessageModule };
//# sourceMappingURL=sdk-message.mjs.map