@rolatech/angular-course 17.2.1 → 17.2.2

package/fesm2022/rolatech-angular-course.mjs

@@ -1,20 +1,48 @@
 import * as i0 from '@angular/core';
-import { Injectable, importProvidersFrom, makeEnvironmentProviders, input, Component, inject, output, ElementRef, PLATFORM_ID, ViewEncapsulation } from '@angular/core';
+import { Injectable, importProvidersFrom, makeEnvironmentProviders, Component, input, inject, output, ViewEncapsulation, model, effect, PLATFORM_ID, ElementRef, Inject, viewChild } from '@angular/core';
+import * as i6 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { CommonModule, ViewportScroller, NgClass, isPlatformBrowser } from '@angular/common';
-import * as i1 from '@angular/router';
+import { CommonModule, NgClass, DatePipe, isPlatformBrowser, ViewportScroller } from '@angular/common';
+import * as i1$3 from '@angular/router';
 import { RouterModule, RouterLink, ActivatedRoute, Router } from '@angular/router';
-import { BaseService } from '@rolatech/angular-services';
-import { AngularCommonModule, DurationPipe } from '@rolatech/angular-common';
-import { BaseComponent, AngularComponentsModule, MediaPreviewDialogComponent, AppContainerComponent } from '@rolatech/angular-components';
-import { AuthService, AuthUserService } from '@rolatech/angular-auth';
-import { CommentsComponent } from '@rolatech/angular-comment';
+import { BaseService, DialogService } from '@rolatech/angular-services';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { MatDialog } from '@angular/material/dialog';
-import * as i1$1 from '@angular/material/expansion';
+import * as i1$2 from '@angular/material/dialog';
+import { MatDialog, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
+import { MediaPreviewDialogComponent, AngularComponentsModule, MediaListComponent, MediaListItemComponent, BaseComponent, AppContainerComponent } from '@rolatech/angular-components';
+import * as i1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
+import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { DurationPipe, AngularCommonModule } from '@rolatech/angular-common';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i7$1 from '@angular/material/stepper';
+import { MatStepperModule, MatStepper } from '@angular/material/stepper';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import * as i7 from '@angular/material/core';
+import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatOptionModule } from '@angular/material/core';
+import moment from 'moment';
+import * as i6$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i3$1 from '@angular/cdk/text-field';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import * as i2$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$3 from '@angular/material/snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import * as i4 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { first, remove, findLastIndex } from 'lodash';
+import { AuthService, AuthUserService } from '@rolatech/angular-auth';
+import { CommentsComponent } from '@rolatech/angular-comment';
 
 var CourseStatus;
 (function (CourseStatus) {
@@ -507,84 +535,68 @@ function provideAngulaCourse() {
     return makeEnvironmentProviders(providers);
 }
 
-class CourseItemComponent {
+class CoursePreviewComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CoursePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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: "17.3.0", ngImport: i0, type: CoursePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-preview', standalone: true, imports: [], template: "<p>course-preview works!</p>\n" }]
+        }] });
+
+class CourseInfoComponent {
     constructor() {
         this.course = input.required();
-        this.row = input(true);
+        this.instructor = input();
+        this.username = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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 } }, ngImport: i0, template: "@if (row()) {\n  <div class=\"flex w-full flex-row\">\n    <div class=\"h-fit w-2/5 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n      <div>\n        <div class=\"sm:text-xl font-medium break-words line-clamp-2 whitespace-normal\">{{ course().name }}</div>\n        <div class=\"invisible h-0 sm:h-auto sm:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div class=\"bg-gray-200 rounded-lg h-fit\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md sm:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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]=\"['../../instructors/', '@' + 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-item', standalone: true, imports: [], template: "@if (row()) {\n  <div class=\"flex w-full flex-row\">\n    <div class=\"h-fit w-2/5 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n      <div>\n        <div class=\"sm:text-xl font-medium break-words line-clamp-2 whitespace-normal\">{{ course().name }}</div>\n        <div class=\"invisible h-0 sm:h-auto sm:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div class=\"bg-gray-200 rounded-lg h-fit\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md sm:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'rolatech-course-info', standalone: true, imports: [MatIconModule, RouterLink], 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]=\"['../../instructors/', '@' + 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"] }]
         }] });
 
-class CourseCategoryComponent extends BaseComponent {
+class CourseMediaComponent {
     constructor() {
-        super(...arguments);
-        this.categoryService = inject(CategoryService);
-        this.courseService = inject(CourseService);
-        this.courses = [];
-        this.categories = [];
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.findAllCategories();
-        this.route.paramMap.subscribe((params) => {
-            const id = params.get('id');
-            this.findCategoryById(id);
-            this.findCoursesByCategoryId(id);
-        });
-    }
-    findAllCategories() {
-        this.categoryService.find({}).subscribe({
-            next: (res) => {
-                this.categories = res.data;
-            },
-        });
-    }
-    findCategoryById(id) {
-        this.categoryService.get(id).subscribe({
-            next: (res) => {
-                this.category = res.data;
-            },
-        });
-    }
-    findAllCourses() {
-        this.courseService.find({}).subscribe({
-            next: (res) => {
-                this.courses = res.data;
-            },
-        });
+        this.dialog = inject(MatDialog);
+        this.media = input([]);
+        this.min = input(false);
+        this.mediaIndex = 0;
     }
-    findCoursesByCategoryId(id) {
-        this.loading = true;
-        const options = {
-            filter: `categories:${id},published:true`,
-        };
-        this.courseService.find(options).subscribe({
-            next: (res) => {
-                this.courses = res.data;
-                this.loading = false;
-            },
-            error: (error) => {
-                this.loading = false;
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(MediaPreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
             },
         });
+        dialogRef.afterClosed().subscribe((result) => { });
     }
-    loadCoursesByCategory(item) {
-        //  [routerLink] = "['../../', item.id]";
-        this.router.navigate([`../../${item.id}`], {
-            relativeTo: this.route,
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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=\"sm:w-80 object-cover aspect-video bg-gray-200 rounded-lg\">\n      @if (media()) {\n        <img class=\"aspect-video object-cover w-full rounded-lg\" [src]=\"media()[0].url\" />\n      }\n    </div>\n  } @else {\n    <div>\n      <div class=\"object-cover aspect-video bg-gray-200\">\n        <img class=\"aspect-video object-cover w-full rounded-md\" [src]=\"media()[mediaIndex].url\" />\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          <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"item.url\" />\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-media', standalone: true, imports: [NgClass], template: "@if (media()) {\n  @if (min()) {\n    <div class=\"sm:w-80 object-cover aspect-video bg-gray-200 rounded-lg\">\n      @if (media()) {\n        <img class=\"aspect-video object-cover w-full rounded-lg\" [src]=\"media()[0].url\" />\n      }\n    </div>\n  } @else {\n    <div>\n      <div class=\"object-cover aspect-video bg-gray-200\">\n        <img class=\"aspect-video object-cover w-full rounded-md\" [src]=\"media()[mediaIndex].url\" />\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          <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"item.url\" />\n        </div>\n      }\n    </div>\n  }\n}\n" }]
+        }] });
+
+class CoursePricingComponent {
+    constructor() {
+        this.pricing = input([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CourseCategoryComponent, isStandalone: true, selector: "rolatech-course-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden sm: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-slate-200 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 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-slate-200 rounded col-span-2\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-slate-200 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-[25%] sm:min-w-[33%] hover:bg-gray-100\"\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.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CoursePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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: "17.3.0", ngImport: i0, type: CourseCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CoursePricingComponent, 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 sm: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-slate-200 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 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-slate-200 rounded col-span-2\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-slate-200 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-[25%] sm:min-w-[33%] hover:bg-gray-100\"\n        [routerLink]=\"['../../', item.id]\"\n      >\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n" }]
+            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" }]
         }] });
 
 class CourseActionComponent {
@@ -612,50 +624,812 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             args: [{ selector: 'rolatech-course-action', standalone: true, 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\n    class=\"p-3 bg-orange-600 text-white text-center mt-3 cursor-pointer rounded-md hover:bg-orange-700\"\n    target=\"_blank\"\n    (click)=\"onCheckout(course())\"\n    >\u7ACB\u5373\u8D2D\u4E70</a\n  >\n  <a\n    class=\"p-3 border border-black text-center mt-3 cursor-pointer rounded-md hover:bg-gray-100\"\n    target=\"_blank\"\n    (click)=\"onWish(course())\"\n    >{{ inWishList() ? '\u79FB\u9664\u6536\u85CF' : '\u52A0\u5165\u6536\u85CF' }}</a\n  >\n</div>\n" }]
         }] });
 
-class CourseDetailsComponent {
+class CourseScheduleComponent {
     constructor() {
-        this.details = input.required();
-        this.instructor = input();
-        this.username = input();
+        this.schedule = input([]);
+    }
+    ngOnInit() {
+        // this.formatSchedule();
+    }
+    formatSchedule() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CourseScheduleComponent, isStandalone: true, selector: "rolatech-course-schedule", inputs: { schedule: { classPropertyName: "schedule", publicName: "schedule", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- \u8BFE\u8868 -->\n@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 class=\"bg-white\">\n          <div class=\"text-gray-600 font-thin pt-2\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1.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: "17.3.0", ngImport: i0, type: CourseScheduleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-schedule', standalone: true, imports: [MatExpansionModule, MatIconModule], template: "<!-- \u8BFE\u8868 -->\n@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 class=\"bg-white\">\n          <div class=\"text-gray-600 font-thin pt-2\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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"] }]
+        }] });
+
+class CourseSectionsComponent {
+    constructor() {
+        this.purchased = input(false);
+        this.sections = input([]);
+        this.section = output();
+        this.checkout = output();
+        this.panelOpenState = false;
+    }
+    onSection(section, lecture) {
+        this.section.emit({ section, lecture });
+    }
+    onCheckout(section, lecture) {
+        this.checkout.emit({ section, lecture });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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-xl font-medium py-2\">\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 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 class=\"bg-white\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1.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: "17.3.0", 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-xl font-medium py-2\">\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 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 class=\"bg-white\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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"] }]
+        }] });
+
+class CourseSectionItemComponent {
+    constructor() {
+        this.section = model.required();
+        this.actions = model();
+        this.hasUnsaved = model();
+        this.editId = model();
+        this.save = output();
+        this.cancel = output();
+        this.delete = output();
+        this.edit = output();
+        this.addLecture = output();
+        this.editing = false;
+        this.isExpand = false;
+    }
+    ngOnInit() { }
+    onSave(section) {
+        this.editing = false;
+        this.editId.set(null);
+        this.save.emit(section);
+    }
+    onCancel(section) {
+        this.editing = false;
+        this.editId.set(null);
+        this.cancel.emit(section);
+    }
+    onDelete(section) {
+        this.delete.emit(section);
+    }
+    onEdit(section) {
+        this.editId.set(null);
+        this.editing = true;
+        this.edit.emit(section);
+    }
+    onAddLecture(section) {
+        this.addLecture.emit(section);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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\">\n        <div class=\"w-full flex gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <mat-icon (click)=\"onEdit(section())\" class=\"cursor-pointer\">edit</mat-icon>\n          <mat-icon class=\"cursor-pointer\" (click)=\"onDelete(section())\">delete</mat-icon>\n        </div>\n        <button mat-icon-button (click)=\"isExpand = !isExpand\">\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      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n        placeholder=\"\u6807\u9898\"\n        [(ngModel)]=\"section().title\"\n      />\n      <div class=\"w-full flex flex-row justify-end p-4 gap-3\">\n        <button mat-button (click)=\"onCancel(section())\">\u53D6\u6D88</button>\n        <button mat-flat-button color=\"primary\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\n  <!-- <mat-form-field appearance=\"fill\">\n      <mat-label>\u63CF\u8FF0</mat-label>\n      <input matInput placeholder=\"\u63CF\u8FF0\" [(ngModel)]=\"section.description\" />\n    </mat-form-field> -->\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: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-section-item', standalone: true, imports: [MatIconModule, FormsModule, MatButtonModule], template: "<div class=\"flex flex-col grow\">\n  @if (section().id !== editId()) {\n    <div>\n      <div class=\"flex justify-between items-center\">\n        <div class=\"w-full flex gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <mat-icon (click)=\"onEdit(section())\" class=\"cursor-pointer\">edit</mat-icon>\n          <mat-icon class=\"cursor-pointer\" (click)=\"onDelete(section())\">delete</mat-icon>\n        </div>\n        <button mat-icon-button (click)=\"isExpand = !isExpand\">\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      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n        placeholder=\"\u6807\u9898\"\n        [(ngModel)]=\"section().title\"\n      />\n      <div class=\"w-full flex flex-row justify-end p-4 gap-3\">\n        <button mat-button (click)=\"onCancel(section())\">\u53D6\u6D88</button>\n        <button mat-flat-button color=\"primary\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\n  <!-- <mat-form-field appearance=\"fill\">\n      <mat-label>\u63CF\u8FF0</mat-label>\n      <input matInput placeholder=\"\u63CF\u8FF0\" [(ngModel)]=\"section.description\" />\n    </mat-form-field> -->\n</div>\n" }]
+        }] });
+
+const MY_FORMATS = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class ScheduleItemComponent {
+    constructor() {
+        this.value = input();
+        this.actions = input(false);
+        this.shadow = input(false);
+        this.delete = output();
+        this.save = output();
+        this.date = ScheduleDate;
+        this.schedule = effect(() => {
+            this.schedule = this.value();
+            this.schedule.startDate = moment(this.schedule.startAt).format('YYYY-MM-DD');
+            this.schedule.startTime = moment(this.schedule.startAt).format('HH:mm');
+            this.schedule.endDate = moment(this.schedule.endAt).format('YYYY-MM-DD');
+            this.schedule.endTime = moment(this.schedule.endAt).format('HH:mm');
+        });
+    }
+    // constructor() {
+    //   this.schedule = this.value();
+    // }
+    ngOnInit() {
+        // this.schedule = computed(() => {
+        //   console.log(this.value());
+        //   return this.value();
+        // })();
+        // this.schedule = this.value();
+        // this.schedule.startDate = moment(this.schedule.startAt).format('YYYY-MM-DD');
+        // this.schedule.startTime = moment(this.schedule.startAt).format('HH:mm');
+        // this.schedule.endDate = moment(this.schedule.endAt).format('YYYY-MM-DD');
+        // this.schedule.endTime = moment(this.schedule.endAt).format('HH:mm');
+    }
+    ngOnDestroy() {
+        const { startAt, endAt, startTime, startDate, endDate, endTime } = this.schedule;
+        this.schedule.startAt = this.schedule.startDate + ' ' + this.schedule.startTime;
+        this.schedule.endAt = this.schedule.endDate + ' ' + this.schedule.endTime;
+        delete this.schedule.startDate;
+        delete this.schedule.startTime;
+        delete this.schedule.endDate;
+        delete this.schedule.endTime;
+    }
+    startDateChanged(event) { }
+    startTimeChanged(event) { }
+    endDateChanged(event) { }
+    endTimeChanged(event) { }
+    onSave(schedule) {
+        this.format();
+        this.save.emit(schedule);
+    }
+    onDelete(schedule) {
+        this.delete.emit(schedule);
+    }
+    format() {
+        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: "17.3.0", ngImport: i0, type: ScheduleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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 }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", save: "save" }, providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+            DatePipe,
+        ], ngImport: i0, template: "<div class=\"flex flex-col\" [ngClass]=\"{ shadow: shadow() }\">\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-4\">\n    <button mat-button (click)=\"onDelete(schedule)\">\u5220\u9664</button>\n    <button mat-button (click)=\"onSave(schedule)\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.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$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.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$1.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "17.3.0", ngImport: i0, type: ScheduleItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-schedule-item', providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+                        DatePipe,
+                    ], standalone: true, imports: [
+                        NgClass,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        TextFieldModule,
+                        MatDatepickerModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatButtonModule,
+                        MatDividerModule,
+                    ], template: "<div class=\"flex flex-col\" [ngClass]=\"{ shadow: shadow() }\">\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-4\">\n    <button mat-button (click)=\"onDelete(schedule)\">\u5220\u9664</button>\n    <button mat-button (click)=\"onSave(schedule)\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n" }]
+        }] });
+
+class CourseSectionLectureVideoDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.thumbnailUpload = output();
+        this.courseService = inject(CourseService);
+        this.courseSectionService = inject(CourseSectionService);
+        this.snackBar = inject(MatSnackBar);
+        this.platformId = inject(PLATFORM_ID);
         this.el = inject(ElementRef);
-        this.viewportScroller = inject(ViewportScroller);
+        this.lecture = data.data;
+    }
+    ngAfterViewInit() {
+        this.initPlayer(this.lecture.item.url, this.lecture.item.thumbnail);
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    initPlayer(url, thumbnail) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        // 'https://cos-video-1258344699.cos.ap-guangzhou.tencentcos.cn/test.mp4',
+        if (!this.player) {
+            const playerContainer = this.el.nativeElement.querySelector('#dplayer');
+            this.player = new DPlayer({
+                container: playerContainer,
+                screenshot: true,
+                preload: 'metadata',
+                video: {
+                    url: url,
+                    pic: thumbnail,
+                },
+            });
+            // this.player.on('loadedmetadata', () => {
+            //   console.log('Video duration:', this.player.video.duration);
+            // });
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        if (this.player) {
+            this.player.destroy();
+        }
+    }
+    onThumbnailUpload(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                this.mediaSrc = reader.result;
+                const formData = new FormData();
+                formData.append('file', file);
+                this.courseService.uploadLectureVideoThumbnail(this.lecture.item.id, formData).subscribe({
+                    next: (res) => {
+                        this.lecture.item = res.data;
+                        this.snackBar.open('上传成功');
+                        this.player.switchVideo({
+                            url: this.lecture.item.url,
+                            pic: res.data.thumbnail,
+                        });
+                    },
+                });
+            };
+            reader.onerror = (error) => { };
+        }
+    }
+    onPreviewChange(event) {
+        this.courseSectionService.canBePreviewed(this.lecture.item.id, { canBePreviewed: event.checked }).subscribe({
+            next: (res) => {
+                this.lecture.item.canBePreviewed = res.data.canBePreviewed;
+                // this.lecture = res.data;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionLectureVideoDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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$2.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: "17.3.0", ngImport: i0, type: CourseSectionLectureVideoDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-section-lecture-video-dialog', standalone: true, imports: [
+                        MatIconModule,
+                        MatDividerModule,
+                        FormsModule,
+                        MatStepperModule,
+                        ScheduleItemComponent,
+                        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" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class CourseSectionLectureItemComponent {
+    constructor() {
         this.platformId = inject(PLATFORM_ID);
-        this.show = false;
-        this.mediaIndex = 0;
-        this.finalSchedule = [];
+        this.el = inject(ElementRef);
+        this.dialogService = inject(DialogService);
+        this.myVideo = viewChild('video');
+        this.progress = input(0);
+        this.lecture = input.required();
+        this.actions = input(true);
+        this.hasUnsaved = input(false);
+        this.editId = model();
+        this.save = output();
+        this.cancel = output();
+        this.delete = output();
+        this.edit = output();
+        this.mediaEdit = output();
+        this.thumbnailUpload = output();
+        this.upload = output();
+        this.deleteMedia = output();
+        this.editing = false;
     }
     ngOnInit() { }
-    onClickScroller(id) {
-        this.viewportScroller.scrollToAnchor(id);
+    onSave(lecture) {
+        this.editing = false;
+        this.editId.set(null);
+        this.save.emit(lecture);
+    }
+    onCancel(lecture) {
+        this.editing = false;
+        this.editId.set(null);
+        this.cancel.emit(lecture);
+    }
+    onDelete(lecture) {
+        this.delete.emit(lecture);
+    }
+    onEdit(lecture) {
+        this.editId.set(lecture.id);
+        this.editing = true;
+        this.edit.emit(lecture);
+    }
+    onMediaEdit(lecture) {
+        this.editId.set(lecture.id);
+        this.editing = true;
+        // this.mediaEdit.emit(lecture);
+        const options = {
+            title: '编辑视频',
+            cancelText: '取消',
+            confirmText: '确定',
+            data: this.lecture,
+            width: '80vw',
+            height: '100%',
+            component: CourseSectionLectureVideoDialogComponent,
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    const data = {
+                        name: res,
+                    };
+                }
+            },
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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                <img class=\"object-cover\" [src]=\"item.url + '?imageMogr2/format/avif'\" />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [""] }); }
+    onVideoThumbnailUpload(video) {
+        this.thumbnailUpload.emit(video);
+    }
+    onUpload(id, data) {
+        this.lecture().isUploading = true;
+        this.upload.emit({ id, data });
+    }
+    onDeleteMedia(data) {
+        this.deleteMedia.emit(data);
+    }
+    onLoadedMetadata(event) {
+        if (this.lecture().item.duration) {
+            return;
+        }
+        const videoElement = event.target;
+        this.lecture().item.duration = videoElement.duration;
+        // console.log('Video Width:', videoElement.videoWidth);
+        // console.log('Video Height:', videoElement.videoHeight);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionLectureItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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\">\n      <span>{{ lecture().title }}</span>\n      <mat-icon (click)=\"onEdit(lecture())\" class=\"cursor-pointer\">edit</mat-icon>\n      <mat-icon class=\"cursor-pointer\" (click)=\"onDelete(lecture())\">delete</mat-icon>\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n        placeholder=\"\u6807\u9898\"\n        [(ngModel)]=\"lecture().title\"\n      />\n      <div class=\"w-full flex flex-row justify-end p-4 gap-3\">\n        <button mat-button (click)=\"onCancel(lecture())\">\u53D6\u6D88</button>\n        <button mat-flat-button color=\"primary\" (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 (click)=\"onMediaEdit(lecture().item)\">\n                <mat-icon>edit</mat-icon>\n                <span>\u7F16\u8F91</span>\n              </button>\n              <button mat-button (click)=\"onDeleteMedia(lecture().item)\">\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 color=\"primary\" (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: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionLectureItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-details', standalone: true, imports: [], 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                <img class=\"object-cover\" [src]=\"item.url + '?imageMogr2/format/avif'\" />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'rolatech-course-section-lecture-item', standalone: true, imports: [
+                        MatIconModule,
+                        AngularCommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatDividerModule,
+                        AngularComponentsModule,
+                        DurationPipe,
+                    ], template: "<div class=\"flex flex-col grow p-2\">\n  @if (lecture().id !== editId()) {\n    <div class=\"w-full flex gap-3 p-3\">\n      <span>{{ lecture().title }}</span>\n      <mat-icon (click)=\"onEdit(lecture())\" class=\"cursor-pointer\">edit</mat-icon>\n      <mat-icon class=\"cursor-pointer\" (click)=\"onDelete(lecture())\">delete</mat-icon>\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n        placeholder=\"\u6807\u9898\"\n        [(ngModel)]=\"lecture().title\"\n      />\n      <div class=\"w-full flex flex-row justify-end p-4 gap-3\">\n        <button mat-button (click)=\"onCancel(lecture())\">\u53D6\u6D88</button>\n        <button mat-flat-button color=\"primary\" (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 (click)=\"onMediaEdit(lecture().item)\">\n                <mat-icon>edit</mat-icon>\n                <span>\u7F16\u8F91</span>\n              </button>\n              <button mat-button (click)=\"onDeleteMedia(lecture().item)\">\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 color=\"primary\" (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"] }]
         }] });
 
-class CourseInfoComponent {
+class CourseSectionLectureVideoItemComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionLectureVideoItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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: "17.3.0", 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" }]
+        }] });
+
+class CourseItemComponent {
     constructor() {
         this.course = input.required();
-        this.instructor = input();
-        this.username = input();
+        this.row = input(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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]=\"['../../instructors/', '@' + 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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 } }, ngImport: i0, template: "@if (row()) {\n  <div class=\"flex w-full flex-row\">\n    <div class=\"h-fit w-2/5 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n      <div>\n        <div class=\"sm:text-xl font-medium break-words line-clamp-2 whitespace-normal\">{{ course().name }}</div>\n        <div class=\"invisible h-0 sm:h-auto sm:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div class=\"bg-gray-200 rounded-lg h-fit\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md sm:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-info', standalone: true, imports: [MatIconModule, RouterLink], 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]=\"['../../instructors/', '@' + 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"] }]
+            args: [{ selector: 'rolatech-course-item', standalone: true, imports: [], template: "@if (row()) {\n  <div class=\"flex w-full flex-row\">\n    <div class=\"h-fit w-2/5 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n      <div>\n        <div class=\"sm:text-xl font-medium break-words line-clamp-2 whitespace-normal\">{{ course().name }}</div>\n        <div class=\"invisible h-0 sm:h-auto sm:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div class=\"bg-gray-200 rounded-lg h-fit\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <img class=\"w-full object-cover aspect-video rounded-lg\" [src]=\"course().media[0].url\" />\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md sm:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md sm:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n" }]
         }] });
 
-class CourseMediaComponent {
+class PricingItemComponent {
     constructor() {
-        this.dialog = inject(MatDialog);
-        this.media = input([]);
-        this.min = input(false);
-        this.mediaIndex = 0;
+        this.actions = input(false);
+        this.shadow = input(false);
+        this.pricing = model.required();
+        this.delete = output();
+        this.save = output();
+    }
+    ngOnInit() {
+        this.pricing().total = this.pricing().total / 100;
+    }
+    onSave(pricing) {
+        const finalPricing = {
+            ...pricing,
+            total: pricing.total * 100,
+        };
+        this.save.emit(finalPricing);
+    }
+    onDelete(pricing) {
+        this.delete.emit(pricing);
+    }
+    setTwoNumberDecimal(e) {
+        this.pricing().total = e;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PricingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: PricingItemComponent, isStandalone: true, selector: "rolatech-pricing-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", 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\" [ngClass]=\"{ shadow: shadow() }\">\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-4\">\n    <button mat-button (click)=\"onDelete(pricing())\">\u5220\u9664</button>\n    <button mat-button (click)=\"onSave(pricing())\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.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: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "17.3.0", 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\" [ngClass]=\"{ shadow: shadow() }\">\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-4\">\n    <button mat-button (click)=\"onDelete(pricing())\">\u5220\u9664</button>\n    <button mat-button (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;
+        this.pricing = {
+            min: 0,
+            max: 0,
+            total: 0,
+        };
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CoursePricingAddDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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", "shadow", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "17.3.0", 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$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class CourseScheduleAddDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.schedule = {
+            title: '',
+            content: '',
+            startAt: '',
+            endAt: '',
+        };
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseScheduleAddDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CourseScheduleAddDialogComponent, isStandalone: true, selector: "rolatech-course-schedule-add-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full\">\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-y-auto max-h-[55vh] px-3\">\n    <rolatech-schedule-item [value]=\"schedule\" [shadow]=\"false\"></rolatech-schedule-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]=\"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: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions", "shadow"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "17.3.0", ngImport: i0, type: CourseScheduleAddDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-schedule-add-dialog', standalone: true, imports: [MatIconModule, ScheduleItemComponent, MatButtonModule, MatDialogClose], template: "<div class=\"flex flex-col h-full\">\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-y-auto max-h-[55vh] px-3\">\n    <rolatech-schedule-item [value]=\"schedule\" [shadow]=\"false\"></rolatech-schedule-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]=\"schedule\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class CoursePricingDialogComponent {
+    constructor(dialogRef, data, courseService, snackBar, dialog) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.courseService = courseService;
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+        this.pricing = [];
+        this.courseId = data.courseId;
+        this.pricing = data.pricing;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    addPricing() {
+        this.pricing.push({
+            min: 0,
+            max: 0,
+            total: 0,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CoursePricingDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "shadow", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "17.3.0", ngImport: i0, type: CoursePricingDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-pricing-dialog', standalone: true, imports: [
+                        MatIconModule,
+                        MatDividerModule,
+                        FormsModule,
+                        MatStepperModule,
+                        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-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" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CourseService }, { type: i3$3.MatSnackBar }, { type: i1$2.MatDialog }] });
+
+class CourseScheduleDialogComponent {
+    constructor(dialogRef, data, courseService, snackBar, dialog) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.courseService = courseService;
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+        this.schedule = [];
+        this.courseId = data.courseId;
+        this.schedule = data.schedule;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    addSchedule() {
+        if (!this.schedule) {
+            this.schedule = [];
+        }
+        this.schedule.push({
+            title: '',
+            content: '',
+            startAt: '',
+            endAt: '',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseScheduleDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions", "shadow"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "17.3.0", ngImport: i0, type: CourseScheduleDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-schedule-dialog', standalone: true, imports: [
+                        MatIconModule,
+                        MatDividerModule,
+                        FormsModule,
+                        MatStepperModule,
+                        ScheduleItemComponent,
+                        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-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" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CourseService }, { type: i3$3.MatSnackBar }, { type: i1$2.MatDialog }] });
+
+class DetailItemComponent {
+    constructor() {
+        this.isUploading = input();
+        this.detail = input.required();
+        this.shadow = input(true);
+        this.actions = input(false);
+        this.selectMedia = input();
+        this.upload = output();
+        this.delete = output();
+        this.save = output();
+        this.deleteMedia = output();
+    }
+    ngOnInit() {
+        this.selectedImg = this.detail().media ? this.detail().media[0] : null;
+    }
+    onUpload(id, data) {
+        this.upload.emit({ id, data });
+    }
+    onMediaItemClick(image) {
+        this.selectedImg = image;
+    }
+    select(item) {
+        this.selectedImg = item;
+    }
+    deleteImage() { }
+    onSave(detail) {
+        this.save.emit(detail);
+    }
+    onDelete(detail) {
+        this.delete.emit(detail);
+    }
+    onDeleteMedia(id, media) {
+        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: "17.3.0", ngImport: i0, type: DetailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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 }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, 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\" [ngClass]=\"{ shadow: shadow() }\">\n  <div class=\"flex flex-col md:flex-row pt-6\">\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=\"md: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\n            style=\"display: none\"\n            type=\"file\"\n            accept=\"image/*\"\n            (change)=\"onUpload(detail().id, $event)\"\n            #fileInput\n          />\n          <div class=\"add-button\">\n            <img\n              (click)=\"fileInput.click()\"\n              class=\"tile-media\"\n              src=\"assets/images/baseline_add_black_48dp.png\"\n              alt=\"add image\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-4\">\n    <button mat-button (click)=\"onDelete(detail())\">\u5220\u9664</button>\n    <button mat-button (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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.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$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.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: i4.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: "17.3.0", ngImport: i0, type: DetailItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-detail-item', standalone: true, imports: [
+                        NgClass,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        TextFieldModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressBarModule,
+                        MatDividerModule,
+                    ], template: "<div class=\"mb-8\" [ngClass]=\"{ shadow: shadow() }\">\n  <div class=\"flex flex-col md:flex-row pt-6\">\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=\"md: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\n            style=\"display: none\"\n            type=\"file\"\n            accept=\"image/*\"\n            (change)=\"onUpload(detail().id, $event)\"\n            #fileInput\n          />\n          <div class=\"add-button\">\n            <img\n              (click)=\"fileInput.click()\"\n              class=\"tile-media\"\n              src=\"assets/images/baseline_add_black_48dp.png\"\n              alt=\"add image\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-4\">\n    <button mat-button (click)=\"onDelete(detail())\">\u5220\u9664</button>\n    <button mat-button (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"] }]
+        }], ctorParameters: () => [] });
+
+class CourseDetailsDialogComponent {
+    constructor(dialogRef, data, courseService, snackBar, dialog) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.courseService = courseService;
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+        this.details = [];
+        this.courseId = data.courseId;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    addDetail() {
+        this.courseService
+            .addDetail(this.courseId, {
+            title: '',
+            description: '',
+            content: '',
+            media: [],
+        })
+            .subscribe({
+            next: (res) => {
+                const detail = res.data;
+                this.details.push({
+                    id: detail.id,
+                    title: '',
+                    description: '',
+                    content: '',
+                    media: [],
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onDetailMediaUpload(event) { }
+    onDetailMediaDelete(event) { }
+    onDetailSave(event) { }
+    onDetailDelete(detail) {
+        this.courseService.deleteDetail(this.courseId, detail.id).subscribe({
+            next: (res) => {
+                this.snackBar.open(res.data);
+                remove(this.details, {
+                    id: detail.id,
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseDetailsDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "shadow", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "17.3.0", ngImport: i0, type: CourseDetailsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-details-dialog', standalone: true, imports: [
+                        MatIconModule,
+                        MatDividerModule,
+                        FormsModule,
+                        MatStepperModule,
+                        DetailItemComponent,
+                        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-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" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CourseService }, { type: i3$3.MatSnackBar }, { type: i1$2.MatDialog }] });
+
+class CourseEditDialogComponent {
+    constructor(dialogRef, data, categoryService, courseService, snackBar, dialog) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.categoryService = categoryService;
+        this.courseService = courseService;
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+        this.isUploading = false;
+        this.courseType = [
+            {
+                key: 'ONLINE',
+                value: '线上',
+            },
+            {
+                key: 'OFFLINE',
+                value: '线下',
+            },
+            {
+                key: 'MIXED',
+                value: '混合',
+            },
+        ];
+        this.date = ScheduleDate;
+        this.lastStepper = false;
+        this.firstStepper = true;
+        this.stepper = viewChild.required(MatStepper);
+        this.course = data.course;
+        this.classrooms = data.classrooms;
+    }
+    ngOnInit() {
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    compareFn(o1, o2) {
+        return o1.id === o2.id;
+    }
+    addDetail() {
+        if (!this.course.details) {
+            this.course.details = [];
+        }
+        this.courseService
+            .addDetail(this.course.id, {
+            title: '',
+            description: '',
+            content: '',
+            media: [],
+        })
+            .subscribe({
+            next: (res) => {
+                const detail = res.data;
+                this.course.details.push({
+                    id: detail.id,
+                    title: '',
+                    description: '',
+                    content: '',
+                    media: [],
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    addSchedule() {
+        if (!this.course.schedule) {
+            this.course.schedule = [];
+        }
+        this.course.schedule.push({
+            title: '',
+            content: '',
+        });
+    }
+    addPricing() {
+        if (!this.course.pricing) {
+            this.course.pricing = [];
+        }
+        this.course.pricing.push({
+            min: 0,
+            max: 0,
+            total: 0,
+        });
+    }
+    onSelectionChange(event) {
+        this.selectedCategoyIds = event.value;
+    }
+    onStepperChange(event) {
+        this.lastStepper = event.selectedIndex === 3;
+        this.firstStepper = event.selectedIndex === 0;
+    }
+    previous() {
+        this.stepper().previous();
+    }
+    next() {
+        this.stepper().next();
+    }
+    onDetailMediaUpload(event) { }
+    onDetailMediaDelete(event) { }
+    onDetailSave(event) { }
+    onDetailDelete(detail) {
+        this.courseService.deleteDetail(this.course.id, detail.id).subscribe({
+            next: (res) => {
+                this.snackBar.open(res.message);
+                remove(this.details, {
+                    id: detail.id,
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
     }
     onImageClick(i) {
         const dialogRef = this.dialog.open(MediaPreviewDialogComponent, {
@@ -665,68 +1439,182 @@ class CourseMediaComponent {
             width: '80%',
             panelClass: 'full-screen-modal',
             data: {
-                media: this.media,
+                media: this.course.media,
                 selected: i,
             },
         });
-        dialogRef.afterClosed().subscribe((result) => { });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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=\"sm:w-80 object-cover aspect-video bg-gray-200 rounded-lg\">\n      @if (media()) {\n        <img class=\"aspect-video object-cover w-full rounded-lg\" [src]=\"media()[0].url\" />\n      }\n    </div>\n  } @else {\n    <div>\n      <div class=\"object-cover aspect-video bg-gray-200\">\n        <img class=\"aspect-video object-cover w-full rounded-md\" [src]=\"media()[mediaIndex].url\" />\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          <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"item.url\" />\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    onUpload(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                if (this.course.media) {
+                    this.course.media.push({
+                        url: reader.result,
+                        alt: 'upload image',
+                    });
+                }
+                else {
+                    this.course.media = [];
+                    this.course.media.push({
+                        url: reader.result,
+                        alt: 'upload image',
+                    });
+                }
+                this.isUploading = true;
+                const formData = new FormData();
+                formData.append('file', file);
+                this.courseService.upload(formData).subscribe({
+                    next: (res) => {
+                        this.isUploading = false;
+                        const index = findLastIndex(this.course.media);
+                        // Replace item at index using native splice
+                        this.course.media.splice(index, 1, res.data);
+                    },
+                    error: (e) => {
+                        this.isUploading = false;
+                        this.snackBar.open('上传失败: ' + e.message);
+                    },
+                });
+            };
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseEditDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoryService }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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: i7$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i7$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.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$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.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: i7.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", "shadow", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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", "shadow", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions", "shadow"], 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: "17.3.0", ngImport: i0, type: CourseMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseEditDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-media', standalone: true, imports: [NgClass], template: "@if (media()) {\n  @if (min()) {\n    <div class=\"sm:w-80 object-cover aspect-video bg-gray-200 rounded-lg\">\n      @if (media()) {\n        <img class=\"aspect-video object-cover w-full rounded-lg\" [src]=\"media()[0].url\" />\n      }\n    </div>\n  } @else {\n    <div>\n      <div class=\"object-cover aspect-video bg-gray-200\">\n        <img class=\"aspect-video object-cover w-full rounded-md\" [src]=\"media()[mediaIndex].url\" />\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          <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"item.url\" />\n        </div>\n      }\n    </div>\n  }\n}\n" }]
-        }] });
+            args: [{ selector: 'rolatech-course-edit-dialog', standalone: true, imports: [
+                        MatIconModule,
+                        MatDividerModule,
+                        MatStepperModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MediaListComponent,
+                        MediaListItemComponent,
+                        DetailItemComponent,
+                        MatButtonModule,
+                        PricingItemComponent,
+                        ScheduleItemComponent,
+                        MatDialogClose,
+                    ], template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <mat-stepper #stepper (selectionChange)=\"onStepperChange($event)\">\n      <mat-step [editable]=\"true\">\n        <form #infoForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\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" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CategoryService }, { type: CourseService }, { type: i3$3.MatSnackBar }, { type: i1$2.MatDialog }] });
 
-class CoursePricingComponent {
+class CourseDetailsComponent {
     constructor() {
-        this.pricing = input([]);
+        this.details = input.required();
+        this.instructor = input();
+        this.username = input();
+        this.el = inject(ElementRef);
+        this.viewportScroller = inject(ViewportScroller);
+        this.platformId = inject(PLATFORM_ID);
+        this.show = false;
+        this.mediaIndex = 0;
+        this.finalSchedule = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CoursePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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: [""] }); }
+    ngOnInit() { }
+    onClickScroller(id) {
+        this.viewportScroller.scrollToAnchor(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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                <img class=\"object-cover\" [src]=\"item.url + '?imageMogr2/format/avif'\" />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CoursePricingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseDetailsComponent, 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" }]
+            args: [{ selector: 'rolatech-course-details', standalone: true, imports: [], 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                <img class=\"object-cover\" [src]=\"item.url + '?imageMogr2/format/avif'\" />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n" }]
         }] });
 
-class CourseScheduleComponent {
+class CourseMediaOwnerRendererComponent {
     constructor() {
-        this.schedule = input([]);
-    }
-    ngOnInit() {
-        // this.formatSchedule();
+        this.name = input();
+        this.avatar = input();
+        this.username = input();
     }
-    formatSchedule() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CourseScheduleComponent, isStandalone: true, selector: "rolatech-course-schedule", inputs: { schedule: { classPropertyName: "schedule", publicName: "schedule", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- \u8BFE\u8868 -->\n@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 class=\"bg-white\">\n          <div class=\"text-gray-600 font-thin pt-2\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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: "17.3.0", ngImport: i0, type: CourseMediaOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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$3.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: "17.3.0", ngImport: i0, type: CourseScheduleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseMediaOwnerRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-course-schedule', standalone: true, imports: [MatExpansionModule, MatIconModule], template: "<!-- \u8BFE\u8868 -->\n@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 class=\"bg-white\">\n          <div class=\"text-gray-600 font-thin pt-2\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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"] }]
+            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"] }]
         }] });
 
-class CourseSectionsComponent {
+class CourseCategoryComponent extends BaseComponent {
     constructor() {
-        this.purchased = input(false);
-        this.sections = input([]);
-        this.section = output();
-        this.checkout = output();
-        this.panelOpenState = false;
+        super(...arguments);
+        this.categoryService = inject(CategoryService);
+        this.courseService = inject(CourseService);
+        this.courses = [];
+        this.categories = [];
+        this.loading = false;
     }
-    onSection(section, lecture) {
-        this.section.emit({ section, lecture });
+    ngOnInit() {
+        this.findAllCategories();
+        this.route.paramMap.subscribe((params) => {
+            const id = params.get('id');
+            this.findCategoryById(id);
+            this.findCoursesByCategoryId(id);
+        });
     }
-    onCheckout(section, lecture) {
-        this.checkout.emit({ section, lecture });
+    findAllCategories() {
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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-xl font-medium py-2\">\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 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 class=\"bg-white\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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 }); }
+    findCategoryById(id) {
+        this.categoryService.get(id).subscribe({
+            next: (res) => {
+                this.category = res.data;
+            },
+        });
+    }
+    findAllCourses() {
+        this.courseService.find({}).subscribe({
+            next: (res) => {
+                this.courses = res.data;
+            },
+        });
+    }
+    findCoursesByCategoryId(id) {
+        this.loading = true;
+        const options = {
+            filter: `categories:${id},published:true`,
+        };
+        this.courseService.find(options).subscribe({
+            next: (res) => {
+                this.courses = res.data;
+                this.loading = false;
+            },
+            error: (error) => {
+                this.loading = false;
+            },
+        });
+    }
+    loadCoursesByCategory(item) {
+        //  [routerLink] = "['../../', item.id]";
+        this.router.navigate([`../../${item.id}`], {
+            relativeTo: this.route,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CourseCategoryComponent, isStandalone: true, selector: "rolatech-course-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden sm: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-slate-200 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 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-slate-200 rounded col-span-2\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-slate-200 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-[25%] sm:min-w-[33%] hover:bg-gray-100\"\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$3.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseSectionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseCategoryComponent, 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-xl font-medium py-2\">\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 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 class=\"bg-white\">\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;background:#f3f4f6!important}.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:#dee0e2}.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"] }]
+            args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, CourseItemComponent], selector: 'rolatech-course-category', template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden sm: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-slate-200 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 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-slate-200 rounded col-span-2\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-slate-200 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-[25%] sm:min-w-[33%] hover:bg-gray-100\"\n        [routerLink]=\"['../../', item.id]\"\n      >\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n" }]
         }] });
 
 class CourseDetailComponent extends BaseComponent {
@@ -909,7 +1797,7 @@ class CourseIndexComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CourseIndexComponent, isStandalone: true, selector: "rolatech-course-index", usesInheritance: true, ngImport: i0, template: "<div class=\"min-w-[320px] max-w-[1120px] m-auto\">\n  <div class=\"p-3 hidden sm:block text-2xl font-medium\">\u5168\u90E8\u8BFE\u7A0B</div>\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 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-slate-200 rounded col-span-2\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of courses; track $index) {\n      <div\n        class=\"py-2 cursor-pointer min-w-[80%] md:min-w-[25%] sm:min-w-[33%] hover:bg-gray-100\"\n        [routerLink]=\"['./', item.id]\"\n      >\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n", styles: ["img:before{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CourseIndexComponent, isStandalone: true, selector: "rolatech-course-index", usesInheritance: true, ngImport: i0, template: "<div class=\"min-w-[320px] max-w-[1120px] m-auto\">\n  <div class=\"p-3 hidden sm:block text-2xl font-medium\">\u5168\u90E8\u8BFE\u7A0B</div>\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 sm:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 sm:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-slate-200 rounded col-span-2\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1\"></div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-slate-200 rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of courses; track $index) {\n      <div\n        class=\"py-2 cursor-pointer min-w-[80%] md:min-w-[25%] sm:min-w-[33%] hover:bg-gray-100\"\n        [routerLink]=\"['./', item.id]\"\n      >\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n", styles: ["img:before{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$3.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseIndexComponent, decorators: [{
             type: Component,
@@ -952,27 +1840,13 @@ class CourseLayoutComponent extends BaseComponent {
     }
     nextCategory() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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 sm:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 sm:h-auto min-w-[256px] sm:py-3\">\n        <div class=\"hidden sm:block text-2xl font-medium p-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row sm:flex-col sm:h-full items-center sm:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 sm:hover:bg-gray-200 hover:rounded flex items-center sm:mb-1\"\n            routerLinkActive=\"active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"px-3 text-md sm: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 sm:hover:bg-gray-200 hover:rounded flex items-center sm:mb-1\"\n              routerLinkActive=\"active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"px-3 text-md sm:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full sm:py-3\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n  </rolatech-app-container>\n}\n", styles: [".active{border-radius:8px;color:#ff4500}@media (max-width: 600px){.active{border-radius:8px;background-color:#303030;color:#fff}}.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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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 sm:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 sm:h-auto min-w-[256px] sm:py-3\">\n        <div class=\"hidden sm:block text-2xl font-medium p-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row sm:flex-col sm:h-full items-center sm:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 sm:hover:bg-gray-200 hover:rounded flex items-center sm:mb-1\"\n            routerLinkActive=\"active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"px-3 text-md sm: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 sm:hover:bg-gray-200 hover:rounded flex items-center sm:mb-1\"\n              routerLinkActive=\"active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"px-3 text-md sm:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full sm:py-3\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n  </rolatech-app-container>\n}\n", styles: [".active{border-radius:8px;color:#ff4500}@media (max-width: 600px){.active{border-radius:8px;background-color:#303030;color:#fff}}.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$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$3.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseLayoutComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, AppContainerComponent], selector: 'rolatech-course-layout', template: "@if (categories) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col sm:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 sm:h-auto min-w-[256px] sm:py-3\">\n        <div class=\"hidden sm:block text-2xl font-medium p-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row sm:flex-col sm:h-full items-center sm:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 sm:hover:bg-gray-200 hover:rounded flex items-center sm:mb-1\"\n            routerLinkActive=\"active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"px-3 text-md sm: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 sm:hover:bg-gray-200 hover:rounded flex items-center sm:mb-1\"\n              routerLinkActive=\"active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"px-3 text-md sm:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full sm:py-3\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n  </rolatech-app-container>\n}\n", styles: [".active{border-radius:8px;color:#ff4500}@media (max-width: 600px){.active{border-radius:8px;background-color:#303030;color:#fff}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
         }] });
 
-class CourseMediaOwnerRendererComponent {
-    constructor() {
-        this.name = input();
-        this.avatar = input();
-        this.username = input();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CourseMediaOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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.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: "17.3.0", 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"] }]
-        }] });
-
 class CourseSectionContentComponent {
     constructor() {
         this.route = inject(ActivatedRoute);
@@ -1135,5 +2009,5 @@ const courseRoutes = [
  * Generated bundle index. Do not edit.
  */
 
-export { CourseRequestStatus, CourseReviewStatus, CourseSectionLectureContentType, CourseStatus, CourseType, ScheduleDate, courseRoutes, provideAngulaCourse };
+export { CourseActionComponent, CourseDetailsComponent, CourseDetailsDialogComponent, CourseEditDialogComponent, CourseInfoComponent, CourseItemComponent, CourseMediaComponent, CourseMediaOwnerRendererComponent, CoursePreviewComponent, CoursePricingAddDialogComponent, CoursePricingComponent, CoursePricingDialogComponent, CourseRequestStatus, CourseReviewStatus, CourseScheduleAddDialogComponent, CourseScheduleComponent, CourseScheduleDialogComponent, CourseSectionItemComponent, CourseSectionLectureContentType, CourseSectionLectureItemComponent, CourseSectionLectureVideoDialogComponent, CourseSectionLectureVideoItemComponent, CourseSectionsComponent, CourseStatus, CourseType, DetailItemComponent, PricingItemComponent, ScheduleDate, ScheduleItemComponent, courseRoutes, provideAngulaCourse };
 //# sourceMappingURL=rolatech-angular-course.mjs.map