@simpleangularcontrols/sac-common 10.0.0-rc.12 → 10.0.0-rc.13

package/bundles/simpleangularcontrols-sac-common.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/forms'), require('@angular/common/http'), require('moment'), require('imask'), require('ngx-uploadx'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-common', ['exports', '@angular/core', 'rxjs', '@angular/forms', '@angular/common/http', 'moment', 'imask', 'ngx-uploadx', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-common'] = {}), global.ng.core, global.rxjs, global.ng.forms, global.ng.common.http, global.moment, global.IMask, global.ngxUploadx, global.ng.common));
-}(this, (function (exports, i0, rxjs, forms, i1, moment_, IMask, ngxUploadx, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('@angular/forms'), require('moment'), require('imask'), require('ngx-uploadx'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-common', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/forms', 'moment', 'imask', 'ngx-uploadx', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-common'] = {}), global.ng.core, global.ng.common.http, global.rxjs, global.ng.forms, global.moment, global.IMask, global.ngxUploadx, global.ng.common));
+}(this, (function (exports, i0, i1, rxjs, forms, moment_, IMask, ngxUploadx, common) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1404,6 +1404,46 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeActionIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-pen';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeClosedIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-folder-plus';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeEmptyIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-folder';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeOpenIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-folder-open';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultIconService.prototype, "UploadComponentBrowseIcon", {
             /**
              * @inheritdoc
@@ -2630,6 +2670,8 @@
      * Abstract Klasse für SacBaseModelControl. Implements ControlValueAccessor, Validator, OnInit
      */
     var SacBaseModelControl = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
          * Constructor
          * @param formlayout SacFormLayoutCommon to define scoped layout settings
@@ -2637,6 +2679,7 @@
          */
         function SacBaseModelControl(formlayout, injector) {
             this.injector = injector;
+            // #region Properties
             /**
              * Inline Errors für das Control
              */
@@ -2740,6 +2783,8 @@
             this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
         }
         Object.defineProperty(SacBaseModelControl.prototype, "HelptextTooltipIcon", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * Get Icon for Helptext Tooltip
              */
@@ -2754,7 +2799,7 @@
              * Methode ergibt Boolean Wert für dirty
              */
             get: function () {
-                if (this.ngControl !== null) {
+                if (this.ngControl !== null && this.ngControl !== undefined) {
                     this._dirty = this.ngControl.dirty;
                 }
                 return this._dirty;
@@ -2788,9 +2833,7 @@
              * Methode ergibt boolean Wert wenn Form invalid oder nicht invalid ist
              */
             get: function () {
-                return (this.ngControl !== undefined &&
-                    this.ngControl !== null &&
-                    this.ngControl.invalid);
+                return this.ngControl !== undefined && this.ngControl !== null && this.ngControl.invalid;
             },
             enumerable: false,
             configurable: true
@@ -2814,8 +2857,7 @@
                 if (this._inlineerrorenabled !== null) {
                     return this._inlineerrorenabled;
                 }
-                if (this.formlayout !== null &&
-                    this.formlayout.IsInlineErrorEnabled !== null) {
+                if (this.formlayout !== null && this.formlayout.IsInlineErrorEnabled !== null) {
                     return (_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.IsInlineErrorEnabled;
                 }
                 if (this.configurationService.InlineErrorEnabled !== null) {
@@ -2865,7 +2907,7 @@
              * Methode ergibt Boolean Wert für touched
              */
             get: function () {
-                if (this.ngControl !== null) {
+                if (this.ngControl !== null && this.ngControl !== undefined) {
                     this._touched = this.ngControl.touched;
                 }
                 return this._touched;
@@ -2894,6 +2936,8 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Methode ergibt Error anhand von gegebenen Kriterien
          */
@@ -2930,24 +2974,21 @@
             return this.lngResourceService.GetString(errorItem.errorMessageKey, parameters);
         };
         /**
-         * In Angular 10 the Control Label for Reactive Forms can be set first time here. With Angular 13 is supported by init in OnInit
+         * Init Event
          */
-        SacBaseModelControl.prototype.ngAfterViewInit = function () {
+        SacBaseModelControl.prototype.ngOnInit = function () {
             // receive form via formcontrolname or formcontrol instance
             var formControl = this.injector.get(forms.NgControl, null);
             if (formControl instanceof forms.FormControlName) {
                 var form = this.injector.get(forms.FormGroupDirective, null);
                 this.ngControl = form.getControl(formControl);
             }
-            else if (formControl) {
-                this.ngControl = formControl.control;
+            else {
+                if (formControl) {
+                    this.ngControl = formControl.control;
+                }
             }
             this.UpdateLabelToControl();
-        };
-        /**
-         * Init Event
-         */
-        SacBaseModelControl.prototype.ngOnInit = function () {
             // set label sizes from formlayout directive
             this.setLabelSizes();
             // set component heigth from fromlayout directive
@@ -3011,6 +3052,8 @@
         SacBaseModelControl.prototype.writeValue = function (value) {
             this._value = value;
         };
+        // #endregion Public Methods
+        // #region Protected Methods
         /**
          * Method can Overwriten in Parent Classes
          * @param value Wert welcher in den korrekten Typ konvertiert werden soll
@@ -3037,6 +3080,8 @@
                 this.ngControl.updateValueAndValidity({ onlySelf: true });
             }
         };
+        // #endregion Protected Methods
+        // #region Private Methods
         SacBaseModelControl.prototype.UpdateLabelToControl = function () {
             // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
             if (this.ngControl) {
@@ -3153,8 +3198,7 @@
                     this.splitlabelandhelptext = this.formlayout.splitlabelandhelptext;
                 }
                 else {
-                    this.splitlabelandhelptext =
-                        this.configurationService.SplitLabelAndHelptext;
+                    this.splitlabelandhelptext = this.configurationService.SplitLabelAndHelptext;
                 }
             }
         };
@@ -9006,441 +9050,329 @@
     };
 
     /**
-     *Basis Komponente für SacTreeItemAction
+     * Basis Komponente für SacTreeView
      */
-    var SacTreeItemActionCommon = /** @class */ (function () {
-        /**
-         * Konstruktor
-         * @param el Element Referenz
-         */
-        function SacTreeItemActionCommon(el) {
-            this.el = el;
-            /**
-             * Event wenn auf das Icon geclickt wird
-             */
-            this.clicked = new i0.EventEmitter();
-        }
-        /**
-         * lifecycle OnInit hook. Wird aufgeruren sobald das Komponent initialisiert ist.
-         */
-        SacTreeItemActionCommon.prototype.ngOnInit = function () {
-            var rootElement = this.el.nativeElement;
-            var parentElement = rootElement.parentElement;
-            while (rootElement.firstChild) {
-                parentElement.insertBefore(rootElement.firstChild, rootElement);
-            }
-            parentElement.removeChild(rootElement);
-        };
-        /**
-         * Die Methode erstellt die CSS Klasse des Icon. Akzeptiert ein Key-word und baut ein vollständige CSS Klasse.
-         */
-        SacTreeItemActionCommon.prototype.transformClass = function (initialClass) {
-            switch (initialClass) {
-                case 'add':
-                    return 'jstree-icon icon icon-base-add jstree-add';
-                case 'delete':
-                    return 'jstree-icon icon icon-base-delete jstree-delete';
-                default:
-                    return initialClass;
-            }
-        };
+    var SacTreeviewCommon = /** @class */ (function (_super) {
+        __extends(SacTreeviewCommon, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
-         * Die Methode wird das cklickaction Emitter aktivieren.
+         * Constructor
+         * @param injector Service Injector
          */
-        SacTreeItemActionCommon.prototype.iconaction = function () {
-            this.clicked.emit();
-        };
-        return SacTreeItemActionCommon;
-    }());
-    SacTreeItemActionCommon.decorators = [
-        { type: i0.Directive }
-    ];
-    SacTreeItemActionCommon.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    SacTreeItemActionCommon.propDecorators = {
-        item: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        iconstyle: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }]
-    };
-
-    /**
-     * Basis Komponente für SacTreeView
-     */
-    var SacTreeViewCommon = /** @class */ (function () {
-        function SacTreeViewCommon() {
+        function SacTreeviewCommon(formlayout, injector) {
+            var _this = _super.call(this, formlayout, injector) || this;
+            // #region Properties
             /**
-             * Das Property enthielt array of nodes. Default value: empty array [].
+             * Event when Action is clicked on Node.  An object of the type 'TreeviewAction' is returned. In the default case, 'action' in this object is always the value 'default'. The value can be changed via the 'templateaction'.
              */
-            this.nodes = [];
+            _this.actionclicked = new i0.EventEmitter();
             /**
-             * Das Property enthielt node attribute: 'isCollapsed'. Es wird benutzt beim rendering. Für Expand/Collapsed Sicht des Node(Wert)
+             * Property on the data object that contains the children of the structure element. Must be an array of objects. The default value is 'children'
              */
-            this.collapseAttr = 'isCollapsed';
+            _this.attrchildren = 'children';
             /**
-             * Das Property enthielt node attribute: 'isSelected'. Es wird benutzt beim Vorbereitung des Data des TreeView
+             * Defines the property on the 'data' object with which the actions for a node can be deactivated. A 'disabled' property is used by default.
              */
-            this.selectAttr = 'isSelected';
+            _this.attrdisableaction = 'disabled';
             /**
-             * Das Property enthielt node attribute: 'isIndeterminate'. Es wird benutzt beim Vorbereitung des Data des TreeView
+             * Property on the 'data' object that stores the expanded state. Property must be of type boolean. Default is 'expanded'
              */
-            this.inDeterminateAttr = 'isIndeterminate';
+            _this.attrexanded = 'expanded';
             /**
-             * Providen data for tree.
+             * Property for saving the HoverState on the field. If the property is not present on the node, it is automatically created and removed again. The value can usually be left at the default value unless there is a conflict with a property on the node that is required for other purposes.
              */
-            this._data = [];
+            _this.attrhoverstate = 'hoverstate';
             /**
-             * Input property für den Namen des TreeView. Type string. Default value: ""
+             * Property on 'data' object, which contains the icon for the node. By default, the property is not set, which hides the icon in the node.
              */
-            this.name = '';
+            _this.attricon = null;
             /**
-             * A flag indicating data is flatten in array and prepare is required.(Default
-             * is false).
+             * property on the 'data' object contains an ID of the node. The default is 'id'. If the property is set to NULL, the selectedId event is no longer triggered.
              */
-            this.prepareData = false;
+            _this.attrid = 'id';
             /**
-             * Attribute for Text in Tree
+             * Property on 'data' object, which contains the label for the node. Default is 'label'
              */
-            this.textAttr = 'data';
+            _this.attrlabel = 'label';
             /**
-             * Name of ID property in input data.
+             * Property on 'data' object, which defines whether the node is selected or not. It should be ensured that only 1 node has the value for Selected set to true. Default is 'selected'.
              */
-            this.idAttr = 'id';
+            _this.attrselected = 'selected';
             /**
-             * Name of parent property in input data.
+             * Event when a node is collapsed. Returns the node element as a parameter
              */
-            this.parentAttr = 'PARENT_ID';
+            _this.collabsed = new i0.EventEmitter();
             /**
-             * Name of children list property in input data.
+             * The property contains an array of nodes. The data must already map the tree via child properties.
              */
-            this.childrenAttr = 'children';
+            _this.data = [];
             /**
-             * Output Emitter. Emit das ID des selected Node.
+             * Activates the 'expand' and 'collabse' event even if a node has no children. This is helpful if node elements are to be reloaded at runtime.
              */
-            this.selectedidchange = new i0.EventEmitter();
+            _this.enableasynchload = false;
             /**
-             * Output Emitter. Emit das TextAttr des selected Node.
+             * Activates Ellipsis on the node labels
              */
-            this.selectedtextchanged = new i0.EventEmitter();
+            _this.enableellipsis = true;
             /**
-             * Output Emitter. Emit wenn ein Node selektiert wird.
+             * Event when a node is expanded. Returns the node element as a parameter
              */
-            this.selecteditem = new i0.EventEmitter();
-        }
-        Object.defineProperty(SacTreeViewCommon.prototype, "data", {
+            _this.expanded = new i0.EventEmitter();
             /**
-             * Getter für Data des TreeView
+             * Defines whether an icon for the expanded/collapsed status should be displayed.
              */
-            get: function () {
-                return this._data;
-            },
+            _this.expandedstate = true;
             /**
-             * Input Property für Data des TreeView
+             * A node must be selected
              */
-            set: function (value) {
-                this._data = value;
-                this.nodes = value;
-                // this.nodes.forEach(node => node["typeId"] = "13")
-                this.LoadTree();
-                if (this._collapseAll !== undefined) {
-                    this.collapseAllNode(this._collapseAll);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "treeviewTemplate", {
+            _this.isrequired = false;
             /**
-             * Getter für das TreeView Template
+             * Name of the TreeView control
              */
-            get: function () {
-                return this.template;
-            },
+            _this.name = '';
             /**
-             * Die Directive erhält die actions für das TreeView
+             * Event when a node is selected. Returns the id attribute as a parameter. The event is not triggered if 'attrid' is not set.
              */
-            set: function (v) {
-                this.template = v;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "treefileicon", {
+            _this.selected = new i0.EventEmitter();
             /**
-             * Getter property. Ergibt das FileIcon für das TreeView
+             * Event when a node is selected. Returns the node element as a parameter.
              */
-            get: function () {
-                return this.fileicontemplate;
-            },
+            _this.selectednode = new i0.EventEmitter();
             /**
-             * Setter property. Deffiniert das FileIcon für das TreeView
+             * Resource Key für Validation Message Required bei Control
              */
-            set: function (v) {
-                this.fileicontemplate = v;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "collapseall", {
+            _this.validationmessagerequired = _this.validationKeyService.ValidationErrorRequired;
             /**
-             * Getter für das collapse property. Ergibt boolean Wert, ob die Items collapsed/expand sind.
+             * Resource Key für Validation Message Required in Validation Summary
              */
+            _this.validationmessagesummaryrequired = _this.validationKeyService.ValidationErrorSummaryRequired;
+            return _this;
+        }
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconAction", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             get: function () {
-                return this._collapseAll;
-            },
-            // @Input("titleAction") _titleAction: string
-            /**
-             * Collapse or expand all parent nodes.
-             */
-            set: function (value) {
-                this._collapseAll = value;
-                if (this.nodes && this.nodes.length && this.nodes.length > 0) {
-                    this.collapseAllNode(this._collapseAll);
-                }
-                // this._recursiveEdit(
-                //   this.nodes, this.childrenAttr, this.collapseAttr, this._collapseAll);
-                // this.cd.detectChanges();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectall", {
-            /**
-             * Select or deselect all nodes.
-             */
-            set: function (value) {
-                this._selectAll = value;
-                this._recursiveEdit(this.nodes, this.childrenAttr, this.selectAttr, value);
-                this._recursiveEdit(this.nodes, this.childrenAttr, this.inDeterminateAttr, false);
+                return this.iconService.TreeviewNodeActionIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectedid", {
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconFolderCollabsed", {
             /**
-             * Input property - setter. Deffiniert das ID des selektierten Item(node)
+             * CSS icon for folders in tree there are collabsed
+             * @returns css class with icon
              */
-            set: function (v) {
-                this.selectedNode = this.findNode(this.nodes, v, this.idAttr);
-                // if (this.selectedNode) {
-                //   this.selectedIdEmitter.emit(this.selectedNode[this.idAttr]);
-                //   this.selectedTextEmitter.emit(this.selectedNode[this.textAttr]);
-                // }
+            get: function () {
+                return this.iconService.TreeviewNodeClosedIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectedId", {
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconFolderEmpty", {
             /**
-             * Getter. Ergibt das ID des selektierten Item(node)
+             * CSS icon class for folders without subfolders
+             * @returns css class with icon
              */
             get: function () {
-                return this.selectedNode ? this.selectedNode[this.idAttr] : null;
+                return this.iconService.TreeviewNodeEmptyIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectedNode", {
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconFolderOpen", {
             /**
-             * Getter für das selektierte Wert(node). Ergibt das selektierte Wert(node).
+             * CSS icon for folders in tree there are expanded
+             * @returns css class with icon
              */
             get: function () {
-                return this._selectedNode;
-            },
-            /**
-             * Setter für das selektierte Wert(node). Wenn aufgerufen das ID und TextAttr des selected Node wird emitted
-             */
-            set: function (v) {
-                this._selectedNode = v;
-                if (this._selectedNode) {
-                    this.selectedidchange.emit(this.selectedId);
-                    this.selectedtextchanged.emit(v[this.textAttr]);
-                }
+                return this.iconService.TreeviewNodeOpenIcon;
             },
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
-         * A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
-         * Define an ngOnInit() method to handle any additional initialization tasks.
+         * Creates an array of a certain size. Is required for a For in the UI, as Angular does not support counting loops
+         * @param size Size of the array
+         * @returns Array
          */
-        SacTreeViewCommon.prototype.ngOnInit = function () {
-            this.collapseAllNode(this._collapseAll);
-            if (this.selectedId)
-                this.openSelectedNode(this.nodes);
+        SacTreeviewCommon.prototype.count = function (size) {
+            return new Array(size);
         };
-        /**
-         * Funktion setzt alle parent items recusiv zum selected node
-         * auf collapsed = false
-         */
-        SacTreeViewCommon.prototype.openSelectedNode = function (data) {
-            var result = false;
-            for (var i = 0; i < data.length; i++) {
-                if (data[i][this.childrenAttr].length &&
-                    data[i][this.idAttr] != this.selectedId)
-                    result = this.openSelectedNode(data[i][this.childrenAttr]);
-                if (result || data[i][this.idAttr] == this.selectedId) {
-                    data[i][this.collapseAttr] = false;
-                    return true;
-                }
+        SacTreeviewCommon.prototype.getChildren = function (node) {
+            if (!node || !this.attrchildren) {
+                return [];
             }
-            return false;
+            var children = node[this.attrchildren];
+            if (!Array.isArray(children)) {
+                return [];
+            }
+            return children;
         };
-        /**
-         * Die Methode vorbereitet die Daten für das TreeView. Die Funktion sollte geändert werden abhängig von dem kommenden Daten (wenn array)
-         */
-        SacTreeViewCommon.prototype.LoadTree = function () {
-            //if the tree structure require array the function below should be changed
-            var cloned = this._data.map(function (x) { return Object.assign({}, x); });
-            // If data is flat, prepare data with recursive function.
-            this.nodes = this.prepareData ? this._getPreparedData(cloned) : this._data;
+        SacTreeviewCommon.prototype.getStringField = function (node, fieldname) {
+            if (!node) {
+                return '';
+            }
+            if (!fieldname) {
+                return node;
+            }
+            var value = node[fieldname];
+            if (!value) {
+                return '';
+            }
+            return value;
         };
-        /**
-         * Die Methode collapse/expand den selectierten Node
-         */
-        SacTreeViewCommon.prototype.onCollapseClick = function (node) {
-            if (node[this.childrenAttr].length) {
-                node[this.collapseAttr] = !node[this.collapseAttr];
+        SacTreeviewCommon.prototype.hasChildren = function (node) {
+            return this.getChildren(node).length > 0;
+        };
+        SacTreeviewCommon.prototype.isDisabledState = function (node) {
+            if (!node || !this.attrdisableaction) {
+                return false;
             }
+            var value = node[this.attrdisableaction];
+            return value === true || value === 'true';
         };
-        /**
-         * Die Methode set den selektierten Node und emit es.
-         */
-        SacTreeViewCommon.prototype.onClick = function (node) {
-            this.selectedNode = node;
-            this.selecteditem.emit(this.selectedNode);
-            // this.cd.detectChanges();
+        SacTreeviewCommon.prototype.isExpandedState = function (node) {
+            if (!node || !this.attrexanded) {
+                return false;
+            }
+            var value = node[this.attrexanded];
+            return value === true || value === 'true';
         };
-        /**
-         * Die Methode wird ein event mit Meldung zu Parent emit-en.
-         */
-        SacTreeViewCommon.prototype.sendMsgToParent = function (msg) {
-            this.selecteditem.emit(msg);
+        SacTreeviewCommon.prototype.isHoverState = function (node) {
+            if (!node || !this.attrhoverstate) {
+                return false;
+            }
+            var value = node[this.attrhoverstate];
+            return value === true || value === 'true';
         };
-        /**
-         * Die Methode wird alle Nodes collapse
-         */
-        SacTreeViewCommon.prototype.collapseAllNode = function (command) {
-            var _this = this;
-            this.nodes.forEach(function (node) {
-                if (node[_this.childrenAttr].length) {
-                    collapseAllHIdden(node, _this.collapseAttr, command, _this.childrenAttr);
-                }
-            });
-            function collapseAllHIdden(node, collapseAttr, command, childrenAttr) {
-                node[collapseAttr] = command;
-                node.children.forEach(function (child) {
-                    if (child[childrenAttr].length) {
-                        collapseAllHIdden(child, collapseAttr, command, childrenAttr);
-                    }
-                });
+        SacTreeviewCommon.prototype.isSelectedState = function (node) {
+            if (!node || !this.attrselected) {
+                return false;
             }
+            var value = node[this.attrselected];
+            return value === true || value === 'true';
         };
         /**
-         * Funktion gibt node aus der liste zurück, welches das Value auf dem gewünschten Attribut hat
-         * Wenn node nicht gefunden wird, wird null zurück gegeben
-         * @param data Liste der nodes
-         * @param searchValue Das gesuchte value
-         * @param attr Der namen des Attributs auf dem das value gesucht wird
+         * Method is called by clicking an action
+         * @param action action and node
          */
-        SacTreeViewCommon.prototype.findNode = function (data, searchValue, attr) {
-            var result = null;
-            for (var i = 0; i < data.length; i++) {
-                if (data[i][attr] == searchValue)
-                    result = data[i];
-                else {
-                    if (data[i][this.childrenAttr].length) {
-                        var recursiveResult = this.findNode(data[i][this.childrenAttr], searchValue, attr);
-                        if (recursiveResult)
-                            result = recursiveResult;
-                    }
-                }
+        SacTreeviewCommon.prototype.onActionClicked = function (action) {
+            this.actionclicked.emit(action);
+        };
+        SacTreeviewCommon.prototype.onNodeClicked = function (node) {
+            if (this.isDisabledState(node) || this.isSelectedState(node)) {
+                this.invertExpandedState(node);
             }
-            return result;
+            this.setSelectedState(node);
         };
-        /**
-         * Die Methode editiert (recursive) alle eingegebene Nodes abhängig von gegebenen Attibute und Value Kriterien.
-         */
-        SacTreeViewCommon.prototype._recursiveEdit = function (list, childrenAttr, attr, value) {
-            if (Array.isArray(list)) {
-                for (var i = 0, len = list.length; i < len; i++) {
-                    list[i][attr] = value;
-                    if (list[i][childrenAttr].length) {
-                        this._recursiveEdit(list[i][childrenAttr], childrenAttr, attr, value);
-                    }
-                }
+        SacTreeviewCommon.prototype.setHoverState = function (node, state) {
+            if (!node || !this.attrhoverstate) {
+                return;
+            }
+            if (state) {
+                node[this.attrhoverstate] = true;
+                return;
+            }
+            if (!node.hasOwnProperty(this.attrhoverstate)) {
+                return;
             }
+            delete node[this.attrhoverstate];
         };
-        /**
-         * Die Methode erstellt eine standarte Sicht-Liste von Nodes
-         */
-        SacTreeViewCommon.prototype._getPreparedData = function (list) {
-            var tree = [], lookup = {};
-            for (var i = 0, len = list.length; i < len; i++) {
-                lookup[list[i][this.idAttr]] = list[i];
-                list[i][this.childrenAttr] = [];
-                list[i][this.collapseAttr] = true;
-                list[i][this.selectAttr] = false;
-                list[i][this.inDeterminateAttr] = false;
+        SacTreeviewCommon.prototype.setSelectedState = function (node) {
+            var _this = this;
+            if (!node || !this.attrselected) {
+                return;
             }
-            for (var i = 0, len = list.length; i < len; i++) {
-                if (list[i][this.parentAttr]) {
-                    lookup[list[i][this.parentAttr]][this.childrenAttr].push(list[i]);
-                }
-                else {
-                    tree.push(list[i]);
-                }
+            // reset selected state of any node
+            this.data.forEach(function (rootNode) { return _this.resetSelectedState(rootNode); });
+            // set selected node as selected
+            node[this.attrselected] = true;
+            // Update ngModel
+            this.setValue(node);
+            // Raise Selected Events
+            this.selectednode.emit(node);
+            if (!this.attrid) {
+                return;
             }
-            return tree;
+            var id = this.getStringField(node, this.attrid);
+            this.selected.emit(id);
         };
-        return SacTreeViewCommon;
-    }());
-    SacTreeViewCommon.decorators = [
+        SacTreeviewCommon.prototype.validateData = function (c) {
+            var error = null;
+            if (this.isrequired) {
+                error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
+            }
+            return error;
+        };
+        // #endregion Public Methods
+        // #region Private Methods
+        SacTreeviewCommon.prototype.invertExpandedState = function (node) {
+            if (!node || !this.attrexanded) {
+                return;
+            }
+            // Items with no children cannot be collabsed
+            if (!this.hasChildren(node) && !(this.enableasynchload === true || this.enableasynchload === 'true')) {
+                return;
+            }
+            var value = node[this.attrexanded];
+            if (value === true || value === 'true') {
+                this.collabsed.emit(node);
+                node[this.attrexanded] = false;
+            }
+            else {
+                this.expanded.emit(node);
+                node[this.attrexanded] = true;
+            }
+        };
+        SacTreeviewCommon.prototype.resetSelectedState = function (node) {
+            var _this = this;
+            if (!node || !this.attrselected) {
+                return;
+            }
+            node[this.attrselected] = false;
+            this.getChildren(node).forEach(function (child) {
+                _this.resetSelectedState(child);
+            });
+        };
+        return SacTreeviewCommon;
+    }(SacBaseModelControl));
+    SacTreeviewCommon.decorators = [
         { type: i0.Directive }
     ];
-    SacTreeViewCommon.propDecorators = {
+    SacTreeviewCommon.ctorParameters = function () { return [
+        { type: SacFormLayoutCommon, decorators: [{ type: i0.Host }] },
+        { type: i0.Injector }
+    ]; };
+    SacTreeviewCommon.propDecorators = {
+        actionclicked: [{ type: i0.Output }],
+        attrchildren: [{ type: i0.Input }],
+        attrdisableaction: [{ type: i0.Input }],
+        attrexanded: [{ type: i0.Input }],
+        attrhoverstate: [{ type: i0.Input }],
+        attricon: [{ type: i0.Input }],
+        attrid: [{ type: i0.Input }],
+        attrlabel: [{ type: i0.Input }],
+        attrselected: [{ type: i0.Input }],
+        collabsed: [{ type: i0.Output }],
         data: [{ type: i0.Input }],
-        template: [{ type: i0.Input }],
-        treeviewTemplate: [{ type: i0.ContentChild, args: ['actions', { static: true },] }],
-        fileicontemplate: [{ type: i0.Input }],
-        treefileicon: [{ type: i0.ContentChild, args: ['treefileicon', { static: true },] }],
+        enableasynchload: [{ type: i0.Input }],
+        enableellipsis: [{ type: i0.Input }],
+        expanded: [{ type: i0.Output }],
+        expandedstate: [{ type: i0.Input }],
+        isrequired: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
-        prepareData: [{ type: i0.Input }],
-        textAttr: [{ type: i0.Input }],
-        idAttr: [{ type: i0.Input }],
-        parentAttr: [{ type: i0.Input }],
-        childrenAttr: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        collapseall: [{ type: i0.Input }],
-        selectall: [{ type: i0.Input }],
-        selectedid: [{ type: i0.Input }],
-        selectedidchange: [{ type: i0.Output }],
-        selectedtextchanged: [{ type: i0.Output }],
-        selecteditem: [{ type: i0.Output }]
+        selected: [{ type: i0.Output }],
+        selectednode: [{ type: i0.Output }],
+        showactionalways: [{ type: i0.Input }],
+        templateaction: [{ type: i0.Input }],
+        templatelabel: [{ type: i0.Input }],
+        validationmessagerequired: [{ type: i0.Input }],
+        validationmessagesummaryrequired: [{ type: i0.Input }]
     };
 
-    /**
-     * Komponente für SacTreeViewChildCommon. Extends SacTreeViewCommon
-     */
-    var SacTreeViewChildCommon = /** @class */ (function (_super) {
-        __extends(SacTreeViewChildCommon, _super);
-        function SacTreeViewChildCommon() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
-         * Define an ngOnInit() method to handle any additional initialization tasks.
-         */
-        SacTreeViewChildCommon.prototype.ngOnInit = function () {
-            this.collapseAllNode(this.collapseall);
-        };
-        return SacTreeViewChildCommon;
-    }(SacTreeViewCommon));
-    SacTreeViewChildCommon.decorators = [
-        { type: i0.Directive }
-    ];
-
     /**
      * Tooltip Component
      *
@@ -11676,6 +11608,27 @@
         { type: i0.ElementRef }
     ]; };
 
+    /**
+     * Base Context Menu Item
+     */
+    var SacContextmenuItemCommon = /** @class */ (function () {
+        function SacContextmenuItemCommon() {
+            // #region Properties
+            /**
+             * Reference to the higher-level context menu. This property is always set automatically by the context menu. However, it may be necessary to set the reference manually.
+             */
+            this.contextmenu = null;
+            // #endregion Properties
+        }
+        return SacContextmenuItemCommon;
+    }());
+    SacContextmenuItemCommon.decorators = [
+        { type: i0.Directive }
+    ];
+    SacContextmenuItemCommon.propDecorators = {
+        contextmenu: [{ type: i0.Input }]
+    };
+
     /**
      * Base Context Menü Element. Die Logik wurde aus NG-BOOTSTRAP übernommen.
      */
@@ -11725,12 +11678,7 @@
              *
              * Please see the [positioning overview](#/positioning) for more details.
              */
-            this.placement = [
-                'bottom-left',
-                'bottom-right',
-                'top-left',
-                'top-right',
-            ];
+            this.placement = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
             this.zoneSubscription = this.ngZone.onStable.subscribe(function () {
                 _this._positionMenu();
             });
@@ -11750,17 +11698,6 @@
         });
         // #endregion Public Getters And Setters
         // #region Public Methods
-        /**
-         * HostListener um das Dropdown zu schliessen wenn nicht auf das Element geklickt wird.
-         */
-        SacContextmenuCommon.prototype.onClick = function (targetElement) {
-            var anchor = this._anchor || this._anchorTemplate;
-            if (this._menu &&
-                !this._menu.nativeElement.contains(targetElement) &&
-                !anchor.nativeElement.contains(targetElement)) {
-                this.close();
-            }
-        };
         /**
          * Schliesst das Dropdown
          */
@@ -11768,6 +11705,10 @@
             this._resetContainer();
             this.isopen = false;
         };
+        SacContextmenuCommon.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.menuitems.forEach(function (button) { return (button.contextmenu = _this); });
+        };
         /**
          * Event wenn Component entfernt wird.
          */
@@ -11777,6 +11718,17 @@
             }
             this.zoneSubscription.unsubscribe();
         };
+        /**
+         * HostListener um das Dropdown zu schliessen wenn nicht auf das Element geklickt wird.
+         */
+        SacContextmenuCommon.prototype.onClick = function (targetElement) {
+            var anchor = this._anchor || this._anchorTemplate;
+            if (this._menu &&
+                !this._menu.nativeElement.contains(targetElement) &&
+                !anchor.nativeElement.contains(targetElement)) {
+                this.close();
+            }
+        };
         /**
          * Öffnet das Dropdown / Zeigt das Menü an.
          */
@@ -11820,8 +11772,7 @@
             if (container === 'body') {
                 var renderer = this.renderer;
                 var dropdownMenuElement = this._menu.nativeElement;
-                var bodyContainer = (this.bodyContainer =
-                    this.bodyContainer || renderer.createElement('div'));
+                var bodyContainer = (this.bodyContainer = this.bodyContainer || renderer.createElement('div'));
                 // Override some styles to have the positioning working
                 renderer.setStyle(bodyContainer, 'position', 'absolute');
                 renderer.setStyle(dropdownMenuElement, 'position', 'static');
@@ -11860,41 +11811,31 @@
         { type: i0.Injector }
     ]; };
     SacContextmenuCommon.propDecorators = {
-        _anchorTemplate: [{ type: i0.ContentChild, args: [SacContextmenuAnchorCommon, { static: false },] }],
         _anchor: [{ type: i0.ViewChild, args: [SacContextmenuAnchorCommon, { static: false },] }],
+        _anchorTemplate: [{ type: i0.ContentChild, args: [SacContextmenuAnchorCommon, { static: false },] }],
         _menu: [{ type: i0.ViewChild, args: [SacContextMenuContrainerCommon, { static: false },] }],
         buttontemplate: [{ type: i0.Input }],
         container: [{ type: i0.Input }],
         cssclass: [{ type: i0.Input }],
         isopen: [{ type: i0.Input }],
+        menuitems: [{ type: i0.ContentChildren, args: [i0.forwardRef(function () { return SacContextmenuItemCommon; }),] }],
         placement: [{ type: i0.Input }],
         onClick: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }]
     };
 
-    /**
-     * Base Context Menu Item
-     */
-    var SacContextmenuItemCommon = /** @class */ (function () {
-        function SacContextmenuItemCommon() {
-        }
-        return SacContextmenuItemCommon;
-    }());
-    SacContextmenuItemCommon.decorators = [
-        { type: i0.Directive }
-    ];
-
     /**
      * Base Context Menu Button Item
      */
     var SacContextmenuItemButtonCommon = /** @class */ (function (_super) {
         __extends(SacContextmenuItemButtonCommon, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
          * Constructor
-         * @param contextmenu Instance of Context Menü.
          */
-        function SacContextmenuItemButtonCommon(contextmenu) {
+        function SacContextmenuItemButtonCommon() {
             var _this = _super.call(this) || this;
-            _this.contextmenu = contextmenu;
+            // #region Properties
             /**
              * Menu Item ist deaktiviert
              */
@@ -11903,6 +11844,10 @@
              * Icon Column in Menü ist deaktiviert
              */
             _this._isicondisabled = false;
+            /**
+             * Event wenn auf den Button geklickt wird
+             */
+            _this.clicked = new i0.EventEmitter();
             /**
              * css class for button styling
              */
@@ -11912,12 +11857,14 @@
              */
             _this.iconstyle = '';
             /**
-             * Event wenn auf den Button geklickt wird
+             * name of button. used for generate id and name
              */
-            _this.clicked = new i0.EventEmitter();
+            _this.name = '';
             return _this;
         }
         Object.defineProperty(SacContextmenuItemButtonCommon.prototype, "isdisabled", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * Menu Item ist deaktiviert
              */
@@ -11959,13 +11906,17 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Die Methode wird das cklickaction Emitter aktivieren
          */
         SacContextmenuItemButtonCommon.prototype.callaction = function (event) {
             if (!this._isdisabled) {
                 this.clicked.emit();
-                this.contextmenu.close();
+                if (this.contextmenu !== null) {
+                    this.contextmenu.close();
+                }
             }
             event.stopPropagation();
         };
@@ -11974,18 +11925,17 @@
     SacContextmenuItemButtonCommon.decorators = [
         { type: i0.Directive }
     ];
-    SacContextmenuItemButtonCommon.ctorParameters = function () { return [
-        { type: SacContextmenuCommon }
-    ]; };
+    SacContextmenuItemButtonCommon.ctorParameters = function () { return []; };
     SacContextmenuItemButtonCommon.propDecorators = {
-        icon: [{ type: i0.Input }],
+        clicked: [{ type: i0.Output }],
         cssclass: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
         iconstyle: [{ type: i0.Input }],
         image: [{ type: i0.Input }],
-        isdisabled: [{ type: i0.Input }],
-        isicondisabled: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
         text: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }]
+        isdisabled: [{ type: i0.Input }],
+        isicondisabled: [{ type: i0.Input }]
     };
 
     /**
@@ -12700,9 +12650,7 @@
     exports.SacTimeCommon = SacTimeCommon;
     exports.SacTinyMceCommon = SacTinyMceCommon;
     exports.SacTooltipCommon = SacTooltipCommon;
-    exports.SacTreeItemActionCommon = SacTreeItemActionCommon;
-    exports.SacTreeViewChildCommon = SacTreeViewChildCommon;
-    exports.SacTreeViewCommon = SacTreeViewCommon;
+    exports.SacTreeviewCommon = SacTreeviewCommon;
     exports.SacUploadBase = SacUploadBase;
     exports.SacUploadFile = SacUploadFile;
     exports.SacUploadMultipleCommon = SacUploadMultipleCommon;