UNPKG

smart-webcomponents

Version:

Web Components & Custom Elements for Professional Web Applications

437 lines (365 loc) 16.9 kB
import { Ribbon } from './../index'; import { RibbonFileMenuPosition, RibbonFileMenuType, RibbonFileMenu, ElementRenderMode} from './../index'; import { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter, QueryList, ContentChildren } from '@angular/core'; import { BaseElement, Smart } from './smart.element'; export { RibbonFileMenuPosition, RibbonFileMenuType, RibbonFileMenu, ElementRenderMode} from './../index'; export { Smart } from './smart.element'; export { Ribbon } from './../index'; import { RibbonTabComponent } from './smart.ribbontab'; import { RibbonGroupComponent } from './smart.ribbongroup'; import { RibbonItemComponent } from './smart.ribbonitem'; @Directive({ exportAs: 'smart-ribbon', selector: 'smart-ribbon, [smart-ribbon]' }) export class RibbonComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges { constructor(ref: ElementRef<Ribbon>) { super(ref); this.nativeElement = ref.nativeElement as Ribbon; } private eventHandlers: any[] = []; public declare nativeElement: Ribbon; /** @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 = <Ribbon>document.createElement('smart-ribbon'); for (let propertyName in properties) { this.nativeElement[propertyName] = properties[propertyName]; } return this.nativeElement; } /** @description Determines whether the ribbon is collapsible. */ @Input() get collapsible(): any { return this.nativeElement ? this.nativeElement.collapsible : undefined; } set collapsible(value: any) { this.nativeElement ? this.nativeElement.collapsible = value : undefined; } /** @description Determines the tab items of the ribbon. */ @Input() get dataSource(): any { return this.nativeElement ? this.nativeElement.dataSource : undefined; } set dataSource(value: any) { this.nativeElement ? this.nativeElement.dataSource = value : undefined; } /** @description Sets or gets the value indicating whether the element 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 file menu options of the ribbon. */ @Input() get fileMenu(): RibbonFileMenu { return this.nativeElement ? this.nativeElement.fileMenu : undefined; } set fileMenu(value: RibbonFileMenu) { this.nativeElement ? this.nativeElement.fileMenu = 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 Determines the locale of the ribbon. */ @Input() get locale(): string { return this.nativeElement ? this.nativeElement.locale : undefined; } set locale(value: string) { this.nativeElement ? this.nativeElement.locale = value : undefined; } /** @description Determines the messages of the ribbon */ @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 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 selected tab. */ @Input() get selectedTab(): any { return this.nativeElement ? this.nativeElement.selectedTab : undefined; } set selectedTab(value: any) { this.nativeElement ? this.nativeElement.selectedTab = value : undefined; } /** @description This event is triggered when the ribbon is collapsed. * @param event. The custom event. */ @Output() onCollapse: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the ribbon is collapsing. The event can be canceled by calling event.preventDefault() in the event handler function. * @param event. The custom event. */ @Output() onCollapsing: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the dialog launcher is clicked. * @param event. The custom event. Custom event was created with: event.detail( groupLabel, groupId) * groupLabel - The label of the dialog launcher's ribbon group. * groupId - The id of the dialog launcher's ribbon group. */ @Output() onDialogLauncherClick: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the ribbon is expanded. * @param event. The custom event. */ @Output() onExpand: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the ribbon is expanding. The event can be canceled by calling event.preventDefault() in the event handler function. * @param event. The custom event. */ @Output() onExpanding: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the file menu button is clicked. * @param event. The custom event. */ @Output() onFileButtonClick: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the file menu is opened. * @param event. The custom event. */ @Output() onFileMenuOpen: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the file menu is closed. * @param event. The custom event. */ @Output() onFileMenuClose: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when a file menu item is clicked. * @param event. The custom event. Custom event was created with: event.detail( item) * item - The file menu item. */ @Output() onFileMenuItemClick: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the tab selection is changed. * @param event. The custom event. Custom event was created with: event.detail( oldIndex, index) * oldIndex - The previous tab index. * index - The new index of the selected tab. */ @Output() onSelect: EventEmitter<CustomEvent> = new EventEmitter(); /** @description This event is triggered when the tab selection is changing. The event can be canceled by calling event.preventDefault() in the event handler function. * @param event. The custom event. Custom event was created with: event.detail( oldIndex, index) * oldIndex - The previous tab index. * index - The new index of the selected tab. */ @Output() onSelecting: EventEmitter<CustomEvent> = new EventEmitter(); /** @description Adds a new ribbon tab to the ribbon. The tab can be added as an object, HTMLElement or id to an HTMLElement. * @param {any} tab. The ribbon tab to be added. */ public addTab(tab: any): void { if (this.nativeElement.isRendered) { this.nativeElement.addTab(tab); } else { this.nativeElement.whenRendered(() => { this.nativeElement.addTab(tab); }); } } /** @description Adds a new group to a ribbon tab. The group can be added as an object, HTMLElement or id to an HTMLElement. * @param {any} tab. The id, index or HTMLElement of the parent ribbon tab. * @param {any} group. The ribbon group to be added. */ public addGroup(tab: any, group: any): void { if (this.nativeElement.isRendered) { this.nativeElement.addGroup(tab, group); } else { this.nativeElement.whenRendered(() => { this.nativeElement.addGroup(tab, group); }); } } /** @description Adds a new ribbon item to a ribbon group. The item can be added as an object, HTMLElement or id to an HTMLElement. * @param {string | number | HTMLElement} tab. The id, index or HTMLElement of the parent ribbon tab. * @param {string | HTMLElement} group. The id or HTMLElement of the parent ribbon group. * @param {any} item. The ribbon item to be added. */ public addItem(tab: string | number | HTMLElement, group: string | HTMLElement, item: any): void { if (this.nativeElement.isRendered) { this.nativeElement.addItem(tab, group, item); } else { this.nativeElement.whenRendered(() => { this.nativeElement.addItem(tab, group, item); }); } } /** @description Collapses the ribbon. */ public collapse(): void { if (this.nativeElement.isRendered) { this.nativeElement.collapse(); } else { this.nativeElement.whenRendered(() => { this.nativeElement.collapse(); }); } } /** @description Expands the ribbon. */ public expand(): void { if (this.nativeElement.isRendered) { this.nativeElement.expand(); } else { this.nativeElement.whenRendered(() => { this.nativeElement.expand(); }); } } /** @description Removes a ribbon tab from the ribbon. * @param {string | number} ribbonTab. The id or index of the ribbon tab to be removed. */ public removeTab(ribbonTab: string | number): void { if (this.nativeElement.isRendered) { this.nativeElement.removeTab(ribbonTab); } else { this.nativeElement.whenRendered(() => { this.nativeElement.removeTab(ribbonTab); }); } } /** @description Removes a ribbon group from a ribbon tab. * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab. * @param {string | number} ribbonGroup?. The id or index of the ribbon group to be removed. */ public removeGroup(ribbonTabIndex?: string | number, ribbonGroup?: string | number): void { if (this.nativeElement.isRendered) { this.nativeElement.removeGroup(ribbonTabIndex, ribbonGroup); } else { this.nativeElement.whenRendered(() => { this.nativeElement.removeGroup(ribbonTabIndex, ribbonGroup); }); } } /** @description Removes a ribbon item from a ribbon group. * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab. * @param {string | number} ribbonGroup?. The id or index of the parent ribbon group. * @param {string | number} ribbonItem?. The id or index of the ribbon item to be removed. */ public removeItem(ribbonTabIndex?: string | number, ribbonGroup?: string | number, ribbonItem?: string | number): void { if (this.nativeElement.isRendered) { this.nativeElement.removeItem(ribbonTabIndex, ribbonGroup, ribbonItem); } else { this.nativeElement.whenRendered(() => { this.nativeElement.removeItem(ribbonTabIndex, ribbonGroup, ribbonItem); }); } } /** @description Selects a ribbon tab. * @param {string | number} ribbonTabIndex. The index of the ribbon tab to be selected. */ public selectTab(ribbonTabIndex: string | number): void { if (this.nativeElement.isRendered) { this.nativeElement.selectTab(ribbonTabIndex); } else { this.nativeElement.whenRendered(() => { this.nativeElement.selectTab(ribbonTabIndex); }); } } 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['collapseHandler'] = (event: CustomEvent) => { that.onCollapse.emit(event); } that.nativeElement.addEventListener('collapse', that.eventHandlers['collapseHandler']); that.eventHandlers['collapsingHandler'] = (event: CustomEvent) => { that.onCollapsing.emit(event); } that.nativeElement.addEventListener('collapsing', that.eventHandlers['collapsingHandler']); that.eventHandlers['dialogLauncherClickHandler'] = (event: CustomEvent) => { that.onDialogLauncherClick.emit(event); } that.nativeElement.addEventListener('dialogLauncherClick', that.eventHandlers['dialogLauncherClickHandler']); that.eventHandlers['expandHandler'] = (event: CustomEvent) => { that.onExpand.emit(event); } that.nativeElement.addEventListener('expand', that.eventHandlers['expandHandler']); that.eventHandlers['expandingHandler'] = (event: CustomEvent) => { that.onExpanding.emit(event); } that.nativeElement.addEventListener('expanding', that.eventHandlers['expandingHandler']); that.eventHandlers['fileButtonClickHandler'] = (event: CustomEvent) => { that.onFileButtonClick.emit(event); } that.nativeElement.addEventListener('fileButtonClick', that.eventHandlers['fileButtonClickHandler']); that.eventHandlers['fileMenuOpenHandler'] = (event: CustomEvent) => { that.onFileMenuOpen.emit(event); } that.nativeElement.addEventListener('fileMenuOpen', that.eventHandlers['fileMenuOpenHandler']); that.eventHandlers['fileMenuCloseHandler'] = (event: CustomEvent) => { that.onFileMenuClose.emit(event); } that.nativeElement.addEventListener('fileMenuClose', that.eventHandlers['fileMenuCloseHandler']); that.eventHandlers['fileMenuItemClickHandler'] = (event: CustomEvent) => { that.onFileMenuItemClick.emit(event); } that.nativeElement.addEventListener('fileMenuItemClick', that.eventHandlers['fileMenuItemClickHandler']); that.eventHandlers['selectHandler'] = (event: CustomEvent) => { that.onSelect.emit(event); } that.nativeElement.addEventListener('select', that.eventHandlers['selectHandler']); that.eventHandlers['selectingHandler'] = (event: CustomEvent) => { that.onSelecting.emit(event); } that.nativeElement.addEventListener('selecting', that.eventHandlers['selectingHandler']); } /** @description Remove event listeners. */ private unlisten(): void { const that = this; if (that.eventHandlers['collapseHandler']) { that.nativeElement.removeEventListener('collapse', that.eventHandlers['collapseHandler']); } if (that.eventHandlers['collapsingHandler']) { that.nativeElement.removeEventListener('collapsing', that.eventHandlers['collapsingHandler']); } if (that.eventHandlers['dialogLauncherClickHandler']) { that.nativeElement.removeEventListener('dialogLauncherClick', that.eventHandlers['dialogLauncherClickHandler']); } if (that.eventHandlers['expandHandler']) { that.nativeElement.removeEventListener('expand', that.eventHandlers['expandHandler']); } if (that.eventHandlers['expandingHandler']) { that.nativeElement.removeEventListener('expanding', that.eventHandlers['expandingHandler']); } if (that.eventHandlers['fileButtonClickHandler']) { that.nativeElement.removeEventListener('fileButtonClick', that.eventHandlers['fileButtonClickHandler']); } if (that.eventHandlers['fileMenuOpenHandler']) { that.nativeElement.removeEventListener('fileMenuOpen', that.eventHandlers['fileMenuOpenHandler']); } if (that.eventHandlers['fileMenuCloseHandler']) { that.nativeElement.removeEventListener('fileMenuClose', that.eventHandlers['fileMenuCloseHandler']); } if (that.eventHandlers['fileMenuItemClickHandler']) { that.nativeElement.removeEventListener('fileMenuItemClick', that.eventHandlers['fileMenuItemClickHandler']); } if (that.eventHandlers['selectHandler']) { that.nativeElement.removeEventListener('select', that.eventHandlers['selectHandler']); } if (that.eventHandlers['selectingHandler']) { that.nativeElement.removeEventListener('selecting', that.eventHandlers['selectingHandler']); } } }