@rolatech/angular-components 0.0.1

package/fesm2022/rolatech-angular-components.mjs

@@ -0,0 +1,1845 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, inject, ElementRef, effect, Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders, Renderer2, PLATFORM_ID, viewChild, ChangeDetectionStrategy, contentChild, Inject, NgModule, ChangeDetectorRef, output, computed, model, HostListener, contentChildren } from '@angular/core';
+import * as i1$5 from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
+import * as i2$1 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatListModule } from '@angular/material/list';
+import * as i1$3 from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterEvent, NavigationEnd, ActivatedRoute, Router, RouterModule } from '@angular/router';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout';
+import { map, distinctUntilChanged, filter } from 'rxjs';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { Platform } from '@angular/cdk/platform';
+import { ViewportRuler, ScrollingModule } from '@angular/cdk/scrolling';
+import { APP_CONFIG, AngularCommonModule } from '@rolatech/angular-common';
+import * as i2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1 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, MatDivider } 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 { 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$1 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$1 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$2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i4$2 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 * as i1$4 from '@angular/material/table';
+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, NavigationService, BackButtonDirective } from '@rolatech/angular-services';
+import * as i3$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2$4 from '@angular/platform-browser';
+import { DomSanitizer, Title } from '@angular/platform-browser';
+import { map as map$1 } from 'lodash';
+
+class IconComponent {
+    hasClass = true;
+    filled = input(false, { transform: booleanAttribute });
+    el = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            if (this.filled()) {
+                this.el.nativeElement.setAttribute('filled', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('filled');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: IconComponent, isStandalone: true, selector: "rolatech-icon", inputs: { filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-icon": "this.hasClass" } }, ngImport: i0, template: "<mat-icon>\n  <ng-content></ng-content>\n</mat-icon>\n", styles: [".rolatech-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle;width:var(--rt-icon-width, 24px);height:var(--rt-icon-height, 24px)}.rolatech-icon mat-icon{font-family:Material Symbols Rounded}.rolatech-icon[filled] mat-icon{font-family:Material Symbols Rounded Filled}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "19.0.3", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-icon', imports: [CommonModule, MatIcon], encapsulation: ViewEncapsulation.None, template: "<mat-icon>\n  <ng-content></ng-content>\n</mat-icon>\n", styles: [".rolatech-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle;width:var(--rt-icon-width, 24px);height:var(--rt-icon-height, 24px)}.rolatech-icon mat-icon{font-family:Material Symbols Rounded}.rolatech-icon[filled] mat-icon{font-family:Material Symbols Rounded Filled}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-icon']
+            }] } });
+
+class IconButtonComponent {
+    hasClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IconButtonComponent, isStandalone: true, selector: "rolatech-icon-button", host: { properties: { "class.rolatech-icon-button": "this.hasClass" } }, ngImport: i0, template: "<button\n  id=\"button\"\n  class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-[--rt-10-percent-layer] rounded-full rolatech-icon-button\"\n  onclick=\"this.blur()\"\n>\n  <!-- <ng-content select=\"rolatech-icon\"></ng-content> -->\n  <rolatech-icon>\n    <ng-content></ng-content>\n  </rolatech-icon>\n</button>\n", styles: [".rolatech-icon-button{--rt-icon-button-icon-width: 24px;--rt-icon-button-icon-height: 24px;color:var(--rt-spec-icon-active-other);width:40px;height:40px;box-sizing:border-box;display:block}button.rolatech-icon-button{vertical-align:middle;color:inherit;outline:none;background:none;margin:0;border:none;width:100%;height:100%;line-height:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-icon-button', imports: [CommonModule, IconComponent], encapsulation: ViewEncapsulation.None, template: "<button\n  id=\"button\"\n  class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-[--rt-10-percent-layer] rounded-full rolatech-icon-button\"\n  onclick=\"this.blur()\"\n>\n  <!-- <ng-content select=\"rolatech-icon\"></ng-content> -->\n  <rolatech-icon>\n    <ng-content></ng-content>\n  </rolatech-icon>\n</button>\n", styles: [".rolatech-icon-button{--rt-icon-button-icon-width: 24px;--rt-icon-button-icon-height: 24px;color:var(--rt-spec-icon-active-other);width:40px;height:40px;box-sizing:border-box;display:block}button.rolatech-icon-button{vertical-align:middle;color:inherit;outline:none;background:none;margin:0;border:none;width:100%;height:100%;line-height:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"] }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-icon-button']
+            }] } });
+
+class TitleComponent {
+    hasClass = true;
+    title = input();
+    subtitle = input();
+    large = input(false, { transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TitleComponent, isStandalone: true, selector: "rolatech-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-title": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n  @if (large()) {\n    <a class=\"block text-3xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  } @else {\n    <a class=\"block text-xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  }\n\n  <a class=\"text-sm leading-3 text-[--rt-text-secondary]\"\n    ><span>{{ subtitle() }}</span></a\n  >\n</div>\n", styles: ["rolatech-title{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-title', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-row items-center\">\n  @if (large()) {\n    <a class=\"block text-3xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  } @else {\n    <a class=\"block text-xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  }\n\n  <a class=\"text-sm leading-3 text-[--rt-text-secondary]\"\n    ><span>{{ subtitle() }}</span></a\n  >\n</div>\n", styles: ["rolatech-title{display:block}\n"] }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-title']
+            }] } });
+
+class ContainerComponent {
+    hasId = 'rolatech-container';
+    hasClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ContainerComponent, isStandalone: true, selector: "rolatech-container", host: { properties: { "id": "this.hasId", "class.rolatech-container": "this.hasClass" } }, ngImport: i0, template: "<div class=\"xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto text-[--rt-text-primary]\">\n  <ng-content select=\"rolatech-toolbar\"></ng-content>\n  <ng-content select=\"rolatech-filter\"></ng-content>\n  <ng-content select=\"rolatech-tabs\"></ng-content>\n  <ng-content select=\"rolatech-chip-bar\"></ng-content>\n  <ng-content select=\"rolatech-list\"></ng-content>\n  <ng-content select=\"rolatech-content\"></ng-content>\n  <div class=\"container-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["@media (min-width: 1280){.rolatech-container{max-width:var(--rt-container-max-width, 1024px)}}@media (min-width: 1536px){.rolatech-container{max-width:var(--rt-container-max-width, 1280px)}}rolatech-container .container-content{margin:0 auto;display:block;padding-left:var(--rt-container-content-padding-left, 16px);padding-right:var(--rt-container-content-padding-right, 16px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-container', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto text-[--rt-text-primary]\">\n  <ng-content select=\"rolatech-toolbar\"></ng-content>\n  <ng-content select=\"rolatech-filter\"></ng-content>\n  <ng-content select=\"rolatech-tabs\"></ng-content>\n  <ng-content select=\"rolatech-chip-bar\"></ng-content>\n  <ng-content select=\"rolatech-list\"></ng-content>\n  <ng-content select=\"rolatech-content\"></ng-content>\n  <div class=\"container-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["@media (min-width: 1280){.rolatech-container{max-width:var(--rt-container-max-width, 1024px)}}@media (min-width: 1536px){.rolatech-container{max-width:var(--rt-container-max-width, 1280px)}}rolatech-container .container-content{margin:0 auto;display:block;padding-left:var(--rt-container-content-padding-left, 16px);padding-right:var(--rt-container-content-padding-right, 16px)}\n"] }]
+        }], propDecorators: { hasId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-container']
+            }] } });
+
+const APP_LAYOUT = new InjectionToken('APP_LAYOUT');
+function provideAngularLayout(config) {
+    const providers = [
+        {
+            provide: APP_LAYOUT,
+            useValue: config,
+        },
+    ];
+    return makeEnvironmentProviders(providers);
+}
+
+class MenuIconComponent {
+    hasClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: MenuIconComponent, isStandalone: true, selector: "rolatech-menu-icon", host: { properties: { "class.rolatech-icon-button": "this.hasClass" } }, ngImport: i0, template: "<button\n  id=\"button\"\n  class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-[--rt-10-percent-layer] rounded-full rolatech-icon-button\"\n  onclick=\"this.blur()\"\n>\n  <div style=\"width: 100%; height: 100%; display: block; fill: currentcolor\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      focusable=\"false\"\n      style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n    >\n      <path d=\"M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z\"></path>\n    </svg>\n  </div>\n</button>\n", styles: ["rolatech-menu-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MenuIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-menu-icon', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<button\n  id=\"button\"\n  class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-[--rt-10-percent-layer] rounded-full rolatech-icon-button\"\n  onclick=\"this.blur()\"\n>\n  <div style=\"width: 100%; height: 100%; display: block; fill: currentcolor\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      focusable=\"false\"\n      style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n    >\n      <path d=\"M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z\"></path>\n    </svg>\n  </div>\n</button>\n", styles: ["rolatech-menu-icon{display:block}\n"] }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-icon-button']
+            }] } });
+
+class TopbarComponent {
+    hostId = 'rolatech-topbar';
+    hasClass = true;
+    persistent = inject(APP_LAYOUT).persistent;
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    breakpointObserver = inject(BreakpointObserver);
+    appLayout = inject(APP_LAYOUT);
+    link = input('/');
+    appDrawer;
+    miniGuide;
+    ngOnInit() {
+        if (this.persistent) {
+            this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
+        }
+        else {
+            this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
+        }
+    }
+    onToggle() {
+        if (this.appLayout.guide) {
+            this.miniGuide.toggle();
+        }
+        this.appDrawer.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 flex items-center\">\n  <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n  <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n    <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\">\n      <span class=\"text-[--rt-brand-color]\">{{ appLayout.title }}</span>\n      <span>{{ appLayout.subtitle }}</span>\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not([persistent]) #topbar-menu-button{display:none}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}rolatech-topbar #topbar-menu-button{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: MenuIconComponent, selector: "rolatech-menu-icon" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TopbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-topbar', imports: [CommonModule, RouterLink, MatButtonModule, MenuIconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"h-14 flex items-center\">\n  <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n  <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n    <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\">\n      <span class=\"text-[--rt-brand-color]\">{{ appLayout.title }}</span>\n      <span>{{ appLayout.subtitle }}</span>\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not([persistent]) #topbar-menu-button{display:none}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}rolatech-topbar #topbar-menu-button{display:block!important}}\n"] }]
+        }], propDecorators: { hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-topbar']
+            }] } });
+
+// export const DRAWER_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
+// export const heightAnimation = trigger('heightAnimation', [
+//   state(
+//     'expanded',
+//     style({
+//       height: '*',
+//       visibility: 'visible',
+//     }),
+//   ),
+//   state(
+//     'collapsed',
+//     style({
+//       height: '0px',
+//       visibility: 'hidden',
+//     }),
+//   ),
+//   transition('expanded <=> collapsed', [animate(DRAWER_ANIMATION_TIMING)]),
+// ]);
+const PANEL_ANIMATION_TIMING$1 = '225ms cubic-bezier(0.4,0.0,0.2,1)';
+const panelAnimations$1 = {
+    /** Animation that rotates the indicator arrow. */
+    indicator: trigger('indicator', [
+        state('collapsed, void', style({ transform: 'rotate(0deg)' })),
+        state('expanded', style({ transform: 'rotate(180deg)' })),
+        transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING$1)),
+    ]),
+    /** Animation that expands and collapses the panel content. */
+    content: trigger('content', [
+        state('collapsed, void', style({ height: '0px', visibility: 'hidden' })),
+        state('expanded', style({ height: '*', visibility: 'visible' })),
+        transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING$1)),
+    ]),
+};
+
+class DrawerComponent {
+    _enableAnimations = false;
+    persistent = inject(APP_LAYOUT).persistent;
+    links = input();
+    position = input('left');
+    opened = input(true);
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    breakpointObserver = inject(BreakpointObserver);
+    appLayout = inject(APP_LAYOUT);
+    guideEl = viewChild('guide');
+    content = viewChild('content');
+    scrimEl = viewChild('scrim');
+    headerEl = viewChild('header');
+    isMobile = false;
+    isPersistent = true;
+    panelOpenState = false;
+    _opened = false;
+    _platform = inject(Platform);
+    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() {
+        if (this._opened) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    init(isMobile) {
+        this._opened = !isMobile;
+        this.isMobile = isMobile;
+        this.isPersistent = !isMobile;
+        if (this._platform.isBrowser) {
+            if (isMobile) {
+                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', '');
+                }
+            }
+        }
+    }
+    ngAfterContentInit() {
+        this.renderer.setAttribute(this.el.nativeElement, 'position', this.position());
+        this.breakpointObserver
+            .observe(['(max-width: 768px)'])
+            .pipe(map((result) => result.matches))
+            .subscribe({
+            next: (res) => {
+                this.init(res);
+            },
+        });
+    }
+    ngAfterContentChecked() {
+        if (this._platform.isBrowser) {
+            this._enableAnimations = true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DrawerComponent, isStandalone: true, selector: "rolatech-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-drawer", "style.transition-duration": "200ms", "ngSkipHydration": "" }, classAttribute: "rolatech-drawer" }, 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=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-drawer\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n        <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\" routerLink=\"/\">\n          <span class=\"text-[--rt-brand-color]\">{{ appLayout.title }}</span>\n          <span>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n        <div class=\"block p-3\">\n          @for (item of links(); track $index) {\n            @if (item.children) {\n              <div class=\"flex cursor-pointer overflow-hidden\">\n                @if (item.icon) {\n                  <div class=\"h-11 flex items-center\">\n                    <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                  </div>\n                }\n                <div class=\"w-full\">\n                  <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n                    <span class=\"ml-3\">{{ item.title }}</span>\n                    <div class=\"flex-1\"></div>\n                    <rolatech-icon [@indicator]=\"panelOpenState === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n                  </div>\n                  <div\n                    class=\"flex flex-col ml-4 overflow-visible\"\n                    [@content]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n                  >\n                    @for (child of item.children; track child) {\n                      {{ child.exact }}\n                      <a\n                        id=\"endpoint\"\n                        [routerLink]=\"child.link\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                        class=\"p-2 rt-guide-entry\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                      >\n                        <span class=\"text-sm\">{{ child.title }}</span>\n                      </a>\n                    }\n                  </div>\n                </div>\n              </div>\n            } @else {\n              @if (item.openinView) {\n                <a\n                  class=\"flex hover:bg-[--rt-10-percent-layer] 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 items-center\">\n                      @if (item.icon) {\n                        <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ item.title }}</span>\n                        <span class=\"text-sm opacity-75 text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n                      </div>\n                    </div>\n                    <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n                  </div>\n                </a>\n              } @else {\n                @if (item.button) {\n                  <a\n                    class=\"flex rolatech-drawer-button min-h-11 rounded-xl mb-2\"\n                    [routerLink]=\"item.link\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-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                } @else {\n                  <a\n                    id=\"endpoint\"\n                    class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\n                    [routerLink]=\"item.link\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                    routerLinkActive=\"drawer-active\"\n                    [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                    #routerLink=\"routerLinkActive\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span>{{ item.title }}</span>\n                          <span class=\"text-sm text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n                        </div>\n                      </div>\n                    </div>\n                  </a>\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }], animations: [panelAnimations$1.indicator, panelAnimations$1.content], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-drawer', imports: [CommonModule, RouterLink, RouterLinkActive, IconComponent, MenuIconComponent, MatButtonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [panelAnimations$1.indicator, panelAnimations$1.content], host: {
+                        id: 'rolatech-drawer',
+                        class: 'rolatech-drawer',
+                        'style.transition-duration': '200ms',
+                        ngSkipHydration: '',
+                    }, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-drawer\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n        <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\" routerLink=\"/\">\n          <span class=\"text-[--rt-brand-color]\">{{ appLayout.title }}</span>\n          <span>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n        <div class=\"block p-3\">\n          @for (item of links(); track $index) {\n            @if (item.children) {\n              <div class=\"flex cursor-pointer overflow-hidden\">\n                @if (item.icon) {\n                  <div class=\"h-11 flex items-center\">\n                    <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                  </div>\n                }\n                <div class=\"w-full\">\n                  <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n                    <span class=\"ml-3\">{{ item.title }}</span>\n                    <div class=\"flex-1\"></div>\n                    <rolatech-icon [@indicator]=\"panelOpenState === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n                  </div>\n                  <div\n                    class=\"flex flex-col ml-4 overflow-visible\"\n                    [@content]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n                  >\n                    @for (child of item.children; track child) {\n                      {{ child.exact }}\n                      <a\n                        id=\"endpoint\"\n                        [routerLink]=\"child.link\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                        class=\"p-2 rt-guide-entry\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                      >\n                        <span class=\"text-sm\">{{ child.title }}</span>\n                      </a>\n                    }\n                  </div>\n                </div>\n              </div>\n            } @else {\n              @if (item.openinView) {\n                <a\n                  class=\"flex hover:bg-[--rt-10-percent-layer] 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 items-center\">\n                      @if (item.icon) {\n                        <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ item.title }}</span>\n                        <span class=\"text-sm opacity-75 text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n                      </div>\n                    </div>\n                    <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n                  </div>\n                </a>\n              } @else {\n                @if (item.button) {\n                  <a\n                    class=\"flex rolatech-drawer-button min-h-11 rounded-xl mb-2\"\n                    [routerLink]=\"item.link\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-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                } @else {\n                  <a\n                    id=\"endpoint\"\n                    class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\n                    [routerLink]=\"item.link\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                    routerLinkActive=\"drawer-active\"\n                    [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                    #routerLink=\"routerLinkActive\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span>{{ item.title }}</span>\n                          <span class=\"text-sm text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n                        </div>\n                      </div>\n                    </div>\n                  </a>\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
+        }] });
+
+class MiniGuideComponent {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    breakpointObserver = inject(BreakpointObserver);
+    items = input();
+    title = input(true);
+    opened = false;
+    disableToggle = false;
+    breakpoint$ = this.breakpointObserver.observe([Breakpoints.Large, Breakpoints.Medium, '(max-width: 768px)']);
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
+            this.breakpoint$.subscribe(() => this.breakpointChanged());
+        }
+    }
+    breakpointChanged() {
+        if (this.breakpointObserver.isMatched(Breakpoints.Large)) {
+            this.disableToggle = false;
+            // this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
+            // this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
+        }
+        else if (this.breakpointObserver.isMatched(Breakpoints.Medium)) {
+            // this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
+            // this.renderer.removeAttribute(this.el.nativeElement, 'hidden');
+        }
+        else if (this.breakpointObserver.isMatched('(max-width: 768px)')) {
+            this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
+            this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
+            this.disableToggle = true;
+        }
+        else {
+            this.disableToggle = false;
+            // this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
+            // this.renderer.removeAttribute(this.el.nativeElement, 'hidden');
+        }
+    }
+    open() {
+        this.opened = true;
+        this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
+        this.renderer.removeAttribute(this.el.nativeElement, 'hidden');
+    }
+    close() {
+        this.opened = false;
+        this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
+        this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
+    }
+    toggle() {
+        if (this.disableToggle) {
+            this.close();
+            return;
+        }
+        if (this.opened) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MiniGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MiniGuideComponent, isStandalone: true, selector: "rolatech-mini-guide", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-mini-guide" }, classAttribute: "rolatech-mini-guide" }, ngImport: i0, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n  @for (item of items(); track $index) {\n    <div>\n      <a\n        id=\"min-guide-endpoint\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"min-guide-active\"\n        [routerLinkActiveOptions]=\"{ exact: true }\"\n        #routerLink=\"routerLinkActive\"\n        class=\"flex flex-col justify-center items-center py-3 rt-guide-entry\"\n      >\n        <rolatech-icon [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n        @if (title()) {\n          <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n        }\n      </a>\n    </div>\n  }\n</div>\n", styles: ["rolatech-mini-guide{position:fixed;left:0;top:var(--rt-toolbar-height, 56px);bottom:0;width:var(--rt-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rt-base-background, #fff);color:var(--rt-text-primary, #000);z-index:2028;padding:0 4px;scrollbar-width:none;overflow:scroll}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}#min-guide-endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MiniGuideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-mini-guide', imports: [CommonModule, IconComponent, RouterLink, RouterLinkActive], encapsulation: ViewEncapsulation.None, host: {
+                        id: 'rolatech-mini-guide',
+                        class: 'rolatech-mini-guide',
+                    }, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n  @for (item of items(); track $index) {\n    <div>\n      <a\n        id=\"min-guide-endpoint\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"min-guide-active\"\n        [routerLinkActiveOptions]=\"{ exact: true }\"\n        #routerLink=\"routerLinkActive\"\n        class=\"flex flex-col justify-center items-center py-3 rt-guide-entry\"\n      >\n        <rolatech-icon [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n        @if (title()) {\n          <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n        }\n      </a>\n    </div>\n  }\n</div>\n", styles: ["rolatech-mini-guide{position:fixed;left:0;top:var(--rt-toolbar-height, 56px);bottom:0;width:var(--rt-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rt-base-background, #fff);color:var(--rt-text-primary, #000);z-index:2028;padding:0 4px;scrollbar-width:none;overflow:scroll}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}#min-guide-endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
+        }] });
+
+class AppPageComponent {
+    el = inject((ElementRef));
+    constructor() { }
+    ngOnInit() { }
+    ngAfterContentInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AppPageComponent, isStandalone: true, selector: "rolatech-page", host: { attributes: { "id": "rolatech-page", "ngSkipHydration": "" }, classAttribute: "rolatech-page rt-page" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["rolatech-page[transparent]{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AppPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-page', imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        id: 'rolatech-page',
+                        class: 'rolatech-page rt-page',
+                        ngSkipHydration: '',
+                    }, template: "<ng-content></ng-content>\n", styles: ["rolatech-page[transparent]{opacity:0}\n"] }]
+        }], ctorParameters: () => [] });
+
+const EXTRA_SMALL_WIDTH_BREAKPOINT = 768;
+class LayoutComponent {
+    appLayout = inject(APP_LAYOUT);
+    viewportRuler = inject(ViewportRuler);
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    _platform = inject(Platform);
+    breakpointObserver = inject(BreakpointObserver);
+    topbar = contentChild.required(TopbarComponent);
+    drawer = contentChild.required(DrawerComponent);
+    page = contentChild.required(AppPageComponent);
+    guide = contentChild.required(MiniGuideComponent);
+    breakpoint$ = this.breakpointObserver
+        .observe([Breakpoints.Large, Breakpoints.Medium, '(max-width: 768px)'])
+        .pipe(distinctUntilChanged());
+    constructor() { }
+    ngAfterContentInit() {
+        this.renderer.setAttribute(this.page().el.nativeElement, 'transparent', '');
+        if (this._platform.isBrowser) {
+            this.init();
+        }
+    }
+    ngOnInit() { }
+    open() { }
+    close() { }
+    toggle() { }
+    init() {
+        this.renderer.removeAttribute(this.page().el.nativeElement, 'transparent', '');
+        if (this.topbar()) {
+            this.topbar().appDrawer = this.drawer();
+        }
+        if (this.appLayout.guide) {
+            this.topbar().miniGuide = this.guide();
+        }
+        if (this.appLayout.guide) {
+            this.breakpoint$.subscribe(() => this.breakpointChanged());
+        }
+        this.breakpointObserver
+            .observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
+            .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', '');
+                }
+            },
+        });
+    }
+    breakpointChanged() {
+        if (this.breakpointObserver.isMatched(Breakpoints.Large)) {
+            this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
+        }
+        else if (this.breakpointObserver.isMatched(Breakpoints.Medium)) {
+            this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
+        }
+        else if (this.breakpointObserver.isMatched('(max-width: 768px)')) {
+            this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: LayoutComponent, isStandalone: true, selector: "rolatech-layout", host: { attributes: { "id": "rolatech-layout", "ngSkipHydration": "" }, classAttribute: "rolatech-layout" }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true, isSignal: true }, { propertyName: "page", first: true, predicate: AppPageComponent, descendants: true, isSignal: true }, { propertyName: "guide", first: true, predicate: MiniGuideComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{--rt-persistent-guide-width: 256px;--rt-mini-guide-width: 72px;display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:var(--rt-persistent-guide-width)}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:var(--rt-persistent-guide-width)}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width)}rolatech-page{display:block;margin-top:56px}rolatech-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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-layout', imports: [CommonModule, MatListModule, MatButtonModule, MatIconModule, MatSidenavModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        id: 'rolatech-layout',
+                        class: 'rolatech-layout',
+                        ngSkipHydration: '',
+                    }, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{--rt-persistent-guide-width: 256px;--rt-mini-guide-width: 72px;display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:var(--rt-persistent-guide-width)}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:var(--rt-persistent-guide-width)}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width)}rolatech-page{display:block;margin-top:56px}rolatech-page[mini-guide-visible] .content{margin-left:72px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class FooterComponent {
+    hostId = 'rolatech-footer';
+    hasClass = true;
+    config = inject(APP_CONFIG);
+    title = input();
+    copyright = input('');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: FooterComponent, isStandalone: true, selector: "rolatech-footer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"bg-[--rt-base-background] flex flex-col justify-between px-5 md:px-16 py-6\">\n  <div class=\"flex flex-col md:flex-row md:gap-10 gap-3 py-3\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"flex justify-between items-end\">\n    <div class=\"cursor-pointer\">\n      <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title() }}</a>\n    </div>\n    <span class=\"text-sm\">\u00A9{{ copyright() }}</span>\n  </div>\n</div>\n", styles: [".rolatech-footer{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-footer', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-[--rt-base-background] flex flex-col justify-between px-5 md:px-16 py-6\">\n  <div class=\"flex flex-col md:flex-row md:gap-10 gap-3 py-3\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"flex justify-between items-end\">\n    <div class=\"cursor-pointer\">\n      <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title() }}</a>\n    </div>\n    <span class=\"text-sm\">\u00A9{{ copyright() }}</span>\n  </div>\n</div>\n", styles: [".rolatech-footer{width:100%}\n"] }]
+        }], propDecorators: { hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-footer']
+            }] } });
+
+class ConsoleLayoutComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConsoleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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: "19.0.3", ngImport: i0, type: ConsoleLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-console-layout', imports: [CommonModule], template: "<p>console-layout works!</p>\n" }]
+        }] });
+
+class TopbarAvatarMenuComponent {
+    environment = inject(APP_CONFIG);
+    platformId = inject(PLATFORM_ID);
+    menu = input.required();
+    avatar = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n  <a\n    class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-[--rt-raised-background] outline outline-transparent outline-4\"\n    [matMenuTriggerFor]=\"menu()\"\n  >\n    <div class=\"bg-[--rt-brand-color] w-9 h-9\">\n      @if (avatar()) {\n        <img class=\"w-9 h-9 object-cover\" [src]=\"avatar()\" alt />\n      }\n    </div>\n  </a>\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: "19.0.3", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-topbar-avatar-menu', imports: [CommonModule, MatSidenavModule, MatListModule, MatIconModule, MatMenuModule], template: "<div class=\"flex\">\n  <a\n    class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-[--rt-raised-background] outline outline-transparent outline-4\"\n    [matMenuTriggerFor]=\"menu()\"\n  >\n    <div class=\"bg-[--rt-brand-color] w-9 h-9\">\n      @if (avatar()) {\n        <img class=\"w-9 h-9 object-cover\" [src]=\"avatar()\" alt />\n      }\n    </div>\n  </a>\n</div>\n" }]
+        }] });
+
+class FolderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FolderComponent, isStandalone: true, selector: "rolatech-folder", ngImport: i0, template: "<div></div>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FolderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-folder', 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: "19.0.3", ngImport: i0, type: MediaPreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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\" alt />\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: i4.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: "19.0.3", ngImport: i0, type: MediaPreviewDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-preview-dialog', 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\" alt />\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.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: "19.0.3", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", 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: "19.0.3", 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: "19.0.3", 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: "19.0.3", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule], exports: [MaterialModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule, MaterialModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AngularComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MaterialModule],
+                    exports: [MaterialModule],
+                }]
+        }] });
+
+class SpinnerComponent {
+    title = input();
+    isLoading;
+    loadingSubscription;
+    loadingService = inject(LoadingService);
+    _elmRef = inject(ElementRef);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    ngAfterViewInit() {
+        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: "19.0.3", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: SpinnerComponent, isStandalone: true, selector: "rolatech-spinner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex justify-center\">\n  <div class=\"lds-spinner\">\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n</div>\n", styles: [".lds-spinner{color:official;display:inline-block;position:relative;width:40px;height:40px}.lds-spinner div{transform-origin:20px 20px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:\" \";display:block;position:absolute;top:4px;left:18px;width:4px;height:8px;border-radius:20%;background:#333}.lds-spinner div:nth-child(1){transform:rotate(0);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-spinner', imports: [CommonModule], template: "<div class=\"flex justify-center\">\n  <div class=\"lds-spinner\">\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n</div>\n", styles: [".lds-spinner{color:official;display:inline-block;position:relative;width:40px;height:40px}.lds-spinner div{transform-origin:20px 20px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:\" \";display:block;position:absolute;top:4px;left:18px;width:4px;height:8px;border-radius:20%;background:#333}.lds-spinner div:nth-child(1){transform:rotate(0);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}to{opacity:0}}\n"] }]
+        }] });
+
+class MediaUploadComponent {
+    title = input('上传图片');
+    subtitle = input('文件大小');
+    description = input('不能超过5MB');
+    isUploading = input(false);
+    mediaItemClick = output();
+    upload = output();
+    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: "19.0.3", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MediaUploadComponent, isStandalone: true, selector: "rolatech-media-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"bg-[--rt-raised-background] 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-[--rt-text-secondary]\">{{ subtitle() }}</div>\n        <div class=\"font-sm text-[--rt-text-secondary]\">{{ 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-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-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\" alt />\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: i4.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: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MediaUploadComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AngularCommonModule, AngularComponentsModule, SpinnerComponent], selector: 'rolatech-media-upload', template: "<div class=\"bg-[--rt-raised-background] 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-[--rt-text-secondary]\">{{ subtitle() }}</div>\n        <div class=\"font-sm text-[--rt-text-secondary]\">{{ 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-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-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\" alt />\n    </div>\n  }\n</div>\n", styles: [".mat-icon{transform:scale(2)}\n"] }]
+        }] });
+
+class StorageBucketCreateComponent {
+    name = input();
+    output = output();
+    ngOnInit() { }
+    ngDoCheck() {
+        this.output.emit(this.name());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: StorageBucketCreateComponent, isStandalone: true, selector: "rolatech-storage-bucket-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$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", "disabledInteractive"], 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: "19.0.3", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-storage-bucket-create', 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"] }]
+        }] });
+
+class StorageFileUploadComponent {
+    title = input();
+    output = output();
+    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: "19.0.3", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$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", "disabledInteractive"], 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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.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: "19.0.3", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-storage-file-upload', 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"] }]
+        }] });
+
+class StorageFolderCreateComponent {
+    name = input();
+    isPublic = input(true);
+    output = output();
+    ngOnInit() { }
+    ngDoCheck() {
+        this.output.emit({ name: this.name(), isPublic: this.isPublic() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: StorageFolderCreateComponent, isStandalone: true, selector: "rolatech-storage-folder-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null } }, 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 [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n    <span class=\"text-sm text-[--rt-text-secondary] 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$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", "disabledInteractive"], 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$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-storage-folder-create', 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 [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n    <span class=\"text-sm text-[--rt-text-secondary] 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"] }]
+        }] });
+
+class MenuUserComponent {
+    environment = inject(APP_CONFIG);
+    myaccountUrl = this.environment.myaccountUrl;
+    user = input();
+    avatar = computed(() => {
+        return this.user().avatar;
+    });
+    constructor() {
+        // effect(() => {
+        //   this.data = this.user();
+        // });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"min-w-[256px]\">\n  @if (user()) {\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-[--rt-brand-color]\">\n          @if (user().avatar) {\n            <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" alt />\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>\n  }\n\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: ["rolatech-menu-user{background-color:var(--rt-menu-background, #fff);color:var(--rt-text-primary, #000)}.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"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MenuUserComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MatMenuModule, MatIconModule], selector: 'rolatech-menu-user', encapsulation: ViewEncapsulation.None, template: "<div class=\"min-w-[256px]\">\n  @if (user()) {\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-[--rt-brand-color]\">\n          @if (user().avatar) {\n            <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" alt />\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>\n  }\n\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: ["rolatech-menu-user{background-color:var(--rt-menu-background, #fff);color:var(--rt-text-primary, #000)}.formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"] }]
+        }], ctorParameters: () => [] });
+
+class WechatConnectDialogComponent {
+    dialogRef = inject(MatDialogRef);
+    environment = inject(APP_CONFIG);
+    appId = model();
+    redirectUri = model('');
+    state = model();
+    urlSafe;
+    sanitizer = inject(DomSanitizer);
+    baseUrl = 'https://open.weixin.qq.com/connect/qrconnect';
+    loaded = false;
+    constructor() {
+        effect(() => {
+            const href = 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/gateway/login-regist/css/link-wx-login.css';
+            // const encodedURI = encodeURI(this.redirectUri());
+            const encodedURI = encodeURI('https://accounts.pinxiaoke.cn');
+            const src = `${this.baseUrl}?appid=${this.appId()}&response_type=code&self_redirect=true&scope=snsapi_login&href=${href}&redirect_uri=${encodedURI}&state=${this.state()}#wechat_redirect`;
+            this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(src);
+            this.loaded = true;
+        });
+    }
+    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: "19.0.3", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", inputs: { appId: { classPropertyName: "appId", publicName: "appId", isSignal: true, isRequired: false, transformFunction: null }, redirectUri: { classPropertyName: "redirectUri", publicName: "redirectUri", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appId: "appIdChange", redirectUri: "redirectUriChange", state: "stateChange" }, host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"w-[190px] h-[190px]\">\n    @if (loaded) {\n      <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    }\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: "19.0.3", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-wechat-connect-dialog', template: "<div class=\"flex flex-col p-3\">\n  <div class=\"w-[190px] h-[190px]\">\n    @if (loaded) {\n      <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    }\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: "19.0.3", ngImport: i0, type: MediaUploadDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.MediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MediaUploadDialogComponent, isStandalone: true, selector: "rolatech-media-upload-dialog", ngImport: i0, template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-[--rt-border-color] 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-[--rt-raised-background] 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\" alt />\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\n                      (click)=\"removeImage(i)\"\n                      class=\"delete ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 rounded-md\"\n                    >\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-[--rt-text-secondary]\">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: i4.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$2.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: "19.0.3", ngImport: i0, type: MediaUploadDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-upload-dialog', imports: [MatDialogContent, MatButtonModule, NgClass, MatProgressSpinnerModule, MatDialogActions, MatDialogClose], template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-[--rt-border-color] 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-[--rt-raised-background] 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\" alt />\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\n                      (click)=\"removeImage(i)\"\n                      class=\"delete ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 rounded-md\"\n                    >\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-[--rt-text-secondary]\">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.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2$3.MediaService }] });
+
+class MediaListComponent {
+    isUploading = input();
+    media = input();
+    showAdd = input(true);
+    mediaItemClick = output();
+    upload = output();
+    onMediaItemClick(item) {
+        this.mediaItemClick.emit(item);
+    }
+    onUpload(event) {
+        this.upload.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MediaListComponent, isStandalone: true, selector: "rolatech-media-list", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, showAdd: { classPropertyName: "showAdd", publicName: "showAdd", isSignal: true, isRequired: false, transformFunction: null } }, 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          <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n              <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n            </svg>\n          </div>\n        </div>\n      }\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}rolatech-media-list-item:before{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MediaListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-list', 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          <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n              <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n            </svg>\n          </div>\n        </div>\n      }\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}rolatech-media-list-item:before{border-radius:12px}\n"] }]
+        }] });
+
+class MediaListItemComponent {
+    media = input.required();
+    uploadProgress = input(0);
+    mediaItemClick = output();
+    deleteMedia = output();
+    onMediaItemClick(event) {
+        this.mediaItemClick.emit(event);
+    }
+    onDeleteMedia(media) {
+        this.deleteMedia.emit(media);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: true, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div\n  class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-[--rt-raised-background] 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\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n      >\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: i4.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: "19.0.3", ngImport: i0, type: MediaListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-list-item', imports: [MatButtonModule, MatMenuModule, MatIconModule], template: "<div\n  class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-[--rt-raised-background] 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\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n      >\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"] }]
+        }] });
+
+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: "19.0.3", ngImport: i0, type: NotFoundComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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: "19.0.3", ngImport: i0, type: NotFoundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-not-found', 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$3.Router }] });
+
+class ConfirmationDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef;
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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: i4.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: "19.0.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-confirmation-dialog', 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 FilterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "rolatech-filter", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-filter', imports: [CommonModule], template: "<ng-content></ng-content>\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);
+    navigation = inject(NavigationService);
+}
+
+class TableComponent {
+    dataSource = input.required();
+    displayedColumns = [];
+    ngOnInit() {
+        this.displayedColumns = map$1(this.dataSource().columns, 'ref');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableComponent, isStandalone: true, selector: "rolatech-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource().data\">\n  @for (column of dataSource().columns; track $index) {\n    <ng-container [matColumnDef]=\"column.ref\" sticky>\n      <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n    </ng-container>\n  }\n  <!-- <ng-container matColumnDef=\"actions\" stickyEnd>\n    <th mat-header-cell *matHeaderCellDef class=\"actions\">\u8BE6\u60C5</th>\n    <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n      <a [routerLink]=\"['../', item.id]\"> \u8BE6\u60C5 </a>\n    </td>\n  </ng-container> -->\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: RouterModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-table', imports: [CommonModule, MatTableModule, RouterModule], template: "<table mat-table [dataSource]=\"dataSource().data\">\n  @for (column of dataSource().columns; track $index) {\n    <ng-container [matColumnDef]=\"column.ref\" sticky>\n      <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n    </ng-container>\n  }\n  <!-- <ng-container matColumnDef=\"actions\" stickyEnd>\n    <th mat-header-cell *matHeaderCellDef class=\"actions\">\u8BE6\u60C5</th>\n    <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n      <a [routerLink]=\"['../', item.id]\"> \u8BE6\u60C5 </a>\n    </td>\n  </ng-container> -->\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n" }]
+        }] });
+
+class PaginatorComponent {
+    prevClick() { }
+    nextClick() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", ngImport: i0, template: "<div class=\"flex h-14 items-center\">\n  <button mat-icon-button (click)=\"prevClick()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <div></div>\n  <button mat-icon-button (click)=\"nextClick()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-paginator', imports: [CommonModule, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex h-14 items-center\">\n  <button mat-icon-button (click)=\"prevClick()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <div></div>\n  <button mat-icon-button (click)=\"nextClick()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n</div>\n" }]
+        }] });
+
+class MediaPreviewComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: MediaPreviewComponent, isStandalone: true, selector: "rolatech-media-preview", ngImport: i0, template: "<p>media-preview works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MediaPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-media-preview', imports: [CommonModule], template: "<p>media-preview works!</p>\n" }]
+        }] });
+
+class ToolbarComponent {
+    hasId = 'rolatech-toolbar';
+    hasClass = true;
+    title = input();
+    subtitle = input();
+    back = input(false, { transform: booleanAttribute });
+    link = input('');
+    large = input(false, { transform: booleanAttribute });
+    divider = input(false, { transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-toolbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n  <ng-container>\n    @if (back()) {\n      <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n    @if (link()) {\n      <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n  </ng-container>\n  @if (title()) {\n    @if (large()) {\n      <span class=\"text-2xl font-medium\">{{ title() }}</span>\n    } @else {\n      <span class=\"text-xl font-medium\">{{ title() }}</span>\n    }\n  }\n  <div class=\"flex-1\"></div>\n  <div class=\"flex justify-center items-center\">\n    <ng-content></ng-content>\n  </div>\n</div>\n@if (subtitle()) {\n  <div class=\"-mt-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n    <span class=\"text-sm text-[--rt-text-secondary]\">{{ subtitle() }}</span>\n  </div>\n}\n@if (divider()) {\n  <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "directive", type: BackButtonDirective, selector: "[rolatechBackButton]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-toolbar', imports: [CommonModule, RouterLink, IconButtonComponent, BackButtonDirective, MatDivider], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n  <ng-container>\n    @if (back()) {\n      <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n    @if (link()) {\n      <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n  </ng-container>\n  @if (title()) {\n    @if (large()) {\n      <span class=\"text-2xl font-medium\">{{ title() }}</span>\n    } @else {\n      <span class=\"text-xl font-medium\">{{ title() }}</span>\n    }\n  }\n  <div class=\"flex-1\"></div>\n  <div class=\"flex justify-center items-center\">\n    <ng-content></ng-content>\n  </div>\n</div>\n@if (subtitle()) {\n  <div class=\"-mt-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n    <span class=\"text-sm text-[--rt-text-secondary]\">{{ subtitle() }}</span>\n  </div>\n}\n@if (divider()) {\n  <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"] }]
+        }], propDecorators: { hasId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-toolbar']
+            }] } });
+
+class ThumbnailComponent {
+    hasClass = true;
+    myColor = '56.25%';
+    el = inject((ElementRef));
+    src = input();
+    size = input();
+    mode = input('clip'); // full, clip
+    ratio = input('rectangle'); // rectangle, square
+    img = viewChild.required('img');
+    width = input();
+    height = input();
+    renderer = inject(Renderer2);
+    sizea = effect(() => {
+        this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
+    });
+    full = effect(() => {
+        this.renderer.setAttribute(this.el.nativeElement, 'mode', this.mode());
+        if (this.mode() === 'full') {
+            if (this.width() && this.height()) {
+                this.renderer.setStyle(this.el.nativeElement, 'aspect-ratio', this.width() / this.height());
+            }
+            else {
+                this.renderer.setStyle(this.el.nativeElement, 'aspect-ratio', 16 / 9);
+            }
+        }
+    });
+    ratioSet = effect(() => {
+        this.renderer.setAttribute(this.el.nativeElement, 'ratio', this.ratio());
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ThumbnailComponent, isStandalone: true, selector: "rolatech-thumbnail", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-rich-grid-media": "this.hasClass", "style.--rt-thumbnail-padding-top": "this.myColor" } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #edge class=\"absolute top-0 left-0\"></div>\n@defer (on viewport(edge)) {\n  <a id=\"thumbnail\" class=\"rt-thumbnail\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative;--rt-thumbnail-padding-top: 56.25%}rolatech-thumbnail:before{display:block;content:\"\";width:100%;height:100%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}rolatech-thumbnail[mode=full]:before{padding-top:0}rolatech-thumbnail[ratio=square]:before{--rt-thumbnail-padding-top: 100%}rolatech-thumbnail[mode=clip]:before{padding-top:var(--rt-thumbnail-padding-top)}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail[mode=clip] #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}rolatech-thumbnail[mode=full] #thumbnail rolatech-image img{object-fit:contain;background-color:var(--rt-thumbnail-background-color)}rolatech-thumbnail #thumbnail rolatech-image img{background-color:var(--rt-thumbnail-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.0.3", ngImport: i0, type: ThumbnailComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'rolatech-thumbnail', imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #edge class=\"absolute top-0 left-0\"></div>\n@defer (on viewport(edge)) {\n  <a id=\"thumbnail\" class=\"rt-thumbnail\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative;--rt-thumbnail-padding-top: 56.25%}rolatech-thumbnail:before{display:block;content:\"\";width:100%;height:100%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}rolatech-thumbnail[mode=full]:before{padding-top:0}rolatech-thumbnail[ratio=square]:before{--rt-thumbnail-padding-top: 100%}rolatech-thumbnail[mode=clip]:before{padding-top:var(--rt-thumbnail-padding-top)}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail[mode=clip] #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}rolatech-thumbnail[mode=full] #thumbnail rolatech-image img{object-fit:contain;background-color:var(--rt-thumbnail-background-color)}rolatech-thumbnail #thumbnail rolatech-image img{background-color:var(--rt-thumbnail-background-color)}\n"] }]
+            }], ctorParameters: null, propDecorators: { hasClass: [{
+                    type: HostBinding,
+                    args: ['class.rt-rich-grid-media']
+                }], myColor: [{
+                    type: HostBinding,
+                    args: ['style.--rt-thumbnail-padding-top']
+                }] } }) });
+
+var thumbnail_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ThumbnailComponent: ThumbnailComponent
+});
+
+class ImageComponent {
+    hasId = 'rolatech-image';
+    hasClass = true;
+    src = input();
+    img = viewChild.required('img');
+    ngOnInit() {
+        const image = this.img().nativeElement;
+        image.onload = () => {
+            image.style.visibility = 'visible';
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: ImageComponent, isStandalone: true, selector: "rolatech-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rt-image": "this.hasClass" } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "<img #img class=\"rolatech-image bg-[--rt-base-background]\" [src]=\"src()\" style=\"visibility: hidden\" loading=\"lazy\" alt />\n", styles: [".rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-image', imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img #img class=\"rolatech-image bg-[--rt-base-background]\" [src]=\"src()\" style=\"visibility: hidden\" loading=\"lazy\" alt />\n", styles: [".rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover}\n"] }]
+        }], propDecorators: { hasId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rt-image']
+            }] } });
+
+var image_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ImageComponent: ImageComponent
+});
+
+class TabComponent {
+    hasId = 'tab';
+    hasClass = true;
+    label = input.required();
+    item = viewChild('content');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: TabComponent, isStandalone: true, selector: "rolatech-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.tab": "this.hasClass" } }, viewQueries: [{ propertyName: "item", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\" #content>\n  {{ label() }}\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-tab', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"content\" #content>\n  {{ label() }}\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"] }]
+        }], propDecorators: { hasId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.tab']
+            }] } });
+
+class TabsComponent {
+    ngAfterContentInit() {
+        // this.init();
+    }
+    renderer = inject(Renderer2);
+    tabs = contentChildren(TabComponent, { read: ElementRef });
+    selectionBar = viewChild.required('selectionBar', { read: ElementRef });
+    select = model(0);
+    loading = input(false);
+    preSelect = 0;
+    clientWidths = [];
+    _isServer = !inject(Platform).isBrowser;
+    ngOnInit() { }
+    ngAfterViewInit() {
+        this.init();
+    }
+    init() {
+        const gap = 24; // 24 = 2 * margin-left
+        this.tabs()[this.select()].nativeElement.setAttribute('style-target', 'host');
+        const selectionBarElement = this.selectionBar().nativeElement;
+        selectionBarElement.setAttribute('style-target', 'selection-bar');
+        // selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
+        setTimeout(() => {
+            selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
+        }, 10);
+        this.tabs().forEach((element, index) => {
+            this.clientWidths.push(element.nativeElement.clientWidth);
+            this.renderer.listen(element.nativeElement, 'click', () => {
+                this.select.set(index);
+                this.tabs()[this.preSelect].nativeElement.removeAttribute('style-target');
+                this.tabs()[index].nativeElement.setAttribute('style-target', 'host');
+                selectionBarElement.style.left = this.getOffset(index) + 'px';
+                selectionBarElement.style.width = element.nativeElement.clientWidth - gap + 'px';
+                this.preSelect = index;
+            });
+        });
+        selectionBarElement.style.left = this.getOffset(this.select()) + 'px';
+        selectionBarElement.style.width = this.clientWidths[this.select()] - gap + 'px';
+        this.preSelect = this.select();
+    }
+    getOffset(index) {
+        let offset = 0;
+        for (let i = 0; i < index; i++) {
+            offset += this.clientWidths[i];
+        }
+        return offset;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { attributes: { "ngSkipHydration": "" }, classAttribute: "rolatech-tabs" }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n  <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n    <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n    @for (tab of tabs(); track $index) {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-tabs', imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
+                        ngSkipHydration: '',
+                        class: 'rolatech-tabs',
+                    }, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n  <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n    <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n    @for (tab of tabs(); track $index) {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"] }]
+        }] });
+
+class ListComponent {
+    id = 'rolatech-list';
+    hasClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ListComponent, isStandalone: true, selector: "rolatech-list", host: { properties: { "id": "this.id", "class.rolatech-list": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-list{padding-left:var(--rt-list-padding-left, 0px);padding-right:var(--rt-list-padding-right, 0px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-list', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col\">\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-list{padding-left:var(--rt-list-padding-left, 0px);padding-right:var(--rt-list-padding-right, 0px)}\n"] }]
+        }], propDecorators: { id: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-list']
+            }] } });
+
+class ContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ContentComponent, isStandalone: true, selector: "rolatech-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["rolatech-content{padding-left:var(--rt-content-padding-left, 0px);padding-right:var(--rt-content-padding-right, 0px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-content', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["rolatech-content{padding-left:var(--rt-content-padding-left, 0px);padding-right:var(--rt-content-padding-right, 0px)}\n"] }]
+        }] });
+
+const CHEVRON_LEFT = `
+<svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            focusable="false"
+            style="pointer-events: none; display: inherit; width: 100%; height: 100%"
+          >
+            <path d="M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z"></path>
+          </svg>
+`;
+const CHEVRON_RIGHT = `
+  <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            focusable="false"
+            style="pointer-events: none; display: inherit; width: 100%; height: 100%"
+          >
+            <path d="m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z"></path>
+          </svg>
+`;
+class ChipBarComponent {
+    hasId = 'rolatech-chip-bar';
+    hasClass = true;
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    resizeObserver;
+    chips = viewChild('chips', { read: ElementRef });
+    scroller = viewChild.required('scroller', { read: ElementRef });
+    router = input('../courses/categories/');
+    items = input([]);
+    fluid = input(false, { transform: booleanAttribute });
+    fixed = input(false, { transform: booleanAttribute });
+    platformId = inject(PLATFORM_ID);
+    clientWidth = 0;
+    scrollWidth = 0;
+    scrollLeft = 0;
+    constructor(iconRegistry, sanitizer) {
+        iconRegistry.addSvgIconLiteral('chevron_left', sanitizer.bypassSecurityTrustHtml(CHEVRON_LEFT));
+        iconRegistry.addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT));
+        effect(() => {
+            if (this.fixed()) {
+                this.el.nativeElement.setAttribute('fixed', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('fixed');
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.clientWidth = this.el.nativeElement.clientWidth;
+        this.scrollWidth = this.scroller()?.nativeElement.scrollWidth;
+        this.el.nativeElement.setAttribute('at-start', '');
+        this.el.nativeElement.setAttribute('fluid-width', '');
+        if (isPlatformBrowser(this.platformId)) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    this.setCustomProperties(entry.contentRect.width);
+                    this.init();
+                }
+            });
+            this.resizeObserver.observe(this.el.nativeElement);
+        }
+    }
+    setCustomProperties(width) {
+        this.clientWidth = width;
+        this.el.nativeElement.style.setProperty('--rt-rich-grid-chips-bar-width', width + 'px');
+    }
+    init() {
+        // fix: this.scrollWidth 1365.11 ~ 1366, this.scrollWidth - 1
+        if (this.clientWidth + this.scrollLeft > this.scrollWidth - 1) {
+            this.el.nativeElement.setAttribute('at-end', '');
+        }
+        else {
+            this.el.nativeElement.removeAttribute('at-end', '');
+        }
+    }
+    onScroll(event) {
+        this.scrollLeft = event.target.scrollLeft;
+        this.init();
+        if (this.scrollLeft > 0) {
+            this.el.nativeElement.removeAttribute('at-start', '');
+        }
+        else {
+            this.el.nativeElement.setAttribute('at-start', '');
+        }
+    }
+    leftArrowClick() {
+        this.scroller().nativeElement.scrollLeft -= 320;
+    }
+    rightArrowClick() {
+        this.scroller().nativeElement.scrollLeft += 320;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ChipBarComponent, deps: [{ token: i2$1.MatIconRegistry }, { token: i2$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ChipBarComponent, isStandalone: true, selector: "rolatech-chip-bar", inputs: { router: { classPropertyName: "router", publicName: "router", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-chip-bar": "this.hasClass" } }, viewQueries: [{ propertyName: "chips", first: true, predicate: ["chips"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div id=\"chips-wrapper\" class=\"rolatech-chip-bar\">\n  <div id=\"chips-content\" class=\"rolatech-chip-bar\">\n    <div id=\"left-arrow\" class=\"rolatech-chip-bar\">\n      <div id=\"left-arrow-button\" class=\"rolatech-chip-bar\">\n        <button mat-icon-button (click)=\"leftArrowClick()\">\n          <mat-icon>chevron_left</mat-icon>\n          <!-- <mat-icon svgIcon=\"chevron_left\"></mat-icon> -->\n\n          <!-- <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            focusable=\"false\"\n            style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n          >\n            <path d=\"M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z\"></path>\n          </svg> -->\n        </button>\n      </div>\n    </div>\n    <div\n      id=\"scroll-container\"\n      #scroller\n      class=\"rolatech-chip-bar overflow-x-scroll overflow-y-hidden scrollbar-hide\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <div id=\"chips\" #chips class=\"rolatech-chip-bar inline-block\">\n        @for (link of items(); track link; let index = $index) {\n          <a\n            id=\"chip-item\"\n            class=\"rolatech-chip-bar h-8 cursor-pointer bg-[--rt-10-percent-layer] rounded-md inline-flex items-center px-3 m-3 ml-0\"\n            routerLinkActive=\"chip-bar-active\"\n            [routerLink]=\"[router(), link.link]\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"px-3 text-md\">{{ link.name }}</span>\n          </a>\n        }\n      </div>\n    </div>\n    <div id=\"right-arrow\" class=\"rolatech-chip-bar\">\n      <div id=\"right-arrow-button\" class=\"rolatech-chip-bar\">\n        <button mat-icon-button (click)=\"rightArrowClick()\">\n          <mat-icon>chevron_right</mat-icon>\n          <!-- <mat-icon svgIcon=\"chevron_right\"></mat-icon> -->\n\n          <!-- <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            focusable=\"false\"\n            style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n          >\n            <path d=\"m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z\"></path>\n          </svg> -->\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-chip-bar{--rt-chips-bar-base-height: 56px;display:flex;width:100%;padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000);height:var(--rt-chips-bar-base-height)}.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);color:var(--rt-chip-bar-active-color, orangered)}@media (max-width: 768px){.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);background-color:#000;color:#fff}}#scroll-container.rolatech-chip-bar{scroll-behavior:smooth;position:relative;white-space:nowrap}rolatech-chip-bar[fixed] #chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px)}#chips-wrapper.rolatech-chip-bar{position:relative;width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--rt-rich-grid-content-max-width) + 2 * var(--rt-chip-bar-padding));padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px)}#chips-content.rolatech-chip-bar{box-sizing:border-box;width:100%;display:flex}#chips.rolatech-chip-bar{transition-duration:.15s;transition-timing-function:cubic-bezier(.05,0,0,1);will-change:transform;white-space:nowrap}#left-arrow.rolatech-chip-bar,#right-arrow.rolatech-chip-bar{position:absolute;height:100%;z-index:2020;display:flex;flex-direction:row;justify-content:center}#left-arrow.rolatech-chip-bar{top:0;left:0}#right-arrow.rolatech-chip-bar{top:0;right:0}#left-arrow-button.rolatech-chip-bar,#right-arrow-button.rolatech-chip-bar{background-color:var(--rt-base-background);display:flex;flex-direction:column;justify-content:center}#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}rolatech-chip-bar[at-start] #left-arrow.rolatech-chip-bar{display:none}rolatech-chip-bar[at-end] #right-arrow.rolatech-chip-bar{display:none}#left-arrow.rolatech-chip-bar:after,#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}#left-arrow.rolatech-chip-bar:after{background:linear-gradient(to right,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#right-arrow.rolatech-chip-bar:before{background:linear-gradient(to left,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#chip-item.rolatech-chip-bar{margin:12px 12px 12px 0}#chip-item.rolatech-chip-bar:last-of-type{margin-right:0}#chip-item:not([selected]):hover,#chip-item:not([selected]):focus{background-color:var(--rt-20-percent-layer)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ChipBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-chip-bar', imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div id=\"chips-wrapper\" class=\"rolatech-chip-bar\">\n  <div id=\"chips-content\" class=\"rolatech-chip-bar\">\n    <div id=\"left-arrow\" class=\"rolatech-chip-bar\">\n      <div id=\"left-arrow-button\" class=\"rolatech-chip-bar\">\n        <button mat-icon-button (click)=\"leftArrowClick()\">\n          <mat-icon>chevron_left</mat-icon>\n          <!-- <mat-icon svgIcon=\"chevron_left\"></mat-icon> -->\n\n          <!-- <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            focusable=\"false\"\n            style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n          >\n            <path d=\"M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z\"></path>\n          </svg> -->\n        </button>\n      </div>\n    </div>\n    <div\n      id=\"scroll-container\"\n      #scroller\n      class=\"rolatech-chip-bar overflow-x-scroll overflow-y-hidden scrollbar-hide\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <div id=\"chips\" #chips class=\"rolatech-chip-bar inline-block\">\n        @for (link of items(); track link; let index = $index) {\n          <a\n            id=\"chip-item\"\n            class=\"rolatech-chip-bar h-8 cursor-pointer bg-[--rt-10-percent-layer] rounded-md inline-flex items-center px-3 m-3 ml-0\"\n            routerLinkActive=\"chip-bar-active\"\n            [routerLink]=\"[router(), link.link]\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"px-3 text-md\">{{ link.name }}</span>\n          </a>\n        }\n      </div>\n    </div>\n    <div id=\"right-arrow\" class=\"rolatech-chip-bar\">\n      <div id=\"right-arrow-button\" class=\"rolatech-chip-bar\">\n        <button mat-icon-button (click)=\"rightArrowClick()\">\n          <mat-icon>chevron_right</mat-icon>\n          <!-- <mat-icon svgIcon=\"chevron_right\"></mat-icon> -->\n\n          <!-- <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            focusable=\"false\"\n            style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n          >\n            <path d=\"m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z\"></path>\n          </svg> -->\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-chip-bar{--rt-chips-bar-base-height: 56px;display:flex;width:100%;padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000);height:var(--rt-chips-bar-base-height)}.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);color:var(--rt-chip-bar-active-color, orangered)}@media (max-width: 768px){.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);background-color:#000;color:#fff}}#scroll-container.rolatech-chip-bar{scroll-behavior:smooth;position:relative;white-space:nowrap}rolatech-chip-bar[fixed] #chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px)}#chips-wrapper.rolatech-chip-bar{position:relative;width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--rt-rich-grid-content-max-width) + 2 * var(--rt-chip-bar-padding));padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px)}#chips-content.rolatech-chip-bar{box-sizing:border-box;width:100%;display:flex}#chips.rolatech-chip-bar{transition-duration:.15s;transition-timing-function:cubic-bezier(.05,0,0,1);will-change:transform;white-space:nowrap}#left-arrow.rolatech-chip-bar,#right-arrow.rolatech-chip-bar{position:absolute;height:100%;z-index:2020;display:flex;flex-direction:row;justify-content:center}#left-arrow.rolatech-chip-bar{top:0;left:0}#right-arrow.rolatech-chip-bar{top:0;right:0}#left-arrow-button.rolatech-chip-bar,#right-arrow-button.rolatech-chip-bar{background-color:var(--rt-base-background);display:flex;flex-direction:column;justify-content:center}#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}rolatech-chip-bar[at-start] #left-arrow.rolatech-chip-bar{display:none}rolatech-chip-bar[at-end] #right-arrow.rolatech-chip-bar{display:none}#left-arrow.rolatech-chip-bar:after,#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}#left-arrow.rolatech-chip-bar:after{background:linear-gradient(to right,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#right-arrow.rolatech-chip-bar:before{background:linear-gradient(to left,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#chip-item.rolatech-chip-bar{margin:12px 12px 12px 0}#chip-item.rolatech-chip-bar:last-of-type{margin-right:0}#chip-item:not([selected]):hover,#chip-item:not([selected]):focus{background-color:var(--rt-20-percent-layer)}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.MatIconRegistry }, { type: i2$4.DomSanitizer }], propDecorators: { hasId: [{
+                type: HostBinding,
+                args: ['id']
+            }], hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-chip-bar']
+            }] } });
+
+class AvatarComponent {
+    hasClass = true;
+    src = input();
+    size = input.required();
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    sizea = effect(() => {
+        this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AvatarComponent, isStandalone: true, selector: "rolatech-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.rt-rich-grid-media": "this.hasClass" } }, ngImport: i0, template: "@defer (on viewport()) {\n  <a id=\"avatar\" class=\"rt-avatar\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-10-percent-layer] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-avatar{display:block;width:100%;position:relative}rolatech-avatar:before{display:block;content:\"\";width:100%;padding-top:100%;background-color:var(--rt-10-percent-layer, #f1f1f1)}rolatech-avatar #avatar.rt-avatar{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-avatar #avatar.rt-avatar{position:absolute;inset:0}rolatech-avatar a.rt-avatar,rolatech-avatar:before{border-radius:0}rolatech-avatar[size=small] a.rt-avatar,rolatech-avatar[size=small]:before{border-radius:4px}rolatech-avatar[size=medium] a.rt-avatar,rolatech-avatar[size=medium]:before{border-radius:8px}rolatech-avatar[size=large] a.rt-avatar,rolatech-avatar[size=large]:before{border-radius:12px}rolatech-avatar[size=full] a.rt-avatar,rolatech-avatar[size=full]:before{border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.0.3", ngImport: i0, type: AvatarComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'rolatech-avatar', imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, template: "@defer (on viewport()) {\n  <a id=\"avatar\" class=\"rt-avatar\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-10-percent-layer] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-avatar{display:block;width:100%;position:relative}rolatech-avatar:before{display:block;content:\"\";width:100%;padding-top:100%;background-color:var(--rt-10-percent-layer, #f1f1f1)}rolatech-avatar #avatar.rt-avatar{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-avatar #avatar.rt-avatar{position:absolute;inset:0}rolatech-avatar a.rt-avatar,rolatech-avatar:before{border-radius:0}rolatech-avatar[size=small] a.rt-avatar,rolatech-avatar[size=small]:before{border-radius:4px}rolatech-avatar[size=medium] a.rt-avatar,rolatech-avatar[size=medium]:before{border-radius:8px}rolatech-avatar[size=large] a.rt-avatar,rolatech-avatar[size=large]:before{border-radius:12px}rolatech-avatar[size=full] a.rt-avatar,rolatech-avatar[size=full]:before{border-radius:50%}\n"] }]
+            }], ctorParameters: null, propDecorators: { hasClass: [{
+                    type: HostBinding,
+                    args: ['class.rt-rich-grid-media']
+                }] } }) });
+
+class ImagePlaceholderComponent {
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ImagePlaceholderComponent, isStandalone: true, selector: "rolatech-image-placeholder", ngImport: i0, template: "<div class=\"w-full h-full flex justify-center items-center\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n    <path\n      d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"\n    />\n  </svg>\n</div>\n", styles: ["rolatech-image-placeholder{display:block;aspect-ratio:16/9;background-color:var(--rt-10-percent-layer);border-radius:var(--rt-rounded-base, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ImagePlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-image-placeholder', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full flex justify-center items-center\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n    <path\n      d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"\n    />\n  </svg>\n</div>\n", styles: ["rolatech-image-placeholder{display:block;aspect-ratio:16/9;background-color:var(--rt-10-percent-layer);border-radius:var(--rt-rounded-base, 8px)}\n"] }]
+        }] });
+
+class ImagePreviewDialogComponent {
+    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: "19.0.3", ngImport: i0, type: ImagePreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ImagePreviewDialogComponent, isStandalone: true, selector: "rolatech-image-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 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\" alt />\n    </div>\n  </div>\n  <div class=\"flex-1\"></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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ImagePreviewDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-image-preview-dialog', imports: [MatIconModule, MatDividerModule, MatButtonModule], encapsulation: ViewEncapsulation.None, 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 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\" alt />\n    </div>\n  </div>\n  <div class=\"flex-1\"></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.MatDialogRef }] });
+
+class EmptyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: EmptyComponent, isStandalone: true, selector: "rolatech-empty", ngImport: i0, template: "<div class=\"px-4 py-2 flex items-center\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n    <path\n      d=\"M460-300h40v-220h-40v220Zm20-276.92q10.46 0 17.54-7.08 7.08-7.08 7.08-17.54 0-10.46-7.08-17.54-7.08-7.07-17.54-7.07-10.46 0-17.54 7.07-7.08 7.08-7.08 17.54 0 10.46 7.08 17.54 7.08 7.08 17.54 7.08Zm.13 456.92q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"\n    />\n  </svg>\n  <span class=\"ml-2\">No Data</span>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EmptyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-empty', imports: [CommonModule], template: "<div class=\"px-4 py-2 flex items-center\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n    <path\n      d=\"M460-300h40v-220h-40v220Zm20-276.92q10.46 0 17.54-7.08 7.08-7.08 7.08-17.54 0-10.46-7.08-17.54-7.08-7.07-17.54-7.07-10.46 0-17.54 7.07-7.08 7.08-7.08 17.54 0 10.46 7.08 17.54 7.08 7.08 17.54 7.08Zm.13 456.92q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"\n    />\n  </svg>\n  <span class=\"ml-2\">No Data</span>\n</div>\n" }]
+        }] });
+
+class InputComponent {
+    title = model();
+    placeholder = input('Title');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: InputComponent, isStandalone: true, selector: "rolatech-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange" }, ngImport: i0, template: "<div class=\"rt-input-wrapper\">\n  <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100%;padding:8px}.rt-input-wrapper{width:100%;z-index:0;padding:12px;background-color:var(--rt-additive-background, #fff);border-radius:var(--rt-input-rounded, 8px);border:1px solid var(--rt-brand-color)}.rt__input{box-shadow:none;background:none;border-radius:0;width:100%;min-width:0;border:none;display:block}.rt__input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-input', imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"rt-input-wrapper\">\n  <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100%;padding:8px}.rt-input-wrapper{width:100%;z-index:0;padding:12px;background-color:var(--rt-additive-background, #fff);border-radius:var(--rt-input-rounded, 8px);border:1px solid var(--rt-brand-color)}.rt__input{box-shadow:none;background:none;border-radius:0;width:100%;min-width:0;border:none;display:block}.rt__input:focus-visible{outline:none}\n"] }]
+        }] });
+
+class RichItemComponent {
+    hasClass = true;
+    list = input(false, { transform: booleanAttribute });
+    thumbnail = input();
+    avatar = input();
+    title = input();
+    subtitle = input();
+    price = input(0);
+    thumbnailRatio = input('rectangle');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, thumbnailRatio: { classPropertyName: "thumbnailRatio", publicName: "thumbnailRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n  @defer (on viewport()) {\n    <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" [ratio]=\"thumbnailRatio()\"></rolatech-thumbnail>\n  } @placeholder {\n    <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n  }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n  <div>\n    <div class=\"py-1\">\n      <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n        {{ title() }}\n      </a>\n    </div>\n    <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n      {{ subtitle() }}\n    </div>\n    <ng-content></ng-content>\n  </div>\n  @if (price()) {\n    <div class=\"md:text-lg font-bold py-1\">\u00A5{{ price() }}</div>\n  }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.0.3", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'rolatech-rich-item', imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n  @defer (on viewport()) {\n    <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" [ratio]=\"thumbnailRatio()\"></rolatech-thumbnail>\n  } @placeholder {\n    <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n  }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n  <div>\n    <div class=\"py-1\">\n      <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n        {{ title() }}\n      </a>\n    </div>\n    <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n      {{ subtitle() }}\n    </div>\n    <ng-content></ng-content>\n  </div>\n  @if (price()) {\n    <div class=\"md:text-lg font-bold py-1\">\u00A5{{ price() }}</div>\n  }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
+            }], ctorParameters: null, propDecorators: { hasClass: [{
+                    type: HostBinding,
+                    args: ['class.rolatech-rich-item']
+                }] } }) });
+
+class RichViewComponent {
+    hasClass = true;
+    disableScrollbar = true;
+    platformId = inject(PLATFORM_ID);
+    el = inject(ElementRef);
+    items = contentChildren(RichItemComponent, { read: ElementRef });
+    list = input(false, { transform: booleanAttribute });
+    wrap = input(false, { transform: booleanAttribute });
+    resizeObserver;
+    constructor() {
+        effect(() => {
+            if (this.list()) {
+                this.el.nativeElement.setAttribute('list', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('list', '');
+            }
+            if (this.wrap()) {
+                this.el.nativeElement.setAttribute('wrap', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('wrap', '');
+            }
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    // this.setCustomProperties(entry.contentRect.width);
+                }
+            });
+            this.resizeObserver.observe(this.el.nativeElement);
+        }
+    }
+    ngAfterViewInit() { }
+    setCustomProperties(width) {
+        if (width <= 600) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 1);
+        }
+        if (600 < width && width <= 768) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 2);
+        }
+        if (768 < width && width <= 1280) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 3);
+        }
+        if (1280 < width && width <= 1536) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 4);
+        }
+        if (width > 1536) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 5);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: RichViewComponent, isStandalone: true, selector: "rolatech-rich-view", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-view": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, queries: [{ propertyName: "items", predicate: RichItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n  <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n  <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap;--rt-rich-view-items-per-row: 2}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.rich-view-button{position:absolute;bottom:-44px;left:50%;transform:translate(-50%,-50%);background-color:var(--yt-spec-base-background);z-index:1;width:360px;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RichViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-rich-view', imports: [CommonModule, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n  <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n  <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap;--rt-rich-view-items-per-row: 2}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.rich-view-button{position:absolute;bottom:-44px;left:50%;transform:translate(-50%,-50%);background-color:var(--yt-spec-base-background);z-index:1;width:360px;max-width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-rich-view']
+            }], disableScrollbar: [{
+                type: HostBinding,
+                args: ['class.scrollbar-hide']
+            }] } });
+
+class EditorComponent {
+    platformId = inject(PLATFORM_ID);
+    isBrowser;
+    editor;
+    constructor() {
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        // const options = {
+        //   debug: 'info',
+        //   modules: {
+        //     toolbar: true,
+        //   },
+        //   placeholder: 'Compose an epic...',
+        //   theme: 'snow',
+        // };
+        // const quill = new Quill('#editor', options);
+    }
+    ngAfterViewInit() {
+        this.quill();
+    }
+    ngOnInit() {
+        // this.quill();
+    }
+    get toolbar() {
+        return [
+            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+            ['blockquote', 'code-block'],
+            // [{ header: 1 }, { header: 2 }], // custom button values
+            [{ list: 'ordered' }, { list: 'bullet' }],
+            [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+            [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+            [{ direction: 'rtl' }], // text direction
+            // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+            [{ header: [1, 2, 3, 4, 5, 6, false] }],
+            // [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+            [{ font: [] }],
+            [{ align: [] }],
+            ['clean'], // remove formatting button
+        ];
+    }
+    async quill() {
+        if (this.isBrowser) {
+            const m = await import('quill');
+            this.editor = new m.default('#editor', {
+                // modules: { toolbar: '#toolbar' },
+                modules: { toolbar: this.toolbar },
+                theme: 'snow',
+                placeholder: 'placeholder',
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: EditorComponent, isStandalone: true, selector: "rolatech-editor", ngImport: i0, template: "<div id=\"editor\"></div>\n", styles: ["@import\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\";.ql-snow{position:relative}.ql-snow .ql-toolbar{position:sticky;top:5em}.ql-snow button{width:inherit!important;height:24px!important}.ql-snow .ql-editor{border:4px solid #efefef}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-editor', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div id=\"editor\"></div>\n", styles: ["@import\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\";.ql-snow{position:relative}.ql-snow .ql-toolbar{position:sticky;top:5em}.ql-snow button{width:inherit!important;height:24px!important}.ql-snow .ql-editor{border:4px solid #efefef}\n"] }]
+        }], ctorParameters: () => [] });
+
+class AccordionComponent {
+    hasClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AccordionComponent, isStandalone: true, selector: "rolatech-accordion", host: { properties: { "class.rolatech-accordion": "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: "19.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-accordion', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-accordion']
+            }] } });
+
+const PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
+const panelAnimations = {
+    /** Animation that rotates the indicator arrow. */
+    indicator: trigger('indicator', [
+        state('collapsed, void', style({ transform: 'rotate(0deg)' })),
+        state('expanded', style({ transform: 'rotate(180deg)' })),
+        transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING)),
+    ]),
+    /** Animation that expands and collapses the panel content. */
+    content: trigger('content', [
+        state('collapsed, void', style({ height: '0px', visibility: 'hidden' })),
+        state('expanded', style({ height: '*', visibility: 'visible' })),
+        transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING)),
+    ]),
+};
+
+class PanelComponent {
+    hasClass = true;
+    border = input(false, { transform: booleanAttribute });
+    divider = input(false, { transform: booleanAttribute });
+    expanded = model(false);
+    title = input();
+    subtitle = input();
+    el = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            if (this.expanded()) {
+                this.el.nativeElement.setAttribute('expanded', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('expanded');
+            }
+            if (this.border()) {
+                this.el.nativeElement.setAttribute('border', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('border');
+            }
+            if (this.divider()) {
+                this.el.nativeElement.setAttribute('divider', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('divider');
+            }
+        });
+    }
+    ngOnInit() { }
+    ngAfterViewInit() { }
+    toggle() {
+        this.expanded.set(!this.expanded());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: PanelComponent, isStandalone: true, selector: "rolatech-panel", inputs: { border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.rolatech-panel": "this.hasClass" } }, ngImport: i0, template: "<div id=\"header\" class=\"header rolatech-panel w-full h-11\" (click)=\"toggle(); $event.stopPropagation()\">\n  <ng-content select=\"rolatech-panel-header\"></ng-content>\n  <div>{{ title() }}</div>\n  <rolatech-icon [@indicator]=\"expanded() === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n</div>\n<div class=\"content-container rolatech-panel\" [@content]=\"expanded() === true ? 'expanded' : 'collapsed'\">\n  <div class=\"content-inner rolatech-panel\">\n    <ng-content>No content</ng-content>\n  </div>\n</div>\n", styles: ["rolatech-panel{box-sizing:content-box;display:block;overflow:hidden;background:var(--rt-base-background);color:var(--rt-text-primary);--rt-panel-padding: 12px}rolatech-panel:not([border]){margin-bottom:var(--rt-panel-padding)}rolatech-panel .header{padding:var(--rt-panel-padding);display:flex;justify-content:space-between;align-items:center;height:44px;background-color:var(--rt-10-percent-layer);cursor:pointer}rolatech-panel .header:hover{background-color:var(--rt-20-percent-layer)}rolatech-panel .content-container{overflow:visible}rolatech-panel .content-container .content-inner{padding:var(--rt-panel-padding)}rolatech-panel[border]{border-top:1px solid #d1d7dc;border-left:1px solid #d1d7dc;border-right:1px solid #d1d7dc}rolatech-panel[border]:last-child{border-bottom:1px solid #d1d7dc}rolatech-panel[divider]{border-bottom:1px solid #d1d7dc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }], animations: [panelAnimations.indicator, panelAnimations.content], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-panel', imports: [CommonModule, IconComponent], encapsulation: ViewEncapsulation.None, animations: [panelAnimations.indicator, panelAnimations.content], template: "<div id=\"header\" class=\"header rolatech-panel w-full h-11\" (click)=\"toggle(); $event.stopPropagation()\">\n  <ng-content select=\"rolatech-panel-header\"></ng-content>\n  <div>{{ title() }}</div>\n  <rolatech-icon [@indicator]=\"expanded() === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n</div>\n<div class=\"content-container rolatech-panel\" [@content]=\"expanded() === true ? 'expanded' : 'collapsed'\">\n  <div class=\"content-inner rolatech-panel\">\n    <ng-content>No content</ng-content>\n  </div>\n</div>\n", styles: ["rolatech-panel{box-sizing:content-box;display:block;overflow:hidden;background:var(--rt-base-background);color:var(--rt-text-primary);--rt-panel-padding: 12px}rolatech-panel:not([border]){margin-bottom:var(--rt-panel-padding)}rolatech-panel .header{padding:var(--rt-panel-padding);display:flex;justify-content:space-between;align-items:center;height:44px;background-color:var(--rt-10-percent-layer);cursor:pointer}rolatech-panel .header:hover{background-color:var(--rt-20-percent-layer)}rolatech-panel .content-container{overflow:visible}rolatech-panel .content-container .content-inner{padding:var(--rt-panel-padding)}rolatech-panel[border]{border-top:1px solid #d1d7dc;border-left:1px solid #d1d7dc;border-right:1px solid #d1d7dc}rolatech-panel[border]:last-child{border-bottom:1px solid #d1d7dc}rolatech-panel[divider]{border-bottom:1px solid #d1d7dc}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-panel']
+            }] } });
+
+class PanelHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: PanelHeaderComponent, isStandalone: true, selector: "rolatech-panel-header", 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: "19.0.3", ngImport: i0, type: PanelHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-panel-header', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APP_LAYOUT, AccordionComponent, AngularComponentsModule, AppPageComponent, AvatarComponent, BaseComponent, ChipBarComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, DrawerComponent, EditorComponent, EmptyComponent, FilterComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, RichItemComponent, RichViewComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
+//# sourceMappingURL=rolatech-angular-components.mjs.map