@rolatech/angular-components 17.2.21 → 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 +4 -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/media-preview/media-preview.component.mjs +12 -0
- package/esm2022/lib/mini-guide/mini-guide.component.mjs +77 -0
- package/esm2022/lib/title/title.component.mjs +3 -3
- package/esm2022/lib/toolbar/toolbar.component.mjs +13 -0
- package/esm2022/lib/topbar/topbar.component.mjs +5 -1
- package/esm2022/provider.mjs +1 -1
- package/fesm2022/rolatech-angular-components.mjs +128 -9
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/index.d.ts +3 -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/media-preview/media-preview.component.d.ts +5 -0
- package/lib/mini-guide/mini-guide.component.d.ts +28 -0
- package/lib/toolbar/toolbar.component.d.ts +6 -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
|
@@ -20,6 +20,7 @@ export class TopbarComponent {
|
|
|
20
20
|
appLayout = inject(APP_LAYOUT);
|
|
21
21
|
isHandset$;
|
|
22
22
|
appDrawer;
|
|
23
|
+
miniGuide;
|
|
23
24
|
constructor() {
|
|
24
25
|
this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Handset]).pipe(map((result) => result.matches), shareReplay());
|
|
25
26
|
}
|
|
@@ -47,6 +48,9 @@ export class TopbarComponent {
|
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
50
|
onToggle() {
|
|
51
|
+
if (this.appLayout.guide) {
|
|
52
|
+
this.miniGuide.toggle();
|
|
53
|
+
}
|
|
50
54
|
this.appDrawer.toggle();
|
|
51
55
|
}
|
|
52
56
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -62,4 +66,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
62
66
|
type: HostBinding,
|
|
63
67
|
args: ['class.rolatech-topbar']
|
|
64
68
|
}] } });
|
|
65
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
69
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvdG9wYmFyL3RvcGJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RvcGJhci90b3BiYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFVLFdBQVcsRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlILE9BQU8sRUFBRSxZQUFZLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsV0FBVyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEUsT0FBTyxFQUFjLEdBQUcsRUFBRSxXQUFXLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDM0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFZNUMsTUFBTSxPQUFPLGVBQWU7SUFDUCxNQUFNLEdBQUcsaUJBQWlCLENBQUM7SUFDUixRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3RELFVBQVUsQ0FBdUI7SUFDakMsRUFBRSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN4QixRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLFVBQVUsR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDakMsa0JBQWtCLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDaEQsU0FBUyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUMvQixVQUFVLENBQXNCO0lBQ2hDLFNBQVMsQ0FBc0I7SUFDL0IsU0FBUyxDQUFzQjtJQUMvQjtRQUNFLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDM0UsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLEVBQy9CLFdBQVcsRUFBRSxDQUNkLENBQUM7SUFDSixDQUFDO0lBQ0QsUUFBUTtRQUNOLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFDRCxrQkFBa0I7UUFDaEIsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDcEIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLGlCQUFpQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxrQkFBa0I7aUJBQ3BCLE9BQU8sQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDO2lCQUM1QixJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7aUJBQ3JDLFNBQVMsQ0FBQztnQkFDVCxJQUFJLEVBQUUsQ0FBQyxHQUFHLEVBQUUsRUFBRTtvQkFDWixJQUFJLEdBQUcsRUFBRSxDQUFDO3dCQUNSLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDO29CQUNyRSxDQUFDO3lCQUFNLENBQUM7d0JBQ04sSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLEVBQUUsQ0FBQyxDQUFDO29CQUN0RSxDQUFDO2dCQUNILENBQUM7YUFDRixDQUFDLENBQUM7UUFDUCxDQUFDO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDekIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUMxQixDQUFDO1FBQ0QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUMxQixDQUFDO3VHQTlDVSxlQUFlOzJGQUFmLGVBQWUsb0tDcEI1QiwyaEJBYUEscWJERVksWUFBWSxvRkFBRSxVQUFVLG9PQUFFLG1CQUFtQixnRUFBRSxlQUFlOzsyRkFLN0QsZUFBZTtrQkFSM0IsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsVUFBVSxFQUFFLG1CQUFtQixFQUFFLGVBQWUsRUFBRSxPQUFPLENBQUMsaUJBR25FLGlCQUFpQixDQUFDLElBQUk7d0RBR2xCLE1BQU07c0JBQXhCLFdBQVc7dUJBQUMsSUFBSTtnQkFDcUIsUUFBUTtzQkFBN0MsV0FBVzt1QkFBQyx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBPbkluaXQsIFBMQVRGT1JNX0lELCBSZW5kZXJlcjIsIFZpZXdFbmNhcHN1bGF0aW9uLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSwgaXNQbGF0Zm9ybUJyb3dzZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgUm91dGVyTGluayB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0SWNvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgQnJlYWtwb2ludE9ic2VydmVyLCBCcmVha3BvaW50cyB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgbWFwLCBzaGFyZVJlcGxheSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgSWNvbkJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24tYnV0dG9uL2ljb24tYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBUFBfTEFZT1VUIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwRHJhd2VyQ29tcG9uZW50IH0gZnJvbSAnLi4vYXBwLWRyYXdlci9hcHAtZHJhd2VyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNaW5pR3VpZGVDb21wb25lbnQgfSBmcm9tICcuLi9taW5pLWd1aWRlL21pbmktZ3VpZGUuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm9sYXRlY2gtdG9wYmFyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgUm91dGVyTGluaywgSWNvbkJ1dHRvbkNvbXBvbmVudCwgTWF0QnV0dG9uTW9kdWxlLCBNYXRJY29uXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RvcGJhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90b3BiYXIuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBUb3BiYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASG9zdEJpbmRpbmcoJ2lkJykgaG9zdElkID0gJ3JvbGF0ZWNoLXRvcGJhcic7XG4gIEBIb3N0QmluZGluZygnY2xhc3Mucm9sYXRlY2gtdG9wYmFyJykgaGFzQ2xhc3MgPSB0cnVlO1xuICBwZXJzaXN0ZW50ITogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgZWwgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHJlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHBsYXRmb3JtSWQgPSBpbmplY3QoUExBVEZPUk1fSUQpO1xuICBicmVha3BvaW50T2JzZXJ2ZXIgPSBpbmplY3QoQnJlYWtwb2ludE9ic2VydmVyKTtcbiAgYXBwTGF5b3V0ID0gaW5qZWN0KEFQUF9MQVlPVVQpO1xuICBpc0hhbmRzZXQkOiBPYnNlcnZhYmxlPGJvb2xlYW4+O1xuICBhcHBEcmF3ZXIhOiBBcHBEcmF3ZXJDb21wb25lbnQ7XG4gIG1pbmlHdWlkZSE6IE1pbmlHdWlkZUNvbXBvbmVudDtcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5pc0hhbmRzZXQkID0gdGhpcy5icmVha3BvaW50T2JzZXJ2ZXIub2JzZXJ2ZShbQnJlYWtwb2ludHMuSGFuZHNldF0pLnBpcGUoXG4gICAgICBtYXAoKHJlc3VsdCkgPT4gcmVzdWx0Lm1hdGNoZXMpLFxuICAgICAgc2hhcmVSZXBsYXkoKSxcbiAgICApO1xuICB9XG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0TWVudUljb25WaXNpYmxlKCk7XG4gIH1cbiAgc2V0TWVudUljb25WaXNpYmxlKCkge1xuICAgIGlmICh0aGlzLnBlcnNpc3RlbnQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKGlzUGxhdGZvcm1Ccm93c2VyKHRoaXMucGxhdGZvcm1JZCkpIHtcbiAgICAgIHRoaXMuYnJlYWtwb2ludE9ic2VydmVyXG4gICAgICAgIC5vYnNlcnZlKEJyZWFrcG9pbnRzLkhhbmRzZXQpXG4gICAgICAgIC5waXBlKG1hcCgocmVzdWx0KSA9PiByZXN1bHQubWF0Y2hlcykpXG4gICAgICAgIC5zdWJzY3JpYmUoe1xuICAgICAgICAgIG5leHQ6IChyZXMpID0+IHtcbiAgICAgICAgICAgIGlmIChyZXMpIHtcbiAgICAgICAgICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncGVyc2lzdGVudCcpO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncGVyc2lzdGVudCcsICcnKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9LFxuICAgICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBvblRvZ2dsZSgpIHtcbiAgICBpZiAodGhpcy5hcHBMYXlvdXQuZ3VpZGUpIHtcbiAgICAgIHRoaXMubWluaUd1aWRlLnRvZ2dsZSgpO1xuICAgIH1cbiAgICB0aGlzLmFwcERyYXdlci50b2dnbGUoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImgtMTQgcHgtMiBzbTpweC00IGZsZXggaXRlbXMtY2VudGVyXCI+XG4gIEBpZiAocGVyc2lzdGVudCB8fCAoaXNIYW5kc2V0JCB8IGFzeW5jKSkge1xuICAgIDxyb2xhdGVjaC1pY29uLWJ1dHRvbiBpZD1cInRvcGJhci1tZW51LWJ1dHRvblwiIChjbGljayk9XCJvblRvZ2dsZSgpXCI+bWVudTwvcm9sYXRlY2gtaWNvbi1idXR0b24+XG4gIH1cbiAgPGRpdiBpZD1cInRpdGxlXCIgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiIHJvdXRlckxpbms9XCIvXCI+XG4gICAgPGRpdiBjbGFzcz1cInRleHQtYmxhY2sgdGV4dC1sZyBzbTp0ZXh0LXhsIGZvbnQtYm9sZFwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJ0ZXh0LW9yYW5nZS02MDBcIj57eyBhcHBMYXlvdXQudGl0bGUgfX08L3NwYW4+XG4gICAgICA8c3Bhbj57eyBhcHBMYXlvdXQuc3VidGl0bGUgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiZmxleC0xXCI+PC9kaXY+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19
|
package/esm2022/provider.mjs
CHANGED
|
@@ -9,4 +9,4 @@ export function provideAngularLayout(config) {
|
|
|
9
9
|
];
|
|
10
10
|
return makeEnvironmentProviders(providers);
|
|
11
11
|
}
|
|
12
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
12
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvcHJvdmlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUF3QixjQUFjLEVBQVksd0JBQXdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFpQnpHLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxJQUFJLGNBQWMsQ0FBa0IsWUFBWSxDQUFDLENBQUM7QUFFNUUsTUFBTSxVQUFVLG9CQUFvQixDQUFDLE1BQXdCO0lBQzNELE1BQU0sU0FBUyxHQUF3QztRQUNyRDtZQUNFLE9BQU8sRUFBRSxVQUFVO1lBQ25CLFFBQVEsRUFBRSxNQUFNO1NBQ2pCO0tBQ0YsQ0FBQztJQUNGLE9BQU8sd0JBQXdCLENBQUMsU0FBUyxDQUFDLENBQUM7QUFDN0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVudmlyb25tZW50UHJvdmlkZXJzLCBJbmplY3Rpb25Ub2tlbiwgUHJvdmlkZXIsIG1ha2VFbnZpcm9ubWVudFByb3ZpZGVycyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEFwcERyYXdlckNvbmZpZyB7XG4gIHBlcnNpc3RlbnQ6IGJvb2xlYW47XG59XG5leHBvcnQgaW50ZXJmYWNlIEFwcFRvcGJhckNvbmZpZyB7XG4gIHBlcnNpc3RlbnQ6IGJvb2xlYW47XG59XG5leHBvcnQgaW50ZXJmYWNlIEFwcExheW91dENvbmZpZyB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YnRpdGxlPzogc3RyaW5nO1xuICBwZXJzaXN0ZW50PzogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgdG9wYmFyPzogQXBwVG9wYmFyQ29uZmlnO1xuICBkcmF3ZXI/OiBBcHBEcmF3ZXJDb25maWc7XG4gIGd1aWRlPzogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbn1cblxuZXhwb3J0IGNvbnN0IEFQUF9MQVlPVVQgPSBuZXcgSW5qZWN0aW9uVG9rZW48QXBwTGF5b3V0Q29uZmlnPignQVBQX0xBWU9VVCcpO1xuXG5leHBvcnQgZnVuY3Rpb24gcHJvdmlkZUFuZ3VsYXJMYXlvdXQoY29uZmlnPzogQXBwTGF5b3V0Q29uZmlnKTogRW52aXJvbm1lbnRQcm92aWRlcnMge1xuICBjb25zdCBwcm92aWRlcnM6IChQcm92aWRlciB8IEVudmlyb25tZW50UHJvdmlkZXJzKVtdID0gW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IEFQUF9MQVlPVVQsXG4gICAgICB1c2VWYWx1ZTogY29uZmlnLFxuICAgIH0sXG4gIF07XG4gIHJldHVybiBtYWtlRW52aXJvbm1lbnRQcm92aWRlcnMocHJvdmlkZXJzKTtcbn1cbiJdfQ==
|
|
@@ -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';
|
|
@@ -98,11 +98,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
98
98
|
|
|
99
99
|
class TitleComponent {
|
|
100
100
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TitleComponent, isStandalone: true, selector: "rolatech-title", ngImport: i0, template: "<a class=\"text-xl font-medium py-3 cursor-pointer\">\n <ng-content></ng-content>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TitleComponent, isStandalone: true, selector: "rolatech-title", ngImport: i0, template: "<a class=\"block text-xl font-medium py-3 cursor-pointer\">\n <ng-content></ng-content>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
102
102
|
}
|
|
103
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
|
-
args: [{ selector: 'rolatech-title', standalone: true, imports: [CommonModule], template: "<a class=\"text-xl font-medium py-3 cursor-pointer\">\n <ng-content></ng-content>\n</a>\n" }]
|
|
105
|
+
args: [{ selector: 'rolatech-title', standalone: true, imports: [CommonModule], template: "<a class=\"block text-xl font-medium py-3 cursor-pointer\">\n <ng-content></ng-content>\n</a>\n" }]
|
|
106
106
|
}] });
|
|
107
107
|
|
|
108
108
|
class AppContainerComponent {
|
|
@@ -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 {
|
|
@@ -1126,9 +1226,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
1126
1226
|
args: [{ selector: 'rolatech-paginator', standalone: true, imports: [CommonModule, MatPaginatorModule], template: "<mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\"\n hidePageSize\n showFirstLastButtons\n>\n</mat-paginator>\n" }]
|
|
1127
1227
|
}] });
|
|
1128
1228
|
|
|
1229
|
+
class MediaPreviewComponent {
|
|
1230
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1231
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: MediaPreviewComponent, isStandalone: true, selector: "rolatech-media-preview", ngImport: i0, template: "<p>media-preview works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1232
|
+
}
|
|
1233
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaPreviewComponent, decorators: [{
|
|
1234
|
+
type: Component,
|
|
1235
|
+
args: [{ selector: 'rolatech-media-preview', standalone: true, imports: [CommonModule], template: "<p>media-preview works!</p>\n" }]
|
|
1236
|
+
}] });
|
|
1237
|
+
|
|
1238
|
+
class ToolbarComponent {
|
|
1239
|
+
title = input();
|
|
1240
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1241
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex justify-between items-center h-14 px-4\">\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1242
|
+
}
|
|
1243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
1244
|
+
type: Component,
|
|
1245
|
+
args: [{ selector: 'rolatech-toolbar', standalone: true, imports: [CommonModule], template: "<div class=\"flex justify-between items-center h-14 px-4\">\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
1246
|
+
}] });
|
|
1247
|
+
|
|
1129
1248
|
/**
|
|
1130
1249
|
* Generated bundle index. Do not edit.
|
|
1131
1250
|
*/
|
|
1132
1251
|
|
|
1133
|
-
export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, BaseComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, FolderComponent, IconButtonComponent, IconComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuUserComponent, NotFoundComponent, PaginatorComponent, SpacerComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TableComponent, TitleComponent, 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 };
|
|
1134
1253
|
//# sourceMappingURL=rolatech-angular-components.mjs.map
|