gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
94 lines • 12.1 kB
JavaScript
import { Component, ElementRef, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../icon/icon.directive";
/**
* A Toast notification component. Not to be used directly - see Notification service for
* documentation.
*/
export class Toast {
constructor(elementRef) {
this.elementRef = elementRef;
this.position = {
top: 10,
right: 10
};
this.dismissOnClick = true;
this.dismissing = false;
}
ngOnInit() {
this.messageLines = (this.message || '').split('\n');
}
ngAfterViewInit() {
this.initSwipeHandler();
}
ngOnDestroy() {
if (this.hammerManager) {
this.hammerManager.destroy();
this.hammerManager = undefined;
}
}
/**
* Returns the height of the toast div.
*/
getHeight() {
return this.toastRef.nativeElement.getBoundingClientRect().height;
}
/**
* Returns a CSS transform string for positioning
*/
getTransform() {
if (this.dismissing) {
return `translate3d(100%, ${this.position.top}px, 0)`;
}
else {
return `translate3d(0, ${this.position.top}px, 0)`;
}
}
/**
* Begin the dismiss animation
*/
startDismiss() {
this.dismissing = true;
}
/**
* Invoke the action onClick handler if defined.
*/
actionClick() {
if (typeof this.actionOnClick === 'function') {
this.actionOnClick();
}
}
/**
* Manual dismiss which is invoked when the toast is clicked.
*/
dismiss() {
if (this.dismissOnClick && typeof this.dismissFn === 'function') {
this.dismissFn();
}
}
/**
* Set up a Hammerjs-based swipe gesture handler to dismiss toasts.
*/
initSwipeHandler() {
this.hammerManager = new Hammer(this.elementRef.nativeElement);
this.hammerManager.on('swipe', (e) => {
if (e.pointerType === 'touch') {
// Hammerjs represents directions with an enum; 4 = right.
if (e.direction === 4) {
this.dismiss();
}
}
});
}
}
/** @nocollapse */ Toast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: Toast, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ Toast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: Toast, selector: "gtx-toast", viewQueries: [{ propertyName: "toastRef", first: true, predicate: ["toast"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gtx-toast z-depth-3\" #toast\n [class.dismissing]=\"dismissing\"\n [style.transform]=\"getTransform()\"\n [ngClass]=\"type\"\n (click)=\"dismiss()\"\n>\n <span class=\"gtx-toast-btn_close\"\n [hidden]=\"!dismissOnClick\">\n <icon>close</icon>\n </span>\n <span class=\"action\" *ngIf=\"actionLabel\">\n <button (click)=\"actionClick()\">\n {{ actionLabel }}\n </button>\n </span>\n <span class=\"message\">\n <ng-template ngFor let-line [ngForOf]=\"messageLines\" let-i=\"index\">\n <br *ngIf=\"i > 0\">\n <span class=\"line\">{{ line }}</span>\n </ng-template>\n </span>\n</div>\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.Icon, selector: "icon" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: Toast, decorators: [{
type: Component,
args: [{ selector: 'gtx-toast', template: "<div class=\"gtx-toast z-depth-3\" #toast\n [class.dismissing]=\"dismissing\"\n [style.transform]=\"getTransform()\"\n [ngClass]=\"type\"\n (click)=\"dismiss()\"\n>\n <span class=\"gtx-toast-btn_close\"\n [hidden]=\"!dismissOnClick\">\n <icon>close</icon>\n </span>\n <span class=\"action\" *ngIf=\"actionLabel\">\n <button (click)=\"actionClick()\">\n {{ actionLabel }}\n </button>\n </span>\n <span class=\"message\">\n <ng-template ngFor let-line [ngForOf]=\"messageLines\" let-i=\"index\">\n <br *ngIf=\"i > 0\">\n <span class=\"line\">{{ line }}</span>\n </ng-template>\n </span>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { toastRef: [{
type: ViewChild,
args: ['toast', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbm90aWZpY2F0aW9uL3RvYXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25vdGlmaWNhdGlvbi90b2FzdC50cGwuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7Ozs7QUFJL0Q7OztHQUdHO0FBS0gsTUFBTSxPQUFPLEtBQUs7SUFpQmQsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQWIxQyxhQUFRLEdBQVE7WUFDWixHQUFHLEVBQUUsRUFBRTtZQUNQLEtBQUssRUFBRSxFQUFFO1NBQ1osQ0FBQztRQUlGLG1CQUFjLEdBQVksSUFBSSxDQUFDO1FBQy9CLGVBQVUsR0FBWSxLQUFLLENBQUM7SUFLaUIsQ0FBQztJQUU5QyxRQUFRO1FBQ0osSUFBSSxDQUFDLFlBQVksR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pELENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDcEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUM3QixJQUFJLENBQUMsYUFBYSxHQUFHLFNBQVMsQ0FBQztTQUNsQztJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNILFNBQVM7UUFDTCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUMsTUFBTSxDQUFDO0lBQ3RFLENBQUM7SUFFRDs7T0FFRztJQUNILFlBQVk7UUFDUixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDakIsT0FBTyxxQkFBcUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLFFBQVEsQ0FBQztTQUN6RDthQUFNO1lBQ0gsT0FBTyxrQkFBa0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLFFBQVEsQ0FBQztTQUN0RDtJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNILFlBQVk7UUFDUixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXO1FBQ1AsSUFBSSxPQUFPLElBQUksQ0FBQyxhQUFhLEtBQUssVUFBVSxFQUFFO1lBQzFDLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztTQUN4QjtJQUNMLENBQUM7SUFHRDs7T0FFRztJQUNILE9BQU87UUFDSCxJQUFJLElBQUksQ0FBQyxjQUFjLElBQUksT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLFVBQVUsRUFBRTtZQUM3RCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7U0FDcEI7SUFDTCxDQUFDO0lBRUQ7O09BRUc7SUFDSyxnQkFBZ0I7UUFDcEIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQy9ELElBQUksQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQWMsRUFBRSxFQUFFO1lBQzlDLElBQUksQ0FBQyxDQUFDLFdBQVcsS0FBSyxPQUFPLEVBQUU7Z0JBQzNCLDBEQUEwRDtnQkFDMUQsSUFBSSxDQUFDLENBQUMsU0FBUyxLQUFLLENBQUMsRUFBRTtvQkFDbkIsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO2lCQUNsQjthQUNKO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDOztxSEEzRlEsS0FBSzt5R0FBTCxLQUFLLGtLQ2JsQixpc0JBc0JBOzJGRFRhLEtBQUs7a0JBSmpCLFNBQVM7K0JBQ0ksV0FBVztpR0FnQmlCLFFBQVE7c0JBQTdDLFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbIlxuaW1wb3J0IHtDb21wb25lbnQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCB0eXBlIFRvYXN0VHlwZSA9ICdkZWZhdWx0JyB8ICdlcnJvcicgfCAnc3VjY2VzcycgfCAnd2FybmluZyc7XG5cbi8qKlxuICogQSBUb2FzdCBub3RpZmljYXRpb24gY29tcG9uZW50LiBOb3QgdG8gYmUgdXNlZCBkaXJlY3RseSAtIHNlZSBOb3RpZmljYXRpb24gc2VydmljZSBmb3JcbiAqIGRvY3VtZW50YXRpb24uXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZ3R4LXRvYXN0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdG9hc3QudHBsLmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFRvYXN0IHtcbiAgICBtZXNzYWdlOiBzdHJpbmc7XG4gICAgbWVzc2FnZUxpbmVzOiBzdHJpbmdbXTtcbiAgICB0eXBlOiBUb2FzdFR5cGV8c3RyaW5nO1xuICAgIHBvc2l0aW9uOiBhbnkgPSB7XG4gICAgICAgIHRvcDogMTAsXG4gICAgICAgIHJpZ2h0OiAxMFxuICAgIH07XG4gICAgYWN0aW9uTGFiZWw6IHN0cmluZztcbiAgICBhY3Rpb25PbkNsaWNrOiBGdW5jdGlvbjtcbiAgICBkaXNtaXNzRm46IEZ1bmN0aW9uO1xuICAgIGRpc21pc3NPbkNsaWNrOiBib29sZWFuID0gdHJ1ZTtcbiAgICBkaXNtaXNzaW5nOiBib29sZWFuID0gZmFsc2U7XG4gICAgQFZpZXdDaGlsZCgndG9hc3QnLCB7IHN0YXRpYzogdHJ1ZSB9KSB0b2FzdFJlZjogRWxlbWVudFJlZjtcblxuICAgIHByaXZhdGUgaGFtbWVyTWFuYWdlcjogSGFtbWVyTWFuYWdlcjtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge31cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLm1lc3NhZ2VMaW5lcyA9ICh0aGlzLm1lc3NhZ2UgfHwgJycpLnNwbGl0KCdcXG4nKTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuaW5pdFN3aXBlSGFuZGxlcigpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5oYW1tZXJNYW5hZ2VyKSB7XG4gICAgICAgICAgICB0aGlzLmhhbW1lck1hbmFnZXIuZGVzdHJveSgpO1xuICAgICAgICAgICAgdGhpcy5oYW1tZXJNYW5hZ2VyID0gdW5kZWZpbmVkO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogUmV0dXJucyB0aGUgaGVpZ2h0IG9mIHRoZSB0b2FzdCBkaXYuXG4gICAgICovXG4gICAgZ2V0SGVpZ2h0KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiB0aGlzLnRvYXN0UmVmLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuaGVpZ2h0O1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFJldHVybnMgYSBDU1MgdHJhbnNmb3JtIHN0cmluZyBmb3IgcG9zaXRpb25pbmdcbiAgICAgKi9cbiAgICBnZXRUcmFuc2Zvcm0oKTogc3RyaW5nIHtcbiAgICAgICAgaWYgKHRoaXMuZGlzbWlzc2luZykge1xuICAgICAgICAgICAgcmV0dXJuIGB0cmFuc2xhdGUzZCgxMDAlLCAke3RoaXMucG9zaXRpb24udG9wfXB4LCAwKWA7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICByZXR1cm4gYHRyYW5zbGF0ZTNkKDAsICR7dGhpcy5wb3NpdGlvbi50b3B9cHgsIDApYDtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEJlZ2luIHRoZSBkaXNtaXNzIGFuaW1hdGlvblxuICAgICAqL1xuICAgIHN0YXJ0RGlzbWlzcygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kaXNtaXNzaW5nID0gdHJ1ZTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBJbnZva2UgdGhlIGFjdGlvbiBvbkNsaWNrIGhhbmRsZXIgaWYgZGVmaW5lZC5cbiAgICAgKi9cbiAgICBhY3Rpb25DbGljaygpOiB2b2lkIHtcbiAgICAgICAgaWYgKHR5cGVvZiB0aGlzLmFjdGlvbk9uQ2xpY2sgPT09ICdmdW5jdGlvbicpIHtcbiAgICAgICAgICAgIHRoaXMuYWN0aW9uT25DbGljaygpO1xuICAgICAgICB9XG4gICAgfVxuXG5cbiAgICAvKipcbiAgICAgKiBNYW51YWwgZGlzbWlzcyB3aGljaCBpcyBpbnZva2VkIHdoZW4gdGhlIHRvYXN0IGlzIGNsaWNrZWQuXG4gICAgICovXG4gICAgZGlzbWlzcygpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuZGlzbWlzc09uQ2xpY2sgJiYgdHlwZW9mIHRoaXMuZGlzbWlzc0ZuID09PSAnZnVuY3Rpb24nKSB7XG4gICAgICAgICAgICB0aGlzLmRpc21pc3NGbigpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogU2V0IHVwIGEgSGFtbWVyanMtYmFzZWQgc3dpcGUgZ2VzdHVyZSBoYW5kbGVyIHRvIGRpc21pc3MgdG9hc3RzLlxuICAgICAqL1xuICAgIHByaXZhdGUgaW5pdFN3aXBlSGFuZGxlcigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5oYW1tZXJNYW5hZ2VyID0gbmV3IEhhbW1lcih0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG4gICAgICAgIHRoaXMuaGFtbWVyTWFuYWdlci5vbignc3dpcGUnLCAoZTogSGFtbWVySW5wdXQpID0+IHtcbiAgICAgICAgICAgIGlmIChlLnBvaW50ZXJUeXBlID09PSAndG91Y2gnKSB7XG4gICAgICAgICAgICAgICAgLy8gSGFtbWVyanMgcmVwcmVzZW50cyBkaXJlY3Rpb25zIHdpdGggYW4gZW51bTsgNCA9IHJpZ2h0LlxuICAgICAgICAgICAgICAgIGlmIChlLmRpcmVjdGlvbiA9PT0gNCkge1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmRpc21pc3MoKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJndHgtdG9hc3Qgei1kZXB0aC0zXCIgI3RvYXN0XG4gICAgIFtjbGFzcy5kaXNtaXNzaW5nXT1cImRpc21pc3NpbmdcIlxuICAgICBbc3R5bGUudHJhbnNmb3JtXT1cImdldFRyYW5zZm9ybSgpXCJcbiAgICAgW25nQ2xhc3NdPVwidHlwZVwiXG4gICAgIChjbGljayk9XCJkaXNtaXNzKClcIlxuPlxuICAgIDxzcGFuIGNsYXNzPVwiZ3R4LXRvYXN0LWJ0bl9jbG9zZVwiXG4gICAgICAgIFtoaWRkZW5dPVwiIWRpc21pc3NPbkNsaWNrXCI+XG4gICAgICAgIDxpY29uPmNsb3NlPC9pY29uPlxuICAgIDwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cImFjdGlvblwiICpuZ0lmPVwiYWN0aW9uTGFiZWxcIj5cbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwiYWN0aW9uQ2xpY2soKVwiPlxuICAgICAgICAgICAge3sgYWN0aW9uTGFiZWwgfX1cbiAgICAgICAgPC9idXR0b24+XG4gICAgPC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwibWVzc2FnZVwiPlxuICAgICAgICA8bmctdGVtcGxhdGUgbmdGb3IgbGV0LWxpbmUgW25nRm9yT2ZdPVwibWVzc2FnZUxpbmVzXCIgbGV0LWk9XCJpbmRleFwiPlxuICAgICAgICAgICAgPGJyICpuZ0lmPVwiaSA+IDBcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwibGluZVwiPnt7IGxpbmUgfX08L3NwYW4+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9zcGFuPlxuPC9kaXY+XG4iXX0=