@rolatech/angular-components 19.0.0-beta.9 → 20.0.0-beta.1

package/fesm2022/rolatech-angular-components.mjs

@@ -1,26 +1,34 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, ElementRef, effect, HostBinding, ViewEncapsulation, Component, InjectionToken, makeEnvironmentProviders, Renderer2, PLATFORM_ID, viewChild, ChangeDetectionStrategy, contentChild, computed, Inject, NgModule, ChangeDetectorRef, output, model, HostListener, contentChildren } from '@angular/core';
-import * as i1$5 from '@angular/common';
+import { inject, Component, input, Renderer2, ViewChild, Inject, booleanAttribute, ElementRef, effect, HostBinding, ViewEncapsulation, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, viewChild, ChangeDetectionStrategy, contentChild, computed, NgModule, ChangeDetectorRef, output, model, HostListener, contentChildren } from '@angular/core';
+import * as i1$6 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
-import * as i2$1 from '@angular/material/icon';
+import * as i2$5 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogTitle, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2$2 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i1$3 from '@angular/router';
+import * as i1$4 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, transition, style, 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 * as i2$1 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';
@@ -29,6 +37,7 @@ 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 * as i3$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
@@ -37,27 +46,24 @@ 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 { MatNativeDateModule, MatRippleModule, MatOptionModule } 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 i1$3 from '@angular/material/progress-bar';
+import { MatProgressBarModule, MatProgressBar } 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 * as i2$4 from '@angular/material/select';
 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 * as i1$5 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -65,12 +71,147 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import * as i2$3 from '@rolatech/angular-services';
 import { LoadingService, DialogService, SnackBarService, TitleService, 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 } from '@angular/platform-browser';
 import { map as map$1 } from 'lodash';
 
+class PdfViewerComponent {
+    sanitizer = inject(DomSanitizer);
+    safeUrl;
+    // url = input.required<string>();
+    url = 'https://rolatech.s3.ap-northeast-1.amazonaws.com/agent-applications/ea9d463009074d649562423492af05f0.pdf';
+    constructor() {
+        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PdfViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: PdfViewerComponent, isStandalone: true, selector: "rolatech-pdf-viewer", ngImport: i0, template: "<iframe [src]=\"safeUrl\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PdfViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-pdf-viewer', imports: [CommonModule], template: "<iframe [src]=\"safeUrl\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>\n" }]
+        }], ctorParameters: () => [] });
+
+class RichLabelComponent {
+    label = input.required();
+    title = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: RichLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: RichLabelComponent, isStandalone: true, selector: "rolatech-rich-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col justify-center h-11\">\n  <div class=\"text-sm opacity-80\" i18n>{{ label() }}</div>\n  <div>{{ title() }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: RichLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-rich-label', imports: [CommonModule], template: "<div class=\"flex flex-col justify-center h-11\">\n  <div class=\"text-sm opacity-80\" i18n>{{ label() }}</div>\n  <div>{{ title() }}</div>\n</div>\n" }]
+        }] });
+
+class ResizableContainerComponent {
+    renderer = inject(Renderer2);
+    leftDiv;
+    rightDiv;
+    divider;
+    isResizing = false;
+    startResizing(event) {
+        event.preventDefault();
+        this.isResizing = true;
+        this.renderer.listen('document', 'mousemove', (e) => this.onResizing(e));
+        this.renderer.listen('document', 'mouseup', () => this.stopResizing());
+    }
+    onResizing(event) {
+        if (!this.isResizing)
+            return;
+        const containerRect = this.leftDiv.nativeElement.parentElement.getBoundingClientRect();
+        const newLeftWidth = event.clientX - containerRect.left;
+        const newRightWidth = containerRect.right - event.clientX;
+        if (newLeftWidth > 100 && newRightWidth > 100) {
+            this.renderer.setStyle(this.leftDiv.nativeElement, 'width', `${newLeftWidth}px`);
+            this.renderer.setStyle(this.rightDiv.nativeElement, 'width', `${newRightWidth}px`);
+        }
+    }
+    stopResizing() {
+        this.isResizing = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ResizableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ResizableContainerComponent, isStandalone: true, selector: "rolatech-resizable-container", viewQueries: [{ propertyName: "leftDiv", first: true, predicate: ["leftDiv"], descendants: true }, { propertyName: "rightDiv", first: true, predicate: ["rightDiv"], descendants: true }, { propertyName: "divider", first: true, predicate: ["divider"], descendants: true }], ngImport: i0, template: "<div class=\"flex w-full p-3\">\n  <div class=\"w-2/6 px-1\" #leftDiv>\n    <ng-content select=\"[position='left']\"></ng-content>\n  </div>\n  <div class=\"divider\" #divider (mousedown)=\"startResizing($event)\"></div>\n  <div class=\"w-4/6 px-1\" #rightDiv>\n    <ng-content select=\"[position='right']\"></ng-content>\n  </div>\n</div>\n", styles: [".resizable-container{display:flex;width:100%;height:100vh}.left,.right{flex-grow:1;padding:20px;overflow:auto}.left{background:#f4f4f4;width:50%}.right{background:#e0e0e0;width:50%}.divider{width:5px;cursor:ew-resize;background:#666}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ResizableContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-resizable-container', imports: [CommonModule], template: "<div class=\"flex w-full p-3\">\n  <div class=\"w-2/6 px-1\" #leftDiv>\n    <ng-content select=\"[position='left']\"></ng-content>\n  </div>\n  <div class=\"divider\" #divider (mousedown)=\"startResizing($event)\"></div>\n  <div class=\"w-4/6 px-1\" #rightDiv>\n    <ng-content select=\"[position='right']\"></ng-content>\n  </div>\n</div>\n", styles: [".resizable-container{display:flex;width:100%;height:100vh}.left,.right{flex-grow:1;padding:20px;overflow:auto}.left{background:#f4f4f4;width:50%}.right{background:#e0e0e0;width:50%}.divider{width:5px;cursor:ew-resize;background:#666}\n"] }]
+        }], propDecorators: { leftDiv: [{
+                type: ViewChild,
+                args: ['leftDiv']
+            }], rightDiv: [{
+                type: ViewChild,
+                args: ['rightDiv']
+            }], divider: [{
+                type: ViewChild,
+                args: ['divider']
+            }] } });
+
+class RichGridMediaComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: RichGridMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: RichGridMediaComponent, isStandalone: true, selector: "rolatech-rich-grid-media", ngImport: i0, template: "<p>rich-grid-media works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: RichGridMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-rich-grid-media', imports: [CommonModule], template: "<p>rich-grid-media works!</p>\n" }]
+        }] });
+
+class RejectDialogComponent {
+    formBuilder;
+    dialogRef;
+    data;
+    rejectForm;
+    constructor(formBuilder, dialogRef, data) {
+        this.formBuilder = formBuilder;
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    ngOnInit() {
+        this.rejectForm = this.formBuilder.group({
+            content: [null, Validators.required],
+        });
+        this.rejectForm.setValue(this.data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: RejectDialogComponent, deps: [{ token: i1.FormBuilder }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: RejectDialogComponent, isStandalone: true, selector: "rolatech-reject-dialog", ngImport: i0, template: "<mat-dialog-content>\n  <form [formGroup]=\"rejectForm\">\n    <div class=\"py-2\">\n      <h2 class=\"mb-2\" i18n>Reject reason</h2>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Reason </mat-label>\n        <textarea matInput formControlName=\"content\" required></textarea>\n      </mat-form-field>\n    </div>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close i18n>Cancel</button>\n  <button mat-flat-button [mat-dialog-close]=\"rejectForm.value\" cdkFocusInitial i18n>Confirm</button>\n</mat-dialog-actions>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "20.0.3", ngImport: i0, type: RejectDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-reject-dialog', imports: [
+                        MatDialogContent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDialogActions,
+                        MatButtonModule,
+                        MatDialogClose,
+                    ], template: "<mat-dialog-content>\n  <form [formGroup]=\"rejectForm\">\n    <div class=\"py-2\">\n      <h2 class=\"mb-2\" i18n>Reject reason</h2>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Reason </mat-label>\n        <textarea matInput formControlName=\"content\" required></textarea>\n      </mat-form-field>\n    </div>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close i18n>Cancel</button>\n  <button mat-flat-button [mat-dialog-close]=\"rejectForm.value\" cdkFocusInitial i18n>Confirm</button>\n</mat-dialog-actions>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class AcceptDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AcceptDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AcceptDialogComponent, isStandalone: true, selector: "rolatech-accept-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 i18n>Cancel</button>\n  <button mat-flat-button [mat-dialog-close]=\"true\" cdkFocusInitial i18n>Confirm</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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "20.0.3", ngImport: i0, type: AcceptDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-accept-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 i18n>Cancel</button>\n  <button mat-flat-button [mat-dialog-close]=\"true\" cdkFocusInitial i18n>Confirm</button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 class IconComponent {
     hasClass = true;
     filled = input(false, { transform: booleanAttribute });
@@ -85,10 +226,10 @@ class IconComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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.2.2", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -98,10 +239,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 
 class IconButtonComponent {
     hasClass = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: IconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -114,10 +255,10 @@ class TitleComponent {
     title = input();
     subtitle = input();
     large = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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.2.2", ngImport: i0, type: TitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -128,10 +269,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 class ContainerComponent {
     hasId = 'rolatech-container';
     hasClass = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: ContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -155,10 +296,10 @@ function provideAngularLayout(config) {
 
 class MenuIconComponent {
     hasClass = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: MenuIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -192,10 +333,10 @@ class TopbarComponent {
         }
         this.appDrawer.toggle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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.2.2", ngImport: i0, type: TopbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -321,17 +462,17 @@ class DrawerComponent {
             this._enableAnimations = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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]\" i18n>{{ appLayout.title }}</span>\n          <span i18n>{{ 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\" i18n>{{ 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\" i18n>{{ 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]\" i18n>{{ 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 i18n>{{ item.title }}</span>\n                          <span class=\"text-sm\" i18n>{{ 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 i18n>{{ item.title }}</span>\n                          <span class=\"text-sm text-[--rt-text-secondary]\" i18n>{{ 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.2.2", ngImport: i0, type: DrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+                    }, 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]\" i18n>{{ appLayout.title }}</span>\n          <span i18n>{{ 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\" i18n>{{ 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\" i18n>{{ 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]\" i18n>{{ 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 i18n>{{ item.title }}</span>\n                          <span class=\"text-sm\" i18n>{{ 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 i18n>{{ item.title }}</span>\n                          <span class=\"text-sm text-[--rt-text-secondary]\" i18n>{{ 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 {
@@ -393,10 +534,10 @@ class MiniGuideComponent {
             this.open();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MiniGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MiniGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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.2.2", ngImport: i0, type: MiniGuideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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',
@@ -409,10 +550,10 @@ class AppPageComponent {
     constructor() { }
     ngOnInit() { }
     ngAfterContentInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: AppPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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',
@@ -483,16 +624,16 @@ class LayoutComponent {
             this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.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:100vh;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.2.2", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+                    }, 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:100vh;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 {
@@ -503,10 +644,10 @@ class FooterComponent {
     copyright = input('');
     fTitle = computed(() => this.title() || this.config.name);
     fCopyright = computed(() => this.copyright() || this.config.name);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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\">{{ fTitle() }}</a>\n    </div>\n    <span class=\"text-sm\">\u00A9{{ fCopyright() }}</span>\n  </div>\n</div>\n", styles: [".rolatech-footer{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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\">{{ fTitle() }}</a>\n    </div>\n    <span class=\"text-sm\">\u00A9{{ fCopyright() }}</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.2.2", ngImport: i0, type: FooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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\">{{ fTitle() }}</a>\n    </div>\n    <span class=\"text-sm\">\u00A9{{ fCopyright() }}</span>\n  </div>\n</div>\n", styles: [".rolatech-footer{width:100%}\n"] }]
         }], propDecorators: { hostId: [{
@@ -518,10 +659,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class ConsoleLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ConsoleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ConsoleLayoutComponent, isStandalone: true, selector: "rolatech-console-layout", ngImport: i0, template: "<p>console-layout works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConsoleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: ConsoleLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConsoleLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-console-layout', imports: [CommonModule], template: "<p>console-layout works!</p>\n" }]
         }] });
@@ -534,19 +675,19 @@ class TopbarAvatarMenuComponent {
     openMenu() {
         this.menu().focusFirstItem('mouse');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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    (click)=\"openMenu()\"\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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    (click)=\"openMenu()\"\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$1.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.2.2", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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    (click)=\"openMenu()\"\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.2.2", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: FolderComponent, isStandalone: true, selector: "rolatech-folder", ngImport: i0, template: "<div></div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: FolderComponent, isStandalone: true, selector: "rolatech-folder", ngImport: i0, template: "<div></div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FolderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FolderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-folder', template: "<div></div>\n" }]
         }] });
@@ -561,7 +702,7 @@ class MediaPreviewDialogComponent {
     constructor(data, dialogRef) {
         this.data = data;
         this.dialogRef = dialogRef;
-        this.data.title = '图片预览';
+        this.data.title = 'Preview';
     }
     ngOnInit() {
         this.selected = this.data.selected;
@@ -581,16 +722,16 @@ class MediaPreviewDialogComponent {
         this.prevDisabled = this.selected === 0;
         this.nextDisabled = this.selected === this.data.media.length - 1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MediaPreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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$2.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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MediaPreviewDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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 }] });
+                }] }, { type: i1$1.MatDialogRef }] });
 
 const MAT_MODULE = [
     A11yModule,
@@ -640,8 +781,8 @@ const MAT_MODULE = [
     ScrollingModule,
 ];
 class MaterialModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MaterialModule, imports: [A11yModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: MaterialModule, imports: [A11yModule,
             ClipboardModule,
             CdkStepperModule,
             CdkTableModule,
@@ -730,7 +871,7 @@ class MaterialModule {
             MatTreeModule,
             PortalModule,
             ScrollingModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MaterialModule, imports: [MAT_MODULE, A11yModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MaterialModule, imports: [MAT_MODULE, A11yModule,
             ClipboardModule,
             CdkStepperModule,
             CdkTableModule,
@@ -776,7 +917,7 @@ class MaterialModule {
             PortalModule,
             ScrollingModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MaterialModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MAT_MODULE],
@@ -785,11 +926,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
         }] });
 
 class AngularComponentsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule], exports: [MaterialModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule, MaterialModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule], exports: [MaterialModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule, MaterialModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AngularComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MaterialModule],
@@ -816,10 +957,10 @@ class SpinnerComponent {
         if (this.loadingSubscription)
             this.loadingSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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.2.2", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
         }] });
@@ -866,12 +1007,12 @@ class MediaUploadComponent {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 (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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 (click)=\"fileInput.click()\" i18n>Upload</button>\n      </div>\n    </div>\n  } @else {\n    <rolatech-spinner title=\"Uploading\"></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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.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.2.2", ngImport: i0, type: MediaUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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 (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"] }]
+            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 (click)=\"fileInput.click()\" i18n>Upload</button>\n      </div>\n    </div>\n  } @else {\n    <rolatech-spinner title=\"Uploading\"></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 {
@@ -881,12 +1022,12 @@ class StorageBucketCreateComponent {
     ngDoCheck() {
         this.output.emit(this.name());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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 i18n>Name</mat-label>\n    <input matInput placeholder=\"Enter name\" [(ngModel)]=\"name\" i18n-placeholder />\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            args: [{ selector: 'rolatech-storage-bucket-create', imports: [MatFormFieldModule, MatInputModule, FormsModule], template: "<div>\n  <mat-form-field>\n    <mat-label i18n>Name</mat-label>\n    <input matInput placeholder=\"Enter name\" [(ngModel)]=\"name\" i18n-placeholder />\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 class StorageFileUploadComponent {
@@ -912,10 +1053,10 @@ class StorageFileUploadComponent {
     removeFile() {
         this.file = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
         }] });
@@ -928,18 +1069,20 @@ class StorageFolderCreateComponent {
     ngDoCheck() {
         this.output.emit({ name: this.name(), isPublic: this.isPublic() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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 i18n>Name</mat-label>\n    <input matInput placeholder=\"Name\" [(ngModel)]=\"name\" i18n />\n  </mat-form-field>\n  <div class=\"flex flex-col\">\n    <mat-checkbox [(ngModel)]=\"isPublic\" i18n>Public resources</mat-checkbox>\n    <span class=\"text-sm text-[--rt-text-secondary] ml-2 mt-1\" i18n>\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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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.2.2", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            args: [{ selector: 'rolatech-storage-folder-create', imports: [MatFormFieldModule, MatInputModule, FormsModule, MatCheckboxModule], template: "<div>\n  <mat-form-field>\n    <mat-label i18n>Name</mat-label>\n    <input matInput placeholder=\"Name\" [(ngModel)]=\"name\" i18n />\n  </mat-form-field>\n  <div class=\"flex flex-col\">\n    <mat-checkbox [(ngModel)]=\"isPublic\" i18n>Public resources</mat-checkbox>\n    <span class=\"text-sm text-[--rt-text-secondary] ml-2 mt-1\" i18n>\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();
+    title = input();
+    subtitle = input();
     avatar = computed(() => {
         return this.user().avatar;
     });
@@ -948,12 +1091,12 @@ class MenuUserComponent {
         //   this.data = this.user();
         // });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: { classPropertyName: "user", publicName: "user", 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 } }, 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\">{{ title() ? title() : user().name }}</div>\n            <div class=\"formated-string\">\n              @if (subtitle()) {\n                <span>&#64;{{ subtitle() }}</span>\n              } @else {\n                <span>&#64;{{ user().username }}</span>\n              }\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\" i18n> Manage account </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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MenuUserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            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\">{{ title() ? title() : user().name }}</div>\n            <div class=\"formated-string\">\n              @if (subtitle()) {\n                <span>&#64;{{ subtitle() }}</span>\n              } @else {\n                <span>&#64;{{ user().username }}</span>\n              }\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\" i18n> Manage account </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 {
@@ -983,12 +1126,12 @@ class WechatConnectDialogComponent {
             this.dialogRef.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 items-center\">\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.2.2", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            args: [{ selector: 'rolatech-wechat-connect-dialog', template: "<div class=\"flex flex-col p-3 items-center\">\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']]
@@ -1063,13 +1206,13 @@ class MediaUploadDialogComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MediaUploadDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.MediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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()\" i18n>Upload</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\" i18n>Preview</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 i18n>Cancel</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button i18n>Awaiting</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\" i18n>Upload</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\" i18n>Donw</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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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.2.2", ngImport: i0, type: MediaUploadDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
+            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()\" i18n>Upload</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\" i18n>Preview</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 i18n>Cancel</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button i18n>Awaiting</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\" i18n>Upload</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\" i18n>Donw</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$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i2$3.MediaService }] });
@@ -1086,17 +1229,18 @@ class MediaListComponent {
     onUpload(event) {
         this.upload.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 multiple />\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$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MediaListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            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 multiple />\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);
+    uploading = input(false);
     mediaItemClick = output();
     deleteMedia = output();
     onMediaItemClick(event) {
@@ -1105,12 +1249,12 @@ class MediaListItemComponent {
     onDeleteMedia(media) {
         this.deleteMedia.emit(media);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div\n  class=\"group 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 p-1 group-hover:bg-white\">\n    <div class=\"flex-1\"></div>\n    <div class=\"w-full\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 group-hover:bg-white\"\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 i18n>Delete</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<div class=\"w-full py-1\">\n  @if (uploading()) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  }\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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MediaListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            args: [{ selector: 'rolatech-media-list-item', imports: [MatButtonModule, MatMenuModule, MatIconModule, MatProgressBar], template: "<div\n  class=\"group 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 p-1 group-hover:bg-white\">\n    <div class=\"flex-1\"></div>\n    <div class=\"w-full\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 group-hover:bg-white\"\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 i18n>Delete</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<div class=\"w-full py-1\">\n  @if (uploading()) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  }\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 {
@@ -1131,13 +1275,13 @@ class NotFoundComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NotFoundComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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: ["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}.not-found-content a{text-decoration:underline}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NotFoundComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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: ["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}.not-found-content a{text-decoration:underline}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NotFoundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: ["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}.not-found-content a{text-decoration:underline}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Router }] });
+        }], ctorParameters: () => [{ type: i1$4.Router }] });
 
 class ConfirmationDialogComponent {
     data = inject(MAT_DIALOG_DATA);
@@ -1145,23 +1289,114 @@ class ConfirmationDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 i18n>Cancel</button>\n  <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial i18n>Ok</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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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.2.2", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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" }]
+            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 i18n>Cancel</button>\n  <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial i18n>Ok</button>\n</div>\n" }]
+        }] });
+
+class LocationSelectorComponent {
+    map;
+    markers;
+    lists;
+    infoWindowList = Array(10);
+    selectedLocation;
+    cities = ['北京', '上海'];
+    region = '北京';
+    output = output();
+    ngOnInit() {
+        this.init();
+    }
+    ngDoCheck() {
+        this.output.emit(this.selectedLocation);
+    }
+    init() {
+        const map = new window.TMap.Map(document.getElementById('map-container'), {
+            // 地图的中心地理坐标。
+            center: new window.TMap.LatLng(40.0402718, 116.2735831),
+            resizeEnable: true,
+            zoom: 14,
+        });
+        const markers = new window.TMap.MultiMarker({
+            map: map,
+            geometries: [],
+        });
+        this.map = map;
+        this.markers = markers;
+    }
+    onSearchChange(event) {
+        const value = event.target.value;
+        const suggest = new window.TMap.service.Suggestion({
+            pageSize: 15, // 返回结果每页条目数
+            region: this.region, // 限制城市范围
+            regionFix: true, // 搜索无结果时是否固定在当前城市
+        });
+        if (value) {
+            suggest
+                .getSuggestions({ keyword: value, location: this.map.getCenter() })
+                .then((result) => {
+                this.lists = result.data;
+            })
+                .catch((error) => { });
+        }
+    }
+    setLocation(index) {
+        this.infoWindowList.forEach((infoWindow) => {
+            infoWindow.close();
+        });
+        this.infoWindowList.length = 0;
+        const item = this.lists[index];
+        this.selectedLocation = item;
+        this.lists = [];
+        this.markers.setGeometries([]);
+        this.markers.updateGeometries([
+            {
+                id: '0', // 点标注数据数组
+                position: item.location,
+            },
+        ]);
+        const infoWindow = new window.TMap.InfoWindow({
+            map: this.map,
+            position: item.location,
+            content: `<h3>${item.title}</h3><p>地址：${item.address}</p>`,
+            offset: { x: 0, y: -50 },
+        });
+        this.infoWindowList.push(infoWindow);
+        this.map.setCenter(item.location);
+        this.markers.on('click', (e) => {
+            this.infoWindowList[Number(e.geometry.id)].open();
+        });
+    }
+    selectionChange(event) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: LocationSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: LocationSelectorComponent, isStandalone: true, selector: "rolatech-location-selector", outputs: { output: "output" }, ngImport: i0, template: "<div class=\"h-full\">\n  <div class=\"relative h-full\">\n    <div id=\"map-container\" class=\"h-full\"></div>\n    <div class=\"absolute bg-white z-[9999] top-[30px] left-[30px]\">\n      <div class=\"flex gap-3 px-3 pt-3\">\n        <mat-form-field appearance=\"fill\" [style.width.px]=\"180\">\n          <mat-label>\u57CE\u5E02</mat-label>\n          <mat-select #select=\"matSelect\" [(ngModel)]=\"region\" (selectionChange)=\"selectionChange($event)\">\n            @for (city of cities; track city) {\n              <mat-option [value]=\"city\">\n                {{ city }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22\" (input)=\"onSearchChange($event)\" />\n        </mat-form-field>\n      </div>\n      <div class=\"max-h-[320px] overflow-scroll pb-3 bg-white\">\n        @for (item of lists; track item; let index = $index) {\n          <div (click)=\"setLocation(index)\" class=\"cursor-pointer\">\n            <div class=\"p-3 flex items-center gap-2 hover:bg-[--rt-raised-background]\">\n              <mat-icon fontIcon=\"location_on\"></mat-icon>\n              <div class=\"text-sm font-thin\">{{ item.title }}</div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%;margin-bottom:-1.25em}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: LocationSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-location-selector', imports: [MatFormFieldModule, MatSelectModule, FormsModule, MatOptionModule, MatInputModule, MatIconModule, MatButtonModule], template: "<div class=\"h-full\">\n  <div class=\"relative h-full\">\n    <div id=\"map-container\" class=\"h-full\"></div>\n    <div class=\"absolute bg-white z-[9999] top-[30px] left-[30px]\">\n      <div class=\"flex gap-3 px-3 pt-3\">\n        <mat-form-field appearance=\"fill\" [style.width.px]=\"180\">\n          <mat-label>\u57CE\u5E02</mat-label>\n          <mat-select #select=\"matSelect\" [(ngModel)]=\"region\" (selectionChange)=\"selectionChange($event)\">\n            @for (city of cities; track city) {\n              <mat-option [value]=\"city\">\n                {{ city }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22\" (input)=\"onSearchChange($event)\" />\n        </mat-form-field>\n      </div>\n      <div class=\"max-h-[320px] overflow-scroll pb-3 bg-white\">\n        @for (item of lists; track item; let index = $index) {\n          <div (click)=\"setLocation(index)\" class=\"cursor-pointer\">\n            <div class=\"p-3 flex items-center gap-2 hover:bg-[--rt-raised-background]\">\n              <mat-icon fontIcon=\"location_on\"></mat-icon>\n              <div class=\"text-sm font-thin\">{{ item.title }}</div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%;margin-bottom:-1.25em}\n"] }]
         }] });
 
 class FilterComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: FilterComponent, isStandalone: true, selector: "rolatech-filter", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-filter', imports: [CommonModule], template: "<ng-content></ng-content>\n" }]
         }] });
 
+class ConfirmationComponent {
+    message = model();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: ConfirmationComponent, isStandalone: true, selector: "rolatech-confirmation", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { message: "messageChange" }, ngImport: i0, template: "<div>\n  {{ message() }}\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-confirmation', imports: [CommonModule], template: "<div>\n  {{ message() }}\n</div>\n" }]
+        }] });
+
 class BaseComponent {
     route = inject(ActivatedRoute);
     router = inject(Router);
@@ -1179,30 +1414,30 @@ class TableComponent {
     ngOnInit() {
         this.displayedColumns = map$1(this.dataSource().columns, 'ref');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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  <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$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: RouterModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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" }]
+            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  <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.2.2", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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.2.2", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MediaPreviewComponent, isStandalone: true, selector: "rolatech-media-preview", ngImport: i0, template: "<p>media-preview works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: MediaPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MediaPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-media-preview', imports: [CommonModule], template: "<p>media-preview works!</p>\n" }]
         }] });
@@ -1216,12 +1451,12 @@ class ToolbarComponent {
     link = input('');
     large = input(false, { transform: booleanAttribute });
     divider = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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-bold\" i18n>{{ title() }}</span>\n    } @else {\n      <span class=\"text-xl font-bold\" i18n>{{ title() }}</span>\n    }\n  }\n  <div class=\"flex-1\"></div>\n  <div class=\"flex justify-center items-center gap-3\">\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]\" i18n>{{ 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$6.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.2.2", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            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-bold\" i18n>{{ title() }}</span>\n    } @else {\n      <span class=\"text-xl font-bold\" i18n>{{ title() }}</span>\n    }\n  }\n  <div class=\"flex-1\"></div>\n  <div class=\"flex justify-center items-center gap-3\">\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]\" i18n>{{ 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']
@@ -1264,10 +1499,10 @@ class ThumbnailComponent {
     ratioSet = effect(() => {
         this.renderer.setAttribute(this.el.nativeElement, 'ratio', this.ratio());
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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)]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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.2.2", ngImport: i0, type: ThumbnailComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.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: [{
@@ -1294,10 +1529,10 @@ class ImageComponent {
             image.style.visibility = 'visible';
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.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.2.2", ngImport: i0, type: ImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -1318,12 +1553,12 @@ class TabComponent {
     hasClass = true;
     label = input.required();
     item = viewChild('content');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.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  <span i18n>{{ label() }}</span>\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.2.2", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+            args: [{ selector: 'rolatech-tab', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"content\" #content>\n  <span i18n>{{ label() }}</span>\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']
@@ -1379,24 +1614,24 @@ class TabsComponent {
         }
         return offset;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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, var(--rt-brand-color));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, var(--rt-brand-color))}.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, var(--rt-brand-color));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.2.2", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
+                    }, 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, var(--rt-brand-color));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, var(--rt-brand-color))}.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, var(--rt-brand-color));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.2.2", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 divide-y divide-[--rt-10-percent-layer]\">\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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 divide-y divide-[--rt-10-percent-layer]\">\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.2.2", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-list', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col divide-y divide-[--rt-10-percent-layer]\">\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: [{
@@ -1408,10 +1643,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class ContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: ContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
         }] });
@@ -1512,13 +1747,13 @@ class ChipBarComponent {
     rightArrowClick() {
         this.scroller().nativeElement.scrollLeft += 320;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChipBarComponent, deps: [{ token: i2$2.MatIconRegistry }, { token: i2$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChipBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
+        }], ctorParameters: () => [{ type: i2$2.MatIconRegistry }, { type: i2$5.DomSanitizer }], propDecorators: { hasId: [{
                 type: HostBinding,
                 args: ['id']
             }], hasClass: [{
@@ -1535,10 +1770,10 @@ class AvatarComponent {
     sizea = effect(() => {
         this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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)]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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.2.2", ngImport: i0, type: AvatarComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.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: [{
@@ -1548,10 +1783,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.2", ng
 
 class ImagePlaceholderComponent {
     ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: ImagePlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
         }] });
@@ -1566,7 +1801,7 @@ class ImagePreviewDialogComponent {
     constructor(data, dialogRef) {
         this.data = data;
         this.dialogRef = dialogRef;
-        this.data.title = '图片预览';
+        this.data.title = 'Preview';
     }
     ngOnInit() {
         this.selected = this.data.selected;
@@ -1586,22 +1821,22 @@ class ImagePreviewDialogComponent {
         this.prevDisabled = this.selected === 0;
         this.nextDisabled = this.selected === this.data.media.length - 1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ImagePreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 p-5\">\n    @if (data.title) {\n      <div class=\"text-lg font-bold\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex justify-center items-center overflow-hidden\">\n    <div class=\"p-3 flex items-center justify-center h-full\">\n      <img class=\"object-contain p-3 h-full\" [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 p-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$2.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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ImagePreviewDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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" }]
+            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 p-5\">\n    @if (data.title) {\n      <div class=\"text-lg font-bold\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex justify-center items-center overflow-hidden\">\n    <div class=\"p-3 flex items-center justify-center h-full\">\n      <img class=\"object-contain p-3 h-full\" [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 p-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 }] });
+                }] }, { type: i1$1.MatDialogRef }] });
 
 class EmptyComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: EmptyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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" }]
         }] });
@@ -1609,10 +1844,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 class InputComponent {
     title = model();
     placeholder = input('Title');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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.2.2", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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"] }]
         }] });
@@ -1626,12 +1861,13 @@ class RichItemComponent {
     subtitle = input();
     price = input(0);
     thumbnailRatio = input('rectangle');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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()\" mode=\"full\"></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)]] });
+    currencySymbol = input('¥');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", 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()\" mode=\"full\"></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\">{{ currencySymbol() }}{{ 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.2.2", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.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()\" mode=\"full\"></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"] }]
+                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()\" mode=\"full\"></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\">{{ currencySymbol() }}{{ 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']
@@ -1690,10 +1926,10 @@ class RichViewComponent {
             this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 5);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.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.2.2", ngImport: i0, type: RichViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -1754,20 +1990,20 @@ class EditorComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: EditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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.2.2", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: AccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -1826,10 +2062,10 @@ class PanelComponent {
     toggle() {
         this.expanded.set(!this.expanded());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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.2.2", ngImport: i0, type: PanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: [{
@@ -1838,10 +2074,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class PanelHeaderComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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.2.2", ngImport: i0, type: PanelHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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" }]
         }] });
@@ -1850,5 +2086,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * 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 };
+export { APP_LAYOUT, AcceptDialogComponent, AccordionComponent, AngularComponentsModule, AppPageComponent, AvatarComponent, BaseComponent, ChipBarComponent, ConfirmationComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, DrawerComponent, EditorComponent, EmptyComponent, FilterComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, LocationSelectorComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, PdfViewerComponent, RejectDialogComponent, ResizableContainerComponent, RichGridMediaComponent, RichItemComponent, RichLabelComponent, RichViewComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
 //# sourceMappingURL=rolatech-angular-components.mjs.map