@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.
198 lines (192 loc) • 11.8 kB
JavaScript
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
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';
class KoalaBtnFileService {
constructor() {
this.setFileSubject = new BehaviorSubject(null);
this.fileListSubject = new BehaviorSubject([]);
}
setFile(file) {
return __awaiter(this, void 0, void 0, function* () {
if (file) {
this.setFileSubject.next(file);
}
});
}
removeFile(files, index) {
files.splice(index, 1);
this.fileListSubject.next(files);
}
}
KoalaBtnFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaBtnFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
KoalaBtnFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaBtnFileService, providedIn: "any" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaBtnFileService, decorators: [{
type: Injectable,
args: [{ providedIn: "any" }]
}] });
class FileButtonComponent {
constructor() {
this.autoclear = true;
this.getFiles = new EventEmitter();
this.files = [];
this.textSubject = new BehaviorSubject('');
}
ngOnInit() {
var _a;
this.style = `color: ${this.color}!important;background-color: ${this.backgroundColor}!important;`;
this.textSubject.next((_a = this.text) !== null && _a !== void 0 ? _a : '');
if (this.setFile) {
this.setFile.subscribe((file) => __awaiter(this, void 0, void 0, function* () {
if (file) {
const fileResult = yield this.convertFile(file);
if (fileResult) {
this.files.push(fileResult);
}
this.generateTextButton();
this.getFiles.emit(this.files);
}
}));
}
if (this.updateFileList) {
this.updateFileList.subscribe((fileList) => {
this.files = fileList;
this.generateTextButton();
});
}
}
emitFiles(files) {
return __awaiter(this, void 0, void 0, function* () {
if (files) {
if ((files === null || files === void 0 ? void 0 : files.length) > 0) {
for (let f = 0; f <= files.length; f++) {
const file = files.item(f);
if (file) {
const fileResult = yield this.convertFile(file);
if (fileResult) {
this.files.push(fileResult);
}
}
}
this.getFiles.emit(this.files);
}
else {
this.getFiles.emit([]);
}
this.generateTextButton();
}
});
}
open() {
var _a;
const elFile = (_a = this.file) === null || _a === void 0 ? void 0 : _a.nativeElement;
if (elFile)
elFile.value = '';
if (this.autoclear) {
this.files = [];
this.getFiles.emit([]);
this.generateTextButton();
}
elFile === null || elFile === void 0 ? void 0 : elFile.click();
}
generateTextButton() {
var _a;
this.textSubject.next(this.files.length > 0
? `${this.files.length} arquivo${this.files.length > 1 ? 's' : ''} selecionado`
: (_a = this.text) !== null && _a !== void 0 ? _a : '');
}
convertFile(file) {
return __awaiter(this, void 0, void 0, function* () {
const blobFile = yield new Promise((resolve) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
resolve(fileReader.result);
};
});
if (blobFile) {
const fileSplit = blobFile.toString().split(';base64,');
return {
filename: file.name,
type: fileSplit[0].replace('data:', ''),
base64: fileSplit[1],
};
}
return null;
});
}
}
FileButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
FileButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FileButtonComponent, selector: "koala-file-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", multiple: "multiple", accept: "accept", setFile: "setFile", updateFileList: "updateFileList", autoclear: "autoclear" }, outputs: { getFiles: "getFiles" }, viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n style=\"display: none;\"\n type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n <button\n\t (click)=\"open()\"\n\t [disabled]=\"disabled\"\n\t [matTooltipDisabled]=\"!tooltip\"\n\t [matTooltip]=\"tooltip ?? ''\"\n [style]=\"style\"\n\t class=\"koala-icon-button\"\n\t mat-icon-button\n\t matTooltipPosition=\"before\"\n\t type=\"button\">\n <mat-icon>{{icon}}</mat-icon>\n </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.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: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'koala-file-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n style=\"display: none;\"\n type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n <button\n\t (click)=\"open()\"\n\t [disabled]=\"disabled\"\n\t [matTooltipDisabled]=\"!tooltip\"\n\t [matTooltip]=\"tooltip ?? ''\"\n [style]=\"style\"\n\t class=\"koala-icon-button\"\n\t mat-icon-button\n\t matTooltipPosition=\"before\"\n\t type=\"button\">\n <mat-icon>{{icon}}</mat-icon>\n </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.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
}], multiple: [{
type: Input
}], accept: [{
type: Input
}], setFile: [{
type: Input
}], updateFileList: [{
type: Input
}], autoclear: [{
type: Input
}], getFiles: [{
type: Output
}], file: [{
type: ViewChild,
args: ['file', { static: true }]
}] } });
class KoalaFileButtonModule {
}
KoalaFileButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaFileButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
KoalaFileButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: KoalaFileButtonModule, declarations: [FileButtonComponent], imports: [CommonModule,
MatTooltipModule,
MatButtonModule,
MatIconModule], exports: [FileButtonComponent] });
KoalaFileButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaFileButtonModule, imports: [CommonModule,
MatTooltipModule,
MatButtonModule,
MatIconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaFileButtonModule, decorators: [{
type: NgModule,
args: [{
exports: [
FileButtonComponent
],
declarations: [
FileButtonComponent
],
imports: [
CommonModule,
MatTooltipModule,
MatButtonModule,
MatIconModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FileButtonComponent, KoalaBtnFileService, KoalaFileButtonModule };
//# sourceMappingURL=koalarx-ui-file-button.mjs.map