@rolatech/angular-components 17.2.8

package/fesm2022/rolatech-angular-components.mjs

@@ -0,0 +1,1059 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, inject, ElementRef, Renderer2, PLATFORM_ID, ViewEncapsulation, HostBinding, Input, Output, viewChild, ViewChild, ContentChild, Inject, NgModule, ChangeDetectorRef, HostListener } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
+import { MatSidenavModule, MatSidenav } from '@angular/material/sidenav';
+import { MatNavList, MatListModule } from '@angular/material/list';
+import * as i2$1 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i1$5 from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet, RouterEvent, NavigationEnd, ActivatedRoute, Router } from '@angular/router';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule, MatButton } from '@angular/material/button';
+import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout';
+import { map, shareReplay, filter } from 'rxjs';
+import { APP_CONFIG, AngularCommonModule } from '@rolatech/angular-common';
+import * as i2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogTitle } from '@angular/material/dialog';
+import * as i3 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { A11yModule } from '@angular/cdk/a11y';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { PortalModule } from '@angular/cdk/portal';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import * as i4 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i1$3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import * as i2$2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i1$4 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i4$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+import * as i2$3 from '@rolatech/angular-services';
+import { LoadingService, DialogService, SnackBarService } from '@rolatech/angular-services';
+import * as i3$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DomSanitizer, Title } from '@angular/platform-browser';
+
+class AppContainerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AppContainerComponent, isStandalone: true, selector: "rolatech-app-container", ngImport: i0, template: "<div>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-app-container', standalone: true, imports: [CommonModule], template: "<div>\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class AppContainerContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppContainerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AppContainerContentComponent, isStandalone: true, selector: "rolatech-app-container-content", ngImport: i0, template: "<div>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppContainerContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-app-container-content', standalone: true, imports: [CommonModule, MatSidenavModule], template: "<div>\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class TopbarComponent {
+    hostId = 'rolatech-topbar';
+    hasClass = true;
+    title = '';
+    subtitle = '';
+    persistent = false;
+    toggle = new EventEmitter();
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    breakpointObserver = inject(BreakpointObserver);
+    isHandset$;
+    constructor() {
+        this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Small, Breakpoints.HandsetPortrait]).pipe(map((result) => result.matches), shareReplay());
+    }
+    ngOnInit() {
+        this.setMenuIconVisible();
+    }
+    setMenuIconVisible() {
+        if (this.persistent) {
+            return;
+        }
+        if (isPlatformBrowser(this.platformId)) {
+            this.breakpointObserver
+                .observe(Breakpoints.Handset)
+                .pipe(map((result) => result.matches))
+                .subscribe({
+                next: (res) => {
+                    if (res) {
+                        this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
+                    }
+                    else {
+                        this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
+                    }
+                },
+            });
+        }
+    }
+    onToggle() {
+        this.toggle.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", inputs: { title: "title", subtitle: "subtitle", persistent: "persistent" }, outputs: { toggle: "toggle" }, host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 sm:h-16 px-4 flex items-center\">\n  @if (persistent || (isHandset$ | async)) {\n    <button id=\"topbar-menu-button\" mat-icon-button class=\"flex\" onclick=\"this.blur()\" (click)=\"onToggle()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n  }\n\n  <div class=\"cursor-pointer\" routerLink=\"/\">\n    <div class=\"text-black text-lg sm:text-xl font-bold\">\n      <span class=\"text-orange-600\">{{ title }}</span>\n      <span>{{ subtitle }}</span>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:2020;transform:translateY(0);transition:transform .3s ease;background:var(--rolatech-topbar-background-color, #fff);color:var(--rolatech-topbar-color, #000)}rolatech-topbar:not(:has(#topbar-menu-button)){padding-left:16px}rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TopbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-topbar', standalone: true, imports: [CommonModule, RouterLink, MatButtonModule, MatIcon], encapsulation: ViewEncapsulation.None, template: "<div class=\"h-14 sm:h-16 px-4 flex items-center\">\n  @if (persistent || (isHandset$ | async)) {\n    <button id=\"topbar-menu-button\" mat-icon-button class=\"flex\" onclick=\"this.blur()\" (click)=\"onToggle()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n  }\n\n  <div class=\"cursor-pointer\" routerLink=\"/\">\n    <div class=\"text-black text-lg sm:text-xl font-bold\">\n      <span class=\"text-orange-600\">{{ title }}</span>\n      <span>{{ subtitle }}</span>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:2020;transform:translateY(0);transition:transform .3s ease;background:var(--rolatech-topbar-background-color, #fff);color:var(--rolatech-topbar-color, #000)}rolatech-topbar:not(:has(#topbar-menu-button)){padding-left:16px}rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-topbar']
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], persistent: [{
+                type: Input
+            }], toggle: [{
+                type: Output
+            }] } });
+
+class AppDrawerComponent {
+    opened = false;
+    links = [];
+    title = '';
+    subtitle = '';
+    persistent = false;
+    hostId = 'rolatech-app-drawer';
+    hasClass = true;
+    duration = '200ms';
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    breakpointObserver = inject(BreakpointObserver);
+    guideEl = viewChild('guide');
+    content = viewChild('content');
+    scrimEl = viewChild('scrim');
+    headerEl = viewChild('header');
+    isHandset$;
+    isMobile = false;
+    isPersistent = true;
+    completed = false;
+    open() {
+        this.opened = true;
+        this.renderer.setAttribute(this.el.nativeElement, 'opened', '');
+        this.renderer.setAttribute(this.content()?.nativeElement, 'opened', '');
+        if (this.isMobile) {
+            this.renderer.addClass(this.scrimEl()?.nativeElement, 'visible');
+        }
+    }
+    close() {
+        this.opened = false;
+        this.renderer.removeAttribute(this.el.nativeElement, 'opened');
+        this.renderer.removeAttribute(this.content()?.nativeElement, 'opened');
+        if (this.isMobile) {
+            this.renderer.removeClass(this.scrimEl()?.nativeElement, 'visible');
+        }
+    }
+    toggle() {
+        this.opened ? this.close() : this.open();
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.completed = false;
+            this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset).pipe(map((result) => result.matches));
+            this.isHandset$.subscribe({
+                next: (res) => {
+                    this.opened = !res;
+                    this.isMobile = res;
+                    this.isPersistent = !res;
+                    if (res) {
+                        if (this.persistent) {
+                            this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
+                            this.renderer.removeAttribute(this.headerEl()?.nativeElement, 'hidden', '');
+                            this.renderer.removeAttribute(this.el.nativeElement, 'opened');
+                            this.renderer.removeAttribute(this.content()?.nativeElement, 'opened');
+                        }
+                    }
+                    else {
+                        if (this.persistent) {
+                            this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
+                            this.renderer.setAttribute(this.headerEl()?.nativeElement, 'hidden', '');
+                            this.renderer.setAttribute(this.el.nativeElement, 'opened', '');
+                            this.renderer.setAttribute(this.content()?.nativeElement, 'opened', '');
+                        }
+                    }
+                    this.completed = true;
+                },
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { opened: "opened", links: "links", title: "title", subtitle: "subtitle", persistent: "persistent" }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"tp-yt-app-drawer\" (click)=\"close()\" style=\"transition-duration: 200ms\"></div>\n<div id=\"contentContainer\" #content class=\"tp-yt-app-drawer\" style=\"transition-duration: 200ms\">\n  <div id=\"guide-wrapper\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <button id=\"drawer-menu-button\" #menuButton mat-icon-button class=\"flex\" (click)=\"this.toggle()\" onclick=\"this.blur()\">\n          <mat-icon>menu</mat-icon>\n        </button>\n        <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n          <span class=\"text-orange-600\">{{ title }}</span>\n          <span>{{ subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"flex flex-col ytd-app\">\n        @if (completed) {\n          <div class=\"flex px-2 flex-col gap-2\">\n            @for (item of links; track $index) {\n              @if (item.openinView) {\n                <a\n                  class=\"flex p-2 hover:bg-gray-100 min-h-11\"\n                  [href]=\"item.link\"\n                  target=\"_blank\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start\">\n                      @if (item.icon) {\n                        <mat-icon class=\"ml-3\">{{ item.icon }}</mat-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ item.title }}</span>\n                        <span class=\"text-sm\">{{ item.subtitle }}</span>\n                      </div>\n                    </div>\n                    <mat-icon class=\"scale-90\">open_in_new</mat-icon>\n                  </div>\n                </a>\n              } @else {\n                <a\n                  class=\"flex p-2 hover:bg-gray-100 min-h-11\"\n                  [routerLink]=\"item.link\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                  routerLinkActive=\"active\"\n                  [routerLinkActiveOptions]=\"{ exact: true }\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start\">\n                      @if (item.icon) {\n                        <mat-icon class=\"ml-3\">{{ item.icon }}</mat-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ item.title }}</span>\n                        <span class=\"text-sm\">{{ item.subtitle }}</span>\n                      </div>\n                    </div>\n                  </div>\n                </a>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}[hidden]{display:none!important}#contentContainer.tp-yt-app-drawer{position:absolute;top:0;bottom:0;left:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-yt-app-drawer[opened]{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}#guide-inner-content.ytd-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-yt-app-drawer{position:absolute;inset:0;transition-property:opacity;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-yt-app-drawer{opacity:1}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}#guide-spacer{margin-top:var(--ytd-masthead-height, 64px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.active{background-color:#0000000d;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: 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: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-app-drawer', standalone: true, imports: [CommonModule, MatNavList, MatIcon, RouterLink, RouterLinkActive, MatButton, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<div id=\"scrim\" #scrim class=\"tp-yt-app-drawer\" (click)=\"close()\" style=\"transition-duration: 200ms\"></div>\n<div id=\"contentContainer\" #content class=\"tp-yt-app-drawer\" style=\"transition-duration: 200ms\">\n  <div id=\"guide-wrapper\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <button id=\"drawer-menu-button\" #menuButton mat-icon-button class=\"flex\" (click)=\"this.toggle()\" onclick=\"this.blur()\">\n          <mat-icon>menu</mat-icon>\n        </button>\n        <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n          <span class=\"text-orange-600\">{{ title }}</span>\n          <span>{{ subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"flex flex-col ytd-app\">\n        @if (completed) {\n          <div class=\"flex px-2 flex-col gap-2\">\n            @for (item of links; track $index) {\n              @if (item.openinView) {\n                <a\n                  class=\"flex p-2 hover:bg-gray-100 min-h-11\"\n                  [href]=\"item.link\"\n                  target=\"_blank\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start\">\n                      @if (item.icon) {\n                        <mat-icon class=\"ml-3\">{{ item.icon }}</mat-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ item.title }}</span>\n                        <span class=\"text-sm\">{{ item.subtitle }}</span>\n                      </div>\n                    </div>\n                    <mat-icon class=\"scale-90\">open_in_new</mat-icon>\n                  </div>\n                </a>\n              } @else {\n                <a\n                  class=\"flex p-2 hover:bg-gray-100 min-h-11\"\n                  [routerLink]=\"item.link\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                  routerLinkActive=\"active\"\n                  [routerLinkActiveOptions]=\"{ exact: true }\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start\">\n                      @if (item.icon) {\n                        <mat-icon class=\"ml-3\">{{ item.icon }}</mat-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ item.title }}</span>\n                        <span class=\"text-sm\">{{ item.subtitle }}</span>\n                      </div>\n                    </div>\n                  </div>\n                </a>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}[hidden]{display:none!important}#contentContainer.tp-yt-app-drawer{position:absolute;top:0;bottom:0;left:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-yt-app-drawer[opened]{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}#guide-inner-content.ytd-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-yt-app-drawer{position:absolute;inset:0;transition-property:opacity;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-yt-app-drawer{opacity:1}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}#guide-spacer{margin-top:var(--ytd-masthead-height, 64px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.active{background-color:#0000000d;border-radius:8px}\n"] }]
+        }], propDecorators: { opened: [{
+                type: Input
+            }], links: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], persistent: [{
+                type: Input
+            }], hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-app-drawer']
+            }], duration: [{
+                type: HostBinding,
+                args: ['style.transition-duration']
+            }] } });
+
+class AppLayoutComponent {
+    hostId = 'rolatech-app-layout';
+    hasClass = true;
+    scrimEl = viewChild('rolatech-app-drawer');
+    appDrawer = viewChild('rolatech-app-drawer');
+    myElement;
+    targetElement;
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    breakpointObserver = inject(BreakpointObserver);
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.breakpointObserver
+                .observe(Breakpoints.Handset)
+                .pipe(map((result) => result.matches))
+                .subscribe({
+                next: (res) => {
+                    if (res) {
+                        this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
+                    }
+                    else {
+                        this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
+                    }
+                },
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.2.4", type: AppLayoutComponent, isStandalone: true, selector: "rolatech-app-layout", host: { properties: { "id": "this.hostId", "class.rolatech-app-layout": "this.hasClass" } }, queries: [{ propertyName: "targetElement", first: true, predicate: ["rolatech-app-drawer"], descendants: true }], viewQueries: [{ propertyName: "scrimEl", first: true, predicate: ["rolatech-app-drawer"], descendants: true, isSignal: true }, { propertyName: "appDrawer", first: true, predicate: ["rolatech-app-drawer"], descendants: true, isSignal: true }, { propertyName: "myElement", first: true, predicate: ["rolatech-app-drawer"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-app-page{margin-left:256px}rolatech-app-page{display:block;padding-top:64px;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSidenavModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-app-layout', standalone: true, imports: [
+                        CommonModule,
+                        RouterLink,
+                        RouterOutlet,
+                        AppContainerComponent,
+                        AppContainerContentComponent,
+                        MatListModule,
+                        MatNavList,
+                        MatSidenav,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSidenavModule,
+                        TopbarComponent,
+                        AppDrawerComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-app-page{margin-left:256px}rolatech-app-page{display:block;padding-top:64px;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}\n"] }]
+        }], propDecorators: { hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-app-layout']
+            }], myElement: [{
+                type: ViewChild,
+                args: ['rolatech-app-drawer', { static: true }]
+            }], targetElement: [{
+                type: ContentChild,
+                args: ['rolatech-app-drawer']
+            }] } });
+
+class AppPageComponent {
+    hostId = 'rolatech-app-page';
+    hasClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AppPageComponent, isStandalone: true, selector: "rolatech-app-page", host: { properties: { "id": "this.hostId", "class.rolatech-app-page": "this.hasClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-app-page', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-app-page']
+            }] } });
+
+class AppFooterComponent {
+    hostId = 'rolatech-app-footer';
+    hasClass = true;
+    config = inject(APP_CONFIG);
+    title = '';
+    copyright = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AppFooterComponent, isStandalone: true, selector: "rolatech-app-footer", inputs: { title: "title", copyright: "copyright" }, host: { properties: { "id": "this.hostId", "class.rolatech-app-footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"bg-gray-100 text-black flex flex-col justify-between px-5 sm:px-16 py-6\">\n  <div class=\"flex flex-col sm:flex-row sm:gap-10 gap-3 py-3\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"flex justify-between mt-6\">\n    <div class=\"cursor-pointer\">\n      <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title }}</a>\n    </div>\n    <span class=\"text-sm font-thin\">\u00A9{{ copyright }}</span>\n  </div>\n</div>\n", styles: [".rolatech-app-footer{position:fixed;bottom:0;width:100%;z-index:2020;transform:translateY(0);transition:transform .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-app-footer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-gray-100 text-black flex flex-col justify-between px-5 sm:px-16 py-6\">\n  <div class=\"flex flex-col sm:flex-row sm:gap-10 gap-3 py-3\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"flex justify-between mt-6\">\n    <div class=\"cursor-pointer\">\n      <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title }}</a>\n    </div>\n    <span class=\"text-sm font-thin\">\u00A9{{ copyright }}</span>\n  </div>\n</div>\n", styles: [".rolatech-app-footer{position:fixed;bottom:0;width:100%;z-index:2020;transform:translateY(0);transition:transform .3s ease}\n"] }]
+        }], propDecorators: { hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-app-footer']
+            }], title: [{
+                type: Input
+            }], copyright: [{
+                type: Input
+            }] } });
+
+class ConsoleLayoutComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ConsoleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ConsoleLayoutComponent, isStandalone: true, selector: "rolatech-console-layout", ngImport: i0, template: "<p>console-layout works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ConsoleLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-console-layout', standalone: true, imports: [CommonModule], template: "<p>console-layout works!</p>\n" }]
+        }] });
+
+class MenuUserComponent {
+    user;
+    myaccountUrl = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: "user", myaccountUrl: "myaccountUrl" }, ngImport: i0, template: "<div class=\"min-w-[256px]\">\n  <div class=\"px-6 py-3\">\n    <div class=\"flex flex-row items-center\">\n      <div class=\"mr-3 w-14 h-14 rounded-full bg-orange-600\">\n        @if (user?.avatar) {\n          <img [src]=\"user.avatar\" class=\"w-14 h-14 object-cover rounded-full\" />\n        }\n      </div>\n      <div class=\"flex flex-col\">\n        <div>\n          <div class=\"text-lg font-bold\">{{ user?.name }}</div>\n          <div class=\"formated-string\">\n            <span>&#64;{{ user?.username }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- <div class=\"flex\">\n    <a\n      [href]=\"myaccountUrl\"\n      target=\"_blank\"\n      class=\"text-sm my-2 p-1 px-6 ml-24 rounded border border-gray-300 hover:bg-gray-200\"\n      >\u7528\u6237\u4E2D\u5FC3</a\n    >\n  </div> -->\n  </div>\n  <div class=\"flex justify-between items-center\">\n    <a mat-menu-item [href]=\"myaccountUrl\" target=\"_blank\" class=\"px-6\">\n      <span class=\"flex justify-between items-center\">\n        <span class=\"pl-2\"> \u7528\u6237\u4E2D\u5FC3 </span>\n        <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n      </span>\n    </a>\n  </div>\n</div>\n", styles: [".formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuUserComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [MatMenuModule, MatIconModule], selector: 'rolatech-menu-user', template: "<div class=\"min-w-[256px]\">\n  <div class=\"px-6 py-3\">\n    <div class=\"flex flex-row items-center\">\n      <div class=\"mr-3 w-14 h-14 rounded-full bg-orange-600\">\n        @if (user?.avatar) {\n          <img [src]=\"user.avatar\" class=\"w-14 h-14 object-cover rounded-full\" />\n        }\n      </div>\n      <div class=\"flex flex-col\">\n        <div>\n          <div class=\"text-lg font-bold\">{{ user?.name }}</div>\n          <div class=\"formated-string\">\n            <span>&#64;{{ user?.username }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- <div class=\"flex\">\n    <a\n      [href]=\"myaccountUrl\"\n      target=\"_blank\"\n      class=\"text-sm my-2 p-1 px-6 ml-24 rounded border border-gray-300 hover:bg-gray-200\"\n      >\u7528\u6237\u4E2D\u5FC3</a\n    >\n  </div> -->\n  </div>\n  <div class=\"flex justify-between items-center\">\n    <a mat-menu-item [href]=\"myaccountUrl\" target=\"_blank\" class=\"px-6\">\n      <span class=\"flex justify-between items-center\">\n        <span class=\"pl-2\"> \u7528\u6237\u4E2D\u5FC3 </span>\n        <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n      </span>\n    </a>\n  </div>\n</div>\n", styles: [".formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"] }]
+        }], propDecorators: { user: [{
+                type: Input
+            }], myaccountUrl: [{
+                type: Input
+            }] } });
+
+class TopbarAvatarMenuComponent {
+    environment = inject(APP_CONFIG);
+    platformId = inject(PLATFORM_ID);
+    menu;
+    user;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: "menu", user: "user" }, ngImport: i0, template: "<div>\n  @if (user) {\n    <div class=\"flex\">\n      <a\n        class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-gray-200 outline outline-transparent outline-4\"\n        [matMenuTriggerFor]=\"menu\"\n      >\n        <div class=\"bg-orange-600 w-9 h-9\">\n          @if (user.avatar) {\n            <img class=\"w-9 h-9 object-cover\" [src]=\"user.avatar\" />\n          }\n        </div>\n      </a>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-topbar-avatar-menu', standalone: true, imports: [
+                        CommonModule,
+                        MatSidenavModule,
+                        RouterLink,
+                        MatListModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        RouterOutlet,
+                        MenuUserComponent,
+                    ], template: "<div>\n  @if (user) {\n    <div class=\"flex\">\n      <a\n        class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-gray-200 outline outline-transparent outline-4\"\n        [matMenuTriggerFor]=\"menu\"\n      >\n        <div class=\"bg-orange-600 w-9 h-9\">\n          @if (user.avatar) {\n            <img class=\"w-9 h-9 object-cover\" [src]=\"user.avatar\" />\n          }\n        </div>\n      </a>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { menu: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }] } });
+
+class FolderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FolderComponent, isStandalone: true, selector: "rolatech-folder", ngImport: i0, template: "<div></div>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FolderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-folder', standalone: true, template: "<div></div>\n" }]
+        }] });
+
+class MediaPreviewDialogComponent {
+    data;
+    dialogRef;
+    selected;
+    index = 0;
+    prevDisabled = false;
+    nextDisabled = false;
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.data.title = '图片预览';
+    }
+    ngOnInit() {
+        this.selected = this.data.selected;
+        this.prevDisabled = this.selected === 0;
+        this.nextDisabled = this.selected === this.data.media.length - 1;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    prev() {
+        this.selected--;
+        this.prevDisabled = this.selected === 0;
+        this.nextDisabled = this.selected === this.data.media.length - 1;
+    }
+    next() {
+        this.selected++;
+        this.prevDisabled = this.selected === 0;
+        this.nextDisabled = this.selected === this.data.media.length - 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaPreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MediaPreviewDialogComponent, isStandalone: true, selector: "rolatech-media-preview-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 overflow-y-auto\">\n    <div class=\"p-3 flex justify-center items-center\">\n      <img class=\"object-cover\" [src]=\"data.media[selected].url\" />\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n    <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n    <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaPreviewDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-preview-dialog', standalone: true, imports: [MatIconModule, MatDividerModule, MatButtonModule], 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 overflow-y-auto\">\n    <div class=\"p-3 flex justify-center items-center\">\n      <img class=\"object-cover\" [src]=\"data.media[selected].url\" />\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n    <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n    <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$2.MatDialogRef }] });
+
+const MAT_MODULE = [
+    A11yModule,
+    ClipboardModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    LayoutModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    PortalModule,
+    ScrollingModule,
+];
+class MaterialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: MaterialModule, imports: [A11yModule,
+            ClipboardModule,
+            CdkStepperModule,
+            CdkTableModule,
+            CdkTreeModule,
+            DragDropModule,
+            LayoutModule,
+            MatAutocompleteModule,
+            MatBadgeModule,
+            MatBottomSheetModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatStepperModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatGridListModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule,
+            PortalModule,
+            ScrollingModule], exports: [A11yModule,
+            ClipboardModule,
+            CdkStepperModule,
+            CdkTableModule,
+            CdkTreeModule,
+            DragDropModule,
+            LayoutModule,
+            MatAutocompleteModule,
+            MatBadgeModule,
+            MatBottomSheetModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatStepperModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatGridListModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule,
+            PortalModule,
+            ScrollingModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MaterialModule, imports: [MAT_MODULE, A11yModule,
+            ClipboardModule,
+            CdkStepperModule,
+            CdkTableModule,
+            CdkTreeModule,
+            DragDropModule,
+            LayoutModule,
+            MatAutocompleteModule,
+            MatBadgeModule,
+            MatBottomSheetModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatStepperModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatGridListModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule,
+            PortalModule,
+            ScrollingModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...MAT_MODULE],
+                    exports: [...MAT_MODULE],
+                }]
+        }] });
+
+class AngularComponentsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule], exports: [MaterialModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule, MaterialModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AngularComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MaterialModule],
+                    exports: [MaterialModule],
+                }]
+        }] });
+
+class LoadingSpinnerComponent {
+    title = '';
+    isLoading;
+    loadingSubscription;
+    loadingService = inject(LoadingService);
+    _elmRef = inject(ElementRef);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    ngAfterViewInit() {
+        // this.isLoading = true;
+        this._elmRef.nativeElement.style.display = 'none';
+        this.loadingSubscription = this.loadingService.loading$.pipe().subscribe((status) => {
+            this._elmRef.nativeElement.style.display = status ? 'block' : 'none';
+            this._changeDetectorRef.detectChanges();
+            this.isLoading = status;
+        });
+    }
+    ngOnDestroy() {
+        if (this.loadingSubscription)
+            this.loadingSubscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LoadingSpinnerComponent, isStandalone: true, selector: "rolatech-loading-spinner", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"spinner-container flex flex-col\">\n  <div class=\"sk-fading-circle\">\n    <div class=\"sk-circle1 sk-circle\"></div>\n    <div class=\"sk-circle2 sk-circle\"></div>\n    <div class=\"sk-circle3 sk-circle\"></div>\n    <div class=\"sk-circle4 sk-circle\"></div>\n    <div class=\"sk-circle5 sk-circle\"></div>\n    <div class=\"sk-circle6 sk-circle\"></div>\n    <div class=\"sk-circle7 sk-circle\"></div>\n    <div class=\"sk-circle8 sk-circle\"></div>\n    <div class=\"sk-circle9 sk-circle\"></div>\n    <div class=\"sk-circle10 sk-circle\"></div>\n    <div class=\"sk-circle11 sk-circle\"></div>\n    <div class=\"sk-circle12 sk-circle\"></div>\n  </div>\n  <div class=\"text-lg font-bold text-center\">{{ title }}</div>\n</div>\n", styles: [".spinner-container{display:flex;justify-content:center}.sk-fading-circle{margin:12px auto;width:40px;height:40px;position:relative}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:12%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-loading-spinner', standalone: true, template: "<div class=\"spinner-container flex flex-col\">\n  <div class=\"sk-fading-circle\">\n    <div class=\"sk-circle1 sk-circle\"></div>\n    <div class=\"sk-circle2 sk-circle\"></div>\n    <div class=\"sk-circle3 sk-circle\"></div>\n    <div class=\"sk-circle4 sk-circle\"></div>\n    <div class=\"sk-circle5 sk-circle\"></div>\n    <div class=\"sk-circle6 sk-circle\"></div>\n    <div class=\"sk-circle7 sk-circle\"></div>\n    <div class=\"sk-circle8 sk-circle\"></div>\n    <div class=\"sk-circle9 sk-circle\"></div>\n    <div class=\"sk-circle10 sk-circle\"></div>\n    <div class=\"sk-circle11 sk-circle\"></div>\n    <div class=\"sk-circle12 sk-circle\"></div>\n  </div>\n  <div class=\"text-lg font-bold text-center\">{{ title }}</div>\n</div>\n", styles: [".spinner-container{display:flex;justify-content:center}.sk-fading-circle{margin:12px auto;width:40px;height:40px;position:relative}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:12%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class MediaUploadComponent {
+    title = '上传图片';
+    subtitle = '文件大小';
+    description = '不能超过5MB';
+    isUploading = false;
+    mediaItemClick = new EventEmitter();
+    upload = new EventEmitter();
+    media = [];
+    dialog = inject(MatDialog);
+    onMediaItemClick(item) {
+        this.mediaItemClick.emit(item);
+    }
+    onMediaClick(i) {
+        const dialogRef = this.dialog.open(MediaPreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    onUpload(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                this.media.push({
+                    url: reader.result,
+                    alt: 'upload image',
+                });
+                const formData = new FormData();
+                formData.append('file', file);
+                this.upload.emit(formData);
+            };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MediaUploadComponent, isStandalone: true, selector: "rolatech-media-upload", inputs: { title: "title", subtitle: "subtitle", description: "description", isUploading: "isUploading" }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n  @if (isUploading) {\n    <div class=\"flex flex-col items-center justify-center\">\n      <div class=\"p-3\">\n        <mat-icon>upload</mat-icon>\n      </div>\n      <div class=\"flex flex-col items-center justify-center\">\n        <div class=\"font-lg font-bold py-3\">{{ title }}</div>\n        <div class=\"font-sm text-gray-400\">{{ subtitle }}</div>\n        <div class=\"font-sm text-gray-400\">{{ description }}</div>\n      </div>\n      <div class=\"py-2\">\n        <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n        <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n      </div>\n    </div>\n  } @else {\n    <rolatech-loading-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-loading-spinner>\n  }\n</div>\n<div class=\"flex flex-row\">\n  @for (media of media; track $index) {\n    <div (click)=\"onMediaClick($index)\" class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\">\n      <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"media.url\" />\n    </div>\n  }\n</div>\n", styles: [".mat-icon{transform:scale(2)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "rolatech-loading-spinner", inputs: ["title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaUploadComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, LoadingSpinnerComponent], selector: 'rolatech-media-upload', template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n  @if (isUploading) {\n    <div class=\"flex flex-col items-center justify-center\">\n      <div class=\"p-3\">\n        <mat-icon>upload</mat-icon>\n      </div>\n      <div class=\"flex flex-col items-center justify-center\">\n        <div class=\"font-lg font-bold py-3\">{{ title }}</div>\n        <div class=\"font-sm text-gray-400\">{{ subtitle }}</div>\n        <div class=\"font-sm text-gray-400\">{{ description }}</div>\n      </div>\n      <div class=\"py-2\">\n        <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n        <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n      </div>\n    </div>\n  } @else {\n    <rolatech-loading-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-loading-spinner>\n  }\n</div>\n<div class=\"flex flex-row\">\n  @for (media of media; track $index) {\n    <div (click)=\"onMediaClick($index)\" class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\">\n      <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"media.url\" />\n    </div>\n  }\n</div>\n", styles: [".mat-icon{transform:scale(2)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], isUploading: [{
+                type: Input
+            }], mediaItemClick: [{
+                type: Output
+            }], upload: [{
+                type: Output
+            }] } });
+
+class StorageBucketCreateComponent {
+    name;
+    output = new EventEmitter();
+    ngOnInit() { }
+    ngDoCheck() {
+        this.output.emit(this.name);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StorageBucketCreateComponent, isStandalone: true, selector: "rolatech-storage-bucket-create", inputs: { name: "name" }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.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: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-storage-bucket-create', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule], template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], output: [{
+                type: Output
+            }] } });
+
+class StorageFileUploadComponent {
+    title;
+    output = new EventEmitter();
+    fileData;
+    progressInfos = [];
+    isFinished = false;
+    isUploaded = false;
+    file;
+    ngOnInit() { }
+    ngDoCheck() {
+        this.output.emit({
+            title: this.title,
+            file: this.file,
+        });
+    }
+    selectFiles(event) {
+        this.isFinished = false;
+        this.file = event.target.files[0];
+        event.target.value = '';
+    }
+    removeFile() {
+        this.file = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: "title" }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u6807\u9898</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n  </mat-form-field>\n\n  <div class=\"mt-2\">\n    <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n  </div>\n  @if (file) {\n    <div class=\"p-2 flex justify-between items-center\">\n      <div>{{ file.name }}</div>\n      <button matSuffix mat-icon-button (click)=\"removeFile()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.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: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-storage-file-upload', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule], template: "<div>\n  <mat-form-field>\n    <mat-label>\u6807\u9898</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n  </mat-form-field>\n\n  <div class=\"mt-2\">\n    <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n  </div>\n  @if (file) {\n    <div class=\"p-2 flex justify-between items-center\">\n      <div>{{ file.name }}</div>\n      <button matSuffix mat-icon-button (click)=\"removeFile()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], output: [{
+                type: Output
+            }] } });
+
+class StorageFolderCreateComponent {
+    name;
+    isPublic = true;
+    output = new EventEmitter();
+    ngOnInit() { }
+    ngDoCheck() {
+        this.output.emit({ name: this.name, isPublic: this.isPublic });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StorageFolderCreateComponent, isStandalone: true, selector: "rolatech-storage-folder-create", inputs: { name: "name", isPublic: "isPublic" }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n  <div class=\"flex flex-col\">\n    <mat-checkbox class=\"example-margin\" [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n    <span class=\"text-sm text-gray-500 ml-2 mt-1\">\u6587\u4EF6\u5939\u4E3A\u56FE\u7247\u5185\u5BB9\u65F6, \u8BF7\u53D6\u6D88\u52FE\u9009\u6B64\u9879</span>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.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: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-storage-folder-create', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, MatCheckboxModule], template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n  <div class=\"flex flex-col\">\n    <mat-checkbox class=\"example-margin\" [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n    <span class=\"text-sm text-gray-500 ml-2 mt-1\">\u6587\u4EF6\u5939\u4E3A\u56FE\u7247\u5185\u5BB9\u65F6, \u8BF7\u53D6\u6D88\u52FE\u9009\u6B64\u9879</span>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], isPublic: [{
+                type: Input
+            }], output: [{
+                type: Output
+            }] } });
+
+class WechatConnectDialogComponent {
+    dialogRef = inject(MatDialogRef);
+    environment = inject(APP_CONFIG);
+    data = inject(MAT_DIALOG_DATA);
+    urlSafe;
+    sanitizer = inject(DomSanitizer);
+    baseUrl = 'https://open.weixin.qq.com/connect/qrconnect';
+    constructor() {
+        const href = 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/gateway/login-regist/css/link-wx-login.css';
+        const encodedURI = encodeURI(this.data.redirect_uri);
+        const src = `${this.baseUrl}?appid=${this.data.appid}&response_type=code&self_redirect=true&scope=snsapi_login&href=${href}&redirect_uri=${encodedURI}&state=${this.data.state}#wechat_redirect`;
+        this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(src);
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    onLogin(event) {
+        if (event.origin === this.environment.accountsUrl && event.data.code === 200) {
+            this.dialogRef.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"text-xl font-bold\">\u626B\u7801\u7ED1\u5B9A\u5FAE\u4FE1\uFF0C\u63D0\u5347\u8D26\u53F7\u5B89\u5168\u548C\u4F7F\u7528\u4FBF\u5229\u6027</div>\n  <div class=\"w-[190px] h-[190px]\">\n    <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    <div></div>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-wechat-connect-dialog', standalone: true, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"text-xl font-bold\">\u626B\u7801\u7ED1\u5B9A\u5FAE\u4FE1\uFF0C\u63D0\u5347\u8D26\u53F7\u5B89\u5168\u548C\u4F7F\u7528\u4FBF\u5229\u6027</div>\n  <div class=\"w-[190px] h-[190px]\">\n    <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    <div></div>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onLogin: [{
+                type: HostListener,
+                args: ['window:message', ['$event']]
+            }] } });
+
+class MediaUploadDialogComponent {
+    dialogRef;
+    data;
+    mediaService;
+    fileData;
+    progressInfos = [];
+    media = [];
+    preMedia = [];
+    isFinished = false;
+    isUploaded = false;
+    constructor(dialogRef, data, mediaService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.mediaService = mediaService;
+    }
+    ngOnInit() { }
+    selectFiles(event) {
+        this.isFinished = false;
+        for (const file of event.target.files) {
+            this.addImage(file);
+        }
+        event.target.value = '';
+    }
+    addImage(file) {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            this.preMedia.push({
+                url: reader.result,
+                alt: 'upload image',
+                isUploading: false,
+                isUploaded: false,
+                file: file,
+            });
+        };
+        reader.onerror = (error) => { };
+    }
+    removeImage(index) {
+        this.preMedia.splice(index, 1);
+    }
+    uploadFiles() {
+        for (let i = 0; i < this.preMedia.length; i++) {
+            if (!this.preMedia[i].isUploaded) {
+                this.upload(i, this.preMedia[i].file);
+            }
+        }
+    }
+    upload(idx, file) {
+        this.progressInfos[idx] = { value: 0, fileName: file.name };
+        const formData = new FormData();
+        formData.append('file', file);
+        this.preMedia[idx].isUploading = true;
+        formData.append('groupId', this.data.groupId);
+        this.mediaService.uploadAndSave(formData).subscribe({
+            next: (res) => {
+                this.media.push(res.data);
+                this.preMedia[idx].isUploading = false;
+                this.preMedia[idx].isUploaded = true;
+                this.progressInfos[idx].value = 100;
+                const tmp = this.progressInfos.filter((item) => item.value !== 100);
+                if (tmp.length <= 0) {
+                    this.isFinished = true;
+                }
+            },
+            error: (error) => {
+                this.progressInfos[idx].value = 0;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaUploadDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.MediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MediaUploadDialogComponent, isStandalone: true, selector: "rolatech-media-upload-dialog", ngImport: i0, template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center\">\n    <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-button (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\">\u9884\u89C8</h2>\n    <div>\n      <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n        @for (item of preMedia; track item.url; let i = $index) {\n          <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n            <article\n              tabindex=\"0\"\n              [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n              class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n            >\n              <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" />\n              <section class=\"flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n                @if (item.isUploading) {\n                  <div class=\"flex justify-center items-center w-full h-full\">\n                    <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n                  </div>\n                } @else {\n                  <div class=\"flex\">\n                    <button (click)=\"removeImage(i)\" class=\"delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md\">\n                      <svg\n                        class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"24\"\n                        height=\"24\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          class=\"pointer-events-none\"\n                          d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                }\n              </section>\n            </article>\n          </li>\n        }\n      </ul>\n    </div>\n    @if (preMedia.length <= 0) {\n      <div class=\"flex flex-1 flex-wrap\">\n        <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n          <span class=\"text-small text-gray-500\">No files selected</span>\n        </div>\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button>\u7B49\u5F85\u9009\u62E9</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\">\u7ACB\u523B\u4E0A\u4F20</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\">\u5B8C\u6210</button>\n  }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaUploadDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-upload-dialog', standalone: true, imports: [MatDialogContent, MatButtonModule, NgClass, MatProgressSpinnerModule, MatDialogActions, MatDialogClose], template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center\">\n    <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-button (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\">\u9884\u89C8</h2>\n    <div>\n      <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n        @for (item of preMedia; track item.url; let i = $index) {\n          <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n            <article\n              tabindex=\"0\"\n              [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n              class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n            >\n              <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" />\n              <section class=\"flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n                @if (item.isUploading) {\n                  <div class=\"flex justify-center items-center w-full h-full\">\n                    <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n                  </div>\n                } @else {\n                  <div class=\"flex\">\n                    <button (click)=\"removeImage(i)\" class=\"delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md\">\n                      <svg\n                        class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"24\"\n                        height=\"24\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          class=\"pointer-events-none\"\n                          d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                }\n              </section>\n            </article>\n          </li>\n        }\n      </ul>\n    </div>\n    @if (preMedia.length <= 0) {\n      <div class=\"flex flex-1 flex-wrap\">\n        <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n          <span class=\"text-small text-gray-500\">No files selected</span>\n        </div>\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button>\u7B49\u5F85\u9009\u62E9</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\">\u7ACB\u523B\u4E0A\u4F20</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\">\u5B8C\u6210</button>\n  }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2$3.MediaService }] });
+
+class SpacerComponent {
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpacerComponent, isStandalone: true, selector: "rolatech-spacer", ngImport: i0, template: "<span class=\"app-spacer\"></span>\n", styles: [":host{flex:1 1 auto}.app-spacer{flex:1 1 auto}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpacerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-spacer', standalone: true, template: "<span class=\"app-spacer\"></span>\n", styles: [":host{flex:1 1 auto}.app-spacer{flex:1 1 auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+class MediaListComponent {
+    isUploading;
+    media = [];
+    showAdd = true;
+    mediaItemClick = new EventEmitter();
+    upload = new EventEmitter();
+    onMediaItemClick(item) {
+        this.mediaItemClick.emit(item);
+    }
+    onUpload(event) {
+        this.upload.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MediaListComponent, isStandalone: true, selector: "rolatech-media-list", inputs: { isUploading: "isUploading", media: "media", showAdd: "showAdd" }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n  <div class=\"progress-bar\">\n    @if (isUploading) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n  </div>\n  <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n    <ng-content></ng-content>\n    <div>\n      <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n      @if (showAdd) {\n        <div class=\"add-button\">\n          <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-list', standalone: true, imports: [MatProgressBarModule], template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n  <div class=\"progress-bar\">\n    @if (isUploading) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n  </div>\n  <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n    <ng-content></ng-content>\n    <div>\n      <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n      @if (showAdd) {\n        <div class=\"add-button\">\n          <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"] }]
+        }], propDecorators: { isUploading: [{
+                type: Input
+            }], media: [{
+                type: Input
+            }], showAdd: [{
+                type: Input
+            }], mediaItemClick: [{
+                type: Output
+            }], upload: [{
+                type: Output
+            }] } });
+
+class MediaListItemComponent {
+    media;
+    uploadProgress = 0;
+    mediaItemClick = new EventEmitter();
+    // @Output() deleteMedia = new EventEmitter<{ id: string; media: Media }>();
+    deleteMedia = new EventEmitter();
+    onMediaItemClick(event) {
+        this.mediaItemClick.emit(event);
+    }
+    onDeleteMedia(media) {
+        this.deleteMedia.emit(media);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: "media", uploadProgress: "uploadProgress" }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div\n  class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n  <div class=\"absolute z-30 right-0\">\n    <div class=\"flex-1\"></div>\n    <div>\n      <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\" class=\"ml-auto focus:outline-none hover:bg-gray-300 p-1\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n        <button mat-menu-item (click)=\"onDeleteMedia(media)\">\n          <span>\u5220\u9664</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n  <div id=\"thumbnail\" class=\"thumbnail\">\n    <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n  </div>\n  <section\n    (click)=\"onMediaItemClick(media)\"\n    class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n  ></section>\n</div>\n", styles: [".media-list-item{cursor:pointer;box-sizing:border-box;height:128px;width:228px;display:inline-block;display:block;position:relative;flex:none}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MediaListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-list-item', standalone: true, imports: [MatButtonModule, MatMenuModule, MatIconModule], template: "<div\n  class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n  <div class=\"absolute z-30 right-0\">\n    <div class=\"flex-1\"></div>\n    <div>\n      <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\" class=\"ml-auto focus:outline-none hover:bg-gray-300 p-1\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n        <button mat-menu-item (click)=\"onDeleteMedia(media)\">\n          <span>\u5220\u9664</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n  <div id=\"thumbnail\" class=\"thumbnail\">\n    <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n  </div>\n  <section\n    (click)=\"onMediaItemClick(media)\"\n    class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n  ></section>\n</div>\n", styles: [".media-list-item{cursor:pointer;box-sizing:border-box;height:128px;width:228px;display:inline-block;display:block;position:relative;flex:none}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}\n"] }]
+        }], propDecorators: { media: [{
+                type: Input
+            }], uploadProgress: [{
+                type: Input
+            }], mediaItemClick: [{
+                type: Output
+            }], deleteMedia: [{
+                type: Output
+            }] } });
+
+class NotFoundComponent {
+    router;
+    url;
+    constructor(router) {
+        this.router = router;
+        router.events.pipe(filter((e) => e instanceof RouterEvent)).subscribe((e) => {
+            if (e instanceof NavigationEnd) {
+                this.url = e.url;
+            }
+        });
+    }
+    ngOnInit() {
+        this.router.events.pipe(filter((e) => e instanceof RouterEvent)).subscribe((e) => {
+            if (e instanceof NavigationEnd) {
+                this.url = e.url;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotFoundComponent, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: NotFoundComponent, isStandalone: true, selector: "rolatech-not-found", ngImport: i0, template: "<div class=\"not-found-content\">\n  <p>\n    <b>404.</b>\n    <ins>That\u2019s an error.</ins>\n  </p>\n  <p>\n    The requested URL <code>{{ url }}</code> not found on this server.\n  </p>\n  <a href=\"/\">return home</a>\n</div>\n", styles: [":host{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotFoundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-not-found', standalone: true, template: "<div class=\"not-found-content\">\n  <p>\n    <b>404.</b>\n    <ins>That\u2019s an error.</ins>\n  </p>\n  <p>\n    The requested URL <code>{{ url }}</code> not found on this server.\n  </p>\n  <a href=\"/\">return home</a>\n</div>\n", styles: [":host{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.Router }] });
+
+class ConfirmationDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef;
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ConfirmationDialogComponent, isStandalone: true, selector: "rolatech-confirmation-dialog", ngImport: i0, template: "@if (data.title) {\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<div mat-dialog-content>\n  {{ data.message }}\n</div>\n<div mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n  <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial>\u786E\u5B9A</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-confirmation-dialog', standalone: true, imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule, MatDialogClose], template: "@if (data.title) {\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<div mat-dialog-content>\n  {{ data.message }}\n</div>\n<div mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n  <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial>\u786E\u5B9A</button>\n</div>\n" }]
+        }] });
+
+class BaseComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    id = this.route.snapshot.params['id'];
+    dialogService = inject(DialogService);
+    dialog = inject(MatDialog);
+    snackBarService = inject(SnackBarService);
+    titleService = inject(Title);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularComponentsModule, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, BaseComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, FolderComponent, LoadingSpinnerComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuUserComponent, NotFoundComponent, SpacerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent };
+//# sourceMappingURL=rolatech-angular-components.mjs.map