iptdevs-design-system 2.7.2 → 2.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/atoms/loader/loader.component.mjs +2 -2
- package/esm2020/lib/components/atoms/select/select.component.mjs +8 -6
- package/esm2020/lib/components/forms/create-user-form/create-user-form.component.mjs +3 -3
- package/fesm2015/iptdevs-design-system.mjs +11 -9
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +11 -9
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -501,7 +501,7 @@ LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
501
501
|
</div>
|
|
502
502
|
</div>
|
|
503
503
|
</div>
|
|
504
|
-
</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;
|
|
504
|
+
</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;top:0;left:0;bottom:0;right:0;margin:auto;background-color:#fff;border-radius:6px;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"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
505
505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
506
506
|
type: Component,
|
|
507
507
|
args: [{ selector: 'ipt-loader', template: `
|
|
@@ -518,7 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
518
518
|
</div>
|
|
519
519
|
</div>
|
|
520
520
|
</div>
|
|
521
|
-
</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;
|
|
521
|
+
</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;top:0;left:0;bottom:0;right:0;margin:auto;background-color:#fff;border-radius:6px;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"] }]
|
|
522
522
|
}], propDecorators: { message: [{
|
|
523
523
|
type: Input
|
|
524
524
|
}], isDialog: [{
|
|
@@ -619,8 +619,9 @@ class SelectComponent {
|
|
|
619
619
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
620
620
|
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: SelectComponent, selector: "ipt-select", inputs: { isRequired: "isRequired", data: "data", defaultText: "defaultText", selectCode: "selectCode", disabledSel: "disabledSel", initialValue: "initialValue", control: "control" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: `
|
|
621
621
|
<div class="select-container">
|
|
622
|
-
<label
|
|
623
|
-
<
|
|
622
|
+
<label *ngIf="(binding !== 'defaultText')" class="labelUp">{{ defaultText }}</label>
|
|
623
|
+
<label *ngIf="!(binding !== 'defaultText')" [ngClass]="labelClass">{{ defaultText }}</label>
|
|
624
|
+
<select id="select"
|
|
624
625
|
[(ngModel)]="binding"
|
|
625
626
|
(ngModelChange)="seleccionar($event)"
|
|
626
627
|
(click)="click($event)"
|
|
@@ -631,13 +632,14 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
631
632
|
</option>
|
|
632
633
|
</select>
|
|
633
634
|
</div>
|
|
634
|
-
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}.selected{box-shadow:#64646f33 0 7px 29px;border-radius:6px;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: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:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
635
|
+
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}.selected{box-shadow:#64646f33 0 7px 29px;border-radius:6px;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: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:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
635
636
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SelectComponent, decorators: [{
|
|
636
637
|
type: Component,
|
|
637
638
|
args: [{ selector: 'ipt-select', template: `
|
|
638
639
|
<div class="select-container">
|
|
639
|
-
<label
|
|
640
|
-
<
|
|
640
|
+
<label *ngIf="(binding !== 'defaultText')" class="labelUp">{{ defaultText }}</label>
|
|
641
|
+
<label *ngIf="!(binding !== 'defaultText')" [ngClass]="labelClass">{{ defaultText }}</label>
|
|
642
|
+
<select id="select"
|
|
641
643
|
[(ngModel)]="binding"
|
|
642
644
|
(ngModelChange)="seleccionar($event)"
|
|
643
645
|
(click)="click($event)"
|
|
@@ -1472,7 +1474,7 @@ class CreateUserFormComponent {
|
|
|
1472
1474
|
}
|
|
1473
1475
|
}
|
|
1474
1476
|
CreateUserFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CreateUserFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: ParameterService }, { token: UserService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1475
|
-
CreateUserFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CreateUserFormComponent, selector: "ipt-create-user-form", inputs: { userType: "userType", visibility: "visibility" }, outputs: { userCreated: "userCreated", onHide: "onHide" }, ngImport: i0, template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <div class=\"grid_container\">\n <div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Nombre completo'\"\n [control]=\"createUserForm.controls['name']\"\n [validateText]=\"'Debe ingresar el nombre'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Apellidos'\"\n [control]=\"createUserForm.controls['last_name']\"\n [validateText]=\"'Debe ingresar los apellidos'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Correo electr\u00F3nico'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'Seleccione el rol'\"\n (eventSelect)=\"selectRol($event)\"\n [data]=\"getRolesOptions()\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"phoneNumberIndicatives\"\n (eventSelect)=\"selectIndicatives($event)\"\n [defaultText]=\"'Seleccione el indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\n [control]=\"createUserForm.controls['phone_number']\"\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"idTypes\"\n (eventSelect)=\"selectIdType($event)\"\n [defaultText]=\"'Ingrese el tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento de identidad'\"\n [control]=\"createUserForm.controls['id_card']\"\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectState($event)\"\n [data]=\"states\"\n [defaultText]=\"'Seleccione el departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad de residencia'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'Ingrese las horas de servicio'\"\n [control]=\"createUserForm.controls['service_hour']\"\n [validateText]=\"'Debe ingresar las horas de servicio'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Contrase\u00F1a'\"\n [control]=\"createUserForm.controls['password']\"\n >\n </ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\n [control]=\"createUserForm.controls['re_password']\"\n >\n </ipt-input>\n </form>\n\n <div class=\"buttons-container\">\n <ipt-button\n [label]=\"'Crear usuario'\"\n [isEnabled]=\"\n !loader &&\n createUserForm.value['re_password'] ===\n createUserForm.value['password']\n \"\n (onClick)=\"createUser()\"\n [primary]=\"true\"\n >\n </ipt-button>\n </div>\n </div>\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\n </div>\n </div>\n</main>\n", styles: ["@media screen and (min-width: 320px){main{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s}main .modal_container{width:60%;height:-moz-fit-content;height:fit-content;position:absolute;
|
|
1477
|
+
CreateUserFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CreateUserFormComponent, selector: "ipt-create-user-form", inputs: { userType: "userType", visibility: "visibility" }, outputs: { userCreated: "userCreated", onHide: "onHide" }, ngImport: i0, template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <div class=\"grid_container\">\n <div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Nombre completo'\"\n [control]=\"createUserForm.controls['name']\"\n [validateText]=\"'Debe ingresar el nombre'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Apellidos'\"\n [control]=\"createUserForm.controls['last_name']\"\n [validateText]=\"'Debe ingresar los apellidos'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Correo electr\u00F3nico'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'Seleccione el rol'\"\n (eventSelect)=\"selectRol($event)\"\n [data]=\"getRolesOptions()\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"phoneNumberIndicatives\"\n (eventSelect)=\"selectIndicatives($event)\"\n [defaultText]=\"'Seleccione el indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\n [control]=\"createUserForm.controls['phone_number']\"\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"idTypes\"\n (eventSelect)=\"selectIdType($event)\"\n [defaultText]=\"'Ingrese el tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento de identidad'\"\n [control]=\"createUserForm.controls['id_card']\"\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectState($event)\"\n [data]=\"states\"\n [defaultText]=\"'Seleccione el departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad de residencia'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'Ingrese las horas de servicio'\"\n [control]=\"createUserForm.controls['service_hour']\"\n [validateText]=\"'Debe ingresar las horas de servicio'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Contrase\u00F1a'\"\n [control]=\"createUserForm.controls['password']\"\n >\n </ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\n [control]=\"createUserForm.controls['re_password']\"\n >\n </ipt-input>\n </form>\n\n <div class=\"buttons-container\">\n <ipt-button\n [label]=\"'Crear usuario'\"\n [isEnabled]=\"\n !loader &&\n createUserForm.value['re_password'] ===\n createUserForm.value['password']\n \"\n (onClick)=\"createUser()\"\n [primary]=\"true\"\n >\n </ipt-button>\n </div>\n </div>\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\n </div>\n </div>\n</main>\n", styles: ["@media screen and (min-width: 320px){main{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s}main .modal_container{width:60%;height:-moz-fit-content;height:fit-content;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;background-color:#fff;border-radius:6px}.header_modal{display:flex;padding:0 15px;gap:1rem;align-items:center}.header_modal h1{padding:.5rem;background-color:#1c77f7;color:#fff;width:100%;border-radius:10px;font-size:1.25rem;font-weight:700}.header_modal button{margin-left:auto;font-size:26px;padding:1.2rem;font-weight:200;color:#6c7f7d;display:flex;width:25px;height:25px;align-items:center;justify-content:center;transition:50ms;background-color:transparent;border:none}.header_modal button:hover{cursor:pointer;border-radius:50%;background-color:#d4d4d4}.grid_container{display:grid;grid-template-columns:1fr}form{display:grid;grid-template-columns:1fr;grid-gap:.25rem;gap:.25rem;justify-content:center;padding:0 1rem}.buttons-container{margin-top:2rem;margin-bottom:2rem;display:flex;justify-content:center;align-items:center;justify-items:center;align-content:center}.user_type_image{display:none}}@media screen and (min-width: 768px){form{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;justify-content:center}}@media screen and (min-width: 1366px){form{padding:0rem}.grid_container{display:grid;grid-template-columns:1fr 250px;grid-gap:1rem;gap:1rem;padding:1rem}.user_type_image{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;height:100%;border-radius:1rem;padding:1rem}}\n"], components: [{ type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal"], outputs: ["dateSelected"] }, { type: SelectComponent, selector: "ipt-select", inputs: ["isRequired", "data", "defaultText", "selectCode", "disabledSel", "initialValue", "control"], outputs: ["eventSelect"] }, { type: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "titlecase": i1.TitleCasePipe }, animations: [
|
|
1476
1478
|
trigger('fade', [
|
|
1477
1479
|
transition('void => *', [
|
|
1478
1480
|
style({ opacity: 0 }),
|
|
@@ -1489,7 +1491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
1489
1491
|
animate(200, style({ opacity: 1 }))
|
|
1490
1492
|
])
|
|
1491
1493
|
])
|
|
1492
|
-
], template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <div class=\"grid_container\">\n <div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Nombre completo'\"\n [control]=\"createUserForm.controls['name']\"\n [validateText]=\"'Debe ingresar el nombre'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Apellidos'\"\n [control]=\"createUserForm.controls['last_name']\"\n [validateText]=\"'Debe ingresar los apellidos'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Correo electr\u00F3nico'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'Seleccione el rol'\"\n (eventSelect)=\"selectRol($event)\"\n [data]=\"getRolesOptions()\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"phoneNumberIndicatives\"\n (eventSelect)=\"selectIndicatives($event)\"\n [defaultText]=\"'Seleccione el indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\n [control]=\"createUserForm.controls['phone_number']\"\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"idTypes\"\n (eventSelect)=\"selectIdType($event)\"\n [defaultText]=\"'Ingrese el tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento de identidad'\"\n [control]=\"createUserForm.controls['id_card']\"\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectState($event)\"\n [data]=\"states\"\n [defaultText]=\"'Seleccione el departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad de residencia'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'Ingrese las horas de servicio'\"\n [control]=\"createUserForm.controls['service_hour']\"\n [validateText]=\"'Debe ingresar las horas de servicio'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Contrase\u00F1a'\"\n [control]=\"createUserForm.controls['password']\"\n >\n </ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\n [control]=\"createUserForm.controls['re_password']\"\n >\n </ipt-input>\n </form>\n\n <div class=\"buttons-container\">\n <ipt-button\n [label]=\"'Crear usuario'\"\n [isEnabled]=\"\n !loader &&\n createUserForm.value['re_password'] ===\n createUserForm.value['password']\n \"\n (onClick)=\"createUser()\"\n [primary]=\"true\"\n >\n </ipt-button>\n </div>\n </div>\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\n </div>\n </div>\n</main>\n", styles: ["@media screen and (min-width: 320px){main{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s}main .modal_container{width:60%;height:-moz-fit-content;height:fit-content;position:absolute;
|
|
1494
|
+
], template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <div class=\"grid_container\">\n <div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Nombre completo'\"\n [control]=\"createUserForm.controls['name']\"\n [validateText]=\"'Debe ingresar el nombre'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Apellidos'\"\n [control]=\"createUserForm.controls['last_name']\"\n [validateText]=\"'Debe ingresar los apellidos'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Correo electr\u00F3nico'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'Seleccione el rol'\"\n (eventSelect)=\"selectRol($event)\"\n [data]=\"getRolesOptions()\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"phoneNumberIndicatives\"\n (eventSelect)=\"selectIndicatives($event)\"\n [defaultText]=\"'Seleccione el indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\n [control]=\"createUserForm.controls['phone_number']\"\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"idTypes\"\n (eventSelect)=\"selectIdType($event)\"\n [defaultText]=\"'Ingrese el tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento de identidad'\"\n [control]=\"createUserForm.controls['id_card']\"\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectState($event)\"\n [data]=\"states\"\n [defaultText]=\"'Seleccione el departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad de residencia'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'Ingrese las horas de servicio'\"\n [control]=\"createUserForm.controls['service_hour']\"\n [validateText]=\"'Debe ingresar las horas de servicio'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Contrase\u00F1a'\"\n [control]=\"createUserForm.controls['password']\"\n >\n </ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\n [control]=\"createUserForm.controls['re_password']\"\n >\n </ipt-input>\n </form>\n\n <div class=\"buttons-container\">\n <ipt-button\n [label]=\"'Crear usuario'\"\n [isEnabled]=\"\n !loader &&\n createUserForm.value['re_password'] ===\n createUserForm.value['password']\n \"\n (onClick)=\"createUser()\"\n [primary]=\"true\"\n >\n </ipt-button>\n </div>\n </div>\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\n </div>\n </div>\n</main>\n", styles: ["@media screen and (min-width: 320px){main{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s}main .modal_container{width:60%;height:-moz-fit-content;height:fit-content;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;background-color:#fff;border-radius:6px}.header_modal{display:flex;padding:0 15px;gap:1rem;align-items:center}.header_modal h1{padding:.5rem;background-color:#1c77f7;color:#fff;width:100%;border-radius:10px;font-size:1.25rem;font-weight:700}.header_modal button{margin-left:auto;font-size:26px;padding:1.2rem;font-weight:200;color:#6c7f7d;display:flex;width:25px;height:25px;align-items:center;justify-content:center;transition:50ms;background-color:transparent;border:none}.header_modal button:hover{cursor:pointer;border-radius:50%;background-color:#d4d4d4}.grid_container{display:grid;grid-template-columns:1fr}form{display:grid;grid-template-columns:1fr;grid-gap:.25rem;gap:.25rem;justify-content:center;padding:0 1rem}.buttons-container{margin-top:2rem;margin-bottom:2rem;display:flex;justify-content:center;align-items:center;justify-items:center;align-content:center}.user_type_image{display:none}}@media screen and (min-width: 768px){form{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;justify-content:center}}@media screen and (min-width: 1366px){form{padding:0rem}.grid_container{display:grid;grid-template-columns:1fr 250px;grid-gap:1rem;gap:1rem;padding:1rem}.user_type_image{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;height:100%;border-radius:1rem;padding:1rem}}\n"] }]
|
|
1493
1495
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: ParameterService }, { type: UserService }]; }, propDecorators: { userType: [{
|
|
1494
1496
|
type: Input
|
|
1495
1497
|
}], visibility: [{
|