smart-webcomponents 15.0.1 → 15.0.11

package/source/angular/form/smart.form.ts

@@ -0,0 +1,288 @@
+import { Form } from './../index';
+import { ControlControlType, ControlLabelPosition, ControlViewMode, FormLabelPosition, Control, 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 { ControlControlType, ControlLabelPosition, ControlViewMode, FormLabelPosition, Control, ElementRenderMode} from './../index';
+export { Smart } from './smart.element';
+export { Form } from './../index';
+
+
+import { FormControlComponent } from './smart.formcontrol';
+
+import { FormGroupComponent } from './smart.formgroup';
+
+@Directive({
+	exportAs: 'smart-form',	selector: 'smart-form, [smart-form]'
+})
+
+export class FormComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+
+	constructor(ref: ElementRef<Form>) {
+		super(ref);
+		this.nativeElement = ref.nativeElement as Form;
+	}
+
+	private eventHandlers: any[] = [];
+
+	public nativeElement: Form;
+	/** @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 = <Form>document.createElement('smart-form');
+		for (let propertyName in properties) { 
+ 			this.nativeElement[propertyName] = properties[propertyName];
+		}
+		return this.nativeElement;
+	}
+	/** @description Sets or gets the form columns. */
+	@Input()
+	get columns(): number {
+		return this.nativeElement ? this.nativeElement.columns : undefined;
+	}
+	set columns(value: number) {
+		this.nativeElement ? this.nativeElement.columns = value : undefined;
+	}
+
+	/** @description Sets or gets the form controls. */
+	@Input()
+	get controls(): Control[] {
+		return this.nativeElement ? this.nativeElement.controls : undefined;
+	}
+	set controls(value: Control[]) {
+		this.nativeElement ? this.nativeElement.controls = value : undefined;
+	}
+
+	/** @description Callback function for handling status changes. The status could be  'disabled', 'invalid', 'pending', 'valid'. */
+	@Input()
+	get onStatusChanges(): any {
+		return this.nativeElement ? this.nativeElement.onStatusChanges : undefined;
+	}
+	set onStatusChanges(value: any) {
+		this.nativeElement ? this.nativeElement.onStatusChanges = value : undefined;
+	}
+
+	/** @description Callback function for handling value changes */
+	@Input()
+	get onValueChanges(): any {
+		return this.nativeElement ? this.nativeElement.onValueChanges : undefined;
+	}
+	set onValueChanges(value: any) {
+		this.nativeElement ? this.nativeElement.onValueChanges = value : undefined;
+	}
+
+	/** @description Sets or Gets the labels position. */
+	@Input()
+	get labelPosition(): FormLabelPosition | string {
+		return this.nativeElement ? this.nativeElement.labelPosition : undefined;
+	}
+	set labelPosition(value: FormLabelPosition | string) {
+		this.nativeElement ? this.nativeElement.labelPosition = value : undefined;
+	}
+
+	/** @description Makes the form readonly. */
+	@Input()
+	get readonly(): boolean {
+		return this.nativeElement ? this.nativeElement.readonly : undefined;
+	}
+	set readonly(value: boolean) {
+		this.nativeElement ? this.nativeElement.readonly = value : undefined;
+	}
+
+	/** @description Shows / hides the colon after the labels. */
+	@Input()
+	get showColonAfterLabel(): boolean {
+		return this.nativeElement ? this.nativeElement.showColonAfterLabel : undefined;
+	}
+	set showColonAfterLabel(value: boolean) {
+		this.nativeElement ? this.nativeElement.showColonAfterLabel = value : undefined;
+	}
+
+	/** @description Shows / hides validation summary. */
+	@Input()
+	get showSummary(): boolean {
+		return this.nativeElement ? this.nativeElement.showSummary : undefined;
+	}
+	set showSummary(value: boolean) {
+		this.nativeElement ? this.nativeElement.showSummary = value : undefined;
+	}
+
+	/** @description Gets the Form's state. Each member in the state has { dirty, untouched, disabled } properties. */
+	@Input()
+	get state(): any {
+		return this.nativeElement ? this.nativeElement.state : undefined;
+	}
+	set state(value: any) {
+		this.nativeElement ? this.nativeElement.state = value : undefined;
+	}
+
+	/** @description Gets or Sets the Form value. */
+	@Input()
+	get value(): any {
+		return this.nativeElement ? this.nativeElement.value : undefined;
+	}
+	set value(value: any) {
+		this.nativeElement ? this.nativeElement.value = value : undefined;
+	}
+
+	/** @description Automatically validates the form when it is created. */
+	@Input()
+	get validateOnLoad(): boolean {
+		return this.nativeElement ? this.nativeElement.validateOnLoad : undefined;
+	}
+	set validateOnLoad(value: boolean) {
+		this.nativeElement ? this.nativeElement.validateOnLoad = value : undefined;
+	}
+
+	/** @description Adds a control to the Form. 
+	* @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
+	*/
+    public addControl(controlOptions: any): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.addControl(controlOptions);
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.addControl(controlOptions);
+            });
+        }
+    }
+
+	/** @description Gets a control by its name(dataField). 
+	* @param {string} dataField. dataField of a FormControl or FormGroup
+	* @returns {Control}
+  */
+	public async getControl(dataField): Promise<any> {
+		const getResultOnRender = () => {
+            return new Promise(resolve => {
+                this.nativeElement.whenRendered(() => {
+                    const result = this.nativeElement.getControl(dataField);
+                    resolve(result)
+                });
+            });
+        };
+        const result = await getResultOnRender();
+
+        return result;
+    }
+
+	/** @description Inserts a control to the Form. 
+	* @param {number} index. Control insert index
+	* @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
+	*/
+    public insertControl(index: number, controlOptions: any): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.insertControl(index, controlOptions);
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.insertControl(index, controlOptions);
+            });
+        }
+    }
+
+	/** @description Remove a control from the Form. 
+	* @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
+	*/
+    public removeControl(controlOptions: any): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.removeControl(controlOptions);
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.removeControl(controlOptions);
+            });
+        }
+    }
+
+	/** @description Submits the form. 
+	* @param {any} submitOptions?. Sets the submit options object. The object may have the following properties: <em>async</em>, <em>action</em>, <em>target</em>, <em>method</em>. <em>async</em> determines whether the form will be submitted asynchronously. <em>action</em> determines the submit url, <em>method</em> sets whether the submit is through 'GET' or 'POST'. <em>target</em> determines the submit target.
+	*/
+    public submit(submitOptions?: any): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.submit(submitOptions);
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.submit(submitOptions);
+            });
+        }
+    }
+
+	/** @description Clears the form. 
+	*/
+    public reset(): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.reset();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.reset();
+            });
+        }
+    }
+
+	/** @description Validates the form. 
+	*/
+    public validate(): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.validate();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.validate();
+            });
+        }
+    }
+
+
+	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;
+	}
+
+	/** @description Remove event listeners. */
+	private unlisten(): void {
+        const that = this;
+	}
+}

package/source/angular/form/smart.formcontrol.ts

@@ -0,0 +1,336 @@
+import { FormControl } from './../index';
+import { FormControlAction, FormControlAlign, FormControlControlType, FormControlLabelPosition, FormControlViewMode, 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 { FormControlAction, FormControlAlign, FormControlControlType, FormControlLabelPosition, FormControlViewMode, ElementRenderMode} from './../index';
+export { Smart } from './smart.element';
+export { FormControl } from './../index';
+
+
+@Directive({
+	exportAs: 'smart-form-control',	selector: 'smart-form-control, [smart-form-control]'
+})
+
+export class FormControlComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+	constructor(ref: ElementRef<FormControl>) {
+		super(ref);
+		this.nativeElement = ref.nativeElement as FormControl;
+	}
+
+	private eventHandlers: any[] = [];
+
+	public nativeElement: FormControl;
+	/** @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 = <FormControl>document.createElement('smart-form-control');
+		for (let propertyName in properties) { 
+ 			this.nativeElement[propertyName] = properties[propertyName];
+		}
+		return this.nativeElement;
+	}
+	/** @description Gets or Sets the FormControl Action. This property is used when the 'controlType' is 'button' or 'submit' */
+	@Input()
+	get action(): FormControlAction | string {
+		return this.nativeElement ? this.nativeElement.action : undefined;
+	}
+	set action(value: FormControlAction | string) {
+		this.nativeElement ? this.nativeElement.action = value : undefined;
+	}
+
+	/** @description Sets or Gets the alignment of the FormControl */
+	@Input()
+	get align(): FormControlAlign | string {
+		return this.nativeElement ? this.nativeElement.align : undefined;
+	}
+	set align(value: FormControlAlign | string) {
+		this.nativeElement ? this.nativeElement.align = value : undefined;
+	}
+
+	/** @description HTML Content displayed after the Form Control */
+	@Input()
+	get appendHTML(): any {
+		return this.nativeElement ? this.nativeElement.appendHTML : undefined;
+	}
+	set appendHTML(value: any) {
+		this.nativeElement ? this.nativeElement.appendHTML = value : undefined;
+	}
+
+	/** @description JSON object with initialization properties of the UI component. Example: { dataSource: ['item 1', 'item 2', 'item 3'] } will set the dataSource property of the Form control. */
+	@Input()
+	get controlOptions(): any {
+		return this.nativeElement ? this.nativeElement.controlOptions : undefined;
+	}
+	set controlOptions(value: any) {
+		this.nativeElement ? this.nativeElement.controlOptions = value : undefined;
+	}
+
+	/** @description The type of the control. */
+	@Input()
+	get controlType(): FormControlControlType | string {
+		return this.nativeElement ? this.nativeElement.controlType : undefined;
+	}
+	set controlType(value: FormControlControlType | string) {
+		this.nativeElement ? this.nativeElement.controlType = value : undefined;
+	}
+
+	/** @description Sets the Form Group columns. */
+	@Input()
+	get columns(): number {
+		return this.nativeElement ? this.nativeElement.columns : undefined;
+	}
+	set columns(value: number) {
+		this.nativeElement ? this.nativeElement.columns = value : undefined;
+	}
+
+	/** @description Sets the Form control column span. */
+	@Input()
+	get columnSpan(): number {
+		return this.nativeElement ? this.nativeElement.columnSpan : undefined;
+	}
+	set columnSpan(value: number) {
+		this.nativeElement ? this.nativeElement.columnSpan = value : undefined;
+	}
+
+	/** @description Sets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value. */
+	@Input()
+	get dataField(): string {
+		return this.nativeElement ? this.nativeElement.dataField : undefined;
+	}
+	set dataField(value: string) {
+		this.nativeElement ? this.nativeElement.dataField = value : undefined;
+	}
+
+	/** @description Sets the Form control disabled mode. */
+	@Input()
+	get disabled(): boolean {
+		return this.nativeElement ? this.nativeElement.disabled : undefined;
+	}
+	set disabled(value: boolean) {
+		this.nativeElement ? this.nativeElement.disabled = value : undefined;
+	}
+
+	/** @description Gets whether the Form control is 'dirty' i.e its value is changed by the user. */
+	@Input()
+	get dirty(): boolean {
+		return this.nativeElement ? this.nativeElement.dirty : undefined;
+	}
+	set dirty(value: boolean) {
+		this.nativeElement ? this.nativeElement.dirty = value : undefined;
+	}
+
+	/** @description Gets or Sets the Form control's info icon's tooltip. */
+	@Input()
+	get info(): string {
+		return this.nativeElement ? this.nativeElement.info : undefined;
+	}
+	set info(value: string) {
+		this.nativeElement ? this.nativeElement.info = value : undefined;
+	}
+
+	/** @description Gets whether the Form control is invalid. */
+	@Input()
+	get invalid(): boolean {
+		return this.nativeElement ? this.nativeElement.invalid : undefined;
+	}
+	set invalid(value: boolean) {
+		this.nativeElement ? this.nativeElement.invalid = value : undefined;
+	}
+
+	/** @description Gets or Sets the Form control's label. */
+	@Input()
+	get label(): string {
+		return this.nativeElement ? this.nativeElement.label : undefined;
+	}
+	set label(value: string) {
+		this.nativeElement ? this.nativeElement.label = value : undefined;
+	}
+
+	/** @description Gets or Sets the Form control's label position. */
+	@Input()
+	get labelPosition(): FormControlLabelPosition | string {
+		return this.nativeElement ? this.nativeElement.labelPosition : undefined;
+	}
+	set labelPosition(value: FormControlLabelPosition | string) {
+		this.nativeElement ? this.nativeElement.labelPosition = value : undefined;
+	}
+
+	/** @description Gets or Sets the offset between the label and the control. */
+	@Input()
+	get labelOffset(): number {
+		return this.nativeElement ? this.nativeElement.labelOffset : undefined;
+	}
+	set labelOffset(value: number) {
+		this.nativeElement ? this.nativeElement.labelOffset = value : undefined;
+	}
+
+	/** @description FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set. */
+	@Input()
+	get labelAlign(): FormControlAlign | string {
+		return this.nativeElement ? this.nativeElement.labelAlign : undefined;
+	}
+	set labelAlign(value: FormControlAlign | string) {
+		this.nativeElement ? this.nativeElement.labelAlign = value : undefined;
+	}
+
+	/** @description FormGroup only(when controlType is set to 'group'). Gets or Sets the next button label. */
+	@Input()
+	get nextButtonLabel(): string {
+		return this.nativeElement ? this.nativeElement.nextButtonLabel : undefined;
+	}
+	set nextButtonLabel(value: string) {
+		this.nativeElement ? this.nativeElement.nextButtonLabel = value : undefined;
+	}
+
+	/** @description FormGroup only(when controlType is set to 'group'). Gets or Sets the back button label. */
+	@Input()
+	get backButtonLabel(): string {
+		return this.nativeElement ? this.nativeElement.backButtonLabel : undefined;
+	}
+	set backButtonLabel(value: string) {
+		this.nativeElement ? this.nativeElement.backButtonLabel = value : undefined;
+	}
+
+	/** @description Gets or Sets the FormControl placeholder. */
+	@Input()
+	get placeholder(): string {
+		return this.nativeElement ? this.nativeElement.placeholder : undefined;
+	}
+	set placeholder(value: string) {
+		this.nativeElement ? this.nativeElement.placeholder = value : undefined;
+	}
+
+	/** @description HTML Content displayed before the Form Control */
+	@Input()
+	get prependHTML(): any {
+		return this.nativeElement ? this.nativeElement.prependHTML : undefined;
+	}
+	set prependHTML(value: any) {
+		this.nativeElement ? this.nativeElement.prependHTML = value : undefined;
+	}
+
+	/** @description Gets or Sets the Form control readonly mode. */
+	@Input()
+	get readonly(): boolean {
+		return this.nativeElement ? this.nativeElement.readonly : undefined;
+	}
+	set readonly(value: boolean) {
+		this.nativeElement ? this.nativeElement.readonly = value : undefined;
+	}
+
+	/** @description Gets or Sets whether this field is required. */
+	@Input()
+	get required(): boolean {
+		return this.nativeElement ? this.nativeElement.required : undefined;
+	}
+	set required(value: boolean) {
+		this.nativeElement ? this.nativeElement.required = value : undefined;
+	}
+
+	/** @description Gets whether the Form control is not touched by the user. This flag is changed usually on blur, after the user interacted with the Form control */
+	@Input()
+	get untouched(): boolean {
+		return this.nativeElement ? this.nativeElement.untouched : undefined;
+	}
+	set untouched(value: boolean) {
+		this.nativeElement ? this.nativeElement.untouched = value : undefined;
+	}
+
+	/** @description Gets or Sets whether colon is displayed after the label. */
+	@Input()
+	get showColonAfterLabel(): boolean {
+		return this.nativeElement ? this.nativeElement.showColonAfterLabel : undefined;
+	}
+	set showColonAfterLabel(value: boolean) {
+		this.nativeElement ? this.nativeElement.showColonAfterLabel = value : undefined;
+	}
+
+	/** @description FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set. */
+	@Input()
+	get showButtons(): boolean {
+		return this.nativeElement ? this.nativeElement.showButtons : undefined;
+	}
+	set showButtons(value: boolean) {
+		this.nativeElement ? this.nativeElement.showButtons = value : undefined;
+	}
+
+	/** @description Sets or Gets the Form control or Form group value. */
+	@Input()
+	get value(): any {
+		return this.nativeElement ? this.nativeElement.value : undefined;
+	}
+	set value(value: any) {
+		this.nativeElement ? this.nativeElement.value = value : undefined;
+	}
+
+	/** @description Gets whether the Form control is valid. */
+	@Input()
+	get valid(): boolean {
+		return this.nativeElement ? this.nativeElement.valid : undefined;
+	}
+	set valid(value: boolean) {
+		this.nativeElement ? this.nativeElement.valid = value : undefined;
+	}
+
+	/** @description Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message. */
+	@Input()
+	get validationRules(): [] | null {
+		return this.nativeElement ? this.nativeElement.validationRules : undefined;
+	}
+	set validationRules(value: [] | null) {
+		this.nativeElement ? this.nativeElement.validationRules = value : undefined;
+	}
+
+	/** @description FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode. */
+	@Input()
+	get viewMode(): FormControlViewMode | string {
+		return this.nativeElement ? this.nativeElement.viewMode : undefined;
+	}
+	set viewMode(value: FormControlViewMode | string) {
+		this.nativeElement ? this.nativeElement.viewMode = 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');
+
+		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;
+	}
+
+	/** @description Remove event listeners. */
+	private unlisten(): void {
+        const that = this;
+	}
+}