@rolatech/angular-components 17.5.1 → 17.6.1

package/fesm2022/rolatech-angular-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, ElementRef, effect, Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders, Renderer2, PLATFORM_ID, viewChild, ChangeDetectionStrategy, contentChild, computed, Inject, NgModule, ChangeDetectorRef, output, HostListener, contentChildren, model } from '@angular/core';
+import { input, booleanAttribute, inject, ElementRef, effect, Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders, Renderer2, PLATFORM_ID, viewChild, ChangeDetectionStrategy, contentChild, computed, Inject, NgModule, ChangeDetectorRef, output, model, HostListener, contentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
 import * as i2$1 from '@angular/material/icon';
@@ -44,7 +44,6 @@ 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 * as i1$6 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -236,24 +235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
 
 /** Time and timing curve for expansion panel animations. */
 // Note: Keep this in sync with the Sass variable for the panel header animation.
-const EXPANSION_PANEL_ANIMATION_TIMING$1 = '225ms cubic-bezier(0.4,0.0,0.2,1)';
-const matExpansionAnimations = {
-    /** Animation that rotates the indicator arrow. */
-    indicatorRotate: trigger('indicatorRotate', [
-        state('collapsed, void', style({ transform: 'rotate(0deg)' })),
-        state('expanded', style({ transform: 'rotate(180deg)' })),
-        transition('expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1)),
-    ]),
-    /** Animation that expands and collapses the panel content. */
-    bodyExpansion: trigger('bodyExpansion', [
-        state('collapsed, void', style({ height: '0px', visibility: 'hidden' })),
-        // Clear the `visibility` while open, otherwise the content will be visible when placed in
-        // a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants
-        // that have a `visibility` of their own (see #27436).
-        state('expanded', style({ height: '*', visibility: '' })),
-        transition('expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1)),
-    ]),
-};
+const DRAWER_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
 const heightAnimation = trigger('heightAnimation', [
     state('open', style({
         height: '*',
@@ -263,10 +245,9 @@ const heightAnimation = trigger('heightAnimation', [
         height: '0px',
         visibility: 'hidden',
     })),
-    transition('open <=> closed', [animate(EXPANSION_PANEL_ANIMATION_TIMING$1)]),
+    transition('open <=> closed', [animate(DRAWER_ANIMATION_TIMING)]),
 ]);
 
-const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
 class DrawerComponent {
     opened = false;
     links = input();
@@ -1013,15 +994,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
 class WechatConnectDialogComponent {
     dialogRef = inject(MatDialogRef);
     environment = inject(APP_CONFIG);
-    data = inject(MAT_DIALOG_DATA);
+    appId = model();
+    redirectUri = model('');
+    state = model();
     urlSafe;
     sanitizer = inject(DomSanitizer);
     baseUrl = 'https://open.weixin.qq.com/connect/qrconnect';
+    loaded = false;
     constructor() {
-        const href = 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/gateway/login-regist/css/link-wx-login.css';
-        const encodedURI = encodeURI(this.data.redirect_uri);
-        const src = `${this.baseUrl}?appid=${this.data.appid}&response_type=code&self_redirect=true&scope=snsapi_login&href=${href}&redirect_uri=${encodedURI}&state=${this.data.state}#wechat_redirect`;
-        this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(src);
+        effect(() => {
+            const href = 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/gateway/login-regist/css/link-wx-login.css';
+            // const encodedURI = encodeURI(this.redirectUri());
+            const encodedURI = encodeURI('https://accounts.pinxiaoke.cn');
+            const src = `${this.baseUrl}?appid=${this.appId()}&response_type=code&self_redirect=true&scope=snsapi_login&href=${href}&redirect_uri=${encodedURI}&state=${this.state()}#wechat_redirect`;
+            this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(src);
+            this.loaded = true;
+        });
     }
     onNoClick() {
         this.dialogRef.close();
@@ -1032,11 +1020,11 @@ class WechatConnectDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"text-xl font-bold\">\u626B\u7801\u7ED1\u5B9A\u5FAE\u4FE1\uFF0C\u63D0\u5347\u8D26\u53F7\u5B89\u5168\u548C\u4F7F\u7528\u4FBF\u5229\u6027</div>\n  <div class=\"w-[190px] h-[190px]\">\n    <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    <div></div>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", inputs: { appId: { classPropertyName: "appId", publicName: "appId", isSignal: true, isRequired: false, transformFunction: null }, redirectUri: { classPropertyName: "redirectUri", publicName: "redirectUri", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appId: "appIdChange", redirectUri: "redirectUriChange", state: "stateChange" }, host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"w-[190px] h-[190px]\">\n    @if (loaded) {\n      <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    }\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-wechat-connect-dialog', standalone: true, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"text-xl font-bold\">\u626B\u7801\u7ED1\u5B9A\u5FAE\u4FE1\uFF0C\u63D0\u5347\u8D26\u53F7\u5B89\u5168\u548C\u4F7F\u7528\u4FBF\u5229\u6027</div>\n  <div class=\"w-[190px] h-[190px]\">\n    <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    <div></div>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] }]
+            args: [{ selector: 'rolatech-wechat-connect-dialog', standalone: true, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"w-[190px] h-[190px]\">\n    @if (loaded) {\n      <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    }\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onLogin: [{
                 type: HostListener,
                 args: ['window:message', ['$event']]
@@ -1237,20 +1225,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
         }] });
 
 class PaginatorComponent {
-    length = 100;
-    pageSize = 15;
-    pageSizeOptions = [5, 10, 25, 100];
-    pageEvent;
-    page = output();
-    onPage(event) {
-        this.page.emit(event);
-    }
+    prevClick() { }
+    nextClick() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", outputs: { page: "page" }, ngImport: i0, template: "<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", ngImport: i0, template: "<div class=\"flex h-14 items-center\">\n  <button mat-icon-button></button>\n  <button mat-icon-button (click)=\"prevClick()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <div></div>\n  <button mat-icon-button (click)=\"nextClick()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-paginator', standalone: true, imports: [CommonModule, MatPaginatorModule], template: "<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n" }]
+            args: [{ selector: 'rolatech-paginator', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex h-14 items-center\">\n  <button mat-icon-button></button>\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 {
@@ -1698,11 +1680,11 @@ class RichViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.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", styles: ["rolatech-rich-view{display:flex;--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{min-width:40%}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px}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:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 1}}@media (min-width: 700px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.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", styles: ["rolatech-rich-view{display:flex;--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{min-width:40%}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: 1}}@media (min-width: 700px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: RichViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-rich-view', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["rolatech-rich-view{display:flex;--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{min-width:40%}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px}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:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 1}}@media (min-width: 700px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@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}\n"] }]
+            args: [{ selector: 'rolatech-rich-view', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["rolatech-rich-view{display:flex;--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{min-width:40%}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: 1}}@media (min-width: 700px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-rich-view']
@@ -1711,9 +1693,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 args: ['class.scrollbar-hide']
             }] } });
 
+class EditorComponent {
+    platformId = inject(PLATFORM_ID);
+    isBrowser;
+    editor;
+    constructor() {
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        // const options = {
+        //   debug: 'info',
+        //   modules: {
+        //     toolbar: true,
+        //   },
+        //   placeholder: 'Compose an epic...',
+        //   theme: 'snow',
+        // };
+        // const quill = new Quill('#editor', options);
+    }
+    ngAfterViewInit() {
+        // this.quill();
+    }
+    ngOnInit() {
+        this.quill();
+    }
+    get toolbar() {
+        return [
+            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+            ['blockquote', 'code-block'],
+            // [{ header: 1 }, { header: 2 }], // custom button values
+            [{ list: 'ordered' }, { list: 'bullet' }],
+            [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+            [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+            [{ direction: 'rtl' }], // text direction
+            // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+            [{ header: [1, 2, 3, 4, 5, 6, false] }],
+            // [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+            [{ font: [] }],
+            [{ align: [] }],
+            ['clean'], // remove formatting button
+        ];
+    }
+    async quill() {
+        if (this.isBrowser) {
+            const m = await import('quill');
+            console.log(`🚀 => AppComponent => quill => m:`, m);
+            this.editor = new m.default('#editor', {
+                // modules: { toolbar: '#toolbar' },
+                modules: { toolbar: this.toolbar },
+                theme: 'snow',
+                placeholder: 'placeholder',
+            });
+            console.log(`🚀 => AppComponent => quill => this.editor:`, this.editor);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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: "18.0.3", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-editor', standalone: true, 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: "18.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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: "18.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-accordion', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-accordion']
+            }] } });
+
+const PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
+const panelAnimations = {
+    /** Animation that rotates the indicator arrow. */
+    indicator: trigger('indicator', [
+        state('collapsed, void', style({ transform: 'rotate(0deg)' })),
+        state('expanded', style({ transform: 'rotate(180deg)' })),
+        transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING)),
+    ]),
+    /** Animation that expands and collapses the panel content. */
+    content: trigger('content', [
+        state('collapsed, void', style({ height: '0px', visibility: 'hidden' })),
+        state('expanded', style({ height: '*', visibility: 'visible' })),
+        transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING)),
+    ]),
+};
+
+class PanelComponent {
+    hasClass = true;
+    border = input(false, { transform: booleanAttribute });
+    divider = input(false, { transform: booleanAttribute });
+    expanded = model(false);
+    title = input();
+    subtitle = input();
+    el = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            if (this.expanded()) {
+                this.el.nativeElement.setAttribute('expanded', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('expanded');
+            }
+            if (this.border()) {
+                this.el.nativeElement.setAttribute('border', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('border');
+            }
+            if (this.divider()) {
+                this.el.nativeElement.setAttribute('divider', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('divider');
+            }
+        });
+    }
+    ngOnInit() { }
+    ngAfterViewInit() { }
+    toggle() {
+        this.expanded.set(!this.expanded());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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  <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;margin-bottom:var(--rt-panel-padding)}rolatech-panel .header{padding:var(--rt-panel-padding);cursor:pointer;display:flex;justify-content:space-between;align-items:center;height:44px;background-color:var(--rt-10-percent-layer)}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: "18.0.3", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-panel', standalone: true, 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  <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;margin-bottom:var(--rt-panel-padding)}rolatech-panel .header{padding:var(--rt-panel-padding);cursor:pointer;display:flex;justify-content:space-between;align-items:center;height:44px;background-color:var(--rt-10-percent-layer)}rolatech-panel .header:hover{background-color:var(--rt-20-percent-layer)}rolatech-panel .content-container{overflow:visible}rolatech-panel .content-container .content-inner{padding:var(--rt-panel-padding)}rolatech-panel[border]{border-top:1px solid #d1d7dc;border-left:1px solid #d1d7dc;border-right:1px solid #d1d7dc}rolatech-panel[border]:last-child{border-bottom:1px solid #d1d7dc}rolatech-panel[divider]{border-bottom:1px solid #d1d7dc}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-panel']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LAYOUT, AngularComponentsModule, AppPageComponent, AvatarComponent, BaseComponent, ChipBarComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, DrawerComponent, EmptyComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, RichItemComponent, RichViewComponent, SpacerComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
+export { APP_LAYOUT, AccordionComponent, AngularComponentsModule, AppPageComponent, AvatarComponent, BaseComponent, ChipBarComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, DrawerComponent, EditorComponent, EmptyComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, RichItemComponent, RichViewComponent, SpacerComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
 //# sourceMappingURL=rolatech-angular-components.mjs.map