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

import { collapseMotion, InputBoolean } from 'ngx-tethys/core';

import {
    ChangeDetectorRef,
    Component,
    EventEmitter,
    Host,
    ChangeDetectionStrategy,
    Input,
    OnDestroy,
    OnInit,
    Output,
    TemplateRef
} from '@angular/core';

import { ThyCollapseComponent } from './collapse.component';
import { SafeAny } from 'ngx-tethys/types';
import { isString } from 'ngx-tethys/util';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgTemplateOutlet } from '@angular/common';

const DEFAULT_ARROW_ICON = 'angle-right';

/**
 * 折叠面板项组件
 * @name thy-collapse-panel,thy-collapse-item
 * @order 20
 */
@Component({
    selector: 'thy-collapse-panel, thy-collapse-item',
    templateUrl: './collapse-item.component.html',
    exportAs: 'ThyCollapseComponent',
    animations: [collapseMotion],
    host: {
        '[class.thy-collapse-item]': 'true',
        '[class.thy-collapse-no-arrow]': '!showArrow',
        '[class.thy-collapse-item-active]': 'thyActive',
        '[class.thy-collapse-item-disabled]': 'thyDisabled'
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [NgIf, NgTemplateOutlet, ThyIconComponent]
})
export class ThyCollapseItemComponent implements OnInit, OnDestroy {
    public showArrow: boolean = true;

    public arrowIconTemplate: TemplateRef<SafeAny>;

    public arrowIcon: string = DEFAULT_ARROW_ICON;

    /**
     * 标题
     */
    @Input() thyTitle: string;

    /**
     * 是否处于激活展开状态
     */
    @Input() @InputBoolean() thyActive: boolean = false;

    /**
     * 是否禁用当前面板
     * @default false
     */
    @Input() @InputBoolean() thyDisabled: boolean;

    /**
     * 自定义面板头
     * @type TemplateRef
     */
    @Input() thyHeaderTemplate: TemplateRef<SafeAny>;

    /**
     * 自定义箭头(展开收起)图标，设置为 false 表示隐藏图标
     * @type {string | TemplateRef<SafeAny> | false}
     */
    @Input()
    set thyArrowIcon(value: string | TemplateRef<SafeAny> | boolean) {
        if (value instanceof TemplateRef) {
            this.arrowIconTemplate = value as TemplateRef<SafeAny>;
        } else if (isString(value)) {
            this.arrowIcon = value as string;
        } else {
            this.showArrow = value;
            this.arrowIconTemplate = null;
            this.arrowIcon = DEFAULT_ARROW_ICON;
        }
    }

    /**
     * 额外附加模板
     * @type TemplateRef
     */
    @Input() thyExtra: TemplateRef<SafeAny>;

    /**
     * 展开收起事件
     */
    @Output() thyActiveChange = new EventEmitter<{ active: boolean; event: Event }>();

    constructor(private cdr: ChangeDetectorRef, @Host() private thyCollapseComponent: ThyCollapseComponent) {}

    ngOnInit() {
        this.thyCollapseComponent.addPanel(this);
    }

    markForCheck(): void {
        this.cdr.markForCheck();
    }

    activeChange(event: Event) {
        if (!this.thyDisabled) {
            this.thyCollapseComponent.click(this, event);
        }
    }

    ngOnDestroy(): void {
        this.thyCollapseComponent.removePanel(this);
    }
}

1	import { collapseMotion, InputBoolean } from 'ngx-tethys/core';
2
3	import {
4	ChangeDetectorRef,
5	Component,
6	EventEmitter,
7	Host,
8	ChangeDetectionStrategy,
9	Input,	1✔
10	OnDestroy,
11	OnInit,
12	Output,
13	TemplateRef
14	} from '@angular/core';
15		1✔
16	import { ThyCollapseComponent } from './collapse.component';
17	import { SafeAny } from 'ngx-tethys/types';	×
18	import { isString } from 'ngx-tethys/util';	×
19	import { ThyIconComponent } from 'ngx-tethys/icon';
20	import { NgIf, NgTemplateOutlet } from '@angular/common';	×
21		×
22	const DEFAULT_ARROW_ICON = 'angle-right';
23
24	/**	×
25	* 折叠面板项组件	×
26	* @name thy-collapse-panel,thy-collapse-item	×
27	* @order 20
28	*/
29	@Component({
30	selector: 'thy-collapse-panel, thy-collapse-item',	×
31	templateUrl: './collapse-item.component.html',	×
32	exportAs: 'ThyCollapseComponent',	×
33	animations: [collapseMotion],	×
34	host: {	×
35	'[class.thy-collapse-item]': 'true',	×
36	'[class.thy-collapse-no-arrow]': '!showArrow',
37	'[class.thy-collapse-item-active]': 'thyActive',
38	'[class.thy-collapse-item-disabled]': 'thyDisabled'	×
39	},
40	changeDetection: ChangeDetectionStrategy.OnPush,
41	standalone: true,	×
42	imports: [NgIf, NgTemplateOutlet, ThyIconComponent]
43	})
44	export class ThyCollapseItemComponent implements OnInit, OnDestroy {	×
45	public showArrow: boolean = true;	×
46
47	public arrowIconTemplate: TemplateRef<SafeAny>;
48
49	public arrowIcon: string = DEFAULT_ARROW_ICON;	×
50
51	/**	1✔
52	* 标题
53	*/
54	@Input() thyTitle: string;
55		1✔
56	/**
57	* 是否处于激活展开状态
58	*/
59	@Input() @InputBoolean() thyActive: boolean = false;
60
61	/**
62	* 是否禁用当前面板
63	* @default false
64	*/
65	@Input() @InputBoolean() thyDisabled: boolean;	1✔
66
67	/**
68	* 自定义面板头
69	* @type TemplateRef	1✔
70	*/
71	@Input() thyHeaderTemplate: TemplateRef<SafeAny>;
72
73	/**	1✔
74	* 自定义箭头(展开收起)图标，设置为 false 表示隐藏图标
75	* @type {string \| TemplateRef<SafeAny> \| false}
76	*/
77	@Input()
78	set thyArrowIcon(value: string \| TemplateRef<SafeAny> \| boolean) {
79	if (value instanceof TemplateRef) {
80	this.arrowIconTemplate = value as TemplateRef<SafeAny>;
81	} else if (isString(value)) {
82	this.arrowIcon = value as string;
83	} else {
84	this.showArrow = value;
85	this.arrowIconTemplate = null;
86	this.arrowIcon = DEFAULT_ARROW_ICON;
87	}
88	}
89
90	/**
91	* 额外附加模板
92	* @type TemplateRef
93	*/
94	@Input() thyExtra: TemplateRef<SafeAny>;
95
96	/**
97	* 展开收起事件
98	*/
99	@Output() thyActiveChange = new EventEmitter<{ active: boolean; event: Event }>();
100
101	constructor(private cdr: ChangeDetectorRef, @Host() private thyCollapseComponent: ThyCollapseComponent) {}
102
103	ngOnInit() {
104	this.thyCollapseComponent.addPanel(this);
105	}
106
107	markForCheck(): void {
108	this.cdr.markForCheck();
109	}
110
111	activeChange(event: Event) {
112	if (!this.thyDisabled) {
113	this.thyCollapseComponent.click(this, event);
114	}
115	}
116
117	ngOnDestroy(): void {
118	this.thyCollapseComponent.removePanel(this);
119	}
120	}

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

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