iptdevs-design-system 3.1.556 → 3.1.558

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.
Files changed (10) hide show
  1. package/esm2020/lib/cod-self-managed/cod-self-managed.module.mjs +8 -4
  2. package/esm2020/lib/cod-self-managed/steps/cod-form-step-two/cod-self-form-step-two.component.mjs +13 -9
  3. package/esm2020/lib/components/molecules/card-course/card-course.component.mjs +3 -3
  4. package/fesm2015/iptdevs-design-system.mjs +19 -11
  5. package/fesm2015/iptdevs-design-system.mjs.map +1 -1
  6. package/fesm2020/iptdevs-design-system.mjs +19 -11
  7. package/fesm2020/iptdevs-design-system.mjs.map +1 -1
  8. package/lib/cod-self-managed/cod-self-managed.module.d.ts +2 -1
  9. package/lib/cod-self-managed/steps/cod-form-step-two/cod-self-form-step-two.component.d.ts +1 -0
  10. package/package.json +1 -1
package/fesm2015/iptdevs-design-system.mjs CHANGED
@@ -42,11 +42,13 @@ import * as i3$2 from 'primeng/steps';
42
42
  import { StepsModule } from 'primeng/steps';
43
43
  import * as i8$2 from 'primeng/toast';
44
44
  import { ToastModule } from 'primeng/toast';
45
- import * as i10 from 'primeng/accordion';
45
+ import * as i8$3 from 'primeng/tooltip';
46
+ import { TooltipModule } from 'primeng/tooltip';
47
+ import * as i11 from 'primeng/accordion';
46
48
  import { AccordionModule } from 'primeng/accordion';
47
- import * as i11 from 'primeng/checkbox';
49
+ import * as i12 from 'primeng/checkbox';
48
50
  import { CheckboxModule } from 'primeng/checkbox';
49
- import * as i12 from 'primeng/radiobutton';
51
+ import * as i13$1 from 'primeng/radiobutton';
50
52
  import { RadioButtonModule } from 'primeng/radiobutton';
51
53
  import { CalendarModule } from 'primeng/calendar';
52
54
  import { SelectButtonModule } from 'primeng/selectbutton';
@@ -2468,10 +2470,10 @@ class CardCourseComponent {
2468
2470
  }
2469
2471
  }
2470
2472
  CardCourseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CardCourseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2471
- 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\" *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 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 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 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\" *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><br>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton><br>\n\n </p>\n <div class=\"card1__date__skeleton\">\n\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:.1rem;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;width:50px}.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%)}}\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$1.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: LoaderComponent, selector: "ipt-loader", inputs: ["message", "isDialog"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: ScheduleFormatPipe, name: "scheduleFormat" }, { kind: "pipe", type: ScheduleTimeFormatPipe, name: "scheduleTimeFormat" }, { kind: "pipe", type: TypeLevelPipe, name: "typeLevel" }] });
2473
+ 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-center\" *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 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 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 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:.1rem;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;width:50px}.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$1.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: LoaderComponent, selector: "ipt-loader", inputs: ["message", "isDialog"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: ScheduleFormatPipe, name: "scheduleFormat" }, { kind: "pipe", type: ScheduleTimeFormatPipe, name: "scheduleTimeFormat" }, { kind: "pipe", type: TypeLevelPipe, name: "typeLevel" }] });
2472
2474
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CardCourseComponent, decorators: [{
2473
2475
  type: Component,
2474
- 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\" *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 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 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 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\" *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><br>\n <p-skeleton width=\"9rem\" height=\"1rem\" styleClass=\"mb-2\" ></p-skeleton><br>\n\n </p>\n <div class=\"card1__date__skeleton\">\n\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:.1rem;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;width:50px}.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%)}}\n"] }]
2476
+ 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-center\" *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 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 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 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:.1rem;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;width:50px}.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"] }]
2475
2477
  }], propDecorators: { CourseData: [{
2476
2478
  type: Input
2477
2479
  }], isLoading: [{
@@ -6920,7 +6922,7 @@ class CodSelfFormStepTwoComponent extends CodSelfManagedSteps {
6920
6922
  this.completed = new EventEmitter();
6921
6923
  this.controls = new CodSelfManagedControls().controls[1];
6922
6924
  this.visible = false;
6923
- this.messageInfo = 'Busca un plan deacuerdo a tu disponibilidad';
6925
+ this.messageInfo = 'Busca un plan de acuerdo a tu disponibilidad.';
6924
6926
  this.stateOptionsModality = [
6925
6927
  { code: 1, key: 'pr', name: 'Presencial' },
6926
6928
  { code: 2, key: 'vi', name: 'Virtual' },
@@ -7121,12 +7123,15 @@ class CodSelfFormStepTwoComponent extends CodSelfManagedSteps {
7121
7123
  console.log(this.CourseSelect);
7122
7124
  this.visibleGroupReview = false;
7123
7125
  }
7126
+ openTestInNewTab() {
7127
+ window.open('https://test.inglesparatodos.edu.co/', '_blank');
7128
+ }
7124
7129
  }
7125
7130
  CodSelfFormStepTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepTwoComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3$1.MessageService }, { token: BaseService }, { token: AcademicService }], target: i0.ɵɵFactoryTarget.Component });
7126
- 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, usesOnChanges: 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=\"https://qa.iptdev.com.co/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\" (click)=\"showConfirm()\"></i>\n <!-- <form [formGroup]=\"codSelfFormStepTwo\"> -->\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 <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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 <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\n </p-accordion>\n <div class=\"flex-none flex align-items-center justify-content-end m-2\">\n <button\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 <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 <!-- </form> -->\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n</div>\n\n<div>\n <pre>{{ codSelfFormStepTwo.value | json }}</pre>\n <div>\n <pre>{{ codSelfFormStepTwo.valid | json }}</pre>\n </div>\n</div>\n\n", styles: [".container-main{margin:1%}.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}\n"], dependencies: [{ 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: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }, { kind: "component", type: CardCourseComponent, selector: "ipt-card-course-self-cod-managed", inputs: ["CourseData", "isLoading"], outputs: ["codeCourse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i8$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i10.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i10.AccordionTab, selector: "p-accordionTab", inputs: ["header", "disabled", "cache", "transitionOptions", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i11.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: i12.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
7131
+ 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, usesOnChanges: 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=\"https://qa.iptdev.com.co/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\" (click)=\"showConfirm()\"></i>\n <!-- <form [formGroup]=\"codSelfFormStepTwo\"> -->\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 <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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 <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 <!-- <h3>\u00BFDeseas iniciar en este nivel {{ scorePlacementTest?.level_inglish_next.name }}?</h3> -->\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 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 <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 <!-- </form> -->\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n</div>\n\n<div>\n <pre>{{ codSelfFormStepTwo.value | json }}</pre>\n <div>\n <pre>{{ codSelfFormStepTwo.valid | json }}</pre>\n </div>\n</div>\n\n", styles: [".container-main{margin:1%}.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}\n"], dependencies: [{ 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: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }, { kind: "component", type: CardCourseComponent, selector: "ipt-card-course-self-cod-managed", inputs: ["CourseData", "isLoading"], outputs: ["codeCourse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i8$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i11.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i11.AccordionTab, selector: "p-accordionTab", inputs: ["header", "disabled", "cache", "transitionOptions", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i12.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: i13$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
7127
7132
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepTwoComponent, decorators: [{
7128
7133
  type: Component,
7129
- 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=\"https://qa.iptdev.com.co/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\" (click)=\"showConfirm()\"></i>\n <!-- <form [formGroup]=\"codSelfFormStepTwo\"> -->\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 <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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 <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\n </p-accordion>\n <div class=\"flex-none flex align-items-center justify-content-end m-2\">\n <button\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 <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 <!-- </form> -->\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n</div>\n\n<div>\n <pre>{{ codSelfFormStepTwo.value | json }}</pre>\n <div>\n <pre>{{ codSelfFormStepTwo.valid | json }}</pre>\n </div>\n</div>\n\n", styles: [".container-main{margin:1%}.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}\n"] }]
7134
+ 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=\"https://qa.iptdev.com.co/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\" (click)=\"showConfirm()\"></i>\n <!-- <form [formGroup]=\"codSelfFormStepTwo\"> -->\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 <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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\n <p-accordionTab header=\"Modalidad\">\n <div class=\"containerDay\">\n <!-- <h3>Horario</h3> -->\n <div class=\"checkBox flex flex-wrap justify-content-between m-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 <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 <!-- <h3>\u00BFDeseas iniciar en este nivel {{ scorePlacementTest?.level_inglish_next.name }}?</h3> -->\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 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 <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 <!-- </form> -->\n <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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\"\n (click)=\"sendForm()\"\n ></button>\n </div>\n </div>\n</div>\n\n<div>\n <pre>{{ codSelfFormStepTwo.value | json }}</pre>\n <div>\n <pre>{{ codSelfFormStepTwo.valid | json }}</pre>\n </div>\n</div>\n\n", styles: [".container-main{margin:1%}.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}\n"] }]
7130
7135
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i3$1.MessageService }, { type: BaseService }, { type: AcademicService }]; }, propDecorators: { completed: [{
7131
7136
  type: Output
7132
7137
  }], scorePlacementTest: [{
@@ -7223,7 +7228,8 @@ codSelfManagedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
7223
7228
  SelectButtonModule,
7224
7229
  AccordionModule,
7225
7230
  CheckboxModule,
7226
- RadioButtonModule], exports: [CodSelfManagedComponent,
7231
+ RadioButtonModule,
7232
+ TooltipModule], exports: [CodSelfManagedComponent,
7227
7233
  CodSelfFormStepOneComponent,
7228
7234
  CodSelfFormStepTwoComponent,
7229
7235
  CodSelfFormStepThreeComponent,
@@ -7240,7 +7246,8 @@ codSelfManagedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
7240
7246
  SelectButtonModule,
7241
7247
  AccordionModule,
7242
7248
  CheckboxModule,
7243
- RadioButtonModule] });
7249
+ RadioButtonModule,
7250
+ TooltipModule] });
7244
7251
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: codSelfManagedModule, decorators: [{
7245
7252
  type: NgModule,
7246
7253
  args: [{
@@ -7257,7 +7264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
7257
7264
  SelectButtonModule,
7258
7265
  AccordionModule,
7259
7266
  CheckboxModule,
7260
- RadioButtonModule
7267
+ RadioButtonModule,
7268
+ TooltipModule
7261
7269
  ],
7262
7270
  declarations: [
7263
7271
  CodSelfManagedComponent,