@rolatech/angular-components 17.2.22 → 17.2.24

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.
@@ -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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvdG9wYmFyL3RvcGJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RvcGJhci90b3BiYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFVLFdBQVcsRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlILE9BQU8sRUFBRSxZQUFZLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsV0FBVyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEUsT0FBTyxFQUFjLEdBQUcsRUFBRSxXQUFXLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDM0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFXNUMsTUFBTSxPQUFPLGVBQWU7SUFDUCxNQUFNLEdBQUcsaUJBQWlCLENBQUM7SUFDUixRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3RELFVBQVUsQ0FBdUI7SUFDakMsRUFBRSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN4QixRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLFVBQVUsR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDakMsa0JBQWtCLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDaEQsU0FBUyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUMvQixVQUFVLENBQXNCO0lBQ2hDLFNBQVMsQ0FBc0I7SUFDL0I7UUFDRSxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLENBQUMsQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQzNFLEdBQUcsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUMvQixXQUFXLEVBQUUsQ0FDZCxDQUFDO0lBQ0osQ0FBQztJQUNELFFBQVE7UUFDTixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBQ0Qsa0JBQWtCO1FBQ2hCLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ3BCLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztZQUN2QyxJQUFJLENBQUMsa0JBQWtCO2lCQUNwQixPQUFPLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQztpQkFDNUIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO2lCQUNyQyxTQUFTLENBQUM7Z0JBQ1QsSUFBSSxFQUFFLENBQUMsR0FBRyxFQUFFLEVBQUU7b0JBQ1osSUFBSSxHQUFHLEVBQUUsQ0FBQzt3QkFDUixJQUFJLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxZQUFZLENBQUMsQ0FBQztvQkFDckUsQ0FBQzt5QkFBTSxDQUFDO3dCQUNOLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksRUFBRSxFQUFFLENBQUMsQ0FBQztvQkFDdEUsQ0FBQztnQkFDSCxDQUFDO2FBQ0YsQ0FBQyxDQUFDO1FBQ1AsQ0FBQztJQUNILENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUMxQixDQUFDO3VHQTFDVSxlQUFlOzJGQUFmLGVBQWUsb0tDbkI1QiwyaEJBYUEscWJEQ1ksWUFBWSxvRkFBRSxVQUFVLG9PQUFFLG1CQUFtQixnRUFBRSxlQUFlOzsyRkFLN0QsZUFBZTtrQkFSM0IsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsVUFBVSxFQUFFLG1CQUFtQixFQUFFLGVBQWUsRUFBRSxPQUFPLENBQUMsaUJBR25FLGlCQUFpQixDQUFDLElBQUk7d0RBR2xCLE1BQU07c0JBQXhCLFdBQVc7dUJBQUMsSUFBSTtnQkFDcUIsUUFBUTtzQkFBN0MsV0FBVzt1QkFBQyx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBPbkluaXQsIFBMQVRGT1JNX0lELCBSZW5kZXJlcjIsIFZpZXdFbmNhcHN1bGF0aW9uLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSwgaXNQbGF0Zm9ybUJyb3dzZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgUm91dGVyTGluayB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0SWNvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgQnJlYWtwb2ludE9ic2VydmVyLCBCcmVha3BvaW50cyB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgbWFwLCBzaGFyZVJlcGxheSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgSWNvbkJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24tYnV0dG9uL2ljb24tYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBUFBfTEFZT1VUIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwRHJhd2VyQ29tcG9uZW50IH0gZnJvbSAnLi4vYXBwLWRyYXdlci9hcHAtZHJhd2VyLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXRvcGJhcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFJvdXRlckxpbmssIEljb25CdXR0b25Db21wb25lbnQsIE1hdEJ1dHRvbk1vZHVsZSwgTWF0SWNvbl0sXG4gIHRlbXBsYXRlVXJsOiAnLi90b3BiYXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vdG9wYmFyLmNvbXBvbmVudC5zY3NzJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgVG9wYmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQEhvc3RCaW5kaW5nKCdpZCcpIGhvc3RJZCA9ICdyb2xhdGVjaC10b3BiYXInO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnJvbGF0ZWNoLXRvcGJhcicpIGhhc0NsYXNzID0gdHJ1ZTtcbiAgcGVyc2lzdGVudCE6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIGVsID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuICByZW5kZXJlciA9IGluamVjdChSZW5kZXJlcjIpO1xuICBwbGF0Zm9ybUlkID0gaW5qZWN0KFBMQVRGT1JNX0lEKTtcbiAgYnJlYWtwb2ludE9ic2VydmVyID0gaW5qZWN0KEJyZWFrcG9pbnRPYnNlcnZlcik7XG4gIGFwcExheW91dCA9IGluamVjdChBUFBfTEFZT1VUKTtcbiAgaXNIYW5kc2V0JDogT2JzZXJ2YWJsZTxib29sZWFuPjtcbiAgYXBwRHJhd2VyITogQXBwRHJhd2VyQ29tcG9uZW50O1xuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLmlzSGFuZHNldCQgPSB0aGlzLmJyZWFrcG9pbnRPYnNlcnZlci5vYnNlcnZlKFtCcmVha3BvaW50cy5IYW5kc2V0XSkucGlwZShcbiAgICAgIG1hcCgocmVzdWx0KSA9PiByZXN1bHQubWF0Y2hlcyksXG4gICAgICBzaGFyZVJlcGxheSgpLFxuICAgICk7XG4gIH1cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRNZW51SWNvblZpc2libGUoKTtcbiAgfVxuICBzZXRNZW51SWNvblZpc2libGUoKSB7XG4gICAgaWYgKHRoaXMucGVyc2lzdGVudCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAoaXNQbGF0Zm9ybUJyb3dzZXIodGhpcy5wbGF0Zm9ybUlkKSkge1xuICAgICAgdGhpcy5icmVha3BvaW50T2JzZXJ2ZXJcbiAgICAgICAgLm9ic2VydmUoQnJlYWtwb2ludHMuSGFuZHNldClcbiAgICAgICAgLnBpcGUobWFwKChyZXN1bHQpID0+IHJlc3VsdC5tYXRjaGVzKSlcbiAgICAgICAgLnN1YnNjcmliZSh7XG4gICAgICAgICAgbmV4dDogKHJlcykgPT4ge1xuICAgICAgICAgICAgaWYgKHJlcykge1xuICAgICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUF0dHJpYnV0ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdwZXJzaXN0ZW50Jyk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldEF0dHJpYnV0ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdwZXJzaXN0ZW50JywgJycpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH0sXG4gICAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIG9uVG9nZ2xlKCkge1xuICAgIHRoaXMuYXBwRHJhd2VyLnRvZ2dsZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiaC0xNCBweC0yIHNtOnB4LTQgZmxleCBpdGVtcy1jZW50ZXJcIj5cbiAgQGlmIChwZXJzaXN0ZW50IHx8IChpc0hhbmRzZXQkIHwgYXN5bmMpKSB7XG4gICAgPHJvbGF0ZWNoLWljb24tYnV0dG9uIGlkPVwidG9wYmFyLW1lbnUtYnV0dG9uXCIgKGNsaWNrKT1cIm9uVG9nZ2xlKClcIj5tZW51PC9yb2xhdGVjaC1pY29uLWJ1dHRvbj5cbiAgfVxuICA8ZGl2IGlkPVwidGl0bGVcIiBjbGFzcz1cImN1cnNvci1wb2ludGVyXCIgcm91dGVyTGluaz1cIi9cIj5cbiAgICA8ZGl2IGNsYXNzPVwidGV4dC1ibGFjayB0ZXh0LWxnIHNtOnRleHQteGwgZm9udC1ib2xkXCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInRleHQtb3JhbmdlLTYwMFwiPnt7IGFwcExheW91dC50aXRsZSB9fTwvc3Bhbj5cbiAgICAgIDxzcGFuPnt7IGFwcExheW91dC5zdWJ0aXRsZSB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJmbGV4LTFcIj48L2Rpdj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=
69
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvdG9wYmFyL3RvcGJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RvcGJhci90b3BiYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFVLFdBQVcsRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlILE9BQU8sRUFBRSxZQUFZLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsV0FBVyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEUsT0FBTyxFQUFjLEdBQUcsRUFBRSxXQUFXLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDM0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFZNUMsTUFBTSxPQUFPLGVBQWU7SUFDUCxNQUFNLEdBQUcsaUJBQWlCLENBQUM7SUFDUixRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3RELFVBQVUsQ0FBdUI7SUFDakMsRUFBRSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN4QixRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLFVBQVUsR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDakMsa0JBQWtCLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDaEQsU0FBUyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUMvQixVQUFVLENBQXNCO0lBQ2hDLFNBQVMsQ0FBc0I7SUFDL0IsU0FBUyxDQUFzQjtJQUMvQjtRQUNFLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDM0UsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLEVBQy9CLFdBQVcsRUFBRSxDQUNkLENBQUM7SUFDSixDQUFDO0lBQ0QsUUFBUTtRQUNOLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFDRCxrQkFBa0I7UUFDaEIsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDcEIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLGlCQUFpQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxrQkFBa0I7aUJBQ3BCLE9BQU8sQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDO2lCQUM1QixJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7aUJBQ3JDLFNBQVMsQ0FBQztnQkFDVCxJQUFJLEVBQUUsQ0FBQyxHQUFHLEVBQUUsRUFBRTtvQkFDWixJQUFJLEdBQUcsRUFBRSxDQUFDO3dCQUNSLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDO29CQUNyRSxDQUFDO3lCQUFNLENBQUM7d0JBQ04sSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLEVBQUUsQ0FBQyxDQUFDO29CQUN0RSxDQUFDO2dCQUNILENBQUM7YUFDRixDQUFDLENBQUM7UUFDUCxDQUFDO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDekIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUMxQixDQUFDO1FBQ0QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUMxQixDQUFDO3VHQTlDVSxlQUFlOzJGQUFmLGVBQWUsb0tDcEI1QiwyaEJBYUEscWJERVksWUFBWSxvRkFBRSxVQUFVLG9PQUFFLG1CQUFtQixnRUFBRSxlQUFlOzsyRkFLN0QsZUFBZTtrQkFSM0IsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsVUFBVSxFQUFFLG1CQUFtQixFQUFFLGVBQWUsRUFBRSxPQUFPLENBQUMsaUJBR25FLGlCQUFpQixDQUFDLElBQUk7d0RBR2xCLE1BQU07c0JBQXhCLFdBQVc7dUJBQUMsSUFBSTtnQkFDcUIsUUFBUTtzQkFBN0MsV0FBVzt1QkFBQyx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBPbkluaXQsIFBMQVRGT1JNX0lELCBSZW5kZXJlcjIsIFZpZXdFbmNhcHN1bGF0aW9uLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSwgaXNQbGF0Zm9ybUJyb3dzZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgUm91dGVyTGluayB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0SWNvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgQnJlYWtwb2ludE9ic2VydmVyLCBCcmVha3BvaW50cyB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgbWFwLCBzaGFyZVJlcGxheSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgSWNvbkJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24tYnV0dG9uL2ljb24tYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBUFBfTEFZT1VUIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwRHJhd2VyQ29tcG9uZW50IH0gZnJvbSAnLi4vYXBwLWRyYXdlci9hcHAtZHJhd2VyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNaW5pR3VpZGVDb21wb25lbnQgfSBmcm9tICcuLi9taW5pLWd1aWRlL21pbmktZ3VpZGUuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm9sYXRlY2gtdG9wYmFyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgUm91dGVyTGluaywgSWNvbkJ1dHRvbkNvbXBvbmVudCwgTWF0QnV0dG9uTW9kdWxlLCBNYXRJY29uXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RvcGJhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90b3BiYXIuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBUb3BiYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASG9zdEJpbmRpbmcoJ2lkJykgaG9zdElkID0gJ3JvbGF0ZWNoLXRvcGJhcic7XG4gIEBIb3N0QmluZGluZygnY2xhc3Mucm9sYXRlY2gtdG9wYmFyJykgaGFzQ2xhc3MgPSB0cnVlO1xuICBwZXJzaXN0ZW50ITogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgZWwgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHJlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHBsYXRmb3JtSWQgPSBpbmplY3QoUExBVEZPUk1fSUQpO1xuICBicmVha3BvaW50T2JzZXJ2ZXIgPSBpbmplY3QoQnJlYWtwb2ludE9ic2VydmVyKTtcbiAgYXBwTGF5b3V0ID0gaW5qZWN0KEFQUF9MQVlPVVQpO1xuICBpc0hhbmRzZXQkOiBPYnNlcnZhYmxlPGJvb2xlYW4+O1xuICBhcHBEcmF3ZXIhOiBBcHBEcmF3ZXJDb21wb25lbnQ7XG4gIG1pbmlHdWlkZSE6IE1pbmlHdWlkZUNvbXBvbmVudDtcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5pc0hhbmRzZXQkID0gdGhpcy5icmVha3BvaW50T2JzZXJ2ZXIub2JzZXJ2ZShbQnJlYWtwb2ludHMuSGFuZHNldF0pLnBpcGUoXG4gICAgICBtYXAoKHJlc3VsdCkgPT4gcmVzdWx0Lm1hdGNoZXMpLFxuICAgICAgc2hhcmVSZXBsYXkoKSxcbiAgICApO1xuICB9XG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0TWVudUljb25WaXNpYmxlKCk7XG4gIH1cbiAgc2V0TWVudUljb25WaXNpYmxlKCkge1xuICAgIGlmICh0aGlzLnBlcnNpc3RlbnQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKGlzUGxhdGZvcm1Ccm93c2VyKHRoaXMucGxhdGZvcm1JZCkpIHtcbiAgICAgIHRoaXMuYnJlYWtwb2ludE9ic2VydmVyXG4gICAgICAgIC5vYnNlcnZlKEJyZWFrcG9pbnRzLkhhbmRzZXQpXG4gICAgICAgIC5waXBlKG1hcCgocmVzdWx0KSA9PiByZXN1bHQubWF0Y2hlcykpXG4gICAgICAgIC5zdWJzY3JpYmUoe1xuICAgICAgICAgIG5leHQ6IChyZXMpID0+IHtcbiAgICAgICAgICAgIGlmIChyZXMpIHtcbiAgICAgICAgICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncGVyc2lzdGVudCcpO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncGVyc2lzdGVudCcsICcnKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9LFxuICAgICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBvblRvZ2dsZSgpIHtcbiAgICBpZiAodGhpcy5hcHBMYXlvdXQuZ3VpZGUpIHtcbiAgICAgIHRoaXMubWluaUd1aWRlLnRvZ2dsZSgpO1xuICAgIH1cbiAgICB0aGlzLmFwcERyYXdlci50b2dnbGUoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImgtMTQgcHgtMiBzbTpweC00IGZsZXggaXRlbXMtY2VudGVyXCI+XG4gIEBpZiAocGVyc2lzdGVudCB8fCAoaXNIYW5kc2V0JCB8IGFzeW5jKSkge1xuICAgIDxyb2xhdGVjaC1pY29uLWJ1dHRvbiBpZD1cInRvcGJhci1tZW51LWJ1dHRvblwiIChjbGljayk9XCJvblRvZ2dsZSgpXCI+bWVudTwvcm9sYXRlY2gtaWNvbi1idXR0b24+XG4gIH1cbiAgPGRpdiBpZD1cInRpdGxlXCIgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiIHJvdXRlckxpbms9XCIvXCI+XG4gICAgPGRpdiBjbGFzcz1cInRleHQtYmxhY2sgdGV4dC1sZyBzbTp0ZXh0LXhsIGZvbnQtYm9sZFwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJ0ZXh0LW9yYW5nZS02MDBcIj57eyBhcHBMYXlvdXQudGl0bGUgfX08L3NwYW4+XG4gICAgICA8c3Bhbj57eyBhcHBMYXlvdXQuc3VidGl0bGUgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiZmxleC0xXCI+PC9kaXY+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19
@@ -9,4 +9,4 @@ export function provideAngularLayout(config) {
9
9
  ];
10
10
  return makeEnvironmentProviders(providers);
11
11
  }
12
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvcHJvdmlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUF3QixjQUFjLEVBQVksd0JBQXdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFnQnpHLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxJQUFJLGNBQWMsQ0FBa0IsWUFBWSxDQUFDLENBQUM7QUFFNUUsTUFBTSxVQUFVLG9CQUFvQixDQUFDLE1BQXdCO0lBQzNELE1BQU0sU0FBUyxHQUF3QztRQUNyRDtZQUNFLE9BQU8sRUFBRSxVQUFVO1lBQ25CLFFBQVEsRUFBRSxNQUFNO1NBQ2pCO0tBQ0YsQ0FBQztJQUNGLE9BQU8sd0JBQXdCLENBQUMsU0FBUyxDQUFDLENBQUM7QUFDN0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVudmlyb25tZW50UHJvdmlkZXJzLCBJbmplY3Rpb25Ub2tlbiwgUHJvdmlkZXIsIG1ha2VFbnZpcm9ubWVudFByb3ZpZGVycyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEFwcERyYXdlckNvbmZpZyB7XG4gIHBlcnNpc3RlbnQ6IGJvb2xlYW47XG59XG5leHBvcnQgaW50ZXJmYWNlIEFwcFRvcGJhckNvbmZpZyB7XG4gIHBlcnNpc3RlbnQ6IGJvb2xlYW47XG59XG5leHBvcnQgaW50ZXJmYWNlIEFwcExheW91dENvbmZpZyB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YnRpdGxlPzogc3RyaW5nO1xuICBwZXJzaXN0ZW50PzogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgdG9wYmFyPzogQXBwVG9wYmFyQ29uZmlnO1xuICBkcmF3ZXI/OiBBcHBEcmF3ZXJDb25maWc7XG59XG5cbmV4cG9ydCBjb25zdCBBUFBfTEFZT1VUID0gbmV3IEluamVjdGlvblRva2VuPEFwcExheW91dENvbmZpZz4oJ0FQUF9MQVlPVVQnKTtcblxuZXhwb3J0IGZ1bmN0aW9uIHByb3ZpZGVBbmd1bGFyTGF5b3V0KGNvbmZpZz86IEFwcExheW91dENvbmZpZyk6IEVudmlyb25tZW50UHJvdmlkZXJzIHtcbiAgY29uc3QgcHJvdmlkZXJzOiAoUHJvdmlkZXIgfCBFbnZpcm9ubWVudFByb3ZpZGVycylbXSA9IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBBUFBfTEFZT1VULFxuICAgICAgdXNlVmFsdWU6IGNvbmZpZyxcbiAgICB9LFxuICBdO1xuICByZXR1cm4gbWFrZUVudmlyb25tZW50UHJvdmlkZXJzKHByb3ZpZGVycyk7XG59XG4iXX0=
12
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvcHJvdmlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUF3QixjQUFjLEVBQVksd0JBQXdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFpQnpHLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxJQUFJLGNBQWMsQ0FBa0IsWUFBWSxDQUFDLENBQUM7QUFFNUUsTUFBTSxVQUFVLG9CQUFvQixDQUFDLE1BQXdCO0lBQzNELE1BQU0sU0FBUyxHQUF3QztRQUNyRDtZQUNFLE9BQU8sRUFBRSxVQUFVO1lBQ25CLFFBQVEsRUFBRSxNQUFNO1NBQ2pCO0tBQ0YsQ0FBQztJQUNGLE9BQU8sd0JBQXdCLENBQUMsU0FBUyxDQUFDLENBQUM7QUFDN0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVudmlyb25tZW50UHJvdmlkZXJzLCBJbmplY3Rpb25Ub2tlbiwgUHJvdmlkZXIsIG1ha2VFbnZpcm9ubWVudFByb3ZpZGVycyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEFwcERyYXdlckNvbmZpZyB7XG4gIHBlcnNpc3RlbnQ6IGJvb2xlYW47XG59XG5leHBvcnQgaW50ZXJmYWNlIEFwcFRvcGJhckNvbmZpZyB7XG4gIHBlcnNpc3RlbnQ6IGJvb2xlYW47XG59XG5leHBvcnQgaW50ZXJmYWNlIEFwcExheW91dENvbmZpZyB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YnRpdGxlPzogc3RyaW5nO1xuICBwZXJzaXN0ZW50PzogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgdG9wYmFyPzogQXBwVG9wYmFyQ29uZmlnO1xuICBkcmF3ZXI/OiBBcHBEcmF3ZXJDb25maWc7XG4gIGd1aWRlPzogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbn1cblxuZXhwb3J0IGNvbnN0IEFQUF9MQVlPVVQgPSBuZXcgSW5qZWN0aW9uVG9rZW48QXBwTGF5b3V0Q29uZmlnPignQVBQX0xBWU9VVCcpO1xuXG5leHBvcnQgZnVuY3Rpb24gcHJvdmlkZUFuZ3VsYXJMYXlvdXQoY29uZmlnPzogQXBwTGF5b3V0Q29uZmlnKTogRW52aXJvbm1lbnRQcm92aWRlcnMge1xuICBjb25zdCBwcm92aWRlcnM6IChQcm92aWRlciB8IEVudmlyb25tZW50UHJvdmlkZXJzKVtdID0gW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IEFQUF9MQVlPVVQsXG4gICAgICB1c2VWYWx1ZTogY29uZmlnLFxuICAgIH0sXG4gIF07XG4gIHJldHVybiBtYWtlRW52aXJvbm1lbnRQcm92aWRlcnMocHJvdmlkZXJzKTtcbn1cbiJdfQ==
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders, inject, ElementRef, Renderer2, PLATFORM_ID, input, viewChild, ChangeDetectionStrategy, contentChild, computed, Inject, NgModule, ChangeDetectorRef, output, HostListener } from '@angular/core';
2
+ import { Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders, inject, ElementRef, Renderer2, PLATFORM_ID, input, viewChild, ChangeDetectionStrategy, contentChild, computed, Inject, NgModule, ChangeDetectorRef, output, HostListener, effect } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
5
5
  import * as i2$1 from '@angular/material/icon';
@@ -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()\" style=\"transition-duration: 200ms\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\" style=\"transition-duration: 200ms\">\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[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;left:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{-webkit-transform:translate3d(0,0,0);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;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}#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 });
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:var(--app-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-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-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()\" style=\"transition-duration: 200ms\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\" style=\"transition-duration: 200ms\">\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[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;left:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{-webkit-transform:translate3d(0,0,0);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;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}#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"] }]
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:var(--app-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-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-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;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}rolatech-app-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 });
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=top]~rolatech-app-page{margin-top:56px}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;height:100%}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;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}\n"] }]
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=top]~rolatech-app-page{margin-top:56px}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;height:100%}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 {
@@ -1145,9 +1245,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
1145
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" }]
1146
1246
  }] });
1147
1247
 
1248
+ class ImageComponent {
1249
+ src = input();
1250
+ img = viewChild.required('img');
1251
+ ngOnInit() {
1252
+ const image = this.img().nativeElement;
1253
+ image.onload = () => {
1254
+ image.style.visibility = 'visible';
1255
+ };
1256
+ }
1257
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1258
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.0", type: ImageComponent, isStandalone: true, selector: "rolatech-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "<img #img class=\"rolatech-image bg-gray-200\" [src]=\"src()\" style=\"visibility: hidden\" />\n", styles: [".rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
1259
+ }
1260
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ImageComponent, decorators: [{
1261
+ type: Component,
1262
+ args: [{ selector: 'rolatech-image', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<img #img class=\"rolatech-image bg-gray-200\" [src]=\"src()\" style=\"visibility: hidden\" />\n", styles: [".rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover}\n"] }]
1263
+ }] });
1264
+
1265
+ class ThumbnailComponent {
1266
+ hasClass = true;
1267
+ src = input();
1268
+ size = input.required();
1269
+ el = inject(ElementRef);
1270
+ renderer = inject(Renderer2);
1271
+ sizea = effect(() => {
1272
+ this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
1273
+ });
1274
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1275
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: ThumbnailComponent, isStandalone: true, selector: "rolatech-thumbnail", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.rt-rich-grid-media": "this.hasClass" } }, ngImport: i0, template: "@defer (on viewport()) {\n <a id=\"thumbnail\" class=\"rt-thumbnail\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n </a>\n} @placeholder {\n <div class=\"bg-gray-200 w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:rgb(229 231 235/var(--tw-bg-opacity))}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
1276
+ }
1277
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThumbnailComponent, decorators: [{
1278
+ type: Component,
1279
+ args: [{ selector: 'rolatech-thumbnail', standalone: true, imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, template: "@defer (on viewport()) {\n <a id=\"thumbnail\" class=\"rt-thumbnail\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n </a>\n} @placeholder {\n <div class=\"bg-gray-200 w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:rgb(229 231 235/var(--tw-bg-opacity))}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}\n"] }]
1280
+ }], propDecorators: { hasClass: [{
1281
+ type: HostBinding,
1282
+ args: ['class.rt-rich-grid-media']
1283
+ }] } });
1284
+
1148
1285
  /**
1149
1286
  * Generated bundle index. Do not edit.
1150
1287
  */
1151
1288
 
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 };
1289
+ export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, BaseComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, FolderComponent, IconButtonComponent, IconComponent, ImageComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, SpacerComponent, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TableComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
1153
1290
  //# sourceMappingURL=rolatech-angular-components.mjs.map