@douglas-serena/ng-inputs
Version:
angular entry library
1,240 lines (1,224 loc) • 60.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ElementRef, Renderer2, ChangeDetectorRef, ViewChild, Input, Output, HostBinding, forwardRef, HostListener, Pipe, NgModule, Directive, InjectionToken } from '@angular/core';
import * as i2 from '@angular/common';
import { DatePipe, CommonModule } from '@angular/common';
import IMask from 'imask';
import SimpleMaskMoney from 'simple-mask-money';
import calcJs from '@douglas-serena/calc.js';
import { SelectControlValueAccessor, ControlContainer, FormControlDirective, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, CheckboxControlValueAccessor } from '@angular/forms';
import { __awaiter } from 'tslib';
import { HttpClient } from '@angular/common/http';
import * as dayjs from 'dayjs';
class NgInputConfigService {
constructor() {
this._field = {
type: 'group',
alignIcons: 'left',
icons: {
password: {
align: 'right',
clickable: true,
},
},
};
this._theme = 'bootstrap';
this._currency = {
allowNegative: true,
negativeSignAfter: false,
prefix: '',
suffix: '',
fixed: true,
fractionDigits: 2,
decimalSeparator: ',',
thousandsSeparator: '.',
align: 'right',
cursor: 'end',
};
this._percent = {
allowNegative: true,
negativeSignAfter: false,
prefix: '',
suffix: '%',
fixed: true,
fractionDigits: 2,
decimalSeparator: '.',
thousandsSeparator: '',
align: 'right',
cursor: 'end',
};
this._environments = {
debug: false,
url: 'http://localhost:4200',
};
}
get field() {
return this._field;
}
set field(value) {
this._field = Object.assign(Object.assign(Object.assign({}, this._field), value), { icons: Object.assign(Object.assign({}, this._field.icons), value.icons) });
}
get theme() {
return this._theme;
}
set theme(value) {
this._theme = value;
}
get currency() {
return this._currency;
}
set currency(value) {
var _a, _b;
this._currency = Object.assign(Object.assign(Object.assign({}, this._currency), value), { suffix: (_a = value.suffix) === null || _a === void 0 ? void 0 : _a.trim(), prefix: (_b = value.prefix) === null || _b === void 0 ? void 0 : _b.trim() });
}
get percent() {
return this._percent;
}
set percent(value) {
var _a, _b;
this._percent = Object.assign(Object.assign(Object.assign({}, this._percent), value), { suffix: (_a = value.suffix) === null || _a === void 0 ? void 0 : _a.trim(), prefix: (_b = value.prefix) === null || _b === void 0 ? void 0 : _b.trim() });
}
get environments() {
return this._environments;
}
set environments(value) {
this._environments = Object.assign(Object.assign({}, this._environments), value);
}
}
NgInputConfigService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgInputConfigService_Factory() { return new NgInputConfigService(); }, token: NgInputConfigService, providedIn: "root" });
NgInputConfigService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] }
];
const TEL = {
mask: [{ mask: '(00) 0000-0000' }, { mask: '(00) 0 0000-0000' }],
};
const CPF = {
mask: '000.000.000-00',
};
const CNPJ = {
mask: '00.000.000/0000-00',
};
const CPF_CNPJ = {
mask: [CPF, CNPJ],
};
const RG = {
mask: '00.000.000-0',
};
const ESTADUAL = {
mask: '00.0.000.0000000-0',
};
const RG_ESTADUAL = {
mask: [RG, ESTADUAL],
};
const ZIPCODE = {
mask: '00000-000',
};
const typesCustom = [
...[
'ZIPCODE',
'TEL',
'RG',
'RG_ESTADUAL',
'CPF_CNPJ',
'CNPJ',
'CPF',
'ESTADUAL',
],
];
const MASKS = {
ZIPCODE,
TEL,
RG,
RG_ESTADUAL,
CPF_CNPJ,
CNPJ,
CPF,
ESTADUAL,
typesCustom,
};
class NgInputMasksService {
constructor(configService, datePipe) {
this.configService = configService;
this.datePipe = datePipe;
}
format(value, masksType, options) {
masksType = masksType.toUpperCase();
if (masksType === 'DATE') {
return this.datePipe.transform(value, (options === null || options === void 0 ? void 0 : options.mask) === undefined ? 'dd/MM/yyyy' : options.mask);
}
if (masksType === 'CURRENCY' || masksType === 'PERCENT') {
const config = this.configService[masksType.toLowerCase()];
if ((options === null || options === void 0 ? void 0 : options.allowNegative) !== undefined)
config.allowNegative = options.allowNegative;
value = calcJs(`${value}`.replace(/[,.]/g, '.'))
.toString()
.replace('.', config.decimalSeparator)
.replace(config.decimalSeparator + '00', '');
return SimpleMaskMoney.formatToCurrency(value, config);
}
if (masksType === 'AMOUNT') {
value = `${value}`;
if (/^0/g.test(value)) {
value = value.replace(/0+/, '');
}
let result = Number(value);
if (Number.isNaN(result)) {
result = 0;
}
return result.toFixed(3);
}
let mask = null;
if (masksType)
mask = MASKS[masksType];
if (options === null || options === void 0 ? void 0 : options.mask) {
mask = {
mask: options === null || options === void 0 ? void 0 : options.mask.split('|').map((mask) => ({
mask,
})),
};
}
return IMask.pipe(value, mask);
}
set(element, masksType, options) {
masksType = masksType.toUpperCase();
if (masksType === 'CURRENCY' || masksType === 'PERCENT') {
const config = this.configService[masksType.toLowerCase()];
if ((options === null || options === void 0 ? void 0 : options.allowNegative) !== undefined)
config.allowNegative = options.allowNegative;
return SimpleMaskMoney.setMask(element, config);
}
let mask = null;
if (masksType) {
mask = MASKS[masksType];
}
if (options === null || options === void 0 ? void 0 : options.mask) {
mask = {
mask: options === null || options === void 0 ? void 0 : options.mask.split('|').map((mask) => ({
mask,
})),
};
}
return IMask(element, mask);
}
}
NgInputMasksService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgInputMasksService_Factory() { return new NgInputMasksService(i0.ɵɵinject(NgInputConfigService), i0.ɵɵinject(i2.DatePipe)); }, token: NgInputMasksService, providedIn: "root" });
NgInputMasksService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] }
];
NgInputMasksService.ctorParameters = () => [
{ type: NgInputConfigService },
{ type: DatePipe }
];
class SelectCustomControlValueAccessor extends SelectControlValueAccessor {
constructor(_controlContainer, elementRef, renderer, _configService, _changeDetectorRef) {
super(renderer, elementRef);
this._controlContainer = _controlContainer;
this.elementRef = elementRef;
this.renderer = renderer;
this._configService = _configService;
this._changeDetectorRef = _changeDetectorRef;
this.formControlName = '';
this.disabled = false;
this.change = new EventEmitter();
this.blur = new EventEmitter();
this.focus = new EventEmitter();
this.placeholder = '';
this.label = '';
this._cols = {
default: 12,
sm: 12,
};
this._field = null;
this.readonly = false;
this.errors = {};
this.time = 0;
this.readonly = false;
}
get _placeholder() {
return this.field === 'floating' &&
!!this.label &&
this.placeholder.length === 0
? false
: this.placeholder;
}
set cols(cols) {
this._cols = Object.assign(Object.assign({}, this._cols), cols);
}
set field(value) {
this._field = value;
}
get field() {
return this._field
? this._field
: this._configService.field.type;
}
get control() {
var _a, _b;
return (this.formControl ||
((_b = (_a = this._controlContainer) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.get(this.formControlName)));
}
get classCols() {
let className = this._configService.theme === 'bootstrap'
? `col-${this._cols.default}`
: `col`;
if (this._cols.lg)
className +=
this._configService.theme === 'bootstrap'
? ` col-lg-${this._cols.lg}`
: ` l${this._cols.lg}`;
if (this._cols.md)
className +=
this._configService.theme === 'bootstrap'
? ` col-md-${this._cols.md}`
: ` m${this._cols.md}`;
if (this._cols.sm)
className +=
this._configService.theme === 'bootstrap'
? ` col-sm-${this._cols.sm}`
: ` s${this._cols.sm}`;
return className;
}
ngOnInit() {
this.ngOnInitSuper();
if (this.disabled)
this.control.disable();
else
this.control.enable();
}
ngOnInitSuper() {
if (this.name === undefined)
this.name = this.formControlName;
this.validRequired();
}
getMultiLabels(labels, label) {
const lastLabel = label.concat([]);
const rest = label.splice(1, label.length - 1);
return lastLabel.length === 1
? labels === null || labels === void 0 ? void 0 : labels[lastLabel[0]]
: this.getMultiLabels(labels === null || labels === void 0 ? void 0 : labels[lastLabel[0]], rest);
}
getKeys(errors) {
return Object.keys(errors);
}
getError(key) {
var _a, _b, _c;
return ((_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[key]) && ((_c = this.control) === null || _c === void 0 ? void 0 : _c.touched);
}
validRequired() {
var _a, _b, _c;
const value = this.control.value;
(_a = this === null || this === void 0 ? void 0 : this.onWrite) === null || _a === void 0 ? void 0 : _a.call(this, null);
this._changeDetectorRef.detectChanges();
if (this.required === undefined) {
this.required = (_b = this.control.errors) === null || _b === void 0 ? void 0 : _b.required;
}
(_c = this === null || this === void 0 ? void 0 : this.onWrite) === null || _c === void 0 ? void 0 : _c.call(this, value);
this._changeDetectorRef.detectChanges();
}
registerOnTouched(fn) {
var _a;
(_a = this.formControlDirective.valueAccessor) === null || _a === void 0 ? void 0 : _a.registerOnTouched(fn);
}
registerOnChange(fn) {
this.onWrite = fn;
}
writeValue(obj) {
clearTimeout(this.time);
this.time = setTimeout(() => {
this.onWrite(obj);
});
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
SelectCustomControlValueAccessor.decorators = [
{ type: Component, args: [{ selector: '', template: '' },] }
];
SelectCustomControlValueAccessor.ctorParameters = () => [
{ type: ControlContainer },
{ type: ElementRef },
{ type: Renderer2 },
{ type: NgInputConfigService },
{ type: ChangeDetectorRef }
];
SelectCustomControlValueAccessor.propDecorators = {
formControlDirective: [{ type: ViewChild, args: [FormControlDirective, { static: true },] }],
formControl: [{ type: Input }],
formControlName: [{ type: Input }],
name: [{ type: Input }],
disabled: [{ type: Input }],
help: [{ type: Input }],
change: [{ type: Output }],
blur: [{ type: Output }],
focus: [{ type: Output }],
placeholder: [{ type: Input }],
label: [{ type: Input }],
cols: [{ type: Input }],
field: [{ type: Input }],
readonly: [{ type: Input }],
required: [{ type: Input }],
errors: [{ type: Input }],
classCols: [{ type: HostBinding, args: ['class',] }]
};
class NgSearchComponent extends SelectCustomControlValueAccessor {
constructor(controlContainer, elementRef, renderer, httpClient, configService, changeDetectorRef) {
super(controlContainer, elementRef, renderer, configService, changeDetectorRef);
this.controlContainer = controlContainer;
this.elementRef = elementRef;
this.renderer = renderer;
this.httpClient = httpClient;
this.configService = configService;
this.notFound = 'Sem resultado.';
this.pathLabel = 'label';
this.value = null;
this.options = [];
this.uri = null;
this.responseData = null;
this.return = null;
this.loading = false;
this.focused = false;
this.timeInput = 0;
this.timeBlur = 0;
this.blur = new EventEmitter();
this.timeFocus = 0;
this.focus = new EventEmitter();
}
onInput({ target }) {
clearTimeout(this.timeInput);
this.timeInput = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
const { value } = target;
if (value.length === 0)
return;
if (!this.focused)
this.focused = true;
if (this.uri) {
let uri = this.createUrl(this.uri);
uri = uri === null || uri === void 0 ? void 0 : uri.replace('{value}', value);
this.loading = true;
try {
const response = yield this.httpClient.get(uri).toPromise();
this.options = this.responseData
? this.getMultiLabels(response, this.responseData.split('.'))
: response;
this.format();
}
catch (error) {
if (!this.configService.environments.debug) {
console.log(error);
}
}
this.loading = false;
}
}), 300);
}
createUrl(uri) {
const variables = uri.match(/(\{[\w\_]+\})+/g);
variables === null || variables === void 0 ? void 0 : variables.forEach((variable) => {
const key = variable.replace(/([\{\}])+/g, '');
const env = this.configService.environments[key];
if (env)
uri = uri === null || uri === void 0 ? void 0 : uri.replace(variable, env);
});
return uri;
}
handleKeyDown(event) {
const { key } = event;
const keys = {
ArrowUp: () => {
event.preventDefault();
if (!this.focused) {
this.focused = true;
return;
}
const index = this.options.findIndex((option) => option.dssSelect);
if (index === -1) {
this.options[this.options.length - 1].dssSelect = true;
return;
}
this.options[index].dssSelect = false;
if (index === 0) {
this.options[this.options.length - 1].dssSelect = true;
return;
}
this.options[index - 1].dssSelect = true;
},
ArrowDown: () => {
event.preventDefault();
if (!this.focused) {
this.focused = true;
return;
}
const index = this.options.findIndex((option) => option.dssSelect);
if (index === -1) {
this.options[0].dssSelect = true;
}
this.options[index].dssSelect = false;
if (index === this.options.length - 1) {
this.options[0].dssSelect = true;
return;
}
this.options[index + 1].dssSelect = true;
},
Enter: () => {
event.preventDefault();
if (!this.focused) {
this.focused = true;
return;
}
const index = this.options.findIndex((option) => option.dssSelect);
if (index !== -1) {
this.focused = false;
this.itemSelect = index;
this.inputChange(this.options[index]);
}
},
};
try {
keys[key]();
}
catch (_a) { }
}
ngOnInit() {
var _a;
this.required = (_a = this.control.errors) === null || _a === void 0 ? void 0 : _a.required;
if (!this.required)
this.required = Object.keys(this.errors).includes('required');
this.format();
}
onBlur(event) {
clearTimeout(this.timeBlur);
this.timeBlur = setTimeout(() => {
this.focused = false;
this.blur.emit(event);
}, 300);
}
onFocus(event) {
this.onInput(event);
clearTimeout(this.timeFocus);
this.timeFocus = setTimeout(() => {
this.focused = true;
this.focus.emit(event);
}, 100);
}
ngOnChanges({ options, value, }) {
if (!!options && !!options.currentValue) {
this.format();
}
if (!!value && !!value.currentValue) {
this.inputChange(this.value);
}
}
inputChange(value) {
this.control.setValue(value instanceof Object
? this.getMultiLabels(value, this.pathLabel.split('.'))
: value);
if (typeof value === 'string') {
this.onWrite(value);
}
else {
const newValue = Object.assign({}, value);
delete newValue.dssLabel;
delete newValue.dssSelect;
setTimeout(() => {
this.onWrite(!!this.return
? this.getMultiLabels(newValue, this.return.split('.'))
: newValue);
}, 250);
}
}
format() {
this.options.map((option, index) => {
option.dssLabel = this.getMultiLabels(option, this.pathLabel.split('.'));
option.dssSelect = this.itemSelect === index;
});
}
}
NgSearchComponent.decorators = [
{ type: Component, args: [{
selector: 'dss-search',
template: "<div\r\n class=\"form-group form-control-search\"\r\n [ngClass]=\"{\r\n invalid: control.invalid && control.touched,\r\n valid: control.valid && control.touched,\r\n 'form-group-label': !!label,\r\n active: !!control?.value\r\n }\"\r\n>\r\n <div class=\"form-content\">\r\n <i\r\n class=\"form-icon-floating icon-background left\"\r\n [ngClass]=\"{ search: !loading, loading: loading }\"\r\n ></i>\r\n\r\n <input\r\n #inputRef\r\n type=\"search\"\r\n class=\"form-control browser-default\"\r\n [placeholder]=\"_placeholder\"\r\n [id]=\"name\"\r\n [formControl]=\"control\"\r\n [readonly]=\"readonly\"\r\n autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n [ngClass]=\"{\r\n readonly: readonly,\r\n 'is-invalid': !readonly && control.invalid && control.touched\r\n }\"\r\n />\r\n\r\n <!-- BORDER -->\r\n <span class=\"focus-border\">\r\n <i></i>\r\n </span>\r\n\r\n <!-- LABEL -->\r\n <label *ngIf=\"!!label\" [for]=\"name\">\r\n {{ label }}<span *ngIf=\"required\" class=\"required\">*</span>\r\n </label>\r\n\r\n <ul\r\n class=\"options-list hidden\"\r\n [class.hidden]=\"control.value?.length === 0 || loading || !focused\"\r\n >\r\n <ng-content *ngIf=\"options.length === 0\"> </ng-content>\r\n <li\r\n *ngIf=\"options.length === 0; else template_options\"\r\n class=\"not-found option-item\"\r\n >\r\n {{ notFound }}\r\n </li>\r\n\r\n <ng-template #template_options>\r\n <li\r\n *ngFor=\"let option of options; let index = index\"\r\n role=\"listitem\"\r\n class=\"option-item\"\r\n [class.hover]=\"option.dssSelect\"\r\n [class.select]=\"itemSelect === index\"\r\n (click)=\"inputChange(option); itemSelect = index\"\r\n >\r\n {{ option.dssLabel }}\r\n </li>\r\n </ng-template>\r\n </ul>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let error of getKeys(errors)\">\r\n <!-- MESSAGE ERROR -->\r\n <div *ngIf=\"getError(error)\" class=\"message error\">\r\n {{ errors[error] }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- MESSAGE HELp -->\r\n <div *ngIf=\"!!help\" class=\"message\">\r\n {{ help }}\r\n </div>\r\n</div>\r\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => NgSearchComponent),
},
]
},] }
];
NgSearchComponent.ctorParameters = () => [
{ type: ControlContainer },
{ type: ElementRef },
{ type: Renderer2 },
{ type: HttpClient },
{ type: NgInputConfigService },
{ type: ChangeDetectorRef }
];
NgSearchComponent.propDecorators = {
inputRef: [{ type: ViewChild, args: ['inputRef',] }],
notFound: [{ type: Input }],
pathLabel: [{ type: Input }],
value: [{ type: Input }],
options: [{ type: Input }],
uri: [{ type: Input }],
responseData: [{ type: Input }],
return: [{ type: Input }],
onInput: [{ type: HostListener, args: ['input', ['$event'],] }],
handleKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
blur: [{ type: Output }],
focus: [{ type: Output }]
};
class NgSelectComponent extends SelectCustomControlValueAccessor {
constructor(controlContainer, elementRef, renderer, configService, changeDetectorRef) {
super(controlContainer, elementRef, renderer, configService, changeDetectorRef);
this.controlContainer = controlContainer;
this.elementRef = elementRef;
this.renderer = renderer;
this.configService = configService;
this.optionDefault = {
label: 'Selecione uma opção',
value: '',
hide: true,
};
this.options = [];
this.formatOptions();
}
ngOnInit() {
this.ngOnInitSuper();
}
ngOnChanges(params) {
if (!!params.options && !!params.options.currentValue) {
this.formatOptions();
}
}
formatOptions() {
var _a, _b;
if (this.options.length > 0) {
const option = [];
option.push(this.optionDefault);
const optionRef = this.options[0];
if (typeof (optionRef === null || optionRef === void 0 ? void 0 : optionRef.label) === 'string' &&
typeof (optionRef === null || optionRef === void 0 ? void 0 : optionRef.value) === 'string') {
(_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach((opt) => option === null || option === void 0 ? void 0 : option.push(opt));
}
else {
if (this.path) {
const key = Object.keys(this.path)[0];
const value = this.path[key];
(_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach((opt) => option === null || option === void 0 ? void 0 : option.push({
label: this.getMultiLabels(opt, key.split('.')),
value: this.getMultiLabels(opt, value.split('.')),
hide: false,
}));
}
}
this.options = option;
}
}
get className() {
const validField = this.control.valid && this.control.touched;
const invalidField = this.control.invalid && this.control.touched;
return {
readonly: this.readonly,
'is-invalid': !this.readonly && invalidField,
'is-valid': validField,
};
}
}
NgSelectComponent.decorators = [
{ type: Component, args: [{
selector: 'dss-select',
template: "<div\r\n class=\"form-group form-control-select active\"\r\n [ngClass]=\"{\r\n invalid: control.invalid && control.touched,\r\n valid: control.valid && control.touched,\r\n 'form-group-label': !!label\r\n }\"\r\n>\r\n <div class=\"form-content input-field\">\r\n <!-- SELECT -->\r\n <select\r\n #select\r\n (change)=\"change.emit($event)\"\r\n (blur)=\"blur.emit($event)\"\r\n (focus)=\"focus.emit($event)\"\r\n [class.readonly]=\"readonly\"\r\n class=\"form-select\"\r\n [MSelect]=\"MSelectSettings\"\r\n [options]=\"options\"\r\n [tabIndex]=\"readonly ? '-1' : ''\"\r\n [id]=\"name\"\r\n [formControl]=\"control\"\r\n [ngClass]=\"className\"\r\n >\r\n <option\r\n *ngFor=\"let option of options\"\r\n [hidden]=\"option.hide\"\r\n [value]=\"option.value\"\r\n [attr.data-icon]=\"option?.icon\"\r\n >\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n\r\n <!-- BORDER -->\r\n <span class=\"focus-border\">\r\n <i></i>\r\n </span>\r\n\r\n <!-- LABEL -->\r\n <label\r\n *ngIf=\"label\"\r\n [for]=\"name\"\r\n [class.active]=\"control.value?.length > 0\"\r\n >\r\n {{ label }}<span *ngIf=\"required\" class=\"required\">*</span>\r\n </label>\r\n </div>\r\n <ng-container *ngFor=\"let error of getKeys(errors)\">\r\n <!-- MESSAGE ERROR -->\r\n <div *ngIf=\"getError(error)\" class=\"message error\">\r\n {{ errors[error] }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- MESSAGE HELp -->\r\n <div *ngIf=\"!!help\" class=\"message\">\r\n {{ help }}\r\n </div>\r\n</div>\r\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => NgSelectComponent),
},
]
},] }
];
NgSelectComponent.ctorParameters = () => [
{ type: ControlContainer },
{ type: ElementRef },
{ type: Renderer2 },
{ type: NgInputConfigService },
{ type: ChangeDetectorRef }
];
NgSelectComponent.propDecorators = {
elementSelect: [{ type: ViewChild, args: ['select', { static: true },] }],
MSelectSettings: [{ type: Input }],
optionDefault: [{ type: Input }],
options: [{ type: Input }],
path: [{ type: Input }]
};
class NgMaskPipe {
constructor(maskService) {
this.maskService = maskService;
}
transform(value, type) {
if (value) {
if (type === undefined) {
return value;
}
return this.maskService.format(value, type);
}
return '-';
}
}
NgMaskPipe.decorators = [
{ type: Pipe, args: [{
name: 'dssMask',
},] }
];
NgMaskPipe.ctorParameters = () => [
{ type: NgInputMasksService }
];
class NgPipeModule {
static forRoot() {
return {
ngModule: NgPipeModule,
providers: [NgMaskPipe, DatePipe],
};
}
}
NgPipeModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [NgMaskPipe],
exports: [NgMaskPipe],
providers: [NgMaskPipe, DatePipe],
},] }
];
class NgCoreModule {
static forRoot() {
return {
ngModule: NgCoreModule,
providers: [NgInputConfigService, NgInputMasksService, NgPipeModule],
};
}
}
NgCoreModule.decorators = [
{ type: NgModule, args: [{
declarations: [],
imports: [CommonModule, ReactiveFormsModule, FormsModule, NgPipeModule],
exports: [ReactiveFormsModule, FormsModule, NgPipeModule],
},] }
];
class SelectDirective {
constructor(elementRef, ngInputConfigService) {
this.elementRef = elementRef;
this.ngInputConfigService = ngInputConfigService;
this.MSelect = {
default: false,
};
}
ngAfterViewInit() {
var _a;
const element = this.elementRef.nativeElement;
if (!((_a = this.MSelect) === null || _a === void 0 ? void 0 : _a.default) &&
this.ngInputConfigService.theme === 'materialize') {
this.initSelect();
}
else {
element.classList.add('browser-default');
}
}
ngOnChanges() {
var _a;
if (!((_a = this.MSelect) === null || _a === void 0 ? void 0 : _a.default) &&
this.ngInputConfigService.theme === 'materialize') {
this.initSelect();
}
}
initSelect() {
setTimeout(() => {
var _a;
if (this.ref) {
(_a = this.ref) === null || _a === void 0 ? void 0 : _a.destroy();
}
this.ref = M === null || M === void 0 ? void 0 : M.FormSelect.init(this.elementRef.nativeElement);
}, 250);
}
ngOnDestroy() {
var _a;
if (this.ref) {
(_a = this.ref) === null || _a === void 0 ? void 0 : _a.destroy();
}
}
}
SelectDirective.decorators = [
{ type: Directive, args: [{
selector: '[MSelect]',
},] }
];
SelectDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: NgInputConfigService }
];
SelectDirective.propDecorators = {
MSelect: [{ type: Input }],
options: [{ type: Input }]
};
class NgDirectiveModule {
static forRoot() {
return {
ngModule: NgDirectiveModule,
providers: [],
};
}
}
NgDirectiveModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [SelectDirective],
exports: [SelectDirective],
},] }
];
class NgSelectModule {
}
NgSelectModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NgSearchComponent,
NgSelectComponent,
SelectCustomControlValueAccessor,
],
imports: [CommonModule, NgCoreModule, NgDirectiveModule],
exports: [NgSearchComponent, NgSelectComponent, NgCoreModule],
},] }
];
class InputCustomControlValueAccessor {
constructor(_controlContainer, _configService, _changeDetectorRef) {
this._controlContainer = _controlContainer;
this._configService = _configService;
this._changeDetectorRef = _changeDetectorRef;
this.disabled = false;
this.blur = new EventEmitter();
this.focus = new EventEmitter();
this._placeholder = '';
this.label = '';
this._cols = {
default: 12,
sm: 12,
};
this._field = null;
this.readonly = false;
this.errors = {};
this.time = 0;
}
get placeholder() {
return this._placeholder;
}
set placeholder(value) {
this._placeholder = value;
}
set cols(cols) {
this._cols = Object.assign(Object.assign({}, this._cols), cols);
}
set field(value) {
this._field = value;
}
get field() {
return this._field
? this._field
: this._configService.field.type;
}
get control() {
var _a, _b;
return (this.formControl ||
((_b = (_a = this._controlContainer) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.get(this.formControlName)));
}
get classCols() {
let className = this._configService.theme === 'bootstrap'
? `col-${this._cols.default}`
: `col`;
if (this._cols.lg)
className +=
this._configService.theme === 'bootstrap'
? ` col-lg-${this._cols.lg}`
: ` l${this._cols.lg}`;
if (this._cols.md)
className +=
this._configService.theme === 'bootstrap'
? ` col-md-${this._cols.md}`
: ` m${this._cols.md}`;
if (this._cols.sm)
className +=
this._configService.theme === 'bootstrap'
? ` col-sm-${this._cols.sm}`
: ` s${this._cols.sm}`;
return className;
}
ngOnInit() {
this.ngOnInitSuper();
if (this.disabled)
this.control.disable();
else
this.control.enable();
}
ngOnInitSuper() {
if (this.name === undefined)
this.name = this.formControlName;
if (this.required === null) {
const value = this.control.value;
this.control.reset();
this.required = !!this.control.getError('required');
this.control.setValue(value);
}
}
getKeys(errors) {
return Object.keys(errors);
}
getError(key) {
var _a, _b, _c;
return ((_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[key]) && ((_c = this.control) === null || _c === void 0 ? void 0 : _c.touched);
}
registerOnTouched(fn) {
var _a;
(_a = this.formControlDirective.valueAccessor) === null || _a === void 0 ? void 0 : _a.registerOnTouched(fn);
}
registerOnChange(fn) {
this.onWrite = fn;
}
writeValue(obj) {
clearTimeout(this.time);
this.time = setTimeout(() => {
this.onWrite(obj);
});
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
InputCustomControlValueAccessor.decorators = [
{ type: Component, args: [{ selector: '', template: '' },] }
];
InputCustomControlValueAccessor.ctorParameters = () => [
{ type: ControlContainer },
{ type: NgInputConfigService },
{ type: ChangeDetectorRef }
];
InputCustomControlValueAccessor.propDecorators = {
formControlDirective: [{ type: ViewChild, args: [FormControlDirective, { static: true },] }],
formControl: [{ type: Input }],
formControlName: [{ type: Input }],
name: [{ type: Input }],
help: [{ type: Input }],
disabled: [{ type: Input }],
blur: [{ type: Output }],
focus: [{ type: Output }],
placeholder: [{ type: Input }],
label: [{ type: Input }],
cols: [{ type: Input }],
field: [{ type: Input }],
readonly: [{ type: Input }],
required: [{ type: Input }],
errors: [{ type: Input }],
classCols: [{ type: HostBinding, args: ['class',] }]
};
const typeInputsProps = [
'button',
'checkbox',
'color',
'date',
'datetime-local',
'email',
'file',
'hidden',
'image',
'month',
'number',
'password',
'radio',
'range',
'reset',
'search',
'submit',
'tel',
'text',
'time',
'url',
'week',
];
const typeInputsPropsCustom = [
'CPF',
'CNPJ',
'CPF_CNPJ',
'RG',
'RG_ESTADUAL',
'PERCENT',
'CEP',
'CURRENCY',
'TEL',
'ZIPCODE',
];
class NgInputComponent extends InputCustomControlValueAccessor {
constructor(controlContainer, masksService, configService, changeDetectorRef) {
super(controlContainer, configService, changeDetectorRef);
this.controlContainer = controlContainer;
this.masksService = masksService;
this.configService = configService;
this.changeDetectorRef = changeDetectorRef;
this.align = null;
this.autocomplete = 'work';
this.date = { fill: false, date: new Date() };
this.validate = 'NORMAL';
this.number = {
returnNULL: true,
};
this.type = 'text';
this.typesMask = [...typeInputsPropsCustom];
this.typeInit = 'text';
this.clickIcon = new EventEmitter();
this._icon = {
clickable: false,
align: this.configService.field.alignIcons,
hide: false,
class: '',
};
this.isFieldPassword = false;
this.isFieldCurrency = false;
this.isFieldPercent = false;
this.isFieldAmount = false;
this.instance = null;
this.typesDates = ['date', 'datetime-local', 'month', 'time'];
this.typesActive = [
'date',
'month',
'currency',
'percent',
'time',
'week',
'datetime-local',
'color',
];
this.time = 0;
}
set icon(icon) {
this._icon = Object.assign(this._icon, icon);
if (icon) {
this._icon.class = `form-icon-floating ${icon.icon} ${this._icon.align} ${this._icon.clickable && 'clickable'}`;
}
}
get activeField() {
var _a;
return (((_a = this.control.value) === null || _a === void 0 ? void 0 : _a.length) > 0 || this.typesActive.includes(this.typeInit));
}
ngOnInit() {
this.ngOnInitSuper();
this.typeInit = this.type;
this.isFieldPassword = this.type === 'password';
if (this.align === null && this.typeInit === 'amount') {
this.isFieldAmount = true;
this.align = 'right';
}
if (this.typesMask.includes(this.type.toUpperCase()) || this.mask) {
this.instance = this.masksService.set(this.input.nativeElement, this.type, { allowNegative: this.allowNegative, mask: this.mask });
if (this.type === 'currency') {
this.isFieldCurrency = true;
if (this.configService.currency.align)
this.align = this.configService.currency.align;
}
if (this.type === 'percent') {
this.isFieldPercent = true;
if (this.configService.percent.align)
this.align = this.configService.percent.align;
}
}
if (this._icon.icon === undefined && this.configService.field.icons) {
if (this.configService.field.icons[this.type]) {
this.icon = this.configService.field.icons[this.type];
}
}
if (!typeInputsProps.includes(this.type)) {
this.type = 'text';
}
const isValidFormat = this.date.fill &&
this.typesDates.includes(this.type) &&
!Boolean(this.control.value);
if (isValidFormat) {
this.control.setValue(this.formatDate());
}
if (this.align === null) {
this.align = 'left';
}
this.input.nativeElement.addEventListener('input', (event) => {
var _a, _b;
let { value } = event.target;
if (this.isFieldAmount) {
value = value.replace(/\D/g, '');
if (/^0/g.test(value)) {
value = value.replace(/0+/, '');
}
const result = Number(value) / 1000;
if (result === 0 && this.number.returnNULL) {
this.onWrite(null);
}
else {
this.onWrite(result);
}
this.input.nativeElement.value = result.toFixed(3);
}
else if (this.instance) {
if (this.isFieldCurrency || this.isFieldPercent) {
const currencyOrPercent = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.formatToNumber();
if (this.required) {
value =
currencyOrPercent === 0 && this.number.returnNULL
? null
: currencyOrPercent;
}
else
value = currencyOrPercent;
}
else {
value = (_b = this.instance) === null || _b === void 0 ? void 0 : _b.unmaskedValue;
}
this.onWrite(value);
}
else {
this.onWrite(value);
}
});
}
formatDate(date = this.date.date) {
const dates = {
'datetime-local': dayjs(date).format('YYYY-MM-DDTHH:mm:ss'),
date: dayjs(date).format('YYYY-MM-DD'),
month: dayjs(date).format('YYYY-MM'),
time: dayjs(date).format('HH:mm'),
};
return dates[this.type];
}
onClickIcon(event) {
if (this._icon.clickable) {
if (this.isFieldPassword)
this.type = this.type === 'password' ? 'text' : 'password';
this.clickIcon.emit(event);
}
}
onFocus(event) {
if (this.isFieldCurrency || this.isFieldPercent || this.isFieldAmount) {
const length = this.input.nativeElement.value.length;
this.input.nativeElement.setSelectionRange(0, length);
}
this.focus.emit(event);
}
writeValue(obj) {
clearTimeout(this.time);
this.time = setTimeout(() => {
var _a, _b;
const isValidFormat = this.typesDates.includes(this.type);
if (isValidFormat) {
this.input.nativeElement.value = this.formatDate(obj);
}
if (this.typeInit === 'amount') {
let value = `${obj}`;
if (/^0/g.test(value)) {
value = value.replace(/0+/, '');
}
let result = Number(value);
if (Number.isNaN(result)) {
result = 0;
}
if (result === 0 && this.number.returnNULL) {
this.onWrite(null);
}
else {
this.onWrite(result);
}
this.input.nativeElement.value = result.toFixed(3);
}
else if (this.typesMask.includes(this.typeInit.toUpperCase())) {
if (this.isFieldCurrency || this.isFieldPercent) {
let result = this.masksService.format(obj, this.isFieldCurrency ? 'currency' : 'percent', { allowNegative: this.allowNegative, mask: this.mask });
this.input.nativeElement.value =
result === 0 && this.number.returnNULL ? null : result;
result = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.formatToNumber();
if (result === 0 && !this.number.returnNULL) {
this.onWrite(result);
}
}
else {
this.input.nativeElement.value = this.masksService.format(`${obj}`, this.typeInit, { allowNegative: this.allowNegative, mask: this.mask });
(_b = this.instance) === null || _b === void 0 ? void 0 : _b.updateValue();
}
this.input.nativeElement.blur();
this.control.markAsUntouched();
}
this.changeDetectorRef.detectChanges();
}, 250);
}
get className() {
const validField = this.control.valid && this.control.touched;
const invalidField = this.control.invalid && this.control.touched;
return {
readonly: this.readonly,
'is-invalid': !this.readonly && invalidField,
'is-valid': validField,
};
}
}
NgInputComponent.decorators = [
{ type: Component, args: [{
selector: 'dss-input',
template: "<div\r\n class=\"form-group form-control-input\"\r\n [ngClass]=\"{\r\n invalid: control.invalid && control.touched && control.dirty,\r\n valid: control.valid && control.touched,\r\n 'form-group-label': !!label,\r\n active: activeField\r\n }\"\r\n>\r\n <div class=\"form-content\">\r\n <!-- ICON -->\r\n <i\r\n (click)=\"onClickIcon($event)\"\r\n *ngIf=\"(isFieldPassword || !!_icon?.icon) && !_icon?.hide\"\r\n [class]=\"_icon.class\"\r\n [ngClass]=\"{\r\n 'icon-background': !_icon.icon && isFieldPassword,\r\n eye: !_icon.icon && isFieldPassword && type === 'password',\r\n 'eye-close': !_icon.icon && isFieldPassword && type === 'text'\r\n }\"\r\n ></i>\r\n\r\n <!-- INPUT -->\r\n <input\r\n #input\r\n [type]=\"type\"\r\n [id]=\"name\"\r\n class=\"form-control browser-default\"\r\n [autocomplete]=\"autocomplete\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"blur.emit($event)\"\r\n (focus)=\"onFocus($event)\"\r\n [readonly]=\"readonly\"\r\n [ngClass]=\"className\"\r\n [ngStyle]=\"{ 'text-align': align }\"\r\n />\r\n\r\n <!-- BORDER -->\r\n <span\r\n class=\"focus-border\"\r\n [class.disabled]=\"isFieldPassword && validate !== 'NONE'\"\r\n >\r\n <i></i>\r\n </span>\r\n\r\n <!-- LABEL -->\r\n <label *ngIf=\"label\" [for]=\"name\">\r\n {{ label }}<span *ngIf=\"required\" class=\"required\">*</span>\r\n </label>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let error of getKeys(errors)\">\r\n <!-- MESSAGE ERROR -->\r\n <div *ngIf=\"getError(error)\" class=\"message error\">\r\n {{ errors[error] }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- MESSAGE HELp -->\r\n <div *ngIf=\"!!help\" class=\"message\">\r\n {{ help }}\r\n </div>\r\n</div>\r\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => NgInputComponent),
},
]
},] }
];
NgInputComponent.ctorParameters = () => [
{ type: ControlContainer },
{ type: NgInputMasksService },
{ type: NgInputConfigService },
{ type: ChangeDetectorRef }
];
NgInputComponent.propDecorators = {
input: [{ type: ViewChild, args: ['input', { static: true },] }],
align: [{ type: Input }],
autocomplete: [{ type: Input }],
date: [{ type: Input }],
mask: [{ type: Input }],
allowNegative: [{ type: Input }],
validate: [{ type: Input }],
number: [{ type: Input }],
type: [{ type: Input }],
clickIcon: [{ type: Output }],
icon: [{ type: Input }]
};
class NgTextAreaComponent extends InputCustomControlValueAccessor {
constructor(controlContainer, configService, changeDetectorRef) {
super(controlContainer, configService, changeDetectorRef);
this.controlContainer = controlContainer;
this.configService = configService;
this.length = 300;
this.rows = 100;
}
ngOnInit() {
this.ngOnInitSuper();
}
get className() {
const validField = this.control.valid && this.control.touched;
const invalidField = this.control.invalid && this.control.touched;
return {
floating: this.field === 'floating',
readonly: this.readonly,
'is-invalid': !this.readonly && invalidField,
'is-valid': validField,
};
}
}
NgTextAreaComponent.decorators = [
{ type: Component, args: [{
selector: 'dss-text-area',
template: "<div\r\n class=\"form-group form-control-text-area\"\r\n [ngClass]=\"{\r\n invalid: control.invalid && control.touched,\r\n valid: control.valid && control.touched,\r\n 'form-group-counter': !!length,\r\n 'form-group-help': !!help,\r\n 'form-group-label': !!label,\r\n active: !!control?.value\r\n