| 
 | 1 | +import { ButtonGroup } from './../index';  | 
 | 2 | +import { Animation, ClickMode, ElementRenderMode} from './../index';  | 
 | 3 | +import { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';  | 
 | 4 | +import { BaseElement, Smart } from './smart.element';  | 
 | 5 | +export { Animation, ClickMode, ElementRenderMode} from './../index';  | 
 | 6 | +export { Smart } from './smart.element';  | 
 | 7 | +export { ButtonGroup } from './../index';  | 
 | 8 | + | 
 | 9 | + | 
 | 10 | +@Directive({  | 
 | 11 | +	selector: 'smart-button-group, [smart-button-group]'  | 
 | 12 | +})  | 
 | 13 | + | 
 | 14 | +export class ButtonGroupComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {  | 
 | 15 | +	constructor(ref: ElementRef<ButtonGroup>) {  | 
 | 16 | +		super(ref);  | 
 | 17 | +		this.nativeElement = ref.nativeElement as ButtonGroup;  | 
 | 18 | +	}  | 
 | 19 | + | 
 | 20 | +	private eventHandlers: any[] = [];  | 
 | 21 | + | 
 | 22 | +	public nativeElement: ButtonGroup;  | 
 | 23 | +	/** @description Creates the component on demand.  | 
 | 24 | +	 * @param properties An optional object of properties, which will be added to the template binded ones.  | 
 | 25 | +	 */  | 
 | 26 | +	public createComponent(properties = {}): any {  | 
 | 27 | +    	this.nativeElement = <ButtonGroup>document.createElement('smart-button-group');  | 
 | 28 | +		for (let propertyName in properties) {   | 
 | 29 | + 			this.nativeElement[propertyName] = properties[propertyName];  | 
 | 30 | +		}  | 
 | 31 | +		return this.nativeElement;  | 
 | 32 | +	}  | 
 | 33 | +	/** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */  | 
 | 34 | +	@Input()  | 
 | 35 | +	get animation(): Animation {  | 
 | 36 | +		return this.nativeElement ? this.nativeElement.animation : undefined;  | 
 | 37 | +	}  | 
 | 38 | +	set animation(value: Animation) {  | 
 | 39 | +		this.nativeElement ? this.nativeElement.animation = value : undefined;  | 
 | 40 | +	}  | 
 | 41 | + | 
 | 42 | +	/** @description Determines the buttons configuration. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described. */  | 
 | 43 | +	@Input()  | 
 | 44 | +	get dataSource(): any {  | 
 | 45 | +		return this.nativeElement ? this.nativeElement.dataSource : undefined;  | 
 | 46 | +	}  | 
 | 47 | +	set dataSource(value: any) {  | 
 | 48 | +		this.nativeElement ? this.nativeElement.dataSource = value : undefined;  | 
 | 49 | +	}  | 
 | 50 | + | 
 | 51 | +	/** @description Determines the selection mode for the element. */  | 
 | 52 | +	@Input()  | 
 | 53 | +	get selectionMode(): ClickMode {  | 
 | 54 | +		return this.nativeElement ? this.nativeElement.selectionMode : undefined;  | 
 | 55 | +	}  | 
 | 56 | +	set selectionMode(value: ClickMode) {  | 
 | 57 | +		this.nativeElement ? this.nativeElement.selectionMode = value : undefined;  | 
 | 58 | +	}  | 
 | 59 | + | 
 | 60 | +	/** @description Enables or disables the element.  */  | 
 | 61 | +	@Input()  | 
 | 62 | +	get disabled(): boolean {  | 
 | 63 | +		return this.nativeElement ? this.nativeElement.disabled : undefined;  | 
 | 64 | +	}  | 
 | 65 | +	set disabled(value: boolean) {  | 
 | 66 | +		this.nativeElement ? this.nativeElement.disabled = value : undefined;  | 
 | 67 | +	}  | 
 | 68 | + | 
 | 69 | +	/** @description Sets or gets the language. Used in conjunction with the property messages.  */  | 
 | 70 | +	@Input()  | 
 | 71 | +	get locale(): string {  | 
 | 72 | +		return this.nativeElement ? this.nativeElement.locale : undefined;  | 
 | 73 | +	}  | 
 | 74 | +	set locale(value: string) {  | 
 | 75 | +		this.nativeElement ? this.nativeElement.locale = value : undefined;  | 
 | 76 | +	}  | 
 | 77 | + | 
 | 78 | +	/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */  | 
 | 79 | +	@Input()  | 
 | 80 | +	get localizeFormatFunction(): any {  | 
 | 81 | +		return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;  | 
 | 82 | +	}  | 
 | 83 | +	set localizeFormatFunction(value: any) {  | 
 | 84 | +		this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;  | 
 | 85 | +	}  | 
 | 86 | + | 
 | 87 | +	/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */  | 
 | 88 | +	@Input()  | 
 | 89 | +	get messages(): any {  | 
 | 90 | +		return this.nativeElement ? this.nativeElement.messages : undefined;  | 
 | 91 | +	}  | 
 | 92 | +	set messages(value: any) {  | 
 | 93 | +		this.nativeElement ? this.nativeElement.messages = value : undefined;  | 
 | 94 | +	}  | 
 | 95 | + | 
 | 96 | +	/** @description Sets or gets the name attribute for the element. Name is used when submiting HTML forms. */  | 
 | 97 | +	@Input()  | 
 | 98 | +	get name(): string {  | 
 | 99 | +		return this.nativeElement ? this.nativeElement.name : undefined;  | 
 | 100 | +	}  | 
 | 101 | +	set name(value: string) {  | 
 | 102 | +		this.nativeElement ? this.nativeElement.name = value : undefined;  | 
 | 103 | +	}  | 
 | 104 | + | 
 | 105 | +	/** @description If the custom element is readonly, it cannot be interacted with. */  | 
 | 106 | +	@Input()  | 
 | 107 | +	get readonly(): boolean {  | 
 | 108 | +		return this.nativeElement ? this.nativeElement.readonly : undefined;  | 
 | 109 | +	}  | 
 | 110 | +	set readonly(value: boolean) {  | 
 | 111 | +		this.nativeElement ? this.nativeElement.readonly = value : undefined;  | 
 | 112 | +	}  | 
 | 113 | + | 
 | 114 | +	/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */  | 
 | 115 | +	@Input()  | 
 | 116 | +	get rightToLeft(): boolean {  | 
 | 117 | +		return this.nativeElement ? this.nativeElement.rightToLeft : undefined;  | 
 | 118 | +	}  | 
 | 119 | +	set rightToLeft(value: boolean) {  | 
 | 120 | +		this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;  | 
 | 121 | +	}  | 
 | 122 | + | 
 | 123 | +	/** @description Determines the theme. Theme defines the look of the element */  | 
 | 124 | +	@Input()  | 
 | 125 | +	get theme(): string {  | 
 | 126 | +		return this.nativeElement ? this.nativeElement.theme : undefined;  | 
 | 127 | +	}  | 
 | 128 | +	set theme(value: string) {  | 
 | 129 | +		this.nativeElement ? this.nativeElement.theme = value : undefined;  | 
 | 130 | +	}  | 
 | 131 | + | 
 | 132 | +	/** @description Sets or gets the button group's selected values. Represents an array of strings. */  | 
 | 133 | +	@Input()  | 
 | 134 | +	get selectedValues(): string[] {  | 
 | 135 | +		return this.nativeElement ? this.nativeElement.selectedValues : undefined;  | 
 | 136 | +	}  | 
 | 137 | +	set selectedValues(value: string[]) {  | 
 | 138 | +		this.nativeElement ? this.nativeElement.selectedValues = value : undefined;  | 
 | 139 | +	}  | 
 | 140 | + | 
 | 141 | +	/** @description Sets or gets the button group's selected indexes. Represents an array of numbers */  | 
 | 142 | +	@Input()  | 
 | 143 | +	get selectedIndexes(): number[] {  | 
 | 144 | +		return this.nativeElement ? this.nativeElement.selectedIndexes : undefined;  | 
 | 145 | +	}  | 
 | 146 | +	set selectedIndexes(value: number[]) {  | 
 | 147 | +		this.nativeElement ? this.nativeElement.selectedIndexes = value : undefined;  | 
 | 148 | +	}  | 
 | 149 | + | 
 | 150 | +	/** @description If is set to true, the element cannot be focused. */  | 
 | 151 | +	@Input()  | 
 | 152 | +	get unfocusable(): boolean {  | 
 | 153 | +		return this.nativeElement ? this.nativeElement.unfocusable : undefined;  | 
 | 154 | +	}  | 
 | 155 | +	set unfocusable(value: boolean) {  | 
 | 156 | +		this.nativeElement ? this.nativeElement.unfocusable = value : undefined;  | 
 | 157 | +	}  | 
 | 158 | + | 
 | 159 | +	/** @description Change event is triggered when the selectedValues/selectedIndexes are changed.  | 
 | 160 | +	*  @param event. The custom event. 	*/  | 
 | 161 | +	@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();  | 
 | 162 | + | 
 | 163 | +	/** @description Selects/Unselects an item inside the element.   | 
 | 164 | +	* @param {number | string} value. The index or the value of the item to be selected/unselected.  | 
 | 165 | +	*/  | 
 | 166 | +    public select(value: number | string): void {  | 
 | 167 | +        if (this.nativeElement.isRendered) {  | 
 | 168 | +            this.nativeElement.select(value);  | 
 | 169 | +        }  | 
 | 170 | +        else  | 
 | 171 | +        {  | 
 | 172 | +            this.nativeElement.whenRendered(() => {  | 
 | 173 | +                this.nativeElement.select(value);  | 
 | 174 | +            });  | 
 | 175 | +        }  | 
 | 176 | +    }  | 
 | 177 | + | 
 | 178 | + | 
 | 179 | +	get isRendered(): boolean {  | 
 | 180 | +		return this.nativeElement ? this.nativeElement.isRendered : false;  | 
 | 181 | +	}  | 
 | 182 | + | 
 | 183 | +	ngOnInit() {  | 
 | 184 | +	}  | 
 | 185 | + | 
 | 186 | +    ngAfterViewInit() {  | 
 | 187 | +      const that = this;  | 
 | 188 | + | 
 | 189 | +      that.onCreate.emit(that.nativeElement);  | 
 | 190 | + | 
 | 191 | +		Smart.Render();  | 
 | 192 | + | 
 | 193 | +		this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });  | 
 | 194 | +		this.listen();  | 
 | 195 | +	}  | 
 | 196 | + | 
 | 197 | +	ngOnDestroy() {  | 
 | 198 | +		this.unlisten();  | 
 | 199 | +	}  | 
 | 200 | + | 
 | 201 | +	ngOnChanges(changes: SimpleChanges) {  | 
 | 202 | +		if (this.nativeElement && this.nativeElement.isRendered) {  | 
 | 203 | +			for (const propName in changes) {  | 
 | 204 | +				if (changes.hasOwnProperty(propName)) {  | 
 | 205 | +					this.nativeElement[propName] = changes[propName].currentValue;  | 
 | 206 | +				}  | 
 | 207 | +			}  | 
 | 208 | +		}  | 
 | 209 | +	}  | 
 | 210 | + | 
 | 211 | +	/** @description Add event listeners. */  | 
 | 212 | +	private listen(): void {  | 
 | 213 | +        const that = this;  | 
 | 214 | +		that.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }  | 
 | 215 | +		that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);  | 
 | 216 | + | 
 | 217 | +	}  | 
 | 218 | + | 
 | 219 | +	/** @description Remove event listeners. */  | 
 | 220 | +	private unlisten(): void {  | 
 | 221 | +        const that = this;  | 
 | 222 | +		if (that.eventHandlers['changeHandler']) {  | 
 | 223 | +			that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);  | 
 | 224 | +		}  | 
 | 225 | + | 
 | 226 | +	}  | 
 | 227 | +}  | 
0 commit comments