systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
37 lines • 10.5 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../modal/dialog/dialog.service";
import * as i2 from "@angular/common";
export class ApplicationHeaderMenuEntry {
constructor(optionName, isDivider, action) {
this.optionName = optionName;
this.isDivider = isDivider;
this.action = action;
}
}
export class ApplicationHeaderComponent {
constructor(dialogService) {
this.dialogService = dialogService;
this.menuBars = false;
this.menu = [];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ApplicationHeaderComponent, deps: [{ token: i1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: ApplicationHeaderComponent, selector: "systelab-app-header", inputs: { userName: "userName", userFullName: "userFullName", title: "title", logoIcon: "logoIcon", menuBars: "menuBars", menu: "menu" }, ngImport: i0, template: "<nav class=\"slab-app-header-bar d-flex align-items-center align-items-stretch\">\n <i [ngClass]=\"logoIcon\" class=\"slab-app-header-modulab-icon\"></i>\n <div class=\"slab-app-header-labels-container slab-flex-1 text-truncate\">\n <label *ngIf=\"title\" class=\"slab-app-header-title text-truncate\">{{title}}</label>\n <small *ngIf=\"userFullName\" id=\"username\" class=\"d-block text-truncate\">{{userFullName}}\n </small>\n </div>\n <div class=\"d-flex align-items-center mr-2\">\n <ng-content></ng-content>\n </div>\n <div class=\"dropdown slab-app-header-user-container\">\n <div class=\"dropdown-toggle\" data-toggle=\"dropdown\" data-boundary=\"window\" *ngIf=\"menu.length > 0 || userName\">\n <button *ngIf=\"!menuBars\" class=\"slab-app-header-user-icon d-inline-block align-middle\">\n <div class=\"align-middle h-100\">\n <i class=\"icon-user align-bottom\"></i>\n </div>\n </button>\n <button *ngIf=\"menuBars\" class=\"slab-app-header-bars-icon d-inline-block align-middle\">\n <div class=\"align-middle h-100\">\n <i class=\"icon-list align-bottom\"></i>\n </div>\n </button>\n <label *ngIf=\"!menuBars\" class=\"text-truncate align-middle\">{{userName}}</label>\n <div class=\"dropdown-menu dropdown-menu-right slab-dropdown\" *ngIf=\"menu.length > 0\">\n <ul>\n @for (menuEntry of menu; track menuEntry.action) {\n <li (click)=\"menuEntry.action()\">{{menuEntry.optionName}}\n <div *ngIf=\"menuEntry.isDivider\" class=\"dropdown-divider\"></div>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ApplicationHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-app-header', template: "<nav class=\"slab-app-header-bar d-flex align-items-center align-items-stretch\">\n <i [ngClass]=\"logoIcon\" class=\"slab-app-header-modulab-icon\"></i>\n <div class=\"slab-app-header-labels-container slab-flex-1 text-truncate\">\n <label *ngIf=\"title\" class=\"slab-app-header-title text-truncate\">{{title}}</label>\n <small *ngIf=\"userFullName\" id=\"username\" class=\"d-block text-truncate\">{{userFullName}}\n </small>\n </div>\n <div class=\"d-flex align-items-center mr-2\">\n <ng-content></ng-content>\n </div>\n <div class=\"dropdown slab-app-header-user-container\">\n <div class=\"dropdown-toggle\" data-toggle=\"dropdown\" data-boundary=\"window\" *ngIf=\"menu.length > 0 || userName\">\n <button *ngIf=\"!menuBars\" class=\"slab-app-header-user-icon d-inline-block align-middle\">\n <div class=\"align-middle h-100\">\n <i class=\"icon-user align-bottom\"></i>\n </div>\n </button>\n <button *ngIf=\"menuBars\" class=\"slab-app-header-bars-icon d-inline-block align-middle\">\n <div class=\"align-middle h-100\">\n <i class=\"icon-list align-bottom\"></i>\n </div>\n </button>\n <label *ngIf=\"!menuBars\" class=\"text-truncate align-middle\">{{userName}}</label>\n <div class=\"dropdown-menu dropdown-menu-right slab-dropdown\" *ngIf=\"menu.length > 0\">\n <ul>\n @for (menuEntry of menu; track menuEntry.action) {\n <li (click)=\"menuEntry.action()\">{{menuEntry.optionName}}\n <div *ngIf=\"menuEntry.isDivider\" class=\"dropdown-divider\"></div>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</nav>\n" }]
}], ctorParameters: () => [{ type: i1.DialogService }], propDecorators: { userName: [{
type: Input
}], userFullName: [{
type: Input
}], title: [{
type: Input
}], logoIcon: [{
type: Input
}], menuBars: [{
type: Input
}], menu: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWhlYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvYXBwbGljYXRpb25mcmFtZS9oZWFkZXIvYXBwLWhlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvYXBwbGljYXRpb25mcmFtZS9oZWFkZXIvYXBwLWhlYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQUdqRCxNQUFNLE9BQU8sMEJBQTBCO0lBQ3RDLFlBQW1CLFVBQWtCLEVBQVMsU0FBa0IsRUFBUyxNQUFZO1FBQWxFLGVBQVUsR0FBVixVQUFVLENBQVE7UUFBUyxjQUFTLEdBQVQsU0FBUyxDQUFTO1FBQVMsV0FBTSxHQUFOLE1BQU0sQ0FBTTtJQUNyRixDQUFDO0NBQ0Q7QUFNRCxNQUFNLE9BQU8sMEJBQTBCO0lBU3RDLFlBQXNCLGFBQTRCO1FBQTVCLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBSGxDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsU0FBSSxHQUFpQyxFQUFFLENBQUM7SUFJeEQsQ0FBQzs4R0FYVywwQkFBMEI7a0dBQTFCLDBCQUEwQixxTUNadkMsKzJEQW1DQTs7MkZEdkJhLDBCQUEwQjtrQkFKdEMsU0FBUzsrQkFDQyxxQkFBcUI7a0ZBS2YsUUFBUTtzQkFBdkIsS0FBSztnQkFDVSxZQUFZO3NCQUEzQixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsUUFBUTtzQkFBdkIsS0FBSztnQkFDVSxRQUFRO3NCQUF2QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEaWFsb2dTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vbW9kYWwvZGlhbG9nL2RpYWxvZy5zZXJ2aWNlJztcblxuZXhwb3J0IGNsYXNzIEFwcGxpY2F0aW9uSGVhZGVyTWVudUVudHJ5IHtcblx0Y29uc3RydWN0b3IocHVibGljIG9wdGlvbk5hbWU6IHN0cmluZywgcHVibGljIGlzRGl2aWRlcjogYm9vbGVhbiwgcHVibGljIGFjdGlvbj86IGFueSkge1xuXHR9XG59XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ3N5c3RlbGFiLWFwcC1oZWFkZXInLFxuXHR0ZW1wbGF0ZVVybDogJ2FwcC1oZWFkZXIuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEFwcGxpY2F0aW9uSGVhZGVyQ29tcG9uZW50IHtcblxuXHRASW5wdXQoKSBwdWJsaWMgdXNlck5hbWU6IHN0cmluZztcblx0QElucHV0KCkgcHVibGljIHVzZXJGdWxsTmFtZTogc3RyaW5nO1xuXHRASW5wdXQoKSBwdWJsaWMgdGl0bGU6IHN0cmluZztcblx0QElucHV0KCkgcHVibGljIGxvZ29JY29uOiBzdHJpbmc7XG5cdEBJbnB1dCgpIHB1YmxpYyBtZW51QmFycyA9IGZhbHNlO1xuXHRASW5wdXQoKSBwdWJsaWMgbWVudTogQXBwbGljYXRpb25IZWFkZXJNZW51RW50cnlbXSA9IFtdO1xuXG5cdGNvbnN0cnVjdG9yKHByb3RlY3RlZCBkaWFsb2dTZXJ2aWNlOiBEaWFsb2dTZXJ2aWNlKSB7XG5cblx0fVxufVxuIiwiPG5hdiBjbGFzcz1cInNsYWItYXBwLWhlYWRlci1iYXIgZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBhbGlnbi1pdGVtcy1zdHJldGNoXCI+XG4gICAgPGkgW25nQ2xhc3NdPVwibG9nb0ljb25cIiBjbGFzcz1cInNsYWItYXBwLWhlYWRlci1tb2R1bGFiLWljb25cIj48L2k+XG4gICAgPGRpdiBjbGFzcz1cInNsYWItYXBwLWhlYWRlci1sYWJlbHMtY29udGFpbmVyIHNsYWItZmxleC0xIHRleHQtdHJ1bmNhdGVcIj5cbiAgICAgICAgPGxhYmVsICpuZ0lmPVwidGl0bGVcIiBjbGFzcz1cInNsYWItYXBwLWhlYWRlci10aXRsZSB0ZXh0LXRydW5jYXRlXCI+e3t0aXRsZX19PC9sYWJlbD5cbiAgICAgICAgPHNtYWxsICpuZ0lmPVwidXNlckZ1bGxOYW1lXCIgaWQ9XCJ1c2VybmFtZVwiIGNsYXNzPVwiZC1ibG9jayB0ZXh0LXRydW5jYXRlXCI+e3t1c2VyRnVsbE5hbWV9fVxuICAgICAgICA8L3NtYWxsPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyIG1yLTJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93biBzbGFiLWFwcC1oZWFkZXItdXNlci1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duLXRvZ2dsZVwiIGRhdGEtdG9nZ2xlPVwiZHJvcGRvd25cIiBkYXRhLWJvdW5kYXJ5PVwid2luZG93XCIgKm5nSWY9XCJtZW51Lmxlbmd0aCA+IDAgfHwgdXNlck5hbWVcIj5cbiAgICAgICAgICAgIDxidXR0b24gKm5nSWY9XCIhbWVudUJhcnNcIiBjbGFzcz1cInNsYWItYXBwLWhlYWRlci11c2VyLWljb24gZC1pbmxpbmUtYmxvY2sgYWxpZ24tbWlkZGxlXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFsaWduLW1pZGRsZSBoLTEwMFwiPlxuICAgICAgICAgICAgICAgICAgICA8aSBjbGFzcz1cImljb24tdXNlciBhbGlnbi1ib3R0b21cIj48L2k+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDxidXR0b24gKm5nSWY9XCJtZW51QmFyc1wiIGNsYXNzPVwic2xhYi1hcHAtaGVhZGVyLWJhcnMtaWNvbiBkLWlubGluZS1ibG9jayBhbGlnbi1taWRkbGVcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiYWxpZ24tbWlkZGxlIGgtMTAwXCI+XG4gICAgICAgICAgICAgICAgICAgIDxpIGNsYXNzPVwiaWNvbi1saXN0IGFsaWduLWJvdHRvbVwiPjwvaT5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgICAgPGxhYmVsICpuZ0lmPVwiIW1lbnVCYXJzXCIgY2xhc3M9XCJ0ZXh0LXRydW5jYXRlIGFsaWduLW1pZGRsZVwiPnt7dXNlck5hbWV9fTwvbGFiZWw+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd24tbWVudSBkcm9wZG93bi1tZW51LXJpZ2h0IHNsYWItZHJvcGRvd25cIiAqbmdJZj1cIm1lbnUubGVuZ3RoID4gMFwiPlxuICAgICAgICAgICAgICAgIDx1bD5cbiAgICAgICAgICAgICAgICAgICAgQGZvciAobWVudUVudHJ5IG9mIG1lbnU7IHRyYWNrIG1lbnVFbnRyeS5hY3Rpb24pIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIDxsaSAoY2xpY2spPVwibWVudUVudHJ5LmFjdGlvbigpXCI+e3ttZW51RW50cnkub3B0aW9uTmFtZX19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiAqbmdJZj1cIm1lbnVFbnRyeS5pc0RpdmlkZXJcIiBjbGFzcz1cImRyb3Bkb3duLWRpdmlkZXJcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICA8L3VsPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9uYXY+XG4iXX0=