@rolatech/angular-components 20.3.0-beta.3 → 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;
@@ -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