All files / components/upp-tabbar upp-tabbar.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Optional, Host } from '@angular/core';
import { Input, Output, EventEmitter } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
import { Subscription } from 'rxjs';
 
/**
 * Represents a tab bar component that contains multiple tab buttons.
 * It manages tab selection and emits an event when a tab is selected.
 */
@Component({
    selector: 'upp-tab-bar',
    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: './upp-tabbar.html',
    styleUrl: './upp-tabbar.scss'
})
export class UppTabBarComponent {
    /** The currently selected tab name. */
    @Input() selected: string | null = null;
 
    /**
     * @constructor
     * @param change A reference to Angular's ChangeDetectorRef, used to manually control change detection.
     */    
    constructor(private change: ChangeDetectorRef){
        // nothing to do
    }
 
    /**
     * Event emitted when a tab is selected.
     * The selected tab name is passed as a string.
     */    
    @Output() Selected = new EventEmitter <string> (); 
 
    /**
     * Handles tab selection by setting the current tab and emitting the selection event.
     * 
     * @param tabbutton - The name of the tab button that is selected.
     */    
    OnSelected(tabbutton: string){
        this.Selected.next(tabbutton);
        this.change.markForCheck();
    }
 
    /**
     * Gets the currently selected tab name.
     * 
     * @returns The name of the currently selected tab, or `null` if no tab is selected.
     */    
    get current(): string | null {
        return this.selected;
    }
}
 
/**
 * Represents a tab button that belongs to the `UppTabBarComponent`.
 * It communicates with the parent `UppTabBarComponent` when clicked.
 */
@Component({
    selector: 'upp-tab-button',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <ion-tab-button [ngClass]="{ 'selected': IsTab }" (click)="OnTab()">
            <ion-icon [name]="tabicon"></ion-icon>
            <ion-label>{{tablabel}}</ion-label>        
        </ion-tab-button>    
    `,
    styleUrl: './upp-tabbar.scss'
})
export class UppTabButtonComponent implements OnInit, OnDestroy {
    /** The name of the tab. */
    @Input() tabname: string | null = null;
 
    /** The label to be displayed inside the tab button. */
    @Input() tablabel: string | null = null;
 
    /** The icon name to be used for the tab button. */
    @Input() tabicon: string | null = null;
 
    /**
     * @constructor
     * @param change A reference to Angular's ChangeDetectorRef, used to manually control change detection.
     * @param tabbar The parent `UppTabBarComponent` instance (optional).
     */  
    constructor(private change: ChangeDetectorRef, @Optional() @Host() private tabbar: UppTabBarComponent){
        // nothing to do
    }
 
    /** Subscription to the `Selected` event of the parent `UppTabBarComponent`. */
    private _tab_subscription: Subscription | null = null;
 
    /**
     * Lifecycle hook that is called after Angular initializes the component.
     * Subscribes to the `Selected` event of the parent `UppTabBarComponent`,
     * ensuring the tab updates when the selection changes.
     */    
    ngOnInit(){
        Iif (this.tabbar){
            this._tab_subscription = this.tabbar.Selected.subscribe(
            () => {
                this.change.markForCheck();
            })
        }
    }
 
    /**
     * Lifecycle hook that is called before Angular destroys the component.
     * Unsubscribes from the `Selected` event to prevent memory leaks.
     */    
    ngOnDestroy(){
        Iif (this._tab_subscription){
            this._tab_subscription.unsubscribe();
            this._tab_subscription = null;
        }
    }
 
    /**
     * Determines whether the tab is currently selected.
     * 
     * @returns `true` if this tab is selected, otherwise `false`.
     */    
    get IsTab(){
        Iif (this.tabbar && this.tabname) {
            return (this.tabbar.current == this.tabname);
        }
 
        return false;
    }
 
    /**
     * Handles the tab button click event.
     * Calls the `OnSelected` method of the parent `UppTabBarComponent` to notify of the tab selection.
     */    
    OnTab(){
        Iif (this.tabbar && this.tabname) {
            this.tabbar.OnSelected(this.tabname);
        }
    }
}