iptdevs-design-system
Version:
Library common elements into IPT Plattform.
150 lines (140 loc) • 14.2 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "ng2-currency-mask";
export class InputComponent {
constructor() {
this.data = [];
this.clicked = false;
this.withPipe = false;
this.prefix = '$';
this.thousands = '.';
this.decimal = ',';
this.dateSelected = new EventEmitter();
this.disabledSel = false;
}
set control(value) {
if (this.formControl !== value) {
this.formControl = value;
}
}
ngOnInit() { }
selectedDate(evt) {
this.dateSelected.emit(evt);
}
click(value) {
this.clicked = value.isTrusted;
}
}
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: InputComponent, selector: "ipt-input", inputs: { inputType: "inputType", placeHolder: "placeHolder", validateText: "validateText", withPipe: "withPipe", list: "list", iconUrl: "iconUrl", control: "control", prefix: "prefix", thousands: "thousands", decimal: "decimal", disabledSel: "disabledSel" }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: `
<div class="input-container">
<!-- Resto del código... -->
<input *ngIf="inputType === 'date'"
class="input"
type="{{ inputType ? 'text' : 'date' }}"
[formControl]="formControl"
(ngModelChange)="selectedDate($event)"
onfocus="this.type='date';"
onblur="javascript: if( !this.value ) this.type='text';"
uib-datepicker-popup="dd/MM/yyyy"
ng-model="inputType"/>
<input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
class="input"
type="{{ inputType }}"
[formControl]="formControl"
[attr.list]="list"/>
<input *ngIf="inputType === 'text' && withPipe"
class="input"
currencyMask
[options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
type="{{ inputType }}"
[formControl]="formControl"
[attr.list]="list"/>
<input *ngIf="inputType === 'time'"
class="input"
type="time"
[formControl]="formControl"
[min]="'06:00:00'"
max="22:00:00"
step="900"
autocomplete="on"
value="08:00:00"
(click)="click($event)"
/>
<label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
<p *ngIf="(formControl.invalid && formControl.value !== '')">
{{ validateText }}
</p>
</div>
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:9px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:9px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:9px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:9px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:9px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: InputComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-input', template: `
<div class="input-container">
<!-- Resto del código... -->
<input *ngIf="inputType === 'date'"
class="input"
type="{{ inputType ? 'text' : 'date' }}"
[formControl]="formControl"
(ngModelChange)="selectedDate($event)"
onfocus="this.type='date';"
onblur="javascript: if( !this.value ) this.type='text';"
uib-datepicker-popup="dd/MM/yyyy"
ng-model="inputType"/>
<input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
class="input"
type="{{ inputType }}"
[formControl]="formControl"
[attr.list]="list"/>
<input *ngIf="inputType === 'text' && withPipe"
class="input"
currencyMask
[options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
type="{{ inputType }}"
[formControl]="formControl"
[attr.list]="list"/>
<input *ngIf="inputType === 'time'"
class="input"
type="time"
[formControl]="formControl"
[min]="'06:00:00'"
max="22:00:00"
step="900"
autocomplete="on"
value="08:00:00"
(click)="click($event)"
/>
<label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
<p *ngIf="(formControl.invalid && formControl.value !== '')">
{{ validateText }}
</p>
</div>
`, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:9px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:9px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:9px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:9px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:9px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { inputType: [{
type: Input
}], placeHolder: [{
type: Input
}], validateText: [{
type: Input
}], withPipe: [{
type: Input
}], list: [{
type: Input
}], iconUrl: [{
type: Input
}], control: [{
type: Input
}], prefix: [{
type: Input
}], thousands: [{
type: Input
}], decimal: [{
type: Input
}], dateSelected: [{
type: Output
}], disabledSel: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvaW5wdXQvaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQXFCLE1BQU0sZUFBZSxDQUFDOzs7OztBQW9EMUYsTUFBTSxPQUFPLGNBQWM7SUF5QnpCO1FBdEJBLFNBQUksR0FBVSxFQUFFLENBQUM7UUFFakIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUtoQixhQUFRLEdBQWEsS0FBSyxDQUFDO1FBUzNCLFdBQU0sR0FBVyxHQUFHLENBQUM7UUFDckIsY0FBUyxHQUFXLEdBQUcsQ0FBQztRQUN4QixZQUFPLEdBQVcsR0FBRyxDQUFDO1FBQ3JCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUMzQyxnQkFBVyxHQUFZLEtBQUssQ0FBQztJQUV2QixDQUFDO0lBWmhCLElBQWEsT0FBTyxDQUFDLEtBQStCO1FBQ2xELElBQUksSUFBSSxDQUFDLFdBQVcsS0FBSyxLQUFLLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFvQixDQUFDO1NBQ3pDO0lBQ0gsQ0FBQztJQVVELFFBQVEsS0FBSSxDQUFDO0lBRWIsWUFBWSxDQUFDLEdBQVc7UUFDdEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFpQjtRQUNyQixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxTQUFTLENBQUM7SUFDakMsQ0FBQzs7MkdBbkNVLGNBQWM7K0ZBQWQsY0FBYyxnV0FoRGY7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTZDUDsyRkFHUSxjQUFjO2tCQWxEMUIsU0FBUzsrQkFDRSxXQUFXLFlBQ1g7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTZDUDswRUFVTSxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ08sT0FBTztzQkFBbkIsS0FBSztnQkFNRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTTtnQkFDRSxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWJzdHJhY3RDb250cm9sLCBGb3JtQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkluaXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpcHQtaW5wdXQnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJpbnB1dC1jb250YWluZXJcIj5cbiAgICAgIDwhLS0gUmVzdG8gZGVsIGPDs2RpZ28uLi4gLS0+XG4gICAgICA8aW5wdXQgKm5nSWY9XCJpbnB1dFR5cGUgPT09ICdkYXRlJ1wiXG4gICAgICAgIGNsYXNzPVwiaW5wdXRcIlxuICAgICAgICB0eXBlPVwie3sgaW5wdXRUeXBlID8gJ3RleHQnIDogJ2RhdGUnIH19XCJcbiAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwic2VsZWN0ZWREYXRlKCRldmVudClcIlxuICAgICAgICBvbmZvY3VzPVwidGhpcy50eXBlPSdkYXRlJztcIlxuICAgICAgICBvbmJsdXI9XCJqYXZhc2NyaXB0OiBpZiggIXRoaXMudmFsdWUgKSB0aGlzLnR5cGU9J3RleHQnO1wiXG4gICAgICAgIHVpYi1kYXRlcGlja2VyLXBvcHVwPVwiZGQvTU0veXl5eVwiXG4gICAgICAgIG5nLW1vZGVsPVwiaW5wdXRUeXBlXCIvPlxuXG4gICAgICA8aW5wdXQgKm5nSWY9XCJpbnB1dFR5cGUgIT09ICdkYXRlJyAmJiBpbnB1dFR5cGUgIT09ICd0aW1lJyAmJiAhd2l0aFBpcGVcIlxuICAgICAgICBjbGFzcz1cImlucHV0XCJcbiAgICAgICAgdHlwZT1cInt7IGlucHV0VHlwZSB9fVwiXG4gICAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiXG4gICAgICAgIFthdHRyLmxpc3RdPVwibGlzdFwiLz5cblxuICAgICAgICA8aW5wdXQgKm5nSWY9XCJpbnB1dFR5cGUgPT09ICd0ZXh0JyAmJiB3aXRoUGlwZVwiXG4gICAgICAgICAgY2xhc3M9XCJpbnB1dFwiXG4gICAgICAgICAgY3VycmVuY3lNYXNrXG4gICAgICAgICAgW29wdGlvbnNdPVwieyBwcmVmaXg6IHByZWZpeCwgdGhvdXNhbmRzOiB0aG91c2FuZHMsIGRlY2ltYWw6IGRlY2ltYWwsIGFsbG93TmVnYXRpdmU6IGZhbHNlIH1cIlxuICAgICAgICAgIHR5cGU9XCJ7eyBpbnB1dFR5cGUgfX1cIlxuICAgICAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiXG4gICAgICAgICAgW2F0dHIubGlzdF09XCJsaXN0XCIvPlxuXG4gICAgICAgIDxpbnB1dCAqbmdJZj1cImlucHV0VHlwZSA9PT0gJ3RpbWUnXCJcbiAgICAgICAgICBjbGFzcz1cImlucHV0XCJcbiAgICAgICAgICB0eXBlPVwidGltZVwiXG4gICAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgICBbbWluXT1cIicwNjowMDowMCdcIlxuICAgICAgICAgIG1heD1cIjIyOjAwOjAwXCJcbiAgICAgICAgICBzdGVwPVwiOTAwXCJcbiAgICAgICAgICBhdXRvY29tcGxldGU9XCJvblwiXG4gICAgICAgICAgdmFsdWU9XCIwODowMDowMFwiXG4gICAgICAgICAgKGNsaWNrKT1cImNsaWNrKCRldmVudClcIlxuICAgICAgICAvPlxuXG4gICAgICA8bGFiZWwgW25nQ2xhc3NdPVwieydsYWJlbFVwJzogZm9ybUNvbnRyb2wudmFsdWUgIT09ICcnfVwiPnt7IHBsYWNlSG9sZGVyIH19PC9sYWJlbD5cblxuICAgICAgPHAgKm5nSWY9XCIoZm9ybUNvbnRyb2wuaW52YWxpZCAmJiBmb3JtQ29udHJvbC52YWx1ZSAhPT0gJycpXCI+XG4gICAgICAgIHt7IHZhbGlkYXRlVGV4dCB9fVxuICAgICAgPC9wPlxuICAgIDwvZGl2PlxuICAgIGAsXG4gIHN0eWxlVXJsczogWycuL2lucHV0LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgcHVibGljIGNvZGVWYWx1ZSE6IHN0cmluZztcbiAgZGF0YTogYW55W10gPSBbXTtcbiAgZm9ybUNvbnRyb2whOiBGb3JtQ29udHJvbDtcbiAgY2xpY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIGlucHV0VHlwZSE6IHN0cmluZztcbiAgQElucHV0KCkgcGxhY2VIb2xkZXIhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHZhbGlkYXRlVGV4dD86IHN0cmluZztcbiAgQElucHV0KCkgd2l0aFBpcGU/OiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGxpc3Q/OiBzdHJpbmc7IC8vUGFyYSBlbCBkYXRhbGlzdFxuICBASW5wdXQoKSBpY29uVXJsPzogc3RyaW5nO1xuICBASW5wdXQoKSBzZXQgY29udHJvbCh2YWx1ZTogQWJzdHJhY3RDb250cm9sIHwgc3RyaW5nKSB7XG4gICAgaWYgKHRoaXMuZm9ybUNvbnRyb2wgIT09IHZhbHVlKSB7XG4gICAgICB0aGlzLmZvcm1Db250cm9sID0gdmFsdWUgYXMgRm9ybUNvbnRyb2w7XG4gICAgfVxuICB9XG5cbiAgQElucHV0KCkgcHJlZml4OiBzdHJpbmcgPSAnJCc7XG4gIEBJbnB1dCgpIHRob3VzYW5kczogc3RyaW5nID0gJy4nO1xuICBASW5wdXQoKSBkZWNpbWFsOiBzdHJpbmcgPSAnLCc7XG4gIEBPdXRwdXQoKSBkYXRlU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcbiAgQElucHV0KCkgZGlzYWJsZWRTZWw6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIHNlbGVjdGVkRGF0ZShldnQ6IHN0cmluZyl7XG4gICAgdGhpcy5kYXRlU2VsZWN0ZWQuZW1pdChldnQpO1xuICB9XG5cbiAgY2xpY2sodmFsdWU6IE1vdXNlRXZlbnQpIHtcbiAgICB0aGlzLmNsaWNrZWQgPSB2YWx1ZS5pc1RydXN0ZWQ7XG4gIH1cblxufVxuIl19