@rolatech/angular-components 20.3.0-beta.2 → 20.3.0-beta.4

package/fesm2022/rolatech-angular-components.mjs

@@ -716,6 +716,10 @@ class DrawerComponent {
         const items = this.links() ?? [];
         return !!items[index + 1]?.children?.length;
     }
+    isPreviousItemChildren(index) {
+        const items = this.links() ?? [];
+        return !!items[index - 1]?.children?.length;
+    }
     init(isMobile) {
         this._opened = !isMobile;
         this.isMobile = isMobile;
@@ -754,7 +758,7 @@ class DrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DrawerComponent, isStandalone: true, selector: "rolatech-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-drawer", "style.transition-duration": "200ms", "ngSkipHydration": "" }, classAttribute: "rolatech-drawer" }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-drawer\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n        <div class=\"text-(--rt-text-primary) text-lg md:text-xl font-bold cursor-pointer\" routerLink=\"/\">\n          <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n          <span i18n>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n        <div class=\"block p-3\">\n          @for (item of links(); track $index; let i = $index) {\n            @if (item.children) {\n              <div\n                class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-y border-(--rt-border-color)\"\n                [class.mb-0]=\"isNextItemChildren(i)\"\n              >\n                <div class=\"w-full\">\n                  <div class=\"flex items-center h-10\">\n                    <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n                  </div>\n                  <div class=\"flex flex-col\">\n                    @for (child of item.children; track child) {\n                      <a\n                        id=\"endpoint\"\n                        class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n                        [routerLink]=\"routerLinkOf(child)\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n                        #routerLink=\"routerLinkActive\"\n                      >\n                        <div class=\"flex justify-between items-center w-full\">\n                          <div class=\"flex justify-start items-center\">\n                            @if (child.icon) {\n                              <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ child.icon }}</rolatech-icon>\n                            }\n                            <div class=\"flex flex-col ml-3\">\n                              <span i18n>{{ labelOf(child) }}</span>\n                              <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n                            </div>\n                          </div>\n                        </div>\n                      </a>\n                    }\n                  </div>\n                </div>\n              </div>\n            } @else {\n              @if (isExternal(item)) {\n                <a\n                  class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n                  [href]=\"hrefOf(item)\"\n                  target=\"_blank\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start items-center\">\n                      @if (item.icon) {\n                        <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ labelOf(item) }}</span>\n                        <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                      </div>\n                    </div>\n                    <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n                  </div>\n                </a>\n              } @else {\n                @if (item.button) {\n                  <a\n                    class=\"flex rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                    routerLinkActive=\"drawer-active\"\n                    [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                    #routerLink=\"routerLinkActive\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                        </div>\n                      </div>\n                    </div>\n                  </a>\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}.children-group+.children-group{border-top:0;margin-top:0}\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 }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DrawerComponent, isStandalone: true, selector: "rolatech-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-drawer", "style.transition-duration": "200ms", "ngSkipHydration": "" }, classAttribute: "rolatech-drawer" }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-drawer\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n        <div class=\"text-(--rt-text-primary) text-lg md:text-xl font-bold cursor-pointer\" routerLink=\"/\">\n          <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n          <span i18n>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n        <div class=\"block p-3\">\n          @for (item of links(); track $index; let i = $index) {\n            @if (item.children) {\n              <div\n                class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-b border-(--rt-border-color)\"\n                [class.border-t]=\"!isPreviousItemChildren(i)\"\n                [class.mt-0]=\"isPreviousItemChildren(i)\"\n                [class.mb-0]=\"isNextItemChildren(i)\"\n              >\n                <div class=\"w-full\">\n                  <div class=\"flex items-center h-10\">\n                    <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n                  </div>\n                  <div class=\"flex flex-col\">\n                    @for (child of item.children; track child) {\n                      <a\n                        id=\"endpoint\"\n                        class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n                        [routerLink]=\"routerLinkOf(child)\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n                        #routerLink=\"routerLinkActive\"\n                      >\n                        <div class=\"flex justify-between items-center w-full\">\n                          <div class=\"flex justify-start items-center\">\n                            @if (child.icon) {\n                              <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ child.icon }}</rolatech-icon>\n                            }\n                            <div class=\"flex flex-col ml-3\">\n                              <span i18n>{{ labelOf(child) }}</span>\n                              <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n                            </div>\n                          </div>\n                        </div>\n                      </a>\n                    }\n                  </div>\n                </div>\n              </div>\n            } @else {\n              @if (isExternal(item)) {\n                <a\n                  class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n                  [href]=\"hrefOf(item)\"\n                  target=\"_blank\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start items-center\">\n                      @if (item.icon) {\n                        <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ labelOf(item) }}</span>\n                        <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                      </div>\n                    </div>\n                    <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n                  </div>\n                </a>\n              } @else {\n                @if (item.button) {\n                  <a\n                    class=\"flex rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                    routerLinkActive=\"drawer-active\"\n                    [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                    #routerLink=\"routerLinkActive\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                        </div>\n                      </div>\n                    </div>\n                  </a>\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}\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 }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -772,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         class: 'rolatech-drawer',
                         'style.transition-duration': '200ms',
                         ngSkipHydration: '',
-                    }, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-drawer\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n        <div class=\"text-(--rt-text-primary) text-lg md:text-xl font-bold cursor-pointer\" routerLink=\"/\">\n          <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n          <span i18n>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n        <div class=\"block p-3\">\n          @for (item of links(); track $index; let i = $index) {\n            @if (item.children) {\n              <div\n                class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-y border-(--rt-border-color)\"\n                [class.mb-0]=\"isNextItemChildren(i)\"\n              >\n                <div class=\"w-full\">\n                  <div class=\"flex items-center h-10\">\n                    <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n                  </div>\n                  <div class=\"flex flex-col\">\n                    @for (child of item.children; track child) {\n                      <a\n                        id=\"endpoint\"\n                        class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n                        [routerLink]=\"routerLinkOf(child)\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n                        #routerLink=\"routerLinkActive\"\n                      >\n                        <div class=\"flex justify-between items-center w-full\">\n                          <div class=\"flex justify-start items-center\">\n                            @if (child.icon) {\n                              <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ child.icon }}</rolatech-icon>\n                            }\n                            <div class=\"flex flex-col ml-3\">\n                              <span i18n>{{ labelOf(child) }}</span>\n                              <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n                            </div>\n                          </div>\n                        </div>\n                      </a>\n                    }\n                  </div>\n                </div>\n              </div>\n            } @else {\n              @if (isExternal(item)) {\n                <a\n                  class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n                  [href]=\"hrefOf(item)\"\n                  target=\"_blank\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start items-center\">\n                      @if (item.icon) {\n                        <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ labelOf(item) }}</span>\n                        <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                      </div>\n                    </div>\n                    <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n                  </div>\n                </a>\n              } @else {\n                @if (item.button) {\n                  <a\n                    class=\"flex rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                    routerLinkActive=\"drawer-active\"\n                    [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                    #routerLink=\"routerLinkActive\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                        </div>\n                      </div>\n                    </div>\n                  </a>\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}.children-group+.children-group{border-top:0;margin-top:0}\n"] }]
+                    }, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n  <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n    <div id=\"guide-spacer\"></div>\n    <div id=\"guide-content\" class=\"rolatech-drawer\">\n      <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n        <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n        <div class=\"text-(--rt-text-primary) text-lg md:text-xl font-bold cursor-pointer\" routerLink=\"/\">\n          <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n          <span i18n>{{ appLayout.subtitle }}</span>\n        </div>\n      </div>\n      <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n        <div class=\"block p-3\">\n          @for (item of links(); track $index; let i = $index) {\n            @if (item.children) {\n              <div\n                class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-b border-(--rt-border-color)\"\n                [class.border-t]=\"!isPreviousItemChildren(i)\"\n                [class.mt-0]=\"isPreviousItemChildren(i)\"\n                [class.mb-0]=\"isNextItemChildren(i)\"\n              >\n                <div class=\"w-full\">\n                  <div class=\"flex items-center h-10\">\n                    <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n                  </div>\n                  <div class=\"flex flex-col\">\n                    @for (child of item.children; track child) {\n                      <a\n                        id=\"endpoint\"\n                        class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n                        [routerLink]=\"routerLinkOf(child)\"\n                        (click)=\"this.isPersistent ? '' : this.close()\"\n                        routerLinkActive=\"drawer-active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n                        #routerLink=\"routerLinkActive\"\n                      >\n                        <div class=\"flex justify-between items-center w-full\">\n                          <div class=\"flex justify-start items-center\">\n                            @if (child.icon) {\n                              <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ child.icon }}</rolatech-icon>\n                            }\n                            <div class=\"flex flex-col ml-3\">\n                              <span i18n>{{ labelOf(child) }}</span>\n                              <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n                            </div>\n                          </div>\n                        </div>\n                      </a>\n                    }\n                  </div>\n                </div>\n              </div>\n            } @else {\n              @if (isExternal(item)) {\n                <a\n                  class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n                  [href]=\"hrefOf(item)\"\n                  target=\"_blank\"\n                  (click)=\"this.isPersistent ? '' : this.close()\"\n                >\n                  <div class=\"flex justify-between items-center w-full\">\n                    <div class=\"flex justify-start items-center\">\n                      @if (item.icon) {\n                        <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                      }\n                      <div class=\"flex flex-col ml-3\">\n                        <span>{{ labelOf(item) }}</span>\n                        <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                      </div>\n                    </div>\n                    <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n                  </div>\n                </a>\n              } @else {\n                @if (item.button) {\n                  <a\n                    class=\"flex rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n                    [routerLink]=\"routerLinkOf(item)\"\n                    (click)=\"this.isPersistent ? '' : this.close()\"\n                    routerLinkActive=\"drawer-active\"\n                    [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n                    #routerLink=\"routerLinkActive\"\n                  >\n                    <div class=\"flex justify-between items-center w-full\">\n                      <div class=\"flex justify-start items-center\">\n                        @if (item.icon) {\n                          <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n                        }\n                        <div class=\"flex flex-col ml-3\">\n                          <span i18n>{{ labelOf(item) }}</span>\n                          <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n                        </div>\n                      </div>\n                    </div>\n                  </a>\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}\n"] }]
         }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], guideEl: [{ type: i0.ViewChild, args: ['guide', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], scrimEl: [{ type: i0.ViewChild, args: ['scrim', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }] } });
 
 class MiniGuideComponent {
@@ -936,6 +940,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     }, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{--rt-persistent-guide-width: 256px;--rt-mini-guide-width: 72px;display:flex;flex-direction:column;width:100%;height:100dvh;position:relative;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:var(--rt-persistent-guide-width)}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:var(--rt-persistent-guide-width)}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width)}rolatech-page{display:block;margin-top:56px;flex:1 1 auto}rolatech-page[mini-guide-visible] .content{margin-left:72px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { topbar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TopbarComponent), { isSignal: true }] }], drawer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DrawerComponent), { isSignal: true }] }], page: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppPageComponent), { isSignal: true }] }], guide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MiniGuideComponent), { isSignal: true }] }] } });
 
+class AppShellComponent {
+    links = input([], ...(ngDevMode ? [{ debugName: "links" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: AppShellComponent, isStandalone: true, selector: "rolatech-app-shell", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <rolatech-layout>
+      <rolatech-topbar>
+        <ng-content select="[shell-topbar]"></ng-content>
+      </rolatech-topbar>
+
+      <rolatech-drawer [links]="links()"></rolatech-drawer>
+
+      <rolatech-page>
+        <ng-content></ng-content>
+      </rolatech-page>
+
+      <ng-content select="[shell-footer]"></ng-content>
+    </rolatech-layout>
+  `, isInline: true, dependencies: [{ kind: "component", type: LayoutComponent, selector: "rolatech-layout" }, { kind: "component", type: TopbarComponent, selector: "rolatech-topbar", inputs: ["link"] }, { kind: "component", type: DrawerComponent, selector: "rolatech-drawer", inputs: ["links", "position", "opened"] }, { kind: "component", type: AppPageComponent, selector: "rolatech-page" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AppShellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-app-shell',
+                    imports: [LayoutComponent, TopbarComponent, DrawerComponent, AppPageComponent],
+                    template: `
+    <rolatech-layout>
+      <rolatech-topbar>
+        <ng-content select="[shell-topbar]"></ng-content>
+      </rolatech-topbar>
+
+      <rolatech-drawer [links]="links()"></rolatech-drawer>
+
+      <rolatech-page>
+        <ng-content></ng-content>
+      </rolatech-page>
+
+      <ng-content select="[shell-footer]"></ng-content>
+    </rolatech-layout>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
+
 class FooterComponent {
     hostId = 'rolatech-footer';
     hasClass = true;
@@ -1290,11 +1337,11 @@ class MediaUploadDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaUploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaUploadDialogComponent, isStandalone: true, selector: "rolatech-media-upload-dialog", ngImport: i0, template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-(--rt-border-color) py-12 flex flex-col justify-center items-center\">\n    <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-button (click)=\"fileInput.click()\" i18n>Upload</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\" i18n>Preview</h2>\n    <div>\n      <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n        @for (item of preMedia; track item.url; let i = $index) {\n          <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n            <article\n              tabindex=\"0\"\n              [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n              class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n            >\n              <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" alt />\n              <section class=\"flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n                @if (item.isUploading) {\n                  <div class=\"flex justify-center items-center w-full h-full\">\n                    <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n                  </div>\n                } @else {\n                  <div class=\"flex\">\n                    <button\n                      (click)=\"removeImage(i)\"\n                      class=\"delete ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 rounded-md\"\n                    >\n                      <svg\n                        class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"24\"\n                        height=\"24\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          class=\"pointer-events-none\"\n                          d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                }\n              </section>\n            </article>\n          </li>\n        }\n      </ul>\n    </div>\n    @if (preMedia.length <= 0) {\n      <div class=\"flex flex-1 flex-wrap\">\n        <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n          <span class=\"text-small text-(--rt-text-secondary)\">No files selected</span>\n        </div>\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close i18n>Cancel</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button i18n>Awaiting</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\" i18n>Upload</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\" i18n>Donw</button>\n  }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaUploadDialogComponent, isStandalone: true, selector: "rolatech-media-upload-dialog", ngImport: i0, template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-(--rt-border-color) py-12 flex flex-col justify-center items-center\">\n    <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-button (click)=\"fileInput.click()\" i18n>Upload</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\" i18n>Preview</h2>\n    <div>\n      <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n        @for (item of preMedia; track item.url; let i = $index) {\n          <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n            <article\n              tabindex=\"0\"\n              [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n              class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n            >\n              <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" alt />\n              <section class=\"flex flex-col rounded-md text-xs wrap-break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n                @if (item.isUploading) {\n                  <div class=\"flex justify-center items-center w-full h-full\">\n                    <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n                  </div>\n                } @else {\n                  <div class=\"flex\">\n                    <button\n                      (click)=\"removeImage(i)\"\n                      class=\"delete ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 rounded-md\"\n                    >\n                      <svg\n                        class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"24\"\n                        height=\"24\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          class=\"pointer-events-none\"\n                          d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                }\n              </section>\n            </article>\n          </li>\n        }\n      </ul>\n    </div>\n    @if (preMedia.length <= 0) {\n      <div class=\"flex flex-1 flex-wrap\">\n        <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n          <span class=\"text-small text-(--rt-text-secondary)\">No files selected</span>\n        </div>\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close i18n>Cancel</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button i18n>Awaiting</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\" i18n>Upload</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\" i18n>Donw</button>\n  }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaUploadDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-media-upload-dialog', imports: [MatDialogContent, MatButtonModule, NgClass, MatProgressSpinnerModule, MatDialogActions, MatDialogClose], template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-(--rt-border-color) py-12 flex flex-col justify-center items-center\">\n    <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-button (click)=\"fileInput.click()\" i18n>Upload</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\" i18n>Preview</h2>\n    <div>\n      <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n        @for (item of preMedia; track item.url; let i = $index) {\n          <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n            <article\n              tabindex=\"0\"\n              [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n              class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n            >\n              <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" alt />\n              <section class=\"flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n                @if (item.isUploading) {\n                  <div class=\"flex justify-center items-center w-full h-full\">\n                    <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n                  </div>\n                } @else {\n                  <div class=\"flex\">\n                    <button\n                      (click)=\"removeImage(i)\"\n                      class=\"delete ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 rounded-md\"\n                    >\n                      <svg\n                        class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"24\"\n                        height=\"24\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          class=\"pointer-events-none\"\n                          d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                }\n              </section>\n            </article>\n          </li>\n        }\n      </ul>\n    </div>\n    @if (preMedia.length <= 0) {\n      <div class=\"flex flex-1 flex-wrap\">\n        <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n          <span class=\"text-small text-(--rt-text-secondary)\">No files selected</span>\n        </div>\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close i18n>Cancel</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button i18n>Awaiting</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\" i18n>Upload</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\" i18n>Donw</button>\n  }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"] }]
+            args: [{ selector: 'rolatech-media-upload-dialog', imports: [MatDialogContent, MatButtonModule, NgClass, MatProgressSpinnerModule, MatDialogActions, MatDialogClose], template: "<mat-dialog-content>\n  <div class=\"border-dashed border-2 border-(--rt-border-color) py-12 flex flex-col justify-center items-center\">\n    <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-button (click)=\"fileInput.click()\" i18n>Upload</button>\n  </div>\n  <div class=\"mt-4\">\n    <h2 class=\"\" i18n>Preview</h2>\n    <div>\n      <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n        @for (item of preMedia; track item.url; let i = $index) {\n          <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n            <article\n              tabindex=\"0\"\n              [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n              class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n            >\n              <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" alt />\n              <section class=\"flex flex-col rounded-md text-xs wrap-break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n                @if (item.isUploading) {\n                  <div class=\"flex justify-center items-center w-full h-full\">\n                    <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n                  </div>\n                } @else {\n                  <div class=\"flex\">\n                    <button\n                      (click)=\"removeImage(i)\"\n                      class=\"delete ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 rounded-md\"\n                    >\n                      <svg\n                        class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"24\"\n                        height=\"24\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          class=\"pointer-events-none\"\n                          d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                }\n              </section>\n            </article>\n          </li>\n        }\n      </ul>\n    </div>\n    @if (preMedia.length <= 0) {\n      <div class=\"flex flex-1 flex-wrap\">\n        <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n          <span class=\"text-small text-(--rt-text-secondary)\">No files selected</span>\n        </div>\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close i18n>Cancel</button>\n  @if (preMedia.length <= 0) {\n    <button mat-button i18n>Awaiting</button>\n  }\n  @if (!isFinished && preMedia.length > 0) {\n    <button mat-button (click)=\"uploadFiles()\" i18n>Upload</button>\n  }\n  @if (isFinished) {\n    <button mat-button [mat-dialog-close]=\"media\" i18n>Donw</button>\n  }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"] }]
         }] });
 
 class MediaListComponent {
@@ -1333,14 +1380,14 @@ class MediaListItemComponent {
         this.deleteMedia.emit(media);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: true, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, host: { attributes: { "id": "rolatech-media-list-item" }, classAttribute: "rolatech-media-list-item" }, ngImport: i0, template: "<div\n  class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n  <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n    <div class=\"flex-1\"></div>\n    <div class=\"w-full\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 group-hover:bg-white\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n        <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n          <span i18n>Delete</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n  <div id=\"thumbnail\" class=\"thumbnail\">\n    <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n  </div>\n  <section\n    (click)=\"onMediaItemClick(media())\"\n    class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n  ></section>\n</div>\n<div class=\"w-full py-1\">\n  @if (uploading()) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: true, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, host: { attributes: { "id": "rolatech-media-list-item" }, classAttribute: "rolatech-media-list-item" }, ngImport: i0, template: "<div\n  class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n  <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n    <div class=\"flex-1\"></div>\n    <div class=\"w-full\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 group-hover:bg-white\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n        <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n          <span i18n>Delete</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n  <div id=\"thumbnail\" class=\"thumbnail\">\n    <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n  </div>\n  <section\n    (click)=\"onMediaItemClick(media())\"\n    class=\"flex flex-col text-xs wrap-break-words w-full h-full z-20 absolute top-0\"\n  ></section>\n</div>\n<div class=\"w-full py-1\">\n  @if (uploading()) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-media-list-item', imports: [MatButtonModule, MatMenuModule, MatIconModule, MatProgressBar], encapsulation: ViewEncapsulation.None, host: {
                         id: 'rolatech-media-list-item',
                         class: 'rolatech-media-list-item',
-                    }, template: "<div\n  class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n  <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n    <div class=\"flex-1\"></div>\n    <div class=\"w-full\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 group-hover:bg-white\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n        <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n          <span i18n>Delete</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n  <div id=\"thumbnail\" class=\"thumbnail\">\n    <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n  </div>\n  <section\n    (click)=\"onMediaItemClick(media())\"\n    class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n  ></section>\n</div>\n<div class=\"w-full py-1\">\n  @if (uploading()) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"] }]
+                    }, template: "<div\n  class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n  <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n    <div class=\"flex-1\"></div>\n    <div class=\"w-full\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"beforeMenu\"\n        class=\"ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 group-hover:bg-white\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n        <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n          <span i18n>Delete</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n  <div id=\"thumbnail\" class=\"thumbnail\">\n    <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n  </div>\n  <section\n    (click)=\"onMediaItemClick(media())\"\n    class=\"flex flex-col text-xs wrap-break-words w-full h-full z-20 absolute top-0\"\n  ></section>\n</div>\n<div class=\"w-full py-1\">\n  @if (uploading()) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"] }]
         }], propDecorators: { media: [{ type: i0.Input, args: [{ isSignal: true, alias: "media", required: true }] }], uploadProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadProgress", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], mediaItemClick: [{ type: i0.Output, args: ["mediaItemClick"] }], deleteMedia: [{ type: i0.Output, args: ["deleteMedia"] }] } });
 
 class NotFoundComponent {
@@ -2161,11 +2208,11 @@ class RichItemComponent {
     thumbnailRatio = input('rectangle', ...(ngDevMode ? [{ debugName: "thumbnailRatio" }] : []));
     thumbnailMode = input('full', ...(ngDevMode ? [{ debugName: "thumbnailMode" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, thumbnailRatio: { classPropertyName: "thumbnailRatio", publicName: "thumbnailRatio", isSignal: true, isRequired: false, transformFunction: null }, thumbnailMode: { classPropertyName: "thumbnailMode", publicName: "thumbnailMode", 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\n      [src]=\"thumbnail()\"\n      size=\"medium\"\n      [ratio]=\"thumbnailRatio()\"\n      [mode]=\"thumbnailMode()\"\n    ></rolatech-thumbnail>\n  } @placeholder {\n    <div class=\"bg-(--rt-10-percent-layer) h-full w-full object-cover aspect-video rounded-lg\"></div>\n  }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n  <div>\n    <div class=\"py-1\">\n      <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n        {{ title() }}\n      </a>\n    </div>\n    <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n      {{ subtitle() }}\n    </div>\n    <ng-content></ng-content>\n  </div>\n  @if (price()) {\n    <div class=\"md:text-lg font-bold py-1\">{{ price() | price }}</div>\n  }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin))}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, thumbnailRatio: { classPropertyName: "thumbnailRatio", publicName: "thumbnailRatio", isSignal: true, isRequired: false, transformFunction: null }, thumbnailMode: { classPropertyName: "thumbnailMode", publicName: "thumbnailMode", 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\n      [src]=\"thumbnail()\"\n      size=\"medium\"\n      [ratio]=\"thumbnailRatio()\"\n      [mode]=\"thumbnailMode()\"\n    ></rolatech-thumbnail>\n  } @placeholder {\n    <div class=\"bg-(--rt-10-percent-layer) h-full w-full object-cover aspect-video rounded-lg\"></div>\n  }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n  <div>\n    <div class=\"py-1\">\n      <a class=\"md:text-xl font-bold wrap-break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n        {{ title() }}\n      </a>\n    </div>\n    <div class=\"invisible h-0 md:h-auto md:visible wrap-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\">{{ price() | price }}</div>\n  }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin))}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.1", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
                 type: Component,
-                args: [{ selector: 'rolatech-rich-item', imports: [CommonModule, ThumbnailComponent, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n  @defer (on viewport()) {\n    <rolatech-thumbnail\n      [src]=\"thumbnail()\"\n      size=\"medium\"\n      [ratio]=\"thumbnailRatio()\"\n      [mode]=\"thumbnailMode()\"\n    ></rolatech-thumbnail>\n  } @placeholder {\n    <div class=\"bg-(--rt-10-percent-layer) h-full w-full object-cover aspect-video rounded-lg\"></div>\n  }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n  <div>\n    <div class=\"py-1\">\n      <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n        {{ title() }}\n      </a>\n    </div>\n    <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n      {{ subtitle() }}\n    </div>\n    <ng-content></ng-content>\n  </div>\n  @if (price()) {\n    <div class=\"md:text-lg font-bold py-1\">{{ price() | price }}</div>\n  }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin))}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
+                args: [{ selector: 'rolatech-rich-item', imports: [CommonModule, ThumbnailComponent, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n  @defer (on viewport()) {\n    <rolatech-thumbnail\n      [src]=\"thumbnail()\"\n      size=\"medium\"\n      [ratio]=\"thumbnailRatio()\"\n      [mode]=\"thumbnailMode()\"\n    ></rolatech-thumbnail>\n  } @placeholder {\n    <div class=\"bg-(--rt-10-percent-layer) h-full w-full object-cover aspect-video rounded-lg\"></div>\n  }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n  <div>\n    <div class=\"py-1\">\n      <a class=\"md:text-xl font-bold wrap-break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n        {{ title() }}\n      </a>\n    </div>\n    <div class=\"invisible h-0 md:h-auto md:visible wrap-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\">{{ price() | price }}</div>\n  }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin))}#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']
@@ -2397,11 +2444,11 @@ class ConversationMessage {
     message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
     call() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ConversationMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ConversationMessage, isStandalone: true, selector: "rolatech-conversation-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n  <div class=\"flex flex-col items-end w-full py-3\">\n    <div\n      class=\"max-w-[80%] rounded-2xl px-4 py-2 shadow-sm bg-[var(--rt-brand-color)] text-white whitespace-pre-wrap break-words\"\n    >\n      <div>{{ message().text }}</div>\n    </div>\n\n    <div class=\"text-xs text-gray-400 mt-1 pr-1\">{{ message().createdAt | date:'shortTime' }}</div>\n  </div>\n</div>\n}@else {\n<div class=\"flex justify-start\">\n  <div class=\"flex flex-col items-start w-full py-3\">\n    @if (message().role === 'assistant') { @for (seg of message().segments ?? []; track $index) { @switch (seg.kind) { @case\n    ('text') {\n    <!-- <div class=\"whitespace-pre-wrap break-all\">{{ seg.text }}</div> -->\n    <!-- <div class=\"markdown-body\" [innerHTML]=\"seg.text | markdown\"></div> -->\n    <article class=\"prose dark:prose-invert max-w-none\" [innerHTML]=\"seg.text | markdown\"></article>\n\n    } @case ('group') {\n    <a\n      class=\"w-full flex flex-col p-3 mb-3 shadow rounded-xl hover:bg-(--rt-raised-background) cursor-pointer\"\n      [routerLink]=\"['/properties', seg.item.id]\"\n      target=\"_blank\"\n    >\n      <div class=\"flex flex-row\">\n        @if (seg.item.mediaUrl) {\n        <div class=\"min-w-20 w-20 object-cover aspect-video rounded-lg mr-3\">\n          @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"seg.item.mediaUrl\" ratio=\"square\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n          } @placeholder {\n          <div class=\"bg-(--rt-raised-background) h-full w-full object-cover aspect-square rounded-lg\"></div>\n          }\n        </div>\n        } @else {\n        <div class=\"min-w-20 w-20 object-cover aspect-square rounded-lg mr-3\">\n          <rolatech-image-placeholder ratio=\"square\"></rolatech-image-placeholder>\n        </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col gap-3 p-1\">\n              <div class=\"font-bold\">{{ seg.item.title }}</div>\n              <div class=\"mt-1\">{{ seg.item.price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"mx-2 my-3 bg-black opacity-10 h-[1px]\"></div>\n      <div class=\"px-1\">\n        <div><span class=\"opacity-70 text-sm\">Address: </span>{{seg.item.address}}</div>\n        @if (seg.item.phone) {\n        <div><span class=\"opacity-70 text-sm\">Phone: </span>{{seg.item.phone}}</div>\n        <button mat-flat-button (click)=\"call()\">Call me</button>\n        }\n      </div>\n    </a>\n    } @case ('json') {\n    <pre class=\"mt-2 text-xs overflow-auto\">{{ seg.data | json }}</pre>\n    } @case ('tool') {\n    <div class=\"w-full opacity-70 py-2 rounded-xl text-sm bg-(--rt-raised-background) mb-2 break-all\">\n      <span class=\"font-bold\">Using Tool</span><span> | {{ seg.tool.tool }}: {{ seg.tool.args }} {{seg.tool.results}}</span>\n    </div>\n    } } } @if (message().done) {\n    <div class=\"text-xs opacity-50 mt-2\">[done]</div>\n    } }\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: MarkdownPipe, name: "markdown" }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ConversationMessage, isStandalone: true, selector: "rolatech-conversation-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n  <div class=\"flex flex-col items-end w-full py-3\">\n    <div\n      class=\"max-w-[80%] rounded-2xl px-4 py-2 shadow-sm bg-(--rt-brand-color) text-white whitespace-pre-wrap wrap-break-words\"\n    >\n      <div>{{ message().text }}</div>\n    </div>\n\n    <div class=\"text-xs text-gray-400 mt-1 pr-1\">{{ message().createdAt | date:'shortTime' }}</div>\n  </div>\n</div>\n}@else {\n<div class=\"flex justify-start\">\n  <div class=\"flex flex-col items-start w-full py-3\">\n    @if (message().role === 'assistant') { @for (seg of message().segments ?? []; track $index) { @switch (seg.kind) { @case\n    ('text') {\n    <!-- <div class=\"whitespace-pre-wrap break-all\">{{ seg.text }}</div> -->\n    <!-- <div class=\"markdown-body\" [innerHTML]=\"seg.text | markdown\"></div> -->\n    <article class=\"prose dark:prose-invert max-w-none\" [innerHTML]=\"seg.text | markdown\"></article>\n\n    } @case ('group') {\n    <a\n      class=\"w-full flex flex-col p-3 mb-3 shadow rounded-xl hover:bg-(--rt-raised-background) cursor-pointer\"\n      [routerLink]=\"['/properties', seg.item.id]\"\n      target=\"_blank\"\n    >\n      <div class=\"flex flex-row\">\n        @if (seg.item.mediaUrl) {\n        <div class=\"min-w-20 w-20 object-cover aspect-video rounded-lg mr-3\">\n          @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"seg.item.mediaUrl\" ratio=\"square\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n          } @placeholder {\n          <div class=\"bg-(--rt-raised-background) h-full w-full object-cover aspect-square rounded-lg\"></div>\n          }\n        </div>\n        } @else {\n        <div class=\"min-w-20 w-20 object-cover aspect-square rounded-lg mr-3\">\n          <rolatech-image-placeholder ratio=\"square\"></rolatech-image-placeholder>\n        </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col gap-3 p-1\">\n              <div class=\"font-bold\">{{ seg.item.title }}</div>\n              <div class=\"mt-1\">{{ seg.item.price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"mx-2 my-3 bg-black opacity-10 h-[1px]\"></div>\n      <div class=\"px-1\">\n        <div><span class=\"opacity-70 text-sm\">Address: </span>{{seg.item.address}}</div>\n        @if (seg.item.phone) {\n        <div><span class=\"opacity-70 text-sm\">Phone: </span>{{seg.item.phone}}</div>\n        <button mat-flat-button (click)=\"call()\">Call me</button>\n        }\n      </div>\n    </a>\n    } @case ('json') {\n    <pre class=\"mt-2 text-xs overflow-auto\">{{ seg.data | json }}</pre>\n    } @case ('tool') {\n    <div class=\"w-full opacity-70 py-2 rounded-xl text-sm bg-(--rt-raised-background) mb-2 break-all\">\n      <span class=\"font-bold\">Using Tool</span><span> | {{ seg.tool.tool }}: {{ seg.tool.args }} {{seg.tool.results}}</span>\n    </div>\n    } } } @if (message().done) {\n    <div class=\"text-xs opacity-50 mt-2\">[done]</div>\n    } }\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: MarkdownPipe, name: "markdown" }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.1", ngImport: i0, type: ConversationMessage, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
                 type: Component,
-                args: [{ selector: 'rolatech-conversation-message', imports: [CommonModule, RouterLink, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MarkdownPipe], template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n  <div class=\"flex flex-col items-end w-full py-3\">\n    <div\n      class=\"max-w-[80%] rounded-2xl px-4 py-2 shadow-sm bg-[var(--rt-brand-color)] text-white whitespace-pre-wrap break-words\"\n    >\n      <div>{{ message().text }}</div>\n    </div>\n\n    <div class=\"text-xs text-gray-400 mt-1 pr-1\">{{ message().createdAt | date:'shortTime' }}</div>\n  </div>\n</div>\n}@else {\n<div class=\"flex justify-start\">\n  <div class=\"flex flex-col items-start w-full py-3\">\n    @if (message().role === 'assistant') { @for (seg of message().segments ?? []; track $index) { @switch (seg.kind) { @case\n    ('text') {\n    <!-- <div class=\"whitespace-pre-wrap break-all\">{{ seg.text }}</div> -->\n    <!-- <div class=\"markdown-body\" [innerHTML]=\"seg.text | markdown\"></div> -->\n    <article class=\"prose dark:prose-invert max-w-none\" [innerHTML]=\"seg.text | markdown\"></article>\n\n    } @case ('group') {\n    <a\n      class=\"w-full flex flex-col p-3 mb-3 shadow rounded-xl hover:bg-(--rt-raised-background) cursor-pointer\"\n      [routerLink]=\"['/properties', seg.item.id]\"\n      target=\"_blank\"\n    >\n      <div class=\"flex flex-row\">\n        @if (seg.item.mediaUrl) {\n        <div class=\"min-w-20 w-20 object-cover aspect-video rounded-lg mr-3\">\n          @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"seg.item.mediaUrl\" ratio=\"square\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n          } @placeholder {\n          <div class=\"bg-(--rt-raised-background) h-full w-full object-cover aspect-square rounded-lg\"></div>\n          }\n        </div>\n        } @else {\n        <div class=\"min-w-20 w-20 object-cover aspect-square rounded-lg mr-3\">\n          <rolatech-image-placeholder ratio=\"square\"></rolatech-image-placeholder>\n        </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col gap-3 p-1\">\n              <div class=\"font-bold\">{{ seg.item.title }}</div>\n              <div class=\"mt-1\">{{ seg.item.price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"mx-2 my-3 bg-black opacity-10 h-[1px]\"></div>\n      <div class=\"px-1\">\n        <div><span class=\"opacity-70 text-sm\">Address: </span>{{seg.item.address}}</div>\n        @if (seg.item.phone) {\n        <div><span class=\"opacity-70 text-sm\">Phone: </span>{{seg.item.phone}}</div>\n        <button mat-flat-button (click)=\"call()\">Call me</button>\n        }\n      </div>\n    </a>\n    } @case ('json') {\n    <pre class=\"mt-2 text-xs overflow-auto\">{{ seg.data | json }}</pre>\n    } @case ('tool') {\n    <div class=\"w-full opacity-70 py-2 rounded-xl text-sm bg-(--rt-raised-background) mb-2 break-all\">\n      <span class=\"font-bold\">Using Tool</span><span> | {{ seg.tool.tool }}: {{ seg.tool.args }} {{seg.tool.results}}</span>\n    </div>\n    } } } @if (message().done) {\n    <div class=\"text-xs opacity-50 mt-2\">[done]</div>\n    } }\n  </div>\n</div>\n}\n" }]
+                args: [{ selector: 'rolatech-conversation-message', imports: [CommonModule, RouterLink, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MarkdownPipe], template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n  <div class=\"flex flex-col items-end w-full py-3\">\n    <div\n      class=\"max-w-[80%] rounded-2xl px-4 py-2 shadow-sm bg-(--rt-brand-color) text-white whitespace-pre-wrap wrap-break-words\"\n    >\n      <div>{{ message().text }}</div>\n    </div>\n\n    <div class=\"text-xs text-gray-400 mt-1 pr-1\">{{ message().createdAt | date:'shortTime' }}</div>\n  </div>\n</div>\n}@else {\n<div class=\"flex justify-start\">\n  <div class=\"flex flex-col items-start w-full py-3\">\n    @if (message().role === 'assistant') { @for (seg of message().segments ?? []; track $index) { @switch (seg.kind) { @case\n    ('text') {\n    <!-- <div class=\"whitespace-pre-wrap break-all\">{{ seg.text }}</div> -->\n    <!-- <div class=\"markdown-body\" [innerHTML]=\"seg.text | markdown\"></div> -->\n    <article class=\"prose dark:prose-invert max-w-none\" [innerHTML]=\"seg.text | markdown\"></article>\n\n    } @case ('group') {\n    <a\n      class=\"w-full flex flex-col p-3 mb-3 shadow rounded-xl hover:bg-(--rt-raised-background) cursor-pointer\"\n      [routerLink]=\"['/properties', seg.item.id]\"\n      target=\"_blank\"\n    >\n      <div class=\"flex flex-row\">\n        @if (seg.item.mediaUrl) {\n        <div class=\"min-w-20 w-20 object-cover aspect-video rounded-lg mr-3\">\n          @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"seg.item.mediaUrl\" ratio=\"square\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n          } @placeholder {\n          <div class=\"bg-(--rt-raised-background) h-full w-full object-cover aspect-square rounded-lg\"></div>\n          }\n        </div>\n        } @else {\n        <div class=\"min-w-20 w-20 object-cover aspect-square rounded-lg mr-3\">\n          <rolatech-image-placeholder ratio=\"square\"></rolatech-image-placeholder>\n        </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col gap-3 p-1\">\n              <div class=\"font-bold\">{{ seg.item.title }}</div>\n              <div class=\"mt-1\">{{ seg.item.price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"mx-2 my-3 bg-black opacity-10 h-[1px]\"></div>\n      <div class=\"px-1\">\n        <div><span class=\"opacity-70 text-sm\">Address: </span>{{seg.item.address}}</div>\n        @if (seg.item.phone) {\n        <div><span class=\"opacity-70 text-sm\">Phone: </span>{{seg.item.phone}}</div>\n        <button mat-flat-button (click)=\"call()\">Call me</button>\n        }\n      </div>\n    </a>\n    } @case ('json') {\n    <pre class=\"mt-2 text-xs overflow-auto\">{{ seg.data | json }}</pre>\n    } @case ('tool') {\n    <div class=\"w-full opacity-70 py-2 rounded-xl text-sm bg-(--rt-raised-background) mb-2 break-all\">\n      <span class=\"font-bold\">Using Tool</span><span> | {{ seg.tool.tool }}: {{ seg.tool.args }} {{seg.tool.results}}</span>\n    </div>\n    } } } @if (message().done) {\n    <div class=\"text-xs opacity-50 mt-2\">[done]</div>\n    } }\n  </div>\n</div>\n}\n" }]
             }], ctorParameters: null, propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } }) });
 
 const isSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -2568,5 +2615,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LAYOUT, AcceptDialogComponent, AccordionComponent, AngularComponentsModule, AppPageComponent, AvatarComponent, BaseComponent, ChatBox, ChipBarComponent, ConfirmationComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, ConversationContent, ConversationHeader, ConversationInput, ConversationMessage, DrawerComponent, EditorComponent, EmptyComponent, EnumSelect, FilterComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, Loading, LocationSelectorComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, PdfViewerComponent, RejectDialogComponent, ResizableContainerComponent, RichGridMediaComponent, RichItemComponent, RichLabelComponent, RichViewComponent, SearchBar, SearchIcon, Skeleton, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, VideoUpload, WechatConnectDialogComponent, provideAngularLayout };
+export { APP_LAYOUT, AcceptDialogComponent, AccordionComponent, AngularComponentsModule, AppPageComponent, AppShellComponent, AvatarComponent, BaseComponent, ChatBox, ChipBarComponent, ConfirmationComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, ConversationContent, ConversationHeader, ConversationInput, ConversationMessage, DrawerComponent, EditorComponent, EmptyComponent, EnumSelect, FilterComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, Loading, LocationSelectorComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, PdfViewerComponent, RejectDialogComponent, ResizableContainerComponent, RichGridMediaComponent, RichItemComponent, RichLabelComponent, RichViewComponent, SearchBar, SearchIcon, Skeleton, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, VideoUpload, WechatConnectDialogComponent, provideAngularLayout };
 //# sourceMappingURL=rolatech-angular-components.mjs.map