@tekus/kiosks-design-system 3.7.0 → 3.8.0
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/components/tk-kiosk-vertical-arrow-scroll/tk-kiosk-vertical-arrow-scroll.component.mjs +25 -14
- package/fesm2022/tekus-kiosks-design-system.mjs +23 -12
- package/fesm2022/tekus-kiosks-design-system.mjs.map +1 -1
- package/lib/components/tk-kiosk-vertical-arrow-scroll/tk-kiosk-vertical-arrow-scroll.component.d.ts +3 -2
- package/package.json +1 -1
|
@@ -1,52 +1,61 @@
|
|
|
1
1
|
import { NgIf } from '@angular/common';
|
|
2
|
-
import { Component, Input
|
|
2
|
+
import { Component, Input } from '@angular/core';
|
|
3
3
|
import { NzIconDirective, NzIconModule } from 'ng-zorro-antd/icon';
|
|
4
|
-
import { Subject, fromEvent, takeUntil
|
|
4
|
+
import { Subject, fromEvent, takeUntil } from 'rxjs';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export class TkKioskVerticalArrowScrollComponent {
|
|
7
7
|
constructor() {
|
|
8
|
+
this.elementToScroll = null;
|
|
8
9
|
this.sizeTopScroll = 620;
|
|
9
10
|
this.sizeBottomScroll = 620;
|
|
10
11
|
this.showArrows = true;
|
|
11
12
|
this.distanceBottomIcon = '146px';
|
|
13
|
+
this.type = 'navigation-arrows';
|
|
12
14
|
this.showUpArrow = false;
|
|
13
15
|
this.showDownArrow = true;
|
|
14
16
|
this.icon = 'tk-kiosk:arrow-go-down';
|
|
15
17
|
this.destroy$ = new Subject();
|
|
16
18
|
}
|
|
17
19
|
ngOnInit() {
|
|
18
|
-
|
|
20
|
+
// Only configure scroll listener for arrows mode
|
|
21
|
+
if (this.elementToScroll && this.type === 'navigation-arrows') {
|
|
19
22
|
const scroll$ = fromEvent(this.elementToScroll, 'scroll');
|
|
20
|
-
scroll$
|
|
21
|
-
.pipe(throttleTime(2000), takeUntil(this.destroy$))
|
|
22
|
-
.subscribe(() => {
|
|
23
|
-
//this._signaling.close().subscribe()
|
|
24
|
-
});
|
|
25
23
|
scroll$.pipe(takeUntil(this.destroy$)).subscribe(({ target }) => {
|
|
26
24
|
if (target) {
|
|
27
25
|
const { scrollTop, scrollHeight, clientHeight } = target;
|
|
28
26
|
this.showUpArrow = scrollTop > 100;
|
|
29
|
-
|
|
27
|
+
const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
|
|
28
|
+
this.showDownArrow = !atBottom;
|
|
30
29
|
}
|
|
31
30
|
});
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
goTop() {
|
|
35
|
-
this.elementToScroll
|
|
34
|
+
if (this.elementToScroll) {
|
|
35
|
+
this.elementToScroll.scrollTo({
|
|
36
|
+
top: this.elementToScroll.scrollTop - this.sizeTopScroll,
|
|
37
|
+
behavior: 'smooth'
|
|
38
|
+
});
|
|
39
|
+
}
|
|
36
40
|
}
|
|
37
41
|
goBottom() {
|
|
38
|
-
this.elementToScroll
|
|
42
|
+
if (this.elementToScroll) {
|
|
43
|
+
this.elementToScroll.scrollTo({
|
|
44
|
+
top: this.elementToScroll.scrollTop + this.sizeBottomScroll,
|
|
45
|
+
behavior: 'smooth'
|
|
46
|
+
});
|
|
47
|
+
}
|
|
39
48
|
}
|
|
40
49
|
ngOnDestroy() {
|
|
41
50
|
this.destroy$.next();
|
|
42
51
|
this.destroy$.complete();
|
|
43
52
|
}
|
|
44
53
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TkKioskVerticalArrowScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: TkKioskVerticalArrowScrollComponent, isStandalone: true, selector: "tk-kiosk-vertical-arrow-scroll", inputs: { elementToScroll: "elementToScroll", sizeTopScroll: "sizeTopScroll", sizeBottomScroll: "sizeBottomScroll", showArrows: "showArrows", distanceBottomIcon: "distanceBottomIcon" }, ngImport: i0, template: "<div class=\"cont\">\n
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: TkKioskVerticalArrowScrollComponent, isStandalone: true, selector: "tk-kiosk-vertical-arrow-scroll", inputs: { elementToScroll: "elementToScroll", sizeTopScroll: "sizeTopScroll", sizeBottomScroll: "sizeBottomScroll", showArrows: "showArrows", distanceBottomIcon: "distanceBottomIcon", type: "type" }, ngImport: i0, template: "<div class=\"cont\" [class.custom-scrollbar]=\"type === 'custom-scrollbar'\">\n <!-- Arrows (only for arrows mode) -->\n <ng-container *ngIf=\"type === 'navigation-arrows' && showArrows\">\n <div \n class=\"ant-arrow ant-arrow__top\" \n role=\"button\" \n tabindex=\"0\"\n aria-label=\"Scroll up\"\n (click)=\"goTop()\" \n (keydown.enter)=\"goTop()\"\n (keydown.space)=\"goTop()\"\n *ngIf=\"showUpArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n <div\n class=\"ant-arrow\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Scroll down\"\n [style]=\"{ bottom: distanceBottomIcon }\"\n (click)=\"goBottom()\"\n (keydown.enter)=\"goBottom()\"\n (keydown.space)=\"goBottom()\"\n *ngIf=\"showDownArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n </ng-container>\n <!-- Content -->\n <ng-content></ng-content>\n</div>\n", styles: [".cont{max-width:100%;height:fit-content;position:relative}.cont.custom-scrollbar .scrollable{overflow-y:auto;scroll-behavior:smooth}.cont.custom-scrollbar .scrollable::-webkit-scrollbar{width:21px}.cont.custom-scrollbar .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}:host ::ng-deep .scrollable::-webkit-scrollbar{width:21px}:host ::ng-deep .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}.cont:not(.custom-scrollbar) .scrollable{scrollbar-width:none;-ms-overflow-style:none}.cont:not(.custom-scrollbar) .scrollable::-webkit-scrollbar{display:none}.ant-arrow{background:var(--tk-color-secondary-900);position:fixed;z-index:10;right:30px;border-radius:50%;padding:10px;width:110px;height:110px;display:flex;justify-content:center;align-items:center}.ant-arrow span{margin:0;padding:0;font-size:80px;display:flex;color:#fff}.ant-arrow__top span{transform:rotate(180deg)}.ant-arrow__bottom{bottom:146px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzIconModule }] }); }
|
|
46
55
|
}
|
|
47
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TkKioskVerticalArrowScrollComponent, decorators: [{
|
|
48
57
|
type: Component,
|
|
49
|
-
args: [{ selector: 'tk-kiosk-vertical-arrow-scroll', standalone: true, imports: [NgIf, NzIconDirective, NzIconModule], template: "<div class=\"cont\">\n
|
|
58
|
+
args: [{ selector: 'tk-kiosk-vertical-arrow-scroll', standalone: true, imports: [NgIf, NzIconDirective, NzIconModule], template: "<div class=\"cont\" [class.custom-scrollbar]=\"type === 'custom-scrollbar'\">\n <!-- Arrows (only for arrows mode) -->\n <ng-container *ngIf=\"type === 'navigation-arrows' && showArrows\">\n <div \n class=\"ant-arrow ant-arrow__top\" \n role=\"button\" \n tabindex=\"0\"\n aria-label=\"Scroll up\"\n (click)=\"goTop()\" \n (keydown.enter)=\"goTop()\"\n (keydown.space)=\"goTop()\"\n *ngIf=\"showUpArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n <div\n class=\"ant-arrow\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Scroll down\"\n [style]=\"{ bottom: distanceBottomIcon }\"\n (click)=\"goBottom()\"\n (keydown.enter)=\"goBottom()\"\n (keydown.space)=\"goBottom()\"\n *ngIf=\"showDownArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n </ng-container>\n <!-- Content -->\n <ng-content></ng-content>\n</div>\n", styles: [".cont{max-width:100%;height:fit-content;position:relative}.cont.custom-scrollbar .scrollable{overflow-y:auto;scroll-behavior:smooth}.cont.custom-scrollbar .scrollable::-webkit-scrollbar{width:21px}.cont.custom-scrollbar .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}:host ::ng-deep .scrollable::-webkit-scrollbar{width:21px}:host ::ng-deep .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}.cont:not(.custom-scrollbar) .scrollable{scrollbar-width:none;-ms-overflow-style:none}.cont:not(.custom-scrollbar) .scrollable::-webkit-scrollbar{display:none}.ant-arrow{background:var(--tk-color-secondary-900);position:fixed;z-index:10;right:30px;border-radius:50%;padding:10px;width:110px;height:110px;display:flex;justify-content:center;align-items:center}.ant-arrow span{margin:0;padding:0;font-size:80px;display:flex;color:#fff}.ant-arrow__top span{transform:rotate(180deg)}.ant-arrow__bottom{bottom:146px}\n"] }]
|
|
50
59
|
}], ctorParameters: () => [], propDecorators: { elementToScroll: [{
|
|
51
60
|
type: Input
|
|
52
61
|
}], sizeTopScroll: [{
|
|
@@ -57,5 +66,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
|
|
|
57
66
|
type: Input
|
|
58
67
|
}], distanceBottomIcon: [{
|
|
59
68
|
type: Input
|
|
69
|
+
}], type: [{
|
|
70
|
+
type: Input
|
|
60
71
|
}] } });
|
|
61
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGsta2lvc2stdmVydGljYWwtYXJyb3ctc2Nyb2xsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RrLWtpb3NrLWRzL3NyYy9saWIvY29tcG9uZW50cy90ay1raW9zay12ZXJ0aWNhbC1hcnJvdy1zY3JvbGwvdGsta2lvc2stdmVydGljYWwtYXJyb3ctc2Nyb2xsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RrLWtpb3NrLWRzL3NyYy9saWIvY29tcG9uZW50cy90ay1raW9zay12ZXJ0aWNhbC1hcnJvdy1zY3JvbGwvdGsta2lvc2stdmVydGljYWwtYXJyb3ctc2Nyb2xsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQWdCLE1BQU0sTUFBTSxDQUFDOztBQVNuRSxNQUFNLE9BQU8sbUNBQW1DO0lBYTlDO1FBWlMsb0JBQWUsR0FBdUIsSUFBSSxDQUFDO1FBQzNDLGtCQUFhLEdBQUcsR0FBRyxDQUFDO1FBQ3BCLHFCQUFnQixHQUFHLEdBQUcsQ0FBQztRQUN2QixlQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLHVCQUFrQixHQUFHLE9BQU8sQ0FBQztRQUM3QixTQUFJLEdBQTZDLG1CQUFtQixDQUFDO1FBRTlFLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLGtCQUFhLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLFNBQUksR0FBRyx3QkFBd0IsQ0FBQztRQUN4QixhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztJQUV4QixDQUFDO0lBRWhCLFFBQVE7UUFDTixpREFBaUQ7UUFDakQsSUFBSSxJQUFJLENBQUMsZUFBZSxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssbUJBQW1CLEVBQUU7WUFDN0QsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFRLElBQUksQ0FBQyxlQUFlLEVBQUUsUUFBUSxDQUFDLENBQUM7WUFFakUsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFO2dCQUM5RCxJQUFJLE1BQU0sRUFBRTtvQkFDVixNQUFNLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsR0FBRyxNQUFxQixDQUFDO29CQUN4RSxJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsR0FBRyxHQUFHLENBQUM7b0JBQ25DLE1BQU0sUUFBUSxHQUFHLFNBQVMsR0FBRyxZQUFZLElBQUksWUFBWSxHQUFHLENBQUMsQ0FBQztvQkFDOUQsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLFFBQVEsQ0FBQztpQkFDaEM7WUFDSCxDQUFDLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDeEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLENBQUM7Z0JBQzVCLEdBQUcsRUFBRSxJQUFJLENBQUMsZUFBZSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsYUFBYTtnQkFDeEQsUUFBUSxFQUFFLFFBQVE7YUFDbkIsQ0FBQyxDQUFDO1NBQ0o7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUN4QixJQUFJLENBQUMsZUFBZSxDQUFDLFFBQVEsQ0FBQztnQkFDNUIsR0FBRyxFQUFFLElBQUksQ0FBQyxlQUFlLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxnQkFBZ0I7Z0JBQzNELFFBQVEsRUFBRSxRQUFRO2FBQ25CLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDM0IsQ0FBQzs4R0FwRFUsbUNBQW1DO2tHQUFuQyxtQ0FBbUMsa1NDWmhELHc5QkE4QkEsK2hDRHRCWSxJQUFJLDZGQUFFLGVBQWUsZ0tBQUUsWUFBWTs7MkZBSWxDLG1DQUFtQztrQkFQL0MsU0FBUzsrQkFDRSxnQ0FBZ0MsY0FDOUIsSUFBSSxXQUNQLENBQUMsSUFBSSxFQUFFLGVBQWUsRUFBRSxZQUFZLENBQUM7d0RBS3JDLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTnpJY29uRGlyZWN0aXZlLCBOekljb25Nb2R1bGUgfSBmcm9tICduZy16b3Jyby1hbnRkL2ljb24nO1xuaW1wb3J0IHsgU3ViamVjdCwgZnJvbUV2ZW50LCB0YWtlVW50aWwsIHRocm90dGxlVGltZSB9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd0ay1raW9zay12ZXJ0aWNhbC1hcnJvdy1zY3JvbGwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZiwgTnpJY29uRGlyZWN0aXZlLCBOekljb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vdGsta2lvc2stdmVydGljYWwtYXJyb3ctc2Nyb2xsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGsta2lvc2stdmVydGljYWwtYXJyb3ctc2Nyb2xsLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFRrS2lvc2tWZXJ0aWNhbEFycm93U2Nyb2xsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSBlbGVtZW50VG9TY3JvbGw6IEhUTUxFbGVtZW50IHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCgpIHNpemVUb3BTY3JvbGwgPSA2MjA7XG4gIEBJbnB1dCgpIHNpemVCb3R0b21TY3JvbGwgPSA2MjA7XG4gIEBJbnB1dCgpIHNob3dBcnJvd3MgPSB0cnVlO1xuICBASW5wdXQoKSBkaXN0YW5jZUJvdHRvbUljb24gPSAnMTQ2cHgnO1xuICBASW5wdXQoKSB0eXBlOiAnbmF2aWdhdGlvbi1hcnJvd3MnIHwgJ2N1c3RvbS1zY3JvbGxiYXInID0gJ25hdmlnYXRpb24tYXJyb3dzJztcblxuICBzaG93VXBBcnJvdyA9IGZhbHNlO1xuICBzaG93RG93bkFycm93ID0gdHJ1ZTtcbiAgaWNvbiA9ICd0ay1raW9zazphcnJvdy1nby1kb3duJztcbiAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIC8vIE9ubHkgY29uZmlndXJlIHNjcm9sbCBsaXN0ZW5lciBmb3IgYXJyb3dzIG1vZGVcbiAgICBpZiAodGhpcy5lbGVtZW50VG9TY3JvbGwgJiYgdGhpcy50eXBlID09PSAnbmF2aWdhdGlvbi1hcnJvd3MnKSB7XG4gICAgICBjb25zdCBzY3JvbGwkID0gZnJvbUV2ZW50PEV2ZW50Pih0aGlzLmVsZW1lbnRUb1Njcm9sbCwgJ3Njcm9sbCcpO1xuXG4gICAgICBzY3JvbGwkLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKS5zdWJzY3JpYmUoKHsgdGFyZ2V0IH0pID0+IHtcbiAgICAgICAgaWYgKHRhcmdldCkge1xuICAgICAgICAgIGNvbnN0IHsgc2Nyb2xsVG9wLCBzY3JvbGxIZWlnaHQsIGNsaWVudEhlaWdodCB9ID0gdGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuICAgICAgICAgIHRoaXMuc2hvd1VwQXJyb3cgPSBzY3JvbGxUb3AgPiAxMDA7XG4gICAgICAgICAgY29uc3QgYXRCb3R0b20gPSBzY3JvbGxUb3AgKyBjbGllbnRIZWlnaHQgPj0gc2Nyb2xsSGVpZ2h0IC0gMTtcbiAgICAgICAgICB0aGlzLnNob3dEb3duQXJyb3cgPSAhYXRCb3R0b207XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIGdvVG9wKCkge1xuICAgIGlmICh0aGlzLmVsZW1lbnRUb1Njcm9sbCkge1xuICAgICAgdGhpcy5lbGVtZW50VG9TY3JvbGwuc2Nyb2xsVG8oe1xuICAgICAgICB0b3A6IHRoaXMuZWxlbWVudFRvU2Nyb2xsLnNjcm9sbFRvcCAtIHRoaXMuc2l6ZVRvcFNjcm9sbCxcbiAgICAgICAgYmVoYXZpb3I6ICdzbW9vdGgnXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBnb0JvdHRvbSgpIHtcbiAgICBpZiAodGhpcy5lbGVtZW50VG9TY3JvbGwpIHtcbiAgICAgIHRoaXMuZWxlbWVudFRvU2Nyb2xsLnNjcm9sbFRvKHtcbiAgICAgICAgdG9wOiB0aGlzLmVsZW1lbnRUb1Njcm9sbC5zY3JvbGxUb3AgKyB0aGlzLnNpemVCb3R0b21TY3JvbGwsXG4gICAgICAgIGJlaGF2aW9yOiAnc21vb3RoJ1xuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5kZXN0cm95JC5uZXh0KCk7XG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29udFwiIFtjbGFzcy5jdXN0b20tc2Nyb2xsYmFyXT1cInR5cGUgPT09ICdjdXN0b20tc2Nyb2xsYmFyJ1wiPlxuICA8IS0tIEFycm93cyAob25seSBmb3IgYXJyb3dzIG1vZGUpIC0tPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidHlwZSA9PT0gJ25hdmlnYXRpb24tYXJyb3dzJyAmJiBzaG93QXJyb3dzXCI+XG4gICAgPGRpdiBcbiAgICAgIGNsYXNzPVwiYW50LWFycm93IGFudC1hcnJvd19fdG9wXCIgXG4gICAgICByb2xlPVwiYnV0dG9uXCIgXG4gICAgICB0YWJpbmRleD1cIjBcIlxuICAgICAgYXJpYS1sYWJlbD1cIlNjcm9sbCB1cFwiXG4gICAgICAoY2xpY2spPVwiZ29Ub3AoKVwiIFxuICAgICAgKGtleWRvd24uZW50ZXIpPVwiZ29Ub3AoKVwiXG4gICAgICAoa2V5ZG93bi5zcGFjZSk9XCJnb1RvcCgpXCJcbiAgICAgICpuZ0lmPVwic2hvd1VwQXJyb3dcIj5cbiAgICAgIDxzcGFuIG56LWljb24gW256VHlwZV09XCJpY29uXCIgY2xhc3M9XCJhcnJvd1wiPjwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImFudC1hcnJvd1wiXG4gICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgIHRhYmluZGV4PVwiMFwiXG4gICAgICBhcmlhLWxhYmVsPVwiU2Nyb2xsIGRvd25cIlxuICAgICAgW3N0eWxlXT1cInsgYm90dG9tOiBkaXN0YW5jZUJvdHRvbUljb24gfVwiXG4gICAgICAoY2xpY2spPVwiZ29Cb3R0b20oKVwiXG4gICAgICAoa2V5ZG93bi5lbnRlcik9XCJnb0JvdHRvbSgpXCJcbiAgICAgIChrZXlkb3duLnNwYWNlKT1cImdvQm90dG9tKClcIlxuICAgICAgKm5nSWY9XCJzaG93RG93bkFycm93XCI+XG4gICAgICA8c3BhbiBuei1pY29uIFtuelR5cGVdPVwiaWNvblwiIGNsYXNzPVwiYXJyb3dcIj48L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuICA8IS0tIENvbnRlbnQgLS0+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19
|
|
@@ -31,7 +31,7 @@ import numeral from 'numeral';
|
|
|
31
31
|
import * as i3$2 from 'ng-zorro-antd/form';
|
|
32
32
|
import { NzFormModule } from 'ng-zorro-antd/form';
|
|
33
33
|
import * as i2$3 from 'ng-zorro-antd/grid';
|
|
34
|
-
import { Subject, fromEvent,
|
|
34
|
+
import { Subject, fromEvent, takeUntil, BehaviorSubject } from 'rxjs';
|
|
35
35
|
import * as i2$4 from 'ng-zorro-antd/time-picker';
|
|
36
36
|
import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
|
|
37
37
|
|
|
@@ -3032,48 +3032,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
|
|
|
3032
3032
|
|
|
3033
3033
|
class TkKioskVerticalArrowScrollComponent {
|
|
3034
3034
|
constructor() {
|
|
3035
|
+
this.elementToScroll = null;
|
|
3035
3036
|
this.sizeTopScroll = 620;
|
|
3036
3037
|
this.sizeBottomScroll = 620;
|
|
3037
3038
|
this.showArrows = true;
|
|
3038
3039
|
this.distanceBottomIcon = '146px';
|
|
3040
|
+
this.type = 'navigation-arrows';
|
|
3039
3041
|
this.showUpArrow = false;
|
|
3040
3042
|
this.showDownArrow = true;
|
|
3041
3043
|
this.icon = 'tk-kiosk:arrow-go-down';
|
|
3042
3044
|
this.destroy$ = new Subject();
|
|
3043
3045
|
}
|
|
3044
3046
|
ngOnInit() {
|
|
3045
|
-
|
|
3047
|
+
// Only configure scroll listener for arrows mode
|
|
3048
|
+
if (this.elementToScroll && this.type === 'navigation-arrows') {
|
|
3046
3049
|
const scroll$ = fromEvent(this.elementToScroll, 'scroll');
|
|
3047
|
-
scroll$
|
|
3048
|
-
.pipe(throttleTime(2000), takeUntil(this.destroy$))
|
|
3049
|
-
.subscribe(() => {
|
|
3050
|
-
//this._signaling.close().subscribe()
|
|
3051
|
-
});
|
|
3052
3050
|
scroll$.pipe(takeUntil(this.destroy$)).subscribe(({ target }) => {
|
|
3053
3051
|
if (target) {
|
|
3054
3052
|
const { scrollTop, scrollHeight, clientHeight } = target;
|
|
3055
3053
|
this.showUpArrow = scrollTop > 100;
|
|
3056
|
-
|
|
3054
|
+
const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
|
|
3055
|
+
this.showDownArrow = !atBottom;
|
|
3057
3056
|
}
|
|
3058
3057
|
});
|
|
3059
3058
|
}
|
|
3060
3059
|
}
|
|
3061
3060
|
goTop() {
|
|
3062
|
-
this.elementToScroll
|
|
3061
|
+
if (this.elementToScroll) {
|
|
3062
|
+
this.elementToScroll.scrollTo({
|
|
3063
|
+
top: this.elementToScroll.scrollTop - this.sizeTopScroll,
|
|
3064
|
+
behavior: 'smooth'
|
|
3065
|
+
});
|
|
3066
|
+
}
|
|
3063
3067
|
}
|
|
3064
3068
|
goBottom() {
|
|
3065
|
-
this.elementToScroll
|
|
3069
|
+
if (this.elementToScroll) {
|
|
3070
|
+
this.elementToScroll.scrollTo({
|
|
3071
|
+
top: this.elementToScroll.scrollTop + this.sizeBottomScroll,
|
|
3072
|
+
behavior: 'smooth'
|
|
3073
|
+
});
|
|
3074
|
+
}
|
|
3066
3075
|
}
|
|
3067
3076
|
ngOnDestroy() {
|
|
3068
3077
|
this.destroy$.next();
|
|
3069
3078
|
this.destroy$.complete();
|
|
3070
3079
|
}
|
|
3071
3080
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TkKioskVerticalArrowScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: TkKioskVerticalArrowScrollComponent, isStandalone: true, selector: "tk-kiosk-vertical-arrow-scroll", inputs: { elementToScroll: "elementToScroll", sizeTopScroll: "sizeTopScroll", sizeBottomScroll: "sizeBottomScroll", showArrows: "showArrows", distanceBottomIcon: "distanceBottomIcon" }, ngImport: i0, template: "<div class=\"cont\">\n
|
|
3081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: TkKioskVerticalArrowScrollComponent, isStandalone: true, selector: "tk-kiosk-vertical-arrow-scroll", inputs: { elementToScroll: "elementToScroll", sizeTopScroll: "sizeTopScroll", sizeBottomScroll: "sizeBottomScroll", showArrows: "showArrows", distanceBottomIcon: "distanceBottomIcon", type: "type" }, ngImport: i0, template: "<div class=\"cont\" [class.custom-scrollbar]=\"type === 'custom-scrollbar'\">\n <!-- Arrows (only for arrows mode) -->\n <ng-container *ngIf=\"type === 'navigation-arrows' && showArrows\">\n <div \n class=\"ant-arrow ant-arrow__top\" \n role=\"button\" \n tabindex=\"0\"\n aria-label=\"Scroll up\"\n (click)=\"goTop()\" \n (keydown.enter)=\"goTop()\"\n (keydown.space)=\"goTop()\"\n *ngIf=\"showUpArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n <div\n class=\"ant-arrow\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Scroll down\"\n [style]=\"{ bottom: distanceBottomIcon }\"\n (click)=\"goBottom()\"\n (keydown.enter)=\"goBottom()\"\n (keydown.space)=\"goBottom()\"\n *ngIf=\"showDownArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n </ng-container>\n <!-- Content -->\n <ng-content></ng-content>\n</div>\n", styles: [".cont{max-width:100%;height:fit-content;position:relative}.cont.custom-scrollbar .scrollable{overflow-y:auto;scroll-behavior:smooth}.cont.custom-scrollbar .scrollable::-webkit-scrollbar{width:21px}.cont.custom-scrollbar .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}:host ::ng-deep .scrollable::-webkit-scrollbar{width:21px}:host ::ng-deep .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}.cont:not(.custom-scrollbar) .scrollable{scrollbar-width:none;-ms-overflow-style:none}.cont:not(.custom-scrollbar) .scrollable::-webkit-scrollbar{display:none}.ant-arrow{background:var(--tk-color-secondary-900);position:fixed;z-index:10;right:30px;border-radius:50%;padding:10px;width:110px;height:110px;display:flex;justify-content:center;align-items:center}.ant-arrow span{margin:0;padding:0;font-size:80px;display:flex;color:#fff}.ant-arrow__top span{transform:rotate(180deg)}.ant-arrow__bottom{bottom:146px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzIconModule }] }); }
|
|
3073
3082
|
}
|
|
3074
3083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TkKioskVerticalArrowScrollComponent, decorators: [{
|
|
3075
3084
|
type: Component,
|
|
3076
|
-
args: [{ selector: 'tk-kiosk-vertical-arrow-scroll', standalone: true, imports: [NgIf, NzIconDirective, NzIconModule], template: "<div class=\"cont\">\n
|
|
3085
|
+
args: [{ selector: 'tk-kiosk-vertical-arrow-scroll', standalone: true, imports: [NgIf, NzIconDirective, NzIconModule], template: "<div class=\"cont\" [class.custom-scrollbar]=\"type === 'custom-scrollbar'\">\n <!-- Arrows (only for arrows mode) -->\n <ng-container *ngIf=\"type === 'navigation-arrows' && showArrows\">\n <div \n class=\"ant-arrow ant-arrow__top\" \n role=\"button\" \n tabindex=\"0\"\n aria-label=\"Scroll up\"\n (click)=\"goTop()\" \n (keydown.enter)=\"goTop()\"\n (keydown.space)=\"goTop()\"\n *ngIf=\"showUpArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n <div\n class=\"ant-arrow\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Scroll down\"\n [style]=\"{ bottom: distanceBottomIcon }\"\n (click)=\"goBottom()\"\n (keydown.enter)=\"goBottom()\"\n (keydown.space)=\"goBottom()\"\n *ngIf=\"showDownArrow\">\n <span nz-icon [nzType]=\"icon\" class=\"arrow\"></span>\n </div>\n </ng-container>\n <!-- Content -->\n <ng-content></ng-content>\n</div>\n", styles: [".cont{max-width:100%;height:fit-content;position:relative}.cont.custom-scrollbar .scrollable{overflow-y:auto;scroll-behavior:smooth}.cont.custom-scrollbar .scrollable::-webkit-scrollbar{width:21px}.cont.custom-scrollbar .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}:host ::ng-deep .scrollable::-webkit-scrollbar{width:21px}:host ::ng-deep .scrollable::-webkit-scrollbar-thumb{background:var(--tk-color-neutral-200);border-radius:30px}.cont:not(.custom-scrollbar) .scrollable{scrollbar-width:none;-ms-overflow-style:none}.cont:not(.custom-scrollbar) .scrollable::-webkit-scrollbar{display:none}.ant-arrow{background:var(--tk-color-secondary-900);position:fixed;z-index:10;right:30px;border-radius:50%;padding:10px;width:110px;height:110px;display:flex;justify-content:center;align-items:center}.ant-arrow span{margin:0;padding:0;font-size:80px;display:flex;color:#fff}.ant-arrow__top span{transform:rotate(180deg)}.ant-arrow__bottom{bottom:146px}\n"] }]
|
|
3077
3086
|
}], ctorParameters: () => [], propDecorators: { elementToScroll: [{
|
|
3078
3087
|
type: Input
|
|
3079
3088
|
}], sizeTopScroll: [{
|
|
@@ -3084,6 +3093,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
|
|
|
3084
3093
|
type: Input
|
|
3085
3094
|
}], distanceBottomIcon: [{
|
|
3086
3095
|
type: Input
|
|
3096
|
+
}], type: [{
|
|
3097
|
+
type: Input
|
|
3087
3098
|
}] } });
|
|
3088
3099
|
|
|
3089
3100
|
class TkKioskFooterNavigationComponent {
|