iptdevs-design-system 2.6.23 → 2.6.25
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 +48 -0
- package/esm2020/lib/components/components.module.mjs +6 -1
- package/esm2020/lib/components/forms/create-user-form/create-user-form.component.mjs +3 -3
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/iptdevs-design-system.mjs +52 -3
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +52 -3
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/lib/components/atoms/loader/loader.component.d.ts +7 -0
- package/lib/components/components.module.d.ts +10 -9
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -480,6 +480,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
480
480
|
type: Input
|
|
481
481
|
}] } });
|
|
482
482
|
|
|
483
|
+
class LoaderComponent {
|
|
484
|
+
constructor() {
|
|
485
|
+
this.message = '';
|
|
486
|
+
this.isDialog = false;
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
490
|
+
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: LoaderComponent, selector: "app-loader", inputs: { message: "message", isDialog: "isDialog" }, ngImport: i0, template: `
|
|
491
|
+
<div [ngClass]="{'dialog': isDialog}">
|
|
492
|
+
<div [ngClass]="{'loader_container' : isDialog}">
|
|
493
|
+
<span>{{ message }}</span>
|
|
494
|
+
<div class="container">
|
|
495
|
+
<div class="spinner">
|
|
496
|
+
<div class="dot"></div>
|
|
497
|
+
<div class="dot"></div>
|
|
498
|
+
<div class="dot"></div>
|
|
499
|
+
<div class="dot"></div>
|
|
500
|
+
<div class="dot"></div>
|
|
501
|
+
</div>
|
|
502
|
+
</div>
|
|
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}.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:6px;padding:1rem}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
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
506
|
+
type: Component,
|
|
507
|
+
args: [{ selector: 'app-loader', template: `
|
|
508
|
+
<div [ngClass]="{'dialog': isDialog}">
|
|
509
|
+
<div [ngClass]="{'loader_container' : isDialog}">
|
|
510
|
+
<span>{{ message }}</span>
|
|
511
|
+
<div class="container">
|
|
512
|
+
<div class="spinner">
|
|
513
|
+
<div class="dot"></div>
|
|
514
|
+
<div class="dot"></div>
|
|
515
|
+
<div class="dot"></div>
|
|
516
|
+
<div class="dot"></div>
|
|
517
|
+
<div class="dot"></div>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
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}.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:6px;padding:1rem}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
|
+
}], propDecorators: { message: [{
|
|
523
|
+
type: Input
|
|
524
|
+
}], isDialog: [{
|
|
525
|
+
type: Input
|
|
526
|
+
}] } });
|
|
527
|
+
|
|
483
528
|
class RadioComponent {
|
|
484
529
|
constructor() {
|
|
485
530
|
this.radioOption = false;
|
|
@@ -1311,7 +1356,7 @@ class CreateUserFormComponent {
|
|
|
1311
1356
|
}
|
|
1312
1357
|
}
|
|
1313
1358
|
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 });
|
|
1314
|
-
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\">\r\n <div @fade class=\"modal_container\">\r\n <div class=\"header_modal\">\r\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\r\n <button (click)=\"closeModal()\">x</button>\r\n </div>\r\n <div class=\"grid_container\">\r\n <div>\r\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Nombre completo'\"\r\n [control]=\"createUserForm.controls['name']\"\r\n [validateText]=\"'Debe ingresar el nombre'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Apellidos'\"\r\n [control]=\"createUserForm.controls['last_name']\"\r\n [validateText]=\"'Debe ingresar los apellidos'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Correo electr\u00F3nico'\"\r\n [control]=\"createUserForm.controls['email']\"\r\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [defaultText]=\"'Seleccione el rol'\"\r\n (eventSelect)=\"selectRol($event)\"\r\n [data]=\"getRolesOptions()\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"phoneNumberIndicatives\"\r\n (eventSelect)=\"selectIndicatives($event)\"\r\n [defaultText]=\"'Seleccione el indicativo'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\r\n [control]=\"createUserForm.controls['phone_number']\"\r\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"idTypes\"\r\n (eventSelect)=\"selectIdType($event)\"\r\n [defaultText]=\"'Ingrese el tipo de documento'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Documento de identidad'\"\r\n [control]=\"createUserForm.controls['id_card']\"\r\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectState($event)\"\r\n [data]=\"states\"\r\n [defaultText]=\"'Seleccione el departamento'\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectCity($event)\"\r\n [data]=\"cities\"\r\n [defaultText]=\"'Ciudad de residencia'\"\r\n ></ipt-select>\r\n <ipt-input *ngIf=\"!(userType === 'student')\"\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Ingrese las horas de servicio'\"\r\n [control]=\"createUserForm.controls['service_hour']\"\r\n [validateText]=\"'Debe ingresar las horas de servicio'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['password']\"\r\n >\r\n </ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['re_password']\"\r\n >\r\n </ipt-input>\r\n </form>\r\n\r\n <div class=\"buttons-container\">\r\n <ipt-button\r\n [label]=\"'Crear usuario'\"\r\n [isEnabled]=\"\r\n !loader &&\r\n createUserForm.value['re_password'] ===\r\n createUserForm.value['password']\r\n \"\r\n (onClick)=\"createUser()\"\r\n [primary]=\"true\"\r\n >\r\n </ipt-button>\r\n </div>\r\n </div>\r\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\r\n </div>\r\n </div>\r\n</main>\r\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;
|
|
1359
|
+
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\">\r\n <div @fade class=\"modal_container\">\r\n <div class=\"header_modal\">\r\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\r\n <button (click)=\"closeModal()\">x</button>\r\n </div>\r\n <div class=\"grid_container\">\r\n <div>\r\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Nombre completo'\"\r\n [control]=\"createUserForm.controls['name']\"\r\n [validateText]=\"'Debe ingresar el nombre'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Apellidos'\"\r\n [control]=\"createUserForm.controls['last_name']\"\r\n [validateText]=\"'Debe ingresar los apellidos'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Correo electr\u00F3nico'\"\r\n [control]=\"createUserForm.controls['email']\"\r\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [defaultText]=\"'Seleccione el rol'\"\r\n (eventSelect)=\"selectRol($event)\"\r\n [data]=\"getRolesOptions()\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"phoneNumberIndicatives\"\r\n (eventSelect)=\"selectIndicatives($event)\"\r\n [defaultText]=\"'Seleccione el indicativo'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\r\n [control]=\"createUserForm.controls['phone_number']\"\r\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"idTypes\"\r\n (eventSelect)=\"selectIdType($event)\"\r\n [defaultText]=\"'Ingrese el tipo de documento'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Documento de identidad'\"\r\n [control]=\"createUserForm.controls['id_card']\"\r\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectState($event)\"\r\n [data]=\"states\"\r\n [defaultText]=\"'Seleccione el departamento'\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectCity($event)\"\r\n [data]=\"cities\"\r\n [defaultText]=\"'Ciudad de residencia'\"\r\n ></ipt-select>\r\n <ipt-input *ngIf=\"!(userType === 'student')\"\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Ingrese las horas de servicio'\"\r\n [control]=\"createUserForm.controls['service_hour']\"\r\n [validateText]=\"'Debe ingresar las horas de servicio'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['password']\"\r\n >\r\n </ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['re_password']\"\r\n >\r\n </ipt-input>\r\n </form>\r\n\r\n <div class=\"buttons-container\">\r\n <ipt-button\r\n [label]=\"'Crear usuario'\"\r\n [isEnabled]=\"\r\n !loader &&\r\n createUserForm.value['re_password'] ===\r\n createUserForm.value['password']\r\n \"\r\n (onClick)=\"createUser()\"\r\n [primary]=\"true\"\r\n >\r\n </ipt-button>\r\n </div>\r\n </div>\r\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\r\n </div>\r\n </div>\r\n</main>\r\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;inset: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", "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: [
|
|
1315
1360
|
trigger('fade', [
|
|
1316
1361
|
transition('void => *', [
|
|
1317
1362
|
style({ opacity: 0 }),
|
|
@@ -1328,7 +1373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
1328
1373
|
animate(200, style({ opacity: 1 }))
|
|
1329
1374
|
])
|
|
1330
1375
|
])
|
|
1331
|
-
], template: "<main *ngIf=\"visibility\">\r\n <div @fade class=\"modal_container\">\r\n <div class=\"header_modal\">\r\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\r\n <button (click)=\"closeModal()\">x</button>\r\n </div>\r\n <div class=\"grid_container\">\r\n <div>\r\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Nombre completo'\"\r\n [control]=\"createUserForm.controls['name']\"\r\n [validateText]=\"'Debe ingresar el nombre'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Apellidos'\"\r\n [control]=\"createUserForm.controls['last_name']\"\r\n [validateText]=\"'Debe ingresar los apellidos'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Correo electr\u00F3nico'\"\r\n [control]=\"createUserForm.controls['email']\"\r\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [defaultText]=\"'Seleccione el rol'\"\r\n (eventSelect)=\"selectRol($event)\"\r\n [data]=\"getRolesOptions()\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"phoneNumberIndicatives\"\r\n (eventSelect)=\"selectIndicatives($event)\"\r\n [defaultText]=\"'Seleccione el indicativo'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\r\n [control]=\"createUserForm.controls['phone_number']\"\r\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"idTypes\"\r\n (eventSelect)=\"selectIdType($event)\"\r\n [defaultText]=\"'Ingrese el tipo de documento'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Documento de identidad'\"\r\n [control]=\"createUserForm.controls['id_card']\"\r\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectState($event)\"\r\n [data]=\"states\"\r\n [defaultText]=\"'Seleccione el departamento'\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectCity($event)\"\r\n [data]=\"cities\"\r\n [defaultText]=\"'Ciudad de residencia'\"\r\n ></ipt-select>\r\n <ipt-input *ngIf=\"!(userType === 'student')\"\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Ingrese las horas de servicio'\"\r\n [control]=\"createUserForm.controls['service_hour']\"\r\n [validateText]=\"'Debe ingresar las horas de servicio'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['password']\"\r\n >\r\n </ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['re_password']\"\r\n >\r\n </ipt-input>\r\n </form>\r\n\r\n <div class=\"buttons-container\">\r\n <ipt-button\r\n [label]=\"'Crear usuario'\"\r\n [isEnabled]=\"\r\n !loader &&\r\n createUserForm.value['re_password'] ===\r\n createUserForm.value['password']\r\n \"\r\n (onClick)=\"createUser()\"\r\n [primary]=\"true\"\r\n >\r\n </ipt-button>\r\n </div>\r\n </div>\r\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\r\n </div>\r\n </div>\r\n</main>\r\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;
|
|
1376
|
+
], template: "<main *ngIf=\"visibility\">\r\n <div @fade class=\"modal_container\">\r\n <div class=\"header_modal\">\r\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\r\n <button (click)=\"closeModal()\">x</button>\r\n </div>\r\n <div class=\"grid_container\">\r\n <div>\r\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Nombre completo'\"\r\n [control]=\"createUserForm.controls['name']\"\r\n [validateText]=\"'Debe ingresar el nombre'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Apellidos'\"\r\n [control]=\"createUserForm.controls['last_name']\"\r\n [validateText]=\"'Debe ingresar los apellidos'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'text'\"\r\n [placeHolder]=\"'Correo electr\u00F3nico'\"\r\n [control]=\"createUserForm.controls['email']\"\r\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [defaultText]=\"'Seleccione el rol'\"\r\n (eventSelect)=\"selectRol($event)\"\r\n [data]=\"getRolesOptions()\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"phoneNumberIndicatives\"\r\n (eventSelect)=\"selectIndicatives($event)\"\r\n [defaultText]=\"'Seleccione el indicativo'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\r\n [control]=\"createUserForm.controls['phone_number']\"\r\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n [data]=\"idTypes\"\r\n (eventSelect)=\"selectIdType($event)\"\r\n [defaultText]=\"'Ingrese el tipo de documento'\"\r\n ></ipt-select>\r\n <ipt-input\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Documento de identidad'\"\r\n [control]=\"createUserForm.controls['id_card']\"\r\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\r\n ></ipt-input>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectState($event)\"\r\n [data]=\"states\"\r\n [defaultText]=\"'Seleccione el departamento'\"\r\n ></ipt-select>\r\n <ipt-select\r\n [isRequired]=\"true\"\r\n (eventSelect)=\"selectCity($event)\"\r\n [data]=\"cities\"\r\n [defaultText]=\"'Ciudad de residencia'\"\r\n ></ipt-select>\r\n <ipt-input *ngIf=\"!(userType === 'student')\"\r\n [inputType]=\"'number'\"\r\n [placeHolder]=\"'Ingrese las horas de servicio'\"\r\n [control]=\"createUserForm.controls['service_hour']\"\r\n [validateText]=\"'Debe ingresar las horas de servicio'\"\r\n ></ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['password']\"\r\n >\r\n </ipt-input>\r\n <ipt-input\r\n [inputType]=\"'password'\"\r\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\r\n [control]=\"createUserForm.controls['re_password']\"\r\n >\r\n </ipt-input>\r\n </form>\r\n\r\n <div class=\"buttons-container\">\r\n <ipt-button\r\n [label]=\"'Crear usuario'\"\r\n [isEnabled]=\"\r\n !loader &&\r\n createUserForm.value['re_password'] ===\r\n createUserForm.value['password']\r\n \"\r\n (onClick)=\"createUser()\"\r\n [primary]=\"true\"\r\n >\r\n </ipt-button>\r\n </div>\r\n </div>\r\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\r\n </div>\r\n </div>\r\n</main>\r\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;inset: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"] }]
|
|
1332
1377
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: ParameterService }, { type: UserService }]; }, propDecorators: { userType: [{
|
|
1333
1378
|
type: Input
|
|
1334
1379
|
}], visibility: [{
|
|
@@ -1500,6 +1545,7 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
|
|
|
1500
1545
|
LevelButtonComponent,
|
|
1501
1546
|
LevelTextComponent,
|
|
1502
1547
|
LoginFormComponent,
|
|
1548
|
+
LoaderComponent,
|
|
1503
1549
|
RadioComponent,
|
|
1504
1550
|
SelectComponent,
|
|
1505
1551
|
SidenavComponent,
|
|
@@ -1516,6 +1562,7 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
|
|
|
1516
1562
|
InputComponent,
|
|
1517
1563
|
LevelButtonComponent,
|
|
1518
1564
|
LevelTextComponent,
|
|
1565
|
+
LoaderComponent,
|
|
1519
1566
|
RadioComponent,
|
|
1520
1567
|
SelectComponent,
|
|
1521
1568
|
TextLinkComponent,
|
|
@@ -1546,6 +1593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
1546
1593
|
LevelButtonComponent,
|
|
1547
1594
|
LevelTextComponent,
|
|
1548
1595
|
LoginFormComponent,
|
|
1596
|
+
LoaderComponent,
|
|
1549
1597
|
RadioComponent,
|
|
1550
1598
|
SelectComponent,
|
|
1551
1599
|
SidenavComponent,
|
|
@@ -1568,6 +1616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
1568
1616
|
InputComponent,
|
|
1569
1617
|
LevelButtonComponent,
|
|
1570
1618
|
LevelTextComponent,
|
|
1619
|
+
LoaderComponent,
|
|
1571
1620
|
RadioComponent,
|
|
1572
1621
|
SelectComponent,
|
|
1573
1622
|
TextLinkComponent,
|
|
@@ -2101,5 +2150,5 @@ class UserLoginRs {
|
|
|
2101
2150
|
* Generated bundle index. Do not edit.
|
|
2102
2151
|
*/
|
|
2103
2152
|
|
|
2104
|
-
export { AsideButtonComponent, AttendanceService, BaseService, BudgetService, ButtonComponent, CalendarService, CheckboxComponent, ComponentsModule, CoreModule, CourseService, CreateUserFormComponent, DatalistComponent, DesignSystemModule, InputComponent, LevelButtonComponent, LevelTextComponent, LoginFormComponent, MarketingService, NotesService, ParameterService, RadioComponent, RedirectGuard, SelectComponent, Session, SidenavComponent, StorageService, StudentService, SwitchService, TestService, TextLinkComponent, UserLoginRs, UserRs, UserService };
|
|
2153
|
+
export { AsideButtonComponent, AttendanceService, BaseService, BudgetService, ButtonComponent, CalendarService, CheckboxComponent, ComponentsModule, CoreModule, CourseService, CreateUserFormComponent, DatalistComponent, DesignSystemModule, InputComponent, LevelButtonComponent, LevelTextComponent, LoaderComponent, LoginFormComponent, MarketingService, NotesService, ParameterService, RadioComponent, RedirectGuard, SelectComponent, Session, SidenavComponent, StorageService, StudentService, SwitchService, TestService, TextLinkComponent, UserLoginRs, UserRs, UserService };
|
|
2105
2154
|
//# sourceMappingURL=iptdevs-design-system.mjs.map
|