all files / component/accordion/ accordion.component.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
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
1×
 
 
 
 
 
 
 
1×
 
 
1×
 
 
 
 
 
 
 
 
 
1×
 
 
 
1×
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
1×
 
 
 
1×
1×
 
 
 
 
 
 
 
 
 
1×
 
 
 
1×
1×
 
 
/*
 *  @license
 *  Copyright Hôpitaux Universitaires de Genève. All Rights Reserved.
 *
 *  Use of this source code is governed by an Apache-2.0 license that can be
 *  found in the LICENSE file at https://github.com/DSI-HUG/dejajs-components/blob/master/LICENSE
 */
 
import { Component, HostBinding, HostListener, Input, ViewEncapsulation } from '@angular/core';
 
/**
 * Accordion component for Angular
 */
@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'deja-accordion',
    styles: [require('./accordion.component.scss')],
    template: '<ng-content></ng-content>',
})
export class DejaAccordionComponent {
    /**
     * Internal use. Add accordion class to :host to avoid useless DOM
     */
    @HostBinding('class.accordion') protected accordionClass = true;
    private groups: DejaAccordionGroupComponent[] = [];
 
    /**
     * Add a group to the current Accordion Component
     *
     * @param group
     */
    public addGroup(group: DejaAccordionGroupComponent): void {
        this.groups.push(group);
    }
}
 
/**
 * Accordion-group component for Angular
 * Work inside an AccordionComponent
 */
@Component({
    selector: 'deja-accordion-group',
    template: '<ng-content></ng-content>',
})
export class DejaAccordionGroupComponent {
    /**
     * Status of the accordion group.
     */
    @HostBinding('class.open') @Input() public isOpen: boolean;
    /**
     * Internal use. Add accordion-group class to :host to avoid useless DOM
     */
    @HostBinding('class.accordion-group') protected accordionGroupClass = true;
 
    constructor(private accordion: DejaAccordionComponent) {
        this.accordion.addGroup(this);
    }
 
    /**
     * Subscription to "click" event.
     * Check if click is on header and then it toggle the group.
     *
     * @param event
     */
    @HostListener('click', ['$event'])
    public toggleOpen(event: MouseEvent): void {
 
        let target = event.target as HTMLElement;
        const element = event.currentTarget as HTMLElement;
 
        while (target.parentElement && target !== element) {
            if (target.localName === 'deja-accordion-header') {
                this.isOpen = !this.isOpen;
            }
            target = target.parentElement;
        }
    }
}
 
/**
 * Accordion component for Angular
 * Work inside AccordionGroupComponent
 */
@Component({
    selector: 'deja-accordion-header',
    template: `<ng-content></ng-content>`,
})
export class DejaAccordionHeaderComponent {
    /**
     * Internal use. Add accordion-header class to :host to avoid useless DOM
     */
    @HostBinding('class.accordion-header') protected accordionHeaderClass = true;
}
 
/**
 * Accordion component for Angular
 * Work inside AccordionGroupComponent (behind AccordionHeaderComponent)
 */
@Component({
    selector: 'deja-accordion-body',
    template: '<ng-content></ng-content>',
})
export class DejaAccordionBodyComponent {
    /**
     * Internal use. Add accordion-body class to :host to avoid useless DOM
     */
    @HostBinding('class.accordion-body') protected accordionBodyClass = true;
}