All files / components/upp-scrollable upp-scrollable.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Component } from '@angular/core';
import { Input, HostBinding } from '@angular/core';
 
import { viewService } from '@unpispas/upp-base';
 
/**
 * A reusable scrollable component for Angular applications.
 * 
 * This component provides a customizable scroll behavior for its content, with the ability
 * to configure scroll directions (`x`, `y`, both, or none). It leverages `HostBinding` to
 * dynamically set CSS classes based on the input properties and the state of the `viewService`.
 * 
 * ### Example Usage:
 * ```html
 * <upp-scrollable scrollbar="x">
 *   <div>Scrollable content here</div>
 * </upp-scrollable>
 * ```
 * 
 * ### Features:
 * - Dynamically controls scroll visibility (horizontal, vertical, or both).
 * - Integrates with `viewService` for additional view-specific adjustments.
 * - Provides scrollbar customization via CSS classes.
 */
@Component({
    selector: 'upp-scrollable',
    templateUrl: './upp-scrollable.html',
    styleUrls: ['./upp-scrollable.scss'],
})
export class UppScrollableComponent {
    /**
     * Defines the scrollable direction for the component.
     * 
     * @default 'none'
     * 
     * - `'none'`: No scrollbars are displayed (content overflow is hidden).
     * - `'x'`: Horizontal scrollbar is enabled; vertical scrolling is disabled.
     * - `'y'`: Vertical scrollbar is enabled; horizontal scrolling is disabled.
     * - `'both'`: Both horizontal and vertical scrollbars are enabled.
     */    
    @Input() scrollbar: 'none' | 'x' | 'y' | 'both' = 'none';
 
    /**
     * Dynamically generates CSS classes based on the `scrollbar` input value.
     * 
     * - Adds `--no-scrollbar-x` when horizontal scrolling is disabled.
     * - Adds `--no-scrollbar-y` when vertical scrolling is disabled.
     * - Both classes are added when `scrollbar` is set to `'none'`.
     * 
     * @returns A space-separated string of CSS class names.
     */    
    @HostBinding('class') get panelClasses(): string {
        let scrollClass = '';
        switch(this.scrollbar){
            case 'none': 
                scrollClass = '--no-scrollbar-x --no-scrollbar-y';
                break;
            case 'x':
                scrollClass = '--no-scrollbar-y';
                break;
            case 'y':
                scrollClass = '--no-scrollbar-x';
                break;
        }
 
        return `${scrollClass}`.trim();
    }
 
    /**
     * Constructor for the UppScrollableComponent.
     * 
     * @param view A service providing view-related state, such as whether the current view
     *             is on a mobile device or has a visible scrollbar.
     */    
    constructor(public view: viewService){
        // nothing to do
    }
}