UNPKG

smart-webcomponents

Version:

Web Components & Custom Elements for Professional Web Applications

326 lines (275 loc) 10.6 kB
import { Rating } from './../index'; import { Animation, ElementRenderMode} from './../index'; import { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, forwardRef, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core'; import { BaseElement, Smart } from './smart.element'; export { Animation, ElementRenderMode} from './../index'; export { Smart } from './smart.element'; export { Rating } from './../index'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true } @Directive({ exportAs: 'smart-rating', selector: 'smart-rating, [smart-rating]', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) export class RatingComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor { constructor(ref: ElementRef<Rating>) { super(ref); this.nativeElement = ref.nativeElement as Rating; } private eventHandlers: any[] = []; public declare nativeElement: Rating; /** @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 = <Rating>document.createElement('smart-rating'); for (let propertyName in properties) { this.nativeElement[propertyName] = properties[propertyName]; } return this.nativeElement; } /** * @description * The registered callback function called when a change event occurs on the form elements. */ _onChange: (value: any) => void = () => {}; /** * @description * The registered callback function called when a blur event occurs on the form elements. */ _onTouched: () => any = () => {}; /** @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 Disables the interaction with 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 Determines the number of stars that will be displayed. */ @Input() get max(): number { return this.nativeElement ? this.nativeElement.max : undefined; } set max(value: number) { this.nativeElement ? this.nativeElement.max = value : undefined; } /** @description Sets or gets an object specifying strings used in the element 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 The name of the element. Used when submiting data inside a Form. */ @Input() get name(): string { return this.nativeElement ? this.nativeElement.name : undefined; } set name(value: string) { this.nativeElement ? this.nativeElement.name = 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 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 Determines the number of stars that will be marked as active. */ @Input() get value(): number { return this.nativeElement ? this.nativeElement.value : undefined; } set value(value: number) { this.nativeElement ? this.nativeElement.value = value : undefined; } /** @description This event is triggered when the value of the slider is changed. * @param event. The custom event. Custom event was created with: event.detail( value, oldValue) * value - A numeric value indicating the scroll position. * oldValue - A numeric value indicating the previous scroll position. */ @Output() onChange: EventEmitter<CustomEvent> = new EventEmitter(); /** @description Get the value of the rating. * @returns {number} */ public async getValueAsync(): Promise<any> { const getResultOnRender = () => { return new Promise(resolve => { this.nativeElement.whenRendered(() => { const result = this.nativeElement.getValue(); resolve(result) }); }); }; const result = await getResultOnRender(); return result; } public getValue(): number { if (this.nativeElement.isRendered) { return this.nativeElement.getValue(); } return null; } /** @description Sets the value of the rating. * @param {number} value. Sets the value of the rating */ public setValue(value: number): void { if (this.nativeElement.isRendered) { this.nativeElement.setValue(value); } else { this.nativeElement.whenRendered(() => { this.nativeElement.setValue(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(); } _initialChange = true; get ngValue(): any { if (!this.nativeElement) { return null; } const value = this.nativeElement.value; return value; } set ngValue(value: any) { if (this.nativeElement) { this.writeValue(value); } } writeValue(value: any): void { const that = this; const normalizedValue = value == null ? '' : value; that.nativeElement.whenRendered(() => { that.value = normalizedValue; if (that._initialChange === false) { that._onChange(that.value); } }); } registerOnChange(fn: any): void { this._onChange = fn; } registerOnTouched(fn: any): void { this._onTouched = fn; } 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']); that.eventHandlers['changeModelHandler'] = (event: Event) => { that._initialChange = false; that._onChange(that.nativeElement.value); }; that.eventHandlers['blurModelHandler'] = (event: Event) => { that._onTouched(); }; that.nativeElement.whenRendered(() => { if (that.nativeElement.querySelector('input')) { that.eventHandlers['keyupModelHandler'] = (event) => { setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50); }; that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']); } }); that.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']); that.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']); } /** @description Remove event listeners. */ private unlisten(): void { const that = this; if (that.eventHandlers['changeHandler']) { that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']); } if (that.eventHandlers['changeModelHandler']) { that.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']); if (that.nativeElement.querySelector('input')) { that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']); } } if (that.eventHandlers['blurModelHandler']) { that.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']); } } }