9.1.0

Author: bmarkov

bootstrap/source/smart.element.js

@@ -1,12 +1,12 @@
 
-/* Smart UI v9.0.0 (2020-Dec) 
+/* Smart UI v9.1.1 (2021-Feb) 
 Copyright (c) 2011-2021 jQWidgets. 
 License: https://htmlelements.com/license/ */ //
 
 (function () {
 
 
-    const Version = '8.0.1';
+    const Version = '9.1.0';
     const templates = [];
 
     let namespace = 'Smart';
@@ -533,6 +533,22 @@ License: https://htmlelements.com/license/ */ //
     class Core {
         static get isMobile() {
             const isMobile = /(iphone|ipod|ipad|android|iemobile|blackberry|bada)/.test(window.navigator.userAgent.toLowerCase());
+            const iOS = () => {
+                return [
+                  'iPad Simulator',
+                  'iPhone Simulator',
+                  'iPod Simulator',
+                  'iPad',
+                  'iPhone',
+                  'iPod'
+                ].includes(navigator.platform)
+                // iPad on iOS 13 detection
+                || (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+              }
+
+            if (!isMobile) {
+                return iOS();
+            }
 
             return isMobile;
         }
@@ -771,6 +787,14 @@ License: https://htmlelements.com/license/ */ //
         static observeElement(element) {
             const that = element;
 
+            if (window.Smart.Mode === 'test') {
+                if (StyleObserver.interval) {
+                    clearInterval(StyleObserver.interval);
+                }
+
+                return;
+            }
+
             let computedStyle = element._computedStyle || that.hasStyleObserver !== 'resize' ? document.defaultView.getComputedStyle(that, null) : {
             };
 
@@ -1708,14 +1732,15 @@ License: https://htmlelements.com/license/ */ //
                     event.originalEvent.stopPropagation();
                 }
 
-                hScrollInfo.visible = horizontalScrollBar.offsetHeight > 0;
-                vScrollInfo.visible = verticalScrollBar.offsetWidth > 0;
+                hScrollInfo.visible = that.scrollWidth > 0;
+                vScrollInfo.visible = that.scrollHeight > 0;
 
                 if (!pointerCaptured || (!hScrollInfo.visible && !vScrollInfo.visible)) {
                     return;
                 }
 
-                const touchScrollRatio = that.container.touchScrollRatio;
+                const touchScrollRatio = that.container.touchScrollRatio,
+                    container = that.container;
                 let vScrollRatio, hScrollRatio;
 
                 if (touchScrollRatio) {
@@ -1724,15 +1749,15 @@ License: https://htmlelements.com/license/ */ //
                         hScrollRatio = -touchScrollRatio;
                     }
                     else if (typeof touchScrollRatio === 'function') {
-                        vScrollRatio = touchScrollRatio(vScrollInfo.max, vScrollInfo.scrollBar.offsetHeight);
-                        hScrollRatio = touchScrollRatio(hScrollInfo.max, hScrollInfo.scrollBar.offsetWidth);
+                        vScrollRatio = touchScrollRatio(vScrollInfo.max, container.offsetHeight);
+                        hScrollRatio = touchScrollRatio(hScrollInfo.max, container.offsetWidth);
                     }
                 }
 
-                vScrollInfo.ratio = vScrollRatio || (-vScrollInfo.max / vScrollInfo.scrollBar.offsetHeight);
+                vScrollInfo.ratio = vScrollRatio || (-vScrollInfo.max / container.offsetHeight);
                 vScrollInfo.delta = (event.clientY - vScrollInfo.pointerPosition) * vScrollInfo.ratio;
 
-                hScrollInfo.ratio = hScrollRatio || (-hScrollInfo.max / hScrollInfo.scrollBar.offsetWidth);
+                hScrollInfo.ratio = hScrollRatio || (-hScrollInfo.max / container.offsetWidth);
                 hScrollInfo.delta = (event.clientX - hScrollInfo.pointerPosition) * hScrollInfo.ratio;
 
                 let dragged = 'value';
@@ -3937,9 +3962,9 @@ License: https://htmlelements.com/license/ */ //
             console.log('****************************************************************************************************************');
             console.log('****************************************************************************************************************');
             console.log('****************************************************************************************************************');
-            console.log('*Smart HTML Elements License Key Not Found.');
-            console.log('*This is an evaluation only version, it is not licensed for development projects intended for production.');
-            console.log('*if you want to hide the watermark, please send an email to: sales@htmlelements.com for a license.');
+            console.log('*jQWidgets License Key Not Found.');
+            console.log('*This is an EVALUATION only Version, it is NOT Licensed for software projects intended for PRODUCTION.');
+            console.log('*if you want to hide this message, please send an email to: sales@jqwidgets.com for a license.');
             console.log('****************************************************************************************************************');
             console.log('****************************************************************************************************************');
             console.log('****************************************************************************************************************');
@@ -4689,8 +4714,8 @@ License: https://htmlelements.com/license/ */ //
             }
 
             if (data && data[that._selector]) {
-				delete data[that._selector];
-			}
+                delete data[that._selector];
+            }
         }
 
         /** Called when a property value is changed. */
@@ -5083,6 +5108,10 @@ License: https://htmlelements.com/license/ */ //
             else {
                 const modules = proto.modules;
 
+                if (!modules) {
+                    return;
+                }
+
                 for (let i = 0; i < modules.length; i += 1) {
                     const module = modules[i];
                     const proto = module.prototype;
@@ -7715,6 +7744,7 @@ License: https://htmlelements.com/license/ */ //
         RenderMode: userDefinedSettings.RenderMode || 'auto',
         Render: render,
         Data: data,
+        Mode: userDefinedSettings.Mode || 'production',
         License: 'Evaluation'
     });
 
@@ -7986,11 +8016,11 @@ License: https://htmlelements.com/license/ */ //
                 return;
             }
 
-            const computedVerticalScrollBarVisibility = that.computedVerticalScrollBarVisibility,
+            const computedVerticalScrollBarVisibility = that.scrollHeight > 0,
+                computedHorizontalScrollBarVisibility = that.scrollWidth > 0,
                 coords = that._touchCoords;
 
-            if (!that.computedHorizontalScrollBarVisibility && !computedVerticalScrollBarVisibility ||
-                !coords) {
+            if (!computedVerticalScrollBarVisibility && !computedHorizontalScrollBarVisibility || !coords) {
                 return;
             }
 

framework/smart.element.js

@@ -1,2 +1,2 @@
-{"name":"smart-webcomponents","version": "9.0.0",
+{"name":"smart-webcomponents","version": "9.1.1",
    "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"}

package.json

@@ -42,6 +42,15 @@ export class AccordionComponent extends BaseElement implements OnInit, AfterView
 		this.nativeElement ? this.nativeElement.animation = value : undefined;
 	}
 
+	/** @description Determines the data source that will be loaded to the Accordion. */
+	@Input()
+	get dataSource(): any {
+		return this.nativeElement ? this.nativeElement.dataSource : undefined;
+	}
+	set dataSource(value: any) {
+		this.nativeElement ? this.nativeElement.dataSource = value : undefined;
+	}
+
 	/** @description Enables or disables the accordion. Disabled elements can not be interacted with. */
 	@Input()
 	get disabled(): boolean {

source/angular/accordion/smart.accordion.ts

@@ -147,10 +147,26 @@ export class ToggleButtonComponent extends BaseElement implements OnInit, AfterV
 		this.nativeElement ? this.nativeElement.value = value : undefined;
 	}
 
-	/** @description This event is triggered when the state of the element is changed.
-	*  @param event. The custom event. 	*/
+	/** @description This event is triggered when the widget is checked/unchecked.
+	*  @param event. The custom event. 	Custom event was created with: event.detail(	value, 	oldValue, 	changeType)
+	*   value - A boolean value indicating the new state of the button ( checked or not ).
+	*   oldValue - A boolean value indicating the previous state of the button ( checked or not ).
+	*   changeType - A string flag indicating whether the change event was triggered via API or an event.
+	*/
 	@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();
 
+	/** @description This event is triggered when the widget is checked.
+	*  @param event. The custom event. 	Custom event was created with: event.detail(	changeType)
+	*   changeType - A string flag indicating whether the change event was triggered via API or an event.
+	*/
+	@Output() onCheckValue: EventEmitter<CustomEvent> = new EventEmitter();
+
+	/** @description This event is triggered when the widget is unchecked.
+	*  @param event. The custom event. 	Custom event was created with: event.detail(	changeType)
+	*   changeType - A string flag indicating whether the change event was triggered via API or an event.
+	*/
+	@Output() onUncheckValue: EventEmitter<CustomEvent> = new EventEmitter();
+
 
 	get isRendered(): boolean {
 		return this.nativeElement ? this.nativeElement.isRendered : false;
@@ -190,6 +206,12 @@ export class ToggleButtonComponent extends BaseElement implements OnInit, AfterV
 		that.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }
 		that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
 
+		that.eventHandlers['checkValueHandler'] = (event: CustomEvent) => { that.onCheckValue.emit(event); }
+		that.nativeElement.addEventListener('checkValue', that.eventHandlers['checkValueHandler']);
+
+		that.eventHandlers['uncheckValueHandler'] = (event: CustomEvent) => { that.onUncheckValue.emit(event); }
+		that.nativeElement.addEventListener('uncheckValue', that.eventHandlers['uncheckValueHandler']);
+
 	}
 
 	/** @description Remove event listeners. */
@@ -199,5 +221,13 @@ export class ToggleButtonComponent extends BaseElement implements OnInit, AfterV
 			that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
 		}
 
+		if (that.eventHandlers['checkValueHandler']) {
+			that.nativeElement.removeEventListener('checkValue', that.eventHandlers['checkValueHandler']);
+		}
+
+		if (that.eventHandlers['uncheckValueHandler']) {
+			that.nativeElement.removeEventListener('uncheckValue', that.eventHandlers['uncheckValueHandler']);
+		}
+
 	}
 }

source/angular/button/smart.togglebutton.ts

@@ -135,19 +135,19 @@ export class CalendarComponent extends BaseElement implements OnInit, AfterViewI
 
 	/** @description Determines the height of the month's drop down inside the Calendar. */
 	@Input()
-	get dropDownHeight(): string {
+	get dropDownHeight(): string | number {
 		return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
 	}
-	set dropDownHeight(value: string) {
+	set dropDownHeight(value: string | number) {
 		this.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;
 	}
 
 	/** @description Determines the width of the month's drop down inside the Calendar. */
 	@Input()
-	get dropDownWidth(): string {
+	get dropDownWidth(): string | number {
 		return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
 	}
-	set dropDownWidth(value: string) {
+	set dropDownWidth(value: string | number) {
 		this.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;
 	}
 
@@ -243,10 +243,10 @@ export class CalendarComponent extends BaseElement implements OnInit, AfterViewI
 
 	/** @description Determines the max date for the Calendar. Accepts date objects and valid date string formats. */
 	@Input()
-	get max(): any {
+	get max(): string | Date {
 		return this.nativeElement ? this.nativeElement.max : undefined;
 	}
-	set max(value: any) {
+	set max(value: string | Date) {
 		this.nativeElement ? this.nativeElement.max = value : undefined;
 	}
 
@@ -261,10 +261,10 @@ export class CalendarComponent extends BaseElement implements OnInit, AfterViewI
 
 	/** @description Determines the min date for the Calendar. Accepts date objects and valid date string formats. */
 	@Input()
-	get min(): any {
+	get min(): string | Date {
 		return this.nativeElement ? this.nativeElement.min : undefined;
 	}
-	set min(value: any) {
+	set min(value: string | Date) {
 		this.nativeElement ? this.nativeElement.min = value : undefined;
 	}
 
@@ -306,10 +306,10 @@ export class CalendarComponent extends BaseElement implements OnInit, AfterViewI
 
 	/** @description Sets restricted dates. Restricted dates are dates that cannot be selected/hovered/focused. They are visualy styled as restricted. The dates can be javascript date objects or strings representing a valid date. */
 	@Input()
-	get restrictedDates(): string[] {
+	get restrictedDates(): string[] | Date[] {
 		return this.nativeElement ? this.nativeElement.restrictedDates : undefined;
 	}
-	set restrictedDates(value: string[]) {
+	set restrictedDates(value: string[] | Date[]) {
 		this.nativeElement ? this.nativeElement.restrictedDates = value : undefined;
 	}
 

source/angular/calendar/smart.calendar.ts

@@ -66,7 +66,7 @@ export class CardComponent extends BaseElement implements OnInit, AfterViewInit,
 		this.nativeElement ? this.nativeElement.disabled = value : undefined;
 	}
 
-	/** @description Sets custom card template. The template can be the id of an HTMLTemplate element inside the DOM or it's reference. The content of the template may hold one or many property placeholders in format {{property}}. These placeholders will be replaced with the values of the corresponding properties defined in the dataSource object. */
+	/** @description Sets custom card template. The template can be the ID of an HTMLTemplate element inside the DOM or it's reference. The content of the template may hold one or many property placeholders in format {{property}}. These placeholders will be replaced with the values of the corresponding properties defined in the dataSource object. When setting the property to template ID, the property type is 'string'. */
 	@Input()
 	get itemTemplate(): any {
 		return this.nativeElement ? this.nativeElement.itemTemplate : undefined;

source/angular/card/smart.card.ts

@@ -41,10 +41,10 @@ export class CarouselComponent extends BaseElement implements OnInit, AfterViewI
 
 	/** @description The items switch automatically if set to true or to a custom number(representing the timeout in milliseconds). This property works if slideShow property is enabled. */
 	@Input()
-	get autoPlay(): any {
+	get autoPlay(): boolean {
 		return this.nativeElement ? this.nativeElement.autoPlay : undefined;
 	}
-	set autoPlay(value: any) {
+	set autoPlay(value: boolean) {
 		this.nativeElement ? this.nativeElement.autoPlay = value : undefined;
 	}