All files / src/components/zd-collapse-card collapse-card.ts

100% Statements 12/12
100% Branches 0/0
100% Functions 1/1
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87  93x             93x       4x                   4x         4x         4x         4x         4x         4x         4x                                                           2x 2x      
import { IButton } from '../zd-button/interfaces';
import { Card } from '../zd-card/card';
import { IComponent } from '../zd-component/interfaces';
import { ICollapseCard } from './interfaces';
 
/**
 * Base class for CollapseCard component.
 */
export class CollapseCard extends Card implements ICollapseCard {
	/**
	 * Disables the action rotation animation when expanding or collapsing the collapse-card.
	 */
	public disableActionRotate = false;
 
	/**
	 * If defined, overwrites the expansion icon by the defined button.
	 */
	public expandButton!: IButton;
 
	/**
	 * If true, the Collapse-card will be opened by default.
	 */
	public expanded = false;
 
	/**
	 * Components to be displayed in the header.
	 */
	public header: IComponent[] = [];
 
	/**
	 * Hides the expansion icon.
	 */
	public hideAction = false;
 
	/**
	 * Defines the expansion icon color.
	 */
	public iconColor = 'normal';
 
	/**
	 * Defines the expansion icon.
	 */
	public iconName = 'expand';
 
	/**
	 * Content will be loaded only when the collapse-card opens.
	 */
	public lazyLoad = false;
 
	/**
	 * Makes the collapse-card readOnly. Does the same thing as disabled prop, but doesn't change styles.
	 */
	public readonly = false;
 
	/* istanbul ignore next */
	/**
	 * Create a new CollapseCard
	 * @param props CollapseCard definition
	 */
	constructor(props: ICollapseCard) {
		super(props);
		this.disableActionRotate = this.getInitValue(
			'disableActionRotate',
			props.disableActionRotate,
			this.disableActionRotate,
		);
		this.expandButton = this.getInitValue('expandButton', props.expandButton, this.expandButton);
		this.expanded = this.getInitValue('expanded', props.expanded, this.expanded);
		this.header = this.getInitValue('header', props.header, this.header);
		this.hideAction = this.getInitValue('hideAction', props.hideAction, this.hideAction);
		this.iconColor = this.getInitValue('iconColor', props.iconColor, this.iconColor);
		this.iconName = this.getInitValue('iconName', props.iconName, this.iconName);
		this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
		this.readonly = this.getInitValue('readonly', props.readonly, this.readonly);
	}
 
	/**
	 * Triggered when the component expand status changes.
	 * @param event DOM event
	 * @param element Element changed
	 */
	public change(event: Event, element: any) {
		this.expanded = !this.expanded;
		this.callEvent('change', { event, element, component: this });
	}
}