@rolatech/angular-components 17.6.6 → 17.6.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/drawer/drawer.component.mjs +7 -8
- package/esm2022/lib/layout/layout-event.service.mjs +22 -0
- package/esm2022/lib/layout/layout.component.mjs +13 -18
- package/esm2022/lib/rich-view/rich-view.component.mjs +4 -3
- package/esm2022/lib/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/topbar/topbar.component.mjs +9 -34
- package/fesm2022/rolatech-angular-components.mjs +69 -100
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/lib/drawer/drawer.component.d.ts +3 -3
- package/lib/layout/layout-event.service.d.ts +9 -0
- package/lib/layout/layout.component.d.ts +4 -5
- package/lib/topbar/topbar.component.d.ts +0 -4
- package/package.json +1 -1
|
@@ -1,56 +1,31 @@
|
|
|
1
1
|
import { Component, ElementRef, HostBinding, PLATFORM_ID, Renderer2, ViewEncapsulation, inject, input, } from '@angular/core';
|
|
2
|
-
import { CommonModule
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
3
|
import { RouterLink } from '@angular/router';
|
|
4
4
|
import { MatButtonModule } from '@angular/material/button';
|
|
5
5
|
import { MatIcon } from '@angular/material/icon';
|
|
6
6
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
7
|
-
import { map } from 'rxjs';
|
|
8
7
|
import { IconButtonComponent } from '../icon-button/icon-button.component';
|
|
9
8
|
import { APP_LAYOUT } from '../../provider';
|
|
10
9
|
import { MenuIconComponent } from '../menu-icon/menu-icon.component';
|
|
11
10
|
import * as i0 from "@angular/core";
|
|
12
|
-
import * as i1 from "@angular/common";
|
|
13
|
-
const EXTRA_SMALL_WIDTH_BREAKPOINT = 768;
|
|
14
11
|
export class TopbarComponent {
|
|
15
12
|
hostId = 'rolatech-topbar';
|
|
16
13
|
hasClass = true;
|
|
17
|
-
persistent;
|
|
14
|
+
persistent = inject(APP_LAYOUT).persistent;
|
|
18
15
|
el = inject(ElementRef);
|
|
19
16
|
renderer = inject(Renderer2);
|
|
20
17
|
platformId = inject(PLATFORM_ID);
|
|
21
18
|
breakpointObserver = inject(BreakpointObserver);
|
|
22
19
|
appLayout = inject(APP_LAYOUT);
|
|
23
20
|
link = input('/');
|
|
24
|
-
isHandset$;
|
|
25
|
-
// isScreenSmall$: Observable<boolean>;
|
|
26
21
|
appDrawer;
|
|
27
22
|
miniGuide;
|
|
28
|
-
constructor() {
|
|
29
|
-
this.isHandset$ = this.breakpointObserver
|
|
30
|
-
.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
|
|
31
|
-
.pipe(map((breakpoint) => breakpoint.matches));
|
|
32
|
-
}
|
|
33
23
|
ngOnInit() {
|
|
34
|
-
this.setMenuIconVisible();
|
|
35
|
-
}
|
|
36
|
-
setMenuIconVisible() {
|
|
37
24
|
if (this.persistent) {
|
|
38
|
-
|
|
25
|
+
this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
|
|
39
26
|
}
|
|
40
|
-
|
|
41
|
-
this.
|
|
42
|
-
.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
|
|
43
|
-
.pipe(map((result) => result.matches))
|
|
44
|
-
.subscribe({
|
|
45
|
-
next: (res) => {
|
|
46
|
-
if (res) {
|
|
47
|
-
this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
this.renderer.setAttribute(this.el.nativeElement, 'persistent', '');
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
});
|
|
27
|
+
else {
|
|
28
|
+
this.renderer.removeAttribute(this.el.nativeElement, 'persistent');
|
|
54
29
|
}
|
|
55
30
|
}
|
|
56
31
|
onToggle() {
|
|
@@ -60,16 +35,16 @@ export class TopbarComponent {
|
|
|
60
35
|
this.appDrawer.toggle();
|
|
61
36
|
}
|
|
62
37
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
38
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 flex items-center\">\n <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div class=\"flex-1\"></div>\n <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not([persistent]) #topbar-menu-button{display:none}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}rolatech-topbar #topbar-menu-button{display:block!important}}\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: "ngmodule", type: MatButtonModule }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }], encapsulation: i0.ViewEncapsulation.None });
|
|
64
39
|
}
|
|
65
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
66
41
|
type: Component,
|
|
67
|
-
args: [{ selector: 'rolatech-topbar', standalone: true, imports: [CommonModule, RouterLink, IconButtonComponent, MatButtonModule, MatIcon, MenuIconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"h-14 flex items-center\">\n
|
|
68
|
-
}],
|
|
42
|
+
args: [{ selector: 'rolatech-topbar', standalone: true, imports: [CommonModule, RouterLink, IconButtonComponent, MatButtonModule, MatIcon, MenuIconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"h-14 flex items-center\">\n <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div class=\"flex-1\"></div>\n <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not([persistent]) #topbar-menu-button{display:none}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}rolatech-topbar #topbar-menu-button{display:block!important}}\n"] }]
|
|
43
|
+
}], propDecorators: { hostId: [{
|
|
69
44
|
type: HostBinding,
|
|
70
45
|
args: ['id']
|
|
71
46
|
}], hasClass: [{
|
|
72
47
|
type: HostBinding,
|
|
73
48
|
args: ['class.rolatech-topbar']
|
|
74
49
|
}] } });
|
|
75
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
50
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvdG9wYmFyL3RvcGJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RvcGJhci90b3BiYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUVYLFdBQVcsRUFDWCxTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2pELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUc1QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7QUFVckUsTUFBTSxPQUFPLGVBQWU7SUFDUCxNQUFNLEdBQUcsaUJBQWlCLENBQUM7SUFDUixRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3RELFVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUMsVUFBVSxDQUFDO0lBQzNDLEVBQUUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDeEIsUUFBUSxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUM3QixVQUFVLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ2pDLGtCQUFrQixHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQ2hELFNBQVMsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDL0IsSUFBSSxHQUFHLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNsQixTQUFTLENBQW1CO0lBQzVCLFNBQVMsQ0FBc0I7SUFFL0IsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksRUFBRSxFQUFFLENBQUMsQ0FBQztRQUN0RSxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBQ3JFLENBQUM7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUN6QixJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQzFCLENBQUM7UUFDRCxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQzFCLENBQUM7dUdBMUJVLGVBQWU7MkZBQWYsZUFBZSxxU0M5QjVCLDhkQVdBLG9zQkRjWSxZQUFZLCtCQUFFLFVBQVUsbU9BQXVCLGVBQWUsK0JBQVcsaUJBQWlCOzsyRkFLekYsZUFBZTtrQkFSM0IsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsVUFBVSxFQUFFLG1CQUFtQixFQUFFLGVBQWUsRUFBRSxPQUFPLEVBQUUsaUJBQWlCLENBQUMsaUJBR3RGLGlCQUFpQixDQUFDLElBQUk7OEJBR2xCLE1BQU07c0JBQXhCLFdBQVc7dUJBQUMsSUFBSTtnQkFDcUIsUUFBUTtzQkFBN0MsV0FBVzt1QkFBQyx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBPbkluaXQsXG4gIFBMQVRGT1JNX0lELFxuICBSZW5kZXJlcjIsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBpbmplY3QsXG4gIGlucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSb3V0ZXJMaW5rIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IE1hdEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7XG5pbXBvcnQgeyBNYXRJY29uIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvbic7XG5pbXBvcnQgeyBCcmVha3BvaW50T2JzZXJ2ZXIgfSBmcm9tICdAYW5ndWxhci9jZGsvbGF5b3V0JztcbmltcG9ydCB7IEljb25CdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uLWJ1dHRvbi9pY29uLWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVBQX0xBWU9VVCB9IGZyb20gJy4uLy4uL3Byb3ZpZGVyJztcbmltcG9ydCB7IERyYXdlckNvbXBvbmVudCB9IGZyb20gJy4uL2RyYXdlci9kcmF3ZXIuY29tcG9uZW50JztcbmltcG9ydCB7IE1pbmlHdWlkZUNvbXBvbmVudCB9IGZyb20gJy4uL21pbmktZ3VpZGUvbWluaS1ndWlkZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWVudUljb25Db21wb25lbnQgfSBmcm9tICcuLi9tZW51LWljb24vbWVudS1pY29uLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXRvcGJhcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFJvdXRlckxpbmssIEljb25CdXR0b25Db21wb25lbnQsIE1hdEJ1dHRvbk1vZHVsZSwgTWF0SWNvbiwgTWVudUljb25Db21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9wYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3RvcGJhci5jb21wb25lbnQuc2NzcycsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFRvcGJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBIb3N0QmluZGluZygnaWQnKSBob3N0SWQgPSAncm9sYXRlY2gtdG9wYmFyJztcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5yb2xhdGVjaC10b3BiYXInKSBoYXNDbGFzcyA9IHRydWU7XG4gIHBlcnNpc3RlbnQgPSBpbmplY3QoQVBQX0xBWU9VVCkucGVyc2lzdGVudDtcbiAgZWwgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHJlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHBsYXRmb3JtSWQgPSBpbmplY3QoUExBVEZPUk1fSUQpO1xuICBicmVha3BvaW50T2JzZXJ2ZXIgPSBpbmplY3QoQnJlYWtwb2ludE9ic2VydmVyKTtcbiAgYXBwTGF5b3V0ID0gaW5qZWN0KEFQUF9MQVlPVVQpO1xuICBsaW5rID0gaW5wdXQoJy8nKTtcbiAgYXBwRHJhd2VyITogRHJhd2VyQ29tcG9uZW50O1xuICBtaW5pR3VpZGUhOiBNaW5pR3VpZGVDb21wb25lbnQ7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucGVyc2lzdGVudCkge1xuICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncGVyc2lzdGVudCcsICcnKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncGVyc2lzdGVudCcpO1xuICAgIH1cbiAgfVxuXG4gIG9uVG9nZ2xlKCkge1xuICAgIGlmICh0aGlzLmFwcExheW91dC5ndWlkZSkge1xuICAgICAgdGhpcy5taW5pR3VpZGUudG9nZ2xlKCk7XG4gICAgfVxuICAgIHRoaXMuYXBwRHJhd2VyLnRvZ2dsZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiaC0xNCBmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICA8cm9sYXRlY2gtbWVudS1pY29uIGlkPVwidG9wYmFyLW1lbnUtYnV0dG9uXCIgKGNsaWNrKT1cIm9uVG9nZ2xlKClcIj48L3JvbGF0ZWNoLW1lbnUtaWNvbj5cbiAgPGRpdiBjbGFzcz1cImN1cnNvci1wb2ludGVyIG1sLTFcIiBbcm91dGVyTGlua109XCJsaW5rKClcIj5cbiAgICA8ZGl2IGNsYXNzPVwidGV4dC1bLS1ydC10ZXh0LXByaW1hcnldIHRleHQtbGcgbWQ6dGV4dC14bCBmb250LWJvbGRcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC1vcmFuZ2UtNjAwXCI+e3sgYXBwTGF5b3V0LnRpdGxlIH19PC9zcGFuPlxuICAgICAgPHNwYW4+e3sgYXBwTGF5b3V0LnN1YnRpdGxlIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImZsZXgtMVwiPjwvZGl2PlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
|