d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewContainerRef } from '@angular/core';
import { InputBoolean } from 'ngx-tethys/core';
import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
import { ThyColorPickerCustomPanelComponent } from './color-picker-custom-panel.component';
import ThyColor from './helpers/color.class';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgClass, NgTemplateOutlet, NgFor, NgStyle } from '@angular/common';

/**
 * @internal
 */
@Component({
    selector: 'thy-color-picker-panel',
    templateUrl: './color-picker-panel.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        '[class.pt-4]': '!transparentColorSelectable'
    },
    standalone: true,
    imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, ThyIconComponent, NgStyle]
})
export class ThyColorPickerPanelComponent implements OnInit {
    @HostBinding('class.thy-color-picker-panel') className = true;

    @Input() color: string;

    @Input() colorChange: (color: string) => {};

    @Input() set defaultColor(value: string) {
        this.customDefaultColor = value;
    }

    get defaultColor() {
        return new ThyColor(this.customDefaultColor).toHexString(true);
    }

    @Input() @InputBoolean() transparentColorSelectable: boolean;

    @Input() defaultColors: string[];

    public customDefaultColor: string;

    recentColors: string[] = [];

    newColor: string;

    customPanelPopoverRef: ThyPopoverRef<ThyColorPickerCustomPanelComponent>;

    constructor(
        private thyPopover: ThyPopover,
        private viewContainerRef: ViewContainerRef,
        private thyPopoverRef: ThyPopoverRef<ThyColorPickerPanelComponent>
    ) {}

    ngOnInit(): void {
        const colors = localStorage.getItem('recentColors');
        if (colors) {
            this.recentColors = JSON.parse(colors);
        }
    }

    selectColor(color: string) {
        this.color = color;
        this.colorChange(this.color);
        this.thyPopoverRef.close();
    }

    showMoreColor(event: Event) {
        if (!this.customPanelPopoverRef) {
            this.customPanelPopoverRef = this.thyPopover.open(ThyColorPickerCustomPanelComponent, {
                origin: event.currentTarget as HTMLElement,
                offset: -4,
                placement: 'rightBottom',
                manualClosure: true,
                width: '260px',
                hasBackdrop: false,
                viewContainerRef: this.viewContainerRef,
                originActiveClass: 'thy-color-picker-active',
                initialState: {
                    color: this.color,
                    pickerColorChange: (value: string) => {
                        this.newColor = value;
                        this.colorChange(value);
                    }
                }
            });
        }
        this.customPanelPopoverRef?.afterClosed().subscribe(() => {
            if (this.newColor) {
                const index = this.recentColors.findIndex(item => item === this.newColor);
                if (index !== -1) {
                    this.recentColors.splice(index, 1);
                }
                this.recentColors.unshift(this.newColor);
                this.recentColors = this.recentColors.slice(0, 10);
                localStorage.setItem('recentColors', JSON.stringify(this.recentColors));
            }
            this.thyPopoverRef.close();
        });
    }

    getIconColor(item: string) {
        const rgba = new ThyColor(item).rgba;
        const hsp = 0.299 * rgba.red + 0.587 * rgba.green + 0.114 * rgba.blue;
        return hsp > 192 ? 'black' : 'white';
    }
}

1	import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewContainerRef } from '@angular/core';
2	import { InputBoolean } from 'ngx-tethys/core';
3	import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
4	import { ThyColorPickerCustomPanelComponent } from './color-picker-custom-panel.component';
5	import ThyColor from './helpers/color.class';
6	import { ThyIconComponent } from 'ngx-tethys/icon';
7	import { NgIf, NgClass, NgTemplateOutlet, NgFor, NgStyle } from '@angular/common';
8
9	/**
10	* @internal
11	*/
12	@Component({
13	selector: 'thy-color-picker-panel',	1✔
14	templateUrl: './color-picker-panel.component.html',
15	changeDetection: ChangeDetectionStrategy.OnPush,	×
16	host: {
17	'[class.pt-4]': '!transparentColorSelectable'
18	},	×
19	standalone: true,
20	imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, ThyIconComponent, NgStyle]
21	})	1✔
22	export class ThyColorPickerPanelComponent implements OnInit {	1✔
23	@HostBinding('class.thy-color-picker-panel') className = true;	1✔
24		1✔
25	@Input() color: string;	1✔
26
27	@Input() colorChange: (color: string) => {};
28		1✔
29	@Input() set defaultColor(value: string) {	1!
30	this.customDefaultColor = value;	×
31	}
32
33	get defaultColor() {
34	return new ThyColor(this.customDefaultColor).toHexString(true);	×
35	}	×
36		×
37	@Input() @InputBoolean() transparentColorSelectable: boolean;
38
39	@Input() defaultColors: string[];	×
40		×
41	public customDefaultColor: string;
42
43	recentColors: string[] = [];
44
45	newColor: string;
46
47	customPanelPopoverRef: ThyPopoverRef<ThyColorPickerCustomPanelComponent>;
48
49	constructor(
50	private thyPopover: ThyPopover,
51	private viewContainerRef: ViewContainerRef,
52	private thyPopoverRef: ThyPopoverRef<ThyColorPickerPanelComponent>	×
53	) {}	×
54
55	ngOnInit(): void {
56	const colors = localStorage.getItem('recentColors');
57	if (colors) {
58	this.recentColors = JSON.parse(colors);	×
59	}	×
60	}	×
61		×
62	selectColor(color: string) {	×
63	this.color = color;
64	this.colorChange(this.color);	×
65	this.thyPopoverRef.close();	×
66	}	×
67
68	showMoreColor(event: Event) {	×
69	if (!this.customPanelPopoverRef) {
70	this.customPanelPopoverRef = this.thyPopover.open(ThyColorPickerCustomPanelComponent, {
71	origin: event.currentTarget as HTMLElement,
72	offset: -4,	×
73	placement: 'rightBottom',	×
74	manualClosure: true,	×
75	width: '260px',
76	hasBackdrop: false,	1✔
77	viewContainerRef: this.viewContainerRef,
78	originActiveClass: 'thy-color-picker-active',
79	initialState: {
80	color: this.color,
81	pickerColorChange: (value: string) => {	1✔
82	this.newColor = value;
83	this.colorChange(value);
84	}
85	}
86	});
87	}
88	this.customPanelPopoverRef?.afterClosed().subscribe(() => {
89	if (this.newColor) {
90	const index = this.recentColors.findIndex(item => item === this.newColor);	1✔
91	if (index !== -1) {
92	this.recentColors.splice(index, 1);
93	}
94	this.recentColors.unshift(this.newColor);	1✔
95	this.recentColors = this.recentColors.slice(0, 10);
96	localStorage.setItem('recentColors', JSON.stringify(this.recentColors));
97	}
98	this.thyPopoverRef.close();
99	});
100	}
101
102	getIconColor(item: string) {
103	const rgba = new ThyColor(item).rgba;
104	const hsp = 0.299 * rgba.red + 0.587 * rgba.green + 0.114 * rgba.blue;
105	return hsp > 192 ? 'black' : 'white';
106	}
107	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous