Smart UI 8.1.1

Author: bmarkov

README.md

@@ -1,5 +1,5 @@
 # Smart UI
-Web Components, Angular UI Components and React UI Components  for Professional Web Applications
+Web Components, Anguiar UI Components and React UI Components  for Professional Web Applications
 
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/collection/HTMLElements/smarthtmlelements-core)
 

bootstrap/source/smart.element.js

@@ -1,12 +1,12 @@
 
-/* Smart UI v8.0.0 (2020-Sep) 
+/* Smart UI v8.1.1 (2020-Nov) 
 Copyright (c) 2011-2020 jQWidgets. 
 License: https://htmlelements.com/license/ */ //
 
 (function () {
 
 
-    const Version = '7.7.1';
+    const Version = '8.0.1';
     const templates = [];
 
     let namespace = 'Smart';
@@ -943,9 +943,29 @@ License: https://htmlelements.com/license/ */ //
         listen(eventType) {
             const that = this;
 
-            if (eventType === 'resize') {
-                if (!that.target.resizeTrigger && that.target !== document && that.target !== window && that.target.hasResizeObserver !== false) {
+            if (eventType === 'resize' && that.target !== document && that.target !== window && that.target.hasResizeObserver !== false) {
+                if (Smart.Utilities.Core.Browser.Firefox) {
+                    if (!that.target.resizeObserver) {
+                        let firstCallPassed = false;
+                        const resizeObserver = new ResizeObserver(() => {
+                            if (!firstCallPassed) {
+                                firstCallPassed = true;
+                                return;
+                            }
+
+                            const resizeEvent = new CustomEvent('resize', {
+                                bubbles: false,
+                                cancelable: true
+                            });
+
+                            that.resize(resizeEvent);
+                        });
 
+                        resizeObserver.observe(that.target);
+                        that.target.resizeObserver = resizeObserver;
+                    }
+                }
+                else if (!that.target.resizeTrigger) {
                     const container = document.createElement('div');
                     container.className = 'smart-resize-trigger-container';
                     container.innerHTML =
@@ -1104,18 +1124,26 @@ License: https://htmlelements.com/license/ */ //
                 delete that.target._handleDocumentUpId;
             }
 
-            if (eventType === 'resize' && that.target.resizeTrigger) {
-                const container = that.target.resizeTrigger;
-                const expand = container.childNodes[0];
-                const shrink = container.childNodes[1];
+            if (eventType === 'resize') {
+                if (Smart.Utilities.Core.Browser.Firefox) {
+                    if (that.target.resizeObserver) {
+                        that.target.resizeObserver.unobserve(that.target);
+                        delete that.target.resizeObserver;
+                    }
+                }
+                else if (that.target.resizeTrigger) {
+                    const container = that.target.resizeTrigger;
+                    const expand = container.childNodes[0];
+                    const shrink = container.childNodes[1];
 
-                expand.removeEventListener('scroll', that.target.resizeHandler);
-                shrink.removeEventListener('scroll', that.target.resizeHandler);
+                    expand.removeEventListener('scroll', that.target.resizeHandler);
+                    shrink.removeEventListener('scroll', that.target.resizeHandler);
 
-                that.target.resizeHandler = null;
-                container.parentNode.removeChild(container);
+                    that.target.resizeHandler = null;
+                    container.parentNode.removeChild(container);
 
-                delete that.target.resizeTrigger;
+                    delete that.target.resizeTrigger;
+                }
             }
         }
 
@@ -3567,7 +3595,7 @@ License: https://htmlelements.com/license/ */ //
             if (rootNode.host) {
                 const getNodeParents = (node) => {
                     let matched = [node],
-                    current = node.parentNode;
+                        current = node.parentNode;
 
                     while (current && current.nodeType !== 9) {
                         if (current instanceof HTMLElement === true) {
@@ -4566,6 +4594,10 @@ License: https://htmlelements.com/license/ */ //
                 that.attributeChanged(name, oldValue, newValue);
             }
 
+            if (that.onAttributeChanged) {
+                that.onAttributeChanged(name, oldValue, newValue);
+            }
+
             if (!property || (property && property.isUpdating)) {
                 return;
             }
@@ -6045,8 +6077,9 @@ License: https://htmlelements.com/license/ */ //
 
         get isInShadowDOM() {
             const that = this;
+            const rootNode = that.getRootNode();
 
-            return that.getRootNode() !== document;
+            return rootNode !== document && rootNode !== that;
         }
 
         getShadowRootOrBody() {
@@ -6455,6 +6488,25 @@ License: https://htmlelements.com/license/ */ //
                 that.classList.remove('smart-element-init');
             }
 
+            if (document.readyState === 'complete') {
+                if (window[namespace].isAngular === undefined) {
+                    window[namespace].isAngular = document.body.querySelector('[ng-version]') !== null;
+                }
+
+                if (window[namespace].isAngular) {
+                    for (let i = 0; i < that.parents.length; i++) {
+                        if (that.parents[i].nodeName.toLowerCase().startsWith(namespace.toLowerCase() + '-')) {
+                            break;
+                        }
+
+                        if (that.parents[i].hasAttribute('ng-version')) {
+                            window[namespace].RenderMode = 'manual';
+                            break;
+                        }
+                    }
+                }
+            }
+
             if (document.readyState === 'complete' && window[namespace].RenderMode !== 'manual' /*&& !ElementRegistry.isRegistering */) {
                 const parents = that.parents;
 
@@ -6992,6 +7044,7 @@ License: https://htmlelements.com/license/ */ //
             const itemProxy = new Proxy(item, {
                 deleteProperty: function (target, property) {
                     delete target[property];
+                    return true;
                 },
                 set: function (target, property, value/*, receiver*/) {
                     const oldValue = target[property];
@@ -7655,6 +7708,7 @@ License: https://htmlelements.com/license/ */ //
         Version: Version,
         RenderMode: userDefinedSettings.RenderMode || 'auto',
         Render: render,
+        Data: data,
         License: 'Evaluation'
     });
 
@@ -7843,8 +7897,8 @@ License: https://htmlelements.com/license/ */ //
                                 <content></content>
                             </div>
                         </div>
-                        <smart-scroll-bar id="verticalScrollBar" animation="[[animation]]" disabled="[[disabled]]" right-to-left="[[rightToLeft]]" orientation="vertical"></smart-scroll-bar>
-                        <smart-scroll-bar id="horizontalScrollBar" animation="[[animation]]" disabled="[[disabled]]" right-to-left="[[rightToLeft]]"></smart-scroll-bar>
+                        <smart-scroll-bar id="verticalScrollBar" theme="[[theme]]"  animation="[[animation]]" disabled="[[disabled]]" right-to-left="[[rightToLeft]]" orientation="vertical"></smart-scroll-bar>
+                        <smart-scroll-bar id="horizontalScrollBar" theme="[[theme]]" disabled="[[disabled]]" right-to-left="[[rightToLeft]]"></smart-scroll-bar>
                     </div>`;
         }
 
@@ -8615,7 +8669,7 @@ License: https://htmlelements.com/license/ */ //
                     that._dropDownParent = that.getRootNode().host.shadowRoot;
                 }
                 else {
-                   that._dropDownParent = document.body;
+                    that._dropDownParent = document.body;
                 }
             }
             else if (dropDownAppendTo instanceof HTMLElement) {

framework/smart.element.js

@@ -1,2 +1,2 @@
-{"name":"smart-webcomponents","version": "8.0.0",
+{"name":"smart-webcomponents","version": "8.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

@@ -96,8 +96,6 @@ export class AccordionItemComponent extends BaseElement implements OnInit, After
 
       that.onCreate.emit(that.nativeElement);
 
-		Smart.Render();
-
 		this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
 		this.listen();
 	}

source/angular/accordion/smart.accordionitem.ts

@@ -1,8 +1,8 @@
 import { ButtonGroup } from './../index';
-import { Animation, ClickMode, ElementRenderMode} from './../index';
+import { Animation, ButtonGroupSelectionMode, 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 { Animation, ButtonGroupSelectionMode, ElementRenderMode} from './../index';
 export { Smart } from './smart.element';
 export { ButtonGroup } from './../index';
 
@@ -50,10 +50,10 @@ export class ButtonGroupComponent extends BaseElement implements OnInit, AfterVi
 
 	/** @description Determines the selection mode for the element. */
 	@Input()
-	get selectionMode(): ClickMode {
+	get selectionMode(): ButtonGroupSelectionMode {
 		return this.nativeElement ? this.nativeElement.selectionMode : undefined;
 	}
-	set selectionMode(value: ClickMode) {
+	set selectionMode(value: ButtonGroupSelectionMode) {
 		this.nativeElement ? this.nativeElement.selectionMode = value : undefined;
 	}
 

source/angular/buttongroup/smart.buttongroup.ts

@@ -149,10 +149,10 @@ export class ChartComponent extends BaseElement implements OnInit, AfterViewInit
 
 	/** @description Sets the chart's data source. */
 	@Input()
-	get dataSource(): any {
+	get dataSource(): any[] {
 		return this.nativeElement ? this.nativeElement.dataSource : undefined;
 	}
-	set dataSource(value: any) {
+	set dataSource(value: any[]) {
 		this.nativeElement ? this.nativeElement.dataSource = value : undefined;
 	}
 

source/angular/chart/smart.chart.ts

@@ -1,8 +1,8 @@
 import { ColorInput } from './../index';
-import { Animation, ColorDisplayMode, DropDownButtonPosition, ColorQueryMode, ColorValueDisplayMode, ColorValueFormat, ElementRenderMode} from './../index';
+import { Animation, ColorInputDisplayMode, DropDownButtonPosition, ColorQueryMode, ColorValueDisplayMode, ColorValueFormat, ElementRenderMode} from './../index';
 import { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, forwardRef, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
 import { BaseElement, Smart } from './smart.element';
-export { Animation, ColorDisplayMode, DropDownButtonPosition, ColorQueryMode, ColorValueDisplayMode, ColorValueFormat, ElementRenderMode} from './../index';
+export { Animation, ColorInputDisplayMode, DropDownButtonPosition, ColorQueryMode, ColorValueDisplayMode, ColorValueFormat, ElementRenderMode} from './../index';
 export { Smart } from './smart.element';
 export { ColorInput } from './../index';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -90,10 +90,10 @@ export class ColorInputComponent extends BaseElement implements OnInit, AfterVie
 
 	/** @description Determines the colors that will be displayed and their layout. */
 	@Input()
-	get displayMode(): ColorDisplayMode {
+	get displayMode(): ColorInputDisplayMode {
 		return this.nativeElement ? this.nativeElement.displayMode : undefined;
 	}
-	set displayMode(value: ColorDisplayMode) {
+	set displayMode(value: ColorInputDisplayMode) {
 		this.nativeElement ? this.nativeElement.displayMode = value : undefined;
 	}
 

source/angular/colorinput/smart.colorinput.ts

@@ -142,8 +142,6 @@ export class ListItemComponent extends BaseElement implements OnInit, AfterViewI
 
       that.onCreate.emit(that.nativeElement);
 
-		Smart.Render();
-
 		this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
 	}
 

source/angular/combobox/smart.listitem.ts

@@ -52,8 +52,6 @@ export class ListItemsGroupComponent extends BaseElement implements OnInit, Afte
 
       that.onCreate.emit(that.nativeElement);
 
-		Smart.Render();
-
 		this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
 	}