@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.
89 lines (84 loc) • 7.52 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i4 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i5 from '@koalarx/ui/icon';
import { KoalaIconModule } from '@koalarx/ui/icon';
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
}] } });
class KoalaButtonModule {
}
KoalaButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
KoalaButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: KoalaButtonModule, declarations: [ButtonComponent], imports: [CommonModule,
MatTooltipModule,
MatButtonModule,
MatIconModule,
KoalaIconModule], exports: [ButtonComponent] });
KoalaButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaButtonModule, imports: [CommonModule,
MatTooltipModule,
MatButtonModule,
MatIconModule,
KoalaIconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaButtonModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ButtonComponent
],
imports: [
CommonModule,
MatTooltipModule,
MatButtonModule,
MatIconModule,
KoalaIconModule
],
exports: [
ButtonComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ButtonComponent, KoalaButtonModule };
//# sourceMappingURL=koalarx-ui-button.mjs.map