@rolatech/angular-course 17.3.0 → 17.3.2

package/fesm2022/rolatech-angular-course-rolatech-angular-course-ChplliNh.mjs

@@ -0,0 +1,3040 @@
+import * as i0 from '@angular/core';
+import { Injectable, importProvidersFrom, makeEnvironmentProviders, Component, input, effect, inject, output, ViewEncapsulation, model, PLATFORM_ID, ElementRef, Inject, viewChild, booleanAttribute } from '@angular/core';
+import * as i6 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommonModule, NgClass, DatePipe, isPlatformBrowser, ViewportScroller } from '@angular/common';
+import * as i1$3 from '@angular/router';
+import { RouterModule, RouterLink, ActivatedRoute, Router, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { BaseService, DialogService } from '@rolatech/angular-services';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$2 from '@angular/material/dialog';
+import { MatDialog, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
+import { ImagePreviewDialogComponent, ThumbnailComponent, IconButtonComponent, AngularComponentsModule, ImageComponent, MediaListComponent, MediaListItemComponent, BaseComponent, AppContainerComponent, ListComponent, ConfirmationDialogComponent, ToolbarComponent } from '@rolatech/angular-components';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+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 i5$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i7 from '@angular/material/stepper';
+import { MatStepperModule, MatStepper } from '@angular/material/stepper';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import * as i6$2 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, findIndex, clone } from 'lodash';
+import { AuthService, AuthUserService } from '@rolatech/angular-auth';
+import { CommentsComponent } from '@rolatech/angular-comment';
+import { Observable, from, concatMap, take } from 'rxjs';
+
+var CourseStatus;
+(function (CourseStatus) {
+    CourseStatus[CourseStatus["ACTIVE"] = '已发布'] = "ACTIVE";
+    CourseStatus[CourseStatus["ACCEPTED"] = '已通过'] = "ACCEPTED";
+    CourseStatus[CourseStatus["AWAITING"] = '审核中'] = "AWAITING";
+    CourseStatus[CourseStatus["PENDING"] = '审核中'] = "PENDING";
+    CourseStatus[CourseStatus["STARTED"] = '已开始'] = "STARTED";
+    CourseStatus[CourseStatus["ENDED"] = '已完成'] = "ENDED";
+    CourseStatus[CourseStatus["DELETED"] = '已删除'] = "DELETED";
+    CourseStatus[CourseStatus["DRAFT"] = '草稿'] = "DRAFT";
+})(CourseStatus || (CourseStatus = {}));
+var CourseRequestStatus;
+(function (CourseRequestStatus) {
+    CourseRequestStatus["AWAITING"] = "\u5BA1\u6838\u4E2D";
+    CourseRequestStatus["ACTIVE"] = "\u5DF2\u901A\u8FC7";
+    CourseRequestStatus["REJECTED"] = "\u5DF2\u62D2\u7EDD";
+})(CourseRequestStatus || (CourseRequestStatus = {}));
+var CourseReviewStatus;
+(function (CourseReviewStatus) {
+    CourseReviewStatus["ACCEPTED"] = "\u5DF2\u901A\u8FC7";
+    CourseReviewStatus["REJECTED"] = "\u672A\u901A\u8FC7";
+})(CourseReviewStatus || (CourseReviewStatus = {}));
+var CourseSectionLectureContentType;
+(function (CourseSectionLectureContentType) {
+    CourseSectionLectureContentType[CourseSectionLectureContentType["VIDEO"] = '视频'] = "VIDEO";
+    CourseSectionLectureContentType[CourseSectionLectureContentType["ARTICLE"] = '文章'] = "ARTICLE";
+})(CourseSectionLectureContentType || (CourseSectionLectureContentType = {}));
+// export const CourseType = [
+//   {
+//     key: 'ONLINE',
+//     value: '线上',
+//   },
+//   {
+//     key: 'OFFLINE',
+//     value: '线下',
+//   },
+//   {
+//     key: 'MIXED',
+//     value: '混合',
+//   },
+// ];
+var CourseType;
+(function (CourseType) {
+    CourseType[CourseType["ONLINE"] = '线上'] = "ONLINE";
+    CourseType[CourseType["OFFLINE"] = '线下'] = "OFFLINE";
+    CourseType[CourseType["MIXED"] = '混合'] = "MIXED";
+})(CourseType || (CourseType = {}));
+const ScheduleDate = [
+    '00:00',
+    '00:15',
+    '00:30',
+    '00:45',
+    '01:00',
+    '01:15',
+    '01:30',
+    '01:45',
+    '02:00',
+    '02:15',
+    '02:30',
+    '02:45',
+    '03:00',
+    '03:15',
+    '03:30',
+    '03:45',
+    '04:00',
+    '04:15',
+    '04:30',
+    '04:45',
+    '05:00',
+    '05:15',
+    '05:30',
+    '05:45',
+    '06:00',
+    '06:15',
+    '06:30',
+    '06:45',
+    '07:00',
+    '07:15',
+    '07:30',
+    '07:45',
+    '08:00',
+    '08:15',
+    '08:30',
+    '08:45',
+    '09:00',
+    '09:15',
+    '09:30',
+    '09:45',
+    '10:00',
+    '10:15',
+    '10:30',
+    '10:45',
+    '11:00',
+    '11:15',
+    '11:30',
+    '11:45',
+    '12:00',
+    '12:15',
+    '12:30',
+    '12:45',
+    '13:00',
+    '13:15',
+    '13:30',
+    '13:45',
+    '14:00',
+    '14:15',
+    '14:30',
+    '14:45',
+    '15:00',
+    '15:15',
+    '15:30',
+    '15:45',
+    '16:00',
+    '16:15',
+    '16:30',
+    '16:45',
+    '17:00',
+    '17:15',
+    '17:30',
+    '17:45',
+    '18:00',
+    '18:15',
+    '18:30',
+    '18:45',
+    '19:00',
+    '19:15',
+    '19:30',
+    '19:45',
+    '20:00',
+    '20:15',
+    '20:30',
+    '20:45',
+    '21:00',
+    '21:15',
+    '21:30',
+    '21:45',
+    '22:00',
+    '22:15',
+    '22:30',
+    '22:45',
+    '23:00',
+    '23:15',
+    '23:30',
+    '23:45',
+];
+
+class CourseService extends BaseService {
+    init() {
+        this.endpoint = 'courses';
+        super.init();
+    }
+    me(options) {
+        return this.http.get(`${this.actionUrl}/me`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    findSchedule(id) {
+        return this.http.get(`${this.actionUrl}/${id}/schedule`, {
+            withCredentials: true,
+        });
+    }
+    findPricing(id) {
+        return this.http.get(`${this.actionUrl}/${id}/pricing`, {
+            withCredentials: true,
+        });
+    }
+    addDetail(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/details`, data, {
+            withCredentials: true,
+        });
+    }
+    addBatchDetails(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/details/batch`, data, {
+            withCredentials: true,
+        });
+    }
+    findDetails(id) {
+        return this.http.get(`${this.actionUrl}/${id}/details`, {
+            withCredentials: true,
+        });
+    }
+    updateDetail(id, detailId, data) {
+        return this.http.put(`${this.actionUrl}/${id}/details/${detailId}`, data, {
+            withCredentials: true,
+        });
+    }
+    deleteDetail(id, detailId) {
+        return this.http.delete(`${this.actionUrl}/${id}/details/${detailId}`, {
+            withCredentials: true,
+        });
+    }
+    uploadDetailMedia(id, detailId, data) {
+        return this.http.post(`${this.actionUrl}/${id}/details/${detailId}/media`, data, {
+            withCredentials: true,
+        });
+    }
+    deleteDetailMedia(id, detailId, mediaId) {
+        return this.http.delete(`${this.actionUrl}/${id}/details/${detailId}/media/${mediaId}`, {
+            withCredentials: true,
+        });
+    }
+    review(id) {
+        return this.http.post(`${this.actionUrl}/${id}/review`, {}, {
+            withCredentials: true,
+        });
+    }
+    start(id) {
+        return this.http.post(`${this.actionUrl}/${id}/start`, {}, {
+            withCredentials: true,
+        });
+    }
+    finish(id) {
+        return this.http.post(`${this.actionUrl}/${id}/finish`, {}, {
+            withCredentials: true,
+        });
+    }
+    publish(id) {
+        return this.http.post(`${this.actionUrl}/${id}/publish`, {}, {
+            withCredentials: true,
+        });
+    }
+    upload(data) {
+        return this.http.post(`${this.actionUrl}/upload`, data, {
+            withCredentials: true,
+        });
+    }
+    uploadMedia(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/media`, data, {
+            withCredentials: true,
+        });
+    }
+    deleteMedia(id, mediaId) {
+        return this.http.delete(`${this.actionUrl}/${id}/media/${mediaId}`, {
+            withCredentials: true,
+        });
+    }
+    importFromExcel(data) {
+        return this.http.post(`${this.actionUrl}/excel`, data, {
+            withCredentials: true,
+        });
+    }
+    createFromExcel(data) {
+        return this.http.post(`${this.actionUrl}/list`, data, {
+            withCredentials: true,
+        });
+    }
+    findAllRequests(options) {
+        return this.http.get(`${this.actionUrl}/requests`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    findRequestDetail(id) {
+        return this.http.get(`${this.actionUrl}/requests/${id}`, {
+            withCredentials: true,
+        });
+    }
+    accept(id) {
+        return this.http.post(`${this.actionUrl}/${id}/reviews/accept`, {}, {
+            withCredentials: true,
+        });
+    }
+    reject(id, body) {
+        return this.http.post(`${this.actionUrl}/${id}/reviews/reject`, body, {
+            withCredentials: true,
+        });
+    }
+    acceptRequest(id) {
+        return this.http.post(`${this.actionUrl}/requests/${id}/reviews/accept`, {}, {
+            withCredentials: true,
+        });
+    }
+    rejectRequest(id, body) {
+        return this.http.post(`${this.actionUrl}/requests/${id}/reviews/reject`, body, {
+            withCredentials: true,
+        });
+    }
+    addPricing(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/pricing`, data, {
+            withCredentials: true,
+        });
+    }
+    updatePricing(id, pricingId, data) {
+        return this.http.put(`${this.actionUrl}/${id}/pricing/${pricingId}`, data, {
+            withCredentials: true,
+        });
+    }
+    deletePricing(id, pricingId) {
+        return this.http.delete(`${this.actionUrl}/${id}/pricing/${pricingId}`, {
+            withCredentials: true,
+        });
+    }
+    addSchedule(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/schedule`, data, {
+            withCredentials: true,
+        });
+    }
+    updateSchedule(id, scheduleId, data) {
+        return this.http.put(`${this.actionUrl}/${id}/schedule/${scheduleId}`, data, {
+            withCredentials: true,
+        });
+    }
+    deleteSchedule(id, scheduleId) {
+        return this.http.delete(`${this.actionUrl}/${id}/schedule/${scheduleId}`, {
+            withCredentials: true,
+        });
+    }
+    findAllReviews(options) {
+        return this.http.get(`${this.actionUrl}/reviews`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    getReview(id) {
+        return this.http.get(`${this.actionUrl}/reviews/${id}`, {
+            withCredentials: true,
+        });
+    }
+    findReviews(options) {
+        return this.http.get(`${this.actionUrl}/reviews/me`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    countUsers(options) {
+        return this.http.get(`${this.actionUrl}/users/count/by`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    findByIds(ids) {
+        return this.http.get(`${this.actionUrl}/by`, {
+            params: { ids },
+            withCredentials: true,
+        });
+    }
+    findWishlist(options) {
+        return this.http.get(`${this.actionUrl}/wishlist`, { params: options, withCredentials: true });
+    }
+    addToWishlist(courseId) {
+        return this.http.post(`${this.actionUrl}/${courseId}/wishlist`, {}, { withCredentials: true });
+    }
+    removeFromWishlist(courseId) {
+        return this.http.delete(`${this.actionUrl}/${courseId}/wishlist`, { withCredentials: true });
+    }
+    findWishlistBy(courseId) {
+        return this.http.get(`${this.actionUrl}/${courseId}/wishlist/by`, { withCredentials: true });
+    }
+    findMyCourses(options) {
+        return this.http.get(`${this.actionUrl}/users`, { params: options, withCredentials: true });
+    }
+    findPurchasedByCourseId(courseId) {
+        return this.http.get(`${this.actionUrl}/users/me/by?courseId=${courseId}`, {
+            withCredentials: true,
+        });
+    }
+    deleteFromWishlist(sectionId) {
+        return this.http.delete(`${this.actionUrl}/sections/${sectionId}`, { withCredentials: true });
+    }
+    // Course sections
+    findCourseSections(options) {
+        return this.http.get(`${this.actionUrl}/sections`, { params: options, withCredentials: false });
+    }
+    addCourseSection(courseId, data) {
+        return this.http.post(`${this.actionUrl}/${courseId}/sections`, data, { withCredentials: true });
+    }
+    updateCourseSection(sectionId, data) {
+        return this.http.put(`${this.actionUrl}/sections/${sectionId}`, data, { withCredentials: true });
+    }
+    deleteCourseSection(sectionId) {
+        return this.http.delete(`${this.actionUrl}/sections/${sectionId}`, { withCredentials: true });
+    }
+    getCourseSection(courseId) {
+        return this.http.get(`${this.actionUrl}/${courseId}/sections`, { withCredentials: false });
+    }
+    addLecture(sectionId, data) {
+        return this.http.post(`${this.actionUrl}/sections/${sectionId}/lectures`, data, { withCredentials: true });
+    }
+    updateLecture(lectureId, data) {
+        return this.http.put(`${this.actionUrl}/sections/lectures/${lectureId}`, data, { withCredentials: true });
+    }
+    deleteLecture(lectureId) {
+        return this.http.delete(`${this.actionUrl}/sections/lectures/${lectureId}`, { withCredentials: true });
+    }
+    uploadVideoInit(lectureId, data) {
+        return this.http.post(`${this.actionUrl}/sections/lectures/${lectureId}/videos/init`, data, {
+            withCredentials: true,
+        });
+    }
+    uploadVideoPartsToLecture(lectureId, data) {
+        return this.http.post(`${this.actionUrl}/sections/lectures/${lectureId}/videos/parts`, data, {
+            withCredentials: true,
+        });
+    }
+    completePartUpload(lectureId, data) {
+        return this.http.put(`${this.actionUrl}/sections/lectures/${lectureId}/videos/parts`, data, {
+            withCredentials: true,
+        });
+    }
+    uploadVideoToLecture(lectureId, data) {
+        return this.http.post(`${this.actionUrl}/sections/lectures/${lectureId}/videos`, data, {
+            withCredentials: true,
+        });
+    }
+    deleteLectureVideo(videoId) {
+        return this.http.delete(`${this.actionUrl}/sections/lectures/videos/${videoId}`, { withCredentials: true });
+    }
+    uploadLectureVideoThumbnail(videoId, data) {
+        return this.http.post(`${this.actionUrl}/sections/lectures/videos/${videoId}/thumbnail`, data, {
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CourseSectionService extends BaseService {
+    init() {
+        this.endpoint = 'courses';
+        super.init();
+    }
+    findSections(id) {
+        return this.http.get(`${this.actionUrl}/${id}/sections`);
+    }
+    canBePreviewed(videoId, data) {
+        return this.http.post(`${this.actionUrl}/sections/lectures/videos/${videoId}/preview`, data, {
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseSectionService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseSectionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseSectionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CategoryService extends BaseService {
+    init() {
+        this.endpoint = 'categories';
+        super.init();
+    }
+    uploadMedia(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/media`, data, {
+            withCredentials: true,
+        });
+    }
+    deleteMedia(id, mediaId) {
+        return this.http.delete(`${this.actionUrl}/${id}/media/${mediaId}`, {
+            withCredentials: true,
+        });
+    }
+    importFromExcel(data) {
+        return this.http.post(`${this.actionUrl}/excel`, data, {
+            withCredentials: true,
+        });
+    }
+    createFromExcel(data) {
+        return this.http.post(`${this.actionUrl}/list`, data, {
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CategoryService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CategoryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CategoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const services = [CourseService, CourseSectionService, CategoryService];
+
+function provideAngulaCourse() {
+    const providers = [
+        ...services,
+        importProvidersFrom(CommonModule, ReactiveFormsModule, FormsModule, RouterModule),
+    ];
+    return makeEnvironmentProviders(providers);
+}
+
+class CoursePreviewComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CoursePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CoursePreviewComponent, isStandalone: true, selector: "rolatech-course-preview", ngImport: i0, template: "<p>course-preview works!</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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.instructor = input();
+        this.username = input();
+        this.dataToDisplay = effect(() => {
+            return this.course();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseInfoComponent, isStandalone: true, selector: "rolatech-course-info", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, instructor: { classPropertyName: "instructor", publicName: "instructor", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <div>\n    <div class=\"text-2xl font-medium\">{{ course().name }}</div>\n    @if (course().type && course().type.toString() !== 'ONLINE') {\n      <div class=\"flex items-center pt-2\">\n        <mat-icon>place</mat-icon>\n        <span class=\"text-sm opacity-75\">{{ course().classroom.address }}</span>\n      </div>\n    }\n    <div class=\"py-3 text-black-light flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\">\u4E3B\u8BB2\u6559\u5E08: </span>\n          <a class=\"ml-2 underline text-orange-600 text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\">\u6700\u540E\u7F16\u8F91: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- \u63CF\u8FF0 -->\n  <div class=\"mb-3\">\n    {{ course().description }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-info', standalone: true, imports: [MatIconModule, RouterLink, RouterModule], template: "<div>\n  <div>\n    <div class=\"text-2xl font-medium\">{{ course().name }}</div>\n    @if (course().type && course().type.toString() !== 'ONLINE') {\n      <div class=\"flex items-center pt-2\">\n        <mat-icon>place</mat-icon>\n        <span class=\"text-sm opacity-75\">{{ course().classroom.address }}</span>\n      </div>\n    }\n    <div class=\"py-3 text-black-light flex justify-between\">\n      <div>\n        <div class=\"mb-1 flex items-center\">\n          <span class=\"font-medium\">\u4E3B\u8BB2\u6559\u5E08: </span>\n          <a class=\"ml-2 underline text-orange-600 text-[0.9rem]\" [routerLink]=\"['/@' + username()]\">{{\n            instructor()\n          }}</a>\n        </div>\n        <span class=\"text-sm opacity-75\">\u6700\u540E\u7F16\u8F91: {{ course().updatedAt }} </span>\n      </div>\n    </div>\n  </div>\n  <!-- \u63CF\u8FF0 -->\n  <div class=\"mb-3\">\n    {{ course().description }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
+        }] });
+
+class CourseMediaComponent {
+    constructor() {
+        this.dialog = inject(MatDialog);
+        this.media = input([]);
+        this.min = input(false);
+        this.mediaIndex = 0;
+    }
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseMediaComponent, isStandalone: true, selector: "rolatech-course-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (media()) {\n  @if (min()) {\n    <div class=\"md:w-80 object-cover aspect-video bg-gray-200 rounded-lg\">\n      @if (media()) {\n        <rolatech-thumbnail [src]=\"media()[0].url\" size=\"small\"></rolatech-thumbnail>\n\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        <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\"></rolatech-thumbnail>\n\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          <rolatech-thumbnail [src]=\"item.url\" size=\"small\"></rolatech-thumbnail>\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"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-media', standalone: true, imports: [NgClass, ThumbnailComponent], template: "@if (media()) {\n  @if (min()) {\n    <div class=\"md:w-80 object-cover aspect-video bg-gray-200 rounded-lg\">\n      @if (media()) {\n        <rolatech-thumbnail [src]=\"media()[0].url\" size=\"small\"></rolatech-thumbnail>\n\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        <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\"></rolatech-thumbnail>\n\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          <rolatech-thumbnail [src]=\"item.url\" size=\"small\"></rolatech-thumbnail>\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: "18.0.1", ngImport: i0, type: CoursePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CoursePricingComponent, isStandalone: true, selector: "rolatech-course-pricing", inputs: { pricing: { classPropertyName: "pricing", publicName: "pricing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (pricing()) {\n  <div class=\"py-3\">\n    <div class=\"text-lg font-medium py-2\">\u4EF7\u683C</div>\n    @for (item of pricing(); track $index) {\n      <div>\n        <span>{{ item.min }} \u81F3 {{ item.max }}\u4EBA</span>\n        <span class=\"ml-3\">{{ item.total / 100 }}\u5143</span>\n      </div>\n    }\n  </div>\n}\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CoursePricingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-pricing', standalone: true, template: "@if (pricing()) {\n  <div class=\"py-3\">\n    <div class=\"text-lg font-medium py-2\">\u4EF7\u683C</div>\n    @for (item of pricing(); track $index) {\n      <div>\n        <span>{{ item.min }} \u81F3 {{ item.max }}\u4EBA</span>\n        <span class=\"ml-3\">{{ item.total / 100 }}\u5143</span>\n      </div>\n    }\n  </div>\n}\n" }]
+        }] });
+
+class CourseActionComponent {
+    constructor() {
+        this.course = input.required();
+        this.inWishList = input(false);
+        this.cart = output();
+        this.wish = output();
+        this.checkout = output();
+    }
+    onCart(course) {
+        this.cart.emit(course);
+    }
+    onWish(course) {
+        this.wish.emit(course);
+    }
+    onCheckout(course) {
+        this.checkout.emit(course);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: CourseActionComponent, isStandalone: true, selector: "rolatech-course-action", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cart: "cart", wish: "wish", checkout: "checkout" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <!-- <a class=\"p-3 bg-orange-600 text-white text-center mt-3\" target=\"_blank\" (click)=\"onCart(course)\">\u52A0\u5165\u8D2D\u7269\u8F66</a> -->\n  <a mat-flat-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onCheckout(course())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  <a mat-stroked-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onWish(course())\">{{\n    inWishList() ? '\u79FB\u9664\u6536\u85CF' : '\u52A0\u5165\u6536\u85CF'\n  }}</a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseActionComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'rolatech-course-action', imports: [MatButtonModule], template: "<div class=\"flex flex-col\">\n  <!-- <a class=\"p-3 bg-orange-600 text-white text-center mt-3\" target=\"_blank\" (click)=\"onCart(course)\">\u52A0\u5165\u8D2D\u7269\u8F66</a> -->\n  <a mat-flat-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onCheckout(course())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  <a mat-stroked-button class=\"mt-3 min-h-11\" target=\"_blank\" (click)=\"onWish(course())\">{{\n    inWishList() ? '\u79FB\u9664\u6536\u85CF' : '\u52A0\u5165\u6536\u85CF'\n  }}</a>\n</div>\n" }]
+        }] });
+
+class CourseScheduleComponent {
+    constructor() {
+        this.schedule = input([]);
+    }
+    ngOnInit() {
+        // this.formatSchedule();
+    }
+    formatSchedule() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", 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: "18.0.1", 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: "18.0.1", ngImport: i0, type: CourseSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseSectionsComponent, isStandalone: true, selector: "rolatech-course-sections", inputs: { purchased: { classPropertyName: "purchased", publicName: "purchased", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "section", checkout: "checkout" }, ngImport: i0, template: "@if (sections()) {\n  <div id=\"sections()\">\n    <div class=\"text-2xl font-medium py-3 lg:pt-0\">\u8BFE\u7A0B\u5185\u5BB9</div>\n    <mat-accordion multi>\n      @for (item of sections(); track $index) {\n        <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n          <mat-expansion-panel-header 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: "18.0.1", ngImport: i0, type: CourseSectionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-sections', encapsulation: ViewEncapsulation.None, standalone: true, imports: [MatExpansionModule, MatIconModule, DurationPipe, MatCheckboxModule], template: "@if (sections()) {\n  <div id=\"sections()\">\n    <div class=\"text-2xl font-medium py-3 lg:pt-0\">\u8BFE\u7A0B\u5185\u5BB9</div>\n    <mat-accordion multi>\n      @for (item of sections(); track $index) {\n        <mat-expansion-panel #panel [class.mat-elevation-z0]=\"true\" hideToggle [expanded]=\"$index === 0\">\n          <mat-expansion-panel-header 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: "18.0.1", ngImport: i0, type: CourseSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseSectionItemComponent, isStandalone: true, selector: "rolatech-course-section-item", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "sectionChange", actions: "actionsChange", hasUnsaved: "hasUnsavedChange", editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", addLecture: "addLecture" }, ngImport: i0, template: "<div class=\"flex flex-col grow\">\n  @if (section().id !== editId()) {\n    <div>\n      <div class=\"flex justify-between items-center cursor-pointer\" (click)=\"isExpand = !isExpand\">\n        <div class=\"w-full flex items-center gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onEdit(section())\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onDelete(section())\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n        <!-- <rolatech-icon-button (click)=\"isExpand = !isExpand\">{{\n          isExpand ? 'expand_less' : 'expand_more'\n        }}</rolatech-icon-button> -->\n        <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\">\n          <mat-icon>{{ isExpand ? 'expand_less' : 'expand_more' }}</mat-icon>\n        </button>\n      </div>\n      @if (isExpand) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md 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: "18.0.1", ngImport: i0, type: CourseSectionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-section-item', standalone: true, imports: [MatIconModule, FormsModule, MatButtonModule, IconButtonComponent], template: "<div class=\"flex flex-col grow\">\n  @if (section().id !== editId()) {\n    <div>\n      <div class=\"flex justify-between items-center cursor-pointer\" (click)=\"isExpand = !isExpand\">\n        <div class=\"w-full flex items-center gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onEdit(section())\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onDelete(section())\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n        <!-- <rolatech-icon-button (click)=\"isExpand = !isExpand\">{{\n          isExpand ? 'expand_less' : 'expand_more'\n        }}</rolatech-icon-button> -->\n        <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\">\n          <mat-icon>{{ isExpand ? 'expand_less' : 'expand_more' }}</mat-icon>\n        </button>\n      </div>\n      @if (isExpand) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md 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.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: "18.0.1", ngImport: i0, type: ScheduleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: ScheduleItemComponent, isStandalone: true, selector: "rolatech-schedule-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", save: "save" }, providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+            DatePipe,
+        ], ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6807\u9898 </mat-label>\n    <input matInput type=\"text\" [(ngModel)]=\"schedule.title\" name=\"title\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u5185\u5BB9 </mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      [(ngModel)]=\"schedule.content\"\n      name=\"content\"\n      cdkTextareaAutosize\n      cdkAutosizeMinRows=\"3\"\n      required\n    ></textarea>\n  </mat-form-field>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (focus)=\"picker.open()\"\n        name=\"startAt\"\n        [(ngModel)]=\"schedule.startDate\"\n        (ngModelChange)=\"startDateChanged($event)\"\n        (dateInput)=\"schedule.startDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.startTime\" (selectionChange)=\"startTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker2\"\n        name=\"endAt\"\n        (focus)=\"picker2.open()\"\n        (ngModelChange)=\"endDateChanged($event)\"\n        [(ngModel)]=\"schedule.endDate\"\n        (dateInput)=\"schedule.endDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker #picker2></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.endTime\" (selectionChange)=\"endTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-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: "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: i6$2.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: "18.0.1", 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 py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6807\u9898 </mat-label>\n    <input matInput type=\"text\" [(ngModel)]=\"schedule.title\" name=\"title\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u5185\u5BB9 </mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      [(ngModel)]=\"schedule.content\"\n      name=\"content\"\n      cdkTextareaAutosize\n      cdkAutosizeMinRows=\"3\"\n      required\n    ></textarea>\n  </mat-form-field>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (focus)=\"picker.open()\"\n        name=\"startAt\"\n        [(ngModel)]=\"schedule.startDate\"\n        (ngModelChange)=\"startDateChanged($event)\"\n        (dateInput)=\"schedule.startDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.startTime\" (selectionChange)=\"startTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker2\"\n        name=\"endAt\"\n        (focus)=\"picker2.open()\"\n        (ngModelChange)=\"endDateChanged($event)\"\n        [(ngModel)]=\"schedule.endDate\"\n        (dateInput)=\"schedule.endDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker #picker2></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.endTime\" (selectionChange)=\"endTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-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.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: "18.0.1", 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: "18.0.1", 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: "18.0.1", 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.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() { }
+    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',
+            maxWidth: '80vw',
+            height: '100%',
+            component: CourseSectionLectureVideoDialogComponent,
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    const data = {
+                        name: res,
+                    };
+                }
+            },
+        });
+    }
+    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: "18.0.1", ngImport: i0, type: CourseSectionLectureItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseSectionLectureItemComponent, isStandalone: true, selector: "rolatech-course-section-lecture-item", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, lecture: { classPropertyName: "lecture", publicName: "lecture", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", mediaEdit: "mediaEdit", thumbnailUpload: "thumbnailUpload", upload: "upload", deleteMedia: "deleteMedia" }, viewQueries: [{ propertyName: "myVideo", first: true, predicate: ["video"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col grow p-2\">\n  @if (lecture().id !== editId()) {\n    <div class=\"w-full flex gap-3 p-3 items-center\">\n      <span>{{ lecture().title }}</span>\n      <button mat-icon-button (click)=\"onEdit(lecture())\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onDelete(lecture())\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md 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 (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: "component", type: i3.MatIconButton, selector: "button[mat-icon-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: "18.0.1", ngImport: i0, type: CourseSectionLectureItemComponent, decorators: [{
+            type: Component,
+            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 items-center\">\n      <span>{{ lecture().title }}</span>\n      <button mat-icon-button (click)=\"onEdit(lecture())\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onDelete(lecture())\" class=\"max-w-8 max-h-8 !p-1\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md 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 (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 CourseSectionLectureVideoItemComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseSectionLectureVideoItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CourseSectionLectureVideoItemComponent, isStandalone: true, selector: "rolatech-course-section-lecture-video-item", ngImport: i0, template: "<p>course-section-lecture-video-item works!</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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.row = input(true);
+        this.inset = input(false, { transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseItemComponent, isStandalone: true, selector: "rolatech-course-item", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (row()) {\n  <div class=\"flex w-full flex-row\" [style]=\"inset() ? 'padding: 0 16px' : ''\">\n    <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-gray-200 rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <!-- ?imageMogr2/thumbnail/400x -->\n          <!-- <rolatech-thumbnail [src]=\"course().media[0].url + '?imageMogr2/thumbnail/400x'\" size=\"medium\">\n          </rolatech-thumbnail> -->\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 md:w-3/4 ml-3 flex flex-col justify-between\">\n      <div>\n        <div class=\"md:text-xl font-medium break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n          {{ course().name }}\n        </div>\n        <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div>\n      @if (course().media; as media) {\n        @defer (on viewport()) {\n          <!-- course().media[0].url -->\n          <!-- <rolatech-thumbnail [src]=\"course().media[0].url + '?imageMogr2/thumbnail/400x'\" size=\"medium\">\n          </rolatech-thumbnail> -->\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full h-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md md:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], deferBlockDependencies: [() => [ThumbnailComponent], () => [ThumbnailComponent]] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-item', standalone: true, imports: [CommonModule, ImageComponent, ThumbnailComponent], template: "@if (row()) {\n  <div class=\"flex w-full flex-row\" [style]=\"inset() ? 'padding: 0 16px' : ''\">\n    <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-gray-200 rounded-lg\">\n      @if (course().media) {\n        @defer (on viewport()) {\n          <!-- ?imageMogr2/thumbnail/400x -->\n          <!-- <rolatech-thumbnail [src]=\"course().media[0].url + '?imageMogr2/thumbnail/400x'\" size=\"medium\">\n          </rolatech-thumbnail> -->\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"w-3/5 md:w-3/4 ml-3 flex flex-col justify-between\">\n      <div>\n        <div class=\"md:text-xl font-medium break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n          {{ course().name }}\n        </div>\n        <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n          {{ course().description }}\n        </div>\n      </div>\n      @if (course().pricing) {\n        <div class=\"md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n} @else {\n  <div>\n    <div>\n      @if (course().media; as media) {\n        @defer (on viewport()) {\n          <!-- course().media[0].url -->\n          <!-- <rolatech-thumbnail [src]=\"course().media[0].url + '?imageMogr2/thumbnail/400x'\" size=\"medium\">\n          </rolatech-thumbnail> -->\n          <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"></rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 w-full h-full object-cover aspect-video rounded-lg\"></div>\n        }\n      }\n    </div>\n    <div class=\"mt-2\">\n      <div class=\"text-md md:text-xl font-medium break-words line-clamp-2\">{{ course().name }}</div>\n      @if (course().pricing) {\n        <div class=\"text-md md:text-lg font-medium py-1\">\u00A5{{ course().pricing[0].total / 100 }}</div>\n      }\n    </div>\n  </div>\n}\n" }]
+        }] });
+
+var courseItem_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CourseItemComponent: CourseItemComponent
+});
+
+class PricingItemComponent {
+    constructor() {
+        this.actions = 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: "18.0.1", ngImport: i0, type: PricingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: PricingItemComponent, isStandalone: true, selector: "rolatech-pricing-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, pricing: { classPropertyName: "pricing", publicName: "pricing", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pricing: "pricingChange", delete: "delete", save: "save" }, ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6700\u5C11\u4EBA\u6570 </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().min\" name=\"min\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6700\u591A\u4EBA\u6570 </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().max\" name=\"max\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u4EF7\u683C </mat-label>\n    <!-- <input matInput  type=\"number\" step=\"0.01\" [ngModel]=\"pricing().total\"\n    (ngModelChange)=\"setTwoNumberDecimal($event)\" name=\"total\" required placeholder=\"20.23\" /> -->\n    <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"pricing().total\" name=\"total\" required />\n  </mat-form-field>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3\">\n    <button mat-button (click)=\"onDelete(pricing())\">\u5220\u9664</button>\n    <button mat-flat-button (click)=\"onSave(pricing())\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$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: "18.0.1", ngImport: i0, type: PricingItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-pricing-item', standalone: true, imports: [NgClass, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatDividerModule], template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6700\u5C11\u4EBA\u6570 </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().min\" name=\"min\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6700\u591A\u4EBA\u6570 </mat-label>\n    <input matInput type=\"number\" [(ngModel)]=\"pricing().max\" name=\"max\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u4EF7\u683C </mat-label>\n    <!-- <input matInput  type=\"number\" step=\"0.01\" [ngModel]=\"pricing().total\"\n    (ngModelChange)=\"setTwoNumberDecimal($event)\" name=\"total\" required placeholder=\"20.23\" /> -->\n    <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"pricing().total\" name=\"total\" required />\n  </mat-form-field>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-3\">\n    <button mat-button (click)=\"onDelete(pricing())\">\u5220\u9664</button>\n    <button mat-flat-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: "18.0.1", 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: "18.0.1", type: CoursePricingAddDialogComponent, isStandalone: true, selector: "rolatech-course-pricing-add-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-xl font-bold\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <div class=\"flex-1 overflow-hidden p-3 overflow-y-auto max-h-[55vh]\">\n    <rolatech-pricing-item [pricing]=\"pricing\"></rolatech-pricing-item>\n  </div>\n  <div class=\"h-16 flex justify-end items-center px-5 gap-3\">\n    <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n    <button mat-button [mat-dialog-close]=\"pricing\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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: "18.0.1", 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: "18.0.1", 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: "18.0.1", 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\"></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"], 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: "18.0.1", 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\"></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: "18.0.1", 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: "18.0.1", 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.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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: "18.0.1", 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: "18.0.1", 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: "18.0.1", 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.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], 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: "18.0.1", 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.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: "18.0.1", ngImport: i0, type: DetailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: DetailItemComponent, isStandalone: true, selector: "rolatech-detail-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"mb-8\">\n  <div class=\"flex flex-col lg:flex-row\">\n    <div class=\"flex flex-col grow\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label>\u6807\u9898</mat-label>\n        <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"detail().title\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u63CF\u8FF0</mat-label>\n        <input matInput placeholder=\"\u63CF\u8FF0\" [(ngModel)]=\"detail().description\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u5185\u5BB9</mat-label>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"3\"\n          placeholder=\"\u5185\u5BB9\"\n          [(ngModel)]=\"detail().content\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n    <!-- image -->\n    <div class=\"lg:basis-1/2 px-3\">\n      <div class=\"flex flex-row justify-center pb-4 p-1\">\n        @if (selectedImg) {\n          <img class=\"object-contain w-80 h-80\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n        }\n        @if (selectedImg) {\n          <button mat-icon-button (click)=\"onDeleteMedia(detail().id, selectedImg)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n      <!-- media -->\n      <div>\n        <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n          <div class=\"progress-bar\">\n            @if (detail().isUploading) {\n              <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n            }\n          </div>\n          @for (media of detail().media; track media) {\n            <div class=\"media-list-item\">\n              <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n            </div>\n          }\n          <input\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            <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                height=\"48px\"\n                viewBox=\"0 -960 960 960\"\n                width=\"48px\"\n                fill=\"#5f6368\"\n              >\n                <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-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: "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: "18.0.1", 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\">\n  <div class=\"flex flex-col lg:flex-row\">\n    <div class=\"flex flex-col grow\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label>\u6807\u9898</mat-label>\n        <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"detail().title\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u63CF\u8FF0</mat-label>\n        <input matInput placeholder=\"\u63CF\u8FF0\" [(ngModel)]=\"detail().description\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n        <mat-label>\u5185\u5BB9</mat-label>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"3\"\n          placeholder=\"\u5185\u5BB9\"\n          [(ngModel)]=\"detail().content\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n    <!-- image -->\n    <div class=\"lg:basis-1/2 px-3\">\n      <div class=\"flex flex-row justify-center pb-4 p-1\">\n        @if (selectedImg) {\n          <img class=\"object-contain w-80 h-80\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n        }\n        @if (selectedImg) {\n          <button mat-icon-button (click)=\"onDeleteMedia(detail().id, selectedImg)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n      <!-- media -->\n      <div>\n        <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n          <div class=\"progress-bar\">\n            @if (detail().isUploading) {\n              <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n            }\n          </div>\n          @for (media of detail().media; track media) {\n            <div class=\"media-list-item\">\n              <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n            </div>\n          }\n          <input\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            <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                height=\"48px\"\n                viewBox=\"0 -960 960 960\"\n                width=\"48px\"\n                fill=\"#5f6368\"\n              >\n                <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-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: "18.0.1", 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: "18.0.1", 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.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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: "18.0.1", 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(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.course.media,
+                selected: i,
+            },
+        });
+    }
+    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: "18.0.1", 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: "18.0.1", 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.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i7.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i7.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseEditDialogComponent, decorators: [{
+            type: Component,
+            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 CourseDetailsComponent {
+    constructor() {
+        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 = [];
+    }
+    ngOnInit() { }
+    onClickScroller(id) {
+        this.viewportScroller.scrollToAnchor(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseDetailsComponent, isStandalone: true, selector: "rolatech-course-details", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, instructor: { classPropertyName: "instructor", publicName: "instructor", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"py-3\" id=\"details\">\n  <div class=\"text-xl font-medium py-2\">\u8BE6\u60C5</div>\n  @if (details()) {\n    @for (detail of details(); track $index) {\n      <div>\n        @if (detail.title) {\n          <div class=\"py-3 flex items-center gap-3\">\n            <span class=\"h-4 w-1 bg-orange-500 inline-block\"></span>\n            <span class=\"text-lg font-medium py-1\"> {{ detail.title }}</span>\n          </div>\n        }\n        @if (detail.content) {\n          <div>\n            {{ detail.content }}\n          </div>\n        }\n        @if (detail.media) {\n          <div class=\"w-80%\">\n            @for (item of detail.media; track item) {\n              <div class=\"py-3\">\n                <rolatech-thumbnail [src]=\"item.url + '?imageMogr2/format/avif'\" size=\"small\"></rolatech-thumbnail>\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: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-details', standalone: true, imports: [ThumbnailComponent], template: "<div class=\"py-3\" id=\"details\">\n  <div class=\"text-xl font-medium py-2\">\u8BE6\u60C5</div>\n  @if (details()) {\n    @for (detail of details(); track $index) {\n      <div>\n        @if (detail.title) {\n          <div class=\"py-3 flex items-center gap-3\">\n            <span class=\"h-4 w-1 bg-orange-500 inline-block\"></span>\n            <span class=\"text-lg font-medium py-1\"> {{ detail.title }}</span>\n          </div>\n        }\n        @if (detail.content) {\n          <div>\n            {{ detail.content }}\n          </div>\n        }\n        @if (detail.media) {\n          <div class=\"w-80%\">\n            @for (item of detail.media; track item) {\n              <div class=\"py-3\">\n                <rolatech-thumbnail [src]=\"item.url + '?imageMogr2/format/avif'\" size=\"small\"></rolatech-thumbnail>\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 CourseMediaOwnerRendererComponent {
+    constructor() {
+        this.name = input();
+        this.avatar = input();
+        this.username = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseMediaOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", 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: "18.0.1", 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 CourseCategoryComponent extends BaseComponent {
+    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;
+            },
+        });
+    }
+    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: "18.0.1", ngImport: i0, type: CourseCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseCategoryComponent, isStandalone: true, selector: "rolatech-course-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-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 md:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-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 class=\"py-2 cursor-pointer min-w-[80%] md:min-w-[33%] hover:bg-gray-100\" [routerLink]=\"['../../', item.id]\">\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", "inset"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, CourseItemComponent], selector: 'rolatech-course-category', template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-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 md:w-1/4 aspect-video bg-gray-200 rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-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 class=\"py-2 cursor-pointer min-w-[80%] md:min-w-[33%] hover:bg-gray-100\" [routerLink]=\"['../../', item.id]\">\n        <rolatech-course-item [course]=\"item\"></rolatech-course-item>\n      </div>\n    }\n  }\n</div>\n" }]
+        }] });
+
+class CourseDetailComponent extends BaseComponent {
+    constructor() {
+        super();
+        this.status = CourseStatus;
+        this.authService = inject(AuthService);
+        this.authUserService = inject(AuthUserService);
+        this.courseService = inject(CourseService);
+        this.viewportScroller = inject(ViewportScroller);
+        this.courseSectionService = inject(CourseSectionService);
+        this.authenticated = this.authService.authenticated;
+        this.instructorName = '';
+        this.username = '';
+        this.inWishList = false;
+        this.purchased = false;
+        this.sections = [];
+        this.type = CourseSectionLectureContentType;
+        effect(() => {
+            if (this.authenticated()) {
+                this.findPurchasedByCourseId();
+                this.findWishlistBy();
+            }
+        });
+    }
+    ngOnInit() {
+        this.findOne();
+        this.findSections();
+    }
+    scrollToAnchor(anchorId) {
+        // this.viewportScroller.setOffset([100, 100]);
+        document.getElementById(anchorId)?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'nearest',
+        });
+    }
+    findOne() {
+        this.courseService.get(this.id).subscribe({
+            next: (res) => {
+                this.course = res.data;
+                this.findUserBaseInfo(this.course.instructorId);
+                this.titleService.setTitle(`${this.course.name} - 拼小课`);
+            },
+        });
+    }
+    findSections() {
+        this.courseSectionService.findSections(this.id).subscribe({
+            next: (res) => {
+                this.sections = res.data;
+            },
+        });
+    }
+    findUserBaseInfo(userId) {
+        this.authUserService.getPublicUserInfo(userId).subscribe({
+            next: (res) => {
+                this.instructorName = res.name;
+                this.username = res.username;
+            },
+        });
+    }
+    onWish(e) {
+        if (this.authenticated()) {
+            if (this.inWishList) {
+                this.removeFromWishlist();
+            }
+            else {
+                this.addToWishlist();
+            }
+        }
+        else {
+            this.snackBarService.open('请先登录');
+        }
+    }
+    checkout(e) {
+        if (this.authenticated()) {
+            this.router.navigateByUrl(`/carts/checkout/express/courses/${this.id}`);
+        }
+        else {
+            this.snackBarService.open('请先登录');
+        }
+    }
+    removeFromWishlist() {
+        this.courseService.removeFromWishlist(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = false;
+            },
+        });
+    }
+    addToWishlist() {
+        this.courseService.addToWishlist(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = true;
+            },
+        });
+    }
+    onSection(event) {
+        const { section, lecture } = event;
+        this.router.navigate(['/courses', this.course.id, 'sections', section.id, 'lectures', lecture.id]);
+    }
+    findWishlistBy() {
+        this.courseService.findWishlistBy(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = res.data;
+            },
+        });
+    }
+    findPurchasedByCourseId() {
+        this.courseService.findPurchasedByCourseId(this.id).subscribe({
+            next: (res) => {
+                this.purchased = res.data ? true : false;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseDetailComponent, isStandalone: true, selector: "rolatech-course-detail", usesInheritance: true, ngImport: i0, template: "@if (course) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col-reverse gap-3 md:flex-row w-full justify-between\">\n      <div class=\"md:w-3/4\">\n        <rolatech-course-info [course]=\"course\" [instructor]=\"instructorName\" [username]=\"username\"> </rolatech-course-info>\n        <rolatech-course-sections\n          [sections]=\"sections\"\n          (section)=\"onSection($event)\"\n          (checkout)=\"checkout($event)\"\n          [purchased]=\"purchased\"\n        ></rolatech-course-sections>\n        <rolatech-course-schedule [schedule]=\"course.schedule\"></rolatech-course-schedule>\n        <rolatech-course-details [details]=\"course.details\"></rolatech-course-details>\n        <rolatech-comments [itemId]=\"course.id\"></rolatech-comments>\n      </div>\n      <div class=\"md:px-3\">\n        <!-- <rolatech-course-media [min]=\"!purchased\" [media]=\"course.media\" [min]=\"true\"></rolatech-course-media> -->\n        <rolatech-course-media [media]=\"course.media\" [min]=\"true\"></rolatech-course-media>\n        @if (!purchased) {\n          <rolatech-course-pricing [pricing]=\"course.pricing\"></rolatech-course-pricing>\n          <rolatech-course-action\n            [course]=\"course\"\n            (checkout)=\"checkout($event)\"\n            (wish)=\"onWish($event)\"\n            [inWishList]=\"inWishList\"\n          ></rolatech-course-action>\n        }\n      </div>\n    </div>\n  </rolatech-app-container>\n}\n", styles: ["mat-expansion-panel mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseInfoComponent, selector: "rolatech-course-info", inputs: ["course", "instructor", "username"] }, { kind: "component", type: CourseSectionsComponent, selector: "rolatech-course-sections", inputs: ["purchased", "sections"], outputs: ["section", "checkout"] }, { kind: "component", type: CourseScheduleComponent, selector: "rolatech-course-schedule", inputs: ["schedule"] }, { kind: "component", type: CourseDetailsComponent, selector: "rolatech-course-details", inputs: ["details", "instructor", "username"] }, { kind: "component", type: CourseMediaComponent, selector: "rolatech-course-media", inputs: ["media", "min"] }, { kind: "component", type: CoursePricingComponent, selector: "rolatech-course-pricing", inputs: ["pricing"] }, { kind: "component", type: CourseActionComponent, selector: "rolatech-course-action", inputs: ["course", "inWishList"], outputs: ["cart", "wish", "checkout"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: AppContainerComponent, selector: "rolatech-app-container" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseDetailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        CourseInfoComponent,
+                        CourseSectionsComponent,
+                        CourseScheduleComponent,
+                        CourseDetailsComponent,
+                        CourseMediaComponent,
+                        CoursePricingComponent,
+                        CourseActionComponent,
+                        CommentsComponent,
+                        AppContainerComponent,
+                    ], selector: 'rolatech-course-detail', template: "@if (course) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col-reverse gap-3 md:flex-row w-full justify-between\">\n      <div class=\"md:w-3/4\">\n        <rolatech-course-info [course]=\"course\" [instructor]=\"instructorName\" [username]=\"username\"> </rolatech-course-info>\n        <rolatech-course-sections\n          [sections]=\"sections\"\n          (section)=\"onSection($event)\"\n          (checkout)=\"checkout($event)\"\n          [purchased]=\"purchased\"\n        ></rolatech-course-sections>\n        <rolatech-course-schedule [schedule]=\"course.schedule\"></rolatech-course-schedule>\n        <rolatech-course-details [details]=\"course.details\"></rolatech-course-details>\n        <rolatech-comments [itemId]=\"course.id\"></rolatech-comments>\n      </div>\n      <div class=\"md:px-3\">\n        <!-- <rolatech-course-media [min]=\"!purchased\" [media]=\"course.media\" [min]=\"true\"></rolatech-course-media> -->\n        <rolatech-course-media [media]=\"course.media\" [min]=\"true\"></rolatech-course-media>\n        @if (!purchased) {\n          <rolatech-course-pricing [pricing]=\"course.pricing\"></rolatech-course-pricing>\n          <rolatech-course-action\n            [course]=\"course\"\n            (checkout)=\"checkout($event)\"\n            (wish)=\"onWish($event)\"\n            [inWishList]=\"inWishList\"\n          ></rolatech-course-action>\n        }\n      </div>\n    </div>\n  </rolatech-app-container>\n}\n", styles: ["mat-expansion-panel mat-icon{transform:scale(.8)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CourseLayoutComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.categories = [];
+        this.categoryService = inject(CategoryService);
+        this.courseService = inject(CourseService);
+        this.selectIndex = 0;
+    }
+    ngOnInit() {
+        this.findCategories();
+    }
+    findCategories() {
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
+    }
+    loadCourseByCategoryIndex(index) {
+        this.selectIndex = index;
+        const id = this.categories[index].id;
+        if (index === 0) {
+            this.router.navigate([`/courses`]);
+            // this.courseService.find({}).subscribe({
+            //   next: res => {
+            //   }
+            // })
+        }
+        else {
+            this.router.navigate([`../courses/categories/${id}`], {
+                relativeTo: this.route,
+            });
+        }
+    }
+    nextCategory() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseLayoutComponent, isStandalone: true, selector: "rolatech-course-layout", usesInheritance: true, ngImport: i0, template: "@if (categories) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-gray-200 md:bg-white rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"course-layout-active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-gray-200 md:bg-white rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"course-layout-active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n    <!-- <rolatech-list>\n      <router-outlet></router-outlet>\n    </rolatech-list> -->\n  </rolatech-app-container>\n}\n", styles: [".course-layout-active{border-radius:8px;color:#ff4500}@media (max-width: 768px){.course-layout-active{border-radius:8px;background-color:#000;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: "18.0.1", ngImport: i0, type: CourseLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, AppContainerComponent, ListComponent], selector: 'rolatech-course-layout', template: "@if (categories) {\n  <rolatech-app-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-gray-200 md:bg-white rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"course-layout-active\"\n            routerLink=\"/courses\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-gray-200 md:bg-white rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"course-layout-active\"\n              [routerLink]=\"['../courses/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n    <!-- <rolatech-list>\n      <router-outlet></router-outlet>\n    </rolatech-list> -->\n  </rolatech-app-container>\n}\n", styles: [".course-layout-active{border-radius:8px;color:#ff4500}@media (max-width: 768px){.course-layout-active{border-radius:8px;background-color:#000;color:#fff}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }] });
+
+class CourseSectionContentComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.courseSectionService = inject(CourseSectionService);
+        this.courseService = inject(CourseService);
+        this.authService = inject(AuthService);
+        this.authUserService = inject(AuthUserService);
+        this.el = inject(ElementRef);
+        this.platformId = inject(PLATFORM_ID);
+        this.authenticated = this.authService.authenticated;
+        this.sections = [];
+        this.courseId = '';
+        this.sectionId = '';
+        this.lectureId = '';
+        this.videoUrl = '';
+        this.instructorName = '';
+        this.instructorAvatar = '';
+        this.instructorUsername = '';
+        this.purchased = false;
+        effect(() => {
+            if (this.authenticated()) {
+                this.findPurchasedByCourseId();
+            }
+        });
+    }
+    ngOnInit() {
+        this.route.params.subscribe((params) => {
+            this.courseId = params['id'];
+            this.sectionId = params['sectionId'];
+            this.lectureId = params['lectureId'];
+            this.findCourse(this.courseId);
+            this.findSections(this.courseId);
+        });
+    }
+    ngOnDestroy() {
+        if (this.player) {
+            this.player.destroy();
+        }
+    }
+    ngAfterViewInit() { }
+    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,
+                },
+            });
+        }
+        else {
+            this.player.switchVideo({
+                url: url,
+                pic: thumbnail,
+            });
+        }
+    }
+    findSections(courseId) {
+        this.courseSectionService.findSections(courseId).subscribe({
+            next: (res) => {
+                this.sections = res.data;
+                const section = this.sections.find((item) => item.id === this.sectionId);
+                const letcture = section?.lectures.find((item) => item.id === this.lectureId);
+                this.videoUrl = letcture?.item.url;
+                const thumbnail = letcture?.item.thumbnail;
+                this.initPlayer(this.videoUrl, thumbnail);
+            },
+        });
+    }
+    findCourse(courseId) {
+        this.courseService.get(courseId).subscribe({
+            next: (res) => {
+                this.course = res.data;
+                this.findUserBaseInfo(this.course.instructorId);
+            },
+        });
+    }
+    findUserBaseInfo(userId) {
+        this.authUserService.getPublicUserInfo(userId).subscribe({
+            next: (res) => {
+                this.instructorName = res.name;
+                this.instructorAvatar = res.avatar;
+                this.instructorUsername = res.username;
+            },
+        });
+    }
+    findPurchasedByCourseId() {
+        this.courseService.findPurchasedByCourseId(this.courseId).subscribe({
+            next: (res) => {
+                this.purchased = res.data ? true : false;
+            },
+        });
+    }
+    onSection(event) {
+        const { section, lecture } = event;
+        this.router.navigate(['/courses', this.courseId, 'sections', section.id, 'lectures', lecture.id]);
+    }
+    checkout(e) {
+        this.router.navigateByUrl(`/carts/checkout/express/courses/${this.courseId}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseSectionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseSectionContentComponent, isStandalone: true, selector: "rolatech-course-section-content", ngImport: i0, template: "<div class=\"flex lg:flex-row flex-col justify-between w-full mt-2 lg:mt-4\">\n  <div class=\"lg:w-[70%] flex flex-col items-start justify-center px-4 lg:px-6 h-fit\">\n    <div id=\"dplayer\" class=\"w-full h-auto aspect-video rounded-xl\"></div>\n    <div class=\"py-3 w-full\">\n      @if (course) {\n        <div class=\"text-xl font-medium py-3\">\n          {{ course.name }}\n        </div>\n        <div>\n          <rolatech-course-media-owner-renderer\n            [name]=\"instructorName\"\n            [avatar]=\"instructorAvatar\"\n            [username]=\"instructorUsername\"\n          ></rolatech-course-media-owner-renderer>\n        </div>\n        <div class=\"hidden lg:block\">\n          <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"lg:w-[30%] px-4 lg:px-0 lg:pr-6\">\n    <rolatech-course-sections\n      [sections]=\"sections\"\n      [purchased]=\"purchased\"\n      (section)=\"onSection($event)\"\n      (checkout)=\"checkout($event)\"\n    ></rolatech-course-sections>\n  </div>\n  <div class=\"lg:hidden block px-4 lg:px-6\">\n    <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: CourseSectionsComponent, selector: "rolatech-course-sections", inputs: ["purchased", "sections"], outputs: ["section", "checkout"] }, { kind: "component", type: CourseMediaOwnerRendererComponent, selector: "rolatech-course-media-owner-renderer", inputs: ["name", "avatar", "username"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseSectionContentComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        CourseSectionsComponent,
+                        CourseMediaOwnerRendererComponent,
+                        CommentsComponent,
+                    ], selector: 'rolatech-course-section-content', template: "<div class=\"flex lg:flex-row flex-col justify-between w-full mt-2 lg:mt-4\">\n  <div class=\"lg:w-[70%] flex flex-col items-start justify-center px-4 lg:px-6 h-fit\">\n    <div id=\"dplayer\" class=\"w-full h-auto aspect-video rounded-xl\"></div>\n    <div class=\"py-3 w-full\">\n      @if (course) {\n        <div class=\"text-xl font-medium py-3\">\n          {{ course.name }}\n        </div>\n        <div>\n          <rolatech-course-media-owner-renderer\n            [name]=\"instructorName\"\n            [avatar]=\"instructorAvatar\"\n            [username]=\"instructorUsername\"\n          ></rolatech-course-media-owner-renderer>\n        </div>\n        <div class=\"hidden lg:block\">\n          <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"lg:w-[30%] px-4 lg:px-0 lg:pr-6\">\n    <rolatech-course-sections\n      [sections]=\"sections\"\n      [purchased]=\"purchased\"\n      (section)=\"onSection($event)\"\n      (checkout)=\"checkout($event)\"\n    ></rolatech-course-sections>\n  </div>\n  <div class=\"lg:hidden block px-4 lg:px-6\">\n    <rolatech-comments [itemId]=\"lectureId\"></rolatech-comments>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+const courseRoutes = [
+    {
+        path: '',
+        component: CourseLayoutComponent,
+        children: [
+            {
+                path: '',
+                loadComponent: () => import('./rolatech-angular-course-course-index.component-DmBSbnLe.mjs').then((x) => x.CourseIndexComponent),
+            },
+            {
+                path: 'categories/:id',
+                component: CourseCategoryComponent,
+            },
+        ],
+    },
+    {
+        path: ':id',
+        component: CourseDetailComponent,
+    },
+    {
+        path: ':id/sections/:sectionId/lectures/:lectureId',
+        component: CourseSectionContentComponent,
+    },
+    {
+        path: 'my-courses',
+        component: CourseDetailComponent,
+    },
+];
+
+class CourseManageContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CourseManageContentComponent, isStandalone: true, selector: "rolatech-course-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-content', standalone: true, imports: [CommonModule], template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class CourseManageDetailsComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isLoading = false;
+        this.isUploading = false;
+        this.details = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.findDetails(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.details = res.data;
+                }
+            },
+        });
+    }
+    addDetail() {
+        if (!this.details) {
+            this.details = [];
+        }
+        this.courseService
+            .addDetail(this.id, {
+            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) {
+        const detailId = event.id;
+        const index = findIndex(this.details, (item) => item.id === detailId);
+        const file = event.data.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                if (!this.details[index].media) {
+                    this.details[index].media = [];
+                }
+                this.details[index].media.push({
+                    url: reader.result,
+                    alt: 'upload image',
+                });
+                this.details[index].isUploading = true;
+                const formData = new FormData();
+                formData.append('file', file);
+                this.courseService.uploadDetailMedia(this.id, detailId, formData).subscribe({
+                    next: (res) => {
+                        this.isUploading = false;
+                        this.details[index].isUploading = false;
+                        const tmp = this.details[index].media;
+                        delete res.data.productDetail;
+                        this.details[index].media[this.details[index].media.length - 1] = res.data;
+                    },
+                    error: (e) => {
+                        this.isUploading = false;
+                        this.snackBar.open('上传失败: ' + e.message);
+                    },
+                });
+            };
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    onDetailMediaDelete(event) {
+        const detailId = event.id;
+        const mediaId = event.media.id;
+        this.courseService.deleteDetailMedia(this.id, detailId, mediaId).subscribe({
+            next: (res) => {
+                const detail = this.details.find((item) => item.id === detailId);
+                remove(detail.media, {
+                    id: mediaId,
+                });
+            },
+        });
+    }
+    onDetailSave(detail) {
+        delete detail.isUploading;
+        this.courseService.updateDetail(this.id, detail.id, detail).subscribe({
+            next: (res) => {
+                this.snackBar.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onDetailDelete(detail) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除详情',
+                message: '确定删除此详情吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deleteDetail(this.id, 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: "18.0.1", ngImport: i0, type: CourseManageDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageDetailsComponent, isStandalone: true, selector: "rolatech-course-manage-details", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (detail of details; track detail) {\n        <rolatech-detail-item\n          [detail]=\"detail\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-detail-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addDetail()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-details', standalone: true, imports: [DetailItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (detail of details; track detail) {\n        <rolatech-detail-item\n          [detail]=\"detail\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-detail-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addDetail()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class CourseManageScheduleComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isLoading = false;
+        this.schedule = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.findSchedule(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.schedule = res.data;
+                }
+            },
+        });
+    }
+    addSchedule() {
+        const dialogRef = this.dialog.open(CourseScheduleAddDialogComponent, {
+            width: '500px',
+            disableClose: true,
+            data: {
+                title: '添加课表',
+            },
+        });
+        dialogRef.afterClosed().subscribe((schedule) => {
+            if (schedule) {
+                this.courseService.addSchedule(this.id, schedule).subscribe({
+                    next: (res) => {
+                        this.schedule.push(res.data);
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    editSchedule() {
+        const dialogRef = this.dialog.open(CourseScheduleDialogComponent, {
+            width: '500px',
+            height: '90%',
+            data: {
+                title: '编辑课表',
+                courseId: this.id,
+                schedule: this.schedule,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.addSchedule(this.id, { schedule: result }).subscribe({
+                    next: (res) => {
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    onScheduleSave(schedule) {
+        this.courseService.updateSchedule(this.id, schedule.id, schedule).subscribe({
+            next: (res) => {
+                this.snackBar.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onScheduleDelete(schedule) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除课表',
+                message: '确定删除此课表吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deleteSchedule(this.id, schedule.id).subscribe({
+                    next: (res) => {
+                        remove(this.schedule, {
+                            id: schedule.id,
+                        });
+                        this.snackBar.open(res.data);
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageScheduleComponent, isStandalone: true, selector: "rolatech-course-manage-schedule", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BFE\u7A0B\u8868\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item\n          [value]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onScheduleSave($event)\"\n          (delete)=\"onScheduleDelete($event)\"\n        >\n        </rolatech-schedule-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSchedule()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u589E\u52A0\u8BFE\u8868</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageScheduleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-schedule', standalone: true, imports: [ScheduleItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BFE\u7A0B\u8868\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item\n          [value]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onScheduleSave($event)\"\n          (delete)=\"onScheduleDelete($event)\"\n        >\n        </rolatech-schedule-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSchedule()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u589E\u52A0\u8BFE\u8868</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class CourseManagePricingComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isLoading = false;
+        this.pricing = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.findPricing(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.pricing = res.data;
+                }
+            },
+        });
+    }
+    editPricing() {
+        const dialogRef = this.dialog.open(CoursePricingDialogComponent, {
+            width: '500px',
+            height: '90%',
+            data: {
+                title: '编辑价格',
+                courseId: this.id,
+                pricing: this.pricing,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.addPricing(this.id, { pricing: result }).subscribe({
+                    next: (res) => {
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    addPricing() {
+        const dialogRef = this.dialog.open(CoursePricingAddDialogComponent, {
+            disableClose: true,
+            width: '500px',
+            data: {
+                title: '添加价格',
+            },
+        });
+        dialogRef.afterClosed().subscribe((pricing) => {
+            if (pricing) {
+                this.courseService.addPricing(this.id, { ...pricing, total: pricing.total * 100 }).subscribe({
+                    next: (res) => {
+                        this.pricing.push(res.data);
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    onPricingSave(pricing) {
+        this.courseService.updatePricing(this.id, pricing.id, pricing).subscribe({
+            next: (res) => {
+                this.snackBar.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onPricingDelete(pricing) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除价格',
+                message: '确定删除此价格吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deletePricing(this.id, pricing.id).subscribe({
+                    next: (res) => {
+                        remove(this.pricing, {
+                            id: pricing.id,
+                        });
+                        this.snackBar.open(res.data);
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManagePricingComponent, isStandalone: true, selector: "rolatech-course-manage-pricing", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item\n          [pricing]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onPricingSave($event)\"\n          (delete)=\"onPricingDelete($event)\"\n        >\n        </rolatech-pricing-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addPricing()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u4EF7\u683C</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManagePricingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-pricing', standalone: true, imports: [PricingItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item\n          [pricing]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onPricingSave($event)\"\n          (delete)=\"onPricingDelete($event)\"\n        >\n        </rolatech-pricing-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addPricing()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u4EF7\u683C</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class BookingService extends BaseService {
+    init() {
+        this.endpoint = 'partners/bookings';
+        super.init();
+    }
+    items(options) {
+        return this.http.get(`${this.actionUrl}/items`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BookingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BookingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BookingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class InstructorService extends BaseService {
+    init() {
+        this.endpoint = 'instructors';
+        super.init();
+    }
+    findMyClassrooms(options) {
+        return this.http.get(`${this.actionUrl}/classrooms/me`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InstructorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InstructorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InstructorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CourseManageInfoComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.courseService = inject(CourseService);
+        this.instructorService = inject(InstructorService);
+        this.categoryService = inject(CategoryService);
+        this.bookingService = inject(BookingService);
+        this.isLoading = false;
+        this.status = CourseStatus;
+        this.courseType = [
+            {
+                key: 'ONLINE',
+                value: '线上',
+            },
+            {
+                key: 'OFFLINE',
+                value: '线下',
+            },
+            {
+                key: 'MIXED',
+                value: '混合',
+            },
+        ];
+    }
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
+        this.findClassrooms();
+        this.findBookedClassrooms();
+    }
+    findBookedClassrooms() {
+        this.bookingService.items({ status: 'paid' }).subscribe({
+            next: (res) => {
+                this.bookedClassrooms = res.data;
+            },
+        });
+    }
+    findClassrooms() {
+        this.instructorService.findMyClassrooms({}).subscribe({
+            next: (res) => {
+                this.classrooms = res.data;
+            },
+        });
+    }
+    find() {
+        this.courseService.get(this.id).subscribe({
+            next: (res) => {
+                this.course = res.data;
+            },
+        });
+    }
+    compareFn(o1, o2) {
+        return o1.id === o2?.id;
+    }
+    compareClassroom(o1, o2) {
+        if (o1.room) {
+            return (o1.latitude === o2?.latitude &&
+                o1.longitude === o2?.longitude &&
+                o1.room === o2.room &&
+                o1.startAt === o2.startAt &&
+                o1.endAt === o2.endAt);
+        }
+        else {
+            return o1.latitude === o2?.latitude && o1.longitude === o2?.longitude;
+        }
+    }
+    onSelectionChange(event) {
+        this.selectedCategoyIds = event.value;
+    }
+    onClassroomSelected(event) {
+        this.selectedClassroom = event.value;
+    }
+    update() {
+        const { name, description, categories, type, classroom } = this.course;
+        const finalClassroom = clone(classroom);
+        finalClassroom.address = classroom.room ? classroom.address + ' ' + classroom.room + '室' : classroom.address;
+        const data = {
+            name,
+            description,
+            categories,
+            type,
+            classroom: finalClassroom,
+        };
+        this.courseService.update(this.id, data).subscribe({
+            next: (res) => {
+                this.snackBarService.open('保存成功');
+                // this.router.navigate([`../${res.data.id}`], { relativeTo: this.route });
+            },
+            error: (e) => {
+                this.snackBarService.open(e.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageInfoComponent, isStandalone: true, selector: "rolatech-course-manage-info", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n          <mat-label>\u5206\u7C7B</mat-label>\n          <mat-select\n            multiple\n            name=\"id\"\n            [compareWith]=\"compareFn\"\n            [(ngModel)]=\"course.categories\"\n            #select=\"matSelect\"\n            (selectionChange)=\"onSelectionChange($event)\"\n          >\n            @for (item of categories; track item) {\n              <mat-option [value]=\"item\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u7C7B\u578B</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label>\u6559\u5BA4</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.classroom\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"\u81EA\u6709\u6559\u5BA4\">\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"\u5DF2\u8D2D\u6559\u5BA4\">\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md font-thin\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-info', standalone: true, imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatButtonModule,
+                        ToolbarComponent,
+                        CourseManageContentComponent,
+                    ], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n          <mat-label>\u5206\u7C7B</mat-label>\n          <mat-select\n            multiple\n            name=\"id\"\n            [compareWith]=\"compareFn\"\n            [(ngModel)]=\"course.categories\"\n            #select=\"matSelect\"\n            (selectionChange)=\"onSelectionChange($event)\"\n          >\n            @for (item of categories; track item) {\n              <mat-option [value]=\"item\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u7C7B\u578B</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label>\u6559\u5BA4</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.classroom\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"\u81EA\u6709\u6559\u5BA4\">\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"\u5DF2\u8D2D\u6559\u5BA4\">\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md font-thin\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+const SIZE = 10 * 1024 * 1024; // file slice size 10MB
+class CourseManageMediaComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isUploading = false;
+        this.isLoading = false;
+        this.media = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.get(this.id).subscribe({
+            next: (res) => {
+                this.media = res.data.media || [];
+            },
+        });
+    }
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    createFileChunk(file, size = SIZE) {
+        const fileChunkList = [];
+        let cur = 0;
+        while (cur < file.size) {
+            fileChunkList.push({ file: file.slice(cur, cur + size) });
+            cur += size;
+        }
+        return fileChunkList;
+    }
+    onUploadMedia2(event) {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => { };
+        const fileChunkList = this.createFileChunk(file);
+        fileChunkList.forEach((item) => { });
+    }
+    onUploadMedia(event) {
+        const file = event.target.files[0];
+        // 5MB * 1024 * 1024 = 5242880
+        // if (file?.size > 5242880) {
+        //   this.snackBar.open('尺寸过大, 请修改后上传');
+        //   this.isUploading = false;
+        //   return;
+        // }
+        if (file) {
+            const reader = new FileReader();
+            const formData = new FormData();
+            formData.append('file', file);
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const img = new Image();
+                img.onload = () => {
+                    this.media.push({
+                        url: img.src,
+                        alt: 'upload image',
+                        width: img.width,
+                        height: img.height,
+                    });
+                    this.isUploading = true;
+                };
+                img.src = reader.result; // This is the data URL
+            };
+            this.courseService.uploadMedia(this.id, formData).subscribe({
+                next: (res) => {
+                    this.isUploading = false;
+                    const index = findLastIndex(this.media);
+                    // Replace item at index using native splice
+                    this.media.splice(index, 1, res.data);
+                },
+                error: (e) => {
+                    this.isUploading = false;
+                    this.snackBar.open('上传失败: ' + e.message);
+                },
+            });
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    onMediaDelete(item) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除图片',
+                message: '确定删除这张课程图片吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deleteMedia(this.id, item.id).subscribe({
+                    next: (res) => {
+                        this.media = this.media.filter((m) => m.id !== item.id);
+                        this.snackBar.open('删除成功');
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageMediaComponent, isStandalone: true, selector: "rolatech-course-manage-media", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  <div>\n    <p class=\"text-gray-600\">*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($event)\" [isUploading]=\"isUploading\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-media', standalone: true, imports: [MediaListComponent, MediaListItemComponent, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  <div>\n    <p class=\"text-gray-600\">*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($event)\" [isUploading]=\"isUploading\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class CourseManageSectionComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.courseService = inject(CourseService);
+        this.sections = [];
+        this.hasUnsaved = false;
+        this.editId = '';
+        this.lectureEditId = '';
+        this.chunkSize = 5 * 1024 * 1024; // 切片大小
+        this.fileIndex = 0; // 当前正在被遍历的文件下标
+    }
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+    }
+    find() {
+        this.courseService.getCourseSection(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.sections = res.data;
+                }
+            },
+        });
+    }
+    addSection() {
+        const section = {
+            title: '',
+            description: '',
+        };
+        this.courseService.addCourseSection(this.id, section).subscribe({
+            next: (res) => {
+                this.sections.push(res.data);
+                this.editId = res.data.id;
+            },
+        });
+        this.hasUnsaved = false;
+    }
+    onCancel(event) {
+        this.sections.pop();
+        this.hasUnsaved = false;
+    }
+    onSectionSave(event) {
+        const { id } = event;
+        this.courseService.updateCourseSection(id, event).subscribe({
+            next: (res) => {
+                this.hasUnsaved = false;
+                this.snackBarService.open('保存成功');
+            },
+        });
+        this.hasUnsaved = false;
+    }
+    onSectionEdit(event) {
+        this.editId = event.id;
+        // this.editIndex = this.sections.find((item: any) => item.id === event.id);
+    }
+    onSectionDelete(event) {
+        const { id } = event;
+        const options = {
+            title: '确认删除吗',
+            message: '删除这个章节吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    const data = {
+                        name: res,
+                    };
+                    this.courseService.deleteCourseSection(id).subscribe({
+                        next: (res) => {
+                            this.sections.pop();
+                            this.hasUnsaved = false;
+                            this.snackBarService.open(res.data);
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    addLecture(section) {
+        const lecture = {
+            title: '',
+            type: 'VIDEO',
+        };
+        this.courseService.addLecture(section.id, lecture).subscribe({
+            next: (res) => {
+                this.lectureEditId = res.data.id;
+                if (section.lectures) {
+                    section.lectures.push(res.data);
+                }
+                else {
+                    const lectures = [];
+                    lectures.push(res.data);
+                    section.lectures = lectures;
+                }
+            },
+        });
+    }
+    onAddLecture(event) { }
+    onLectureSave(lecture) {
+        this.courseService.updateLecture(lecture.id, lecture).subscribe({
+            next: (res) => {
+                this.snackBarService.open('保存成功');
+            },
+        });
+    }
+    onLectureEdit(lecture) { }
+    onMediaEdit(lecture, video) {
+        const { id } = lecture;
+        const options = {
+            title: lecture.title,
+            cancelText: '取消',
+            confirmText: '保存',
+            data: lecture,
+            width: '80vw',
+            height: '100%',
+            component: CourseSectionLectureVideoDialogComponent,
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    // this.courseService.deleteLecture(id).subscribe({
+                    //   next: (res) => {},
+                    //   error: (error) => {
+                    //     this.snackBarService.open(error.message);
+                    //   },
+                    // });
+                }
+            },
+        });
+    }
+    onLectureDelete(section, lecture) {
+        const { id } = lecture;
+        const options = {
+            title: '确认删除吗',
+            message: '删除这一小节吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.courseService.deleteLecture(id).subscribe({
+                        next: (res) => {
+                            const index = section.lectures.findIndex((item) => item.id === id);
+                            section.lectures.splice(index, 1);
+                            this.hasUnsaved = false;
+                            this.snackBarService.open(res.data);
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    onMediaUploadInit(lecture, event) {
+        const file = event.data.target.files[0];
+        if (!file) {
+            return;
+        }
+        const item = {
+            url: URL.createObjectURL(file),
+        };
+        lecture.item = item;
+        lecture.isUploading = true;
+        lecture.item.progress = 0;
+        const reader = new FileReader();
+        if (reader.readyState === FileReader.EMPTY) {
+            reader.onload = async (e) => {
+                const fileBuffer = e.target.result;
+                crypto.subtle.digest('SHA-256', fileBuffer).then((res) => {
+                    const hashArray = Array.from(new Uint8Array(res));
+                    const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, '0')).join('');
+                    const data = { hash: hashHex, filename: file.name, fileType: file.type };
+                    this.courseService.uploadVideoInit(lecture.id, data).subscribe({
+                        next: (res) => {
+                            this.uploadPart(lecture, res.data.uploadId, file);
+                        },
+                        error: (e) => { },
+                    });
+                });
+            };
+            reader.onerror = (error) => { };
+            reader.readAsArrayBuffer(file);
+        }
+    }
+    uploadFile(lecture, file, index, uploadId) {
+        const reader = new FileReader();
+        return new Observable((observer) => {
+            reader.readAsArrayBuffer(file);
+            reader.onload = (e) => {
+                const fileBuffer = e.target.result;
+                crypto.subtle.digest('SHA-256', fileBuffer).then((res) => {
+                    const hashArray = Array.from(new Uint8Array(res));
+                    const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, '0')).join('');
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    formData.append('uploadId', uploadId);
+                    formData.append('number', index + 1);
+                    formData.append('hash', hashHex);
+                    this.courseService.uploadVideoPartsToLecture(lecture.id, formData).subscribe({
+                        next: (res) => {
+                            observer.next(res);
+                            observer.complete();
+                        },
+                        error: (e) => {
+                            this.snackBarService.open('上传失败: ' + e.message);
+                        },
+                    });
+                });
+            };
+            reader.onerror = (error) => {
+                this.snackBarService.open('上传失败: ' + error);
+            };
+        });
+    }
+    uploadPart(lecture, uploadId, file) {
+        let uploadedCount = 0;
+        const fileChunkList = this.createFileChunk(file);
+        const numberOfChunks = fileChunkList.length;
+        from(fileChunkList)
+            .pipe(concatMap((val, index) => this.uploadFile(lecture, val.file, index, uploadId)), take(numberOfChunks))
+            .subscribe((res) => {
+            uploadedCount++;
+            const p = ((uploadedCount / numberOfChunks) * 100).toFixed(0);
+            lecture.item.progress = parseFloat(p);
+            if (uploadedCount === numberOfChunks) {
+                console.log('done');
+                this.completePartUpload(lecture, { uploadId });
+            }
+        });
+    }
+    completePartUpload(lecture, data) {
+        data.duration = lecture.item.duration;
+        this.courseService.completePartUpload(lecture.id, data).subscribe({
+            next: (res) => {
+                lecture.isUploading = false;
+                lecture.item.id = res.data.id;
+            },
+            error: (e) => {
+                this.snackBarService.open('上传失败: ' + e.message);
+            },
+        });
+    }
+    onMediaUpload(lecture, event) {
+        const lectureId = event.id;
+        const file = event.data.target.files[0];
+        if (!file) {
+            return;
+        }
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            const formData = new FormData();
+            formData.append('file', file);
+            this.courseService.uploadVideoToLecture(lectureId, formData).subscribe({
+                next: (res) => {
+                    lecture.isUploading = false;
+                    lecture.item = res.data;
+                },
+                error: (e) => {
+                    lecture.isUploading = false;
+                    this.snackBarService.open('上传失败: ' + e.message);
+                },
+            });
+        };
+        reader.onerror = (error) => { };
+    }
+    onMediaDelete(lecture, event) {
+        // lecture.item = null;
+        const { id } = event;
+        const options = {
+            title: '确认删除吗',
+            message: '删除这个视频吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.courseService.deleteLectureVideo(id).subscribe({
+                        next: (res) => {
+                            lecture.item = null;
+                            this.snackBarService.open(res.data);
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    createFileChunk(file, size = this.chunkSize) {
+        const fileChunkList = [];
+        let count = 0;
+        while (count < file.size) {
+            fileChunkList.push({
+                file: file.slice(count, count + size),
+            });
+            count += size;
+        }
+        return fileChunkList;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageSectionComponent, isStandalone: true, selector: "rolatech-course-manage-section", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u7AE0\u8282\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track $index) {\n        <div class=\"bg-gray-100 p-2 mb-2 rounded-lg\">\n          <rolatech-course-section-item\n            [section]=\"section\"\n            (edit)=\"onSectionEdit($event)\"\n            (save)=\"onSectionSave($event)\"\n            (delete)=\"onSectionDelete($event)\"\n            [editId]=\"editId\"\n          >\n            <div class=\"bg-white sm:ml-8 mt-3 rounded-md divide-y divide-dashed\">\n              @if (section?.lectures) {\n                @for (lecture of section.lectures; track $index) {\n                  <div>\n                    <rolatech-course-section-lecture-item\n                      [lecture]=\"lecture\"\n                      (save)=\"onLectureSave($event)\"\n                      (delete)=\"onLectureDelete(section, $event)\"\n                      (edit)=\"onLectureEdit($event)\"\n                      (upload)=\"onMediaUploadInit(lecture, $event)\"\n                      (mediaEdit)=\"onMediaEdit(lecture, $event)\"\n                      (deleteMedia)=\"onMediaDelete(lecture, $event)\"\n                      [editId]=\"lectureEditId\"\n                    ></rolatech-course-section-lecture-item>\n                  </div>\n                }\n              }\n              <div class=\"p-2\">\n                <button mat-flat-button (click)=\"addLecture(section)\">\n                  <mat-icon>add</mat-icon>\n                  <span>\u589E\u52A0\u5C0F\u8282</span>\n                </button>\n              </div>\n            </div>\n          </rolatech-course-section-item>\n        </div>\n      }\n    </div>\n    @if (!hasUnsaved) {\n      <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n        <mat-icon>add</mat-icon>\n        <span>\u589E\u52A0\u7AE0\u8282</span>\n      </button>\n    }\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: CourseSectionItemComponent, selector: "rolatech-course-section-item", inputs: ["section", "actions", "hasUnsaved", "editId"], outputs: ["sectionChange", "actionsChange", "hasUnsavedChange", "editIdChange", "save", "cancel", "delete", "edit", "addLecture"] }, { kind: "component", type: CourseSectionLectureItemComponent, selector: "rolatech-course-section-lecture-item", inputs: ["progress", "lecture", "actions", "hasUnsaved", "editId"], outputs: ["editIdChange", "save", "cancel", "delete", "edit", "mediaEdit", "thumbnailUpload", "upload", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-section', standalone: true, imports: [
+                        CourseSectionItemComponent,
+                        CourseSectionLectureItemComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressBarModule,
+                        ToolbarComponent,
+                        CourseManageContentComponent,
+                    ], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u7AE0\u8282\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track $index) {\n        <div class=\"bg-gray-100 p-2 mb-2 rounded-lg\">\n          <rolatech-course-section-item\n            [section]=\"section\"\n            (edit)=\"onSectionEdit($event)\"\n            (save)=\"onSectionSave($event)\"\n            (delete)=\"onSectionDelete($event)\"\n            [editId]=\"editId\"\n          >\n            <div class=\"bg-white sm:ml-8 mt-3 rounded-md divide-y divide-dashed\">\n              @if (section?.lectures) {\n                @for (lecture of section.lectures; track $index) {\n                  <div>\n                    <rolatech-course-section-lecture-item\n                      [lecture]=\"lecture\"\n                      (save)=\"onLectureSave($event)\"\n                      (delete)=\"onLectureDelete(section, $event)\"\n                      (edit)=\"onLectureEdit($event)\"\n                      (upload)=\"onMediaUploadInit(lecture, $event)\"\n                      (mediaEdit)=\"onMediaEdit(lecture, $event)\"\n                      (deleteMedia)=\"onMediaDelete(lecture, $event)\"\n                      [editId]=\"lectureEditId\"\n                    ></rolatech-course-section-lecture-item>\n                  </div>\n                }\n              }\n              <div class=\"p-2\">\n                <button mat-flat-button (click)=\"addLecture(section)\">\n                  <mat-icon>add</mat-icon>\n                  <span>\u589E\u52A0\u5C0F\u8282</span>\n                </button>\n              </div>\n            </div>\n          </rolatech-course-section-item>\n        </div>\n      }\n    </div>\n    @if (!hasUnsaved) {\n      <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n        <mat-icon>add</mat-icon>\n        <span>\u589E\u52A0\u7AE0\u8282</span>\n      </button>\n    }\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }] });
+
+class CourseManageLayoutComponent {
+    constructor() {
+        this.submitted = false;
+        this.accepted = false;
+        this.isDraft = false;
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.get();
+    }
+    get() {
+        this.courseService.get(this.id).subscribe({
+            next: (res) => {
+                this.course = res.data;
+                this.updateStatus();
+            },
+        });
+    }
+    updateStatus() {
+        this.isDraft = this.course.status.toString() === 'DRAFT' || this.course.status.toString() === 'PENDING';
+        this.accepted = this.course.status.toString() === 'ACCEPTED';
+    }
+    submitForReview() {
+        this.courseService.review(this.id).subscribe({
+            next: (res) => {
+                this.snackBar.open('提交成功, 等待审核');
+                this.course.status = CourseStatus['审核中'];
+                this.updateStatus();
+            },
+            error: (error) => {
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    publish() {
+        this.courseService.publish(this.id).subscribe({
+            next: (res) => {
+                this.snackBar.open('发布成功');
+                this.course.status = CourseStatus['已发布'];
+                this.updateStatus();
+            },
+            error: (error) => {
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageLayoutComponent, isStandalone: true, selector: "rolatech-course-manage-layout", ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-3\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-3\">\u56FE\u7247</a>\n      <a routerLink=\"./details\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BE6\u60C5</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u5185\u5BB9</div>\n      <a routerLink=\"./section\" routerLinkActive=\"manage-active\" class=\"p-3\">\u7AE0\u8282</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BFE\u8868</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-3\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 ml-3 md:ml-2\">\n        <!-- <button mat-stroked-button (click)=\"publish()\">\u9884\u89C8</button> -->\n        <button mat-flat-button (click)=\"submitForReview()\">\u63D0\u4EA4\u5BA1\u6838</button>\n      </div>\n    }\n\n    @if (accepted) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u8BFE\u7A0B</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:#0000000d;box-shadow:5px 0 #000 inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px #000}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-layout', standalone: true, imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet, CourseManageContentComponent], template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-3\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-3\">\u56FE\u7247</a>\n      <a routerLink=\"./details\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BE6\u60C5</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u5185\u5BB9</div>\n      <a routerLink=\"./section\" routerLinkActive=\"manage-active\" class=\"p-3\">\u7AE0\u8282</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BFE\u8868</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-3\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 ml-3 md:ml-2\">\n        <!-- <button mat-stroked-button (click)=\"publish()\">\u9884\u89C8</button> -->\n        <button mat-flat-button (click)=\"submitForReview()\">\u63D0\u4EA4\u5BA1\u6838</button>\n      </div>\n    }\n\n    @if (accepted) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u8BFE\u7A0B</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:#0000000d;box-shadow:5px 0 #000 inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px #000}}\n"] }]
+        }], ctorParameters: () => [] });
+
+const courseManageRoutes = [
+    {
+        path: '',
+        component: CourseManageLayoutComponent,
+        children: [
+            {
+                path: 'info',
+                component: CourseManageInfoComponent,
+            },
+            {
+                path: 'media',
+                component: CourseManageMediaComponent,
+            },
+            {
+                path: 'details',
+                component: CourseManageDetailsComponent,
+            },
+            {
+                path: 'pricing',
+                component: CourseManagePricingComponent,
+            },
+            {
+                path: 'schedule',
+                component: CourseManageScheduleComponent,
+            },
+            {
+                path: 'section',
+                component: CourseManageSectionComponent,
+            },
+        ],
+    },
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CourseDetailsComponent as A, CourseMediaOwnerRendererComponent as B, CourseService as C, CourseSectionLectureVideoDialogComponent as D, ScheduleItemComponent as E, DetailItemComponent as F, courseItem_component as G, PricingItemComponent as P, ScheduleDate as S, CategoryService as a, courseManageRoutes as b, courseRoutes as c, CourseStatus as d, CourseRequestStatus as e, CourseType as f, CourseReviewStatus as g, CourseSectionLectureContentType as h, CoursePreviewComponent as i, CourseInfoComponent as j, CourseMediaComponent as k, CoursePricingComponent as l, CourseActionComponent as m, CourseScheduleComponent as n, CourseSectionsComponent as o, provideAngulaCourse as p, CourseSectionItemComponent as q, CourseSectionLectureItemComponent as r, CourseSectionLectureVideoItemComponent as s, CourseItemComponent as t, CoursePricingAddDialogComponent as u, CourseScheduleAddDialogComponent as v, CoursePricingDialogComponent as w, CourseScheduleDialogComponent as x, CourseDetailsDialogComponent as y, CourseEditDialogComponent as z };
+//# sourceMappingURL=rolatech-angular-course-rolatech-angular-course-ChplliNh.mjs.map