All files / components/upp-header upp-header.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Component } from '@angular/core';
import { Input } from '@angular/core';
 
import { viewService } from '@unpispas/upp-base';
 
/**
 * A reusable header component for panels in an Ionic application.
 *
 * The `UppHeaderComponent` is designed to serve as a customizable header
 * with support for a menu button, dynamic content, and action buttons.
 *
 * @example
 * <upp-header [menu]="'show'">
 *   <upp-header-content>
 *     <ion-label>Main Header</ion-label>
 *   </upp-header-content>
 *   <upp-header-buttons>
 *     <ion-button (click)="onEdit()">Edit</ion-button>
 *     <ion-button (click)="onDelete()">Delete</ion-button>
 *   </upp-header-buttons>
 * </upp-header>
 *
 * @see {@link UppHeaderContentComponent}
 * @see {@link UppHeaderButtonsComponent}
 */
@Component({
    selector: 'upp-header',
    templateUrl: './upp-header.html',
    styleUrls: ['./upp-header.scss'],
})
export class UppHeaderComponent {
    /**
     * Determines whether the menu button should be displayed.
     *
     * - `'show'`: The menu button is visible if the view is in mobile mode.
     * - `'hide'`: The menu button is always hidden.
     *
     * @default `'show'`
     */    
    @Input() menu: 'show' | 'hide' = 'show';
 
    /**
     * Determines the header background color (primary, success, warning..).
     * @default `'warning'`
     */    
    @Input() color = 'warning'; 
 
    /**
     * Determines the header height.
     * @default `50px`
     */    
    @Input() height = '50px'; 
 
    /**
     * Determines the color of the bottom border (primary, success, warning..).
     * 
     * null for no border at all
     * 
     * @default `'null'`
     */        
    @Input() lines: string | null = null; 
 
    /**
     * Indicates whether the menu button should be displayed based on the `menu` input
     * and the current view's mobile status.
     *
     * @returns `true` if the menu is set to `'show'` and the view is mobile, otherwise `false`.
     */    
    public get ShowMenu(){
        return (this.menu == 'show') && this.view.Mobile;
    }
 
    /**
     * Creates an instance of `UppHeaderComponent`.
     *
     * @param view - The service that provides information about the current view (e.g., mobile or desktop).
     */  
    constructor(public view: viewService){
        // nothing to do
    }
}
 
/**
 * A component for defining the title within a header.
 *
 * The `UppHeaderTitleComponent` serves as a wrapper for the header's title content,
 * allowing the consumer to insert dynamic or static content.
 *
 * @example
 * <upp-header>
 *   <upp-header-title>
 *     Main Title
 *   </upp-header-title>
 * </upp-header>
 */
@Component({
    selector: 'upp-header-title',
    template: `
        <ion-label>
            <ng-content></ng-content>
        </ion-label>
    `,
    styleUrls: ['./upp-header.scss']
})
export class UppHeaderTitleComponent {
    // nothing to do
}
 
/**
 * A component for adding buttons to a header.
 *
 * The `UppHeaderButtonComponent` acts as a wrapper for buttons, encapsulating
 * them within a standard `<ion-button>` to ensure a consistent style.
 *
 * @example
 * <upp-header>
 *   <upp-header-button>
 *     <ion-icon name="add"></ion-icon>
 *   </upp-header-button>
 * </upp-header>
 */
@Component({
    selector: 'upp-header-button',
    template: `
        <ion-button [ngClass]="size">
            <ng-content></ng-content>
        </ion-button>
    `,
    styleUrls: ['./upp-header.scss']
})
export class UppHeaderButtonComponent {
    @Input() size: 'large' | 'small' = 'large';
}
 
/**
 * A content container for the header component.
 *
 * Use `UppHeaderContentComponent` to define the main content of the header,
 * such as the title or other information.
 *
 * @example
 * <upp-header>
 *   <div upp-header-content>
 *     <ion-label>Main Header</ion-label>
 *   </div>
 * </upp-header>
 *
 * @see {@link UppHeaderComponent}
 */
@Component({
    selector: 'upp-header-content',
    template: `<ng-content></ng-content>`,
    styleUrls: [],
})
export class UppHeaderContentComponent {
    // nothing to do
}