@rolatech/angular-components 17.6.12 → 17.6.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/drawer/drawer.component.mjs +54 -52
- package/esm2022/lib/layout/layout.component.mjs +37 -33
- package/esm2022/lib/page/page.component.mjs +6 -4
- package/fesm2022/rolatech-angular-components.mjs +89 -83
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/lib/drawer/drawer.component.d.ts +10 -11
- package/lib/layout/layout.component.d.ts +14 -7
- package/lib/page/page.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -14,6 +14,7 @@ import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layo
|
|
|
14
14
|
import { map, distinctUntilChanged, filter } from 'rxjs';
|
|
15
15
|
import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionModule } from '@angular/material/expansion';
|
|
16
16
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
17
|
+
import { Platform } from '@angular/cdk/platform';
|
|
17
18
|
import { ViewportRuler, ScrollingModule } from '@angular/cdk/scrolling';
|
|
18
19
|
import { APP_CONFIG, AngularCommonModule } from '@rolatech/angular-common';
|
|
19
20
|
import * as i2 from '@angular/material/menu';
|
|
@@ -69,7 +70,6 @@ import { FormsModule } from '@angular/forms';
|
|
|
69
70
|
import * as i2$4 from '@angular/platform-browser';
|
|
70
71
|
import { DomSanitizer, Title } from '@angular/platform-browser';
|
|
71
72
|
import { map as map$1 } from 'lodash';
|
|
72
|
-
import { Platform } from '@angular/cdk/platform';
|
|
73
73
|
|
|
74
74
|
class IconComponent {
|
|
75
75
|
hasClass = true;
|
|
@@ -250,12 +250,11 @@ const panelAnimations$1 = {
|
|
|
250
250
|
};
|
|
251
251
|
|
|
252
252
|
class DrawerComponent {
|
|
253
|
-
|
|
254
|
-
hasClass = true;
|
|
255
|
-
duration = '200ms';
|
|
253
|
+
_enableAnimations = false;
|
|
256
254
|
persistent = inject(APP_LAYOUT).persistent;
|
|
257
255
|
links = input();
|
|
258
256
|
position = input('left');
|
|
257
|
+
opened = input(true);
|
|
259
258
|
el = inject(ElementRef);
|
|
260
259
|
renderer = inject(Renderer2);
|
|
261
260
|
platformId = inject(PLATFORM_ID);
|
|
@@ -265,14 +264,13 @@ class DrawerComponent {
|
|
|
265
264
|
content = viewChild('content');
|
|
266
265
|
scrimEl = viewChild('scrim');
|
|
267
266
|
headerEl = viewChild('header');
|
|
268
|
-
isHandset$;
|
|
269
267
|
isMobile = false;
|
|
270
268
|
isPersistent = true;
|
|
271
|
-
completed = false;
|
|
272
269
|
panelOpenState = false;
|
|
273
|
-
|
|
270
|
+
_opened = false;
|
|
271
|
+
_platform = inject(Platform);
|
|
274
272
|
open() {
|
|
275
|
-
this.
|
|
273
|
+
this._opened = true;
|
|
276
274
|
this.renderer.setAttribute(this.el.nativeElement, 'opened', '');
|
|
277
275
|
this.renderer.setAttribute(this.content()?.nativeElement, 'opened', '');
|
|
278
276
|
if (this.isMobile) {
|
|
@@ -280,7 +278,7 @@ class DrawerComponent {
|
|
|
280
278
|
}
|
|
281
279
|
}
|
|
282
280
|
close() {
|
|
283
|
-
this.
|
|
281
|
+
this._opened = false;
|
|
284
282
|
this.renderer.removeAttribute(this.el.nativeElement, 'opened');
|
|
285
283
|
this.renderer.removeAttribute(this.content()?.nativeElement, 'opened');
|
|
286
284
|
if (this.isMobile) {
|
|
@@ -288,40 +286,47 @@ class DrawerComponent {
|
|
|
288
286
|
}
|
|
289
287
|
}
|
|
290
288
|
toggle() {
|
|
291
|
-
this.
|
|
289
|
+
this._opened ? this.close() : this.open();
|
|
290
|
+
}
|
|
291
|
+
init(isMobile) {
|
|
292
|
+
this._opened = !isMobile;
|
|
293
|
+
this.isMobile = isMobile;
|
|
294
|
+
this.isPersistent = !isMobile;
|
|
295
|
+
if (this._platform.isBrowser) {
|
|
296
|
+
if (isMobile) {
|
|
297
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
|
|
298
|
+
this.renderer.removeAttribute(this.headerEl()?.nativeElement, 'hidden', '');
|
|
299
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'opened');
|
|
300
|
+
this.renderer.removeAttribute(this.content()?.nativeElement, 'opened');
|
|
301
|
+
}
|
|
302
|
+
else {
|
|
303
|
+
if (this.persistent) {
|
|
304
|
+
this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
|
|
305
|
+
this.renderer.setAttribute(this.headerEl()?.nativeElement, 'hidden', '');
|
|
306
|
+
this.renderer.setAttribute(this.el.nativeElement, 'opened', '');
|
|
307
|
+
this.renderer.setAttribute(this.content()?.nativeElement, 'opened', '');
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
292
311
|
}
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
this.renderer.removeAttribute(this.el.nativeElement, 'opened');
|
|
308
|
-
this.renderer.removeAttribute(this.content()?.nativeElement, 'opened');
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
else {
|
|
312
|
-
if (this.persistent) {
|
|
313
|
-
this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
|
|
314
|
-
this.renderer.setAttribute(this.headerEl()?.nativeElement, 'hidden', '');
|
|
315
|
-
this.renderer.setAttribute(this.el.nativeElement, 'opened', '');
|
|
316
|
-
this.renderer.setAttribute(this.content()?.nativeElement, 'opened', '');
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
},
|
|
320
|
-
});
|
|
312
|
+
ngAfterContentInit() {
|
|
313
|
+
this.renderer.setAttribute(this.el.nativeElement, 'position', this.position());
|
|
314
|
+
this.breakpointObserver
|
|
315
|
+
.observe(['(max-width: 768px)'])
|
|
316
|
+
.pipe(map((result) => result.matches))
|
|
317
|
+
.subscribe({
|
|
318
|
+
next: (res) => {
|
|
319
|
+
this.init(res);
|
|
320
|
+
},
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
ngAfterContentChecked() {
|
|
324
|
+
if (this._platform.isBrowser) {
|
|
325
|
+
this._enableAnimations = true;
|
|
321
326
|
}
|
|
322
327
|
}
|
|
323
328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
324
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", 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 } }, host: { properties: { "id": "this.hostId", "class.rolatech-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n <div class=\"block p-3\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"flex cursor-pointer overflow-hidden\">\n @if (item.icon) {\n <div class=\"h-11 flex items-center\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n </div>\n }\n <div class=\"w-full\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon [@indicator]=\"panelOpenState === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n </div>\n <div\n class=\"flex flex-col ml-4 overflow-visible\"\n [@content]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n >\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-2 rt-guide-entry\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75 text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mb-2\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-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}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }], animations: [panelAnimations$1.indicator, panelAnimations$1.content], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DrawerComponent, isStandalone: true, selector: "rolatech-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-drawer", "style.transition-duration": "200ms", "ngSkipHydration": "" }, classAttribute: "rolatech-drawer" }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n <div class=\"block p-3\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"flex cursor-pointer overflow-hidden\">\n @if (item.icon) {\n <div class=\"h-11 flex items-center\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n </div>\n }\n <div class=\"w-full\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon [@indicator]=\"panelOpenState === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n </div>\n <div\n class=\"flex flex-col ml-4 overflow-visible\"\n [@content]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n >\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-2 rt-guide-entry\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75 text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mb-2\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }], animations: [panelAnimations$1.indicator, panelAnimations$1.content], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
325
330
|
}
|
|
326
331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
327
332
|
type: Component,
|
|
@@ -337,17 +342,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
337
342
|
IconComponent,
|
|
338
343
|
MenuIconComponent,
|
|
339
344
|
MatButtonModule,
|
|
340
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [panelAnimations$1.indicator, panelAnimations$1.content],
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
}], duration: [{
|
|
348
|
-
type: HostBinding,
|
|
349
|
-
args: ['style.transition-duration']
|
|
350
|
-
}] } });
|
|
345
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [panelAnimations$1.indicator, panelAnimations$1.content], host: {
|
|
346
|
+
id: 'rolatech-drawer',
|
|
347
|
+
class: 'rolatech-drawer',
|
|
348
|
+
'style.transition-duration': '200ms',
|
|
349
|
+
ngSkipHydration: '',
|
|
350
|
+
}, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n <div class=\"block p-3\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"flex cursor-pointer overflow-hidden\">\n @if (item.icon) {\n <div class=\"h-11 flex items-center\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n </div>\n }\n <div class=\"w-full\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon [@indicator]=\"panelOpenState === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n </div>\n <div\n class=\"flex flex-col ml-4 overflow-visible\"\n [@content]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n >\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-2 rt-guide-entry\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75 text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mb-2\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
|
|
351
|
+
}] });
|
|
351
352
|
|
|
352
353
|
class MiniGuideComponent {
|
|
353
354
|
hasId = 'rolatech-mini-guide';
|
|
@@ -421,9 +422,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
421
422
|
|
|
422
423
|
class AppPageComponent {
|
|
423
424
|
el = inject((ElementRef));
|
|
425
|
+
constructor() { }
|
|
424
426
|
ngOnInit() { }
|
|
427
|
+
ngAfterContentInit() { }
|
|
425
428
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: AppPageComponent, isStandalone: true, selector: "rolatech-page", host: { attributes: { "id": "rolatech-page", "ngSkipHydration": "" }, classAttribute: "rolatech-page rt-page" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
429
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: AppPageComponent, isStandalone: true, selector: "rolatech-page", host: { attributes: { "id": "rolatech-page", "ngSkipHydration": "" }, classAttribute: "rolatech-page rt-page" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["rolatech-page[hidden]{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
427
430
|
}
|
|
428
431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AppPageComponent, decorators: [{
|
|
429
432
|
type: Component,
|
|
@@ -431,57 +434,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
431
434
|
id: 'rolatech-page',
|
|
432
435
|
class: 'rolatech-page rt-page',
|
|
433
436
|
ngSkipHydration: '',
|
|
434
|
-
}, template: "<ng-content></ng-content>\n" }]
|
|
435
|
-
}] });
|
|
437
|
+
}, template: "<ng-content></ng-content>\n", styles: ["rolatech-page[hidden]{opacity:0}\n"] }]
|
|
438
|
+
}], ctorParameters: () => [] });
|
|
436
439
|
|
|
437
440
|
const EXTRA_SMALL_WIDTH_BREAKPOINT = 768;
|
|
438
441
|
class LayoutComponent {
|
|
439
|
-
_elementRef;
|
|
440
442
|
appLayout = inject(APP_LAYOUT);
|
|
441
443
|
viewportRuler = inject(ViewportRuler);
|
|
442
444
|
el = inject((ElementRef));
|
|
443
445
|
renderer = inject(Renderer2);
|
|
444
|
-
|
|
446
|
+
_platform = inject(Platform);
|
|
445
447
|
breakpointObserver = inject(BreakpointObserver);
|
|
446
448
|
topbar = contentChild.required(TopbarComponent);
|
|
447
449
|
drawer = contentChild.required(DrawerComponent);
|
|
450
|
+
page = contentChild.required(AppPageComponent);
|
|
448
451
|
guide = contentChild.required(MiniGuideComponent);
|
|
449
|
-
currentBreakpoint = '';
|
|
450
452
|
breakpoint$ = this.breakpointObserver
|
|
451
453
|
.observe([Breakpoints.Large, Breakpoints.Medium, '(max-width: 768px)'])
|
|
452
454
|
.pipe(distinctUntilChanged());
|
|
453
|
-
constructor(
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
455
|
+
constructor() { }
|
|
456
|
+
ngAfterContentInit() {
|
|
457
|
+
this.renderer.setAttribute(this.page().el.nativeElement, 'hidden', '');
|
|
458
|
+
if (this._platform.isBrowser) {
|
|
459
|
+
this.init();
|
|
458
460
|
}
|
|
459
461
|
}
|
|
460
|
-
ngOnInit() {
|
|
462
|
+
ngOnInit() { }
|
|
463
|
+
ngOnDestroy() { }
|
|
464
|
+
open() { }
|
|
465
|
+
close() { }
|
|
466
|
+
toggle() { }
|
|
467
|
+
init() {
|
|
468
|
+
this.renderer.removeAttribute(this.page().el.nativeElement, 'hidden', '');
|
|
461
469
|
if (this.topbar()) {
|
|
462
470
|
this.topbar().appDrawer = this.drawer();
|
|
463
471
|
}
|
|
464
472
|
if (this.appLayout.guide) {
|
|
465
473
|
this.topbar().miniGuide = this.guide();
|
|
466
474
|
}
|
|
467
|
-
if (
|
|
468
|
-
|
|
469
|
-
this.breakpoint$.subscribe(() => this.breakpointChanged());
|
|
470
|
-
}
|
|
471
|
-
this.breakpointObserver
|
|
472
|
-
.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
|
|
473
|
-
.pipe(map((result) => result.matches))
|
|
474
|
-
.subscribe({
|
|
475
|
-
next: (res) => {
|
|
476
|
-
if (res) {
|
|
477
|
-
this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
|
|
478
|
-
}
|
|
479
|
-
else {
|
|
480
|
-
this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
|
|
481
|
-
}
|
|
482
|
-
},
|
|
483
|
-
});
|
|
475
|
+
if (this.appLayout.guide) {
|
|
476
|
+
this.breakpoint$.subscribe(() => this.breakpointChanged());
|
|
484
477
|
}
|
|
478
|
+
this.breakpointObserver
|
|
479
|
+
.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
|
|
480
|
+
.pipe(map((result) => result.matches))
|
|
481
|
+
.subscribe({
|
|
482
|
+
next: (res) => {
|
|
483
|
+
if (res) {
|
|
484
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
|
|
485
|
+
}
|
|
486
|
+
else {
|
|
487
|
+
this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
|
|
488
|
+
}
|
|
489
|
+
},
|
|
490
|
+
});
|
|
485
491
|
}
|
|
486
492
|
breakpointChanged() {
|
|
487
493
|
if (this.breakpointObserver.isMatched(Breakpoints.Large)) {
|
|
@@ -494,8 +500,8 @@ class LayoutComponent {
|
|
|
494
500
|
this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
495
501
|
}
|
|
496
502
|
}
|
|
497
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LayoutComponent, deps: [
|
|
498
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.0", type: LayoutComponent, isStandalone: true, selector: "rolatech-layout", host: { attributes: { "id": "rolatech-layout", "ngSkipHydration": "" }, classAttribute: "rolatech-layout" }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true, isSignal: true }, { propertyName: "guide", first: true, predicate: MiniGuideComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{--rt-persistent-guide-width: 256px;--rt-mini-guide-width: 72px;display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:var(--rt-persistent-guide-width)}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:var(--rt-persistent-guide-width)}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width)}rolatech-page{display:block;margin-top:56px}rolatech-page[mini-guide-visible] .content{margin-left:72px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSidenavModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
503
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
504
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.0", type: LayoutComponent, isStandalone: true, selector: "rolatech-layout", host: { attributes: { "id": "rolatech-layout", "ngSkipHydration": "" }, classAttribute: "rolatech-layout" }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true, isSignal: true }, { propertyName: "page", first: true, predicate: AppPageComponent, descendants: true, isSignal: true }, { propertyName: "guide", first: true, predicate: MiniGuideComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{--rt-persistent-guide-width: 256px;--rt-mini-guide-width: 72px;display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:var(--rt-persistent-guide-width)}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:var(--rt-persistent-guide-width)}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width)}rolatech-page{display:block;margin-top:56px}rolatech-page[mini-guide-visible] .content{margin-left:72px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSidenavModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
499
505
|
}
|
|
500
506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
501
507
|
type: Component,
|
|
@@ -515,11 +521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
515
521
|
DrawerComponent,
|
|
516
522
|
AppPageComponent,
|
|
517
523
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
518
|
-
class: 'rolatech-layout',
|
|
519
524
|
id: 'rolatech-layout',
|
|
525
|
+
class: 'rolatech-layout',
|
|
520
526
|
ngSkipHydration: '',
|
|
521
527
|
}, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{--rt-persistent-guide-width: 256px;--rt-mini-guide-width: 72px;display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:var(--rt-persistent-guide-width)}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:var(--rt-persistent-guide-width)}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width)}rolatech-page{display:block;margin-top:56px}rolatech-page[mini-guide-visible] .content{margin-left:72px}\n"] }]
|
|
522
|
-
}], ctorParameters: () => [
|
|
528
|
+
}], ctorParameters: () => [] });
|
|
523
529
|
|
|
524
530
|
class FooterComponent {
|
|
525
531
|
hostId = 'rolatech-footer';
|