@rolatech/angular-components 17.4.25 → 17.4.27

package/esm2022/lib/rich-item/rich-item.component.mjs

@@ -0,0 +1,22 @@
+import { Component, HostBinding, ViewEncapsulation, booleanAttribute, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+export class RichItemComponent {
+    hasClass = true;
+    list = input(false, { transform: booleanAttribute });
+    thumbnail = input();
+    avatar = input();
+    title = input();
+    subtitle = input();
+    price = input(0);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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 } }, 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\"></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=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal py-1\">\n      {{ title() }}\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;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: [() => [import("../thumbnail/thumbnail.component").then(m => m.ThumbnailComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.2", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [import("../thumbnail/thumbnail.component").then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'rolatech-rich-item', standalone: true, 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\"></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=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal py-1\">\n      {{ title() }}\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;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']
+                }] } }) });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmljaC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvcmljaC1pdGVtL3JpY2gtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3JpY2gtaXRlbS9yaWNoLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsaUJBQWlCLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25HLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFXL0MsTUFBTSxPQUFPLGlCQUFpQjtJQUNhLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDekQsSUFBSSxHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDO0lBQ3JELFNBQVMsR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUM1QixNQUFNLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDekIsS0FBSyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3hCLFFBQVEsR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUMzQixLQUFLLEdBQUcsS0FBSyxDQUFNLENBQUMsQ0FBQyxDQUFDO3VHQVBYLGlCQUFpQjsyRkFBakIsaUJBQWlCLHM0QkNaOUIsaXhCQXFCQSw2Y0RkWSxZQUFZOztnR0FLWCxpQkFBaUI7c0JBUjdCLFNBQVM7bUNBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxrQkFBa0IsQ0FBQyxpQkFHNUIsaUJBQWlCLENBQUMsSUFBSTt3REFHSSxRQUFROzBCQUFoRCxXQUFXOzJCQUFDLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIFZpZXdFbmNhcHN1bGF0aW9uLCBib29sZWFuQXR0cmlidXRlLCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFRodW1ibmFpbENvbXBvbmVudCB9IGZyb20gJy4uL3RodW1ibmFpbC90aHVtYm5haWwuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm9sYXRlY2gtcmljaC1pdGVtJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgVGh1bWJuYWlsQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3JpY2gtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9yaWNoLWl0ZW0uY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBSaWNoSXRlbUNvbXBvbmVudCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3Mucm9sYXRlY2gtcmljaC1pdGVtJykgaGFzQ2xhc3MgPSB0cnVlO1xuICBsaXN0ID0gaW5wdXQoZmFsc2UsIHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pO1xuICB0aHVtYm5haWwgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIGF2YXRhciA9IGlucHV0PHN0cmluZz4oKTtcbiAgdGl0bGUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHN1YnRpdGxlID0gaW5wdXQ8c3RyaW5nPigpO1xuICBwcmljZSA9IGlucHV0PGFueT4oMCk7XG59XG4iLCI8ZGl2IGlkPVwidGh1bWJuYWlsXCIgY2xhc3M9XCJyb2xhdGVjaC1yaWNoLWl0ZW1cIj5cbiAgQGRlZmVyIChvbiB2aWV3cG9ydCgpKSB7XG4gICAgPHJvbGF0ZWNoLXRodW1ibmFpbCBbc3JjXT1cInRodW1ibmFpbCgpXCIgc2l6ZT1cIm1lZGl1bVwiPjwvcm9sYXRlY2gtdGh1bWJuYWlsPlxuICB9IEBwbGFjZWhvbGRlciB7XG4gICAgPGRpdiBjbGFzcz1cImJnLVstLXJ0LTEwLXBlcmNlbnQtbGF5ZXJdIGgtZnVsbCB3LWZ1bGwgb2JqZWN0LWNvdmVyIGFzcGVjdC12aWRlbyByb3VuZGVkLWxnXCI+PC9kaXY+XG4gIH1cbjwvZGl2PlxuPGRpdiBpZD1cImRldGFpbHNcIiBjbGFzcz1cInJvbGF0ZWNoLXJpY2gtaXRlbVwiPlxuICA8ZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJtZDp0ZXh0LXhsIGZvbnQtYm9sZCBicmVhay13b3JkcyBsaW5lLWNsYW1wLTEgbWQ6bGluZS1jbGFtcC0yIHdoaXRlc3BhY2Utbm9ybWFsIHB5LTFcIj5cbiAgICAgIHt7IHRpdGxlKCkgfX1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiaW52aXNpYmxlIGgtMCBtZDpoLWF1dG8gbWQ6dmlzaWJsZSBicmVhay13b3JkcyBsaW5lLWNsYW1wLTEgd2hpdGVzcGFjZS1ub3JtYWxcIj5cbiAgICAgIHt7IHN1YnRpdGxlKCkgfX1cbiAgICA8L2Rpdj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICBAaWYgKHByaWNlKCkpIHtcbiAgICA8ZGl2IGNsYXNzPVwibWQ6dGV4dC1sZyBmb250LWJvbGQgcHktMVwiPsKle3sgcHJpY2UoKSB9fTwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/rich-view/rich-view.component.mjs

@@ -0,0 +1,72 @@
+import { Component, ElementRef, HostBinding, PLATFORM_ID, ViewEncapsulation, booleanAttribute, contentChildren, effect, inject, input, } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
+import { RichItemComponent } from '../rich-item/rich-item.component';
+import * as i0 from "@angular/core";
+export class RichViewComponent {
+    hasClass = true;
+    disableScrollbar = true;
+    platformId = inject(PLATFORM_ID);
+    el = inject(ElementRef);
+    items = contentChildren(RichItemComponent, { read: ElementRef });
+    list = input(false, { transform: booleanAttribute });
+    wrap = input(false, { transform: booleanAttribute });
+    resizeObserver;
+    constructor() {
+        effect(() => {
+            if (this.list()) {
+                this.el.nativeElement.setAttribute('list', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('list', '');
+            }
+            if (this.wrap()) {
+                this.el.nativeElement.setAttribute('wrap', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('wrap', '');
+            }
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    // this.setCustomProperties(entry.contentRect.width);
+                }
+            });
+            this.resizeObserver.observe(this.el.nativeElement);
+        }
+    }
+    ngAfterViewInit() { }
+    setCustomProperties(width) {
+        if (width <= 600) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 1);
+        }
+        if (600 < width && width <= 768) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 2);
+        }
+        if (768 < width && width <= 1280) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 3);
+        }
+        if (1280 < width && width <= 1536) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 4);
+        }
+        if (width > 1536) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 5);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.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", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", 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"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-rich-view']
+            }], disableScrollbar: [{
+                type: HostBinding,
+                args: ['class.scrollbar-hide']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmljaC12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvcmljaC12aWV3L3JpY2gtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3JpY2gtdmlldy9yaWNoLXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUVYLFdBQVcsRUFDWCxpQkFBaUIsRUFDakIsZ0JBQWdCLEVBQ2hCLGVBQWUsRUFDZixNQUFNLEVBQ04sTUFBTSxFQUNOLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7O0FBVXJFLE1BQU0sT0FBTyxpQkFBaUI7SUFDYSxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3BCLGdCQUFnQixHQUFHLElBQUksQ0FBQztJQUM3RCxVQUFVLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ2pDLEVBQUUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDeEIsS0FBSyxHQUFHLGVBQWUsQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDO0lBQ2pFLElBQUksR0FBRyxLQUFLLENBQUMsS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUMsQ0FBQztJQUNyRCxJQUFJLEdBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7SUFDN0MsY0FBYyxDQUFrQjtJQUV4QztRQUNFLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDO2dCQUNoQixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQ2pELENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQ3BELENBQUM7WUFDRCxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDO2dCQUNoQixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQ2pELENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQ3BELENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCxRQUFRO1FBQ04sSUFBSSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztZQUN2QyxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksY0FBYyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUU7Z0JBQ25ELEtBQUssSUFBSSxLQUFLLElBQUksT0FBTyxFQUFFLENBQUM7b0JBQzFCLHFEQUFxRDtnQkFDdkQsQ0FBQztZQUNILENBQUMsQ0FBQyxDQUFDO1lBQ0gsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNyRCxDQUFDO0lBQ0gsQ0FBQztJQUVELGVBQWUsS0FBVSxDQUFDO0lBQzFCLG1CQUFtQixDQUFDLEtBQWE7UUFDL0IsSUFBSSxLQUFLLElBQUksR0FBRyxFQUFFLENBQUM7WUFDakIsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyw4QkFBOEIsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM3RSxDQUFDO1FBQ0QsSUFBSSxHQUFHLEdBQUcsS0FBSyxJQUFJLEtBQUssSUFBSSxHQUFHLEVBQUUsQ0FBQztZQUNoQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLDhCQUE4QixFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQzdFLENBQUM7UUFDRCxJQUFJLEdBQUcsR0FBRyxLQUFLLElBQUksS0FBSyxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ2pDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsOEJBQThCLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDN0UsQ0FBQztRQUNELElBQUksSUFBSSxHQUFHLEtBQUssSUFBSSxLQUFLLElBQUksSUFBSSxFQUFFLENBQUM7WUFDbEMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyw4QkFBOEIsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM3RSxDQUFDO1FBQ0QsSUFBSSxLQUFLLEdBQUcsSUFBSSxFQUFFLENBQUM7WUFDakIsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyw4QkFBOEIsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM3RSxDQUFDO0lBQ0gsQ0FBQzt1R0FwRFUsaUJBQWlCOzJGQUFqQixpQkFBaUIsa2RBS0osaUJBQWlCLFFBQVUsVUFBVSw2Q0MvQi9ELDZCQUNBLHV2Q0RvQlksWUFBWTs7MkZBS1gsaUJBQWlCO2tCQVI3QixTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsa0JBQWtCLENBQUMsaUJBRzVCLGlCQUFpQixDQUFDLElBQUk7d0RBR0ksUUFBUTtzQkFBaEQsV0FBVzt1QkFBQywwQkFBMEI7Z0JBQ0YsZ0JBQWdCO3NCQUFwRCxXQUFXO3VCQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIE9uSW5pdCxcbiAgUExBVEZPUk1fSUQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBib29sZWFuQXR0cmlidXRlLFxuICBjb250ZW50Q2hpbGRyZW4sXG4gIGVmZmVjdCxcbiAgaW5qZWN0LFxuICBpbnB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUsIGlzUGxhdGZvcm1Ccm93c2VyIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFRodW1ibmFpbENvbXBvbmVudCB9IGZyb20gJy4uL3RodW1ibmFpbC90aHVtYm5haWwuY29tcG9uZW50JztcbmltcG9ydCB7IFJpY2hJdGVtQ29tcG9uZW50IH0gZnJvbSAnLi4vcmljaC1pdGVtL3JpY2gtaXRlbS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdyb2xhdGVjaC1yaWNoLXZpZXcnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBUaHVtYm5haWxDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vcmljaC12aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3JpY2gtdmlldy5jb21wb25lbnQuc2NzcycsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFJpY2hWaWV3Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5yb2xhdGVjaC1yaWNoLXZpZXcnKSBoYXNDbGFzcyA9IHRydWU7XG4gIEBIb3N0QmluZGluZygnY2xhc3Muc2Nyb2xsYmFyLWhpZGUnKSBkaXNhYmxlU2Nyb2xsYmFyID0gdHJ1ZTtcbiAgcGxhdGZvcm1JZCA9IGluamVjdChQTEFURk9STV9JRCk7XG4gIGVsID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuICBpdGVtcyA9IGNvbnRlbnRDaGlsZHJlbihSaWNoSXRlbUNvbXBvbmVudCwgeyByZWFkOiBFbGVtZW50UmVmIH0pO1xuICBsaXN0ID0gaW5wdXQoZmFsc2UsIHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pO1xuICB3cmFwID0gaW5wdXQoZmFsc2UsIHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pO1xuICBwcml2YXRlIHJlc2l6ZU9ic2VydmVyITogUmVzaXplT2JzZXJ2ZXI7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIGlmICh0aGlzLmxpc3QoKSkge1xuICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc2V0QXR0cmlidXRlKCdsaXN0JywgJycpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnJlbW92ZUF0dHJpYnV0ZSgnbGlzdCcsICcnKTtcbiAgICAgIH1cbiAgICAgIGlmICh0aGlzLndyYXAoKSkge1xuICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc2V0QXR0cmlidXRlKCd3cmFwJywgJycpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnJlbW92ZUF0dHJpYnV0ZSgnd3JhcCcsICcnKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAoaXNQbGF0Zm9ybUJyb3dzZXIodGhpcy5wbGF0Zm9ybUlkKSkge1xuICAgICAgdGhpcy5yZXNpemVPYnNlcnZlciA9IG5ldyBSZXNpemVPYnNlcnZlcigoZW50cmllcykgPT4ge1xuICAgICAgICBmb3IgKGxldCBlbnRyeSBvZiBlbnRyaWVzKSB7XG4gICAgICAgICAgLy8gdGhpcy5zZXRDdXN0b21Qcm9wZXJ0aWVzKGVudHJ5LmNvbnRlbnRSZWN0LndpZHRoKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgICB0aGlzLnJlc2l6ZU9ic2VydmVyLm9ic2VydmUodGhpcy5lbC5uYXRpdmVFbGVtZW50KTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7fVxuICBzZXRDdXN0b21Qcm9wZXJ0aWVzKHdpZHRoOiBudW1iZXIpIHtcbiAgICBpZiAod2lkdGggPD0gNjAwKSB7XG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0tcnQtcmljaC12aWV3LWl0ZW1zLXBlci1yb3cnLCAxKTtcbiAgICB9XG4gICAgaWYgKDYwMCA8IHdpZHRoICYmIHdpZHRoIDw9IDc2OCkge1xuICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KCctLXJ0LXJpY2gtdmlldy1pdGVtcy1wZXItcm93JywgMik7XG4gICAgfVxuICAgIGlmICg3NjggPCB3aWR0aCAmJiB3aWR0aCA8PSAxMjgwKSB7XG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0tcnQtcmljaC12aWV3LWl0ZW1zLXBlci1yb3cnLCAzKTtcbiAgICB9XG4gICAgaWYgKDEyODAgPCB3aWR0aCAmJiB3aWR0aCA8PSAxNTM2KSB7XG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0tcnQtcmljaC12aWV3LWl0ZW1zLXBlci1yb3cnLCA0KTtcbiAgICB9XG4gICAgaWYgKHdpZHRoID4gMTUzNikge1xuICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KCctLXJ0LXJpY2gtdmlldy1pdGVtcy1wZXItcm93JywgNSk7XG4gICAgfVxuICB9XG59XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4iXX0=

package/fesm2022/rolatech-angular-components.mjs

@@ -67,6 +67,7 @@ import * as i2$3 from '@rolatech/angular-services';
 import { LoadingService, DialogService, SnackBarService, BackButtonDirective } from '@rolatech/angular-services';
 import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i2$4 from '@angular/platform-browser';
 import { DomSanitizer, Title } from '@angular/platform-browser';
 import { map as map$1 } from 'lodash';
 
@@ -339,7 +340,7 @@ class AppDrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AppDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"rt-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rt-app-drawer\">\n  <div id=\"guide-wrapper\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <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-orange-600\">{{ appLayout.title }}</span>\n          <span>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n        @if (completed) {\n          <div class=\"flex p-3 flex-col gap-2\">\n            @for (item of links(); track $index) {\n              @if (item.children) {\n                <div class=\"cursor-pointer\">\n                  <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n                    <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                    <span class=\"ml-3\">{{ item.title }}</span>\n                    <div class=\"flex-1\"></div>\n                    <rolatech-icon\n                      style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n                      >expand_more</rolatech-icon\n                    >\n                  </div>\n                  <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n                    @for (child of item.children; track child) {\n                      <a\n                        id=\"endpoint\"\n                        [routerLink]=\"child.link\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: true }\"\n                        class=\"p-3 rt-guide-entry-renderer\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                      >\n                        <span class=\"text-sm\">{{ child.title }}</span>\n                      </a>\n                    }\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\">\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\">{{ 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 app-drawer-button min-h-11 rounded-xl mr-4\"\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\">\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-renderer\"\n                      [routerLink]=\"item.link\"\n                      (click)=\"this.isPersistent ? '' : this.close()\"\n                      routerLinkActive=\"drawer-active\"\n                      [routerLinkActiveOptions]=\"{ exact: true }\"\n                      #routerLink=\"routerLinkActive\"\n                    >\n                      <div class=\"flex justify-between items-center w-full\">\n                        <div class=\"flex justify-start\">\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\">{{ item.subtitle }}</span>\n                          </div>\n                        </div>\n                      </div>\n                    </a>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-app-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-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-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.rt-app-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rt-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rt-app-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.rt-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-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}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-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-renderer: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: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-app-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-app-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-app-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-orange-600\">{{ appLayout.title }}</span>\n          <span>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-app-drawer\">\n        @if (completed) {\n          <div>\n            <div class=\"block p-3\">\n              @for (item of links(); track $index) {\n                @if (item.children) {\n                  <div class=\"cursor-pointer\">\n                    <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n                      <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      <span class=\"ml-3\">{{ item.title }}</span>\n                      <div class=\"flex-1\"></div>\n                      <rolatech-icon\n                        style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n                        >expand_more</rolatech-icon\n                      >\n                    </div>\n                    <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n                      @for (child of item.children; track child) {\n                        <a\n                          id=\"endpoint\"\n                          [routerLink]=\"child.link\"\n                          routerLinkActive=\"drawer-active\"\n                          [routerLinkActiveOptions]=\"{ exact: true }\"\n                          class=\"p-3 rt-guide-entry-renderer\"\n                          (click)=\"this.isPersistent ? '' : this.close()\"\n                        >\n                          <span class=\"text-sm\">{{ child.title }}</span>\n                        </a>\n                      }\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\">\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\">{{ 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 app-drawer-button min-h-11 rounded-xl mr-4\"\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\">\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-renderer\"\n                        [routerLink]=\"item.link\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: true }\"\n                        #routerLink=\"routerLinkActive\"\n                      >\n                        <div class=\"flex justify-between items-center w-full\">\n                          <div class=\"flex justify-start\">\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\">{{ item.subtitle }}</span>\n                            </div>\n                          </div>\n                        </div>\n                      </a>\n                    }\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-app-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-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-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-app-drawer{height:100%;display:flexbox;display:flex;flex-direction:column}#contentContainer.rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-app-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-app-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-app-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-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-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}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-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-renderer: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: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AppDrawerComponent, decorators: [{
             type: Component,
@@ -355,7 +356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         IconComponent,
                         MenuIconComponent,
                         MatButtonModule,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"rt-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rt-app-drawer\">\n  <div id=\"guide-wrapper\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <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-orange-600\">{{ appLayout.title }}</span>\n          <span>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n        @if (completed) {\n          <div class=\"flex p-3 flex-col gap-2\">\n            @for (item of links(); track $index) {\n              @if (item.children) {\n                <div class=\"cursor-pointer\">\n                  <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n                    <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                    <span class=\"ml-3\">{{ item.title }}</span>\n                    <div class=\"flex-1\"></div>\n                    <rolatech-icon\n                      style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n                      >expand_more</rolatech-icon\n                    >\n                  </div>\n                  <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n                    @for (child of item.children; track child) {\n                      <a\n                        id=\"endpoint\"\n                        [routerLink]=\"child.link\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: true }\"\n                        class=\"p-3 rt-guide-entry-renderer\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                      >\n                        <span class=\"text-sm\">{{ child.title }}</span>\n                      </a>\n                    }\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\">\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\">{{ 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 app-drawer-button min-h-11 rounded-xl mr-4\"\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\">\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-renderer\"\n                      [routerLink]=\"item.link\"\n                      (click)=\"this.isPersistent ? '' : this.close()\"\n                      routerLinkActive=\"drawer-active\"\n                      [routerLinkActiveOptions]=\"{ exact: true }\"\n                      #routerLink=\"routerLinkActive\"\n                    >\n                      <div class=\"flex justify-between items-center w-full\">\n                        <div class=\"flex justify-start\">\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\">{{ item.subtitle }}</span>\n                          </div>\n                        </div>\n                      </div>\n                    </a>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-app-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-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-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.rt-app-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rt-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rt-app-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.rt-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-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}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-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-renderer:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-app-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-app-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-app-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-orange-600\">{{ appLayout.title }}</span>\n          <span>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-app-drawer\">\n        @if (completed) {\n          <div>\n            <div class=\"block p-3\">\n              @for (item of links(); track $index) {\n                @if (item.children) {\n                  <div class=\"cursor-pointer\">\n                    <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n                      <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      <span class=\"ml-3\">{{ item.title }}</span>\n                      <div class=\"flex-1\"></div>\n                      <rolatech-icon\n                        style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n                        >expand_more</rolatech-icon\n                      >\n                    </div>\n                    <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n                      @for (child of item.children; track child) {\n                        <a\n                          id=\"endpoint\"\n                          [routerLink]=\"child.link\"\n                          routerLinkActive=\"drawer-active\"\n                          [routerLinkActiveOptions]=\"{ exact: true }\"\n                          class=\"p-3 rt-guide-entry-renderer\"\n                          (click)=\"this.isPersistent ? '' : this.close()\"\n                        >\n                          <span class=\"text-sm\">{{ child.title }}</span>\n                        </a>\n                      }\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\">\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\">{{ 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 app-drawer-button min-h-11 rounded-xl mr-4\"\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\">\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-renderer\"\n                        [routerLink]=\"item.link\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: true }\"\n                        #routerLink=\"routerLinkActive\"\n                      >\n                        <div class=\"flex justify-between items-center w-full\">\n                          <div class=\"flex justify-start\">\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\">{{ item.subtitle }}</span>\n                            </div>\n                          </div>\n                        </div>\n                      </a>\n                    }\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-app-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-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-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-app-drawer{height:100%;display:flexbox;display:flex;flex-direction:column}#contentContainer.rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-app-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-app-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-app-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-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-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}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-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-renderer:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
         }], propDecorators: { hostId: [{
                 type: HostBinding,
                 args: ['id']
@@ -496,7 +497,7 @@ class AppLayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.2", type: AppLayoutComponent, isStandalone: true, selector: "rolatech-app-layout", host: { properties: { "id": "this.hostId", "class.rolatech-app-layout": "this.hasClass" } }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: AppDrawerComponent, 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-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-app-layout-background-color, #fff);color:var(--rt-app-layout-color, #000)}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=top]~rolatech-app-page{margin-top:56px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=left]~rolatech-app-page{margin-left:256px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=right]~rolatech-app-page{margin-right:256px}rolatech-app-layout rolatech-mini-guide[mini-guide-visible]~rolatech-app-page{margin-left:var(--rt-mini-guide-width, 72px)}rolatech-app-page{display:block;padding-top:56px}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}rolatech-app-layout[mini-guide-visible] rolatech-app-page.ytd-app{margin-left:var(--rt-mini-guide-width, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.2", type: AppLayoutComponent, isStandalone: true, selector: "rolatech-app-layout", host: { properties: { "id": "this.hostId", "class.rolatech-app-layout": "this.hasClass" } }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: AppDrawerComponent, 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-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-app-layout-background-color, #fff);color:var(--rt-app-layout-color, #000)}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=top]~rolatech-app-page{margin-top:56px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=left]~rolatech-app-page{margin-left:256px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=right]~rolatech-app-page{margin-right:256px}rolatech-app-layout rolatech-mini-guide[mini-guide-visible]~rolatech-app-page{margin-left:var(--rt-mini-guide-width, 72px)}rolatech-app-page{display:block;margin-top:56px}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}rolatech-app-layout[mini-guide-visible] rolatech-app-page.ytd-app{margin-left:var(--rt-mini-guide-width, 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: "18.0.2", ngImport: i0, type: AppLayoutComponent, decorators: [{
             type: Component,
@@ -514,7 +515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         MatSidenavModule,
                         TopbarComponent,
                         AppDrawerComponent,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-app-layout-background-color, #fff);color:var(--rt-app-layout-color, #000)}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=top]~rolatech-app-page{margin-top:56px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=left]~rolatech-app-page{margin-left:256px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=right]~rolatech-app-page{margin-right:256px}rolatech-app-layout rolatech-mini-guide[mini-guide-visible]~rolatech-app-page{margin-left:var(--rt-mini-guide-width, 72px)}rolatech-app-page{display:block;padding-top:56px}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}rolatech-app-layout[mini-guide-visible] rolatech-app-page.ytd-app{margin-left:var(--rt-mini-guide-width, 72px)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-app-layout-background-color, #fff);color:var(--rt-app-layout-color, #000)}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=top]~rolatech-app-page{margin-top:56px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=left]~rolatech-app-page{margin-left:256px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=right]~rolatech-app-page{margin-right:256px}rolatech-app-layout rolatech-mini-guide[mini-guide-visible]~rolatech-app-page{margin-left:var(--rt-mini-guide-width, 72px)}rolatech-app-page{display:block;margin-top:56px}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}rolatech-app-layout[mini-guide-visible] rolatech-app-page.ytd-app{margin-left:var(--rt-mini-guide-width, 72px)}\n"] }]
         }], propDecorators: { hostId: [{
                 type: HostBinding,
                 args: ['id']
@@ -1304,6 +1305,11 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.2", ng
                     args: ['class.rt-rich-grid-media']
                 }] } }) });
 
+var thumbnail_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ThumbnailComponent: ThumbnailComponent
+});
+
 class ImageComponent {
     src = input();
     img = viewChild.required('img');
@@ -1425,23 +1431,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ selector: 'rolatech-content', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["rolatech-content{padding-left:var(--rt-content-padding-left, 0px);padding-right:var(--rt-content-padding-right, 0px)}\n"] }]
         }] });
 
+const CHEVRON_LEFT = `
+<svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            focusable="false"
+            style="pointer-events: none; display: inherit; width: 100%; height: 100%"
+          >
+            <path d="M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z"></path>
+          </svg>
+`;
+const CHEVRON_RIGHT = `
+  <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            focusable="false"
+            style="pointer-events: none; display: inherit; width: 100%; height: 100%"
+          >
+            <path d="m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z"></path>
+          </svg>
+`;
 class ChipBarComponent {
     hasId = 'rolatech-chip-bar';
     hasClass = true;
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    resizeObserver;
+    chips = viewChild('chips', { read: ElementRef });
+    scroller = viewChild.required('scroller', { read: ElementRef });
+    constructor(iconRegistry, sanitizer) {
+        // Note that we provide the icon here as a string literal here due to a limitation in
+        // Stackblitz. If you want to provide the icon from a URL, you can use:
+        // `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
+        iconRegistry.addSvgIconLiteral('chevron_left', sanitizer.bypassSecurityTrustHtml(CHEVRON_LEFT));
+        iconRegistry.addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT));
+    }
     router = input('../courses/categories/');
-    items = [
-        {
-            name: '全部',
-            link: '',
-        },
-    ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ChipBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ChipBarComponent, isStandalone: true, selector: "rolatech-chip-bar", inputs: { router: { classPropertyName: "router", publicName: "router", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-chip-bar": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n>\n  <a\n    class=\"cursor-pointer h-8 bg-[--rt-10-percent-layer] md:bg-white rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n    routerLinkActive=\"chip-bar-active\"\n    routerLink=\"/courses\"\n  >\n    <span class=\"px-3 text-md md:text-lg\">\u5168\u90E8</span>\n  </a>\n  @for (link of items; track link; let index = $index) {\n    <a\n      class=\"cursor-pointer h-8 bg-[--rt-10-percent-layer] md:bg-white rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n      routerLinkActive=\"chip-bar-active\"\n      [routerLink]=\"[router(), link.link]\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n    >\n      <span class=\"px-3 text-md md:text-lg\">{{ link.name }}</span>\n    </a>\n  }\n</div>\n", styles: ["rolatech-chip-bar{padding-left:var(--rt-chip-bar-padding-left, 0px);padding-right:var(--rt-chip-bar-padding-right, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000)}.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}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\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"] }], encapsulation: i0.ViewEncapsulation.None });
+    items = input([]);
+    fluid = input(false, { transform: booleanAttribute });
+    platformId = inject(PLATFORM_ID);
+    clientWidth = 0;
+    scrollWidth = 0;
+    scrollLeft = 0;
+    ngAfterViewInit() {
+        this.clientWidth = this.el.nativeElement.clientWidth;
+        this.scrollWidth = this.scroller()?.nativeElement.scrollWidth;
+        this.el.nativeElement.setAttribute('at-start', '');
+        this.el.nativeElement.setAttribute('fluid-width', '');
+        if (isPlatformBrowser(this.platformId)) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    this.setCustomProperties(entry.contentRect.width);
+                    this.init();
+                }
+            });
+            this.resizeObserver.observe(this.el.nativeElement);
+        }
+    }
+    setCustomProperties(width) {
+        this.clientWidth = width;
+        this.el.nativeElement.style.setProperty('--rt-rich-grid-chips-bar-width', width + 'px');
+    }
+    init() {
+        if (this.clientWidth + this.scrollLeft > this.scrollWidth) {
+            this.el.nativeElement.setAttribute('at-end', '');
+        }
+        else {
+            this.el.nativeElement.removeAttribute('at-end', '');
+        }
+    }
+    onScroll(event) {
+        this.scrollLeft = event.target.scrollLeft;
+        this.init();
+        if (this.scrollLeft > 0) {
+            this.el.nativeElement.removeAttribute('at-start', '');
+        }
+        else {
+            this.el.nativeElement.setAttribute('at-start', '');
+        }
+    }
+    leftArrowClick() {
+        this.scroller().nativeElement.scrollLeft -= 320;
+    }
+    rightArrowClick() {
+        this.scroller().nativeElement.scrollLeft += 320;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.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: "18.0.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 } }, 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-left, 0px);padding-right:var(--rt-chip-bar-padding-right, 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}#chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px);width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flexbox;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--ytd-rich-grid-content-max-width) + 48px);padding:0 24px}#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:flexbox;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:flexbox;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]", 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.2", ngImport: i0, type: ChipBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-chip-bar', standalone: true, imports: [CommonModule, RouterModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n>\n  <a\n    class=\"cursor-pointer h-8 bg-[--rt-10-percent-layer] md:bg-white rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n    routerLinkActive=\"chip-bar-active\"\n    routerLink=\"/courses\"\n  >\n    <span class=\"px-3 text-md md:text-lg\">\u5168\u90E8</span>\n  </a>\n  @for (link of items; track link; let index = $index) {\n    <a\n      class=\"cursor-pointer h-8 bg-[--rt-10-percent-layer] md:bg-white rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n      routerLinkActive=\"chip-bar-active\"\n      [routerLink]=\"[router(), link.link]\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n    >\n      <span class=\"px-3 text-md md:text-lg\">{{ link.name }}</span>\n    </a>\n  }\n</div>\n", styles: ["rolatech-chip-bar{padding-left:var(--rt-chip-bar-padding-left, 0px);padding-right:var(--rt-chip-bar-padding-right, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000)}.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}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
-        }], propDecorators: { hasId: [{
+            args: [{ selector: 'rolatech-chip-bar', standalone: true, imports: [CommonModule, RouterModule, IconButtonComponent, 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-left, 0px);padding-right:var(--rt-chip-bar-padding-right, 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}#chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px);width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flexbox;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--ytd-rich-grid-content-max-width) + 48px);padding:0 24px}#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:flexbox;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:flexbox;display:flex;flex-direction:column;justify-content:center}#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}rolatech-chip-bar[at-start] #left-arrow.rolatech-chip-bar{display:none}rolatech-chip-bar[at-end] #right-arrow.rolatech-chip-bar{display:none}#left-arrow.rolatech-chip-bar:after,#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}#left-arrow.rolatech-chip-bar:after{background:linear-gradient(to right,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#right-arrow.rolatech-chip-bar:before{background:linear-gradient(to left,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#chip-item.rolatech-chip-bar{margin:12px 12px 12px 0}#chip-item.rolatech-chip-bar:last-of-type{margin-right:0}#chip-item:not([selected]):hover,#chip-item:not([selected]):focus{background-color:var(--rt-20-percent-layer)}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.MatIconRegistry }, { type: i2$4.DomSanitizer }], propDecorators: { hasId: [{
                 type: HostBinding,
                 args: ['id']
             }], hasClass: [{
@@ -1540,9 +1625,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ selector: 'rolatech-input', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"rt-input-wrapper\">\n  <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100%;padding:8px}.rt-input-wrapper{width:100%;z-index:0;padding:12px;background-color:var(--rt-additive-background, #fff);border-radius:var(--rt-input-rounded, 8px);border:1px solid var(--rt-brand-color)}.rt__input{box-shadow:none;background:none;border-radius:0;width:100%;min-width:0;border:none;display:block}.rt__input:focus-visible{outline:none}\n"] }]
         }] });
 
+class RichItemComponent {
+    hasClass = true;
+    list = input(false, { transform: booleanAttribute });
+    thumbnail = input();
+    avatar = input();
+    title = input();
+    subtitle = input();
+    price = input(0);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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 } }, 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\"></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=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal py-1\">\n      {{ title() }}\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;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: "18.0.2", 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', standalone: true, 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\"></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=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal py-1\">\n      {{ title() }}\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;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
+            }], ctorParameters: null, propDecorators: { hasClass: [{
+                    type: HostBinding,
+                    args: ['class.rolatech-rich-item']
+                }] } }) });
+
+class RichViewComponent {
+    hasClass = true;
+    disableScrollbar = true;
+    platformId = inject(PLATFORM_ID);
+    el = inject(ElementRef);
+    items = contentChildren(RichItemComponent, { read: ElementRef });
+    list = input(false, { transform: booleanAttribute });
+    wrap = input(false, { transform: booleanAttribute });
+    resizeObserver;
+    constructor() {
+        effect(() => {
+            if (this.list()) {
+                this.el.nativeElement.setAttribute('list', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('list', '');
+            }
+            if (this.wrap()) {
+                this.el.nativeElement.setAttribute('wrap', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('wrap', '');
+            }
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    // this.setCustomProperties(entry.contentRect.width);
+                }
+            });
+            this.resizeObserver.observe(this.el.nativeElement);
+        }
+    }
+    ngAfterViewInit() { }
+    setCustomProperties(width) {
+        if (width <= 600) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 1);
+        }
+        if (600 < width && width <= 768) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 2);
+        }
+        if (768 < width && width <= 1280) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 3);
+        }
+        if (1280 < width && width <= 1536) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 4);
+        }
+        if (width > 1536) {
+            this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 5);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.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", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", 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"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-rich-view']
+            }], disableScrollbar: [{
+                type: HostBinding,
+                args: ['class.scrollbar-hide']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, AvatarComponent, BaseComponent, ChipBarComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContentComponent, EmptyComponent, FolderComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, ListComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, SpacerComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
+export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, AvatarComponent, BaseComponent, ChipBarComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContentComponent, EmptyComponent, FolderComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, 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 };
 //# sourceMappingURL=rolatech-angular-components.mjs.map