@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.
44 lines • 9.29 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/tooltip";
import * as i3 from "@angular/material/button";
import * as i4 from "@angular/material/icon";
import * as i5 from "@koalarx/ui/icon";
export class ButtonComponent {
constructor() {
this.color = '#fff';
this.backgroundColor = '#000';
this.koalaIcon = false;
this.koalaIconSize = 20;
}
ngOnInit() {
this.style = `color: ${this.color}!important;background-color: ${this.backgroundColor}!important;`;
}
getKoalaIcon() {
return this.icon;
}
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonComponent, selector: "koala-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", koalaIcon: "koalaIcon", koalaIconSize: "koalaIconSize" }, ngImport: i0, template: "<button\n\t*ngIf=\"text else iconButton\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n\t[disabled]=\"disabled\"\n [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n <mat-icon *ngIf=\"icon && !koalaIcon\">{{icon}}</mat-icon>\n <koala-icon [color]=\"color\" [icon]=\"getKoalaIcon()\" [size]=\"koalaIconSize\" *ngIf=\"icon && koalaIcon\"></koala-icon>\n\t{{text}}\n</button>\n<ng-template #iconButton>\n <button\n\t [matTooltipDisabled]=\"!tooltip\"\n\t [matTooltip]=\"tooltip ?? ''\"\n [style]=\"style\"\n\t [disabled]=\"disabled\"\n\t class=\"koala-icon-button\"\n\t mat-icon-button\n\t matTooltipPosition=\"before\"\n\t type=\"button\">\n <mat-icon *ngIf=\"!koalaIcon\">{{icon}}</mat-icon>\n <koala-icon [color]=\"color\" [icon]=\"getKoalaIcon()\" [size]=\"koalaIconSize\" *ngIf=\"koalaIcon\"></koala-icon>\n </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-button koala-icon{position:relative;display:inline-block;margin-right:8px;top:-1px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'koala-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n\t*ngIf=\"text else iconButton\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n\t[disabled]=\"disabled\"\n [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n <mat-icon *ngIf=\"icon && !koalaIcon\">{{icon}}</mat-icon>\n <koala-icon [color]=\"color\" [icon]=\"getKoalaIcon()\" [size]=\"koalaIconSize\" *ngIf=\"icon && koalaIcon\"></koala-icon>\n\t{{text}}\n</button>\n<ng-template #iconButton>\n <button\n\t [matTooltipDisabled]=\"!tooltip\"\n\t [matTooltip]=\"tooltip ?? ''\"\n [style]=\"style\"\n\t [disabled]=\"disabled\"\n\t class=\"koala-icon-button\"\n\t mat-icon-button\n\t matTooltipPosition=\"before\"\n\t type=\"button\">\n <mat-icon *ngIf=\"!koalaIcon\">{{icon}}</mat-icon>\n <koala-icon [color]=\"color\" [icon]=\"getKoalaIcon()\" [size]=\"koalaIconSize\" *ngIf=\"koalaIcon\"></koala-icon>\n </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-button koala-icon{position:relative;display:inline-block;margin-right:8px;top:-1px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"] }]
}], propDecorators: { color: [{
type: Input
}], backgroundColor: [{
type: Input
}], icon: [{
type: Input
}], text: [{
type: Input
}], tooltip: [{
type: Input
}], disabled: [{
type: Input
}], koalaIcon: [{
type: Input
}], koalaIconSize: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2J1dHRvbi9zcmMvbGliL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9idXR0b24vc3JjL2xpYi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFTbEYsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFPVyxVQUFLLEdBQVcsTUFBTSxDQUFDO1FBQ3ZCLG9CQUFlLEdBQVcsTUFBTSxDQUFDO1FBS2pDLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFDM0Isa0JBQWEsR0FBVyxFQUFFLENBQUM7S0FVckM7SUFQQyxRQUFRO1FBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxVQUFVLElBQUksQ0FBQyxLQUFLLGdDQUFnQyxJQUFJLENBQUMsZUFBZSxhQUFhLENBQUM7SUFDckcsQ0FBQztJQUVNLFlBQVk7UUFDakIsT0FBTyxJQUFJLENBQUMsSUFBcUIsQ0FBQztJQUNwQyxDQUFDOzs0R0FqQlUsZUFBZTtnR0FBZixlQUFlLGtQQ1Q1QixvN0JBNEJBOzJGRG5CYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLGNBQWMsbUJBR1AsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsS0FBSztzQkFBYixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLb2FsYUljb25UeXBlIH0gZnJvbSAnQGtvYWxhcngvdWkvaWNvbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tvYWxhLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2J1dHRvbi5jb21wb25lbnQuY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBjb2xvcjogc3RyaW5nID0gJyNmZmYnO1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZyA9ICcjMDAwJztcbiAgQElucHV0KCkgaWNvbj86IHN0cmluZyB8IEtvYWxhSWNvblR5cGU7XG4gIEBJbnB1dCgpIHRleHQ/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHRvb2x0aXA/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgQElucHV0KCkga29hbGFJY29uOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGtvYWxhSWNvblNpemU6IG51bWJlciA9IDIwO1xuICBwdWJsaWMgc3R5bGU/OiBzdHJpbmc7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5zdHlsZSA9IGBjb2xvcjogJHt0aGlzLmNvbG9yfSFpbXBvcnRhbnQ7YmFja2dyb3VuZC1jb2xvcjogJHt0aGlzLmJhY2tncm91bmRDb2xvcn0haW1wb3J0YW50O2A7XG4gIH1cblxuICBwdWJsaWMgZ2V0S29hbGFJY29uKCkge1xuICAgIHJldHVybiB0aGlzLmljb24gYXMgS29hbGFJY29uVHlwZTtcbiAgfVxufVxuIiwiPGJ1dHRvblxuXHQqbmdJZj1cInRleHQgZWxzZSBpY29uQnV0dG9uXCJcblx0W21hdFRvb2x0aXBEaXNhYmxlZF09XCIhdG9vbHRpcFwiXG5cdFttYXRUb29sdGlwXT1cInRvb2x0aXAgPz8gJydcIlxuXHRbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICBbc3R5bGVdPVwic3R5bGVcIlxuXHRjbGFzcz1cImtvYWxhLWJ1dHRvblwiXG5cdG1hdC1idXR0b25cblx0bWF0VG9vbHRpcFBvc2l0aW9uPVwiYWJvdmVcIlxuXHR0eXBlPVwiYnV0dG9uXCI+XG4gIDxtYXQtaWNvbiAqbmdJZj1cImljb24gJiYgIWtvYWxhSWNvblwiPnt7aWNvbn19PC9tYXQtaWNvbj5cbiAgPGtvYWxhLWljb24gW2NvbG9yXT1cImNvbG9yXCIgW2ljb25dPVwiZ2V0S29hbGFJY29uKClcIiBbc2l6ZV09XCJrb2FsYUljb25TaXplXCIgKm5nSWY9XCJpY29uICYmIGtvYWxhSWNvblwiPjwva29hbGEtaWNvbj5cblx0e3t0ZXh0fX1cbjwvYnV0dG9uPlxuPG5nLXRlbXBsYXRlICNpY29uQnV0dG9uPlxuICA8YnV0dG9uXG5cdCAgW21hdFRvb2x0aXBEaXNhYmxlZF09XCIhdG9vbHRpcFwiXG5cdCAgW21hdFRvb2x0aXBdPVwidG9vbHRpcCA/PyAnJ1wiXG4gICAgW3N0eWxlXT1cInN0eWxlXCJcblx0ICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuXHQgIGNsYXNzPVwia29hbGEtaWNvbi1idXR0b25cIlxuXHQgIG1hdC1pY29uLWJ1dHRvblxuXHQgIG1hdFRvb2x0aXBQb3NpdGlvbj1cImJlZm9yZVwiXG5cdCAgdHlwZT1cImJ1dHRvblwiPlxuICAgIDxtYXQtaWNvbiAqbmdJZj1cIiFrb2FsYUljb25cIj57e2ljb259fTwvbWF0LWljb24+XG4gICAgPGtvYWxhLWljb24gW2NvbG9yXT1cImNvbG9yXCIgW2ljb25dPVwiZ2V0S29hbGFJY29uKClcIiBbc2l6ZV09XCJrb2FsYUljb25TaXplXCIgKm5nSWY9XCJrb2FsYUljb25cIj48L2tvYWxhLWljb24+XG4gIDwvYnV0dG9uPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==