8.0.0

framework/smart.element.js

@@ -1,12 +1,12 @@
 
-/* Smart UI v7.7.0 (2020-July) 
+/* Smart UI v8.0.0 (2020-Sep) 
 Copyright (c) 2011-2020 jQWidgets. 
 License: https://htmlelements.com/license/ */ //
 
 (function () {
 
 
-    const Version = '7.7.0';
+    const Version = '7.7.1';
     const templates = [];
 
     let namespace = 'Smart';
@@ -2175,6 +2175,9 @@ License: https://htmlelements.com/license/ */ //
                 if (eventType === 'wheel') {
                     that.element.addEventListener('wheel', that.handlers[eventType], that.isPassiveSupported ? { passive: false } : false);
                 }
+                else if (eventType === 'touchmove' || eventType === 'touchstart' || eventType === 'touchend') {
+                    that.element.addEventListener(eventType, that.handlers[eventType], that.isPassiveSupported ? { passive: false } : false);
+                }
                 else {
                     that.element.addEventListener(eventType, that.handlers[eventType], false);
                 }

package.json

@@ -1,2 +1,2 @@
-{"name":"smart-webcomponents","version": "7.7.0",
+{"name":"smart-webcomponents","version": "8.0.0",
    "description":"Web Components & Custom Elements for Professional Web Applications","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/HTMLElements/smart-elements.git"},"author":"https://htmlelements.com","bugs":{"url":"https://github.com/HTMLElements/smart-elements/issues"},"homepage":"https://github.com/HTMLElements/smart-elements#readme","keywords":["custom","element","bootstrap","chart","treegrid","gantt","gantt chart","query builder","colorpicker","colorpanel","chart web component","chart custom element","tables","table","docking layot","charting","datagridview","bootstrap grid","tabs","combobox","dropdownlist","listbox","input","password","ui components","user interface","components","bootstrap components","smart components","custom elements","grid web component","grid custom element","chart custom element","chart web component","javascript grid","javascript datagrid","javascript datatable","datatable","bootstrap datagrid","material datagrid","bootstrap datatable","bootstrap table","grid","grid web component","datagrid web component","data grid","datagrid bootstrap","bootstrap grid","carousel custom element","html carousel","material web components","webcomponents","material webcomponents", "gantt", "scheduler", "docking", "datagrid", "gridview", "webcomponent", "webcomponents", "web_components", "ui", "user interface", "front end", "bootsrap grid", "custom elements","material customelements"],"license":"ISC"}

source/angular/buttongroup/index.ts

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

source/angular/buttongroup/public_api.ts

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

source/angular/buttongroup/smart.buttongroup.module.ts

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

source/angular/buttongroup/smart.buttongroup.ts

@@ -0,0 +1,227 @@
+import { ButtonGroup } from './../index';
+import { Animation, ClickMode, 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, ClickMode, ElementRenderMode} from './../index';
+export { Smart } from './smart.element';
+export { ButtonGroup } from './../index';
+
+
+@Directive({
+	selector: 'smart-button-group, [smart-button-group]'
+})
+
+export class ButtonGroupComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+	constructor(ref: ElementRef<ButtonGroup>) {
+		super(ref);
+		this.nativeElement = ref.nativeElement as ButtonGroup;
+	}
+
+	private eventHandlers: any[] = [];
+
+	public nativeElement: ButtonGroup;
+	/** @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 = <ButtonGroup>document.createElement('smart-button-group');
+		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 {
+		return this.nativeElement ? this.nativeElement.animation : undefined;
+	}
+	set animation(value: Animation) {
+		this.nativeElement ? this.nativeElement.animation = value : undefined;
+	}
+
+	/** @description Determines the buttons configuration. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described. */
+	@Input()
+	get dataSource(): any {
+		return this.nativeElement ? this.nativeElement.dataSource : undefined;
+	}
+	set dataSource(value: any) {
+		this.nativeElement ? this.nativeElement.dataSource = value : undefined;
+	}
+
+	/** @description Determines the selection mode for the element. */
+	@Input()
+	get selectionMode(): ClickMode {
+		return this.nativeElement ? this.nativeElement.selectionMode : undefined;
+	}
+	set selectionMode(value: ClickMode) {
+		this.nativeElement ? this.nativeElement.selectionMode = value : undefined;
+	}
+
+	/** @description Enables or disables the element.  */
+	@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 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 name attribute for the element. Name is used when submiting HTML forms. */
+	@Input()
+	get name(): string {
+		return this.nativeElement ? this.nativeElement.name : undefined;
+	}
+	set name(value: string) {
+		this.nativeElement ? this.nativeElement.name = value : undefined;
+	}
+
+	/** @description If the custom element is readonly, it cannot be interacted with. */
+	@Input()
+	get readonly(): boolean {
+		return this.nativeElement ? this.nativeElement.readonly : undefined;
+	}
+	set readonly(value: boolean) {
+		this.nativeElement ? this.nativeElement.readonly = 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;
+	}
+
+	/** @description Sets or gets the button group's selected values. Represents an array of strings. */
+	@Input()
+	get selectedValues(): string[] {
+		return this.nativeElement ? this.nativeElement.selectedValues : undefined;
+	}
+	set selectedValues(value: string[]) {
+		this.nativeElement ? this.nativeElement.selectedValues = value : undefined;
+	}
+
+	/** @description Sets or gets the button group's selected indexes. Represents an array of numbers */
+	@Input()
+	get selectedIndexes(): number[] {
+		return this.nativeElement ? this.nativeElement.selectedIndexes : undefined;
+	}
+	set selectedIndexes(value: number[]) {
+		this.nativeElement ? this.nativeElement.selectedIndexes = 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 Change event is triggered when the selectedValues/selectedIndexes are changed.
+	*  @param event. The custom event. 	*/
+	@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();
+
+	/** @description Selects/Unselects an item inside the element. 
+	* @param {number | string} value. The index or the value of the item to be selected/unselected.
+	*/
+    public select(value: number | string): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.select(value);
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.select(value);
+            });
+        }
+    }
+
+
+	get isRendered(): boolean {
+		return this.nativeElement ? this.nativeElement.isRendered : false;
+	}
+
+	ngOnInit() {
+	}
+
+    ngAfterViewInit() {
+      const that = this;
+
+      that.onCreate.emit(that.nativeElement);
+
+		Smart.Render();
+
+		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['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }
+		that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
+
+	}
+
+	/** @description Remove event listeners. */
+	private unlisten(): void {
+        const that = this;
+		if (that.eventHandlers['changeHandler']) {
+			that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
+		}
+
+	}
+}

source/angular/buttongroup/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;
+