UNPKG

smart-webcomponents

Version:

Web Components & Custom Elements for Professional Web Applications

239 lines (203 loc) 8.44 kB
import { ButtonGroup } from './../index'; import { Animation, ButtonGroupSelectionMode, ElementRenderMode} from './../index'; import { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core'; import { BaseElement, Smart } from './smart.element'; export { Animation, ButtonGroupSelectionMode, ElementRenderMode} from './../index'; export { Smart } from './smart.element'; export { ButtonGroup } from './../index'; @Directive({ exportAs: 'smart-button-group', selector: 'smart-button-group, [smart-button-group]' }) export class ButtonGroupComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges { constructor(ref: ElementRef<ButtonGroup>) { super(ref); this.nativeElement = ref.nativeElement as ButtonGroup; } private eventHandlers: any[] = []; public declare nativeElement: ButtonGroup; /** @description Creates the component on demand. * @param properties An optional object of properties, which will be added to the template binded ones. */ public createComponent(properties = {}): any { this.nativeElement = <ButtonGroup>document.createElement('smart-button-group'); for (let propertyName in properties) { this.nativeElement[propertyName] = properties[propertyName]; } return this.nativeElement; } /** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */ @Input() get animation(): Animation | string { return this.nativeElement ? this.nativeElement.animation : undefined; } set animation(value: Animation | string) { this.nativeElement ? this.nativeElement.animation = value : undefined; } /** @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. */ @Input() get dataSource(): any { return this.nativeElement ? this.nativeElement.dataSource : undefined; } set dataSource(value: any) { this.nativeElement ? this.nativeElement.dataSource = value : undefined; } /** @description Determines the selection mode for the element. */ @Input() get selectionMode(): ButtonGroupSelectionMode | string { return this.nativeElement ? this.nativeElement.selectionMode : undefined; } set selectionMode(value: ButtonGroupSelectionMode | string) { this.nativeElement ? this.nativeElement.selectionMode = value : undefined; } /** @description Enables or disables the element. */ @Input() get disabled(): boolean { return this.nativeElement ? this.nativeElement.disabled : undefined; } set disabled(value: boolean) { this.nativeElement ? this.nativeElement.disabled = value : undefined; } /** @description Sets or gets the unlockKey which unlocks the product. */ @Input() get unlockKey(): string { return this.nativeElement ? this.nativeElement.unlockKey : undefined; } set unlockKey(value: string) { this.nativeElement ? this.nativeElement.unlockKey = value : undefined; } /** @description Sets or gets the language. Used in conjunction with the property messages. */ @Input() get locale(): string { return this.nativeElement ? this.nativeElement.locale : undefined; } set locale(value: string) { this.nativeElement ? this.nativeElement.locale = value : undefined; } /** @description Callback used to customize the format of the messages that are returned from the Localization Module. */ @Input() get localizeFormatFunction(): any { return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined; } set localizeFormatFunction(value: any) { this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined; } /** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */ @Input() get messages(): any { return this.nativeElement ? this.nativeElement.messages : undefined; } set messages(value: any) { this.nativeElement ? this.nativeElement.messages = value : undefined; } /** @description Sets or gets the name attribute for the element. Name is used when submiting HTML forms. */ @Input() get name(): string { return this.nativeElement ? this.nativeElement.name : undefined; } set name(value: string) { this.nativeElement ? this.nativeElement.name = value : undefined; } /** @description If the custom element is readonly, it cannot be interacted with. */ @Input() get readonly(): boolean { return this.nativeElement ? this.nativeElement.readonly : undefined; } set readonly(value: boolean) { this.nativeElement ? this.nativeElement.readonly = value : undefined; } /** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */ @Input() get rightToLeft(): boolean { return this.nativeElement ? this.nativeElement.rightToLeft : undefined; } set rightToLeft(value: boolean) { this.nativeElement ? this.nativeElement.rightToLeft = value : undefined; } /** @description Determines the theme. Theme defines the look of the element */ @Input() get theme(): string { return this.nativeElement ? this.nativeElement.theme : undefined; } set theme(value: string) { this.nativeElement ? this.nativeElement.theme = value : undefined; } /** @description Sets or gets the button group's selected values. Represents an array of strings. */ @Input() get selectedValues(): string[] { return this.nativeElement ? this.nativeElement.selectedValues : undefined; } set selectedValues(value: string[]) { this.nativeElement ? this.nativeElement.selectedValues = value : undefined; } /** @description Sets or gets the button group's selected indexes. Represents an array of numbers */ @Input() get selectedIndexes(): number[] { return this.nativeElement ? this.nativeElement.selectedIndexes : undefined; } set selectedIndexes(value: number[]) { this.nativeElement ? this.nativeElement.selectedIndexes = value : undefined; } /** @description If is set to true, the element cannot be focused. */ @Input() get unfocusable(): boolean { return this.nativeElement ? this.nativeElement.unfocusable : undefined; } set unfocusable(value: boolean) { this.nativeElement ? this.nativeElement.unfocusable = value : undefined; } /** @description Change event is triggered when the selectedValues/selectedIndexes are changed. * @param event. The custom event. */ @Output() onChange: EventEmitter<CustomEvent> = new EventEmitter(); /** @description Selects/Unselects an item inside the element. * @param {number | string} value. The index or the value of the item to be selected/unselected. */ public select(value: number | string): void { if (this.nativeElement.isRendered) { this.nativeElement.select(value); } else { this.nativeElement.whenRendered(() => { this.nativeElement.select(value); }); } } get isRendered(): boolean { return this.nativeElement ? this.nativeElement.isRendered : false; } ngOnInit() { } ngAfterViewInit() { const that = this; that.onCreate.emit(that.nativeElement); if (Smart) Smart.Render(); this.nativeElement.classList.add('smart-angular'); if (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); }); this.listen(); } ngOnDestroy() { this.unlisten(); } ngOnChanges(changes: SimpleChanges) { if (this.nativeElement && this.nativeElement.isRendered) { for (const propName in changes) { if (changes.hasOwnProperty(propName)) { this.nativeElement[propName] = changes[propName].currentValue; } } } } /** @description Add event listeners. */ private listen(): void { const that = this; that.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); } that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']); } /** @description Remove event listeners. */ private unlisten(): void { const that = this; if (that.eventHandlers['changeHandler']) { that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']); } } }