@rolatech/angular-course 17.3.0 → 17.3.1

package/fesm2022/rolatech-angular-course-rolatech-angular-course-D-_W2GtF.mjs

@@ -0,0 +1,1958 @@
+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 } 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 } 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$1 from '@angular/material/stepper';
+import { MatStepperModule, MatStepper } from '@angular/material/stepper';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import * as i7 from '@angular/material/core';
+import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatOptionModule } from '@angular/material/core';
+import moment from 'moment';
+import * as i6$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i3$1 from '@angular/cdk/text-field';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import * as i2$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$3 from '@angular/material/snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import * as i4 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { first, remove, findLastIndex } from 'lodash';
+import { AuthService, AuthUserService } from '@rolatech/angular-auth';
+import { CommentsComponent } from '@rolatech/angular-comment';
+
+var CourseStatus;
+(function (CourseStatus) {
+    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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i7$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "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-Bm6Sg8zH.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,
+    },
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CourseMediaOwnerRendererComponent as A, CourseSectionLectureVideoDialogComponent as B, CourseService as C, ScheduleItemComponent as D, DetailItemComponent as E, courseItem_component as F, PricingItemComponent as P, ScheduleDate as S, CategoryService as a, CourseStatus as b, courseRoutes as c, CourseRequestStatus as d, CourseType as e, CourseReviewStatus as f, CourseSectionLectureContentType as g, CoursePreviewComponent as h, CourseInfoComponent as i, CourseMediaComponent as j, CoursePricingComponent as k, CourseActionComponent as l, CourseScheduleComponent as m, CourseSectionsComponent as n, CourseSectionItemComponent as o, provideAngulaCourse as p, CourseSectionLectureItemComponent as q, CourseSectionLectureVideoItemComponent as r, CourseItemComponent as s, CoursePricingAddDialogComponent as t, CourseScheduleAddDialogComponent as u, CoursePricingDialogComponent as v, CourseScheduleDialogComponent as w, CourseDetailsDialogComponent as x, CourseEditDialogComponent as y, CourseDetailsComponent as z };
+//# sourceMappingURL=rolatech-angular-course-rolatech-angular-course-D-_W2GtF.mjs.map