@rolatech/angular-components 17.2.22 → 17.2.23
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/index.mjs +2 -1
- package/esm2022/lib/app-drawer/app-drawer.component.mjs +5 -3
- package/esm2022/lib/app-layout/app-layout.component.mjs +25 -4
- package/esm2022/lib/app-page/app-page.component.mjs +6 -2
- package/esm2022/lib/mini-guide/mini-guide.component.mjs +77 -0
- package/esm2022/lib/topbar/topbar.component.mjs +5 -1
- package/esm2022/provider.mjs +1 -1
- package/fesm2022/rolatech-angular-components.mjs +107 -7
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/app-drawer/app-drawer.component.d.ts +2 -1
- package/lib/app-layout/app-layout.component.d.ts +6 -1
- package/lib/app-page/app-page.component.d.ts +1 -0
- package/lib/mini-guide/mini-guide.component.d.ts +28 -0
- package/lib/topbar/topbar.component.d.ts +2 -0
- package/package.json +1 -1
- package/provider.d.ts +1 -0
- package/themes/_default.scss +1 -1
|
@@ -11,7 +11,7 @@ import { RouterLink, RouterLinkActive, RouterOutlet, RouterEvent, NavigationEnd,
|
|
|
11
11
|
import * as i4 from '@angular/material/button';
|
|
12
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
13
13
|
import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout';
|
|
14
|
-
import { map, shareReplay, filter } from 'rxjs';
|
|
14
|
+
import { map, shareReplay, 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
17
|
import { APP_CONFIG, AngularCommonModule } from '@rolatech/angular-common';
|
|
@@ -149,6 +149,7 @@ class TopbarComponent {
|
|
|
149
149
|
appLayout = inject(APP_LAYOUT);
|
|
150
150
|
isHandset$;
|
|
151
151
|
appDrawer;
|
|
152
|
+
miniGuide;
|
|
152
153
|
constructor() {
|
|
153
154
|
this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Handset]).pipe(map((result) => result.matches), shareReplay());
|
|
154
155
|
}
|
|
@@ -176,6 +177,9 @@ class TopbarComponent {
|
|
|
176
177
|
}
|
|
177
178
|
}
|
|
178
179
|
onToggle() {
|
|
180
|
+
if (this.appLayout.guide) {
|
|
181
|
+
this.miniGuide.toggle();
|
|
182
|
+
}
|
|
179
183
|
this.appDrawer.toggle();
|
|
180
184
|
}
|
|
181
185
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -228,6 +232,7 @@ const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
|
|
|
228
232
|
class AppDrawerComponent {
|
|
229
233
|
opened = false;
|
|
230
234
|
links = input();
|
|
235
|
+
position = input('left');
|
|
231
236
|
hostId = 'rolatech-app-drawer';
|
|
232
237
|
hasClass = true;
|
|
233
238
|
duration = '200ms';
|
|
@@ -267,6 +272,7 @@ class AppDrawerComponent {
|
|
|
267
272
|
}
|
|
268
273
|
ngOnInit() {
|
|
269
274
|
if (isPlatformBrowser(this.platformId)) {
|
|
275
|
+
this.renderer.setAttribute(this.el.nativeElement, 'position', this.position());
|
|
270
276
|
this.completed = false;
|
|
271
277
|
this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset).pipe(map((result) => result.matches));
|
|
272
278
|
this.isHandset$.subscribe({
|
|
@@ -296,7 +302,7 @@ class AppDrawerComponent {
|
|
|
296
302
|
}
|
|
297
303
|
}
|
|
298
304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
299
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"
|
|
305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:700px;transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}.content{display:flex;flex-direction:column;overflow: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: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "component", type: IconComponent, selector: "rolatech-icon" }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
300
306
|
}
|
|
301
307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppDrawerComponent, decorators: [{
|
|
302
308
|
type: Component,
|
|
@@ -310,7 +316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
310
316
|
RouterLinkActive,
|
|
311
317
|
IconButtonComponent,
|
|
312
318
|
IconComponent,
|
|
313
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"
|
|
319
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:700px;transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}.content{display:flex;flex-direction:column;overflow:visible}\n"] }]
|
|
314
320
|
}], propDecorators: { hostId: [{
|
|
315
321
|
type: HostBinding,
|
|
316
322
|
args: ['id']
|
|
@@ -322,16 +328,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
322
328
|
args: ['style.transition-duration']
|
|
323
329
|
}] } });
|
|
324
330
|
|
|
331
|
+
class MiniGuideComponent {
|
|
332
|
+
hasId = 'rolatech-mini-guide';
|
|
333
|
+
hasClass = true;
|
|
334
|
+
el = inject(ElementRef);
|
|
335
|
+
renderer = inject(Renderer2);
|
|
336
|
+
platformId = inject(PLATFORM_ID);
|
|
337
|
+
breakpointObserver = inject(BreakpointObserver);
|
|
338
|
+
items = input();
|
|
339
|
+
title = input(true);
|
|
340
|
+
opened = false;
|
|
341
|
+
disableToggle = false;
|
|
342
|
+
breakpoint$ = this.breakpointObserver.observe([Breakpoints.Large, Breakpoints.Medium, '(max-width: 600px)']);
|
|
343
|
+
ngOnInit() {
|
|
344
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
345
|
+
this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
|
|
346
|
+
this.breakpoint$.subscribe(() => this.breakpointChanged());
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
breakpointChanged() {
|
|
350
|
+
if (this.breakpointObserver.isMatched(Breakpoints.Large)) {
|
|
351
|
+
this.disableToggle = false;
|
|
352
|
+
// this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
353
|
+
// this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
|
|
354
|
+
}
|
|
355
|
+
else if (this.breakpointObserver.isMatched(Breakpoints.Medium)) {
|
|
356
|
+
// this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
|
|
357
|
+
// this.renderer.removeAttribute(this.el.nativeElement, 'hidden');
|
|
358
|
+
}
|
|
359
|
+
else if (this.breakpointObserver.isMatched('(max-width: 600px)')) {
|
|
360
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
361
|
+
this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
|
|
362
|
+
this.disableToggle = true;
|
|
363
|
+
}
|
|
364
|
+
else {
|
|
365
|
+
this.disableToggle = false;
|
|
366
|
+
// this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
|
|
367
|
+
// this.renderer.removeAttribute(this.el.nativeElement, 'hidden');
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
open() {
|
|
371
|
+
this.opened = true;
|
|
372
|
+
this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
|
|
373
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'hidden');
|
|
374
|
+
}
|
|
375
|
+
close() {
|
|
376
|
+
this.opened = false;
|
|
377
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
378
|
+
this.renderer.setAttribute(this.el.nativeElement, 'hidden', '');
|
|
379
|
+
}
|
|
380
|
+
toggle() {
|
|
381
|
+
if (this.disableToggle) {
|
|
382
|
+
this.close();
|
|
383
|
+
return;
|
|
384
|
+
}
|
|
385
|
+
this.opened ? this.close() : this.open();
|
|
386
|
+
}
|
|
387
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MiniGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
388
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MiniGuideComponent, isStandalone: true, selector: "rolatech-mini-guide", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-mini-guide": "this.hasClass" } }, ngImport: i0, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n @for (item of items(); track $index) {\n <div>\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"min-guide-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"flex flex-col justify-center items-center py-4\"\n >\n <rolatech-icon>{{ item.icon }}</rolatech-icon>\n @if (title()) {\n <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n }\n </a>\n </div>\n }\n</div>\n", styles: [".rolatech-mini-guide{position:fixed;left:0;top:var(--rolatech-toolbar-height, 56px);bottom:0;width:var(--rolatech-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rolatech-spec-base-background, #fff);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon" }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
389
|
+
}
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MiniGuideComponent, decorators: [{
|
|
391
|
+
type: Component,
|
|
392
|
+
args: [{ selector: 'rolatech-mini-guide', standalone: true, imports: [CommonModule, IconButtonComponent, IconComponent, RouterLink, RouterLinkActive], encapsulation: ViewEncapsulation.None, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n @for (item of items(); track $index) {\n <div>\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"min-guide-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"flex flex-col justify-center items-center py-4\"\n >\n <rolatech-icon>{{ item.icon }}</rolatech-icon>\n @if (title()) {\n <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n }\n </a>\n </div>\n }\n</div>\n", styles: [".rolatech-mini-guide{position:fixed;left:0;top:var(--rolatech-toolbar-height, 56px);bottom:0;width:var(--rolatech-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rolatech-spec-base-background, #fff);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}\n"] }]
|
|
393
|
+
}], propDecorators: { hasId: [{
|
|
394
|
+
type: HostBinding,
|
|
395
|
+
args: ['id']
|
|
396
|
+
}], hasClass: [{
|
|
397
|
+
type: HostBinding,
|
|
398
|
+
args: ['class.rolatech-mini-guide']
|
|
399
|
+
}] } });
|
|
400
|
+
|
|
325
401
|
class AppLayoutComponent {
|
|
326
402
|
hostId = 'rolatech-app-layout';
|
|
327
403
|
hasClass = true;
|
|
328
404
|
appLayout = inject(APP_LAYOUT);
|
|
329
405
|
topbar = contentChild.required(TopbarComponent);
|
|
330
406
|
drawer = contentChild.required(AppDrawerComponent);
|
|
407
|
+
guide = contentChild.required(MiniGuideComponent);
|
|
331
408
|
el = inject(ElementRef);
|
|
332
409
|
renderer = inject(Renderer2);
|
|
333
410
|
platformId = inject(PLATFORM_ID);
|
|
334
411
|
breakpointObserver = inject(BreakpointObserver);
|
|
412
|
+
currentBreakpoint = '';
|
|
413
|
+
breakpoint$ = this.breakpointObserver
|
|
414
|
+
.observe([Breakpoints.Large, Breakpoints.Medium, '(max-width: 600px)'])
|
|
415
|
+
.pipe(distinctUntilChanged());
|
|
335
416
|
ngOnInit() {
|
|
336
417
|
if (this.topbar()) {
|
|
337
418
|
this.topbar().persistent = this.appLayout.persistent;
|
|
@@ -340,7 +421,11 @@ class AppLayoutComponent {
|
|
|
340
421
|
if (this.drawer()) {
|
|
341
422
|
this.drawer().persistent = this.appLayout.persistent;
|
|
342
423
|
}
|
|
424
|
+
if (this.appLayout.guide) {
|
|
425
|
+
this.topbar().miniGuide = this.guide();
|
|
426
|
+
}
|
|
343
427
|
if (isPlatformBrowser(this.platformId)) {
|
|
428
|
+
this.breakpoint$.subscribe(() => this.breakpointChanged());
|
|
344
429
|
this.breakpointObserver
|
|
345
430
|
.observe(Breakpoints.Handset)
|
|
346
431
|
.pipe(map((result) => result.matches))
|
|
@@ -357,8 +442,19 @@ class AppLayoutComponent {
|
|
|
357
442
|
}
|
|
358
443
|
}
|
|
359
444
|
ngAfterContentInit() { }
|
|
445
|
+
breakpointChanged() {
|
|
446
|
+
if (this.breakpointObserver.isMatched(Breakpoints.Large)) {
|
|
447
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
448
|
+
}
|
|
449
|
+
else if (this.breakpointObserver.isMatched(Breakpoints.Medium)) {
|
|
450
|
+
this.renderer.setAttribute(this.el.nativeElement, 'mini-guide-visible', '');
|
|
451
|
+
}
|
|
452
|
+
else if (this.breakpointObserver.isMatched('(max-width: 600px)')) {
|
|
453
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
454
|
+
}
|
|
455
|
+
}
|
|
360
456
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.0", type: AppLayoutComponent, isStandalone: true, selector: "rolatech-app-layout", host: { properties: { "id": "this.hostId", "class.rolatech-app-layout": "this.hasClass" } }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: AppDrawerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;height:100%}rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-app-page{margin-left:256px}rolatech-app-page{display:block;padding-top:56px
|
|
457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.0", type: AppLayoutComponent, isStandalone: true, selector: "rolatech-app-layout", host: { properties: { "id": "this.hostId", "class.rolatech-app-layout": "this.hasClass" } }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: AppDrawerComponent, descendants: true, isSignal: true }, { propertyName: "guide", first: true, predicate: MiniGuideComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;height:100%}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=left]~rolatech-app-page{margin-left:256px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=right]~rolatech-app-page{margin-right:256px}rolatech-app-layout rolatech-mini-guide[mini-guide-visible]~rolatech-app-page{margin-left:var(--rolatech-mini-guide-width, 72px)}rolatech-app-page{display:block;padding-top:56px}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}rolatech-app-layout[mini-guide-visible] rolatech-app-page.ytd-app{margin-left:var(--ytd-mini-guide-width, 72px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSidenavModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
362
458
|
}
|
|
363
459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppLayoutComponent, decorators: [{
|
|
364
460
|
type: Component,
|
|
@@ -376,7 +472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
376
472
|
MatSidenavModule,
|
|
377
473
|
TopbarComponent,
|
|
378
474
|
AppDrawerComponent,
|
|
379
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;height:100%}rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-app-page{margin-left:256px}rolatech-app-page{display:block;padding-top:56px
|
|
475
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;height:100%}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=left]~rolatech-app-page{margin-left:256px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=right]~rolatech-app-page{margin-right:256px}rolatech-app-layout rolatech-mini-guide[mini-guide-visible]~rolatech-app-page{margin-left:var(--rolatech-mini-guide-width, 72px)}rolatech-app-page{display:block;padding-top:56px}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}rolatech-app-layout[mini-guide-visible] rolatech-app-page.ytd-app{margin-left:var(--ytd-mini-guide-width, 72px)}\n"] }]
|
|
380
476
|
}], propDecorators: { hostId: [{
|
|
381
477
|
type: HostBinding,
|
|
382
478
|
args: ['id']
|
|
@@ -388,8 +484,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
388
484
|
class AppPageComponent {
|
|
389
485
|
hostId = 'rolatech-app-page';
|
|
390
486
|
hasClass = true;
|
|
487
|
+
hasAppClass = true;
|
|
391
488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: AppPageComponent, isStandalone: true, selector: "rolatech-app-page", host: { properties: { "id": "this.hostId", "class.rolatech-app-page": "this.hasClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: AppPageComponent, isStandalone: true, selector: "rolatech-app-page", host: { properties: { "id": "this.hostId", "class.rolatech-app-page": "this.hasClass", "class.ytd-app": "this.hasAppClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
393
490
|
}
|
|
394
491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppPageComponent, decorators: [{
|
|
395
492
|
type: Component,
|
|
@@ -400,6 +497,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
400
497
|
}], hasClass: [{
|
|
401
498
|
type: HostBinding,
|
|
402
499
|
args: ['class.rolatech-app-page']
|
|
500
|
+
}], hasAppClass: [{
|
|
501
|
+
type: HostBinding,
|
|
502
|
+
args: ['class.ytd-app']
|
|
403
503
|
}] } });
|
|
404
504
|
|
|
405
505
|
class AppFooterComponent {
|
|
@@ -1149,5 +1249,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
1149
1249
|
* Generated bundle index. Do not edit.
|
|
1150
1250
|
*/
|
|
1151
1251
|
|
|
1152
|
-
export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, BaseComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, FolderComponent, IconButtonComponent, IconComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuUserComponent, NotFoundComponent, PaginatorComponent, SpacerComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TableComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
|
|
1252
|
+
export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, BaseComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, FolderComponent, IconButtonComponent, IconComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, SpacerComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TableComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
|
|
1153
1253
|
//# sourceMappingURL=rolatech-angular-components.mjs.map
|