d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { NgClass, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { InputBoolean } from 'ngx-tethys/core';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { coerceBooleanProperty } from 'ngx-tethys/util';

export type ThyButtonIconShape = '' | 'circle-dashed' | 'circle-solid' | 'circle-thick-dashed' | 'circle-thick-solid' | 'self-icon';

const sizeClassesMap = {
    lg: ['btn-icon-lg'],
    md: ['btn-icon-md'],
    sm: ['btn-icon-sm'],
    xs: ['btn-icon-xs']
};

const shapeClassesMap = {
    'circle-dashed': ['btn-icon-circle', 'circle-dashed'],
    'circle-solid': ['btn-icon-circle', 'circle-solid'],
    'circle-thick-dashed': ['btn-icon-circle', 'circle-dashed', 'border-thick'],
    'circle-thick-solid': ['btn-icon-circle', 'circle-solid', 'border-thick'],
    'self-icon': ['btn-icon-self-circle']
};

const themeClassesMap: any = {
    'danger-weak': ['btn-icon-danger-weak']
};

/**
 * 操作按钮图标，支持`thy-button-icon`组件和`thyButtonIcon`指令两种形式
 * @name thy-button-icon,[thy-button-icon],[thyButtonIcon]
 * @order 20
 */
@Component({
    selector: 'thy-button-icon,[thy-button-icon],[thyButtonIcon]',
    templateUrl: './button-icon.component.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [NgIf, ThyIconComponent, NgClass]
})
export class ThyButtonIconComponent implements OnInit {
    /**
     * 大小
     * @type xs | sm | md | lg
     * @default 36px
     */
    @Input()
    set thySize(size: string) {
        this.size = size;
        this.setClasses();
    }

    /**
     * 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标
     */
    @Input()
    set thyIcon(icon: string) {
        this.setIconClass(icon);
    }

    /**
     * 图标按钮的图标
     */
    @Input()
    set thyButtonIcon(icon: string) {
        this.setIconClass(icon);
    }

    /**
     * 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗
     */
    @Input()
    set thyShape(value: ThyButtonIconShape) {
        this.shape = value;
        this.setClasses();
    }

    /**
     * 亮色，颜色更浅，适合左侧导航顶部的按钮
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyLight(value: boolean) {
        this._isLighted = coerceBooleanProperty(value);
    }

    /**
     * 设置为选中状态
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyActive(value: boolean) {
        this._isActive = coerceBooleanProperty(value);
    }

    /**
     * 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色
     */
    @Input()
    set thyTheme(value: string) {
        this.theme = value;
        this.setClasses();
    }

    constructor() {}

    private initialized = false;

    private shape: ThyButtonIconShape;

    private size: string;

    private hostRenderer = useHostRenderer();

    iconPrefix = 'wtf';

    iconClasses: string[];

    icon: string;

    theme: string;

    svgIconName: string;

    @HostBinding('class.btn') _isBtn = true;
    @HostBinding('class.btn-icon') _isBtnIcon = true;
    @HostBinding('class.btn-icon-light') _isLighted = false;
    @HostBinding('class.btn-icon-active') _isActive = false;

    @Input() thyColor: string;

    private setIconClass(icon: string) {
        if (icon) {
            if (icon.includes('wtf')) {
                const classes = icon.split(' ');
                if (classes.length === 1) {
                    classes.unshift('wtf');
                }
                this.iconClasses = classes;
                this.svgIconName = null;
            } else {
                this.svgIconName = icon;
            }
        } else {
            this.iconClasses = null;
            this.svgIconName = null;
        }
    }

    private setClasses(first = false) {
        // 设置样式判断是否已经初始化，未初始化直接返回，除非是初次调用
        // 只有 ngOnInit 调用会传入 first = true
        if (!first && !this.initialized) {
            return;
        }
        const classes = sizeClassesMap[this.size] ? [...sizeClassesMap[this.size]] : [];
        if (this.shape && shapeClassesMap[this.shape]) {
            shapeClassesMap[this.shape].forEach((className: string) => {
                classes.push(className);
            });
        }
        if (this.theme && themeClassesMap[this.theme]) {
            themeClassesMap[this.theme].forEach((className: string) => {
                classes.push(className);
            });
        }
        this.hostRenderer.updateClass(classes);
    }

    ngOnInit() {
        this.setClasses(true);
        this.initialized = true;
    }
}

1	import { NgClass, NgIf } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';
3	import { useHostRenderer } from '@tethys/cdk/dom';
4	import { InputBoolean } from 'ngx-tethys/core';
5	import { ThyIconComponent } from 'ngx-tethys/icon';
6	import { coerceBooleanProperty } from 'ngx-tethys/util';
7
8	export type ThyButtonIconShape = '' \| 'circle-dashed' \| 'circle-solid' \| 'circle-thick-dashed' \| 'circle-thick-solid' \| 'self-icon';
9		1✔
10	const sizeClassesMap = {
11	lg: ['btn-icon-lg'],
12	md: ['btn-icon-md'],
13	sm: ['btn-icon-sm'],
14	xs: ['btn-icon-xs']
15	};	1✔
16
17	const shapeClassesMap = {
18	'circle-dashed': ['btn-icon-circle', 'circle-dashed'],
19	'circle-solid': ['btn-icon-circle', 'circle-solid'],
20	'circle-thick-dashed': ['btn-icon-circle', 'circle-dashed', 'border-thick'],
21	'circle-thick-solid': ['btn-icon-circle', 'circle-solid', 'border-thick'],
22	'self-icon': ['btn-icon-self-circle']	1✔
23	};
24
25	const themeClassesMap: any = {
26	'danger-weak': ['btn-icon-danger-weak']
27	};
28
29	/**
30	* 操作按钮图标，支持`thy-button-icon`组件和`thyButtonIcon`指令两种形式	1✔
31	* @name thy-button-icon,[thy-button-icon],[thyButtonIcon]
32	* @order 20	×
33	*/	×
34	@Component({
35	selector: 'thy-button-icon,[thy-button-icon],[thyButtonIcon]',
36	templateUrl: './button-icon.component.html',	×
37	encapsulation: ViewEncapsulation.None,
38	changeDetection: ChangeDetectionStrategy.OnPush,
39	standalone: true,	×
40	imports: [NgIf, ThyIconComponent, NgClass]
41	})
42	export class ThyButtonIconComponent implements OnInit {	×
43	/**	×
44	* 大小
45	* @type xs \| sm \| md \| lg
46	* @default 36px	×
47	*/
48	@Input()
49	set thySize(size: string) {	×
50	this.size = size;
51	this.setClasses();
52	}	×
53		×
54	/**
55	* 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标
56	*/	×
57	@Input()	×
58	set thyIcon(icon: string) {	×
59	this.setIconClass(icon);	×
60	}	×
61		×
62	/**	×
63	* 图标按钮的图标
64	*/
65	@Input()	×
66	set thyButtonIcon(icon: string) {	×
67	this.setIconClass(icon);	×
68	}	×
69		×
70	/**
71	* 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗	×
72	*/	×
73	@Input()
74	set thyShape(value: ThyButtonIconShape) {
75	this.shape = value;	×
76	this.setClasses();
77	}
78
79	/**	×
80	* 亮色，颜色更浅，适合左侧导航顶部的按钮	×
81	* @default false
82	*/
83	@Input()	×
84	@InputBoolean()
85	set thyLight(value: boolean) {
86	this._isLighted = coerceBooleanProperty(value);	×
87	}	×
88
89	/**	×
90	* 设置为选中状态	×
91	* @default false	×
92	*/	×
93	@Input()
94	@InputBoolean()
95	set thyActive(value: boolean) {	×
96	this._isActive = coerceBooleanProperty(value);	×
97	}	×
98
99	/**
100	* 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色	×
101	*/
102	@Input()
103	set thyTheme(value: string) {	×
104	this.theme = value;	×
105	this.setClasses();
106	}	1✔
107		1✔
108	constructor() {}
109
110	private initialized = false;
111
112	private shape: ThyButtonIconShape;
113
114	private size: string;
115
116	private hostRenderer = useHostRenderer();
117
118	iconPrefix = 'wtf';
119
120	iconClasses: string[];
121
122	icon: string;	1✔
123
124	theme: string;
125
126	svgIconName: string;
127		1✔
128	@HostBinding('class.btn') _isBtn = true;
129	@HostBinding('class.btn-icon') _isBtnIcon = true;
130	@HostBinding('class.btn-icon-light') _isLighted = false;
131	@HostBinding('class.btn-icon-active') _isActive = false;
132		1✔
133	@Input() thyColor: string;
134
135	private setIconClass(icon: string) {
136	if (icon) {
137	if (icon.includes('wtf')) {
138	const classes = icon.split(' ');
139	if (classes.length === 1) {
140	classes.unshift('wtf');
141	}
142	this.iconClasses = classes;
143	this.svgIconName = null;
144	} else {
145	this.svgIconName = icon;
146	}
147	} else {
148	this.iconClasses = null;
149	this.svgIconName = null;
150	}
151	}
152
153	private setClasses(first = false) {
154	// 设置样式判断是否已经初始化，未初始化直接返回，除非是初次调用
155	// 只有 ngOnInit 调用会传入 first = true
156	if (!first && !this.initialized) {
157	return;
158	}
159	const classes = sizeClassesMap[this.size] ? [...sizeClassesMap[this.size]] : [];
160	if (this.shape && shapeClassesMap[this.shape]) {
161	shapeClassesMap[this.shape].forEach((className: string) => {
162	classes.push(className);
163	});
164	}
165	if (this.theme && themeClassesMap[this.theme]) {
166	themeClassesMap[this.theme].forEach((className: string) => {
167	classes.push(className);
168	});
169	}
170	this.hostRenderer.updateClass(classes);
171	}
172
173	ngOnInit() {
174	this.setClasses(true);
175	this.initialized = true;
176	}
177	}

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