sdk-message
Version:
Simple to use (Angular) component for displaying messages for a brief moment.
86 lines • 12.7 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export 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: "17.3.10", ngImport: i0, type: SDKMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: SDKMessageComponent, 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: "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: "17.3.10", ngImport: i0, type: SDKMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-message', 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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RrLW1lc3NhZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvc2RrLW1lc3NhZ2Uvc3JjL2xpYi9zZGstbWVzc2FnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9zZGstbWVzc2FnZS9zcmMvbGliL3Nkay1tZXNzYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFROUYsTUFBTSxPQUFPLG1CQUFtQjtJQU5oQztRQU9JOzttRkFFMkU7UUFDckUsWUFBTyxHQUFXLEVBQUUsQ0FBQztRQUNyQixXQUFNLEdBQVcsRUFBRSxDQUFDO1FBQ3BCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsVUFBSyxHQUFXLENBQUMsQ0FBQztRQUNqQixrQkFBYSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBT3RELGdCQUFXLEdBQVksS0FBSyxDQUFDO1FBQzdCLGFBQVEsR0FBVyxFQUFFLENBQUM7S0E2RGhDO0lBekRHOzsrRUFFMkU7SUFDcEUsV0FBVyxDQUFDLEtBQVU7UUFDL0IsSUFBSSxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQztZQUUzQyxJQUFJLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxFQUFFLEVBQUUsQ0FBQztnQkFDM0MsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO2dCQUNqQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztnQkFDeEIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ25CLENBQUM7aUJBQU0sQ0FBQztnQkFDUCxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztnQkFDekIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7Z0JBQ25CLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNsQixDQUFDO1FBQ0YsQ0FBQztJQUNGLENBQUM7SUFFUyxlQUFlO1FBQ3hCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZixJQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztnQkFDcEIsSUFBSSxJQUFJLENBQUMsTUFBTSxLQUFLLEVBQUUsRUFBRSxDQUFDO29CQUN4QixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLGtCQUFrQixFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztvQkFDakYsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO2dCQUMxRCxDQUFDO2dCQUVELElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUM7b0JBQ2pELElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO2dCQUNyRCxDQUFDO2dCQUVELElBQUksYUFBYSxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7Z0JBRTlFLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsZUFBZSxFQUFFLEdBQUcsYUFBYSxJQUFJLENBQUMsQ0FBQztZQUN4RixDQUFDO1FBQ0YsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVFOzsrRUFFMkU7SUFDcEUsVUFBVTtRQUNuQixJQUFJLENBQUMsTUFBTSxHQUFHLFdBQVcsQ0FBQyxHQUFHLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3JCLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRVMsU0FBUztRQUNsQixhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUFFUyxZQUFZO1FBQ3JCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUVqQixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNuQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzNCLENBQUM7K0dBNUVXLG1CQUFtQjttR0FBbkIsbUJBQW1CLGlUQ1JoQywyVEFHQTs7NEZES2EsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNDLGFBQWE7OEJBU2QsT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNJLGFBQWE7c0JBQXRCLE1BQU07Z0JBS2tCLFVBQVU7c0JBQWxDLFNBQVM7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnc2RrLW1lc3NhZ2UnLFxuXHR0ZW1wbGF0ZVVybDogJy4vc2RrLW1lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6IFsnLi9zZGstbWVzc2FnZS5jb21wb25lbnQuc2NzcyddXG59KVxuXG5leHBvcnQgY2xhc3MgU0RLTWVzc2FnZUNvbXBvbmVudCB7XG4gICAgLyoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXG4gICAgKiBJbnB1dC9PdXRwdXQgUGFyYW1ldGVyc1xuICAgICoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqL1xuXHRASW5wdXQoKSBtZXNzYWdlOiBzdHJpbmcgPSBcIlwiO1xuXHRASW5wdXQoKSBoZWlnaHQ6IHN0cmluZyA9IFwiXCI7XG5cdEBJbnB1dCgpIHN0eWxlOiBzdHJpbmcgPSBcIlwiO1xuXHRASW5wdXQoKSB0aW1lcjogbnVtYmVyID0gNTtcblx0QE91dHB1dCgpIG1lc3NhZ2VDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgLyoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXG4gICAgKiBDb21wb25lbnQgVmFyaWFibGVzXG4gICAgKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKiovXG5cdEBWaWV3Q2hpbGQoJ3Nka21lc3NhZ2UnKSBzZGttZXNzYWdlITogRWxlbWVudFJlZjxhbnk+O1xuXG5cdHByb3RlY3RlZCBzaG93TWVzc2FnZTogYm9vbGVhbiA9IGZhbHNlO1xuXHRwcm90ZWN0ZWQgX21lc3NhZ2U6IHN0cmluZyA9IFwiXCI7XG5cblx0cHJpdmF0ZSBfdGltZXI6IGFueTtcblxuICAgIC8qKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxuICAgICogQ29tcG9uZW50IExpZmVjeWNsZSBNZXRob2RzXG4gICAgKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKiovXG5cdHByb3RlY3RlZCBuZ09uQ2hhbmdlcyhfYXJnczogYW55KTogdm9pZCB7XG5cdFx0aWYgKF9hcmdzLm1lc3NhZ2UpIHtcblx0XHRcdHRoaXMuX21lc3NhZ2UgPSBfYXJncy5tZXNzYWdlLmN1cnJlbnRWYWx1ZTtcblxuXHRcdFx0aWYgKHRoaXMuX21lc3NhZ2UgJiYgdGhpcy5fbWVzc2FnZSAhPT0gXCJcIikge1xuXHRcdFx0XHR0aGlzLnN0b3BUaW1lcigpO1xuXHRcdFx0XHR0aGlzLnNob3dNZXNzYWdlID0gdHJ1ZTtcblx0XHRcdFx0dGhpcy5zdGFydFRpbWVyKCk7XG5cdFx0XHR9IGVsc2Uge1xuXHRcdFx0XHR0aGlzLnNob3dNZXNzYWdlID0gZmFsc2U7XG5cdFx0XHRcdHRoaXMuX21lc3NhZ2UgPSBcIlwiO1xuXHRcdFx0XHR0aGlzLnN0b3BUaW1lcigpO1xuXHRcdFx0fVxuXHRcdH1cblx0fVxuXG5cdHByb3RlY3RlZCBuZ0FmdGVyVmlld0luaXQoKSB7XG5cdFx0c2V0VGltZW91dCgoKSA9PiB7XG5cdFx0XHRpZih0aGlzLnNka21lc3NhZ2UpIHtcblx0XHRcdFx0aWYgKHRoaXMuaGVpZ2h0ICE9PSBcIlwiKSB7XG5cdFx0XHRcdFx0dGhpcy5zZGttZXNzYWdlLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoXCItLW1lc3NhZ2UtaGVpZ2h0XCIsIHRoaXMuaGVpZ2h0KTtcblx0XHRcdFx0XHR0aGlzLnNka21lc3NhZ2UubmF0aXZlRWxlbWVudC5zdHlsZS5oZWlnaHQgPSB0aGlzLmhlaWdodDtcblx0XHRcdFx0fVxuXG5cdFx0XHRcdGlmICghdGhpcy5zZGttZXNzYWdlLm5hdGl2ZUVsZW1lbnQuc3R5bGUuaGVpZ2h0KSB7XG5cdFx0XHRcdFx0dGhpcy5zZGttZXNzYWdlLm5hdGl2ZUVsZW1lbnQuc3R5bGUuaGVpZ2h0ID0gXCIzNXB4XCI7XG5cdFx0XHRcdH1cblxuXHRcdFx0XHRsZXQgbWVzc2FnZUhlaWdodCA9IHBhcnNlSW50KHRoaXMuc2RrbWVzc2FnZS5uYXRpdmVFbGVtZW50LnN0eWxlLmhlaWdodCkgKiAtMTtcblxuXHRcdFx0XHR0aGlzLnNka21lc3NhZ2UubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eShcIi0tbWVzc2FnZS10b3BcIiwgYCR7bWVzc2FnZUhlaWdodH1weGApO1xuXHRcdFx0fVxuXHRcdH0sIDEpO1xuXHR9XG5cbiAgICAvKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcbiAgICAqIFByb3RlY3RlZCBNZXRob2RzXG4gICAgKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKiovXG5cdHByb3RlY3RlZCBzdGFydFRpbWVyKCkge1xuXHRcdHRoaXMuX3RpbWVyID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuXHRcdFx0dGhpcy5jbGVhck1lc3NhZ2UoKTtcblx0XHR9LCAodGhpcy50aW1lciAqIDEwMDApKTtcblx0fVxuXG5cdHByb3RlY3RlZCBzdG9wVGltZXIoKSB7XG5cdFx0Y2xlYXJJbnRlcnZhbCh0aGlzLl90aW1lcik7XG5cdH1cblxuXHRwcm90ZWN0ZWQgY2xlYXJNZXNzYWdlKCkge1xuXHRcdHRoaXMuc3RvcFRpbWVyKCk7XG5cblx0XHR0aGlzLl9tZXNzYWdlID0gXCJcIjtcblx0XHR0aGlzLm1lc3NhZ2VDaGFuZ2UuZW1pdCgpO1xuXHR9XG59XG4iLCI8ZGl2ICNzZGttZXNzYWdlIGNsYXNzPVwic2RrLW1lc3NhZ2VcIiBbbmdDbGFzc109XCJ7IHNob3c6IHNob3dNZXNzYWdlIH1cIiBbbmdTdHlsZV09XCJ7IHZpc2liaWxpdHk6IChzaG93TWVzc2FnZSkgPyAndmlzaWJsZScgOiAnaGlkZGVuJyB9XCIgW3N0eWxlXT1cInN0eWxlXCIgKGNsaWNrKT1cImNsZWFyTWVzc2FnZSgpXCIgKG1vdXNlb3Zlcik9XCJzdG9wVGltZXIoKVwiIChtb3VzZW91dCk9XCJzdGFydFRpbWVyKClcIj5cbiAgICA8ZGl2IGNsYXNzPVwibWVzc2FnZVwiIFtpbm5lckhUTUxdPVwiX21lc3NhZ2VcIj48L2Rpdj5cbjwvZGl2PlxuIl19