@koalarx/ui
Version:
Koala UI is a Design System developed in Angular whose objective is to facilitate and make your development faster and simpler, making this framework your greatest ally.
70 lines • 14.6 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
import * as i3 from "@angular/material/icon";
import * as i4 from "@koalarx/ui/icon";
export class FolderComponent {
constructor() {
this.titlePage = 'Title';
this.customFolderFontColor = '#212121';
this.customFolderBackgroudColor = '#FFF';
}
ngOnInit() {
this.setCustomBackgroundColor();
}
ngOnChanges(changes) {
if (changes.customBackgroudColor || changes.customFolderFontColor) {
this.setCustomBackgroundColor();
}
}
getKoalaIcon() {
return this.titleIcon;
}
setCustomBackgroundColor() {
if (this.customFolderBackgroudColor) {
const folder = this.folder?.nativeElement;
folder.style.background = this.customFolderBackgroudColor;
}
if (this.customFolderFontColor) {
const folderTitle = this.folderTitle?.nativeElement;
folderTitle.style.color = this.customFolderFontColor;
const folderIconTitle = this.folderTitle?.nativeElement;
folderIconTitle.style.color = this.customFolderFontColor;
setTimeout(() => {
if (this.folderNavigateHistory) {
const folderNavigateHistory = this.folderNavigateHistory.nativeElement;
folderNavigateHistory.style.color = this.customFolderFontColor;
}
}, 50);
}
}
}
FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n <h1 #folderTitle>\n <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n {{titlePage}}\n </h1>\n <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n <li *ngFor=\"let item of navigateHistory\">\n <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n </li>\n </ul>\n <nav class=\"menu-folder\">\n <ng-content select=\"[menu-page]\"></ng-content>\n </nav>\n\n <div class=\"content\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FolderComponent, decorators: [{
type: Component,
args: [{ selector: 'koala-folder-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #folder class=\"folder-list\">\n <h1 #folderTitle>\n <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n {{titlePage}}\n </h1>\n <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n <li *ngFor=\"let item of navigateHistory\">\n <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n </li>\n </ul>\n <nav class=\"menu-folder\">\n <ng-content select=\"[menu-page]\"></ng-content>\n </nav>\n\n <div class=\"content\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"] }]
}], propDecorators: { titlePage: [{
type: Input
}], titleIcon: [{
type: Input
}], koalaIcon: [{
type: Input
}], customFolderFontColor: [{
type: Input
}], customFolderBackgroudColor: [{
type: Input
}], navigateHistory: [{
type: Input
}], folder: [{
type: ViewChild,
args: ['folder', { static: true }]
}], folderTitle: [{
type: ViewChild,
args: ['folderTitle', { static: true }]
}], folderNavigateHistory: [{
type: ViewChild,
args: ['folderNavigateHistory', { static: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9sZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2ZvbGRlci1wYWdlL3NyYy9saWIvZm9sZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3Byb2plY3RzL2ZvbGRlci1wYWdlL3NyYy9saWIvZm9sZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUVULEtBQUssRUFJTCxTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7Ozs7OztBQVV2QixNQUFNLE9BQU8sZUFBZTtJQU41QjtRQU9XLGNBQVMsR0FBVyxPQUFPLENBQUM7UUFHNUIsMEJBQXFCLEdBQVcsU0FBUyxDQUFDO1FBQzFDLCtCQUEwQixHQUFXLE1BQU0sQ0FBQztLQXVDdEQ7SUFoQ0MsUUFBUTtRQUNOLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO0lBQ2xDLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsb0JBQW9CLElBQUksT0FBTyxDQUFDLHFCQUFxQixFQUFFO1lBQ2pFLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1NBQ2pDO0lBQ0gsQ0FBQztJQUVNLFlBQVk7UUFDakIsT0FBTyxJQUFJLENBQUMsU0FBMEIsQ0FBQztJQUN6QyxDQUFDO0lBRU8sd0JBQXdCO1FBQzlCLElBQUksSUFBSSxDQUFDLDBCQUEwQixFQUFFO1lBQ25DLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsYUFBK0IsQ0FBQztZQUM1RCxNQUFNLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsMEJBQTBCLENBQUM7U0FDM0Q7UUFDRCxJQUFJLElBQUksQ0FBQyxxQkFBcUIsRUFBRTtZQUM5QixNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLGFBQStCLENBQUM7WUFDdEUsV0FBVyxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDO1lBQ3JELE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsYUFBK0IsQ0FBQztZQUMxRSxlQUFlLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUM7WUFDekQsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLElBQUksQ0FBQyxxQkFBcUIsRUFBRTtvQkFDOUIsTUFBTSxxQkFBcUIsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsYUFBK0IsQ0FBQztvQkFDekYscUJBQXFCLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUM7aUJBQ2hFO1lBQ0gsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1NBQ1I7SUFDSCxDQUFDOzs0R0EzQ1UsZUFBZTtnR0FBZixlQUFlLDRuQkNuQjVCLGt6QkFvQkE7MkZERGEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxtQkFBbUIsbUJBR1osdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0cscUJBQXFCO3NCQUE3QixLQUFLO2dCQUNHLDBCQUEwQjtzQkFBbEMsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUV1QyxNQUFNO3NCQUFsRCxTQUFTO3VCQUFDLFFBQVEsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBQ2UsV0FBVztzQkFBNUQsU0FBUzt1QkFBQyxhQUFhLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUNxQixxQkFBcUI7c0JBQWpGLFNBQVM7dUJBQUMsdUJBQXVCLEVBQUUsRUFBQyxNQUFNLEVBQUUsS0FBSyxFQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT25Jbml0LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLb2FsYUljb25UeXBlIH0gZnJvbSAnQGtvYWxhcngvdWkvaWNvbic7XG5pbXBvcnQgeyBLb2FsYU5hdmlnYXRlSGlzdG9yeUludGVyZmFjZSB9IGZyb20gXCIuL2tvYWxhLW5hdmlnYXRlLWhpc3RvcnkuaW50ZXJmYWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tvYWxhLWZvbGRlci1wYWdlJyxcbiAgdGVtcGxhdGVVcmw6ICdmb2xkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnZm9sZGVyLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgRm9sZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSB0aXRsZVBhZ2U6IHN0cmluZyA9ICdUaXRsZSc7XG4gIEBJbnB1dCgpIHRpdGxlSWNvbj86IHN0cmluZyB8IEtvYWxhSWNvblR5cGU7XG4gIEBJbnB1dCgpIGtvYWxhSWNvbj86IGJvb2xlYW47XG4gIEBJbnB1dCgpIGN1c3RvbUZvbGRlckZvbnRDb2xvcjogc3RyaW5nID0gJyMyMTIxMjEnO1xuICBASW5wdXQoKSBjdXN0b21Gb2xkZXJCYWNrZ3JvdWRDb2xvcjogc3RyaW5nID0gJyNGRkYnO1xuICBASW5wdXQoKSBuYXZpZ2F0ZUhpc3Rvcnk/OiBLb2FsYU5hdmlnYXRlSGlzdG9yeUludGVyZmFjZVtdO1xuXG4gIEBWaWV3Q2hpbGQoJ2ZvbGRlcicsIHtzdGF0aWM6IHRydWV9KSBwcml2YXRlIGZvbGRlcj86IEVsZW1lbnRSZWY7XG4gIEBWaWV3Q2hpbGQoJ2ZvbGRlclRpdGxlJywge3N0YXRpYzogdHJ1ZX0pIHByaXZhdGUgZm9sZGVyVGl0bGU/OiBFbGVtZW50UmVmO1xuICBAVmlld0NoaWxkKCdmb2xkZXJOYXZpZ2F0ZUhpc3RvcnknLCB7c3RhdGljOiBmYWxzZX0pIHByaXZhdGUgZm9sZGVyTmF2aWdhdGVIaXN0b3J5PzogRWxlbWVudFJlZjtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNldEN1c3RvbUJhY2tncm91bmRDb2xvcigpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzLmN1c3RvbUJhY2tncm91ZENvbG9yIHx8IGNoYW5nZXMuY3VzdG9tRm9sZGVyRm9udENvbG9yKSB7XG4gICAgICB0aGlzLnNldEN1c3RvbUJhY2tncm91bmRDb2xvcigpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBnZXRLb2FsYUljb24oKSB7XG4gICAgcmV0dXJuIHRoaXMudGl0bGVJY29uIGFzIEtvYWxhSWNvblR5cGU7XG4gIH1cblxuICBwcml2YXRlIHNldEN1c3RvbUJhY2tncm91bmRDb2xvcigpIHtcbiAgICBpZiAodGhpcy5jdXN0b21Gb2xkZXJCYWNrZ3JvdWRDb2xvcikge1xuICAgICAgY29uc3QgZm9sZGVyID0gdGhpcy5mb2xkZXI/Lm5hdGl2ZUVsZW1lbnQgYXMgSFRNTERpdkVsZW1lbnQ7XG4gICAgICBmb2xkZXIuc3R5bGUuYmFja2dyb3VuZCA9IHRoaXMuY3VzdG9tRm9sZGVyQmFja2dyb3VkQ29sb3I7XG4gICAgfVxuICAgIGlmICh0aGlzLmN1c3RvbUZvbGRlckZvbnRDb2xvcikge1xuICAgICAgY29uc3QgZm9sZGVyVGl0bGUgPSB0aGlzLmZvbGRlclRpdGxlPy5uYXRpdmVFbGVtZW50IGFzIEhUTUxEaXZFbGVtZW50O1xuICAgICAgZm9sZGVyVGl0bGUuc3R5bGUuY29sb3IgPSB0aGlzLmN1c3RvbUZvbGRlckZvbnRDb2xvcjtcbiAgICAgIGNvbnN0IGZvbGRlckljb25UaXRsZSA9IHRoaXMuZm9sZGVyVGl0bGU/Lm5hdGl2ZUVsZW1lbnQgYXMgSFRNTERpdkVsZW1lbnQ7XG4gICAgICBmb2xkZXJJY29uVGl0bGUuc3R5bGUuY29sb3IgPSB0aGlzLmN1c3RvbUZvbGRlckZvbnRDb2xvcjtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBpZiAodGhpcy5mb2xkZXJOYXZpZ2F0ZUhpc3RvcnkpIHtcbiAgICAgICAgICBjb25zdCBmb2xkZXJOYXZpZ2F0ZUhpc3RvcnkgPSB0aGlzLmZvbGRlck5hdmlnYXRlSGlzdG9yeS5uYXRpdmVFbGVtZW50IGFzIEhUTUxEaXZFbGVtZW50O1xuICAgICAgICAgIGZvbGRlck5hdmlnYXRlSGlzdG9yeS5zdHlsZS5jb2xvciA9IHRoaXMuY3VzdG9tRm9sZGVyRm9udENvbG9yO1xuICAgICAgICB9XG4gICAgICB9LCA1MCk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2ICNmb2xkZXIgY2xhc3M9XCJmb2xkZXItbGlzdFwiPlxuICA8aDEgI2ZvbGRlclRpdGxlPlxuICAgIDxtYXQtaWNvbiAjZm9sZGVySWNvblRpdGxlICpuZ0lmPVwidGl0bGVJY29uICYmICFrb2FsYUljb25cIj57e3RpdGxlSWNvbn19PC9tYXQtaWNvbj5cbiAgICA8a29hbGEtaWNvbiAqbmdJZj1cInRpdGxlSWNvbiAmJiBrb2FsYUljb25cIiBbc2l6ZV09XCIyMFwiIFtjb2xvcl09XCJjdXN0b21Gb2xkZXJGb250Q29sb3JcIiBbaWNvbl09XCJnZXRLb2FsYUljb24oKVwiPjwva29hbGEtaWNvbj5cbiAgICB7e3RpdGxlUGFnZX19XG4gIDwvaDE+XG4gIDx1bCAjZm9sZGVyTmF2aWdhdGVIaXN0b3J5IGNsYXNzPVwibmF2aWdhdGUtaGlzdG9yeVwiICpuZ0lmPVwibmF2aWdhdGVIaXN0b3J5XCI+XG4gICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIG5hdmlnYXRlSGlzdG9yeVwiPlxuICAgICAgPGEgW3N0eWxlXT1cIidjb2xvcjogJyArIGN1c3RvbUZvbGRlckZvbnRDb2xvclwiIFtuZ0NsYXNzXT1cInsnZGlzYWJsZWQnOiAhaXRlbS5yb3V0ZXJMaW5rfVwiIFtyb3V0ZXJMaW5rXT1cIml0ZW0ucm91dGVyTGlua1wiPnt7aXRlbS5uYW1lfX08L2E+XG4gICAgPC9saT5cbiAgPC91bD5cbiAgPG5hdiBjbGFzcz1cIm1lbnUtZm9sZGVyXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW21lbnUtcGFnZV1cIj48L25nLWNvbnRlbnQ+XG4gIDwvbmF2PlxuXG4gIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2NvbnRlbnRdXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cblxuPC9kaXY+XG4iXX0=