smart-webcomponents/source/angular/ribbon/smart.ribbonitem.ts

Web Components & Custom Elements for Professional Web Applications

import { RibbonItem } from './../index';
import { RibbonItemType, RibbonItemSize, RibbonItemSettings, ElementRenderMode} from './../index';
import { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { BaseElement, Smart } from './smart.element';
export { RibbonItemType, RibbonItemSize, RibbonItemSettings, ElementRenderMode} from './../index';
export { Smart } from './smart.element';
export { RibbonItem } from './../index';


@Directive({
	exportAs: 'smart-ribbon-item',	selector: 'smart-ribbon-item, [smart-ribbon-item]'
})

export class RibbonItemComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
	constructor(ref: ElementRef<RibbonItem>) {
		super(ref);
		this.nativeElement = ref.nativeElement as RibbonItem;
	}

	private eventHandlers: any[] = [];

	public declare nativeElement: RibbonItem;
	/** @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 = <RibbonItem>document.createElement('smart-ribbon-item');
		for (let propertyName in properties) { 
 			this.nativeElement[propertyName] = properties[propertyName];
		}
		return this.nativeElement;
	}
	/** @description Determines whether the ribbon item is disabled. */
	@Input()
	get disabled(): boolean {
		return this.nativeElement ? this.nativeElement.disabled : undefined;
	}
	set disabled(value: boolean) {
		this.nativeElement ? this.nativeElement.disabled = value : undefined;
	}

	/** @description Determines the label of the ribbon item. */
	@Input()
	get label(): string {
		return this.nativeElement ? this.nativeElement.label : undefined;
	}
	set label(value: string) {
		this.nativeElement ? this.nativeElement.label = value : undefined;
	}

	/** @description Determines the type of the ribbon item. */
	@Input()
	get type(): RibbonItemType | string {
		return this.nativeElement ? this.nativeElement.type : undefined;
	}
	set type(value: RibbonItemType | string) {
		this.nativeElement ? this.nativeElement.type = value : undefined;
	}

	/** @description Determines the template of the ribbon item. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function. */
	@Input()
	get template(): string {
		return this.nativeElement ? this.nativeElement.template : undefined;
	}
	set template(value: string) {
		this.nativeElement ? this.nativeElement.template = value : undefined;
	}

	/** @description Determines the size of the ribbon item. */
	@Input()
	get size(): RibbonItemSize | string {
		return this.nativeElement ? this.nativeElement.size : undefined;
	}
	set size(value: RibbonItemSize | string) {
		this.nativeElement ? this.nativeElement.size = value : undefined;
	}

	/** @description  */
	@Input()
	get sizeChanged(): any {
		return this.nativeElement ? this.nativeElement.sizeChanged : undefined;
	}
	set sizeChanged(value: any) {
		this.nativeElement ? this.nativeElement.sizeChanged = value : undefined;
	}

	/** @description Determines the allowed sizes of the ribbon item. */
	@Input()
	get allowedSizes(): any {
		return this.nativeElement ? this.nativeElement.allowedSizes : undefined;
	}
	set allowedSizes(value: any) {
		this.nativeElement ? this.nativeElement.allowedSizes = value : undefined;
	}

	/** @description Determines the icon of the ribbon item. */
	@Input()
	get icon(): string {
		return this.nativeElement ? this.nativeElement.icon : undefined;
	}
	set icon(value: string) {
		this.nativeElement ? this.nativeElement.icon = value : undefined;
	}

	/** @description Determines the settings of the ribbon item. The settings will be applied as properties if the ribbon item is set to a Smart Element. */
	@Input()
	get settings(): RibbonItemSettings {
		return this.nativeElement ? this.nativeElement.settings : undefined;
	}
	set settings(value: RibbonItemSettings) {
		this.nativeElement ? this.nativeElement.settings = value : undefined;
	}

	/** @description Determines the class of the ribbon item. */
	@Input()
	get cssClass(): string {
		return this.nativeElement ? this.nativeElement.cssClass : undefined;
	}
	set cssClass(value: string) {
		this.nativeElement ? this.nativeElement.cssClass = value : undefined;
	}

	/** @description Sets a click event handler for the ribbon item. */
	@Input()
	get onItemClick(): any {
		return this.nativeElement ? this.nativeElement.onItemClick : undefined;
	}
	set onItemClick(value: any) {
		this.nativeElement ? this.nativeElement.onItemClick = value : undefined;
	}

	/** @description Sets a change event handler for the ribbon item. */
	@Input()
	get onItemChange(): any {
		return this.nativeElement ? this.nativeElement.onItemChange : undefined;
	}
	set onItemChange(value: any) {
		this.nativeElement ? this.nativeElement.onItemChange = value : undefined;
	}

	/** @description Determines the tooltip of the ribbon item. */
	@Input()
	get tooltip(): string {
		return this.nativeElement ? this.nativeElement.tooltip : undefined;
	}
	set tooltip(value: string) {
		this.nativeElement ? this.nativeElement.tooltip = value : undefined;
	}


	get isRendered(): boolean {
		return this.nativeElement ? this.nativeElement.isRendered : false;
	}

	ngOnInit() {
	}

    ngAfterViewInit() {
      const that = this;

      that.onCreate.emit(that.nativeElement);

		this.nativeElement.classList.add('smart-angular');

		if (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
	}

	ngOnDestroy() {	}

	ngOnChanges(changes: SimpleChanges) {
		if (this.nativeElement && this.nativeElement.isRendered) {
			for (const propName in changes) {
				if (changes.hasOwnProperty(propName)) {
					this.nativeElement[propName] = changes[propName].currentValue;
				}
			}
		}
	}

}