all files / component/color-selector/ color-fab.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
 
 
 
 
 
 
 
1×
1×
1×
1×
 
 
 
 
 
 
 
 
1×
 
 
 
182×
 
 
182×
 
 
182×
2×
182×
 
182×
182×
259×
16×
 
243×
 
 
 
182×
259×
 
182×
182×
182×
 
 
 
 
 
 
 
1×
 
 
 
1×
364×
 
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, ElementRef, Input, OnDestroy } from '@angular/core';
import { combineLatest as observableCombineLatest, from as observableFrom, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { DejaColorFab } from './color-fab.class';
 
@Component({
    selector: 'deja-color-fab',
    styles: [
        require('./color-fab.component.scss'),
    ],
    template: '<ng-content></ng-content>',
})
export class DejaColorFabComponent implements OnDestroy {
    public element: HTMLElement;
 
    private _colorFab: DejaColorFab;
    private subscriptions = [] as Subscription[];
 
    constructor(el: ElementRef) {
        this.element = el.nativeElement as HTMLElement;
    }
 
    @Input()
    public set color(colorFab: DejaColorFab) {
        this._colorFab = colorFab;
 
        Eif (colorFab) {
            const toogleAttribute = (attribute: string, value: string | boolean) => {
                if (value) {
                    this.element.setAttribute(attribute, value.toString());
                } else {
                    this.element.removeAttribute(attribute);
                }
            };
 
            this.subscriptions.push(observableFrom(colorFab.active$)
                .subscribe((value) => toogleAttribute('active', value)));
 
            this.subscriptions.push(observableCombineLatest(colorFab.color$, colorFab.disabled$).pipe(
                map(([color, disabled]) => color && disabled ? color.grayScale : color))
                .subscribe((color) => this.element.style.backgroundColor = color ? color.toHex() : ''));
 
        } else {
            this.subscriptions.forEach((subscription) => subscription.unsubscribe());
            this.subscriptions = [];
        }
    }
 
    public get tile() {
        return this._colorFab;
    }
 
    public ngOnDestroy() {
        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
    }
}