npm - @rolatech/angular-course - Versions diffs - 17.3.29 → 17.4.0 - Mend

@rolatech/angular-course 17.3.29 → 17.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/fesm2022/{rolatech-angular-course-rolatech-angular-course-AX5M1HKZ.mjs → rolatech-angular-course-rolatech-angular-course-DxJB5PFG.mjs} RENAMED Viewed

@@ -10,7 +10,7 @@ import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$3 from '@angular/material/dialog';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
-import { ImagePreviewDialogComponent, ThumbnailComponent, InputComponent, IconButtonComponent, AngularComponentsModule, ImageComponent, MediaListComponent, MediaListItemComponent, BaseComponent, AppContainerComponent, ListComponent, ConfirmationDialogComponent, ToolbarComponent } from '@rolatech/angular-components';
+import { ImagePreviewDialogComponent, ThumbnailComponent, InputComponent, IconButtonComponent, AngularComponentsModule, ImageComponent, MediaListComponent, MediaListItemComponent, BaseComponent, ContainerComponent, ListComponent, ConfirmationDialogComponent, ToolbarComponent } from '@rolatech/angular-components';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$1 from '@angular/material/expansion';
@@ -458,10 +458,10 @@ class CourseService extends BaseService {
             withCredentials: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -481,10 +481,10 @@ class CourseSectionService extends BaseService {
             withCredentials: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -516,10 +516,10 @@ class CategoryService extends BaseService {
             withCredentials: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CategoryService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CategoryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CategoryService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CategoryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CategoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CategoryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -537,10 +537,10 @@ function provideAngulaCourse() {
 }
 class CoursePreviewComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CoursePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: CoursePreviewComponent, isStandalone: true, selector: "rolatech-course-preview", ngImport: i0, template: "<p>course-preview works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CoursePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CoursePreviewComponent, isStandalone: true, selector: "rolatech-course-preview", ngImport: i0, template: "<p>course-preview works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CoursePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CoursePreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-preview', standalone: true, imports: [], template: "<p>course-preview works!</p>\n" }]
         }] });
@@ -554,10 +554,10 @@ class CourseInfoComponent {
             return this.course();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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 text-black-light flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\">\u4E3B\u8BB2\u6559\u5E08: </span>\n          <a class=\"ml-2 underline text-orange-600 text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\">\u6700\u540E\u7F16\u8F91: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- \u63CF\u8FF0 -->\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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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 text-black-light flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\">\u4E3B\u8BB2\u6559\u5E08: </span>\n          <a class=\"ml-2 underline text-orange-600 text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\">\u6700\u540E\u7F16\u8F91: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- \u63CF\u8FF0 -->\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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-info', standalone: true, imports: [MatIconModule, RouterLink, 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 text-black-light flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\">\u4E3B\u8BB2\u6559\u5E08: </span>\n          <a class=\"ml-2 underline text-orange-600 text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\">\u6700\u540E\u7F16\u8F91: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- \u63CF\u8FF0 -->\n  <div class=\"mb-3\">\n    {{ course().description }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
         }] });
@@ -583,10 +583,10 @@ class CourseMediaComponent {
         });
         dialogRef.afterClosed().subscribe((result) => { });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseMediaComponent, isStandalone: true, selector: "rolatech-course-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (media()) {\n  @if (min()) {\n    <div class=\"md:w-80 object-cover aspect-video bg-[--rt-10-percent-layer] rounded-lg\">\n      @if (media()) {\n        <rolatech-thumbnail [src]=\"media()[0].url\" size=\"small\"></rolatech-thumbnail>\n      }\n    </div>\n  } @else {\n    <div>\n      <div class=\"object-cover aspect-video bg-[--rt-10-percent-layer]\">\n        <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      @for (item of media(); track $index) {\n        <div\n          class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\"\n          (click)=\"mediaIndex = $index\"\n          [ngClass]=\"mediaIndex === $index ? '' : 'opacity-30'\"\n        >\n          <rolatech-thumbnail [src]=\"item.url\" size=\"small\"></rolatech-thumbnail>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseMediaComponent, isStandalone: true, selector: "rolatech-course-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (media()) {\n  @if (min()) {\n    <div class=\"md:w-80 object-cover aspect-video bg-[--rt-10-percent-layer] rounded-lg\">\n      @if (media()) {\n        <rolatech-thumbnail [src]=\"media()[0].url\" size=\"small\"></rolatech-thumbnail>\n      }\n    </div>\n  } @else {\n    <div>\n      <div class=\"object-cover aspect-video bg-[--rt-10-percent-layer]\">\n        <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      @for (item of media(); track $index) {\n        <div\n          class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\"\n          (click)=\"mediaIndex = $index\"\n          [ngClass]=\"mediaIndex === $index ? '' : 'opacity-30'\"\n        >\n          <rolatech-thumbnail [src]=\"item.url\" size=\"small\"></rolatech-thumbnail>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseMediaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-media', standalone: true, imports: [NgClass, ThumbnailComponent], template: "@if (media()) {\n  @if (min()) {\n    <div class=\"md:w-80 object-cover aspect-video bg-[--rt-10-percent-layer] rounded-lg\">\n      @if (media()) {\n        <rolatech-thumbnail [src]=\"media()[0].url\" size=\"small\"></rolatech-thumbnail>\n      }\n    </div>\n  } @else {\n    <div>\n      <div class=\"object-cover aspect-video bg-[--rt-10-percent-layer]\">\n        <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      @for (item of media(); track $index) {\n        <div\n          class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\"\n          (click)=\"mediaIndex = $index\"\n          [ngClass]=\"mediaIndex === $index ? '' : 'opacity-30'\"\n        >\n          <rolatech-thumbnail [src]=\"item.url\" size=\"small\"></rolatech-thumbnail>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
         }] });
@@ -595,10 +595,10 @@ class CoursePricingComponent {
     constructor() {
         this.pricing = input([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CoursePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CoursePricingComponent, isStandalone: true, selector: "rolatech-course-pricing", inputs: { pricing: { classPropertyName: "pricing", publicName: "pricing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (pricing()) {\n  <div class=\"py-3\">\n    <div class=\"text-lg font-medium py-2\">\u4EF7\u683C</div>\n    @for (item of pricing(); track $index) {\n      <div>\n        <span>{{ item.min }} \u81F3 {{ item.max }}\u4EBA</span>\n        <span class=\"ml-3\">{{ item.total / 100 }}\u5143</span>\n      </div>\n    }\n  </div>\n}\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CoursePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CoursePricingComponent, isStandalone: true, selector: "rolatech-course-pricing", inputs: { pricing: { classPropertyName: "pricing", publicName: "pricing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (pricing()) {\n  <div class=\"py-3\">\n    <div class=\"text-lg font-medium py-2\">\u4EF7\u683C</div>\n    @for (item of pricing(); track $index) {\n      <div>\n        <span>{{ item.min }} \u81F3 {{ item.max }}\u4EBA</span>\n        <span class=\"ml-3\">{{ item.total / 100 }}\u5143</span>\n      </div>\n    }\n  </div>\n}\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CoursePricingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CoursePricingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-pricing', standalone: true, template: "@if (pricing()) {\n  <div class=\"py-3\">\n    <div class=\"text-lg font-medium py-2\">\u4EF7\u683C</div>\n    @for (item of pricing(); track $index) {\n      <div>\n        <span>{{ item.min }} \u81F3 {{ item.max }}\u4EBA</span>\n        <span class=\"ml-3\">{{ item.total / 100 }}\u5143</span>\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
@@ -620,10 +620,10 @@ class CourseActionComponent {
     onCheckout(course) {
         this.checkout.emit(course);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: CourseActionComponent, isStandalone: true, selector: "rolatech-course-action", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cart: "cart", wish: "wish", checkout: "checkout" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <!-- <a class=\"p-3 bg-orange-600 text-white text-center mt-3\" target=\"_blank\" (click)=\"onCart(course)\">\u52A0\u5165\u8D2D\u7269\u8F66</a> -->\n  <a mat-flat-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onCheckout(course())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  <a mat-stroked-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onWish(course())\">{{\n    inWishList() ? '\u79FB\u9664\u6536\u85CF' : '\u52A0\u5165\u6536\u85CF'\n  }}</a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: CourseActionComponent, isStandalone: true, selector: "rolatech-course-action", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cart: "cart", wish: "wish", checkout: "checkout" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <!-- <a class=\"p-3 bg-orange-600 text-white text-center mt-3\" target=\"_blank\" (click)=\"onCart(course)\">\u52A0\u5165\u8D2D\u7269\u8F66</a> -->\n  <a mat-flat-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onCheckout(course())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  <a mat-stroked-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onWish(course())\">{{\n    inWishList() ? '\u79FB\u9664\u6536\u85CF' : '\u52A0\u5165\u6536\u85CF'\n  }}</a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseActionComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'rolatech-course-action', imports: [MatButtonModule], template: "<div class=\"flex flex-col\">\n  <!-- <a class=\"p-3 bg-orange-600 text-white text-center mt-3\" target=\"_blank\" (click)=\"onCart(course)\">\u52A0\u5165\u8D2D\u7269\u8F66</a> -->\n  <a mat-flat-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onCheckout(course())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  <a mat-stroked-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onWish(course())\">{{\n    inWishList() ? '\u79FB\u9664\u6536\u85CF' : '\u52A0\u5165\u6536\u85CF'\n  }}</a>\n</div>\n" }]
         }] });
@@ -636,10 +636,10 @@ class CourseScheduleComponent {
         // this.formatSchedule();
     }
     formatSchedule() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseScheduleComponent, isStandalone: true, selector: "rolatech-course-schedule", inputs: { schedule: { classPropertyName: "schedule", publicName: "schedule", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (schedule()) {\n  <div class=\"py-3\" id=\"schedule\">\n    <div class=\"text-xl font-medium py-2\">\u8BFE\u8868</div>\n    @for (item of schedule(); track $index) {\n      <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n        <mat-expansion-panel-header class=\"bg-red\">\n          <mat-panel-title>\n            <span class=\"text-[1rem]\">{{ item.title }}</span>\n          </mat-panel-title>\n          <mat-icon\n            class=\"toggle-icon\"\n            style=\"transition-duration:.5s;transform: {{ panel.expanded ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n            >expand_more</mat-icon\n          >\n        </mat-expansion-panel-header>\n        <div>\n          <div class=\"text-gray-600 pt-2 text-sm\">\n            <span>{{ item.startAt }} - {{ item.endAt }}</span>\n          </div>\n          <div class=\"py-3\">\n            <div>{{ item.content }}</div>\n          </div>\n        </div>\n      </mat-expansion-panel>\n    }\n  </div>\n}\n", styles: ["mat-expansion-panel{margin:0!important}.mat-expansion-panel-header{padding:0 16px}.mat-expansion-panel-header{height:56px!important}.mat-expansion-panel .mat-expansion-panel-header{margin-bottom:8px;height:44px!important;padding:0 12px!important}.mat-expansion-panel-header .mat-expanded{height:56px!important}mat-expansion-panel .mat-expansion-panel-body{padding:0 8px 8px 4px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseScheduleComponent, isStandalone: true, selector: "rolatech-course-schedule", inputs: { schedule: { classPropertyName: "schedule", publicName: "schedule", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (schedule()) {\n  <div class=\"py-3\" id=\"schedule\">\n    <div class=\"text-xl font-medium py-2\">\u8BFE\u8868</div>\n    @for (item of schedule(); track $index) {\n      <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n        <mat-expansion-panel-header class=\"bg-red\">\n          <mat-panel-title>\n            <span class=\"text-[1rem]\">{{ item.title }}</span>\n          </mat-panel-title>\n          <mat-icon\n            class=\"toggle-icon\"\n            style=\"transition-duration:.5s;transform: {{ panel.expanded ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n            >expand_more</mat-icon\n          >\n        </mat-expansion-panel-header>\n        <div>\n          <div class=\"text-gray-600 pt-2 text-sm\">\n            <span>{{ item.startAt }} - {{ item.endAt }}</span>\n          </div>\n          <div class=\"py-3\">\n            <div>{{ item.content }}</div>\n          </div>\n        </div>\n      </mat-expansion-panel>\n    }\n  </div>\n}\n", styles: ["mat-expansion-panel{margin:0!important}.mat-expansion-panel-header{padding:0 16px}.mat-expansion-panel-header{height:56px!important}.mat-expansion-panel .mat-expansion-panel-header{margin-bottom:8px;height:44px!important;padding:0 12px!important}.mat-expansion-panel-header .mat-expanded{height:56px!important}mat-expansion-panel .mat-expansion-panel-body{padding:0 8px 8px 4px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseScheduleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseScheduleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-schedule', standalone: true, imports: [MatExpansionModule, MatIconModule], template: "@if (schedule()) {\n  <div class=\"py-3\" id=\"schedule\">\n    <div class=\"text-xl font-medium py-2\">\u8BFE\u8868</div>\n    @for (item of schedule(); track $index) {\n      <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n        <mat-expansion-panel-header class=\"bg-red\">\n          <mat-panel-title>\n            <span class=\"text-[1rem]\">{{ item.title }}</span>\n          </mat-panel-title>\n          <mat-icon\n            class=\"toggle-icon\"\n            style=\"transition-duration:.5s;transform: {{ panel.expanded ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n            >expand_more</mat-icon\n          >\n        </mat-expansion-panel-header>\n        <div>\n          <div class=\"text-gray-600 pt-2 text-sm\">\n            <span>{{ item.startAt }} - {{ item.endAt }}</span>\n          </div>\n          <div class=\"py-3\">\n            <div>{{ item.content }}</div>\n          </div>\n        </div>\n      </mat-expansion-panel>\n    }\n  </div>\n}\n", styles: ["mat-expansion-panel{margin:0!important}.mat-expansion-panel-header{padding:0 16px}.mat-expansion-panel-header{height:56px!important}.mat-expansion-panel .mat-expansion-panel-header{margin-bottom:8px;height:44px!important;padding:0 12px!important}.mat-expansion-panel-header .mat-expanded{height:56px!important}mat-expansion-panel .mat-expansion-panel-body{padding:0 8px 8px 4px!important}\n"] }]
         }] });
@@ -658,10 +658,10 @@ class CourseSectionsComponent {
     onCheckout(section, lecture) {
         this.checkout.emit({ section, lecture });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseSectionsComponent, isStandalone: true, selector: "rolatech-course-sections", inputs: { purchased: { classPropertyName: "purchased", publicName: "purchased", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "section", checkout: "checkout" }, ngImport: i0, template: "@if (sections()) {\n  <div id=\"sections()\">\n    <div class=\"text-2xl font-medium py-3 lg:pt-0\">\u8BFE\u7A0B\u5185\u5BB9</div>\n    <mat-accordion multi>\n      @for (item of sections(); track $index) {\n        <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <span class=\"text-[1rem]\">{{ item.title }}</span>\n            </mat-panel-title>\n            <mat-icon\n              class=\"toggle-icon\"\n              style=\"transition-duration:.5s;transform: {{ panel.expanded ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n              >expand_more</mat-icon\n            >\n          </mat-expansion-panel-header>\n          <div>\n            @for (lecture of item.lectures; track $index) {\n              <div class=\"flex items-center justify-between py-1\">\n                @if (lecture.item && lecture.type === 'VIDEO') {\n                  <div class=\"flex items-center gap-3\">\n                    <mat-icon>live_tv</mat-icon>\n                    <span class=\"text-md\"> {{ lecture.title }}</span>\n                  </div>\n                  <div>\n                    @if (purchased()) {\n                      <a\n                        class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                        (click)=\"onSection(item, lecture)\"\n                        >\u64AD\u653E</a\n                      >\n                    } @else {\n                      @if (lecture.item.canBePreviewed) {\n                        <a\n                          class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                          (click)=\"onSection(item, lecture)\"\n                          >\u8BD5\u770B</a\n                        >\n                      } @else {\n                        <a\n                          class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                          (click)=\"onCheckout(item, lecture)\"\n                          >\u8D2D\u4E70</a\n                        >\n                      }\n                    }\n\n                    <a class=\"text-gray-500 inline-block w-[60px] text-right\">{{ lecture.item.duration | duration }}</a>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </mat-expansion-panel>\n      }\n    </mat-accordion>\n  </div>\n}\n", styles: ["mat-expansion-panel{margin:0!important}.mat-expansion-panel-header{padding:0 16px}.mat-expansion-panel-header{height:56px!important}.mat-expansion-panel .mat-expansion-panel-header{margin-bottom:8px;height:44px!important;padding:0 12px!important}.mat-expansion-panel-header .mat-expanded{height:56px!important}mat-expansion-panel .mat-expansion-panel-body{padding:0 8px 8px 4px!important}mat-expansion-panel mat-icon{transform:scale(.9)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "ngmodule", type: MatCheckboxModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseSectionsComponent, isStandalone: true, selector: "rolatech-course-sections", inputs: { purchased: { classPropertyName: "purchased", publicName: "purchased", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "section", checkout: "checkout" }, ngImport: i0, template: "@if (sections()) {\n  <div id=\"sections()\">\n    <div class=\"text-2xl font-medium py-3 lg:pt-0\">\u8BFE\u7A0B\u5185\u5BB9</div>\n    <mat-accordion multi>\n      @for (item of sections(); track $index) {\n        <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <span class=\"text-[1rem]\">{{ item.title }}</span>\n            </mat-panel-title>\n            <mat-icon\n              class=\"toggle-icon\"\n              style=\"transition-duration:.5s;transform: {{ panel.expanded ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n              >expand_more</mat-icon\n            >\n          </mat-expansion-panel-header>\n          <div>\n            @for (lecture of item.lectures; track $index) {\n              <div class=\"flex items-center justify-between py-1\">\n                @if (lecture.item && lecture.type === 'VIDEO') {\n                  <div class=\"flex items-center gap-3\">\n                    <mat-icon>live_tv</mat-icon>\n                    <span class=\"text-md\"> {{ lecture.title }}</span>\n                  </div>\n                  <div>\n                    @if (purchased()) {\n                      <a\n                        class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                        (click)=\"onSection(item, lecture)\"\n                        >\u64AD\u653E</a\n                      >\n                    } @else {\n                      @if (lecture.item.canBePreviewed) {\n                        <a\n                          class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                          (click)=\"onSection(item, lecture)\"\n                          >\u8BD5\u770B</a\n                        >\n                      } @else {\n                        <a\n                          class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                          (click)=\"onCheckout(item, lecture)\"\n                          >\u8D2D\u4E70</a\n                        >\n                      }\n                    }\n\n                    <a class=\"text-gray-500 inline-block w-[60px] text-right\">{{ lecture.item.duration | duration }}</a>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </mat-expansion-panel>\n      }\n    </mat-accordion>\n  </div>\n}\n", styles: ["mat-expansion-panel{margin:0!important}.mat-expansion-panel-header{padding:0 16px}.mat-expansion-panel-header{height:56px!important}.mat-expansion-panel .mat-expansion-panel-header{margin-bottom:8px;height:44px!important;padding:0 12px!important}.mat-expansion-panel-header .mat-expanded{height:56px!important}mat-expansion-panel .mat-expansion-panel-body{padding:0 8px 8px 4px!important}mat-expansion-panel mat-icon{transform:scale(.9)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "ngmodule", type: MatCheckboxModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-sections', encapsulation: ViewEncapsulation.None, standalone: true, imports: [MatExpansionModule, MatIconModule, DurationPipe, MatCheckboxModule], template: "@if (sections()) {\n  <div id=\"sections()\">\n    <div class=\"text-2xl font-medium py-3 lg:pt-0\">\u8BFE\u7A0B\u5185\u5BB9</div>\n    <mat-accordion multi>\n      @for (item of sections(); track $index) {\n        <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <span class=\"text-[1rem]\">{{ item.title }}</span>\n            </mat-panel-title>\n            <mat-icon\n              class=\"toggle-icon\"\n              style=\"transition-duration:.5s;transform: {{ panel.expanded ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n              >expand_more</mat-icon\n            >\n          </mat-expansion-panel-header>\n          <div>\n            @for (lecture of item.lectures; track $index) {\n              <div class=\"flex items-center justify-between py-1\">\n                @if (lecture.item && lecture.type === 'VIDEO') {\n                  <div class=\"flex items-center gap-3\">\n                    <mat-icon>live_tv</mat-icon>\n                    <span class=\"text-md\"> {{ lecture.title }}</span>\n                  </div>\n                  <div>\n                    @if (purchased()) {\n                      <a\n                        class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                        (click)=\"onSection(item, lecture)\"\n                        >\u64AD\u653E</a\n                      >\n                    } @else {\n                      @if (lecture.item.canBePreviewed) {\n                        <a\n                          class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                          (click)=\"onSection(item, lecture)\"\n                          >\u8BD5\u770B</a\n                        >\n                      } @else {\n                        <a\n                          class=\"text-sm mr-1 underline underline-offset-2 cursor-pointer text-orange-600\"\n                          (click)=\"onCheckout(item, lecture)\"\n                          >\u8D2D\u4E70</a\n                        >\n                      }\n                    }\n\n                    <a class=\"text-gray-500 inline-block w-[60px] text-right\">{{ lecture.item.duration | duration }}</a>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </mat-expansion-panel>\n      }\n    </mat-accordion>\n  </div>\n}\n", styles: ["mat-expansion-panel{margin:0!important}.mat-expansion-panel-header{padding:0 16px}.mat-expansion-panel-header{height:56px!important}.mat-expansion-panel .mat-expansion-panel-header{margin-bottom:8px;height:44px!important;padding:0 12px!important}.mat-expansion-panel-header .mat-expanded{height:56px!important}mat-expansion-panel .mat-expansion-panel-body{padding:0 8px 8px 4px!important}mat-expansion-panel mat-icon{transform:scale(.9)}\n"] }]
         }] });
@@ -702,10 +702,10 @@ class CourseSectionItemComponent {
     onAddLecture(section) {
         this.addLecture.emit(section);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseSectionItemComponent, isStandalone: true, selector: "rolatech-course-section-item", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "sectionChange", actions: "actionsChange", hasUnsaved: "hasUnsavedChange", editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", addLecture: "addLecture" }, ngImport: i0, template: "<div class=\"flex flex-col grow\">\n  @if (section().id !== editId()) {\n    <div>\n      <div class=\"flex justify-between items-center cursor-pointer\" (click)=\"isExpand = !isExpand\">\n        <div class=\"w-full flex items-center gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onEdit(section()); $event.stopPropagation()\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onDelete(section()); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n        <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\">\n          <mat-icon>{{ isExpand ? 'expand_less' : 'expand_more' }}</mat-icon>\n        </button>\n      </div>\n      @if (isExpand) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <rolatech-input [(title)]=\"section().title\" placeholder=\"\u6807\u9898\"></rolatech-input>\n      <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onCancel(section())\">\u53D6\u6D88</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\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: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: InputComponent, selector: "rolatech-input", inputs: ["title", "placeholder"], outputs: ["titleChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseSectionItemComponent, isStandalone: true, selector: "rolatech-course-section-item", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "sectionChange", actions: "actionsChange", hasUnsaved: "hasUnsavedChange", editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", addLecture: "addLecture" }, ngImport: i0, template: "<div class=\"flex flex-col grow\">\n  @if (section().id !== editId()) {\n    <div>\n      <div class=\"flex justify-between items-center cursor-pointer\" (click)=\"isExpand = !isExpand\">\n        <div class=\"w-full flex items-center gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onEdit(section()); $event.stopPropagation()\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onDelete(section()); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n        <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\">\n          <mat-icon>{{ isExpand ? 'expand_less' : 'expand_more' }}</mat-icon>\n        </button>\n      </div>\n      @if (isExpand) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <rolatech-input [(title)]=\"section().title\" placeholder=\"\u6807\u9898\"></rolatech-input>\n      <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onCancel(section())\">\u53D6\u6D88</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\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: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: InputComponent, selector: "rolatech-input", inputs: ["title", "placeholder"], outputs: ["titleChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-section-item', standalone: true, imports: [MatIconModule, FormsModule, MatButtonModule, IconButtonComponent, InputComponent], template: "<div class=\"flex flex-col grow\">\n  @if (section().id !== editId()) {\n    <div>\n      <div class=\"flex justify-between items-center cursor-pointer\" (click)=\"isExpand = !isExpand\">\n        <div class=\"w-full flex items-center gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onEdit(section()); $event.stopPropagation()\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onDelete(section()); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n        <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\">\n          <mat-icon>{{ isExpand ? 'expand_less' : 'expand_more' }}</mat-icon>\n        </button>\n      </div>\n      @if (isExpand) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <rolatech-input [(title)]=\"section().title\" placeholder=\"\u6807\u9898\"></rolatech-input>\n      <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onCancel(section())\">\u53D6\u6D88</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }] });
@@ -779,8 +779,8 @@ class ScheduleItemComponent {
         this.schedule.startAt = this.schedule.startDate + ' ' + this.schedule.startTime;
         this.schedule.endAt = this.schedule.endDate + ' ' + this.schedule.endTime;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ScheduleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ScheduleItemComponent, isStandalone: true, selector: "rolatech-schedule-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", save: "save" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ScheduleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: ScheduleItemComponent, isStandalone: true, selector: "rolatech-schedule-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", save: "save" }, providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
@@ -790,7 +790,7 @@ class ScheduleItemComponent {
             DatePipe,
         ], ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6807\u9898 </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> \u5185\u5BB9 </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>\u5F00\u59CB\u65E5\u671F</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>\u5F00\u59CB\u65F6\u95F4</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>\u7ED3\u675F\u65E5\u671F</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>\u7ED3\u675F\u65F6\u95F4</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)\">\u5220\u9664</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(schedule)\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.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"], exportAs: ["matInput"] }, { kind: "directive", type: i3.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.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ScheduleItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ScheduleItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-schedule-item', providers: [
                         {
@@ -890,10 +890,10 @@ class CourseSectionLectureVideoDialogComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionLectureVideoDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseSectionLectureVideoDialogComponent, isStandalone: true, selector: "rolatech-course-section-lecture-video-dialog", outputs: { thumbnailUpload: "thumbnailUpload" }, ngImport: i0, template: "<div class=\"flex flex-col-reverse sm:flex-row justify-between h-full gap-3\">\n  <div class=\"w-full sm:w-1/2\">\n    <div>\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u5C01\u9762 </span>\n        <span class=\"text-sm\">\u4E00\u4E2A\u597D\u7684\u5C01\u9762\u53EF\u4EE5\u5F15\u8D77\u66F4\u591A\u7684\u5173\u6CE8</span>\n      </div>\n\n      <div class=\"flex gap-3\">\n        <div\n          class=\"p-3 w-36 flex flex-col items-center justify-center outline-dashed outline-1 rounded cursor-pointer\"\n          (click)=\"fileInput.click()\"\n        >\n          <mat-icon>upload</mat-icon>\n          <span class=\"text-sm\">\u4E0A\u4F20\u5C01\u9762</span>\n        </div>\n        <input type=\"file\" accept=\"image/*\" (change)=\"onThumbnailUpload($event)\" #fileInput style=\"display: none\" />\n        @if (lecture.item.thumbnail) {\n          <div class=\"aspect-video w-32 h-auto bg-black\">\n            <img [src]=\"lecture.item.thumbnail\" class=\"aspect-video object-contain\" />\n          </div>\n        } @else {\n          <div class=\"aspect-video w-32 h-auto\">\n            <img [src]=\"mediaSrc\" class=\"aspect-video object-contain\" />\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"mt-3\">\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u8BD5\u770B\u5185\u5BB9 </span>\n        <span class=\"text-sm\">\u5C11\u91CF\u7684\u8BD5\u770B\u5185\u5BB9, \u53EF\u4EE5\u589E\u52A0\u8D2D\u4E70\u7387</span>\n      </div>\n      <mat-checkbox color=\"primary\" (change)=\"onPreviewChange($event)\" [checked]=\"lecture.item.canBePreviewed\"\n        >\u5141\u8BB8\u8BD5\u770B</mat-checkbox\n      >\n    </div>\n  </div>\n  <div class=\"w-full sm:w-1/2\">\n    @if (lecture) {\n      <div>\n        <div id=\"dplayer\" class=\"w-full h-auto aspect-video sm:rounded-xl\"></div>\n      </div>\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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionLectureVideoDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseSectionLectureVideoDialogComponent, isStandalone: true, selector: "rolatech-course-section-lecture-video-dialog", outputs: { thumbnailUpload: "thumbnailUpload" }, ngImport: i0, template: "<div class=\"flex flex-col-reverse md:flex-row justify-between h-full gap-3\">\n  <div class=\"w-full md:w-1/2\">\n    <div>\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u5C01\u9762 </span>\n        <span class=\"text-sm\">\u4E00\u4E2A\u597D\u7684\u5C01\u9762\u53EF\u4EE5\u5F15\u8D77\u66F4\u591A\u7684\u5173\u6CE8</span>\n      </div>\n\n      <div class=\"flex gap-3\">\n        <div\n          class=\"p-3 w-36 flex flex-col items-center justify-center outline-dashed outline-1 rounded cursor-pointer\"\n          (click)=\"fileInput.click()\"\n        >\n          <mat-icon>upload</mat-icon>\n          <span class=\"text-sm\">\u4E0A\u4F20\u5C01\u9762</span>\n        </div>\n        <input type=\"file\" accept=\"image/*\" (change)=\"onThumbnailUpload($event)\" #fileInput style=\"display: none\" />\n        @if (lecture.item.thumbnail) {\n          <div class=\"aspect-video w-32 h-auto bg-black\">\n            <img [src]=\"lecture.item.thumbnail\" class=\"aspect-video object-contain\" />\n          </div>\n        } @else {\n          <div class=\"aspect-video w-32 h-auto\">\n            <img [src]=\"mediaSrc\" class=\"aspect-video object-contain\" />\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"mt-3\">\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u8BD5\u770B\u5185\u5BB9 </span>\n        <span class=\"text-sm\">\u5C11\u91CF\u7684\u8BD5\u770B\u5185\u5BB9, \u53EF\u4EE5\u589E\u52A0\u8D2D\u4E70\u7387</span>\n      </div>\n      <mat-checkbox color=\"primary\" (change)=\"onPreviewChange($event)\" [checked]=\"lecture.item.canBePreviewed\"\n        >\u5141\u8BB8\u8BD5\u770B</mat-checkbox\n      >\n    </div>\n  </div>\n  <div class=\"w-full md:w-1/2\">\n    @if (lecture) {\n      <div>\n        <div id=\"dplayer\" class=\"w-full h-auto aspect-video md:rounded-xl\"></div>\n      </div>\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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionLectureVideoDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionLectureVideoDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-section-lecture-video-dialog', standalone: true, imports: [
                         MatIconModule,
@@ -904,7 +904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         MatButtonModule,
                         MatDialogClose,
                         MatCheckboxModule,
-                    ], template: "<div class=\"flex flex-col-reverse sm:flex-row justify-between h-full gap-3\">\n  <div class=\"w-full sm:w-1/2\">\n    <div>\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u5C01\u9762 </span>\n        <span class=\"text-sm\">\u4E00\u4E2A\u597D\u7684\u5C01\u9762\u53EF\u4EE5\u5F15\u8D77\u66F4\u591A\u7684\u5173\u6CE8</span>\n      </div>\n\n      <div class=\"flex gap-3\">\n        <div\n          class=\"p-3 w-36 flex flex-col items-center justify-center outline-dashed outline-1 rounded cursor-pointer\"\n          (click)=\"fileInput.click()\"\n        >\n          <mat-icon>upload</mat-icon>\n          <span class=\"text-sm\">\u4E0A\u4F20\u5C01\u9762</span>\n        </div>\n        <input type=\"file\" accept=\"image/*\" (change)=\"onThumbnailUpload($event)\" #fileInput style=\"display: none\" />\n        @if (lecture.item.thumbnail) {\n          <div class=\"aspect-video w-32 h-auto bg-black\">\n            <img [src]=\"lecture.item.thumbnail\" class=\"aspect-video object-contain\" />\n          </div>\n        } @else {\n          <div class=\"aspect-video w-32 h-auto\">\n            <img [src]=\"mediaSrc\" class=\"aspect-video object-contain\" />\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"mt-3\">\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u8BD5\u770B\u5185\u5BB9 </span>\n        <span class=\"text-sm\">\u5C11\u91CF\u7684\u8BD5\u770B\u5185\u5BB9, \u53EF\u4EE5\u589E\u52A0\u8D2D\u4E70\u7387</span>\n      </div>\n      <mat-checkbox color=\"primary\" (change)=\"onPreviewChange($event)\" [checked]=\"lecture.item.canBePreviewed\"\n        >\u5141\u8BB8\u8BD5\u770B</mat-checkbox\n      >\n    </div>\n  </div>\n  <div class=\"w-full sm:w-1/2\">\n    @if (lecture) {\n      <div>\n        <div id=\"dplayer\" class=\"w-full h-auto aspect-video sm:rounded-xl\"></div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col-reverse md:flex-row justify-between h-full gap-3\">\n  <div class=\"w-full md:w-1/2\">\n    <div>\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u5C01\u9762 </span>\n        <span class=\"text-sm\">\u4E00\u4E2A\u597D\u7684\u5C01\u9762\u53EF\u4EE5\u5F15\u8D77\u66F4\u591A\u7684\u5173\u6CE8</span>\n      </div>\n\n      <div class=\"flex gap-3\">\n        <div\n          class=\"p-3 w-36 flex flex-col items-center justify-center outline-dashed outline-1 rounded cursor-pointer\"\n          (click)=\"fileInput.click()\"\n        >\n          <mat-icon>upload</mat-icon>\n          <span class=\"text-sm\">\u4E0A\u4F20\u5C01\u9762</span>\n        </div>\n        <input type=\"file\" accept=\"image/*\" (change)=\"onThumbnailUpload($event)\" #fileInput style=\"display: none\" />\n        @if (lecture.item.thumbnail) {\n          <div class=\"aspect-video w-32 h-auto bg-black\">\n            <img [src]=\"lecture.item.thumbnail\" class=\"aspect-video object-contain\" />\n          </div>\n        } @else {\n          <div class=\"aspect-video w-32 h-auto\">\n            <img [src]=\"mediaSrc\" class=\"aspect-video object-contain\" />\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"mt-3\">\n      <div class=\"py-3 flex flex-col\">\n        <span class=\"text-lg font-bold\"> \u8BD5\u770B\u5185\u5BB9 </span>\n        <span class=\"text-sm\">\u5C11\u91CF\u7684\u8BD5\u770B\u5185\u5BB9, \u53EF\u4EE5\u589E\u52A0\u8D2D\u4E70\u7387</span>\n      </div>\n      <mat-checkbox color=\"primary\" (change)=\"onPreviewChange($event)\" [checked]=\"lecture.item.canBePreviewed\"\n        >\u5141\u8BB8\u8BD5\u770B</mat-checkbox\n      >\n    </div>\n  </div>\n  <div class=\"w-full md:w-1/2\">\n    @if (lecture) {\n      <div>\n        <div id=\"dplayer\" class=\"w-full h-auto aspect-video md:rounded-xl\"></div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -994,10 +994,10 @@ class CourseSectionLectureItemComponent {
         // console.log('Video Width:', videoElement.videoWidth);
         // console.log('Video Height:', videoElement.videoHeight);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionLectureItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseSectionLectureItemComponent, isStandalone: true, selector: "rolatech-course-section-lecture-item", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, lecture: { classPropertyName: "lecture", publicName: "lecture", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", mediaEdit: "mediaEdit", thumbnailUpload: "thumbnailUpload", upload: "upload", deleteMedia: "deleteMedia" }, viewQueries: [{ propertyName: "myVideo", first: true, predicate: ["video"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col grow p-2\">\n  @if (lecture().id !== editId()) {\n    <div class=\"w-full flex gap-3 p-3 items-center\">\n      <span>{{ lecture().title }}</span>\n      <button mat-icon-button (click)=\"onEdit(lecture()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onDelete(lecture()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <rolatech-input [(title)]=\"lecture().title\" placeholder=\"\u6807\u9898\"></rolatech-input>\n      <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onCancel(lecture())\">\u53D6\u6D88</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(lecture())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\n\n  <div>\n    @if (lecture().item) {\n      <div class=\"flex flex-row p-2 gap-3\">\n        <div class=\"bg-black h-fit\">\n          <video\n            id=\"video\"\n            #video\n            [src]=\"lecture().item.url\"\n            class=\"w-32 aspect-video\"\n            (loadedmetadata)=\"onLoadedMetadata($event)\"\n            [poster]=\"lecture().item.thumbnail\"\n          ></video>\n        </div>\n        <div class=\"flex flex-col justify-between w-full\">\n          <div class=\"flex justify-between items-center w-full\">\n            <div class=\"flex justify-between items-center w-full px-2\">\n              <span>\u89C6\u9891\u5185\u5BB9</span>\n            </div>\n            @if (lecture().isUploading) {\n              <div>\n                <span> {{ lecture().item.progress }}%</span>\n              </div>\n            }\n          </div>\n          <div class=\"flex justify-between items-center\">\n            <div>\n              <button mat-button class=\"max-h-8\" (click)=\"onMediaEdit(lecture().item); $event.stopPropagation()\">\n                <mat-icon>edit</mat-icon>\n                <span>\u7F16\u8F91</span>\n              </button>\n              <button mat-button class=\"max-h-8\" (click)=\"onDeleteMedia(lecture().item); $event.stopPropagation()\">\n                <mat-icon>delete</mat-icon>\n                <span>\u5220\u9664</span>\n              </button>\n            </div>\n            <div>\n              <span>{{ lecture().item.duration | duration }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (lecture().isUploading) {\n        <div class=\"p-2\">\n          <mat-progress-bar color=\"primary\" mode=\"determinate\" [value]=\"lecture().item.progress\"> </mat-progress-bar>\n        </div>\n      }\n    } @else {\n      @if (lecture().id !== editId()) {\n        <div class=\"px-3\">\n          <input\n            class=\"ud-sr-only\"\n            type=\"file\"\n            accept=\".avi,.mpg,.mpeg,.flv,.mov,.m2v,.m4v,.mp4,.rm,.ram,.vob,.ogv,.webm,.wmv\"\n            (change)=\"onUpload(lecture().id, $event)\"\n            #fileInput\n          />\n          <div class=\"flex justify-between items-center\">\n            <div>\u65E0\u89C6\u9891\u6587\u4EF6</div>\n            <button mat-flat-button class=\"max-h-8\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u89C6\u9891</button>\n          </div>\n        </div>\n      }\n    }\n  </div>\n  @if (!hasUnsaved) {\n    <ng-content></ng-content>\n  }\n</div>\n", styles: [".ud-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}\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: AngularCommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i3$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "component", type: InputComponent, selector: "rolatech-input", inputs: ["title", "placeholder"], outputs: ["titleChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionLectureItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseSectionLectureItemComponent, isStandalone: true, selector: "rolatech-course-section-lecture-item", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, lecture: { classPropertyName: "lecture", publicName: "lecture", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", mediaEdit: "mediaEdit", thumbnailUpload: "thumbnailUpload", upload: "upload", deleteMedia: "deleteMedia" }, viewQueries: [{ propertyName: "myVideo", first: true, predicate: ["video"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col grow p-2\">\n  @if (lecture().id !== editId()) {\n    <div class=\"w-full flex gap-3 p-3 items-center\">\n      <span>{{ lecture().title }}</span>\n      <button mat-icon-button (click)=\"onEdit(lecture()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onDelete(lecture()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <rolatech-input [(title)]=\"lecture().title\" placeholder=\"\u6807\u9898\"></rolatech-input>\n      <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onCancel(lecture())\">\u53D6\u6D88</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(lecture())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\n\n  <div>\n    @if (lecture().item) {\n      <div class=\"flex flex-row p-2 gap-3\">\n        <div class=\"bg-black h-fit\">\n          <video\n            id=\"video\"\n            #video\n            [src]=\"lecture().item.url\"\n            class=\"w-32 aspect-video\"\n            (loadedmetadata)=\"onLoadedMetadata($event)\"\n            [poster]=\"lecture().item.thumbnail\"\n          ></video>\n        </div>\n        <div class=\"flex flex-col justify-between w-full\">\n          <div class=\"flex justify-between items-center w-full\">\n            <div class=\"flex justify-between items-center w-full px-2\">\n              <span>\u89C6\u9891\u5185\u5BB9</span>\n            </div>\n            @if (lecture().isUploading) {\n              <div>\n                <span> {{ lecture().item.progress }}%</span>\n              </div>\n            }\n          </div>\n          <div class=\"flex justify-between items-center\">\n            <div>\n              <button mat-button class=\"max-h-8\" (click)=\"onMediaEdit(lecture().item); $event.stopPropagation()\">\n                <mat-icon>edit</mat-icon>\n                <span>\u7F16\u8F91</span>\n              </button>\n              <button mat-button class=\"max-h-8\" (click)=\"onDeleteMedia(lecture().item); $event.stopPropagation()\">\n                <mat-icon>delete</mat-icon>\n                <span>\u5220\u9664</span>\n              </button>\n            </div>\n            <div>\n              <span>{{ lecture().item.duration | duration }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (lecture().isUploading) {\n        <div class=\"p-2\">\n          <mat-progress-bar color=\"primary\" mode=\"determinate\" [value]=\"lecture().item.progress\"> </mat-progress-bar>\n        </div>\n      }\n    } @else {\n      @if (lecture().id !== editId()) {\n        <div class=\"px-3\">\n          <input\n            class=\"ud-sr-only\"\n            type=\"file\"\n            accept=\".avi,.mpg,.mpeg,.flv,.mov,.m2v,.m4v,.mp4,.rm,.ram,.vob,.ogv,.webm,.wmv\"\n            (change)=\"onUpload(lecture().id, $event)\"\n            #fileInput\n          />\n          <div class=\"flex justify-between items-center\">\n            <div>\u65E0\u89C6\u9891\u6587\u4EF6</div>\n            <button mat-flat-button class=\"max-h-8\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u89C6\u9891</button>\n          </div>\n        </div>\n      }\n    }\n  </div>\n  @if (!hasUnsaved) {\n    <ng-content></ng-content>\n  }\n</div>\n", styles: [".ud-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}\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: AngularCommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i3$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "component", type: InputComponent, selector: "rolatech-input", inputs: ["title", "placeholder"], outputs: ["titleChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionLectureItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionLectureItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-section-lecture-item', standalone: true, imports: [
                         MatIconModule,
@@ -1012,10 +1012,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }] });
 class CourseSectionLectureVideoItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionLectureVideoItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: CourseSectionLectureVideoItemComponent, isStandalone: true, selector: "rolatech-course-section-lecture-video-item", ngImport: i0, template: "<p>course-section-lecture-video-item works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionLectureVideoItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CourseSectionLectureVideoItemComponent, isStandalone: true, selector: "rolatech-course-section-lecture-video-item", ngImport: i0, template: "<p>course-section-lecture-video-item works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionLectureVideoItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionLectureVideoItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-section-lecture-video-item', standalone: true, template: "<p>course-section-lecture-video-item works!</p>\n" }]
         }] });
@@ -1026,10 +1026,10 @@ class CourseItemComponent {
         this.row = input(true);
         this.inset = input(false, { transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseItemComponent, isStandalone: true, selector: "rolatech-course-item", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (row()) {\n  <div class=\"flex w-full flex-row\" [style]=\"inset() ? 'padding: 0 16px' : ''\">\n    <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-10-percent-layer] rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 md:w-3/4 ml-3 flex flex-col justify-between\">\n      <div>\n        <div class=\"md:text-xl font-medium break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n          {{ course().name }}\n        </div>\n        <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div>\n      @if (course().media; as media) {\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-10-percent-layer] w-full h-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md md:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], deferBlockDependencies: [() => [ThumbnailComponent], () => [ThumbnailComponent]] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseItemComponent, isStandalone: true, selector: "rolatech-course-item", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (row()) {\n  <div class=\"flex w-full flex-row\" [style]=\"inset() ? 'padding: 0 16px' : ''\">\n    <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-10-percent-layer] rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 md:w-3/4 ml-3 flex flex-col justify-between\">\n      <div>\n        <div class=\"md:text-xl font-medium break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n          {{ course().name }}\n        </div>\n        <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div>\n      @if (course().media; as media) {\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-10-percent-layer] w-full h-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md md:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], deferBlockDependencies: [() => [ThumbnailComponent], () => [ThumbnailComponent]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-item', standalone: true, imports: [CommonModule, ImageComponent, ThumbnailComponent], template: "@if (row()) {\n  <div class=\"flex w-full flex-row\" [style]=\"inset() ? 'padding: 0 16px' : ''\">\n    <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-10-percent-layer] rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 md:w-3/4 ml-3 flex flex-col justify-between\">\n      <div>\n        <div class=\"md:text-xl font-medium break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n          {{ course().name }}\n        </div>\n        <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div>\n      @if (course().media; as media) {\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-10-percent-layer] w-full h-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md md:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n" }]
         }] });
@@ -1062,37 +1062,33 @@ class PricingItemComponent {
     setTwoNumberDecimal(e) {
         this.pricing().total = e;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: PricingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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> \u6700\u5C11\u4EBA\u6570 </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> \u6700\u591A\u4EBA\u6570 </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> \u4EF7\u683C </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())\">\u5220\u9664</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(pricing())\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: PricingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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> \u6700\u5C11\u4EBA\u6570 </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> \u6700\u591A\u4EBA\u6570 </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> \u4EF7\u683C </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())\">\u5220\u9664</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(pricing())\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: PricingItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: PricingItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-pricing-item', standalone: true, imports: [NgClass, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatDividerModule], template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6700\u5C11\u4EBA\u6570 </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> \u6700\u591A\u4EBA\u6570 </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> \u4EF7\u683C </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())\">\u5220\u9664</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(pricing())\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n" }]
         }], ctorParameters: () => [] });
 class CoursePricingAddDialogComponent {
-    constructor(dialogRef, data) {
-        this.dialogRef = dialogRef;
-        this.data = data;
+    constructor() {
+        this.output = output();
         this.pricing = {
             min: 0,
             max: 0,
             total: 0,
         };
     }
-    close() {
-        this.dialogRef.close();
+    ngDoCheck() {
+        this.output.emit(this.pricing);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CoursePricingAddDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CoursePricingAddDialogComponent, isStandalone: true, selector: "rolatech-course-pricing-add-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-xl font-bold\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <div class=\"flex-1 overflow-hidden p-3 overflow-y-auto max-h-[55vh]\">\n    <rolatech-pricing-item [pricing]=\"pricing\"></rolatech-pricing-item>\n  </div>\n  <div class=\"h-16 flex justify-end items-center px-5 gap-3\">\n    <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n    <button mat-button [mat-dialog-close]=\"pricing\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.3", ngImport: i0, type: CoursePricingAddDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CoursePricingAddDialogComponent, isStandalone: true, selector: "rolatech-course-pricing-add-dialog", outputs: { output: "output" }, ngImport: i0, template: "<rolatech-pricing-item [pricing]=\"pricing\"></rolatech-pricing-item>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CoursePricingAddDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CoursePricingAddDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-pricing-add-dialog', standalone: true, imports: [MatIconModule, PricingItemComponent, MatButtonModule, 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-xl font-bold\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <div class=\"flex-1 overflow-hidden p-3 overflow-y-auto max-h-[55vh]\">\n    <rolatech-pricing-item [pricing]=\"pricing\"></rolatech-pricing-item>\n  </div>\n  <div class=\"h-16 flex justify-end items-center px-5 gap-3\">\n    <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n    <button mat-button [mat-dialog-close]=\"pricing\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+            args: [{ selector: 'rolatech-course-pricing-add-dialog', standalone: true, imports: [MatIconModule, PricingItemComponent, MatButtonModule], template: "<rolatech-pricing-item [pricing]=\"pricing\"></rolatech-pricing-item>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
 class CourseScheduleAddDialogComponent {
     constructor() {
@@ -1107,12 +1103,12 @@ class CourseScheduleAddDialogComponent {
     ngDoCheck() {
         this.output.emit(this.schedule);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseScheduleAddDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: CourseScheduleAddDialogComponent, isStandalone: true, selector: "rolatech-course-schedule-add-dialog", outputs: { output: "output" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"flex-1 overflow-y-auto max-h-[55vh] px-3\">\n    <rolatech-schedule-item [value]=\"schedule\"></rolatech-schedule-item>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseScheduleAddDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CourseScheduleAddDialogComponent, isStandalone: true, selector: "rolatech-course-schedule-add-dialog", outputs: { output: "output" }, ngImport: i0, template: "<rolatech-schedule-item [value]=\"schedule\"></rolatech-schedule-item>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseScheduleAddDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseScheduleAddDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-schedule-add-dialog', standalone: true, imports: [MatIconModule, ScheduleItemComponent, MatButtonModule], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"flex-1 overflow-y-auto max-h-[55vh] px-3\">\n    <rolatech-schedule-item [value]=\"schedule\"></rolatech-schedule-item>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-course-schedule-add-dialog', standalone: true, imports: [MatIconModule, ScheduleItemComponent, MatButtonModule], template: "<rolatech-schedule-item [value]=\"schedule\"></rolatech-schedule-item>\n" }]
         }] });
 class CoursePricingDialogComponent {
@@ -1136,10 +1132,10 @@ class CoursePricingDialogComponent {
             total: 0,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CoursePricingDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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>\u4FDD\u5B58</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$1.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: i6$2.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.3", ngImport: i0, type: CoursePricingDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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>\u4FDD\u5B58</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$1.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: i6$2.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.2", ngImport: i0, type: CoursePricingDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CoursePricingDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-pricing-dialog', standalone: true, imports: [
                         MatIconModule,
@@ -1177,10 +1173,10 @@ class CourseScheduleDialogComponent {
             endAt: '',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseScheduleDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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>\u8BE6\u60C5</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>\u4FDD\u5B58</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$1.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: i6$2.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.3", ngImport: i0, type: CourseScheduleDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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>\u8BE6\u60C5</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>\u4FDD\u5B58</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$1.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: i6$2.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.2", ngImport: i0, type: CourseScheduleDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseScheduleDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-schedule-dialog', standalone: true, imports: [
                         MatIconModule,
@@ -1230,10 +1226,10 @@ class DetailItemComponent {
         this.deleteMedia.emit({ id, media });
         this.selectedImg = this.detail().media ? first(this.detail().media) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DetailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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>\u6807\u9898</mat-label>\n        <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"detail().title\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u63CF\u8FF0</mat-label>\n        <input matInput placeholder=\"\u63CF\u8FF0\" [(ngModel)]=\"detail().description\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u5185\u5BB9</mat-label>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"3\"\n          placeholder=\"\u5185\u5BB9\"\n          [(ngModel)]=\"detail().content\"\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())\">\u5220\u9664</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(detail())\">\u4FDD\u5B58</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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], exportAs: ["matInput"] }, { kind: "directive", type: i3.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: DetailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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>\u6807\u9898</mat-label>\n        <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"detail().title\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u63CF\u8FF0</mat-label>\n        <input matInput placeholder=\"\u63CF\u8FF0\" [(ngModel)]=\"detail().description\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u5185\u5BB9</mat-label>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"3\"\n          placeholder=\"\u5185\u5BB9\"\n          [(ngModel)]=\"detail().content\"\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())\">\u5220\u9664</button>\n    <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(detail())\">\u4FDD\u5B58</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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], exportAs: ["matInput"] }, { kind: "directive", type: i3.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DetailItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: DetailItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-detail-item', standalone: true, imports: [
                         NgClass,
@@ -1301,10 +1297,10 @@ class CourseDetailsDialogComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseDetailsDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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>\u4FDD\u5B58</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$1.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: i6$2.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.3", ngImport: i0, type: CourseDetailsDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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>\u4FDD\u5B58</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$1.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: i6$2.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.2", ngImport: i0, type: CourseDetailsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseDetailsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-details-dialog', standalone: true, imports: [
                         MatIconModule,
@@ -1491,10 +1487,10 @@ class CourseEditDialogComponent {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseEditDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoryService }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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>\u57FA\u672C\u4FE1\u606F</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label> \u8BFE\u7A0B\u540D\u79F0 </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> \u8BFE\u7A0B\u63CF\u8FF0 </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>\u5206\u7C7B</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>\u7C7B\u578B</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>\u6559\u5BA4</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>\u56FE\u7247\u4FE1\u606F</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>\u8BE6\u60C5</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>\u589E\u52A0\u8BE6\u60C5</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>\u589E\u52A0\u4EF7\u683C</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel>\u8BFE\u8868</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>\u589E\u52A0\u8BFE\u8868</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()\">\u4E0A\u4E00\u6B65</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\">\u4E0B\u4E00\u6B65</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial>\u4FDD\u5B58</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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i6$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i6$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i6$2.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.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"], 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.3", ngImport: i0, type: CourseEditDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoryService }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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>\u57FA\u672C\u4FE1\u606F</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label> \u8BFE\u7A0B\u540D\u79F0 </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> \u8BFE\u7A0B\u63CF\u8FF0 </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>\u5206\u7C7B</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>\u7C7B\u578B</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>\u6559\u5BA4</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>\u56FE\u7247\u4FE1\u606F</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>\u8BE6\u60C5</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>\u589E\u52A0\u8BE6\u60C5</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>\u589E\u52A0\u4EF7\u683C</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel>\u8BFE\u8868</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>\u589E\u52A0\u8BFE\u8868</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()\">\u4E0A\u4E00\u6B65</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\">\u4E0B\u4E00\u6B65</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial>\u4FDD\u5B58</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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i6$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i6$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i6$2.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.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"], 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.2", ngImport: i0, type: CourseEditDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseEditDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-edit-dialog', standalone: true, imports: [
                         MatIconModule,
@@ -1535,10 +1531,10 @@ class CourseDetailsComponent {
     onClickScroller(id) {
         this.viewportScroller.scrollToAnchor(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseDetailsComponent, isStandalone: true, selector: "rolatech-course-details", inputs: { details: { classPropertyName: "details", publicName: "details", 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 class=\"py-3\" id=\"details\">\n  <div class=\"text-xl font-medium py-2\">\u8BE6\u60C5</div>\n  @if (details()) {\n    @for (detail of details(); track $index) {\n      <div>\n        @if (detail.title) {\n          <div class=\"py-3 flex items-center gap-3\">\n            <span class=\"h-4 w-1 bg-orange-500 inline-block\"></span>\n            <span class=\"text-lg font-medium py-1\"> {{ detail.title }}</span>\n          </div>\n        }\n        @if (detail.content) {\n          <div>\n            {{ detail.content }}\n          </div>\n        }\n        @if (detail.media) {\n          <div class=\"w-80%\">\n            @for (item of detail.media; track item) {\n              <div class=\"py-3\">\n                <rolatech-thumbnail [src]=\"item.url + '!w400'\" size=\"small\"></rolatech-thumbnail>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseDetailsComponent, isStandalone: true, selector: "rolatech-course-details", inputs: { details: { classPropertyName: "details", publicName: "details", 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 class=\"py-3\" id=\"details\">\n  <div class=\"text-xl font-medium py-2\">\u8BE6\u60C5</div>\n  @if (details()) {\n    @for (detail of details(); track $index) {\n      <div>\n        @if (detail.title) {\n          <div class=\"py-3 flex items-center gap-3\">\n            <span class=\"h-4 w-1 bg-orange-500 inline-block\"></span>\n            <span class=\"text-lg font-medium py-1\"> {{ detail.title }}</span>\n          </div>\n        }\n        @if (detail.content) {\n          <div>\n            {{ detail.content }}\n          </div>\n        }\n        @if (detail.media) {\n          <div class=\"w-80%\">\n            @for (item of detail.media; track item) {\n              <div class=\"py-3\">\n                <rolatech-thumbnail [src]=\"item.url + '!w400'\" size=\"small\"></rolatech-thumbnail>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-details', standalone: true, imports: [ThumbnailComponent], template: "<div class=\"py-3\" id=\"details\">\n  <div class=\"text-xl font-medium py-2\">\u8BE6\u60C5</div>\n  @if (details()) {\n    @for (detail of details(); track $index) {\n      <div>\n        @if (detail.title) {\n          <div class=\"py-3 flex items-center gap-3\">\n            <span class=\"h-4 w-1 bg-orange-500 inline-block\"></span>\n            <span class=\"text-lg font-medium py-1\"> {{ detail.title }}</span>\n          </div>\n        }\n        @if (detail.content) {\n          <div>\n            {{ detail.content }}\n          </div>\n        }\n        @if (detail.media) {\n          <div class=\"w-80%\">\n            @for (item of detail.media; track item) {\n              <div class=\"py-3\">\n                <rolatech-thumbnail [src]=\"item.url + '!w400'\" size=\"small\"></rolatech-thumbnail>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n" }]
         }] });
@@ -1549,10 +1545,10 @@ class CourseMediaOwnerRendererComponent {
         this.avatar = input();
         this.username = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseMediaOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseMediaOwnerRendererComponent, isStandalone: true, selector: "rolatech-course-media-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/instructors/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-orange-600\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/instructors/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseMediaOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseMediaOwnerRendererComponent, isStandalone: true, selector: "rolatech-course-media-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/instructors/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-orange-600\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/instructors/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseMediaOwnerRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseMediaOwnerRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-media-owner-renderer', standalone: true, imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-row items-center\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/instructors/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-orange-600\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/instructors/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
         }] });
@@ -1616,10 +1612,10 @@ class CourseCategoryComponent extends BaseComponent {
             relativeTo: this.route,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseCategoryComponent, isStandalone: true, selector: "rolatech-course-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of courses; track item) {\n      <div\n        class=\"py-2 cursor-pointer min-w-[80%] md:min-w-[33%] hover:bg-[--rt-base-background]\"\n        [routerLink]=\"['../../', item.id]\"\n      >\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseItemComponent, selector: "rolatech-course-item", inputs: ["course", "row", "inset"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseCategoryComponent, isStandalone: true, selector: "rolatech-course-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of courses; track item) {\n      <div\n        class=\"py-2 cursor-pointer min-w-[80%] md:min-w-[33%] hover:bg-[--rt-base-background]\"\n        [routerLink]=\"['../../', item.id]\"\n      >\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseItemComponent, selector: "rolatech-course-item", inputs: ["course", "row", "inset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseCategoryComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, CourseItemComponent], selector: 'rolatech-course-category', template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of courses; track item) {\n      <div\n        class=\"py-2 cursor-pointer min-w-[80%] md:min-w-[33%] hover:bg-[--rt-base-background]\"\n        [routerLink]=\"['../../', item.id]\"\n      >\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n" }]
         }] });
@@ -1736,10 +1732,10 @@ class CourseDetailComponent extends BaseComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseDetailComponent, isStandalone: true, selector: "rolatech-course-detail", usesInheritance: true, ngImport: i0, template: "@if (course) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col-reverse gap-3 md:flex-row w-full justify-between\">\n      <div class=\"md:w-3/4\">\n        <rolatech-course-info [course]=\"course\" [instructor]=\"instructorName\" [username]=\"username\"> </rolatech-course-info>\n        <rolatech-course-sections\n          [sections]=\"sections\"\n          (section)=\"onSection($event)\"\n          (checkout)=\"checkout($event)\"\n          [purchased]=\"purchased\"\n        ></rolatech-course-sections>\n        <rolatech-course-schedule [schedule]=\"course.schedule\"></rolatech-course-schedule>\n        <rolatech-course-details [details]=\"course.details\"></rolatech-course-details>\n        <rolatech-comments [itemId]=\"course.id\"></rolatech-comments>\n      </div>\n      <div class=\"md:px-3\">\n        <!-- <rolatech-course-media [min]=\"!purchased\" [media]=\"course.media\" [min]=\"true\"></rolatech-course-media> -->\n        <rolatech-course-media [media]=\"course.media\" [min]=\"true\"></rolatech-course-media>\n        @if (!purchased) {\n          <rolatech-course-pricing [pricing]=\"course.pricing\"></rolatech-course-pricing>\n          <rolatech-course-action\n            [course]=\"course\"\n            (checkout)=\"checkout($event)\"\n            (wish)=\"onWish($event)\"\n            [inWishList]=\"inWishList\"\n          ></rolatech-course-action>\n        }\n      </div>\n    </div>\n  </rolatech-app-container>\n}\n", styles: ["mat-expansion-panel mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseInfoComponent, selector: "rolatech-course-info", inputs: ["course", "instructor", "username"] }, { kind: "component", type: CourseSectionsComponent, selector: "rolatech-course-sections", inputs: ["purchased", "sections"], outputs: ["section", "checkout"] }, { kind: "component", type: CourseScheduleComponent, selector: "rolatech-course-schedule", inputs: ["schedule"] }, { kind: "component", type: CourseDetailsComponent, selector: "rolatech-course-details", inputs: ["details", "instructor", "username"] }, { kind: "component", type: CourseMediaComponent, selector: "rolatech-course-media", inputs: ["media", "min"] }, { kind: "component", type: CoursePricingComponent, selector: "rolatech-course-pricing", inputs: ["pricing"] }, { kind: "component", type: CourseActionComponent, selector: "rolatech-course-action", inputs: ["course", "inWishList"], outputs: ["cart", "wish", "checkout"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: AppContainerComponent, selector: "rolatech-app-container" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseDetailComponent, isStandalone: true, selector: "rolatech-course-detail", usesInheritance: true, ngImport: i0, template: "@if (course) {\n  <rolatech-container>\n    <div class=\"flex flex-col-reverse gap-3 md:flex-row w-full justify-between\">\n      <div class=\"md:w-3/4\">\n        <rolatech-course-info [course]=\"course\" [instructor]=\"instructorName\" [username]=\"username\"> </rolatech-course-info>\n        <rolatech-course-sections\n          [sections]=\"sections\"\n          (section)=\"onSection($event)\"\n          (checkout)=\"checkout($event)\"\n          [purchased]=\"purchased\"\n        ></rolatech-course-sections>\n        <rolatech-course-schedule [schedule]=\"course.schedule\"></rolatech-course-schedule>\n        <rolatech-course-details [details]=\"course.details\"></rolatech-course-details>\n        <rolatech-comments [itemId]=\"course.id\"></rolatech-comments>\n      </div>\n      <div class=\"md:px-3\">\n        <!-- <rolatech-course-media [min]=\"!purchased\" [media]=\"course.media\" [min]=\"true\"></rolatech-course-media> -->\n        <rolatech-course-media [media]=\"course.media\" [min]=\"true\"></rolatech-course-media>\n        @if (!purchased) {\n          <rolatech-course-pricing [pricing]=\"course.pricing\"></rolatech-course-pricing>\n          <rolatech-course-action\n            [course]=\"course\"\n            (checkout)=\"checkout($event)\"\n            (wish)=\"onWish($event)\"\n            [inWishList]=\"inWishList\"\n          ></rolatech-course-action>\n        }\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: ["mat-expansion-panel mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseInfoComponent, selector: "rolatech-course-info", inputs: ["course", "instructor", "username"] }, { kind: "component", type: CourseSectionsComponent, selector: "rolatech-course-sections", inputs: ["purchased", "sections"], outputs: ["section", "checkout"] }, { kind: "component", type: CourseScheduleComponent, selector: "rolatech-course-schedule", inputs: ["schedule"] }, { kind: "component", type: CourseDetailsComponent, selector: "rolatech-course-details", inputs: ["details", "instructor", "username"] }, { kind: "component", type: CourseMediaComponent, selector: "rolatech-course-media", inputs: ["media", "min"] }, { kind: "component", type: CoursePricingComponent, selector: "rolatech-course-pricing", inputs: ["pricing"] }, { kind: "component", type: CourseActionComponent, selector: "rolatech-course-action", inputs: ["course", "inWishList"], outputs: ["cart", "wish", "checkout"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseDetailComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         AngularCommonModule,
@@ -1752,8 +1748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         CoursePricingComponent,
                         CourseActionComponent,
                         CommentsComponent,
-                        AppContainerComponent,
-                    ], selector: 'rolatech-course-detail', template: "@if (course) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col-reverse gap-3 md:flex-row w-full justify-between\">\n      <div class=\"md:w-3/4\">\n        <rolatech-course-info [course]=\"course\" [instructor]=\"instructorName\" [username]=\"username\"> </rolatech-course-info>\n        <rolatech-course-sections\n          [sections]=\"sections\"\n          (section)=\"onSection($event)\"\n          (checkout)=\"checkout($event)\"\n          [purchased]=\"purchased\"\n        ></rolatech-course-sections>\n        <rolatech-course-schedule [schedule]=\"course.schedule\"></rolatech-course-schedule>\n        <rolatech-course-details [details]=\"course.details\"></rolatech-course-details>\n        <rolatech-comments [itemId]=\"course.id\"></rolatech-comments>\n      </div>\n      <div class=\"md:px-3\">\n        <!-- <rolatech-course-media [min]=\"!purchased\" [media]=\"course.media\" [min]=\"true\"></rolatech-course-media> -->\n        <rolatech-course-media [media]=\"course.media\" [min]=\"true\"></rolatech-course-media>\n        @if (!purchased) {\n          <rolatech-course-pricing [pricing]=\"course.pricing\"></rolatech-course-pricing>\n          <rolatech-course-action\n            [course]=\"course\"\n            (checkout)=\"checkout($event)\"\n            (wish)=\"onWish($event)\"\n            [inWishList]=\"inWishList\"\n          ></rolatech-course-action>\n        }\n      </div>\n    </div>\n  </rolatech-app-container>\n}\n", styles: ["mat-expansion-panel mat-icon{transform:scale(.8)}\n"] }]
+                        ContainerComponent,
+                    ], selector: 'rolatech-course-detail', template: "@if (course) {\n  <rolatech-container>\n    <div class=\"flex flex-col-reverse gap-3 md:flex-row w-full justify-between\">\n      <div class=\"md:w-3/4\">\n        <rolatech-course-info [course]=\"course\" [instructor]=\"instructorName\" [username]=\"username\"> </rolatech-course-info>\n        <rolatech-course-sections\n          [sections]=\"sections\"\n          (section)=\"onSection($event)\"\n          (checkout)=\"checkout($event)\"\n          [purchased]=\"purchased\"\n        ></rolatech-course-sections>\n        <rolatech-course-schedule [schedule]=\"course.schedule\"></rolatech-course-schedule>\n        <rolatech-course-details [details]=\"course.details\"></rolatech-course-details>\n        <rolatech-comments [itemId]=\"course.id\"></rolatech-comments>\n      </div>\n      <div class=\"md:px-3\">\n        <!-- <rolatech-course-media [min]=\"!purchased\" [media]=\"course.media\" [min]=\"true\"></rolatech-course-media> -->\n        <rolatech-course-media [media]=\"course.media\" [min]=\"true\"></rolatech-course-media>\n        @if (!purchased) {\n          <rolatech-course-pricing [pricing]=\"course.pricing\"></rolatech-course-pricing>\n          <rolatech-course-action\n            [course]=\"course\"\n            (checkout)=\"checkout($event)\"\n            (wish)=\"onWish($event)\"\n            [inWishList]=\"inWishList\"\n          ></rolatech-course-action>\n        }\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: ["mat-expansion-panel mat-icon{transform:scale(.8)}\n"] }]
         }], ctorParameters: () => [] });
 class CourseLayoutComponent extends BaseComponent {
@@ -1791,12 +1787,12 @@ class CourseLayoutComponent extends BaseComponent {
         }
     }
     nextCategory() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseLayoutComponent, isStandalone: true, selector: "rolatech-course-layout", usesInheritance: true, ngImport: i0, template: "@if (categories) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"course-layout-active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"course-layout-active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n    <!-- <rolatech-list>\n      <router-outlet></router-outlet>\n    </rolatech-list> -->\n  </rolatech-app-container>\n}\n", styles: [".course-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.course-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: AppContainerComponent, selector: "rolatech-app-container" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseLayoutComponent, isStandalone: true, selector: "rolatech-course-layout", usesInheritance: true, ngImport: i0, template: "@if (categories) {\n  <rolatech-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"course-layout-active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"course-layout-active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n    <!-- <rolatech-list>\n      <router-outlet></router-outlet>\n    </rolatech-list> -->\n  </rolatech-container>\n}\n", styles: [".course-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.course-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseLayoutComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, AppContainerComponent, ListComponent], selector: 'rolatech-course-layout', template: "@if (categories) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"course-layout-active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"course-layout-active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n    <!-- <rolatech-list>\n      <router-outlet></router-outlet>\n    </rolatech-list> -->\n  </rolatech-app-container>\n}\n", styles: [".course-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.course-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+            args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, ContainerComponent, ListComponent], selector: 'rolatech-course-layout', template: "@if (categories) {\n  <rolatech-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"course-layout-active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"course-layout-active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n    <!-- <rolatech-list>\n      <router-outlet></router-outlet>\n    </rolatech-list> -->\n  </rolatech-container>\n}\n", styles: [".course-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.course-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
         }] });
 class CourseSectionContentComponent {
@@ -1907,10 +1903,10 @@ class CourseSectionContentComponent {
     checkout(e) {
         this.router.navigateByUrl(`/carts/checkout/express/courses/${this.courseId}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseSectionContentComponent, isStandalone: true, selector: "rolatech-course-section-content", ngImport: i0, template: "<div class=\"flex lg:flex-row flex-col justify-between w-full mt-2 lg:mt-4\">\n  <div class=\"lg:w-[70%] flex flex-col items-start justify-center px-4 lg:px-6 h-fit\">\n    <div id=\"dplayer\" class=\"w-full h-auto aspect-video rounded-xl\"></div>\n    <div class=\"py-3 w-full\">\n      @if (course) {\n        <div class=\"text-xl font-medium py-3\">\n          {{ course.name }}\n        </div>\n        <div>\n          <rolatech-course-media-owner-renderer\n            [name]=\"instructorName\"\n            [avatar]=\"instructorAvatar\"\n            [username]=\"instructorUsername\"\n          ></rolatech-course-media-owner-renderer>\n        </div>\n        <div class=\"hidden lg:block\">\n          <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"lg:w-[30%] px-4 lg:px-0 lg:pr-6\">\n    <rolatech-course-sections\n      [sections]=\"sections\"\n      [purchased]=\"purchased\"\n      (section)=\"onSection($event)\"\n      (checkout)=\"checkout($event)\"\n    ></rolatech-course-sections>\n  </div>\n  <div class=\"lg:hidden block px-4 lg:px-6\">\n    <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseSectionsComponent, selector: "rolatech-course-sections", inputs: ["purchased", "sections"], outputs: ["section", "checkout"] }, { kind: "component", type: CourseMediaOwnerRendererComponent, selector: "rolatech-course-media-owner-renderer", inputs: ["name", "avatar", "username"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseSectionContentComponent, isStandalone: true, selector: "rolatech-course-section-content", ngImport: i0, template: "<div class=\"flex lg:flex-row flex-col justify-between w-full mt-2 lg:mt-4\">\n  <div class=\"lg:w-[70%] flex flex-col items-start justify-center px-4 lg:px-6 h-fit\">\n    <div id=\"dplayer\" class=\"w-full h-auto aspect-video rounded-xl\"></div>\n    <div class=\"py-3 w-full\">\n      @if (course) {\n        <div class=\"text-xl font-medium py-3\">\n          {{ course.name }}\n        </div>\n        <div>\n          <rolatech-course-media-owner-renderer\n            [name]=\"instructorName\"\n            [avatar]=\"instructorAvatar\"\n            [username]=\"instructorUsername\"\n          ></rolatech-course-media-owner-renderer>\n        </div>\n        <div class=\"hidden lg:block\">\n          <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"lg:w-[30%] px-4 lg:px-0 lg:pr-6\">\n    <rolatech-course-sections\n      [sections]=\"sections\"\n      [purchased]=\"purchased\"\n      (section)=\"onSection($event)\"\n      (checkout)=\"checkout($event)\"\n    ></rolatech-course-sections>\n  </div>\n  <div class=\"lg:hidden block px-4 lg:px-6\">\n    <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseSectionsComponent, selector: "rolatech-course-sections", inputs: ["purchased", "sections"], outputs: ["section", "checkout"] }, { kind: "component", type: CourseMediaOwnerRendererComponent, selector: "rolatech-course-media-owner-renderer", inputs: ["name", "avatar", "username"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseSectionContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseSectionContentComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         AngularCommonModule,
@@ -1928,7 +1924,7 @@ const courseRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-course-course-index.component-D339dt6A.mjs').then((x) => x.CourseIndexComponent),
+                loadComponent: () => import('./rolatech-angular-course-course-index.component-DTXsPt0u.mjs').then((x) => x.CourseIndexComponent),
             },
             {
                 path: 'categories/:id',
@@ -1951,10 +1947,10 @@ const courseRoutes = [
 ];
 class CourseManageContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: CourseManageContentComponent, isStandalone: true, selector: "rolatech-course-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CourseManageContentComponent, isStandalone: true, selector: "rolatech-course-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-content', standalone: true, imports: [CommonModule], template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n" }]
         }] });
@@ -2095,10 +2091,10 @@ class CourseManageDetailsComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseManageDetailsComponent, isStandalone: true, selector: "rolatech-course-manage-details", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (detail of details; track detail) {\n        <rolatech-detail-item\n          [detail]=\"detail\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-detail-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addDetail()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseManageDetailsComponent, isStandalone: true, selector: "rolatech-course-manage-details", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (detail of details; track detail) {\n        <rolatech-detail-item\n          [detail]=\"detail\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-detail-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addDetail()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "18.0.2", ngImport: i0, type: CourseManageDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-details', standalone: true, imports: [DetailItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (detail of details; track detail) {\n        <rolatech-detail-item\n          [detail]=\"detail\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-detail-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addDetail()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
         }], ctorParameters: () => [] });
@@ -2191,14 +2187,14 @@ class CourseManageScheduleComponent extends BaseComponent {
         });
     }
     onScheduleDelete(schedule) {
-        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-            width: '400px',
-            data: {
-                title: '删除课表',
-                message: '确定删除此课表吗?',
-            },
-        });
-        dialogRef.afterClosed().subscribe((result) => {
+        const options = {
+            title: '删除课表',
+            message: '确定删除此课表吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe((result) => {
             if (result) {
                 this.courseService.deleteSchedule(this.id, schedule.id).subscribe({
                     next: (res) => {
@@ -2214,27 +2210,25 @@ class CourseManageScheduleComponent extends BaseComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageScheduleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseManageScheduleComponent, isStandalone: true, selector: "rolatech-course-manage-schedule", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BFE\u7A0B\u8868\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item\n          [value]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onScheduleSave($event)\"\n          (delete)=\"onScheduleDelete($event)\"\n        >\n        </rolatech-schedule-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSchedule()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u589E\u52A0\u8BFE\u8868</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageScheduleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseManageScheduleComponent, isStandalone: true, selector: "rolatech-course-manage-schedule", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BFE\u7A0B\u8868\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item\n          [value]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onScheduleSave($event)\"\n          (delete)=\"onScheduleDelete($event)\"\n        >\n        </rolatech-schedule-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSchedule()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u589E\u52A0\u8BFE\u8868</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "18.0.2", ngImport: i0, type: CourseManageScheduleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageScheduleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-schedule', standalone: true, imports: [ScheduleItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BFE\u7A0B\u8868\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item\n          [value]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onScheduleSave($event)\"\n          (delete)=\"onScheduleDelete($event)\"\n        >\n        </rolatech-schedule-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSchedule()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u589E\u52A0\u8BFE\u8868</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
         }] });
-class CourseManagePricingComponent {
+class CourseManagePricingComponent extends BaseComponent {
     constructor() {
-        this.route = inject(ActivatedRoute);
+        super(...arguments);
         this.courseService = inject(CourseService);
-        this.dialog = inject(MatDialog);
-        this.snackBar = inject(MatSnackBar);
         this.isLoading = false;
         this.pricing = [];
         this.status = CourseStatus;
         this.courseType = CourseType;
-        this.id = this.route.parent?.snapshot.paramMap.get('id');
     }
     ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
         this.find();
     }
     find() {
@@ -2247,45 +2241,51 @@ class CourseManagePricingComponent {
         });
     }
     editPricing() {
-        const dialogRef = this.dialog.open(CoursePricingDialogComponent, {
+        const options = {
             width: '500px',
+            title: '编辑价格',
             height: '90%',
+            cancelText: '取消',
+            confirmText: '确认',
+            component: CoursePricingAddDialogComponent,
             data: {
-                title: '编辑价格',
                 courseId: this.id,
                 pricing: this.pricing,
             },
-        });
-        dialogRef.afterClosed().subscribe((result) => {
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe((result) => {
             if (result) {
                 this.courseService.addPricing(this.id, { pricing: result }).subscribe({
                     next: (res) => {
-                        this.snackBar.open('添加成功');
+                        this.snackBarService.open('编辑成功');
                     },
                     error: (error) => {
-                        this.snackBar.open(error.message);
+                        this.snackBarService.open(error.message);
                     },
                 });
             }
         });
     }
     addPricing() {
-        const dialogRef = this.dialog.open(CoursePricingAddDialogComponent, {
-            disableClose: true,
+        const options = {
             width: '500px',
-            data: {
-                title: '添加价格',
-            },
-        });
-        dialogRef.afterClosed().subscribe((pricing) => {
+            title: '添加价格',
+            cancelText: '取消',
+            confirmText: '确认',
+            component: CoursePricingAddDialogComponent,
+            data: {},
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe((pricing) => {
             if (pricing) {
                 this.courseService.addPricing(this.id, { ...pricing, total: pricing.total * 100 }).subscribe({
                     next: (res) => {
                         this.pricing.push(res.data);
-                        this.snackBar.open('添加成功');
+                        this.snackBarService.open('添加成功');
                     },
                     error: (error) => {
-                        this.snackBar.open(error.message);
+                        this.snackBarService.open(error.message);
                     },
                 });
             }
@@ -2294,44 +2294,44 @@ class CourseManagePricingComponent {
     onPricingSave(pricing) {
         this.courseService.updatePricing(this.id, pricing.id, pricing).subscribe({
             next: (res) => {
-                this.snackBar.open('保存成功');
+                this.snackBarService.open('保存成功');
             },
             error: (e) => {
-                this.snackBar.open(e.message);
+                this.snackBarService.open(e.message);
             },
         });
     }
     onPricingDelete(pricing) {
-        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-            width: '400px',
-            data: {
-                title: '删除价格',
-                message: '确定删除此价格吗?',
-            },
-        });
-        dialogRef.afterClosed().subscribe((result) => {
+        const options = {
+            title: '删除价格',
+            message: '确定删除此价格吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe((result) => {
             if (result) {
                 this.courseService.deletePricing(this.id, pricing.id).subscribe({
                     next: (res) => {
                         remove(this.pricing, {
                             id: pricing.id,
                         });
-                        this.snackBar.open(res.data);
+                        this.snackBarService.open(res.data);
                     },
                     error: (e) => {
-                        this.snackBar.open(e.message);
+                        this.snackBarService.open(e.message);
                     },
                 });
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseManagePricingComponent, isStandalone: true, selector: "rolatech-course-manage-pricing", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item\n          [pricing]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onPricingSave($event)\"\n          (delete)=\"onPricingDelete($event)\"\n        >\n        </rolatech-pricing-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addPricing()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u4EF7\u683C</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManagePricingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseManagePricingComponent, isStandalone: true, selector: "rolatech-course-manage-pricing", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item\n          [pricing]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onPricingSave($event)\"\n          (delete)=\"onPricingDelete($event)\"\n        >\n        </rolatech-pricing-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addPricing()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u4EF7\u683C</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "18.0.2", ngImport: i0, type: CourseManagePricingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManagePricingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-pricing', standalone: true, imports: [PricingItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item\n          [pricing]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onPricingSave($event)\"\n          (delete)=\"onPricingDelete($event)\"\n        >\n        </rolatech-pricing-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addPricing()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u4EF7\u683C</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
-        }], ctorParameters: () => [] });
+        }] });
 class BookingService extends BaseService {
     init() {
@@ -2344,10 +2344,10 @@ class BookingService extends BaseService {
             withCredentials: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: BookingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: BookingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BookingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BookingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: BookingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BookingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2365,10 +2365,10 @@ class InstructorService extends BaseService {
             withCredentials: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: InstructorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: InstructorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: InstructorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: InstructorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: InstructorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: InstructorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2473,10 +2473,10 @@ class CourseManageInfoComponent extends BaseComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseManageInfoComponent, isStandalone: true, selector: "rolatech-course-manage-info", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" 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> \u8BFE\u7A0B\u540D\u79F0 </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> \u8BFE\u7A0B\u63CF\u8FF0 </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\" required>\n          <mat-label>\u5206\u7C7B</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>\u7C7B\u578B</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>\u6559\u5BA4</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=\"\u81EA\u6709\u6559\u5BA4\">\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=\"\u5DF2\u8D2D\u6559\u5BA4\">\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 font-thin\"> {{ 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 type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseManageInfoComponent, isStandalone: true, selector: "rolatech-course-manage-info", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" 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> \u8BFE\u7A0B\u540D\u79F0 </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> \u8BFE\u7A0B\u63CF\u8FF0 </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\" required>\n          <mat-label>\u5206\u7C7B</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>\u7C7B\u578B</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>\u6559\u5BA4</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=\"\u81EA\u6709\u6559\u5BA4\">\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=\"\u5DF2\u8D2D\u6559\u5BA4\">\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 font-thin\"> {{ 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 type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.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"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.0.2", ngImport: i0, type: CourseManageInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-info', standalone: true, imports: [
                         FormsModule,
@@ -2610,10 +2610,10 @@ class CourseManageMediaComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseManageMediaComponent, isStandalone: true, selector: "rolatech-course-manage-media", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p class=\"text-gray-600\">*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($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(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ 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"], outputs: ["mediaItemClick", "deleteMedia"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseManageMediaComponent, isStandalone: true, selector: "rolatech-course-manage-media", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p class=\"text-gray-600\">*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($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(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ 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"], outputs: ["mediaItemClick", "deleteMedia"] }, { 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: "18.0.2", ngImport: i0, type: CourseManageMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageMediaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-media', standalone: true, imports: [MediaListComponent, MediaListItemComponent, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p class=\"text-gray-600\">*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($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(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-course-manage-content>\n" }]
         }], ctorParameters: () => [] });
@@ -2932,10 +2932,10 @@ class CourseManageSectionComponent extends BaseComponent {
         }
         return fileChunkList;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseManageSectionComponent, isStandalone: true, selector: "rolatech-course-manage-section", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u7AE0\u8282\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track $index) {\n        <div class=\"bg-[--rt-raised-background] p-2 mb-2 rounded-lg\">\n          <rolatech-course-section-item\n            [section]=\"section\"\n            (edit)=\"onSectionEdit($event)\"\n            (save)=\"onSectionSave($event)\"\n            (delete)=\"onSectionDelete($event)\"\n            [editId]=\"editId\"\n          >\n            <div class=\"bg-[--rt-base-background] md:ml-8 mt-3 rounded-md divide-y divide-dashed\">\n              @if (section?.lectures) {\n                @for (lecture of section.lectures; track $index) {\n                  <div>\n                    <rolatech-course-section-lecture-item\n                      [lecture]=\"lecture\"\n                      (save)=\"onLectureSave($event)\"\n                      (delete)=\"onLectureDelete(section, $event)\"\n                      (edit)=\"onLectureEdit($event)\"\n                      (upload)=\"onMediaUploadInit(lecture, $event)\"\n                      (mediaEdit)=\"onMediaEdit(lecture, $event)\"\n                      (deleteMedia)=\"onMediaDelete(lecture, $event)\"\n                      [editId]=\"lectureEditId\"\n                    ></rolatech-course-section-lecture-item>\n                  </div>\n                }\n              }\n              <div class=\"p-3\">\n                <button mat-flat-button class=\"max-h-8\" (click)=\"addLecture(section)\">\n                  <mat-icon>add</mat-icon>\n                  <span>\u589E\u52A0\u5C0F\u8282</span>\n                </button>\n              </div>\n            </div>\n          </rolatech-course-section-item>\n        </div>\n      }\n    </div>\n    @if (!hasUnsaved) {\n      <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n        <mat-icon>add</mat-icon>\n        <span>\u589E\u52A0\u7AE0\u8282</span>\n      </button>\n    }\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: CourseSectionItemComponent, selector: "rolatech-course-section-item", inputs: ["section", "actions", "hasUnsaved", "editId"], outputs: ["sectionChange", "actionsChange", "hasUnsavedChange", "editIdChange", "save", "cancel", "delete", "edit", "addLecture"] }, { kind: "component", type: CourseSectionLectureItemComponent, selector: "rolatech-course-section-lecture-item", inputs: ["progress", "lecture", "actions", "hasUnsaved", "editId"], outputs: ["editIdChange", "save", "cancel", "delete", "edit", "mediaEdit", "thumbnailUpload", "upload", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseManageSectionComponent, isStandalone: true, selector: "rolatech-course-manage-section", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u7AE0\u8282\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track $index) {\n        <div class=\"bg-[--rt-raised-background] p-2 mb-2 rounded-lg\">\n          <rolatech-course-section-item\n            [section]=\"section\"\n            (edit)=\"onSectionEdit($event)\"\n            (save)=\"onSectionSave($event)\"\n            (delete)=\"onSectionDelete($event)\"\n            [editId]=\"editId\"\n          >\n            <div class=\"bg-[--rt-base-background] md:ml-8 mt-3 rounded-md divide-y divide-dashed\">\n              @if (section?.lectures) {\n                @for (lecture of section.lectures; track $index) {\n                  <div>\n                    <rolatech-course-section-lecture-item\n                      [lecture]=\"lecture\"\n                      (save)=\"onLectureSave($event)\"\n                      (delete)=\"onLectureDelete(section, $event)\"\n                      (edit)=\"onLectureEdit($event)\"\n                      (upload)=\"onMediaUploadInit(lecture, $event)\"\n                      (mediaEdit)=\"onMediaEdit(lecture, $event)\"\n                      (deleteMedia)=\"onMediaDelete(lecture, $event)\"\n                      [editId]=\"lectureEditId\"\n                    ></rolatech-course-section-lecture-item>\n                  </div>\n                }\n              }\n              <div class=\"p-3\">\n                <button mat-flat-button class=\"max-h-8\" (click)=\"addLecture(section)\">\n                  <mat-icon>add</mat-icon>\n                  <span>\u589E\u52A0\u5C0F\u8282</span>\n                </button>\n              </div>\n            </div>\n          </rolatech-course-section-item>\n        </div>\n      }\n    </div>\n    @if (!hasUnsaved) {\n      <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n        <mat-icon>add</mat-icon>\n        <span>\u589E\u52A0\u7AE0\u8282</span>\n      </button>\n    }\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: CourseSectionItemComponent, selector: "rolatech-course-section-item", inputs: ["section", "actions", "hasUnsaved", "editId"], outputs: ["sectionChange", "actionsChange", "hasUnsavedChange", "editIdChange", "save", "cancel", "delete", "edit", "addLecture"] }, { kind: "component", type: CourseSectionLectureItemComponent, selector: "rolatech-course-section-lecture-item", inputs: ["progress", "lecture", "actions", "hasUnsaved", "editId"], outputs: ["editIdChange", "save", "cancel", "delete", "edit", "mediaEdit", "thumbnailUpload", "upload", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: 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: "18.0.2", ngImport: i0, type: CourseManageSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-section', standalone: true, imports: [
                         CourseSectionItemComponent,
@@ -2998,10 +2998,10 @@ class CourseManageLayoutComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CourseManageLayoutComponent, isStandalone: true, selector: "rolatech-course-manage-layout", ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-3\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-3\">\u56FE\u7247</a>\n      <a routerLink=\"./details\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BE6\u60C5</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u5185\u5BB9</div>\n      <a routerLink=\"./section\" routerLinkActive=\"manage-active\" class=\"p-3\">\u7AE0\u8282</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BFE\u8868</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-3\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 ml-3 md:ml-2\">\n        <!-- <button mat-stroked-button (click)=\"publish()\">\u9884\u89C8</button> -->\n        <button mat-flat-button (click)=\"submitForReview()\">\u63D0\u4EA4\u5BA1\u6838</button>\n      </div>\n    }\n\n    @if (accepted) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u8BFE\u7A0B</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:5px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CourseManageLayoutComponent, isStandalone: true, selector: "rolatech-course-manage-layout", ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-3\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-3\">\u56FE\u7247</a>\n      <a routerLink=\"./details\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BE6\u60C5</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u5185\u5BB9</div>\n      <a routerLink=\"./section\" routerLinkActive=\"manage-active\" class=\"p-3\">\u7AE0\u8282</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BFE\u8868</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-3\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 ml-3 md:ml-2\">\n        <!-- <button mat-stroked-button (click)=\"publish()\">\u9884\u89C8</button> -->\n        <button mat-flat-button (click)=\"submitForReview()\">\u63D0\u4EA4\u5BA1\u6838</button>\n      </div>\n    }\n\n    @if (accepted) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u8BFE\u7A0B</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:5px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CourseManageLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CourseManageLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-course-manage-layout', standalone: true, imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet, CourseManageContentComponent], template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-3\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-3\">\u56FE\u7247</a>\n      <a routerLink=\"./details\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BE6\u60C5</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u5185\u5BB9</div>\n      <a routerLink=\"./section\" routerLinkActive=\"manage-active\" class=\"p-3\">\u7AE0\u8282</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BFE\u8868</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-3\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 ml-3 md:ml-2\">\n        <!-- <button mat-stroked-button (click)=\"publish()\">\u9884\u89C8</button> -->\n        <button mat-flat-button (click)=\"submitForReview()\">\u63D0\u4EA4\u5BA1\u6838</button>\n      </div>\n    }\n\n    @if (accepted) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u8BFE\u7A0B</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:5px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}\n"] }]
         }], ctorParameters: () => [] });
@@ -3044,4 +3044,4 @@ const courseManageRoutes = [
  */
 export { CourseDetailsComponent as A, CourseMediaOwnerRendererComponent as B, CourseService as C, CourseSectionLectureVideoDialogComponent as D, ScheduleItemComponent as E, DetailItemComponent as F, courseItem_component as G, PricingItemComponent as P, ScheduleDate as S, CategoryService as a, courseManageRoutes as b, courseRoutes as c, CourseStatus as d, CourseRequestStatus as e, CourseType as f, CourseReviewStatus as g, CourseSectionLectureContentType as h, CoursePreviewComponent as i, CourseInfoComponent as j, CourseMediaComponent as k, CoursePricingComponent as l, CourseActionComponent as m, CourseScheduleComponent as n, CourseSectionsComponent as o, provideAngulaCourse as p, CourseSectionItemComponent as q, CourseSectionLectureItemComponent as r, CourseSectionLectureVideoItemComponent as s, CourseItemComponent as t, CoursePricingAddDialogComponent as u, CourseScheduleAddDialogComponent as v, CoursePricingDialogComponent as w, CourseScheduleDialogComponent as x, CourseDetailsDialogComponent as y, CourseEditDialogComponent as z };
-//# sourceMappingURL=rolatech-angular-course-rolatech-angular-course-AX5M1HKZ.mjs.map
+//# sourceMappingURL=rolatech-angular-course-rolatech-angular-course-DxJB5PFG.mjs.map