smart-webcomponents 18.0.0 → 18.0.1

package/source/angular/sortable/smart.element.ts

@@ -0,0 +1,104 @@
+
+declare global {
+    interface Window {
+        Smart: any;
+}
+}
+
+
+import { ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { ElementRenderMode } from './../index';
+
+export class BaseElement {
+    constructor(ref: ElementRef) {
+        const that = this;
+        this.nativeElement = ref.nativeElement as any;
+
+        that.nativeElement.onAttached = () => {
+            that.onAttach.emit(that.nativeElement);
+        }
+
+        that.nativeElement.onDetached = () => {
+            that.onDetach.emit(that.nativeElement);
+        }
+    }
+
+    @Output() onCreate: EventEmitter<any> = new EventEmitter();
+    @Output() onReady: EventEmitter<any> = new EventEmitter();
+    @Output() onAttach: EventEmitter<any> = new EventEmitter();
+    @Output() onDetach: EventEmitter<any> = new EventEmitter();
+
+    public nativeElement: any;
+
+    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {
+        this.nativeElement.addEventListener(type, listener, options);
+	}
+
+	public removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {
+		this.nativeElement.removeEventListener(type, listener, options);
+	}
+
+	public dispatchEvent(event: Event): boolean {
+		return this.nativeElement.dispatchEvent(event);
+	}
+
+	public blur(): void {
+		this.nativeElement.blur();
+	}
+
+	public click(): void {
+		this.nativeElement.click();
+	}
+
+	public focus(options?: FocusOptions): void {
+		this.nativeElement.focus(options);
+	}
+
+/** @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 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;
+	}
+}
+
+export const Smart: any = window.Smart;
+

package/source/angular/sortable/smart.sortable.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { SortableComponent } from './smart.sortable';
+import { CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
+
+@NgModule({
+    declarations: [SortableComponent],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	exports: [SortableComponent]
+})
+
+export class SortableModule { }

package/source/angular/sortable/smart.sortable.ts

@@ -0,0 +1,217 @@
+import { Sortable } from './../index';
+import { Animation, SortableDragMode, SortableHandlePosition, SortableHandleVisibility, Orientation, 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, SortableDragMode, SortableHandlePosition, SortableHandleVisibility, Orientation, ElementRenderMode} from './../index';
+export { Smart } from './smart.element';
+export { Sortable } from './../index';
+
+
+@Directive({
+	exportAs: 'smart-sortable',	selector: 'smart-sortable, [smart-sortable]'
+})
+
+export class SortableComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+	constructor(ref: ElementRef<Sortable>) {
+		super(ref);
+		this.nativeElement = ref.nativeElement as Sortable;
+	}
+
+	private eventHandlers: any[] = [];
+
+	public declare nativeElement: Sortable;
+	/** @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 = <Sortable>document.createElement('smart-sortable');
+		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 Enables or disables sorting. */
+	@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 way a sortable item can be dragged - by dragging the item itself ('item') or by dragging a handle that appears next to the item ('handle'). */
+	@Input()
+	get dragMode(): SortableDragMode | string {
+		return this.nativeElement ? this.nativeElement.dragMode : undefined;
+	}
+	set dragMode(value: SortableDragMode | string) {
+		this.nativeElement ? this.nativeElement.dragMode = value : undefined;
+	}
+
+	/** @description Sets or gets the the position of the drag handle relative to its respective sortable item. Applicable only when dragMode is 'handle'. */
+	@Input()
+	get handlePosition(): SortableHandlePosition | string {
+		return this.nativeElement ? this.nativeElement.handlePosition : undefined;
+	}
+	set handlePosition(value: SortableHandlePosition | string) {
+		this.nativeElement ? this.nativeElement.handlePosition = value : undefined;
+	}
+
+	/** @description Sets or gets whether a sortable item's drag handle is always visible or is shown when the item is hovered. Applicable only when dragMode is 'handle'. */
+	@Input()
+	get handleVisibility(): SortableHandleVisibility | string {
+		return this.nativeElement ? this.nativeElement.handleVisibility : undefined;
+	}
+	set handleVisibility(value: SortableHandleVisibility | string) {
+		this.nativeElement ? this.nativeElement.handleVisibility = value : undefined;
+	}
+
+	/** @description Sets or gets a selector to determine the sortable items by. By default, sortable items are all children of the smart-sortable custom element. */
+	@Input()
+	get items(): string | null {
+		return this.nativeElement ? this.nativeElement.items : undefined;
+	}
+	set items(value: string | null) {
+		this.nativeElement ? this.nativeElement.items = 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, related to 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 direction sortable items are stacked and can be dragged. */
+	@Input()
+	get mode(): Orientation | string {
+		return this.nativeElement ? this.nativeElement.mode : undefined;
+	}
+	set mode(value: Orientation | string) {
+		this.nativeElement ? this.nativeElement.mode = 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 This event is triggered when sortable items have been reordered.
+	*  @param event. The custom event. 	*/
+	@Output() onDragEnd: EventEmitter<CustomEvent> = new EventEmitter();
+
+	/** @description Moves a sortable item from one index to another. 
+	* @param {number} fromIndex?. The original index of the item.
+	* @param {number} toIndex?. The index to move the item to.
+	*/
+    public move(fromIndex?: number, toIndex?: number): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.move(fromIndex, toIndex);
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.move(fromIndex, toIndex);
+            });
+        }
+    }
+
+	/** @description Re-evaluates the items that can be sorted. Useful after items have been added to or removed from the custom element. 
+	*/
+    public updateItems(): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.updateItems();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.updateItems();
+            });
+        }
+    }
+
+
+	get isRendered(): boolean {
+		return this.nativeElement ? this.nativeElement.isRendered : false;
+	}
+
+	ngOnInit() {
+	}
+
+    ngAfterViewInit() {
+      const that = this;
+
+      that.onCreate.emit(that.nativeElement);
+
+		Smart.Render();
+
+		this.nativeElement.classList.add('smart-angular');
+
+		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['dragEndHandler'] = (event: CustomEvent) => { that.onDragEnd.emit(event); }
+		that.nativeElement.addEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
+
+	}
+
+	/** @description Remove event listeners. */
+	private unlisten(): void {
+        const that = this;
+		if (that.eventHandlers['dragEndHandler']) {
+			that.nativeElement.removeEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
+		}
+
+	}
+}

package/source/angular/sortpanel/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/source/angular/sortpanel/public_api.ts

@@ -0,0 +1,3 @@
+
+export * from './smart.sortpanel';
+export * from './smart.sortpanel.module';

package/source/angular/sortpanel/smart.element.ts

@@ -0,0 +1,104 @@
+
+declare global {
+    interface Window {
+        Smart: any;
+}
+}
+
+
+import { ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { ElementRenderMode } from './../index';
+
+export class BaseElement {
+    constructor(ref: ElementRef) {
+        const that = this;
+        this.nativeElement = ref.nativeElement as any;
+
+        that.nativeElement.onAttached = () => {
+            that.onAttach.emit(that.nativeElement);
+        }
+
+        that.nativeElement.onDetached = () => {
+            that.onDetach.emit(that.nativeElement);
+        }
+    }
+
+    @Output() onCreate: EventEmitter<any> = new EventEmitter();
+    @Output() onReady: EventEmitter<any> = new EventEmitter();
+    @Output() onAttach: EventEmitter<any> = new EventEmitter();
+    @Output() onDetach: EventEmitter<any> = new EventEmitter();
+
+    public nativeElement: any;
+
+    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {
+        this.nativeElement.addEventListener(type, listener, options);
+	}
+
+	public removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {
+		this.nativeElement.removeEventListener(type, listener, options);
+	}
+
+	public dispatchEvent(event: Event): boolean {
+		return this.nativeElement.dispatchEvent(event);
+	}
+
+	public blur(): void {
+		this.nativeElement.blur();
+	}
+
+	public click(): void {
+		this.nativeElement.click();
+	}
+
+	public focus(options?: FocusOptions): void {
+		this.nativeElement.focus(options);
+	}
+
+/** @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 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;
+	}
+}
+
+export const Smart: any = window.Smart;
+

package/source/angular/sortpanel/smart.sortpanel.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { SortPanelComponent } from './smart.sortpanel';
+import { CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
+
+@NgModule({
+    declarations: [SortPanelComponent],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	exports: [SortPanelComponent]
+})
+
+export class SortPanelModule { }

package/source/angular/sortpanel/smart.sortpanel.ts

@@ -0,0 +1,180 @@
+import { SortPanel } from './../index';
+import { Animation, SortPanelCloseButtonPosition, 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, SortPanelCloseButtonPosition, ElementRenderMode} from './../index';
+export { Smart } from './smart.element';
+export { SortPanel } from './../index';
+
+
+@Directive({
+	exportAs: 'smart-sort-panel',	selector: 'smart-sort-panel, [smart-sort-panel]'
+})
+
+export class SortPanelComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+	constructor(ref: ElementRef<SortPanel>) {
+		super(ref);
+		this.nativeElement = ref.nativeElement as SortPanel;
+	}
+
+	private eventHandlers: any[] = [];
+
+	public declare nativeElement: SortPanel;
+	/** @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 = <SortPanel>document.createElement('smart-sort-panel');
+		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 Sets or gets the the position of the close button of sort panel items. */
+	@Input()
+	get closeButtonPosition(): SortPanelCloseButtonPosition | string {
+		return this.nativeElement ? this.nativeElement.closeButtonPosition : undefined;
+	}
+	set closeButtonPosition(value: SortPanelCloseButtonPosition | string) {
+		this.nativeElement ? this.nativeElement.closeButtonPosition = value : undefined;
+	}
+
+	/** @description Determines the data source that will be loaded to the sort panel.Each member of the dataSource array is an object with the following fields:dataField - the dataField of the column to be sorted.dataType - the data type of the column to be sorted.label - the column label to be displayed in the column selection input.icon - a specific class to be applied to the respective item in the column selection input.sortDirection - the sort direction to be applied. Possible values: 'ascending' and 'descending'.sortIndex - the sort order of columns. If this value is -1, the column will not be initially sorted. */
+	@Input()
+	get dataSource(): {label: string, dataField: string, dataType: string, sortDirection: string, sortIndex: number}[] {
+		return this.nativeElement ? this.nativeElement.dataSource : undefined;
+	}
+	set dataSource(value: {label: string, dataField: string, dataType: string, sortDirection: string, sortIndex: number}[]) {
+		this.nativeElement ? this.nativeElement.dataSource = value : undefined;
+	}
+
+	/** @description Enables or disables the sort panel. */
+	@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 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, related to 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 If the element is readonly, users cannot interact with it. */
+	@Input()
+	get readonly(): boolean {
+		return this.nativeElement ? this.nativeElement.readonly : undefined;
+	}
+	set readonly(value: boolean) {
+		this.nativeElement ? this.nativeElement.readonly = 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 This event is triggered when the "Apply" button is clicked.
+	*  @param event. The custom event. 	*/
+	@Output() onApply: EventEmitter<CustomEvent> = new EventEmitter();
+
+	/** @description This event is triggered when the "Cancel" button is clicked.
+	*  @param event. The custom event. 	*/
+	@Output() onCancel: EventEmitter<CustomEvent> = new EventEmitter();
+
+
+	get isRendered(): boolean {
+		return this.nativeElement ? this.nativeElement.isRendered : false;
+	}
+
+	ngOnInit() {
+	}
+
+    ngAfterViewInit() {
+      const that = this;
+
+      that.onCreate.emit(that.nativeElement);
+
+		Smart.Render();
+
+		this.nativeElement.classList.add('smart-angular');
+
+		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['applyHandler'] = (event: CustomEvent) => { that.onApply.emit(event); }
+		that.nativeElement.addEventListener('apply', that.eventHandlers['applyHandler']);
+
+		that.eventHandlers['cancelHandler'] = (event: CustomEvent) => { that.onCancel.emit(event); }
+		that.nativeElement.addEventListener('cancel', that.eventHandlers['cancelHandler']);
+
+	}
+
+	/** @description Remove event listeners. */
+	private unlisten(): void {
+        const that = this;
+		if (that.eventHandlers['applyHandler']) {
+			that.nativeElement.removeEventListener('apply', that.eventHandlers['applyHandler']);
+		}
+
+		if (that.eventHandlers['cancelHandler']) {
+			that.nativeElement.removeEventListener('cancel', that.eventHandlers['cancelHandler']);
+		}
+
+	}
+}

package/source/angular/splitter/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/source/angular/splitter/public_api.ts

@@ -0,0 +1,7 @@
+
+export * from './smart.splitter';
+export * from './smart.splitter.module';
+
+export * from './smart.splitteritem';
+
+export * from './smart.splitterbar';