iptdevs-design-system 3.1.719 → 3.1.721
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/cod/modal-referred/modal-referred.component.mjs +2 -2
- package/esm2020/lib/cod/steps/cod-form-step-five/cod-form-step-five.component.mjs +2 -2
- package/esm2020/lib/cod-self-managed/steps/cod-form-step-four/cod-self-form-step-four.component.mjs +2 -2
- package/esm2020/lib/cod-self-managed/steps/cod-form-step-one/cod-self-form-step-one.component.mjs +2 -2
- package/esm2020/lib/cod-self-managed/steps/cod-form-step-three/cod-self-form-step-three.component.mjs +2 -2
- package/esm2020/lib/cod-self-managed/steps/cod-form-step-two/cod-self-form-step-two.component.mjs +2 -2
- package/esm2020/lib/components/atoms/datalist/datalist.component.mjs +2 -2
- package/esm2020/lib/components/atoms/input/input.component.mjs +2 -2
- package/esm2020/lib/components/atoms/level-button/level-button.component.mjs +2 -2
- package/esm2020/lib/components/atoms/loader/loader.component.mjs +2 -2
- package/esm2020/lib/components/atoms/select/select.component.mjs +2 -2
- package/esm2020/lib/components/forms/create-user-form/create-user-form.component.mjs +2 -2
- package/esm2020/lib/components/molecules/card-course/card-course.component.mjs +2 -2
- package/fesm2015/iptdevs-design-system.mjs +26 -26
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +26 -26
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/package.json +1 -1
package/esm2020/lib/cod-self-managed/steps/cod-form-step-two/cod-self-form-step-two.component.mjs
CHANGED
|
@@ -164,10 +164,10 @@ export class CodSelfFormStepTwoComponent extends CodSelfManagedSteps {
|
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
166
|
CodSelfFormStepTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepTwoComponent, deps: [{ token: i1.FormBuilder }, { token: i2.MessageService }, { token: i3.BaseService }, { token: i4.AcademicService }], target: i0.ɵɵFactoryTarget.Component });
|
|
167
|
-
CodSelfFormStepTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepTwoComponent, selector: "app-cod-self-form-step-two", inputs: { scorePlacementTest: "scorePlacementTest", codPrevious: "codPrevious" }, outputs: { completed: "completed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-main\">\n <div class=\"container-form\">\n <h2>Planes</h2>\n <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onReject()\" [baseZIndex]=\"10\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"flex flex-column align-items-start\" style=\"flex: 1\">\n <div class=\"flex align-items-center gap-2\">\n <img src=\"./assets/logos/reading.png\" style=\"width: 65px;\" shape=\"circle\" />\n <span class=\"font-bold text-900\">Jacob</span>\n </div>\n <div class=\"font-medium text-lg my-3 text-900\">{{ messageInfo }}</div>\n </div>\n </ng-template>\n </p-toast>\n\n <i class=\"pi pi-exclamation-circle cursor-pointer w-auto mt-4 mb-4\" (click)=\"showConfirm()\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n <div class=\"animate__animated animate__slideInRight ng-star-inserted\">\n <div class=\"container-button\" *ngIf=\"!SearchData\">\n <ipt-button\n [label]=\"'Filtrar'\"\n (onClick)=\"filterAgain()\"\n [primary]=\"true\">\n </ipt-button>\n </div>\n\n <div *ngIf=\"SearchData\">\n <p-accordion [multiple]=\"true\" [activeIndex]=\"[0]\">\n <p-accordionTab header=\"Jornada\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of schedules; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedSchedules\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectSchedules($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertSchedules\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of stateOptionsModality; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedModality\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectModality($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertModality\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest != null\" header=\"Placement test\">\n <span>Tienes un Placement Test realizado. Puedes comenzar con el nivel</span><h3>{{ scorePlacementTest?.level_inglish_next.name }}</h3>\n <span>\"NO APLICA PLACEMENT TEST PARA PLANES TECNICOS\"</span>\n <div class=\"containerDay mt-3\">\n <h3>\u00BFDeseas iniciar en este nivel {{ scorePlacementTest?.level_inglish_next.name }}?</h3>\n\n <div class=\"flex flex-column gap-3\">\n <div *ngFor=\"let category of OptionPlacementTest; index as ind\" class=\"field-checkbox\">\n <p-radioButton\n [inputId]=\"category.key\"\n name=\"category\"\n [value]=\"category\"\n [(ngModel)]=\"selectedOptionPlacementTest\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"selectOpcionsPlacementTest($event)\"\n ></p-radioButton>\n <label [for]=\"category.key\" class=\"ml-2\">\n {{ category.name }}\n </label>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest == null\" header=\"Prueba diagn\u00F3stico Placement Test\">\n <span>Presenta totalmente gratis esta prueba para conocer tu nivel de ingl\u00E9s y nuestras ofertas para ti.</span>\n <div class=\"containerDay mt-3\">\n <ipt-button\n [label]=\"'Presentar Test'\"\n (onClick)=\"openTestInNewTab()\"\n [primary]=\"true\">\n </ipt-button>\n\n <div class=\"flex flex-column gap-3\">\n\n </div>\n </div>\n </p-accordionTab>\n\n </p-accordion>\n <div class=\"flex-none flex align-items-center justify-content-end m-2\">\n <button\n pTooltip=\"Buscar Planes\"\n tooltipPosition=\"left\"\n pButton\n Ripple\n type=\"button\"\n icon=\"pi pi-search\"\n class=\"p-button-rounded p-button-outlined\"\n [disabled]=\"selectedSchedules.length === 0 || selectedModality.length === 0 || scorePlacementTest != null && selectedOptionPlacementTest.length === 0 \"\n (click)=\"searchAvalaibleCourse()\"\n ></button>\n </div>\n </div>\n\n\n <ipt-card-select-course-self-cod-managed\n *ngIf=\"courseSelect != null\"\n [courseSelect]=\"courseSelect\">\n </ipt-card-select-course-self-cod-managed>\n\n <article *ngIf=\"visibleGroupReview\" class=\"cards-container\">\n\n <ipt-card-course-self-cod-managed\n [CourseData]=\"dataCourse\"\n (codeCourse)=\"courseCode($event)\"\n [isLoading]=\"isLoading\">\n </ipt-card-course-self-cod-managed>\n </article>\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <button\n pButton\n icon=\"pi pi-arrow-left\"\n type=\"submit\"\n (click)=\"back()\"\n ></button>\n\n <button\n pButton\n icon=\"pi pi-arrow-right\"\n [disabled]=\"!codSelfFormStepTwo.valid || courseSelect === null\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n </div>\n</div>\n\n\n\n", styles: [".container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}.error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}span{color:#999;font-size:15px;font-weight:400;pointer-events:none;left:20px;top:-20px}:host ::ng-deep .p-buttonset .p-button{box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;transition:.2s;font-weight:300;height:28px}:host ::ng-deep .p-calendar{position:relative;display:inline-flex;max-width:100%;height:28px;box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;background-color:#fff;-webkit-appearance:none}.cards-container{margin-top:10px}.container-button{width:7rem}.containerDay{justify-content:center;display:flex}.checkBox{gap:1rem}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }, { kind: "component", type: i7.CardCourseComponent, selector: "ipt-card-course-self-cod-managed", inputs: ["CourseData", "isLoading"], outputs: ["codeCourse"] }, { kind: "component", type: i8.CardSelectCourseComponent, selector: "ipt-card-select-course-self-cod-managed", inputs: ["courseSelect"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i12.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i12.AccordionTab, selector: "p-accordionTab", inputs: ["header", "disabled", "cache", "transitionOptions", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i13.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i14.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
167
|
+
CodSelfFormStepTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepTwoComponent, selector: "app-cod-self-form-step-two", inputs: { scorePlacementTest: "scorePlacementTest", codPrevious: "codPrevious" }, outputs: { completed: "completed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-main\">\n <div class=\"container-form\">\n <h2>Planes</h2>\n <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onReject()\" [baseZIndex]=\"10\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"flex flex-column align-items-start\" style=\"flex: 1\">\n <div class=\"flex align-items-center gap-2\">\n <img src=\"./assets/logos/reading.png\" style=\"width: 65px;\" shape=\"circle\" />\n <span class=\"font-bold text-900\">Jacob</span>\n </div>\n <div class=\"font-medium text-lg my-3 text-900\">{{ messageInfo }}</div>\n </div>\n </ng-template>\n </p-toast>\n\n <i class=\"pi pi-exclamation-circle cursor-pointer w-auto mt-4 mb-4\" (click)=\"showConfirm()\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n <div class=\"animate__animated animate__slideInRight ng-star-inserted\">\n <div class=\"container-button\" *ngIf=\"!SearchData\">\n <ipt-button\n [label]=\"'Filtrar'\"\n (onClick)=\"filterAgain()\"\n [primary]=\"true\">\n </ipt-button>\n </div>\n\n <div *ngIf=\"SearchData\">\n <p-accordion [multiple]=\"true\" [activeIndex]=\"[0]\">\n <p-accordionTab header=\"Jornada\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of schedules; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedSchedules\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectSchedules($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertSchedules\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of stateOptionsModality; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedModality\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectModality($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertModality\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest != null\" header=\"Placement test\">\n <span>Tienes un Placement Test realizado. Puedes comenzar con el nivel</span><h3>{{ scorePlacementTest?.level_inglish_next.name }}</h3>\n <span>\"NO APLICA PLACEMENT TEST PARA PLANES TECNICOS\"</span>\n <div class=\"containerDay mt-3\">\n <h3>\u00BFDeseas iniciar en este nivel {{ scorePlacementTest?.level_inglish_next.name }}?</h3>\n\n <div class=\"flex flex-column gap-3\">\n <div *ngFor=\"let category of OptionPlacementTest; index as ind\" class=\"field-checkbox\">\n <p-radioButton\n [inputId]=\"category.key\"\n name=\"category\"\n [value]=\"category\"\n [(ngModel)]=\"selectedOptionPlacementTest\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"selectOpcionsPlacementTest($event)\"\n ></p-radioButton>\n <label [for]=\"category.key\" class=\"ml-2\">\n {{ category.name }}\n </label>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest == null\" header=\"Prueba diagn\u00F3stico Placement Test\">\n <span>Presenta totalmente gratis esta prueba para conocer tu nivel de ingl\u00E9s y nuestras ofertas para ti.</span>\n <div class=\"containerDay mt-3\">\n <ipt-button\n [label]=\"'Presentar Test'\"\n (onClick)=\"openTestInNewTab()\"\n [primary]=\"true\">\n </ipt-button>\n\n <div class=\"flex flex-column gap-3\">\n\n </div>\n </div>\n </p-accordionTab>\n\n </p-accordion>\n <div class=\"flex-none flex align-items-center justify-content-end m-2\">\n <button\n pTooltip=\"Buscar Planes\"\n tooltipPosition=\"left\"\n pButton\n Ripple\n type=\"button\"\n icon=\"pi pi-search\"\n class=\"p-button-rounded p-button-outlined\"\n [disabled]=\"selectedSchedules.length === 0 || selectedModality.length === 0 || scorePlacementTest != null && selectedOptionPlacementTest.length === 0 \"\n (click)=\"searchAvalaibleCourse()\"\n ></button>\n </div>\n </div>\n\n\n <ipt-card-select-course-self-cod-managed\n *ngIf=\"courseSelect != null\"\n [courseSelect]=\"courseSelect\">\n </ipt-card-select-course-self-cod-managed>\n\n <article *ngIf=\"visibleGroupReview\" class=\"cards-container\">\n\n <ipt-card-course-self-cod-managed\n [CourseData]=\"dataCourse\"\n (codeCourse)=\"courseCode($event)\"\n [isLoading]=\"isLoading\">\n </ipt-card-course-self-cod-managed>\n </article>\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <button\n pButton\n icon=\"pi pi-arrow-left\"\n type=\"submit\"\n (click)=\"back()\"\n ></button>\n\n <button\n pButton\n icon=\"pi pi-arrow-right\"\n [disabled]=\"!codSelfFormStepTwo.valid || courseSelect === null\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n </div>\n</div>\n\n\n\n", styles: [".container-form{margin:5%;border-radius:3px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}.error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}span{color:#999;font-size:15px;font-weight:400;pointer-events:none;left:20px;top:-20px}:host ::ng-deep .p-buttonset .p-button{box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;transition:.2s;font-weight:300;height:28px}:host ::ng-deep .p-calendar{position:relative;display:inline-flex;max-width:100%;height:28px;box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;background-color:#fff;-webkit-appearance:none}.cards-container{margin-top:10px}.container-button{width:7rem}.containerDay{justify-content:center;display:flex}.checkBox{gap:1rem}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }, { kind: "component", type: i7.CardCourseComponent, selector: "ipt-card-course-self-cod-managed", inputs: ["CourseData", "isLoading"], outputs: ["codeCourse"] }, { kind: "component", type: i8.CardSelectCourseComponent, selector: "ipt-card-select-course-self-cod-managed", inputs: ["courseSelect"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i12.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i12.AccordionTab, selector: "p-accordionTab", inputs: ["header", "disabled", "cache", "transitionOptions", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i13.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i14.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
168
168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepTwoComponent, decorators: [{
|
|
169
169
|
type: Component,
|
|
170
|
-
args: [{ selector: 'app-cod-self-form-step-two', template: "<div class=\"container-main\">\n <div class=\"container-form\">\n <h2>Planes</h2>\n <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onReject()\" [baseZIndex]=\"10\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"flex flex-column align-items-start\" style=\"flex: 1\">\n <div class=\"flex align-items-center gap-2\">\n <img src=\"./assets/logos/reading.png\" style=\"width: 65px;\" shape=\"circle\" />\n <span class=\"font-bold text-900\">Jacob</span>\n </div>\n <div class=\"font-medium text-lg my-3 text-900\">{{ messageInfo }}</div>\n </div>\n </ng-template>\n </p-toast>\n\n <i class=\"pi pi-exclamation-circle cursor-pointer w-auto mt-4 mb-4\" (click)=\"showConfirm()\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n <div class=\"animate__animated animate__slideInRight ng-star-inserted\">\n <div class=\"container-button\" *ngIf=\"!SearchData\">\n <ipt-button\n [label]=\"'Filtrar'\"\n (onClick)=\"filterAgain()\"\n [primary]=\"true\">\n </ipt-button>\n </div>\n\n <div *ngIf=\"SearchData\">\n <p-accordion [multiple]=\"true\" [activeIndex]=\"[0]\">\n <p-accordionTab header=\"Jornada\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of schedules; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedSchedules\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectSchedules($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertSchedules\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of stateOptionsModality; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedModality\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectModality($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertModality\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest != null\" header=\"Placement test\">\n <span>Tienes un Placement Test realizado. Puedes comenzar con el nivel</span><h3>{{ scorePlacementTest?.level_inglish_next.name }}</h3>\n <span>\"NO APLICA PLACEMENT TEST PARA PLANES TECNICOS\"</span>\n <div class=\"containerDay mt-3\">\n <h3>\u00BFDeseas iniciar en este nivel {{ scorePlacementTest?.level_inglish_next.name }}?</h3>\n\n <div class=\"flex flex-column gap-3\">\n <div *ngFor=\"let category of OptionPlacementTest; index as ind\" class=\"field-checkbox\">\n <p-radioButton\n [inputId]=\"category.key\"\n name=\"category\"\n [value]=\"category\"\n [(ngModel)]=\"selectedOptionPlacementTest\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"selectOpcionsPlacementTest($event)\"\n ></p-radioButton>\n <label [for]=\"category.key\" class=\"ml-2\">\n {{ category.name }}\n </label>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest == null\" header=\"Prueba diagn\u00F3stico Placement Test\">\n <span>Presenta totalmente gratis esta prueba para conocer tu nivel de ingl\u00E9s y nuestras ofertas para ti.</span>\n <div class=\"containerDay mt-3\">\n <ipt-button\n [label]=\"'Presentar Test'\"\n (onClick)=\"openTestInNewTab()\"\n [primary]=\"true\">\n </ipt-button>\n\n <div class=\"flex flex-column gap-3\">\n\n </div>\n </div>\n </p-accordionTab>\n\n </p-accordion>\n <div class=\"flex-none flex align-items-center justify-content-end m-2\">\n <button\n pTooltip=\"Buscar Planes\"\n tooltipPosition=\"left\"\n pButton\n Ripple\n type=\"button\"\n icon=\"pi pi-search\"\n class=\"p-button-rounded p-button-outlined\"\n [disabled]=\"selectedSchedules.length === 0 || selectedModality.length === 0 || scorePlacementTest != null && selectedOptionPlacementTest.length === 0 \"\n (click)=\"searchAvalaibleCourse()\"\n ></button>\n </div>\n </div>\n\n\n <ipt-card-select-course-self-cod-managed\n *ngIf=\"courseSelect != null\"\n [courseSelect]=\"courseSelect\">\n </ipt-card-select-course-self-cod-managed>\n\n <article *ngIf=\"visibleGroupReview\" class=\"cards-container\">\n\n <ipt-card-course-self-cod-managed\n [CourseData]=\"dataCourse\"\n (codeCourse)=\"courseCode($event)\"\n [isLoading]=\"isLoading\">\n </ipt-card-course-self-cod-managed>\n </article>\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <button\n pButton\n icon=\"pi pi-arrow-left\"\n type=\"submit\"\n (click)=\"back()\"\n ></button>\n\n <button\n pButton\n icon=\"pi pi-arrow-right\"\n [disabled]=\"!codSelfFormStepTwo.valid || courseSelect === null\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n </div>\n</div>\n\n\n\n", styles: [".container-form{margin:5%;border-radius:
|
|
170
|
+
args: [{ selector: 'app-cod-self-form-step-two', template: "<div class=\"container-main\">\n <div class=\"container-form\">\n <h2>Planes</h2>\n <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onReject()\" [baseZIndex]=\"10\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"flex flex-column align-items-start\" style=\"flex: 1\">\n <div class=\"flex align-items-center gap-2\">\n <img src=\"./assets/logos/reading.png\" style=\"width: 65px;\" shape=\"circle\" />\n <span class=\"font-bold text-900\">Jacob</span>\n </div>\n <div class=\"font-medium text-lg my-3 text-900\">{{ messageInfo }}</div>\n </div>\n </ng-template>\n </p-toast>\n\n <i class=\"pi pi-exclamation-circle cursor-pointer w-auto mt-4 mb-4\" (click)=\"showConfirm()\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n <div class=\"animate__animated animate__slideInRight ng-star-inserted\">\n <div class=\"container-button\" *ngIf=\"!SearchData\">\n <ipt-button\n [label]=\"'Filtrar'\"\n (onClick)=\"filterAgain()\"\n [primary]=\"true\">\n </ipt-button>\n </div>\n\n <div *ngIf=\"SearchData\">\n <p-accordion [multiple]=\"true\" [activeIndex]=\"[0]\">\n <p-accordionTab header=\"Jornada\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of schedules; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedSchedules\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectSchedules($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertSchedules\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <div class=\"checkBox flex flex-wrap justify-content-between m-3 gap-3\">\n <div *ngFor=\"let dayW of stateOptionsModality; index as ind\" class=\"field-checkbox\">\n <p-checkbox\n name=\"group2\"\n value=\"category\"\n [value]=\"dayW\"\n [(ngModel)]=\"selectedModality\"\n [inputId]=\"dayW.key\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n checkboxIcon=\"pi pi-check-circle\"\n (ngModelChange)=\"selectModality($event)\"\n ></p-checkbox>\n <label [for]=\"dayW.key\">{{ dayW.name }}</label>\n </div>\n <div *ngIf=\"messageAlertModality\">\n <span class=\"error-message\">Por favor selecciona una opcion</span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest != null\" header=\"Placement test\">\n <span>Tienes un Placement Test realizado. Puedes comenzar con el nivel</span><h3>{{ scorePlacementTest?.level_inglish_next.name }}</h3>\n <span>\"NO APLICA PLACEMENT TEST PARA PLANES TECNICOS\"</span>\n <div class=\"containerDay mt-3\">\n <h3>\u00BFDeseas iniciar en este nivel {{ scorePlacementTest?.level_inglish_next.name }}?</h3>\n\n <div class=\"flex flex-column gap-3\">\n <div *ngFor=\"let category of OptionPlacementTest; index as ind\" class=\"field-checkbox\">\n <p-radioButton\n [inputId]=\"category.key\"\n name=\"category\"\n [value]=\"category\"\n [(ngModel)]=\"selectedOptionPlacementTest\"\n [disabled]=\"disableweekdays[ind]\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"selectOpcionsPlacementTest($event)\"\n ></p-radioButton>\n <label [for]=\"category.key\" class=\"ml-2\">\n {{ category.name }}\n </label>\n </div>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab *ngIf=\"scorePlacementTest == null\" header=\"Prueba diagn\u00F3stico Placement Test\">\n <span>Presenta totalmente gratis esta prueba para conocer tu nivel de ingl\u00E9s y nuestras ofertas para ti.</span>\n <div class=\"containerDay mt-3\">\n <ipt-button\n [label]=\"'Presentar Test'\"\n (onClick)=\"openTestInNewTab()\"\n [primary]=\"true\">\n </ipt-button>\n\n <div class=\"flex flex-column gap-3\">\n\n </div>\n </div>\n </p-accordionTab>\n\n </p-accordion>\n <div class=\"flex-none flex align-items-center justify-content-end m-2\">\n <button\n pTooltip=\"Buscar Planes\"\n tooltipPosition=\"left\"\n pButton\n Ripple\n type=\"button\"\n icon=\"pi pi-search\"\n class=\"p-button-rounded p-button-outlined\"\n [disabled]=\"selectedSchedules.length === 0 || selectedModality.length === 0 || scorePlacementTest != null && selectedOptionPlacementTest.length === 0 \"\n (click)=\"searchAvalaibleCourse()\"\n ></button>\n </div>\n </div>\n\n\n <ipt-card-select-course-self-cod-managed\n *ngIf=\"courseSelect != null\"\n [courseSelect]=\"courseSelect\">\n </ipt-card-select-course-self-cod-managed>\n\n <article *ngIf=\"visibleGroupReview\" class=\"cards-container\">\n\n <ipt-card-course-self-cod-managed\n [CourseData]=\"dataCourse\"\n (codeCourse)=\"courseCode($event)\"\n [isLoading]=\"isLoading\">\n </ipt-card-course-self-cod-managed>\n </article>\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <button\n pButton\n icon=\"pi pi-arrow-left\"\n type=\"submit\"\n (click)=\"back()\"\n ></button>\n\n <button\n pButton\n icon=\"pi pi-arrow-right\"\n [disabled]=\"!codSelfFormStepTwo.valid || courseSelect === null\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n </div>\n</div>\n\n\n\n", styles: [".container-form{margin:5%;border-radius:3px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}.error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}span{color:#999;font-size:15px;font-weight:400;pointer-events:none;left:20px;top:-20px}:host ::ng-deep .p-buttonset .p-button{box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;transition:.2s;font-weight:300;height:28px}:host ::ng-deep .p-calendar{position:relative;display:inline-flex;max-width:100%;height:28px;box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;background-color:#fff;-webkit-appearance:none}.cards-container{margin-top:10px}.container-button{width:7rem}.containerDay{justify-content:center;display:flex}.checkBox{gap:1rem}\n"] }]
|
|
171
171
|
}], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.MessageService }, { type: i3.BaseService }, { type: i4.AcademicService }]; }, propDecorators: { completed: [{
|
|
172
172
|
type: Output
|
|
173
173
|
}], scorePlacementTest: [{
|
|
@@ -53,7 +53,7 @@ DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
53
53
|
</option>
|
|
54
54
|
</datalist>
|
|
55
55
|
</div>
|
|
56
|
-
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.input-container{position:relative;margin-top:
|
|
56
|
+
`, 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
57
57
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DatalistComponent, decorators: [{
|
|
58
58
|
type: Component,
|
|
59
59
|
args: [{ selector: 'ipt-datalist', template: `
|
|
@@ -75,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
75
75
|
</option>
|
|
76
76
|
</datalist>
|
|
77
77
|
</div>
|
|
78
|
-
`, styles: ["*{font-family:Poppins,sans-serif}.input-container{position:relative;margin-top:
|
|
78
|
+
`, 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"] }]
|
|
79
79
|
}], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { datalistId: [{
|
|
80
80
|
type: Input
|
|
81
81
|
}], datalistData: [{
|
|
@@ -73,7 +73,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
|
|
|
73
73
|
{{ validateText }}
|
|
74
74
|
</p>
|
|
75
75
|
</div>
|
|
76
|
-
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:
|
|
76
|
+
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:9px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:9px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:9px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:3px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:9px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:9px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }] });
|
|
77
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: InputComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
79
79
|
args: [{ selector: 'ipt-input', template: `
|
|
@@ -121,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
121
121
|
{{ validateText }}
|
|
122
122
|
</p>
|
|
123
123
|
</div>
|
|
124
|
-
`, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:
|
|
124
|
+
`, 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"] }]
|
|
125
125
|
}], ctorParameters: function () { return []; }, propDecorators: { inputType: [{
|
|
126
126
|
type: Input
|
|
127
127
|
}], placeHolder: [{
|
|
@@ -29,7 +29,7 @@ LevelButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
29
29
|
<p class="p-level p-level-active">{{ level }}</p>
|
|
30
30
|
</button>
|
|
31
31
|
</div>
|
|
32
|
-
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:
|
|
32
|
+
`, 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"] }] });
|
|
33
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LevelButtonComponent, decorators: [{
|
|
34
34
|
type: Component,
|
|
35
35
|
args: [{ selector: 'ipt-level-button', template: `
|
|
@@ -51,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
51
51
|
<p class="p-level p-level-active">{{ level }}</p>
|
|
52
52
|
</button>
|
|
53
53
|
</div>
|
|
54
|
-
`, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:
|
|
54
|
+
`, 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"] }]
|
|
55
55
|
}], propDecorators: { level: [{
|
|
56
56
|
type: Input
|
|
57
57
|
}], buttonActive: [{
|
|
@@ -22,7 +22,7 @@ LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
22
22
|
</div>
|
|
23
23
|
</div>
|
|
24
24
|
</div>
|
|
25
|
-
</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:
|
|
25
|
+
</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"] }] });
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
args: [{ selector: 'ipt-loader', template: `
|
|
@@ -39,7 +39,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
39
39
|
</div>
|
|
40
40
|
</div>
|
|
41
41
|
</div>
|
|
42
|
-
</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:
|
|
42
|
+
</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"] }]
|
|
43
43
|
}], propDecorators: { message: [{
|
|
44
44
|
type: Input
|
|
45
45
|
}], isDialog: [{
|
|
@@ -64,7 +64,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
64
64
|
</option>
|
|
65
65
|
</select>
|
|
66
66
|
</div>
|
|
67
|
-
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{box-shadow:#64646f33 0 7px 29px;border-radius:
|
|
67
|
+
`, 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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
68
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
69
69
|
type: Component,
|
|
70
70
|
args: [{ selector: 'ipt-select', template: `
|
|
@@ -81,7 +81,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
81
81
|
</option>
|
|
82
82
|
</select>
|
|
83
83
|
</div>
|
|
84
|
-
`, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{box-shadow:#64646f33 0 7px 29px;border-radius:
|
|
84
|
+
`, 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"] }]
|
|
85
85
|
}], propDecorators: { isRequired: [{
|
|
86
86
|
type: Input
|
|
87
87
|
}], data: [{
|
|
@@ -197,7 +197,7 @@ export class CreateUserFormComponent {
|
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
199
|
CreateUserFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CreateUserFormComponent, deps: [{ token: i1.FormBuilder }, { token: i2.ParameterService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component });
|
|
200
|
-
CreateUserFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", 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]=\"'Nombres'\"\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]=\"'Email'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'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]=\"'Indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'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]=\"'Tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento'\"\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]=\"'Departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'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;inset:0;margin:auto;background-color:#fff;border-radius:
|
|
200
|
+
CreateUserFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", 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]=\"'Nombres'\"\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]=\"'Email'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'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]=\"'Indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'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]=\"'Tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento'\"\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]=\"'Departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'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;inset:0;margin:auto;background-color:#fff;border-radius:3px}.header_modal{display:flex;padding:15px 15px 0;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;padding:0 15px}form{display:grid;grid-template-columns:1fr;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;gap:1rem;justify-content:center}}@media screen and (min-width: 1366px){form{padding:0rem}.grid_container{display:grid;grid-template-columns:1fr 250px;gap:1rem}.user_type_image{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;height:100%;border-radius:1rem;padding:1rem}}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }, { kind: "component", type: i6.InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal", "disabledSel"], outputs: ["dateSelected"] }, { kind: "component", type: i7.SelectComponent, selector: "ipt-select", inputs: ["isRequired", "data", "defaultText", "selectCode", "disabledSel", "initialValue", "control"], outputs: ["eventSelect"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }], animations: [
|
|
201
201
|
trigger('fade', [
|
|
202
202
|
transition('void => *', [
|
|
203
203
|
style({ opacity: 0 }),
|
|
@@ -214,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
214
214
|
animate(200, style({ opacity: 1 }))
|
|
215
215
|
])
|
|
216
216
|
])
|
|
217
|
-
], 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]=\"'Nombres'\"\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]=\"'Email'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'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]=\"'Indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'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]=\"'Tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento'\"\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]=\"'Departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'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;inset:0;margin:auto;background-color:#fff;border-radius:
|
|
217
|
+
], 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]=\"'Nombres'\"\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]=\"'Email'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'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]=\"'Indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'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]=\"'Tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento'\"\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]=\"'Departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'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;inset:0;margin:auto;background-color:#fff;border-radius:3px}.header_modal{display:flex;padding:15px 15px 0;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;padding:0 15px}form{display:grid;grid-template-columns:1fr;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;gap:1rem;justify-content:center}}@media screen and (min-width: 1366px){form{padding:0rem}.grid_container{display:grid;grid-template-columns:1fr 250px;gap:1rem}.user_type_image{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;height:100%;border-radius:1rem;padding:1rem}}\n"] }]
|
|
218
218
|
}], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.ParameterService }, { type: i3.UserService }]; }, propDecorators: { userType: [{
|
|
219
219
|
type: Input
|
|
220
220
|
}], visibility: [{
|
|
@@ -81,10 +81,10 @@ export class CardCourseComponent {
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
CardCourseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CardCourseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
-
CardCourseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CardCourseComponent, selector: "ipt-card-course-self-cod-managed", inputs: { CourseData: "CourseData", isLoading: "isLoading" }, outputs: { codeCourse: "codeCourse" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!isLoading\" class=\"main-container\">\n\n <!-- cards Academy -->\n <div class=\"container__span-header flex justify-content-start\" *ngIf=\"visibleAcademy || visibleKids || visibleSchools\">\n <span>Selecciona un Plan</span>\n </div>\n\n <p-panel\n *ngIf=\"visibleAcademy\"\n header=\"Plan Academy\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"academic_plan\"\n class=\"academic_plan\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseAcademy\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__academic\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br> -->\n <!-- <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Kids -->\n\n <p-panel\n *ngIf=\"visibleKids\"\n header=\"Plan Kids\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_kids\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseKids\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__kids\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Schools -->\n\n <p-panel\n *ngIf=\"visibleSchools\"\n header=\"Plan Schools\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_school\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseSchools\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__schools\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br>\n <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <div class=\"container__span-footer flex justify-content-center\" *ngIf=\"!visibleAcademy && !visibleKids && !visibleSchools\">\n <span>No se encontraron planes</span>\n </div>\n</div>\n<div *ngIf=\"isLoading\">\n\n <p-panel\n header=\"\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"p-component panel-skeleton\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main class=\"flex flex-col\">\n <section *ngFor=\"let course of skeleton\" class=\"card1 animate__animated\" >\n <p-skeleton width=\"12rem\" height=\"2rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p class=\"card1__content_skeleton\">\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <strong><hr></strong>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n </p>\n <div class=\"card1__date__skeleton\">\n </div>\n <div class=\"card1__arrow\" >\n <p-skeleton size=\"3rem\" styleClass=\"mr-2\" ></p-skeleton>\n </div>\n </section>\n </main>\n </p-panel>\n\n</div>\n\n", styles: ["main{display:flex;gap:.7rem;flex-wrap:wrap}.card1{--border-radius: 6px;--primary-color: #1c77f7;--secondary-color: #2c2c2c;--tertiary-color: #ffffff;width:340px;font-family:Poppins,sans-serif;cursor:pointer;border-radius:var(--border-radius);background:#f1f1f3;box-shadow:0 8px 16px #00000008;position:relative;transition:.3s;border:solid .5px #e0e0e0}.type-theory{color:#00aecc}.type-club{color:#0d9d36}.msg-two-coup{color:#000!important;padding-left:7px;padding-right:7px;border-radius:5px;background-color:#4ed1e9}.msg-two-lev{color:#000!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#fb8f42}.beginner{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#94b9aa}.levelAone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#c4291c}.levelAonetwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#418ed1}.levelAtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#4fad65}.levelBone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#6824b8}.levelBtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#06161e}.levelBplus{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#cc6529}.main-container{margin-top:1%}.course-code{font-size:12px;font-weight:400;margin-left:.5rem}.card1:hover{box-shadow:#0000003d 0 3px 8px}.card1>*+*{margin-top:.7em}.card1 .card1__content{padding-left:10px;color:var(--secondary-color);font-size:.86rem;font-weight:200;z-index:1;position:relative}strong{color:var(--secondary-color);font-weight:300}:host ::ng-deep .p-panel .p-panel-header .p-panel-header-icon{color:#fff!important}.card1 .card1__title__academic{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}:host ::ng-deep #academic_plan .p-panel .p-panel-header{color:#fff!important;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}.card1 .card1__title__kids{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_kids .p-panel .p-panel-header{color:#fff!important;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__title__schools{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_school .p-panel .p-panel-header{color:#fff!important;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__date{color:#807c7c;padding-left:10px;font-size:.4rem;z-index:1;position:relative;margin-bottom:2%;margin-top:.7rem}.card1 .card1__arrow{padding-left:10px;position:absolute;padding:.3rem;border-top-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);bottom:0;right:0;transition:.2s;display:flex;justify-content:center;align-items:center}.card1 svg{transition:.2s}.card1:hover .card1__title{color:var(--secondary-color)}.card1:hover .card1__arrow{background:rgb(170,41,170)}.card1:hover .card1__arrow svg{transform:translate(3px)}.card1:hover strong{color:#aa29aa;font-weight:400}.card1:hover .course-code{color:#aa29aa;font-weight:500}.image-container{display:flex;border-radius:6px;width:250px;height:207px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px}:host ::ng-deep .p-menubar .p-menuitem{position:relative;width:auto}.green300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#76db9b;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.red300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#e35b53;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.gray300{height:2%;width:2%;padding-right:9px;border-radius:70%;color:#9e9a99;background-color:#9e9a99;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}label{border-radius:50%}#panel-skeleton{position:relative;overflow:hidden;background:#f0f0f0}#panel-skeleton:after{content:\"\";animation:p-skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}@keyframes p-skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.container__span-header,.container__span-footer{margin:20px 0;font-weight:700}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5.LoaderComponent, selector: "ipt-loader", inputs: ["message", "isDialog"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.ScheduleFormatPipe, name: "scheduleFormat" }, { kind: "pipe", type: i7.ScheduleTimeFormatPipe, name: "scheduleTimeFormat" }, { kind: "pipe", type: i8.TypeLevelPipe, name: "typeLevel" }] });
|
|
84
|
+
CardCourseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CardCourseComponent, selector: "ipt-card-course-self-cod-managed", inputs: { CourseData: "CourseData", isLoading: "isLoading" }, outputs: { codeCourse: "codeCourse" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!isLoading\" class=\"main-container\">\n\n <!-- cards Academy -->\n <div class=\"container__span-header flex justify-content-start\" *ngIf=\"visibleAcademy || visibleKids || visibleSchools\">\n <span>Selecciona un Plan</span>\n </div>\n\n <p-panel\n *ngIf=\"visibleAcademy\"\n header=\"Plan Academy\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"academic_plan\"\n class=\"academic_plan\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseAcademy\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__academic\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br> -->\n <!-- <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Kids -->\n\n <p-panel\n *ngIf=\"visibleKids\"\n header=\"Plan Kids\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_kids\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseKids\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__kids\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Schools -->\n\n <p-panel\n *ngIf=\"visibleSchools\"\n header=\"Plan Schools\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_school\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseSchools\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__schools\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br>\n <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <div class=\"container__span-footer flex justify-content-center\" *ngIf=\"!visibleAcademy && !visibleKids && !visibleSchools\">\n <span>No se encontraron planes</span>\n </div>\n</div>\n<div *ngIf=\"isLoading\">\n\n <p-panel\n header=\"\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"p-component panel-skeleton\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main class=\"flex flex-col\">\n <section *ngFor=\"let course of skeleton\" class=\"card1 animate__animated\" >\n <p-skeleton width=\"12rem\" height=\"2rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p class=\"card1__content_skeleton\">\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <strong><hr></strong>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n </p>\n <div class=\"card1__date__skeleton\">\n </div>\n <div class=\"card1__arrow\" >\n <p-skeleton size=\"3rem\" styleClass=\"mr-2\" ></p-skeleton>\n </div>\n </section>\n </main>\n </p-panel>\n\n</div>\n\n", styles: ["main{display:flex;gap:.7rem;flex-wrap:wrap}.card1{--border-radius: 3px;--primary-color: #1c77f7;--secondary-color: #2c2c2c;--tertiary-color: #ffffff;width:340px;font-family:Poppins,sans-serif;cursor:pointer;border-radius:var(--border-radius);background:#f1f1f3;box-shadow:0 8px 16px #00000008;position:relative;transition:.3s;border:solid .5px #e0e0e0}.type-theory{color:#00aecc}.type-club{color:#0d9d36}.msg-two-coup{color:#000!important;padding-left:7px;padding-right:7px;border-radius:5px;background-color:#4ed1e9}.msg-two-lev{color:#000!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#fb8f42}.beginner{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#94b9aa}.levelAone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#c4291c}.levelAonetwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#418ed1}.levelAtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#4fad65}.levelBone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#6824b8}.levelBtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#06161e}.levelBplus{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#cc6529}.main-container{margin-top:1%}.course-code{font-size:12px;font-weight:400;margin-left:.5rem}.card1:hover{box-shadow:#0000003d 0 3px 8px}.card1>*+*{margin-top:.7em}.card1 .card1__content{padding-left:10px;color:var(--secondary-color);font-size:.86rem;font-weight:200;z-index:1;position:relative}strong{color:var(--secondary-color);font-weight:300}:host ::ng-deep .p-panel .p-panel-header .p-panel-header-icon{color:#fff!important}.card1 .card1__title__academic{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}:host ::ng-deep #academic_plan .p-panel .p-panel-header{color:#fff!important;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}.card1 .card1__title__kids{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_kids .p-panel .p-panel-header{color:#fff!important;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__title__schools{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_school .p-panel .p-panel-header{color:#fff!important;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__date{color:#807c7c;padding-left:10px;font-size:.4rem;z-index:1;position:relative;margin-bottom:2%;margin-top:.7rem}.card1 .card1__arrow{padding-left:10px;position:absolute;padding:.3rem;border-top-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);bottom:0;right:0;transition:.2s;display:flex;justify-content:center;align-items:center}.card1 svg{transition:.2s}.card1:hover .card1__title{color:var(--secondary-color)}.card1:hover .card1__arrow{background:rgb(170,41,170)}.card1:hover .card1__arrow svg{transform:translate(3px)}.card1:hover strong{color:#aa29aa;font-weight:400}.card1:hover .course-code{color:#aa29aa;font-weight:500}.image-container{display:flex;border-radius:6px;width:250px;height:207px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px}:host ::ng-deep .p-menubar .p-menuitem{position:relative;width:auto}.green300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#76db9b;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.red300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#e35b53;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.gray300{height:2%;width:2%;padding-right:9px;border-radius:70%;color:#9e9a99;background-color:#9e9a99;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}label{border-radius:50%}#panel-skeleton{position:relative;overflow:hidden;background:#f0f0f0}#panel-skeleton:after{content:\"\";animation:p-skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}@keyframes p-skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.container__span-header,.container__span-footer{margin:20px 0;font-weight:700}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5.LoaderComponent, selector: "ipt-loader", inputs: ["message", "isDialog"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.ScheduleFormatPipe, name: "scheduleFormat" }, { kind: "pipe", type: i7.ScheduleTimeFormatPipe, name: "scheduleTimeFormat" }, { kind: "pipe", type: i8.TypeLevelPipe, name: "typeLevel" }] });
|
|
85
85
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CardCourseComponent, decorators: [{
|
|
86
86
|
type: Component,
|
|
87
|
-
args: [{ selector: 'ipt-card-course-self-cod-managed', template: "<div *ngIf=\"!isLoading\" class=\"main-container\">\n\n <!-- cards Academy -->\n <div class=\"container__span-header flex justify-content-start\" *ngIf=\"visibleAcademy || visibleKids || visibleSchools\">\n <span>Selecciona un Plan</span>\n </div>\n\n <p-panel\n *ngIf=\"visibleAcademy\"\n header=\"Plan Academy\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"academic_plan\"\n class=\"academic_plan\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseAcademy\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__academic\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br> -->\n <!-- <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Kids -->\n\n <p-panel\n *ngIf=\"visibleKids\"\n header=\"Plan Kids\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_kids\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseKids\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__kids\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Schools -->\n\n <p-panel\n *ngIf=\"visibleSchools\"\n header=\"Plan Schools\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_school\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseSchools\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__schools\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br>\n <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <div class=\"container__span-footer flex justify-content-center\" *ngIf=\"!visibleAcademy && !visibleKids && !visibleSchools\">\n <span>No se encontraron planes</span>\n </div>\n</div>\n<div *ngIf=\"isLoading\">\n\n <p-panel\n header=\"\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"p-component panel-skeleton\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main class=\"flex flex-col\">\n <section *ngFor=\"let course of skeleton\" class=\"card1 animate__animated\" >\n <p-skeleton width=\"12rem\" height=\"2rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p class=\"card1__content_skeleton\">\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <strong><hr></strong>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n </p>\n <div class=\"card1__date__skeleton\">\n </div>\n <div class=\"card1__arrow\" >\n <p-skeleton size=\"3rem\" styleClass=\"mr-2\" ></p-skeleton>\n </div>\n </section>\n </main>\n </p-panel>\n\n</div>\n\n", styles: ["main{display:flex;gap:.7rem;flex-wrap:wrap}.card1{--border-radius: 6px;--primary-color: #1c77f7;--secondary-color: #2c2c2c;--tertiary-color: #ffffff;width:340px;font-family:Poppins,sans-serif;cursor:pointer;border-radius:var(--border-radius);background:#f1f1f3;box-shadow:0 8px 16px #00000008;position:relative;transition:.3s;border:solid .5px #e0e0e0}.type-theory{color:#00aecc}.type-club{color:#0d9d36}.msg-two-coup{color:#000!important;padding-left:7px;padding-right:7px;border-radius:5px;background-color:#4ed1e9}.msg-two-lev{color:#000!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#fb8f42}.beginner{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#94b9aa}.levelAone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#c4291c}.levelAonetwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#418ed1}.levelAtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#4fad65}.levelBone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#6824b8}.levelBtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#06161e}.levelBplus{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#cc6529}.main-container{margin-top:1%}.course-code{font-size:12px;font-weight:400;margin-left:.5rem}.card1:hover{box-shadow:#0000003d 0 3px 8px}.card1>*+*{margin-top:.7em}.card1 .card1__content{padding-left:10px;color:var(--secondary-color);font-size:.86rem;font-weight:200;z-index:1;position:relative}strong{color:var(--secondary-color);font-weight:300}:host ::ng-deep .p-panel .p-panel-header .p-panel-header-icon{color:#fff!important}.card1 .card1__title__academic{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}:host ::ng-deep #academic_plan .p-panel .p-panel-header{color:#fff!important;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}.card1 .card1__title__kids{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_kids .p-panel .p-panel-header{color:#fff!important;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__title__schools{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_school .p-panel .p-panel-header{color:#fff!important;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__date{color:#807c7c;padding-left:10px;font-size:.4rem;z-index:1;position:relative;margin-bottom:2%;margin-top:.7rem}.card1 .card1__arrow{padding-left:10px;position:absolute;padding:.3rem;border-top-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);bottom:0;right:0;transition:.2s;display:flex;justify-content:center;align-items:center}.card1 svg{transition:.2s}.card1:hover .card1__title{color:var(--secondary-color)}.card1:hover .card1__arrow{background:rgb(170,41,170)}.card1:hover .card1__arrow svg{transform:translate(3px)}.card1:hover strong{color:#aa29aa;font-weight:400}.card1:hover .course-code{color:#aa29aa;font-weight:500}.image-container{display:flex;border-radius:6px;width:250px;height:207px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px}:host ::ng-deep .p-menubar .p-menuitem{position:relative;width:auto}.green300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#76db9b;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.red300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#e35b53;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.gray300{height:2%;width:2%;padding-right:9px;border-radius:70%;color:#9e9a99;background-color:#9e9a99;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}label{border-radius:50%}#panel-skeleton{position:relative;overflow:hidden;background:#f0f0f0}#panel-skeleton:after{content:\"\";animation:p-skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}@keyframes p-skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.container__span-header,.container__span-footer{margin:20px 0;font-weight:700}\n"] }]
|
|
87
|
+
args: [{ selector: 'ipt-card-course-self-cod-managed', template: "<div *ngIf=\"!isLoading\" class=\"main-container\">\n\n <!-- cards Academy -->\n <div class=\"container__span-header flex justify-content-start\" *ngIf=\"visibleAcademy || visibleKids || visibleSchools\">\n <span>Selecciona un Plan</span>\n </div>\n\n <p-panel\n *ngIf=\"visibleAcademy\"\n header=\"Plan Academy\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"academic_plan\"\n class=\"academic_plan\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseAcademy\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__academic\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br> -->\n <!-- <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Kids -->\n\n <p-panel\n *ngIf=\"visibleKids\"\n header=\"Plan Kids\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_kids\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseKids\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__kids\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br> -->\n <!-- <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <!-- cards Schools -->\n\n <p-panel\n *ngIf=\"visibleSchools\"\n header=\"Plan Schools\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"social_school\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main *ngIf=\"!isLoading\" class=\"flex flex-col\">\n <section *ngFor=\"let course of courseSchools\" class=\"card1 animate__animated\" (click)=\"viewDataCourse(course)\">\n <h3 class=\"card1__title__schools\">{{ course.course_type.label }}</h3>\n <p class=\"card1__content\">\n <strong class=\"type-theory\">Clases Teoricas: </strong>{{ course.course_schedule | scheduleFormat }}<br>\n <strong class=\"type-theory\">Horario Teorico: </strong>{{ course.course_schedule | scheduleTimeFormat }}<br>\n <!-- <strong class=\"type-theory\">Theory Teacher: </strong>{{ course.teacher | titlecase }}<br>\n <strong class=\"type-theory\">Theory Classroom: </strong><span>{{ course.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <strong><hr></strong>\n <strong class=\"type-club\">Clases Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleFormat }}</span><br>\n <strong class=\"type-club\">Horario Club: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_schedule | scheduleTimeFormat }}</span><br>\n <strong>Modalidad: </strong>\n <span *ngIf=\"course.course_modality\">{{ course.course_modality.name | titlecase }}</span><br>\n <!-- <strong class=\"type-club\">Club Teacher: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.teacher | titlecase }}</span><br>\n <strong class=\"type-club\">Club Classroom: </strong>\n <span *ngIf=\"course.course_club\">{{ course.course_club.course_scheduleDetails[0].ClassRoom.name | titlecase}}</span><br> -->\n <!-- <strong><hr></strong> -->\n <!-- <strong *ngIf=\"course.start_date === null\">Posible inicio: </strong>{{ course.start_date === null ? course.to_start : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.start_date === null\">\n <strong *ngIf=\"course.start_date !== null\">Fecha Inicio: </strong>{{ course.start_date !== null ? course.start_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\">\n <strong *ngIf=\"course.finish_date !== null\">Fecha culminacion: </strong>{{ course.finish_date !== null ? course.finish_date : null | date:'dd/MM/yyyy' }}<br *ngIf=\"course.finish_date !== null\"> -->\n <!-- <strong>Created: </strong>{{ course.created_at | date:'dd/MM/yyyy' }}<br> -->\n </p>\n <div class=\"card1__date\">\n <!-- <span\n [ngClass]=\"course.status?.color_status\"\n ></span> -->\n <!-- <span class=\"course-code\">Code: {{course.code}}</span> -->\n </div>\n <div class=\"card1__arrow\" [ngClass]=\"getCssClass(course.english_level.name)\">\n <span>{{ course.english_level.name | typeLevel}}</span>\n </div>\n </section>\n </main>\n <ipt-loader *ngIf=\"isLoading\"></ipt-loader>\n </p-panel>\n\n <div class=\"container__span-footer flex justify-content-center\" *ngIf=\"!visibleAcademy && !visibleKids && !visibleSchools\">\n <span>No se encontraron planes</span>\n </div>\n</div>\n<div *ngIf=\"isLoading\">\n\n <p-panel\n header=\"\"\n [toggleable]=\"true\"\n [collapsed]=\"false\"\n id=\"p-component panel-skeleton\"\n >\n <ng-template pTemplate=\"icons\"> </ng-template>\n <main class=\"flex flex-col\">\n <section *ngFor=\"let course of skeleton\" class=\"card1 animate__animated\" >\n <p-skeleton width=\"12rem\" height=\"2rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p class=\"card1__content_skeleton\">\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <strong><hr></strong>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton>\n </p>\n <div class=\"card1__date__skeleton\">\n </div>\n <div class=\"card1__arrow\" >\n <p-skeleton size=\"3rem\" styleClass=\"mr-2\" ></p-skeleton>\n </div>\n </section>\n </main>\n </p-panel>\n\n</div>\n\n", styles: ["main{display:flex;gap:.7rem;flex-wrap:wrap}.card1{--border-radius: 3px;--primary-color: #1c77f7;--secondary-color: #2c2c2c;--tertiary-color: #ffffff;width:340px;font-family:Poppins,sans-serif;cursor:pointer;border-radius:var(--border-radius);background:#f1f1f3;box-shadow:0 8px 16px #00000008;position:relative;transition:.3s;border:solid .5px #e0e0e0}.type-theory{color:#00aecc}.type-club{color:#0d9d36}.msg-two-coup{color:#000!important;padding-left:7px;padding-right:7px;border-radius:5px;background-color:#4ed1e9}.msg-two-lev{color:#000!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#fb8f42}.beginner{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#94b9aa}.levelAone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#c4291c}.levelAonetwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#418ed1}.levelAtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#4fad65}.levelBone{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#6824b8}.levelBtwo{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#06161e}.levelBplus{color:#fff!important;padding-left:5px;padding-right:5px;border-radius:5px;margin-left:13px;background-color:#cc6529}.main-container{margin-top:1%}.course-code{font-size:12px;font-weight:400;margin-left:.5rem}.card1:hover{box-shadow:#0000003d 0 3px 8px}.card1>*+*{margin-top:.7em}.card1 .card1__content{padding-left:10px;color:var(--secondary-color);font-size:.86rem;font-weight:200;z-index:1;position:relative}strong{color:var(--secondary-color);font-weight:300}:host ::ng-deep .p-panel .p-panel-header .p-panel-header-icon{color:#fff!important}.card1 .card1__title__academic{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}:host ::ng-deep #academic_plan .p-panel .p-panel-header{color:#fff!important;background:rgb(4,18,106);background:linear-gradient(175deg,rgba(4,18,106,1) 27%,rgba(48,63,155,1) 53%,rgba(28,119,247,1)90%);border-radius:6px 6px 0 0}.card1 .card1__title__kids{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_kids .p-panel .p-panel-header{color:#fff!important;background:rgb(127,33,99);background:linear-gradient(175deg,rgba(127,33,99,1) 27%,rgba(171,49,135,1) 53%,rgba(220,76,178,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__title__schools{color:#fff;padding-left:10px;padding-right:10px;font-size:1.1rem;font-weight:300;z-index:1;position:relative;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}:host ::ng-deep #social_school .p-panel .p-panel-header{color:#fff!important;background:rgb(57,130,154);background:linear-gradient(175deg,rgba(57,130,154,1) 27%,rgba(44,147,180,1) 53%,rgba(135,182,197,1) 90%);border-radius:6px 6px 0 0}.card1 .card1__date{color:#807c7c;padding-left:10px;font-size:.4rem;z-index:1;position:relative;margin-bottom:2%;margin-top:.7rem}.card1 .card1__arrow{padding-left:10px;position:absolute;padding:.3rem;border-top-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);bottom:0;right:0;transition:.2s;display:flex;justify-content:center;align-items:center}.card1 svg{transition:.2s}.card1:hover .card1__title{color:var(--secondary-color)}.card1:hover .card1__arrow{background:rgb(170,41,170)}.card1:hover .card1__arrow svg{transform:translate(3px)}.card1:hover strong{color:#aa29aa;font-weight:400}.card1:hover .course-code{color:#aa29aa;font-weight:500}.image-container{display:flex;border-radius:6px;width:250px;height:207px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px}:host ::ng-deep .p-menubar .p-menuitem{position:relative;width:auto}.green300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#76db9b;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.red300{height:2%;width:2%;padding-right:9px;border-radius:70%;background:#e35b53;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}.gray300{height:2%;width:2%;padding-right:9px;border-radius:70%;color:#9e9a99;background-color:#9e9a99;box-shadow:-1px 0 1px 1px #000000fa;border:1px solid rgb(0 0 0 / 40%)}label{border-radius:50%}#panel-skeleton{position:relative;overflow:hidden;background:#f0f0f0}#panel-skeleton:after{content:\"\";animation:p-skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}@keyframes p-skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.container__span-header,.container__span-footer{margin:20px 0;font-weight:700}\n"] }]
|
|
88
88
|
}], propDecorators: { CourseData: [{
|
|
89
89
|
type: Input
|
|
90
90
|
}], isLoading: [{
|