@rolatech/angular-course 20.0.0-beta.7 → 20.0.0-beta.9

package/fesm2022/rolatech-angular-course.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, Injectable, importProvidersFrom, makeEnvironmentProviders, Component, input, effect, output, ViewEncapsulation, model, PLATFORM_ID, ElementRef, Inject, viewChild, ChangeDetectorRef } from '@angular/core';
-import * as i1$4 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule, NgClass, isPlatformBrowser, DatePipe, ViewportScroller } from '@angular/common';
 import * as i1 from '@angular/router';
@@ -12,7 +12,7 @@ import _, { first, remove, findLastIndex, findIndex, clone } from 'lodash';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$2 from '@angular/material/dialog';
-import { MatDialog, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
+import { MatDialog, MAT_DIALOG_DATA, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
 import { ImagePreviewDialogComponent, ThumbnailComponent, AccordionComponent, PanelComponent, InputComponent, AngularComponentsModule, MediaListComponent, MediaListItemComponent, BaseComponent, ContainerComponent, RichItemComponent, RichViewComponent, ConfirmationDialogComponent, ToolbarComponent, SpinnerComponent } from '@rolatech/angular-components';
 import { FixedPipe, DurationPipe, AngularCommonModule } from '@rolatech/angular-common';
 import * as i1$1 from '@angular/material/button';
@@ -21,7 +21,7 @@ import * as i3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i5 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i6$1 from '@angular/material/stepper';
+import * as i3$4 from '@angular/material/stepper';
 import { MatStepperModule, MatStepper } from '@angular/material/stepper';
 import * as i3$3 from '@angular/material/snack-bar';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -45,9 +45,9 @@ import { CommentsComponent } from '@rolatech/angular-comment';
 import { CategoryBreadcrumbComponent } from '@rolatech/angular-category';
 import * as i2$2 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$5 from '@angular/material/table';
+import * as i1$4 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i4 from '@angular/material/menu';
+import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
 var CourseStatus;
@@ -578,11 +578,11 @@ class CourseInfoComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseInfoComponent, isStandalone: true, selector: "rolatech-course-info", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, instructor: { classPropertyName: "instructor", publicName: "instructor", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <div>\n    <div class=\"text-2xl font-medium\">{{ course().name }}</div>\n    @if (course().type && course().type.toString() !== 'ONLINE') {\n      <div class=\"flex items-center pt-2\">\n        <mat-icon>place</mat-icon>\n        <span class=\"text-sm opacity-75\">{{ course().classroom.address }}</span>\n      </div>\n    }\n    <div class=\"py-3 flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\" i18n>Instructor: </span>\n          <a class=\"ml-2 underline text-[--rt-brand-color] text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\" i18n>Last edit: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- Description -->\n  <div class=\"mb-3\">\n    {{ course().description }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseInfoComponent, isStandalone: true, selector: "rolatech-course-info", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, instructor: { classPropertyName: "instructor", publicName: "instructor", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <div>\n    <div class=\"text-2xl font-medium\">{{ course().name }}</div>\n    @if (course().type && course().type.toString() !== 'ONLINE') {\n      <div class=\"flex items-center pt-2\">\n        <mat-icon>place</mat-icon>\n        <span class=\"text-sm opacity-75\">{{ course().address?.address }}</span>\n      </div>\n    }\n    <div class=\"py-3 flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\" i18n>Instructor: </span>\n          <a class=\"ml-2 underline text-[--rt-brand-color] text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\" i18n>Last edit: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- Description -->\n  <div class=\"mb-3\">\n    {{ course().description }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-info', imports: [MatIconModule, RouterModule], template: "<div>\n  <div>\n    <div class=\"text-2xl font-medium\">{{ course().name }}</div>\n    @if (course().type && course().type.toString() !== 'ONLINE') {\n      <div class=\"flex items-center pt-2\">\n        <mat-icon>place</mat-icon>\n        <span class=\"text-sm opacity-75\">{{ course().classroom.address }}</span>\n      </div>\n    }\n    <div class=\"py-3 flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\" i18n>Instructor: </span>\n          <a class=\"ml-2 underline text-[--rt-brand-color] text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\" i18n>Last edit: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- Description -->\n  <div class=\"mb-3\">\n    {{ course().description }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
+            args: [{ selector: 'rolatech-course-info', imports: [MatIconModule, RouterModule], template: "<div>\n  <div>\n    <div class=\"text-2xl font-medium\">{{ course().name }}</div>\n    @if (course().type && course().type.toString() !== 'ONLINE') {\n      <div class=\"flex items-center pt-2\">\n        <mat-icon>place</mat-icon>\n        <span class=\"text-sm opacity-75\">{{ course().address?.address }}</span>\n      </div>\n    }\n    <div class=\"py-3 flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\" i18n>Instructor: </span>\n          <a class=\"ml-2 underline text-[--rt-brand-color] text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\" i18n>Last edit: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- Description -->\n  <div class=\"mb-3\">\n    {{ course().description }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
         }] });
 
 class CourseMediaComponent {
@@ -950,7 +950,7 @@ class PricingItemComponent {
         this.pricing().total = e;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PricingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PricingItemComponent, isStandalone: true, selector: "rolatech-pricing-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, pricing: { classPropertyName: "pricing", publicName: "pricing", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pricing: "pricingChange", delete: "delete", save: "save" }, ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Min </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().min\" name=\"min\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Max </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().max\" name=\"max\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Price </mat-label>\n    <!-- <input matInput  type=\"number\" step=\"0.01\" [ngModel]=\"pricing().total\"\n    (ngModelChange)=\"setTwoNumberDecimal($event)\" name=\"total\" required placeholder=\"20.23\" /> -->\n    <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"pricing().total\" name=\"total\" required />\n  </mat-form-field>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3 gap-3\">\n    <button mat-button class=\"max-h-8\" (click)=\"onDelete(pricing())\" i18n>Delete</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(pricing())\" i18n>Save</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PricingItemComponent, isStandalone: true, selector: "rolatech-pricing-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, pricing: { classPropertyName: "pricing", publicName: "pricing", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pricing: "pricingChange", delete: "delete", save: "save" }, ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Min </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().min\" name=\"min\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Max </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().max\" name=\"max\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Price </mat-label>\n    <!-- <input matInput  type=\"number\" step=\"0.01\" [ngModel]=\"pricing().total\"\n    (ngModelChange)=\"setTwoNumberDecimal($event)\" name=\"total\" required placeholder=\"20.23\" /> -->\n    <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"pricing().total\" name=\"total\" required />\n  </mat-form-field>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3 gap-3\">\n    <button mat-button class=\"max-h-8\" (click)=\"onDelete(pricing())\" i18n>Delete</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(pricing())\" i18n>Save</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PricingItemComponent, decorators: [{
             type: Component,
@@ -1054,7 +1054,7 @@ class ScheduleItemComponent {
             },
             { provide: MAT_DATE_FORMATS, useValue: COURSE_SCHEDULE_DATE_FORMATS },
             DatePipe,
-        ], ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Title </mat-label>\n    <input matInput type=\"text\" [(ngModel)]=\"schedule.title\" name=\"title\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Content </mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      [(ngModel)]=\"schedule.content\"\n      name=\"content\"\n      cdkTextareaAutosize\n      cdkAutosizeMinRows=\"3\"\n      required\n    ></textarea>\n  </mat-form-field>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Start at</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (focus)=\"picker.open()\"\n        name=\"startAt\"\n        [(ngModel)]=\"schedule.startDate\"\n        (ngModelChange)=\"startDateChanged($event)\"\n        (dateInput)=\"schedule.startDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Start time</mat-label>\n      <mat-select [(ngModel)]=\"schedule.startTime\" (selectionChange)=\"startTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>End at</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker2\"\n        name=\"endAt\"\n        (focus)=\"picker2.open()\"\n        (ngModelChange)=\"endDateChanged($event)\"\n        [(ngModel)]=\"schedule.endDate\"\n        (dateInput)=\"schedule.endDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker #picker2></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>End time</mat-label>\n      <mat-select [(ngModel)]=\"schedule.endTime\" (selectionChange)=\"endTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3 gap-3\">\n    <button mat-button class=\"max-h-8\" (click)=\"onDelete(schedule)\" i18n>Delete</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(schedule)\" i18n>Save</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Title </mat-label>\n    <input matInput type=\"text\" [(ngModel)]=\"schedule.title\" name=\"title\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n> Content </mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      [(ngModel)]=\"schedule.content\"\n      name=\"content\"\n      cdkTextareaAutosize\n      cdkAutosizeMinRows=\"3\"\n      required\n    ></textarea>\n  </mat-form-field>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Start at</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (focus)=\"picker.open()\"\n        name=\"startAt\"\n        [(ngModel)]=\"schedule.startDate\"\n        (ngModelChange)=\"startDateChanged($event)\"\n        (dateInput)=\"schedule.startDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Start time</mat-label>\n      <mat-select [(ngModel)]=\"schedule.startTime\" (selectionChange)=\"startTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>End at</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker2\"\n        name=\"endAt\"\n        (focus)=\"picker2.open()\"\n        (ngModelChange)=\"endDateChanged($event)\"\n        [(ngModel)]=\"schedule.endDate\"\n        (dateInput)=\"schedule.endDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker #picker2></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>End time</mat-label>\n      <mat-select [(ngModel)]=\"schedule.endTime\" (selectionChange)=\"endTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3 gap-3\">\n    <button mat-button class=\"max-h-8\" (click)=\"onDelete(schedule)\" i18n>Delete</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(schedule)\" i18n>Save</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ScheduleItemComponent, decorators: [{
             type: Component,
@@ -1122,7 +1122,7 @@ class CoursePricingDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CoursePricingDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CoursePricingDialogComponent, isStandalone: true, selector: "rolatech-course-pricing-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto w-2/3 max-h-[55vh]\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addPricing()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u4EF7\u683C</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"pricing\" cdkFocusInitial i18n>Save</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i6$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CoursePricingDialogComponent, isStandalone: true, selector: "rolatech-course-pricing-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto w-2/3 max-h-[55vh]\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addPricing()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u4EF7\u683C</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"pricing\" cdkFocusInitial i18n>Save</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i3$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CoursePricingDialogComponent, decorators: [{
             type: Component,
@@ -1163,7 +1163,7 @@ class CourseScheduleDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseScheduleDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseScheduleDialogComponent, isStandalone: true, selector: "rolatech-course-schedule-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel i18n>Details</ng-template>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addSchedule()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BFE\u8868</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"schedule\" cdkFocusInitial i18n>Save</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i6$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseScheduleDialogComponent, isStandalone: true, selector: "rolatech-course-schedule-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel i18n>Details</ng-template>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addSchedule()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BFE\u8868</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"schedule\" cdkFocusInitial i18n>Save</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i3$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseScheduleDialogComponent, decorators: [{
             type: Component,
@@ -1216,7 +1216,7 @@ class DetailItemComponent {
         this.selectedImg = this.detail().media ? first(this.detail().media) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DetailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: DetailItemComponent, isStandalone: true, selector: "rolatech-detail-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"mb-8\">\n  <div class=\"flex flex-col lg:flex-row\">\n    <div class=\"flex flex-col grow\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n>Title</mat-label>\n        <input matInput placeholder=\"Title\" [(ngModel)]=\"detail().title\" i18n />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label i18n>Description</mat-label>\n        <input matInput placeholder=\"Description\" [(ngModel)]=\"detail().description\" i18n />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label i18n>Content</mat-label>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"3\"\n          placeholder=\"Conte t\"\n          [(ngModel)]=\"detail().content\"\n          i18n\n        ></textarea>\n      </mat-form-field>\n    </div>\n    <!-- image -->\n    <div class=\"lg:basis-1/2 px-3\">\n      <div class=\"flex flex-row justify-center pb-4 p-1\">\n        @if (selectedImg) {\n          <img class=\"object-contain w-80 h-80\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n        }\n        @if (selectedImg) {\n          <button mat-icon-button (click)=\"onDeleteMedia(detail().id, selectedImg)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n      <!-- media -->\n      <div>\n        <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n          <div class=\"progress-bar\">\n            @if (detail().isUploading) {\n              <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n            }\n          </div>\n          @for (media of detail().media; track media) {\n            <div class=\"media-list-item\">\n              <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n            </div>\n          }\n          <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload(detail().id, $event)\" #fileInput />\n          <div class=\"add-button\">\n            <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3 gap-3\">\n    <button mat-button class=\"max-h-8\" (click)=\"onDelete(detail())\" i18n>Delete</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(detail())\" i18n>Save</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;border:1px solid grey;padding:6px;position:relative;box-sizing:border-box}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: DetailItemComponent, isStandalone: true, selector: "rolatech-detail-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"mb-8\">\n  <div class=\"flex flex-col lg:flex-row\">\n    <div class=\"flex flex-col grow\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n>Title</mat-label>\n        <input matInput placeholder=\"Title\" [(ngModel)]=\"detail().title\" i18n />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label i18n>Description</mat-label>\n        <input matInput placeholder=\"Description\" [(ngModel)]=\"detail().description\" i18n />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label i18n>Content</mat-label>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"3\"\n          placeholder=\"Conte t\"\n          [(ngModel)]=\"detail().content\"\n          i18n\n        ></textarea>\n      </mat-form-field>\n    </div>\n    <!-- image -->\n    <div class=\"lg:basis-1/2 px-3\">\n      <div class=\"flex flex-row justify-center pb-4 p-1\">\n        @if (selectedImg) {\n          <img class=\"object-contain w-80 h-80\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n        }\n        @if (selectedImg) {\n          <button mat-icon-button (click)=\"onDeleteMedia(detail().id, selectedImg)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n      <!-- media -->\n      <div>\n        <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n          <div class=\"progress-bar\">\n            @if (detail().isUploading) {\n              <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n            }\n          </div>\n          @for (media of detail().media; track media) {\n            <div class=\"media-list-item\">\n              <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n            </div>\n          }\n          <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload(detail().id, $event)\" #fileInput />\n          <div class=\"add-button\">\n            <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3 gap-3\">\n    <button mat-button class=\"max-h-8\" (click)=\"onDelete(detail())\" i18n>Delete</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(detail())\" i18n>Save</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;border:1px solid grey;padding:6px;position:relative;box-sizing:border-box}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DetailItemComponent, decorators: [{
             type: Component,
@@ -1286,7 +1286,7 @@ class CourseDetailsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseDetailsDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseDetailsDialogComponent, isStandalone: true, selector: "rolatech-course-details-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of details; track item) {\n        <rolatech-detail-item\n          [detail]=\"item\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n        ></rolatech-detail-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addDetail()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BE6\u60C5</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial i18n>Save</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i6$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseDetailsDialogComponent, isStandalone: true, selector: "rolatech-course-details-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of details; track item) {\n        <rolatech-detail-item\n          [detail]=\"item\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n        ></rolatech-detail-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addDetail()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BE6\u60C5</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial i18n>Save</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i3$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseDetailsDialogComponent, decorators: [{
             type: Component,
@@ -1305,13 +1305,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 }] }, { type: CourseService }, { type: i3$3.MatSnackBar }, { type: i1$2.MatDialog }] });
 
 class CourseEditDialogComponent {
-    constructor(dialogRef, data, categoryService, courseService, snackBar, dialog) {
-        this.dialogRef = dialogRef;
+    constructor(data) {
         this.data = data;
-        this.categoryService = categoryService;
-        this.courseService = courseService;
-        this.snackBar = snackBar;
-        this.dialog = dialog;
+        this.dialogRef = inject((MatDialogRef));
+        this.categoryService = inject(CategoryService);
+        this.courseService = inject(CourseService);
+        this.snackBar = inject(MatSnackBar);
+        this.dialog = inject(MatDialog);
         this.isUploading = false;
         this.courseType = [
             {
@@ -1332,7 +1332,7 @@ class CourseEditDialogComponent {
         this.firstStepper = true;
         this.stepper = viewChild.required(MatStepper);
         this.course = data.course;
-        this.classrooms = data.classrooms;
+        this.address = data.address;
     }
     ngOnInit() {
         this.categoryService.find({}).subscribe({
@@ -1475,8 +1475,8 @@ class CourseEditDialogComponent {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseEditDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoryService }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseEditDialogComponent, isStandalone: true, selector: "rolatech-course-edit-dialog", viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <mat-stepper #stepper (selectionChange)=\"onStepperChange($event)\">\n      <mat-step [editable]=\"true\">\n        <form #infoForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Basic info</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Name </mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Description </mat-label>\n              <textarea\n                matInput\n                type=\"text\"\n                [(ngModel)]=\"course.description\"\n                name=\"description\"\n                required\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"3\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\">\n              <mat-label i18n>Categories</mat-label>\n              <mat-select\n                multiple\n                name=\"id\"\n                [compareWith]=\"compareFn\"\n                [(ngModel)]=\"course.categories\"\n                #select=\"matSelect\"\n                (selectionChange)=\"onSelectionChange($event)\"\n              >\n                @for (item of categories; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Type</mat-label>\n              <mat-select name=\"type\" [(ngModel)]=\"course.type\">\n                @for (item of courseType; track item) {\n                  <mat-option [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (course.type.toString() !== 'ONLINE') {\n              <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n                <mat-label i18n>Classroom</mat-label>\n                <mat-select [(ngModel)]=\"course.classroom\" name=\"id\">\n                  @for (classroom of classrooms; track classroom) {\n                    <mat-option [value]=\"classroom.id\">\n                      <div class=\"flex gap-3\">\n                        <span>{{ classroom.name }}</span>\n                        <span> {{ classroom.address }}</span>\n                      </div>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            }\n          </div>\n          <div>\n            <div class=\"py-3\">\n              <h2 i18n>Media info</h2>\n            </div>\n            <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n              @for (item of course.media; track item; let i = $index) {\n                <rolatech-media-list-item [media]=\"item\" (mediaItemClick)=\"onImageClick(i)\"></rolatech-media-list-item>\n              }\n            </rolatech-media-list>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #detailForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Details</ng-template>\n          @for (item of course.details; track item) {\n            <rolatech-detail-item\n              [detail]=\"item\"\n              (upload)=\"onDetailMediaUpload($event)\"\n              (deleteMedia)=\"onDetailMediaDelete($event)\"\n              (save)=\"onDetailSave($event)\"\n              (delete)=\"onDetailDelete($event)\"\n            ></rolatech-detail-item>\n          }\n          <div class=\"mb-6\">\n            <button mat-button (click)=\"addDetail()\">\n              <mat-icon>add</mat-icon>\n              <span i18n>Add detail</span>\n            </button>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #pricingForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u4EF7\u683C</ng-template>\n          <div>\n            @for (item of course.pricing; track item) {\n              <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addPricing()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add price</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel i18n>Schedule</ng-template>\n          <div class=\"flex flex-col\">\n            @for (item of course.schedule; track item) {\n              <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addSchedule()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add schedule</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n    </mat-stepper>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    @if (!firstStepper) {\n      <button mat-button mat-button (click)=\"previous()\" i18n>Prev</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\" i18n>Next</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial i18n>Save</button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i6$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i6$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i6$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress", "uploading"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseEditDialogComponent, isStandalone: true, selector: "rolatech-course-edit-dialog", viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <mat-stepper #stepper (selectionChange)=\"onStepperChange($event)\">\n      <mat-step [editable]=\"true\">\n        <form #infoForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Basic info</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Name </mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Description </mat-label>\n              <textarea\n                matInput\n                type=\"text\"\n                [(ngModel)]=\"course.description\"\n                name=\"description\"\n                required\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"3\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\">\n              <mat-label i18n>Categories</mat-label>\n              <mat-select\n                multiple\n                name=\"id\"\n                [compareWith]=\"compareFn\"\n                [(ngModel)]=\"course.categories\"\n                #select=\"matSelect\"\n                (selectionChange)=\"onSelectionChange($event)\"\n              >\n                @for (item of categories; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Type</mat-label>\n              <mat-select name=\"type\" [(ngModel)]=\"course.type\">\n                @for (item of courseType; track item) {\n                  <mat-option [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (course.type.toString() !== 'ONLINE') {\n              <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n                <mat-label i18n>Classroom</mat-label>\n                <mat-select [(ngModel)]=\"course.address\" name=\"id\">\n                  @for (address of address; track address) {\n                    <mat-option [value]=\"address.id\">\n                      <div class=\"flex gap-3\">\n                        <span>{{ address.name }}</span>\n                        <span> {{ address.address }}</span>\n                      </div>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            }\n          </div>\n          <div>\n            <div class=\"py-3\">\n              <h2 i18n>Media info</h2>\n            </div>\n            <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n              @for (item of course.media; track item; let i = $index) {\n                <rolatech-media-list-item [media]=\"item\" (mediaItemClick)=\"onImageClick(i)\"></rolatech-media-list-item>\n              }\n            </rolatech-media-list>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #detailForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Details</ng-template>\n          @for (item of course.details; track item) {\n            <rolatech-detail-item\n              [detail]=\"item\"\n              (upload)=\"onDetailMediaUpload($event)\"\n              (deleteMedia)=\"onDetailMediaDelete($event)\"\n              (save)=\"onDetailSave($event)\"\n              (delete)=\"onDetailDelete($event)\"\n            ></rolatech-detail-item>\n          }\n          <div class=\"mb-6\">\n            <button mat-button (click)=\"addDetail()\">\n              <mat-icon>add</mat-icon>\n              <span i18n>Add detail</span>\n            </button>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #pricingForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u4EF7\u683C</ng-template>\n          <div>\n            @for (item of course.pricing; track item) {\n              <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addPricing()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add price</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel i18n>Schedule</ng-template>\n          <div class=\"flex flex-col\">\n            @for (item of course.schedule; track item) {\n              <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addSchedule()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add schedule</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n    </mat-stepper>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    @if (!firstStepper) {\n      <button mat-button mat-button (click)=\"previous()\" i18n>Prev</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\" i18n>Next</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial i18n>Save</button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i3$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress", "uploading"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseEditDialogComponent, decorators: [{
             type: Component,
@@ -1497,11 +1497,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         PricingItemComponent,
                         ScheduleItemComponent,
                         MatDialogClose,
-                    ], template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <mat-stepper #stepper (selectionChange)=\"onStepperChange($event)\">\n      <mat-step [editable]=\"true\">\n        <form #infoForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Basic info</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Name </mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Description </mat-label>\n              <textarea\n                matInput\n                type=\"text\"\n                [(ngModel)]=\"course.description\"\n                name=\"description\"\n                required\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"3\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\">\n              <mat-label i18n>Categories</mat-label>\n              <mat-select\n                multiple\n                name=\"id\"\n                [compareWith]=\"compareFn\"\n                [(ngModel)]=\"course.categories\"\n                #select=\"matSelect\"\n                (selectionChange)=\"onSelectionChange($event)\"\n              >\n                @for (item of categories; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Type</mat-label>\n              <mat-select name=\"type\" [(ngModel)]=\"course.type\">\n                @for (item of courseType; track item) {\n                  <mat-option [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (course.type.toString() !== 'ONLINE') {\n              <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n                <mat-label i18n>Classroom</mat-label>\n                <mat-select [(ngModel)]=\"course.classroom\" name=\"id\">\n                  @for (classroom of classrooms; track classroom) {\n                    <mat-option [value]=\"classroom.id\">\n                      <div class=\"flex gap-3\">\n                        <span>{{ classroom.name }}</span>\n                        <span> {{ classroom.address }}</span>\n                      </div>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            }\n          </div>\n          <div>\n            <div class=\"py-3\">\n              <h2 i18n>Media info</h2>\n            </div>\n            <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n              @for (item of course.media; track item; let i = $index) {\n                <rolatech-media-list-item [media]=\"item\" (mediaItemClick)=\"onImageClick(i)\"></rolatech-media-list-item>\n              }\n            </rolatech-media-list>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #detailForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Details</ng-template>\n          @for (item of course.details; track item) {\n            <rolatech-detail-item\n              [detail]=\"item\"\n              (upload)=\"onDetailMediaUpload($event)\"\n              (deleteMedia)=\"onDetailMediaDelete($event)\"\n              (save)=\"onDetailSave($event)\"\n              (delete)=\"onDetailDelete($event)\"\n            ></rolatech-detail-item>\n          }\n          <div class=\"mb-6\">\n            <button mat-button (click)=\"addDetail()\">\n              <mat-icon>add</mat-icon>\n              <span i18n>Add detail</span>\n            </button>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #pricingForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u4EF7\u683C</ng-template>\n          <div>\n            @for (item of course.pricing; track item) {\n              <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addPricing()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add price</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel i18n>Schedule</ng-template>\n          <div class=\"flex flex-col\">\n            @for (item of course.schedule; track item) {\n              <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addSchedule()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add schedule</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n    </mat-stepper>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    @if (!firstStepper) {\n      <button mat-button mat-button (click)=\"previous()\" i18n>Prev</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\" i18n>Next</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial i18n>Save</button>\n    }\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    ], template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <mat-stepper #stepper (selectionChange)=\"onStepperChange($event)\">\n      <mat-step [editable]=\"true\">\n        <form #infoForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Basic info</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Name </mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n> Description </mat-label>\n              <textarea\n                matInput\n                type=\"text\"\n                [(ngModel)]=\"course.description\"\n                name=\"description\"\n                required\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"3\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\">\n              <mat-label i18n>Categories</mat-label>\n              <mat-select\n                multiple\n                name=\"id\"\n                [compareWith]=\"compareFn\"\n                [(ngModel)]=\"course.categories\"\n                #select=\"matSelect\"\n                (selectionChange)=\"onSelectionChange($event)\"\n              >\n                @for (item of categories; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Type</mat-label>\n              <mat-select name=\"type\" [(ngModel)]=\"course.type\">\n                @for (item of courseType; track item) {\n                  <mat-option [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (course.type.toString() !== 'ONLINE') {\n              <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n                <mat-label i18n>Classroom</mat-label>\n                <mat-select [(ngModel)]=\"course.address\" name=\"id\">\n                  @for (address of address; track address) {\n                    <mat-option [value]=\"address.id\">\n                      <div class=\"flex gap-3\">\n                        <span>{{ address.name }}</span>\n                        <span> {{ address.address }}</span>\n                      </div>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            }\n          </div>\n          <div>\n            <div class=\"py-3\">\n              <h2 i18n>Media info</h2>\n            </div>\n            <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n              @for (item of course.media; track item; let i = $index) {\n                <rolatech-media-list-item [media]=\"item\" (mediaItemClick)=\"onImageClick(i)\"></rolatech-media-list-item>\n              }\n            </rolatech-media-list>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #detailForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel i18n>Details</ng-template>\n          @for (item of course.details; track item) {\n            <rolatech-detail-item\n              [detail]=\"item\"\n              (upload)=\"onDetailMediaUpload($event)\"\n              (deleteMedia)=\"onDetailMediaDelete($event)\"\n              (save)=\"onDetailSave($event)\"\n              (delete)=\"onDetailDelete($event)\"\n            ></rolatech-detail-item>\n          }\n          <div class=\"mb-6\">\n            <button mat-button (click)=\"addDetail()\">\n              <mat-icon>add</mat-icon>\n              <span i18n>Add detail</span>\n            </button>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #pricingForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u4EF7\u683C</ng-template>\n          <div>\n            @for (item of course.pricing; track item) {\n              <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addPricing()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add price</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel i18n>Schedule</ng-template>\n          <div class=\"flex flex-col\">\n            @for (item of course.schedule; track item) {\n              <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addSchedule()\">\n                <mat-icon>add</mat-icon>\n                <span i18n>Add schedule</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n    </mat-stepper>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    @if (!firstStepper) {\n      <button mat-button mat-button (click)=\"previous()\" i18n>Prev</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\" i18n>Next</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial i18n>Save</button>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: CategoryService }, { type: CourseService }, { type: i3$3.MatSnackBar }, { type: i1$2.MatDialog }] });
+                }] }] });
 
 class CourseDetailsComponent {
     constructor() {
@@ -2656,7 +2656,7 @@ class CourseManageInfoComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseManageInfoComponent, isStandalone: true, selector: "rolatech-course-manage-info", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex gap-2\">\n          <mat-form-field>\n            <mat-label i18n>Level 1</mat-label>\n            <mat-select\n              name=\"id\"\n              [compareWith]=\"compareParentFn\"\n              [(ngModel)]=\"parentCategory\"\n              (selectionChange)=\"onParentCategoryChange($event)\"\n            >\n              @for (category of categories; track category) {\n                <mat-option [value]=\"category\">{{ category.name }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n            <mat-label i18n>Level 2</mat-label>\n            <mat-select\n              multiple\n              name=\"id\"\n              [compareWith]=\"compareChildrenFn\"\n              [(ngModel)]=\"selectedChildrenCategories\"\n              #select=\"matSelect\"\n              (selectionChange)=\"onChildCategoryChange($event)\"\n            >\n              @for (item of childrenCategories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Type</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label i18n>Classroom</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.classroom\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"My\" i18n>\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"Purchased\" i18n>\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseManageInfoComponent, isStandalone: true, selector: "rolatech-course-manage-info", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex gap-2\">\n          <mat-form-field>\n            <mat-label i18n>Level 1</mat-label>\n            <mat-select\n              name=\"id\"\n              [compareWith]=\"compareParentFn\"\n              [(ngModel)]=\"parentCategory\"\n              (selectionChange)=\"onParentCategoryChange($event)\"\n            >\n              @for (category of categories; track category) {\n                <mat-option [value]=\"category\">{{ category.name }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n            <mat-label i18n>Level 2</mat-label>\n            <mat-select\n              multiple\n              name=\"id\"\n              [compareWith]=\"compareChildrenFn\"\n              [(ngModel)]=\"selectedChildrenCategories\"\n              #select=\"matSelect\"\n              (selectionChange)=\"onChildCategoryChange($event)\"\n            >\n              @for (item of childrenCategories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Type</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label i18n>Classroom</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.address\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"My\" i18n>\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"Purchased\" i18n>\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageInfoComponent, decorators: [{
             type: Component,
@@ -2670,7 +2670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         MatButtonModule,
                         ToolbarComponent,
                         CourseManageContentComponent,
-                    ], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex gap-2\">\n          <mat-form-field>\n            <mat-label i18n>Level 1</mat-label>\n            <mat-select\n              name=\"id\"\n              [compareWith]=\"compareParentFn\"\n              [(ngModel)]=\"parentCategory\"\n              (selectionChange)=\"onParentCategoryChange($event)\"\n            >\n              @for (category of categories; track category) {\n                <mat-option [value]=\"category\">{{ category.name }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n            <mat-label i18n>Level 2</mat-label>\n            <mat-select\n              multiple\n              name=\"id\"\n              [compareWith]=\"compareChildrenFn\"\n              [(ngModel)]=\"selectedChildrenCategories\"\n              #select=\"matSelect\"\n              (selectionChange)=\"onChildCategoryChange($event)\"\n            >\n              @for (item of childrenCategories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Type</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label i18n>Classroom</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.classroom\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"My\" i18n>\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"Purchased\" i18n>\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex gap-2\">\n          <mat-form-field>\n            <mat-label i18n>Level 1</mat-label>\n            <mat-select\n              name=\"id\"\n              [compareWith]=\"compareParentFn\"\n              [(ngModel)]=\"parentCategory\"\n              (selectionChange)=\"onParentCategoryChange($event)\"\n            >\n              @for (category of categories; track category) {\n                <mat-option [value]=\"category\">{{ category.name }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n            <mat-label i18n>Level 2</mat-label>\n            <mat-select\n              multiple\n              name=\"id\"\n              [compareWith]=\"compareChildrenFn\"\n              [(ngModel)]=\"selectedChildrenCategories\"\n              #select=\"matSelect\"\n              (selectionChange)=\"onChildCategoryChange($event)\"\n            >\n              @for (item of childrenCategories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Type</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label i18n>Classroom</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.address\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"My\" i18n>\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"Purchased\" i18n>\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 const SIZE = 10 * 1024 * 1024; // file slice size 10MB
@@ -3362,7 +3362,7 @@ class CourseManageIndexComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseManageIndexComponent, isStandalone: true, selector: "rolatech-course-manage-index", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Course\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Create</span>\n    </button>\n    <a routerLink=\"./reviews\" class=\"hover:underline hover:text-orange-600 text-sm font-medium\" i18n>Reviews</a>\n  </div>\n</rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <table mat-table [dataSource]=\"courses\">\n    <!-- name Column -->\n    <ng-container matColumnDef=\"name\" sticky>\n      <th mat-header-cell *matHeaderCellDef i18n>Title</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.name }}</td>\n    </ng-container>\n    <!-- status Column -->\n    <ng-container matColumnDef=\"status\">\n      <th mat-header-cell *matHeaderCellDef i18n>Status</th>\n      <td mat-cell *matCellDef=\"let item\">{{ status[item.status] }}</td>\n    </ng-container>\n    <!-- createdAt Column -->\n    <ng-container matColumnDef=\"createdAt\">\n      <th mat-header-cell *matHeaderCellDef i18n>Created At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.createdAt }}</td>\n    </ng-container>\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\" stickyEnd>\n      <th mat-header-cell *matHeaderCellDef class=\"actions\" i18n>Actions</th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"menu\"\n          aria-label=\"Example icon-button with a menu\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n          @if (item.status === 'ACTIVE') {\n            <button mat-menu-item (click)=\"start(item)\">\n              <span i18n> Start </span>\n            </button>\n          }\n          @if (item.status === 'STARTED') {\n            <button mat-menu-item (click)=\"stop(item)\">\n              <span i18n> Stop </span>\n            </button>\n          }\n          @if (item.status !== 'ACTIVE') {\n            <button mat-menu-item (click)=\"delete(item)\">\n              <span i18n> Delete </span>\n            </button>\n          }\n          <button mat-menu-item routerLink=\"./{{ item.id }}/manage/info\">\n            <span i18n> More... </span>\n          </button>\n        </mat-menu>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      routerLink=\"./{{ row.id }}/manage/info\"\n      class=\"hover:bg-[--rt-raised-background] cursor-pointer\"\n    ></tr>\n  </table>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseManageIndexComponent, isStandalone: true, selector: "rolatech-course-manage-index", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Course\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Create</span>\n    </button>\n    <a routerLink=\"./reviews\" class=\"hover:underline hover:text-orange-600 text-sm font-medium\" i18n>Reviews</a>\n  </div>\n</rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <table mat-table [dataSource]=\"courses\">\n    <!-- name Column -->\n    <ng-container matColumnDef=\"name\" sticky>\n      <th mat-header-cell *matHeaderCellDef i18n>Title</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.name }}</td>\n    </ng-container>\n    <!-- status Column -->\n    <ng-container matColumnDef=\"status\">\n      <th mat-header-cell *matHeaderCellDef i18n>Status</th>\n      <td mat-cell *matCellDef=\"let item\">{{ status[item.status] }}</td>\n    </ng-container>\n    <!-- createdAt Column -->\n    <ng-container matColumnDef=\"createdAt\">\n      <th mat-header-cell *matHeaderCellDef i18n>Created At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.createdAt }}</td>\n    </ng-container>\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\" stickyEnd>\n      <th mat-header-cell *matHeaderCellDef class=\"actions\" i18n>Actions</th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"menu\"\n          aria-label=\"Example icon-button with a menu\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n          @if (item.status === 'ACTIVE') {\n            <button mat-menu-item (click)=\"start(item)\">\n              <span i18n> Start </span>\n            </button>\n          }\n          @if (item.status === 'STARTED') {\n            <button mat-menu-item (click)=\"stop(item)\">\n              <span i18n> Stop </span>\n            </button>\n          }\n          @if (item.status !== 'ACTIVE') {\n            <button mat-menu-item (click)=\"delete(item)\">\n              <span i18n> Delete </span>\n            </button>\n          }\n          <button mat-menu-item routerLink=\"./{{ item.id }}/manage/info\">\n            <span i18n> More... </span>\n          </button>\n        </mat-menu>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      routerLink=\"./{{ row.id }}/manage/info\"\n      class=\"hover:bg-[--rt-raised-background] cursor-pointer\"\n    ></tr>\n  </table>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageIndexComponent, decorators: [{
             type: Component,
@@ -3509,7 +3509,7 @@ class CourseManageCreateComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageCreateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseManageCreateComponent, isStandalone: true, selector: "rolatech-course-manage-create", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"\u521B\u5EFA\u8BFE\u7A0B\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section class=\"sample-app-content\">\n    <form #courseForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex gap-3\">\n          <mat-form-field appearance=\"fill\" required>\n            <mat-label i18n>Level 1</mat-label>\n            <mat-select name=\"id\" [(ngModel)]=\"parentCategory\" (selectionChange)=\"onParentCategoryChange($event)\">\n              @for (item of categories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\" required>\n            <mat-label i18n>Level 2</mat-label>\n            <mat-select multiple name=\"id\" #select=\"matSelect\" (selectionChange)=\"onChildCategoryChange($event)\">\n              @for (item of childrenCategories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Type</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label i18n>Classroom</mat-label>\n            <mat-select [(ngModel)]=\"course.classroom\" name=\"id\" required>\n              @for (classroom of classrooms; track classroom) {\n                <mat-option [value]=\"classroom\" (selectionChange)=\"onClassroomSelected($event)\">\n                  <div class=\"flex gap-3\">\n                    <span>{{ classroom.name }}</span>\n                    <span> {{ classroom.address }}</span>\n                  </div>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n      </div>\n      <div>\n        <div class=\"py-3\">\n          <div class=\"text-xl font-medium\" i18n>Media info</div>\n          <div class=\"text-sm font-thin text-gray-500\">\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B</div>\n        </div>\n        <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n          @for (item of media; track item; let i = $index) {\n            <rolatech-media-list-item\n              [media]=\"item\"\n              (mediaItemClick)=\"onImageClick(i)\"\n              (deleteMedia)=\"onMediaDelete($event)\"\n            ></rolatech-media-list-item>\n          }\n        </rolatech-media-list>\n      </div>\n    </form>\n  </section>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Create</button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress", "uploading"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CourseManageCreateComponent, isStandalone: true, selector: "rolatech-course-manage-create", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"\u521B\u5EFA\u8BFE\u7A0B\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section class=\"sample-app-content\">\n    <form #courseForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex gap-3\">\n          <mat-form-field appearance=\"fill\" required>\n            <mat-label i18n>Level 1</mat-label>\n            <mat-select name=\"id\" [(ngModel)]=\"parentCategory\" (selectionChange)=\"onParentCategoryChange($event)\">\n              @for (item of categories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\" required>\n            <mat-label i18n>Level 2</mat-label>\n            <mat-select multiple name=\"id\" #select=\"matSelect\" (selectionChange)=\"onChildCategoryChange($event)\">\n              @for (item of childrenCategories; track item) {\n                <mat-option [value]=\"item\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Type</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label i18n>Classroom</mat-label>\n            <mat-select [(ngModel)]=\"course.classroom\" name=\"id\" required>\n              @for (classroom of classrooms; track classroom) {\n                <mat-option [value]=\"classroom\" (selectionChange)=\"onClassroomSelected($event)\">\n                  <div class=\"flex gap-3\">\n                    <span>{{ classroom.name }}</span>\n                    <span> {{ classroom.address }}</span>\n                  </div>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n      </div>\n      <div>\n        <div class=\"py-3\">\n          <div class=\"text-xl font-medium\" i18n>Media info</div>\n          <div class=\"text-sm font-thin text-gray-500\">\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B</div>\n        </div>\n        <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n          @for (item of media; track item; let i = $index) {\n            <rolatech-media-list-item\n              [media]=\"item\"\n              (mediaItemClick)=\"onImageClick(i)\"\n              (deleteMedia)=\"onMediaDelete($event)\"\n            ></rolatech-media-list-item>\n          }\n        </rolatech-media-list>\n      </div>\n    </form>\n  </section>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Create</button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress", "uploading"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageCreateComponent, decorators: [{
             type: Component,
@@ -3598,7 +3598,7 @@ class CourseManageApplicationComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageApplicationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: CourseManageApplicationComponent, isStandalone: true, selector: "rolatech-course-manage-application", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Course applications\"></rolatech-toolbar>\n<table mat-table [dataSource]=\"dataSource\">\n  <!-- name Column -->\n  <ng-container matColumnDef=\"name\">\n    <th mat-header-cell *matHeaderCellDef i18n>Title</th>\n    <td mat-cell *matCellDef=\"let item\">{{ item.title }}</td>\n  </ng-container>\n\n  <!-- status Column -->\n  <ng-container matColumnDef=\"status\">\n    <th mat-header-cell *matHeaderCellDef i18n>Status</th>\n    <td mat-cell *matCellDef=\"let item\">{{ status[item.status] }}</td>\n  </ng-container>\n\n  <!-- createdAt Column -->\n  <ng-container matColumnDef=\"createdAt\">\n    <th mat-header-cell *matHeaderCellDef i18n>Created At</th>\n    <td mat-cell *matCellDef=\"let item\">{{ item.createdAt }}</td>\n  </ng-container>\n\n  <!-- actions Column -->\n  <ng-container matColumnDef=\"actions\" stickyEnd>\n    <th mat-header-cell *matHeaderCellDef class=\"actions\" i18n>Details</th>\n    <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n      <a routerLink=\"/console/courses/applications/{{ item.id }}\" class=\"underline\"> Details </a>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"pageEvent = find($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem}.mat-mdc-header-cell.actions{text-align:right;max-width:180px;width:180px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: CourseManageApplicationComponent, isStandalone: true, selector: "rolatech-course-manage-application", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Course applications\"></rolatech-toolbar>\n<table mat-table [dataSource]=\"dataSource\">\n  <!-- name Column -->\n  <ng-container matColumnDef=\"name\">\n    <th mat-header-cell *matHeaderCellDef i18n>Title</th>\n    <td mat-cell *matCellDef=\"let item\">{{ item.title }}</td>\n  </ng-container>\n\n  <!-- status Column -->\n  <ng-container matColumnDef=\"status\">\n    <th mat-header-cell *matHeaderCellDef i18n>Status</th>\n    <td mat-cell *matCellDef=\"let item\">{{ status[item.status] }}</td>\n  </ng-container>\n\n  <!-- createdAt Column -->\n  <ng-container matColumnDef=\"createdAt\">\n    <th mat-header-cell *matHeaderCellDef i18n>Created At</th>\n    <td mat-cell *matCellDef=\"let item\">{{ item.createdAt }}</td>\n  </ng-container>\n\n  <!-- actions Column -->\n  <ng-container matColumnDef=\"actions\" stickyEnd>\n    <th mat-header-cell *matHeaderCellDef class=\"actions\" i18n>Details</th>\n    <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n      <a routerLink=\"/console/courses/applications/{{ item.id }}\" class=\"underline\"> Details </a>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"pageEvent = find($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem}.mat-mdc-header-cell.actions{text-align:right;max-width:180px;width:180px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageApplicationComponent, decorators: [{
             type: Component,
@@ -3654,7 +3654,7 @@ class CourseManageReviewComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageReviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: CourseManageReviewComponent, isStandalone: true, selector: "rolatech-course-manage-review", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Reviews\"></rolatech-toolbar>\n<div class=\"p-3\">\n  <table mat-table [dataSource]=\"dataSource\">\n    <!-- name Column -->\n    <ng-container matColumnDef=\"name\">\n      <th mat-header-cell *matHeaderCellDef i18n>Title</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.course.name }}</td>\n    </ng-container>\n\n    <!-- status Column -->\n    <ng-container matColumnDef=\"status\">\n      <th mat-header-cell *matHeaderCellDef i18n>Status</th>\n      <td mat-cell *matCellDef=\"let item\">{{ status[item.status] }}</td>\n    </ng-container>\n\n    <!-- updatedAt Column -->\n    <ng-container matColumnDef=\"updatedAt\">\n      <th mat-header-cell *matHeaderCellDef i18n>Updated At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.updatedAt }}</td>\n    </ng-container>\n\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef class=\"actions\" i18n>Details</th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <a routerLink=\"/console/courses/{{ item.course.id }}/manage/info\" class=\"underline\" i18n> Details </a>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      routerLink=\"/console/courses/{{ row.course.id }}/manage/info\"\n      class=\"hover:bg-[--rt-raised-background] cursor-pointer\"\n    ></tr>\n  </table>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem}.mat-mdc-header-cell.actions{text-align:right;max-width:180px;width:180px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: CourseManageReviewComponent, isStandalone: true, selector: "rolatech-course-manage-review", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Reviews\"></rolatech-toolbar>\n<div class=\"p-3\">\n  <table mat-table [dataSource]=\"dataSource\">\n    <!-- name Column -->\n    <ng-container matColumnDef=\"name\">\n      <th mat-header-cell *matHeaderCellDef i18n>Title</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.course.name }}</td>\n    </ng-container>\n\n    <!-- status Column -->\n    <ng-container matColumnDef=\"status\">\n      <th mat-header-cell *matHeaderCellDef i18n>Status</th>\n      <td mat-cell *matCellDef=\"let item\">{{ status[item.status] }}</td>\n    </ng-container>\n\n    <!-- updatedAt Column -->\n    <ng-container matColumnDef=\"updatedAt\">\n      <th mat-header-cell *matHeaderCellDef i18n>Updated At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.updatedAt }}</td>\n    </ng-container>\n\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef class=\"actions\" i18n>Details</th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <a routerLink=\"/console/courses/{{ item.course.id }}/manage/info\" class=\"underline\" i18n> Details </a>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      routerLink=\"/console/courses/{{ row.course.id }}/manage/info\"\n      class=\"hover:bg-[--rt-raised-background] cursor-pointer\"\n    ></tr>\n  </table>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem}.mat-mdc-header-cell.actions{text-align:right;max-width:180px;width:180px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CourseManageReviewComponent, decorators: [{
             type: Component,