• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

atinc / ngx-tethys / ba7e05e2-37c0-44c6-8725-6f617aa0d43e

pending completion
ba7e05e2-37c0-44c6-8725-6f617aa0d43e

Pull #2756

circleci

huanhuanwa
test(color-picker): add test #INFR-8673
Pull Request #2756: feat(color-picker): add popoverRef param when panel open and close #INFR-8673

187 of 6315 branches covered (2.96%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

2645 of 13660 relevant lines covered (19.36%)

83.2 hits per line

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

9.62
/src/tag/tag.component.ts
1
import { Component, ElementRef, OnChanges, Input, OnInit, ChangeDetectionStrategy, SimpleChanges } from '@angular/core';
2
import { InputBoolean, isThemeColor, ThyThemeColor } from 'ngx-tethys/core';
3
import { hexToRgb } from 'ngx-tethys/util';
4
import { useHostRenderer } from '@tethys/cdk/dom';
5

6
export type ThyTagColor = ThyThemeColor | string;
7

8
export type ThyTagShape = 'pill' | 'rectangle';
9

10
export type ThyTagSize = 'sm' | 'md' | 'lg';
11

1✔
12
/**
13
 * 标签组件
×
14
 * @name thy-tag,[thyTag]
×
15
 */
16
@Component({
17
    selector: 'thy-tag,[thyTag]',
18
    templateUrl: './tag.component.html',
×
19
    changeDetection: ChangeDetectionStrategy.OnPush,
20
    host: {
21
        class: 'thy-tag',
×
22
        '[class.thy-tag-pill]': 'thyShape === "pill"',
×
23
        '[class.thy-tag-outline]': 'thyTheme === "outline"',
×
24
        '[class.thy-tag-hover]': 'thyHoverable',
×
25
        '[class.thy-tag-md]': 'thySize === "md"',
×
26
        '[class.thy-tag-sm]': 'thySize === "sm"',
×
27
        '[class.thy-tag-xs]': 'thySize === "xs"',
28
        '[class.thy-tag-lg]': 'thySize === "lg"'
29
    },
×
30
    standalone: true
31
})
32
export class ThyTagComponent implements OnInit, OnChanges {
×
33
    private color: ThyTagColor = 'default';
×
34

35
    private hostRenderer = useHostRenderer();
×
36

×
37
    /**
38
     * 标签颜色,thyColor 的简写
39
     * @type primary | success | info | warning | danger | default | light | string
40
     * @default default
×
41
     */
×
42
    @Input()
×
43
    set thyTag(value: ThyTagColor) {
×
44
        if (value) {
×
45
            this.color = value;
×
46
        }
47
    }
48

×
49
    /**
×
50
     * 标签形状
51
     * @type pill | rectangle
×
52
     */
×
53
    @Input() thyShape: ThyTagShape = 'rectangle';
×
54

55
    /**
56
     * 标签颜色,支持设置主题色和颜色值,主题色为 default、primary、success、info、warning、danger
×
57
     */
×
58
    @Input()
59
    set thyColor(color: ThyTagColor) {
60
        this.color = color;
61
    }
1✔
62

63
    /**
64
     * 标签主题,fill 为颜色填充,outline 为线框,weak-fill 为背景色0.1透明度效果
1✔
65
     * @type outline | fill | weak-fill
66
     */
67
    @Input() thyTheme: 'outline' | 'fill' | 'weak-fill' = 'fill';
68

69
    /**
70
     * 标签大小
71
     * @type sm | md | lg
72
     */
73
    @Input() thySize: ThyTagSize = 'md';
1✔
74

75
    /**
76
     * 可 Hover 悬停的标签,设置为 true 时会有一个 Hover 效果
77
     * @default false
1✔
78
     */
79
    @Input()
80
    @InputBoolean()
81
    thyHoverable: boolean | string;
82

83
    constructor(private elementRef: ElementRef) {}
84

85
    ngOnInit(): void {
86
        this.setColor();
87
    }
88

89
    ngOnChanges(changes: SimpleChanges): void {
90
        if (changes.thyColor && changes.thyColor.currentValue && !changes.thyColor.firstChange) {
91
            this.setColor();
92
        }
93
        if (changes.thyTheme && changes.thyTheme.currentValue && !changes.thyTheme.firstChange) {
94
            this.setColor();
95
        }
96
    }
97

98
    private setColor(): void {
99
        this.elementRef.nativeElement.style.removeProperty('background-color');
100
        this.elementRef.nativeElement.style.removeProperty('border-color');
101
        this.elementRef.nativeElement.style.removeProperty('color');
102
        this.hostRenderer.updateClass([]);
103

104
        if (isThemeColor(this.color)) {
105
            this.hostRenderer.updateClass([`thy-tag-${this.thyTheme === 'fill' ? '' : this.thyTheme + '-'}${this.color}`]);
106
        } else {
107
            if (this.thyTheme === 'fill') {
108
                this.elementRef.nativeElement.style.backgroundColor = this.color;
109
            } else if (this.thyTheme === 'outline') {
110
                this.elementRef.nativeElement.style.color = this.color;
111
                this.elementRef.nativeElement.style['border-color'] = this.color;
112
            } else {
113
                this.elementRef.nativeElement.style.backgroundColor = hexToRgb(this.color, 0.1);
114
                this.elementRef.nativeElement.style.color = this.color;
115
            }
116
        }
117
    }
118
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc