nereo-material
Version:
This project contains [Material Design](https://material.io/design/) components built with Angular and Angular Material. Its goal is to provide components that are not yet implemented in [Angular Material](https://material.angular.io/).
79 lines • 9.27 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ContextualToolbarDisplayMode } from '../model/model';
let ContextualToolbarComponent = class ContextualToolbarComponent {
constructor() {
this.displayMode = ContextualToolbarDisplayMode.icons;
this.selectedAction = new EventEmitter();
this.clearSelection = new EventEmitter();
this.classesToApply = {};
this.progressMessage = new BehaviorSubject(null);
}
ngOnInit() {
this.setContextualization();
}
showButtonIcon() {
console.log("Display Mode", this.displayMode);
return this.displayMode != ContextualToolbarDisplayMode.text;
}
showButtonText() {
return this.displayMode != ContextualToolbarDisplayMode.icons;
}
setContextualization() {
this.classesToApply = {
'page-contextual-toolbar': this.contextualizeTo != 'card',
'card-contextual-toolbar': this.contextualizeTo == 'card'
};
}
setProgress(progressMessage) {
this.progressMessage.next(progressMessage);
}
stopProgress() {
this.progressMessage.next(null);
}
actionSelected(action) {
this.selectedAction.emit(action);
}
clear() {
this.clearSelection.emit();
}
};
__decorate([
Input(),
__metadata("design:type", Number)
], ContextualToolbarComponent.prototype, "count", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], ContextualToolbarComponent.prototype, "actions", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ContextualToolbarComponent.prototype, "displayMode", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], ContextualToolbarComponent.prototype, "moreActions", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ContextualToolbarComponent.prototype, "contextualizeTo", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], ContextualToolbarComponent.prototype, "selectedAction", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], ContextualToolbarComponent.prototype, "clearSelection", void 0);
ContextualToolbarComponent = __decorate([
Component({
selector: 'nm-contextual-toolbar',
template: "<mat-toolbar *ngIf=\"count > 0\" [ngClass]=\"classesToApply\">\n <ng-container *ngIf=\"progressMessage | async; then progressMode; else defaultMode\">\n </ng-container>\n <ng-template #defaultMode>\n <button mat-icon-button (click)=\"clear()\">\n <mat-icon>clear</mat-icon>\n </button>\n <span i18n=\"@@contextualSelectedItems\">{{count}} selected</span>\n\n <span class=\"spacer\"></span>\n \n <button mat-icon-button \n *ngFor=\"let action of actions\" \n (click)=\"actionSelected(action)\"\n [class.textButton]=\"showButtonText()\">\n <mat-icon [matTooltip]=\"action.tooltip ? action.tooltip : action.name\"\n *ngIf=\"showButtonIcon()\">{{action.icon}}</mat-icon>\n <span *ngIf=\"showButtonText()\">{{action.text}}</span>\n </button>\n \n <button mat-icon-button *ngIf=\"moreActions\" [matMenuTriggerFor]=\"menu\">\n <mat-icon matTooltip=\"more\" i18n-matTooltip=\"@@moreActions\">more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" yPosition=\"below\">\n <button mat-menu-item \n *ngFor=\"let moreAction of moreActions\" \n (click)=\"actionSelected(moreAction.name)\">{{moreAction.tooltip ? moreAction.tooltip: moreAction.name}}</button>\n </mat-menu>\n </ng-template>\n <ng-template #progressMode>\n <mat-spinner [diameter]='24'></mat-spinner>\n {{ progressMessage | async }}\n <span class=\"spacer\"></span>\n </ng-template>\n</mat-toolbar>",
styles: [":host mat-toolbar{background-color:var(--primary-lighter,#f5f5f5)!important;color:var(--primary,#000);left:0;top:0;width:100%;z-index:999}:host mat-toolbar>div{align-items:center;display:flex;width:100%}:host .page-contextual-toolbar{position:fixed}:host .textButton{margin-right:16px;text-transform:uppercase;width:auto}:host .textButton ::ng-deep .mat-button-wrapper{align-items:center;display:flex;gap:4px}:host mat-spinner{margin-left:8px;margin-right:8px}:host .card-contextual-toolbar{position:absolute}:host .spacer{flex:1 1 auto}"]
}),
__metadata("design:paramtypes", [])
], ContextualToolbarComponent);
export { ContextualToolbarComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dHVhbC10b29sYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25lcmVvLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsibGliL2NvbnRleHR1YWwtdG9vbGJhci9jb250ZXh0dWFsLXRvb2xiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBYyxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFbkQsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFPOUQsSUFBYSwwQkFBMEIsR0FBdkMsTUFBYSwwQkFBMEI7SUFvQnJDO1FBZFMsZ0JBQVcsR0FBaUMsNEJBQTRCLENBQUMsS0FBSyxDQUFDO1FBTTlFLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQWlCLENBQUM7UUFFbkQsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTlDLG1CQUFjLEdBQUcsRUFBRyxDQUFDO1FBRXJCLG9CQUFlLEdBQTZCLElBQUksZUFBZSxDQUFTLElBQUksQ0FBQyxDQUFDO0lBRTlELENBQUM7SUFFakIsUUFBUTtRQUNOLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxjQUFjO1FBQ1osT0FBTyxDQUFDLEdBQUcsQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQzlDLE9BQU8sSUFBSSxDQUFDLFdBQVcsSUFBSSw0QkFBNEIsQ0FBQyxJQUFJLENBQUM7SUFDL0QsQ0FBQztJQUVELGNBQWM7UUFDWixPQUFPLElBQUksQ0FBQyxXQUFXLElBQUksNEJBQTRCLENBQUMsS0FBSyxDQUFDO0lBQ2hFLENBQUM7SUFFTyxvQkFBb0I7UUFDMUIsSUFBSSxDQUFDLGNBQWMsR0FBRztZQUNwQix5QkFBeUIsRUFBRSxJQUFJLENBQUMsZUFBZSxJQUFJLE1BQU07WUFDekQseUJBQXlCLEVBQUUsSUFBSSxDQUFDLGVBQWUsSUFBSSxNQUFNO1NBQzFELENBQUE7SUFDSCxDQUFDO0lBRU0sV0FBVyxDQUFDLGVBQXVCO1FBQ3hDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxjQUFjLENBQUMsTUFBcUI7UUFDbEMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzdCLENBQUM7Q0FFRixDQUFBO0FBeERVO0lBQVIsS0FBSyxFQUFFOzt5REFBZ0I7QUFFZjtJQUFSLEtBQUssRUFBRTs7MkRBQTBCO0FBRXpCO0lBQVIsS0FBSyxFQUFFOzsrREFBZ0Y7QUFFL0U7SUFBUixLQUFLLEVBQUU7OytEQUE4QjtBQUU3QjtJQUFSLEtBQUssRUFBRTs7bUVBQXlCO0FBRXZCO0lBQVQsTUFBTSxFQUFFOztrRUFBb0Q7QUFFbkQ7SUFBVCxNQUFNLEVBQUU7O2tFQUFxQztBQWRuQywwQkFBMEI7SUFMdEMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLHVCQUF1QjtRQUNqQywrK0NBQWtEOztLQUVuRCxDQUFDOztHQUNXLDBCQUEwQixDQTBEdEM7U0ExRFksMEJBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBBY3Rpb25FbGVtZW50IH0gZnJvbSAnLi4vLi4vcHVibGljX2FwaSc7XG5pbXBvcnQgeyBDb250ZXh0dWFsVG9vbGJhckRpc3BsYXlNb2RlIH0gZnJvbSAnLi4vbW9kZWwvbW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdubS1jb250ZXh0dWFsLXRvb2xiYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vY29udGV4dHVhbC10b29sYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29udGV4dHVhbC10b29sYmFyLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ29udGV4dHVhbFRvb2xiYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpIGNvdW50OiAgbnVtYmVyO1xuXG4gIEBJbnB1dCgpIGFjdGlvbnM6IEFjdGlvbkVsZW1lbnRbXTtcblxuICBASW5wdXQoKSBkaXNwbGF5TW9kZTogQ29udGV4dHVhbFRvb2xiYXJEaXNwbGF5TW9kZSA9IENvbnRleHR1YWxUb29sYmFyRGlzcGxheU1vZGUuaWNvbnM7XG5cbiAgQElucHV0KCkgbW9yZUFjdGlvbnM6IEFjdGlvbkVsZW1lbnRbXTtcblxuICBASW5wdXQoKSBjb250ZXh0dWFsaXplVG86IHN0cmluZztcblxuICBAT3V0cHV0KCkgc2VsZWN0ZWRBY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPEFjdGlvbkVsZW1lbnQ+KCk7XG5cbiAgQE91dHB1dCgpIGNsZWFyU2VsZWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGNsYXNzZXNUb0FwcGx5ID0geyB9O1xuXG4gIHByb2dyZXNzTWVzc2FnZSA6IEJlaGF2aW9yU3ViamVjdDxzdHJpbmc+ID0gbmV3IEJlaGF2aW9yU3ViamVjdDxzdHJpbmc+KG51bGwpO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5zZXRDb250ZXh0dWFsaXphdGlvbigpO1xuICB9XG5cbiAgc2hvd0J1dHRvbkljb24oKSB7XG4gICAgY29uc29sZS5sb2coXCJEaXNwbGF5IE1vZGVcIiwgdGhpcy5kaXNwbGF5TW9kZSk7XG4gICAgcmV0dXJuIHRoaXMuZGlzcGxheU1vZGUgIT0gQ29udGV4dHVhbFRvb2xiYXJEaXNwbGF5TW9kZS50ZXh0O1xuICB9XG5cbiAgc2hvd0J1dHRvblRleHQoKSB7XG4gICAgcmV0dXJuIHRoaXMuZGlzcGxheU1vZGUgIT0gQ29udGV4dHVhbFRvb2xiYXJEaXNwbGF5TW9kZS5pY29ucztcbiAgfVxuXG4gIHByaXZhdGUgc2V0Q29udGV4dHVhbGl6YXRpb24oKXtcbiAgICB0aGlzLmNsYXNzZXNUb0FwcGx5ID0ge1xuICAgICAgJ3BhZ2UtY29udGV4dHVhbC10b29sYmFyJzogdGhpcy5jb250ZXh0dWFsaXplVG8gIT0gJ2NhcmQnLFxuICAgICAgJ2NhcmQtY29udGV4dHVhbC10b29sYmFyJzogdGhpcy5jb250ZXh0dWFsaXplVG8gPT0gJ2NhcmQnICBcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc2V0UHJvZ3Jlc3MocHJvZ3Jlc3NNZXNzYWdlOiBzdHJpbmcpIHtcbiAgICB0aGlzLnByb2dyZXNzTWVzc2FnZS5uZXh0KHByb2dyZXNzTWVzc2FnZSk7XG4gIH1cblxuICBwdWJsaWMgc3RvcFByb2dyZXNzKCkge1xuICAgIHRoaXMucHJvZ3Jlc3NNZXNzYWdlLm5leHQobnVsbCk7XG4gIH1cblxuICBhY3Rpb25TZWxlY3RlZChhY3Rpb246IEFjdGlvbkVsZW1lbnQpOiB2b2lke1xuICAgIHRoaXMuc2VsZWN0ZWRBY3Rpb24uZW1pdChhY3Rpb24pO1xuICB9XG5cbiAgY2xlYXIoKTogdm9pZHtcbiAgICB0aGlzLmNsZWFyU2VsZWN0aW9uLmVtaXQoKTtcbiAgfVxuXG59XG4iXX0=