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 | 55x 55x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x | import { IComponent } from '../zd-component/interfaces';
import { IButton } from '../zd-button/interfaces';
import { Card } from '../zd-card/card';
import { IFieldGroup } from './interfaces';
export class FieldGroup extends Card implements IFieldGroup {
/**
* 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 = 'var(--v-primary-base)';
/**
* 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: IFieldGroup) {
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);
this.createAccessors();
}
/**
* 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 });
}
}
|