iptdevs-design-system
Version:
Library common elements into IPT Plattform.
704 lines (676 loc) • 676 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, Injectable, NgModule, Pipe } from '@angular/core';
import * as i3 from 'ng2-currency-mask';
import { CurrencyMaskModule } from 'ng2-currency-mask';
import * as i1 from '@angular/common';
import { CommonModule, CurrencyPipe, TitleCasePipe } from '@angular/common';
import * as i2$1 from 'primeng/api';
import { MessageService } from 'primeng/api';
import * as i7$2 from 'primeng/tabview';
import { TabViewModule } from 'primeng/tabview';
import * as i1$1 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import Swal from 'sweetalert2';
import * as i1$2 from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { trigger, transition, style, animate } from '@angular/animations';
import * as i5 from '@angular/material/sidenav';
import { MatSidenavModule } from '@angular/material/sidenav';
import * as i6 from '@angular/material/toolbar';
import { MatToolbarModule } from '@angular/material/toolbar';
import * as i7 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from 'primeng/panel';
import { PanelModule } from 'primeng/panel';
import * as i4 from 'primeng/skeleton';
import { SkeletonModule } from 'primeng/skeleton';
import * as i6$1 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import { BehaviorSubject, finalize, map } from 'rxjs';
import * as i11 from 'primeng/table';
import { TableModule } from 'primeng/table';
import * as i5$1 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i7$1 from 'primeng/inputtextarea';
import { InputTextareaModule } from 'primeng/inputtextarea';
import * as i8 from 'primeng/inputtext';
import { InputTextModule } from 'primeng/inputtext';
import * as i1$3 from '@angular/router';
import * as i5$2 from 'primeng/steps';
import { StepsModule } from 'primeng/steps';
import * as i9 from 'primeng/tooltip';
import { TooltipModule } from 'primeng/tooltip';
import * as i11$1 from 'primeng/toast';
import { ToastModule } from 'primeng/toast';
import * as i12 from 'primeng/accordion';
import { AccordionModule } from 'primeng/accordion';
import * as i13 from 'primeng/checkbox';
import { CheckboxModule } from 'primeng/checkbox';
import * as i14 from 'primeng/radiobutton';
import { RadioButtonModule } from 'primeng/radiobutton';
import { CalendarModule } from 'primeng/calendar';
import { SelectButtonModule } from 'primeng/selectbutton';
class AsideButtonComponent {
constructor() {
this.isClicked = new EventEmitter();
}
clickAction() {
this.isClicked.emit(true);
}
}
AsideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: AsideButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AsideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: AsideButtonComponent, selector: "ipt-aside-button", inputs: { icon: "icon", text: "text", buttonActive: "buttonActive" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
<div [ngSwitch]="buttonActive">
<a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
<a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
</div>
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: AsideButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-aside-button', template: `
<div [ngSwitch]="buttonActive">
<a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
<a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
</div>
`, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"] }]
}], propDecorators: { icon: [{
type: Input
}], text: [{
type: Input
}], buttonActive: [{
type: Input
}], isClicked: [{
type: Output
}] } });
class ButtonComponent {
constructor() {
this.primary = false;
this.size = 'medium';
this.label = 'Button';
this.isEnabled = true;
this.onClick = new EventEmitter();
}
get classes() {
const mode = this.primary && this.isEnabled === true
? 'ipt-button--primary'
: this.isEnabled === false ? 'ipt-button--primary-disabled'
: 'ipt-button--secondary';
return ['ipt-button', `ipt-button--${this.size}`, mode];
}
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: ButtonComponent, selector: "ipt-button", inputs: { primary: "primary", size: "size", label: "label", buttonType: "buttonType", isEnabled: "isEnabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `<button *ngIf="isEnabled"
type="{{ buttonType }}"
(click)="onClick.emit($event)"
[ngClass]="classes"
>
{{ label }}
</button>
<button *ngIf="!isEnabled"
type="{{ buttonType }}"
[ngClass]="classes"
>
{{ label }}
</button>`, isInline: true, styles: [".ipt-button{font-family:Poppins,sans-serif;font-weight:700;border:0;border-radius:4px;cursor:pointer;display:inline-block;line-height:1;transition:.4s;width:100%;box-shadow:#06182c66 0 0,#06182ca6 1px 1px 1px 1px,#ffffff14 0 0 inset}.ipt-button:hover{box-shadow:0 10px 20px #1b1b1b80;transform:translateY(-3px)}.ipt-button:active{transform:scale(.99)}.ipt-button--primary{color:#fff;background-color:#1c77f7}.ipt-button--primary-disabled{color:gray;background-color:#fff;border:1px solid gray;box-shadow:none;cursor:not-allowed}.ipt-button--primary-disabled:hover{box-shadow:none;transform:translateY(0)}.ipt-button--secondary{color:#1c77f7;background-color:#fff;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button--small{font-size:12px;padding:10px 16px}.ipt-button--medium{font-size:14px;padding:11px 20px}.ipt-button--large{font-size:16px;padding:12px 24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-button', template: `<button *ngIf="isEnabled"
type="{{ buttonType }}"
(click)="onClick.emit($event)"
[ngClass]="classes"
>
{{ label }}
</button>
<button *ngIf="!isEnabled"
type="{{ buttonType }}"
[ngClass]="classes"
>
{{ label }}
</button>`, styles: [".ipt-button{font-family:Poppins,sans-serif;font-weight:700;border:0;border-radius:4px;cursor:pointer;display:inline-block;line-height:1;transition:.4s;width:100%;box-shadow:#06182c66 0 0,#06182ca6 1px 1px 1px 1px,#ffffff14 0 0 inset}.ipt-button:hover{box-shadow:0 10px 20px #1b1b1b80;transform:translateY(-3px)}.ipt-button:active{transform:scale(.99)}.ipt-button--primary{color:#fff;background-color:#1c77f7}.ipt-button--primary-disabled{color:gray;background-color:#fff;border:1px solid gray;box-shadow:none;cursor:not-allowed}.ipt-button--primary-disabled:hover{box-shadow:none;transform:translateY(0)}.ipt-button--secondary{color:#1c77f7;background-color:#fff;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button--small{font-size:12px;padding:10px 16px}.ipt-button--medium{font-size:14px;padding:11px 20px}.ipt-button--large{font-size:16px;padding:12px 24px}\n"] }]
}], propDecorators: { primary: [{
type: Input
}], size: [{
type: Input
}], label: [{
type: Input
}], buttonType: [{
type: Input
}], isEnabled: [{
type: Input
}], onClick: [{
type: Output
}] } });
class CheckboxComponent {
constructor() {
this.checkboxOption = false;
this.onChecked = new EventEmitter();
}
set control(value) {
if (this.formControl !== value) {
this.formControl = value;
}
}
}
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CheckboxComponent, selector: "ipt-checkbox", inputs: { checkboxOption: "checkboxOption", control: "control" }, outputs: { onChecked: "onChecked" }, ngImport: i0, template: `
<label class="cont">
<input
class="checkbox"
[formControl]="formControl"
[checked]="checkboxOption"
(click)="onChecked.emit($event)"
type="checkbox">
<span></span>
</label>
`, isInline: true, styles: [".cont{display:flex;align-items:center;transform:scale(1)}@media screen and (min-width: 320px){input[type=checkbox]{height:1rem;width:1.1rem;margin:5px;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;background-color:#1c77f733;border-radius:15%;cursor:pointer;overflow:hidden}input[type=checkbox]:after{content:\"\";display:block;height:.4rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white;opacity:0;transform:rotate(45deg) translate(-50%,-50%);position:absolute;top:50%;left:20%;transition:.25s ease}input[type=checkbox]:before{content:\"\";display:block;height:0;width:0;background-color:#1c77f7;border-radius:50%;opacity:.5;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;transition:.3s ease}input[type=checkbox]:checked:before{height:130%;width:130%;opacity:100%}input[type=checkbox]:checked:after{opacity:100%}span{font-size:1rem}}@media screen and (min-width: 375px){input[type=checkbox]{height:1.2rem;width:1.3rem}input[type=checkbox]:after{height:.5rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}@media screen and (min-width: 1024px){input[type=checkbox]{height:1.3rem;width:1.4rem}input[type=checkbox]:after{height:.6rem;width:.3rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-checkbox', template: `
<label class="cont">
<input
class="checkbox"
[formControl]="formControl"
[checked]="checkboxOption"
(click)="onChecked.emit($event)"
type="checkbox">
<span></span>
</label>
`, styles: [".cont{display:flex;align-items:center;transform:scale(1)}@media screen and (min-width: 320px){input[type=checkbox]{height:1rem;width:1.1rem;margin:5px;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;background-color:#1c77f733;border-radius:15%;cursor:pointer;overflow:hidden}input[type=checkbox]:after{content:\"\";display:block;height:.4rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white;opacity:0;transform:rotate(45deg) translate(-50%,-50%);position:absolute;top:50%;left:20%;transition:.25s ease}input[type=checkbox]:before{content:\"\";display:block;height:0;width:0;background-color:#1c77f7;border-radius:50%;opacity:.5;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;transition:.3s ease}input[type=checkbox]:checked:before{height:130%;width:130%;opacity:100%}input[type=checkbox]:checked:after{opacity:100%}span{font-size:1rem}}@media screen and (min-width: 375px){input[type=checkbox]{height:1.2rem;width:1.3rem}input[type=checkbox]:after{height:.5rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}@media screen and (min-width: 1024px){input[type=checkbox]{height:1.3rem;width:1.4rem}input[type=checkbox]:after{height:.6rem;width:.3rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}\n"] }]
}], propDecorators: { checkboxOption: [{
type: Input
}], control: [{
type: Input
}], onChecked: [{
type: Output
}] } });
class DatalistComponent {
constructor(fb) {
this.disabledSel = false;
this.isChanged = new EventEmitter();
this.clicked = false;
}
optionChanged(event) {
let selectOption = this.datalistData.find(element => element.name == event.target.value);
if (typeof (selectOption) != 'undefined') {
this.isChanged.emit(selectOption.code);
}
else {
this.isChanged.emit('-1');
}
}
click(value) {
this.clicked = value.isTrusted;
}
setDataListValue() {
let selectOption = this.datalistData.find(element => element.code == this.initalData);
if (typeof (selectOption) != 'undefined') {
return selectOption.name;
}
else {
return '';
}
}
get labelClass() {
return this.clicked === false ? 'label' : 'labelUp';
}
}
DatalistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DatalistComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: DatalistComponent, selector: "ipt-datalist", inputs: { datalistId: "datalistId", datalistData: "datalistData", placeHolder: "placeHolder", validateText: "validateText", initalData: "initalData", disabledSel: "disabledSel" }, outputs: { isChanged: "isChanged" }, ngImport: i0, template: `
<div class="input-container">
<label [ngClass]="labelClass">{{ placeHolder }}</label>
<input
type="text"
class="input"
(click)="click($event)"
[attr.list]="datalistId"
(change)="optionChanged($event)"
[disabled]="disabledSel"
[value]="setDataListValue()"
/>
<datalist id="{{ datalistId }}">
<option *ngFor="let item of datalistData; index as i" [value]="item.name">
{{item.id_card}} {{item.name}}
</option>
</datalist>
</div>
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.input-container{position:relative;margin-top:15px}.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:8px;background-color:#fff}.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}.labelUp{color:#1c77f7;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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DatalistComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-datalist', template: `
<div class="input-container">
<label [ngClass]="labelClass">{{ placeHolder }}</label>
<input
type="text"
class="input"
(click)="click($event)"
[attr.list]="datalistId"
(change)="optionChanged($event)"
[disabled]="disabledSel"
[value]="setDataListValue()"
/>
<datalist id="{{ datalistId }}">
<option *ngFor="let item of datalistData; index as i" [value]="item.name">
{{item.id_card}} {{item.name}}
</option>
</datalist>
</div>
`, styles: ["*{font-family:Poppins,sans-serif}.input-container{position:relative;margin-top:15px}.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:8px;background-color:#fff}.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}.labelUp{color:#1c77f7;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 [{ type: i1$1.FormBuilder }]; }, propDecorators: { datalistId: [{
type: Input
}], datalistData: [{
type: Input
}], placeHolder: [{
type: Input
}], validateText: [{
type: Input
}], initalData: [{
type: Input
}], disabledSel: [{
type: Input
}], isChanged: [{
type: Output
}] } });
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: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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
}] } });
class LevelButtonComponent {
constructor() {
this.isClicked = new EventEmitter();
}
clickAction() {
this.isClicked.emit(true);
}
}
LevelButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LevelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LevelButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LevelButtonComponent, selector: "ipt-level-button", inputs: { level: "level", buttonActive: "buttonActive", idColor: "idColor" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
<div [ngSwitch]="buttonActive">
<button
*ngSwitchCase="0"
(click)="clickAction()"
id="level"
class="courses"
>
<p class="p-level">{{ level }}</p>
</button>
<button
*ngSwitchCase="1"
(click)="clickAction()"
id="{{ idColor }}"
class="courses">
<p class="p-level p-level-active">{{ level }}</p>
</button>
</div>
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:3px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LevelButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-level-button', template: `
<div [ngSwitch]="buttonActive">
<button
*ngSwitchCase="0"
(click)="clickAction()"
id="level"
class="courses"
>
<p class="p-level">{{ level }}</p>
</button>
<button
*ngSwitchCase="1"
(click)="clickAction()"
id="{{ idColor }}"
class="courses">
<p class="p-level p-level-active">{{ level }}</p>
</button>
</div>
`, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:3px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"] }]
}], propDecorators: { level: [{
type: Input
}], buttonActive: [{
type: Input
}], idColor: [{
type: Input
}], isClicked: [{
type: Output
}] } });
class LevelTextComponent {
}
LevelTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LevelTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LevelTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LevelTextComponent, selector: "ipt-level-button", inputs: { level: "level", total: "total" }, ngImport: i0, template: `
<p class="p-table-course">{{ level }}: {{ total }}</p>
`, isInline: true, styles: ["@media (min-width: 320px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 375px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 425px){.p-table-course{font-size:18px}}@media (min-width: 1024px){.p-table-course{font-size:20px}}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LevelTextComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-level-button', template: `
<p class="p-table-course">{{ level }}: {{ total }}</p>
`, styles: ["@media (min-width: 320px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 375px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 425px){.p-table-course{font-size:18px}}@media (min-width: 1024px){.p-table-course{font-size:20px}}\n"] }]
}], propDecorators: { level: [{
type: Input
}], total: [{
type: Input
}] } });
class LoaderComponent {
constructor() {
this.message = '';
this.isDialog = false;
}
}
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LoaderComponent, selector: "ipt-loader", inputs: { message: "message", isDialog: "isDialog" }, ngImport: i0, template: `
<div [ngClass]="{'dialog': isDialog}">
<div [ngClass]="{'loader_container' : isDialog}">
<span>{{ message }}</span>
<div class="container">
<div class="spinner">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</div>`, isInline: true, styles: [".dialog{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s;z-index:9999}.loader_container{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;position:absolute;inset:0;margin:auto;background-color:#fff;border-radius:3px;padding:1rem;z-index:9999}span{display:flex;justify-content:center;color:#1c77f7;font:bold;margin-bottom:1rem}.container{display:flex;justify-content:center}.spinner{width:60px;height:60px;position:relative}.spinner .dot{position:absolute;inset:0;display:flex;justify-content:center}.spinner .dot:after{content:\"\";width:7px;height:7px;border-radius:50%;background-color:#1c77f7}@keyframes spin{to{transform:rotate(360deg)}}.spinner .dot{animation:spin 2s infinite}.spinner .dot:nth-child(2){animation-delay:.1s}.spinner .dot:nth-child(3){animation-delay:.2s}.spinner .dot:nth-child(4){animation-delay:.3s}.spinner .dot:nth-child(5){animation-delay:.4s}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-loader', template: `
<div [ngClass]="{'dialog': isDialog}">
<div [ngClass]="{'loader_container' : isDialog}">
<span>{{ message }}</span>
<div class="container">
<div class="spinner">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</div>`, styles: [".dialog{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s;z-index:9999}.loader_container{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;position:absolute;inset:0;margin:auto;background-color:#fff;border-radius:3px;padding:1rem;z-index:9999}span{display:flex;justify-content:center;color:#1c77f7;font:bold;margin-bottom:1rem}.container{display:flex;justify-content:center}.spinner{width:60px;height:60px;position:relative}.spinner .dot{position:absolute;inset:0;display:flex;justify-content:center}.spinner .dot:after{content:\"\";width:7px;height:7px;border-radius:50%;background-color:#1c77f7}@keyframes spin{to{transform:rotate(360deg)}}.spinner .dot{animation:spin 2s infinite}.spinner .dot:nth-child(2){animation-delay:.1s}.spinner .dot:nth-child(3){animation-delay:.2s}.spinner .dot:nth-child(4){animation-delay:.3s}.spinner .dot:nth-child(5){animation-delay:.4s}\n"] }]
}], propDecorators: { message: [{
type: Input
}], isDialog: [{
type: Input
}] } });
class RadioComponent {
constructor() {
this.radioOption = false;
this.onSelected = new EventEmitter();
}
set control(value) {
if (this.formControl !== value) {
this.formControl = value;
}
}
}
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: RadioComponent, selector: "ipt-radio", inputs: { radioOption: "radioOption", control: "control" }, outputs: { onSelected: "onSelected" }, ngImport: i0, template: `
<label class="cont">
<input
class="radio"
[formControl]="formControl"
[checked]="radioOption"
(click)="onSelected.emit($event)"
type="radio">
<span></span>
</label>
`, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: i1$1.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: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: RadioComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-radio', template: `
<label class="cont">
<input
class="radio"
[formControl]="formControl"
[checked]="radioOption"
(click)="onSelected.emit($event)"
type="radio">
<span></span>
</label>
` }]
}], propDecorators: { radioOption: [{
type: Input
}], control: [{
type: Input
}], onSelected: [{
type: Output
}] } });
class SelectComponent {
constructor() {
this.boxShadow = 0;
this.clicked = false;
this.disabledSel = false;
this.eventSelect = new EventEmitter();
}
// type viene de otro componente -> indica de que tipo es el arreglo si pregrade, posgrade o modo
set control(value) {
if (this.formControl !== value) {
this.formControl = value;
}
}
ngOnChanges(changes) {
if (changes['data']) {
this.setBinding();
}
}
ngOnInit() {
this.setBinding();
}
seleccionar(evt) {
if (this.eventSelect.emit(evt) !== this.defaultText) {
this.boxShadow = 1;
}
else {
this.boxShadow = 2;
}
}
setBinding() {
if (this.initialValue !== '') {
this.binding = this.initialValue;
}
else {
this.binding = this.defaultText;
}
}
click(value) {
this.clicked = value.isTrusted;
}
get textClass() {
return this.defaultText === '' ? 'selected' : 'select';
}
get labelClass() {
return (this.clicked || this.initialValue !== '') ? 'labelUp' : 'label';
}
}
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectComponent, selector: "ipt-select", inputs: { isRequired: "isRequired", data: "data", defaultText: "defaultText", selectCode: "selectCode", disabledSel: "disabledSel", initialValue: "initialValue", label: "label", control: "control" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: `
<div class="select-container">
<label [ngClass]="labelClass">{{ defaultText }}</label>
<select
[(ngModel)]="binding"
(ngModelChange)="seleccionar($event)"
(click)="click($event)"
[ngClass]="textClass"
[disabled]="disabledSel">
<option *ngFor="let item of data; index as i" [value]="item.code">
{{ label === 'displayName' ? item.displayName : item.name }} {{ item.prefix }}
</option>
</select>
</div>
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{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}.selected{box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;transition:.5s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;background-color:#fff;padding-left:10px}select:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}.select: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:9px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.labelUp{color:#1c77f7;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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-select', template: `
<div class="select-container">
<label [ngClass]="labelClass">{{ defaultText }}</label>
<select
[(ngModel)]="binding"
(ngModelChange)="seleccionar($event)"
(click)="click($event)"
[ngClass]="textClass"
[disabled]="disabledSel">
<option *ngFor="let item of data; index as i" [value]="item.code">
{{ label === 'displayName' ? item.displayName : item.name }} {{ item.prefix }}
</option>
</select>
</div>
`, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{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}.selected{box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;transition:.5s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;background-color:#fff;padding-left:10px}select:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}.select: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:9px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.labelUp{color:#1c77f7;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"] }]
}], propDecorators: { isRequired: [{
type: Input
}], data: [{
type: Input
}], defaultText: [{
type: Input
}], selectCode: [{
type: Input
}], disabledSel: [{
type: Input
}], initialValue: [{
type: Input
}], label: [{
type: Input
}], eventS