All files / app/codeCharta/ui/colorPicker colorPicker.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
16x
16x
16x
16x
 
 
 
 
 
 
 
16x
 
114x
 
 
114x
 
 
 
114x
 
114x
 
 
2x
 
 
 
2x
 
 
 
2x
 
 
 
2x
2x
 
 
 
 
82x
2x
 
 
82x
 
 
 
import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild } from "@angular/core"
import { MatMenuTrigger, MenuPositionX, MatMenu } from "@angular/material/menu"
import { NgTemplateOutlet } from "@angular/common"
import { ColorChromeModule } from "ngx-color/chrome"
 
@Component({
    selector: "cc-color-picker",
    templateUrl: "./colorPicker.component.html",
    standalone: true,
    imports: [NgTemplateOutlet, MatMenuTrigger, MatMenu, ColorChromeModule]
})
export class ColorPickerComponent {
    @Input() hexColor: string
    @Input() openXPosition: MenuPositionX = "after"
    @Input() triggerTemplate: TemplateRef<unknown>
 
    @Output() onColorChange = new EventEmitter<string>()
 
    @ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
 
    isHovered = false
 
    private isClickInside = false
 
    handleChangeComplete(hexColor: string) {
        this.onColorChange.emit(hexColor)
    }
 
    @HostListener("mouseenter") onMouseEnter() {
        this.isHovered = true
    }
 
    @HostListener("mouseleave") onMouseLeave() {
        this.isHovered = false
    }
 
    @HostListener("click") onClick() {
        this.isClickInside = true
        this.colorPickerMenuTrigger.openMenu()
    }
 
    @HostListener("document:click")
    handleDocumentClick() {
        if (!this.isClickInside && this.colorPickerMenuTrigger.menuOpen) {
            this.colorPickerMenuTrigger.closeMenu()
        }
 
        this.isClickInside = false
    }
}