smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
373 lines (309 loc) • 14.2 kB
text/typescript
import { Layout } from './../index';
import { Animation, Orientation, 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 { Animation, Orientation, ElementRenderMode} from './../index';
export { Smart } from './smart.element';
export { Layout } from './../index';
import { LayoutItemComponent } from './smart.layoutitem';
import { LayoutGroupComponent } from './smart.layoutgroup';
import { TabLayoutItemComponent } from './smart.tablayoutitem';
import { TabLayoutGroupComponent } from './smart.tablayoutgroup';
export class LayoutComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
constructor(ref: ElementRef<Layout>) {
super(ref);
this.nativeElement = ref.nativeElement as Layout;
}
private eventHandlers: any[] = [];
public declare nativeElement: Layout;
/** @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 = <Layout>document.createElement('smart-layout');
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' */
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 options that will be available for selection inside the context menu. */
get contextMenuDataSource(): any {
return this.nativeElement ? this.nativeElement.contextMenuDataSource : undefined;
}
set contextMenuDataSource(value: any) {
this.nativeElement ? this.nativeElement.contextMenuDataSource = value : undefined;
}
/** @description Enables or disables the element. */
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 Layout's data source. */
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 unlockKey which unlocks the product. */
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. */
get locale(): string {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value: string) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Sets an object with string values, related to the different states of passwords strength. */
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 Layout's main orientation. The orientation is applied to all Splitters inside the Layout unless they have their orientation explicitly set in the dataSource. */
get orientation(): Orientation | string {
return this.nativeElement ? this.nativeElement.orientation : undefined;
}
set orientation(value: Orientation | string) {
this.nativeElement ? this.nativeElement.orientation = value : undefined;
}
/** @description If the element is readonly, users cannot interact with it. */
get readonly(): boolean {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value: boolean) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Determines whether splitting is live or not. */
get allowLiveSplit(): boolean {
return this.nativeElement ? this.nativeElement.allowLiveSplit : undefined;
}
set allowLiveSplit(value: boolean) {
this.nativeElement ? this.nativeElement.allowLiveSplit = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
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 item. */
get selectedIndex(): any {
return this.nativeElement ? this.nativeElement.selectedIndex : undefined;
}
set selectedIndex(value: any) {
this.nativeElement ? this.nativeElement.selectedIndex = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
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. */
get unfocusable(): boolean {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value: boolean) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description This event is triggered after resizing is completed.
* @param event. The custom event. */
onResize: EventEmitter<CustomEvent> = new EventEmitter();
/** @description This event is triggered when a change regarding the Layout's state has occured, such as inserting a new item, removing an item, etc.
* @param event. The custom event. Custom event was created with: event.detail( item, type)
* item - The Splitter item that was the target of a change.
* type - A description of the operation that has cause the change.
*/
onStateChange: EventEmitter<CustomEvent> = new EventEmitter();
/** @description This event is triggered when the selection is changed.
* @param event. The custom event. Custom event was created with: event.detail( oldSelectedIndex, selectedIndex)
* oldSelectedIndex - The Splitter item that was previously selected.
* selectedIndex - The Splitter item that is currently selected.
*/
onChange: EventEmitter<CustomEvent> = new EventEmitter();
/** @description This event is triggered when a the context menu is about to be closed. The operation can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. */
onClosing: EventEmitter<CustomEvent> = new EventEmitter();
/** @description This event is triggered when a the context menu is closed.
* @param event. The custom event. */
onClose: EventEmitter<CustomEvent> = new EventEmitter();
/** @description This event is triggered when a the context menu is about to be opened. The operation can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. */
onOpening: EventEmitter<CustomEvent> = new EventEmitter();
/** @description This event is triggered when a the context menu is opened.
* @param event. The custom event. */
onOpen: EventEmitter<CustomEvent> = new EventEmitter();
/** @description This event is triggered when an option from the context menu has been clicked.
* @param event. The custom event. Custom event was created with: event.detail( target, item, label, value)
* target - The Splitter item that was the target of the context menu opening.
* item - The Context menu item that was clicked.
* label - The label of the context menu that was clicked.
* value - The value of the context menu that was clicked.
*/
onMenuItemClick: EventEmitter<CustomEvent> = new EventEmitter();
/** @description Returns a Layout item according to the index that is passed.
* @param {number | string} index. The index of an item.
*/
public getItem(index: number | string): void {
if (this.nativeElement.isRendered) {
this.nativeElement.getItem(index);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.getItem(index);
});
}
}
/** @description Refreshes the Layout
*/
public refresh(): void {
if (this.nativeElement.isRendered) {
this.nativeElement.refresh();
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.refresh();
});
}
}
/** @description Inserts a new item inside the Layout.
* @param {any} type. The index of an item to be removed or an instance of JQX.SplitterItem.
* @param {string | undefined} position?. A string that represents the position where the new item will be created.
*/
public createLayoutItem(type: any, position?: string | undefined): void {
if (this.nativeElement.isRendered) {
this.nativeElement.createLayoutItem(type, position);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.createLayoutItem(type, position);
});
}
}
/** @description Moves all children from one item to another.
* @param {any} oldItem. The source item that will have it's content removed.
* @param {any} newItem. The host item that will have it's content replaced.
*/
public moveChildren(oldItem: any, newItem: any): void {
if (this.nativeElement.isRendered) {
this.nativeElement.moveChildren(oldItem, newItem);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.moveChildren(oldItem, newItem);
});
}
}
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['resizeHandler'] = (event: CustomEvent) => { that.onResize.emit(event); }
that.nativeElement.addEventListener('resize', that.eventHandlers['resizeHandler']);
that.eventHandlers['stateChangeHandler'] = (event: CustomEvent) => { that.onStateChange.emit(event); }
that.nativeElement.addEventListener('stateChange', that.eventHandlers['stateChangeHandler']);
that.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['closingHandler'] = (event: CustomEvent) => { that.onClosing.emit(event); }
that.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);
that.eventHandlers['closeHandler'] = (event: CustomEvent) => { that.onClose.emit(event); }
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['openingHandler'] = (event: CustomEvent) => { that.onOpening.emit(event); }
that.nativeElement.addEventListener('opening', that.eventHandlers['openingHandler']);
that.eventHandlers['openHandler'] = (event: CustomEvent) => { that.onOpen.emit(event); }
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
that.eventHandlers['menuItemClickHandler'] = (event: CustomEvent) => { that.onMenuItemClick.emit(event); }
that.nativeElement.addEventListener('menuItemClick', that.eventHandlers['menuItemClickHandler']);
}
/** @description Remove event listeners. */
private unlisten(): void {
const that = this;
if (that.eventHandlers['resizeHandler']) {
that.nativeElement.removeEventListener('resize', that.eventHandlers['resizeHandler']);
}
if (that.eventHandlers['stateChangeHandler']) {
that.nativeElement.removeEventListener('stateChange', that.eventHandlers['stateChangeHandler']);
}
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['closingHandler']) {
that.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['openingHandler']) {
that.nativeElement.removeEventListener('opening', that.eventHandlers['openingHandler']);
}
if (that.eventHandlers['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
if (that.eventHandlers['menuItemClickHandler']) {
that.nativeElement.removeEventListener('menuItemClick', that.eventHandlers['menuItemClickHandler']);
}
}
}