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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 93x 93x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 2x | import { ComponentRender } from '../zd-component/component-render';
import { IButtonGroup } from './interfaces';
/**
* Base class for Button Group component.
*/
export class ButtonGroup extends ComponentRender implements IButtonGroup {
/**
* Changes the background-color for the component.
*/
public backgroundColor = '';
/**
* Removes the group's border.
*/
public borderless = false;
/**
* Applies specified color to the control.
* It can be the name of material or css color in hexa
*/
public color = 'primary';
/**
* Reduces the button size and padding.
*/
public dense = false;
/**
* Applies mandatory selected button
*/
public mandatory = false;
/**
* The multiple prop will allow a user to select multiple
* return values as an array.
*/
public multiple = false;
/**
* Round edge buttons
*/
public rounded = false;
/**
* Applies a large border radius on the top left and
* bottom right of the card.
*/
public shaped = false;
/**
* Specify a custom tag used on the root element.
*/
public tag = 'div';
/**
* Removes the component's border-radius.
*/
public tile = false;
/**
* Buttons selected.
*/
public selectedButtons: number | string | number[] | null = null;
// Makes the button large
public large = false;
// Makes the button small
public small = false;
/* istanbul ignore next */
/**
* Create a new ButtonGroup
* @param props ButtonGroup definition
*/
constructor(props: IButtonGroup) {
super(props);
this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
this.borderless = this.getInitValue('block', props.borderless, this.borderless);
this.color = this.getInitValue('color', props.color, this.color);
this.dense = this.getInitValue('disabled', props.dense, this.dense);
this.mandatory = this.getInitValue('mandatory', props.mandatory, this.mandatory);
this.multiple = this.getInitValue('multiple', props.multiple, this.multiple);
this.rounded = this.getInitValue('rounded', props.rounded, this.rounded);
this.shaped = this.getInitValue('shaped', props.shaped, this.shaped);
this.tag = this.getInitValue('tag', props.tag, this.tag);
this.tile = this.getInitValue('tile', props.tile, this.tile);
this.selectedButtons = this.getInitValue('selectedButtons', props.selectedButtons, this.selectedButtons);
this.large = this.getInitValue('large', props.large, this.large);
this.small = this.getInitValue('small', props.small, this.small);
if (this.multiple && !Array.isArray(this.selectedButtons)) {
this.selectedButtons = [];
}
if (Array.isArray(this.selectedButtons) && this.selectedButtons.length > 0) {
this.multiple = true;
}
}
/**
* Triggered when the input value changes.
* @param event DOM event
* @param element Element clicked
*/
public change(event?: Event, element?: any) {
this.callEvent('change', { event, element, component: this });
}
}
|