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

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

@@ -1097,18 +1097,18 @@
     ];
 
     /**
-     * Component für Contextmenü
+     * Component for context menu
      */
     var SacContextmenuComponent = /** @class */ (function (_super) {
         __extends(SacContextmenuComponent, _super);
         // #region Constructors
         /**
          * Constructor
-         * @param document Referenz auf HTML Document
+         * @param document Reference to HTML document
          * @param ngZone Angular Zone Service
-         * @param elementRef Referenz auf HTML Element der aktuellen Komponente
-         * @param renderer Render Service von Angular
-         * @param injector  injector to resolve services
+         * @param elementRef Reference to HTML element of the current component
+         * @param renderer Render Service from Angular
+         * @param injector injector to resolve services
          */
         function SacContextmenuComponent(document, ngZone, elementRef, renderer, injector) {
             return _super.call(this, document, ngZone, elementRef, renderer, injector) || this;
@@ -1118,13 +1118,7 @@
     SacContextmenuComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-contextmenu',
-                    template: "<div\r\n    class=\"dropdown\"\r\n    [ngClass]=\"cssclass\">\r\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\r\n\r\n    <ul\r\n        class=\"dropdown-menu dropdown-menu-right\"\r\n        sacContextMenuContainer\r\n        [class.show]=\"isopen\">\r\n        <ng-content></ng-content>\r\n    </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n    <button\r\n        sacContextMenuAnchor\r\n        class=\"btn btn-link\"\r\n        type=\"button\"\r\n        (click)=\"toggle()\">\r\n        <i [class]=\"IconContextMenu\"></i>\r\n    </button>\r\n</ng-template>\r\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuCommon,
-                            useExisting: core.forwardRef(function () { return SacContextmenuComponent; }),
-                        },
-                    ]
+                    template: "<div\r\n    class=\"dropdown\"\r\n    [ngClass]=\"cssclass\">\r\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\r\n\r\n    <ul\r\n        class=\"dropdown-menu dropdown-menu-right\"\r\n        sacContextMenuContainer\r\n        [class.show]=\"isopen\">\r\n        <ng-content></ng-content>\r\n    </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n    <button\r\n        sacContextMenuAnchor\r\n        class=\"btn btn-link\"\r\n        type=\"button\"\r\n        (click)=\"toggle()\">\r\n        <i [class]=\"IconContextMenu\"></i>\r\n    </button>\r\n</ng-template>\r\n"
                 },] }
     ];
     SacContextmenuComponent.ctorParameters = function () { return [
@@ -1196,7 +1190,7 @@
     ]; };
 
     /**
-     * Component für Menü Eintrag in Context Menü
+     * Component for menu entry in context menu
      */
     var SacContextmenuItemButtonComponent = /** @class */ (function (_super) {
         __extends(SacContextmenuItemButtonComponent, _super);
@@ -1205,8 +1199,8 @@
          * Constructor
          * @param contextmenu Instance von Context Menü
          */
-        function SacContextmenuItemButtonComponent(contextmenu, el) {
-            var _this = _super.call(this, contextmenu) || this;
+        function SacContextmenuItemButtonComponent(el) {
+            var _this = _super.call(this) || this;
             _this.el = el;
             return _this;
         }
@@ -1225,11 +1219,16 @@
     SacContextmenuItemButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-contextmenubutton',
-                    template: "<li\r\n    [class.disabled]=\"isdisabled\"\r\n    [ngClass]=\"cssclass\">\r\n    <a\r\n        (click)=\"callaction($event)\"\r\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n        [ngStyle]=\"{ cursor: !isdisabled ? 'pointer' : null }\"\r\n        style=\"display: flex\">\r\n        <div\r\n            style=\"min-width: 25px\"\r\n            *ngIf=\"!isicondisabled\">\r\n            <img\r\n                *ngIf=\"image\"\r\n                [src]=\"image\"\r\n                style=\"vertical-align: baseline\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\" />\r\n            <i\r\n                *ngIf=\"icon\"\r\n                [class]=\"iconstyle + ' ' + icon\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\">\r\n            </i>\r\n        </div>\r\n        <div>{{ text }}</div>\r\n    </a>\r\n</li>\r\n"
+                    template: "<li\r\n    [class.disabled]=\"isdisabled\"\r\n    [ngClass]=\"cssclass\">\r\n    <a\r\n        [id]=\"name\"\r\n        (click)=\"callaction($event)\"\r\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n        [ngStyle]=\"{ cursor: !isdisabled ? 'pointer' : null }\"\r\n        style=\"display: flex\">\r\n        <div\r\n            style=\"min-width: 25px\"\r\n            *ngIf=\"!isicondisabled\">\r\n            <img\r\n                *ngIf=\"image\"\r\n                [src]=\"image\"\r\n                style=\"vertical-align: baseline\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\" />\r\n            <i\r\n                *ngIf=\"icon\"\r\n                [class]=\"iconstyle + ' ' + icon\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\">\r\n            </i>\r\n        </div>\r\n        <div>{{ text }}</div>\r\n    </a>\r\n</li>\r\n",
+                    providers: [
+                        {
+                            provide: sacCommon.SacContextmenuItemCommon,
+                            useExisting: core.forwardRef(function () { return SacContextmenuItemButtonComponent; }),
+                        },
+                    ]
                 },] }
     ];
     SacContextmenuItemButtonComponent.ctorParameters = function () { return [
-        { type: sacCommon.SacContextmenuCommon },
         { type: core.ElementRef }
     ]; };
 
@@ -1246,7 +1245,13 @@
     SacContextmenuItemSplitterComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-contextmenusplitter',
-                    template: "<li\r\n    role=\"separator\"\r\n    class=\"divider\"></li>\r\n"
+                    template: "<li\r\n    role=\"separator\"\r\n    class=\"divider\"></li>\r\n",
+                    providers: [
+                        {
+                            provide: sacCommon.SacContextmenuItemCommon,
+                            useExisting: core.forwardRef(function () { return SacContextmenuItemSplitterComponent; }),
+                        },
+                    ]
                 },] }
     ];
 
@@ -1921,7 +1926,7 @@
     SacInputSearchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputsearch',
-                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <span class=\"input-group-btn\">\r\n                <button\r\n                    type=\"submit\"\r\n                    class=\"btn btn-default\"\r\n                    id=\"{{ name }}_search\"\r\n                    (click)=\"searchClick()\">\r\n                    <i\r\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n                        [class]=\"iconname\"\r\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\r\n                    </i>\r\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\r\n                </button>\r\n            </span>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <span class=\"input-group-btn\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn btn-default\"\r\n                    id=\"{{ name }}_search\"\r\n                    (click)=\"searchClick()\">\r\n                    <i\r\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n                        [class]=\"iconname\"\r\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\r\n                    </i>\r\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\r\n                </button>\r\n            </span>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2331,63 +2336,55 @@
                 },] }
     ];
 
-    var SacTreeViewComponent = /** @class */ (function (_super) {
-        __extends(SacTreeViewComponent, _super);
-        function SacTreeViewComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    /**
+     * Treeview Compomnent
+     */
+    var SacTreeviewComponent = /** @class */ (function (_super) {
+        __extends(SacTreeviewComponent, _super);
+        // #region Constructors
+        /**
+         * Constructor
+         * @param formLayout SacFormLayout to define scoped layout settings
+         * @param injector Component Injector
+         */
+        function SacTreeviewComponent(formLayout, injector) {
+            return _super.call(this, formLayout, injector) || this;
         }
-        return SacTreeViewComponent;
-    }(sacCommon.SacTreeViewCommon));
-    SacTreeViewComponent.decorators = [
+        return SacTreeviewComponent;
+    }(sacCommon.SacTreeviewCommon));
+    SacTreeviewComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-treeview',
-                    template: "<div class=\"structure panel panel-default\" icon=\"Structure\">\r\n  <div class=\"panel-heading\">\r\n    <p class=\"panel-title\"><span>{{ name }}</span></p>\r\n  </div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"right\">\r\n      <div\r\n        class=\"form-submit form-inline\"\r\n        style=\"text-align: right; height: 24px\"\r\n      >\r\n        <a class=\"btn-inline\"\r\n          ><i class=\"icon icon-base-expand\" (click)=\"collapseAllNode(false)\"></i\r\n        ></a>\r\n        <a class=\"btn-inline\"\r\n          ><i\r\n            class=\"icon icon-base-collapse\"\r\n            (click)=\"collapseAllNode(true)\"\r\n          ></i\r\n        ></a>\r\n      </div>\r\n    </div>\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"structure-tree single-root jstree jstree-1 jstree-default\"\r\n    >\r\n      <ul\r\n        class=\"jstree-container-ul jstree-children jstree-no-dots jstree-striped jstree-wholerow-ul\"\r\n        *ngIf=\"nodes && nodes.length\"\r\n      >\r\n        <li\r\n          *ngFor=\"let node of nodes; let last = last\"\r\n          class=\"jstree-node\"\r\n          [ngClass]=\"{\r\n      'jstree-open': !node[collapseAttr] && node[childrenAttr] && node[childrenAttr].length,\r\n      'jstree-closed': node[collapseAttr]  && node[childrenAttr] && node[childrenAttr].length,\r\n      'jstree-leaf': !node[childrenAttr].length,\r\n      'jstree-last': last\r\n    }\"\r\n          [id]=\"node[idAttr]\"\r\n        >\r\n          <div\r\n            unselectable=\"on\"\r\n            role=\"presentation\"\r\n            class=\"jstree-wholerow\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n            [ngClass]=\"{'jstree-wholerow-clicked': node === selectedNode, 'jstree-wholerow-hovered': node.hover}\"\r\n          >\r\n            &nbsp;\r\n          </div>\r\n\r\n          <i\r\n            class=\"jstree-icon jstree-ocl\"\r\n            role=\"presentation\"\r\n            (click)=\"onCollapseClick(node)\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n          ></i>\r\n\r\n          <a\r\n            class=\"jstree-anchor\"\r\n            (click)=\"onClick(node)\"\r\n            [ngClass]=\"{'jstree-clicked': node === selectedNode, 'jstreehovered': node.hover}\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"treefileicon; context { item: node }\"\r\n              ;\r\n              content\r\n            ></ng-container>\r\n\r\n            <span>{{node[textAttr]}}</span>\r\n          </a>\r\n\r\n          <ng-container\r\n            *ngTemplateOutlet=\"template; context { item: node }\"\r\n            ;\r\n            content\r\n          ></ng-container>\r\n\r\n          <sac-treeviewchild\r\n            *ngIf=\"node[childrenAttr] && node[childrenAttr].length\"\r\n            [fileicontemplate]=\"fileicontemplate\"\r\n            [template]=\"template\"\r\n            [collapseall]=\"collapseall\"\r\n            [ngClass]=\"(node[collapseAttr]===true)?'collapse':'show'\"\r\n            [data]=\"node[childrenAttr]\"\r\n            [idAttr]=\"idAttr\"\r\n            [parentAttr]=\"parentAttr\"\r\n            [textAttr]=\"textAttr\"\r\n            [prepareData]=\"false\"\r\n            (onselecteditem)=\"sendMsgToParent($event)\"\r\n            [(selectedid)]=\"selectedid\"\r\n          >\r\n          </sac-treeviewchild>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
-                },] }
-    ];
-
-    var SacTreeViewChildComponent = /** @class */ (function (_super) {
-        __extends(SacTreeViewChildComponent, _super);
-        function SacTreeViewChildComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacTreeViewChildComponent;
-    }(sacCommon.SacTreeViewChildCommon));
-    SacTreeViewChildComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-treeviewchild',
-                    template: "<ul class=\"jstree-children\" *ngIf=\"nodes && nodes.length\">\r\n  <li\r\n    *ngFor=\"let node of nodes; let last = last\"\r\n    class=\"jstree-node\"\r\n    [ngClass]=\"{\r\n    'jstree-open': !node[collapseAttr] && node[childrenAttr] && node[childrenAttr].length,\r\n    'jstree-closed': node[collapseAttr]  && node[childrenAttr] && node[childrenAttr].length,\r\n    'jstree-leaf': !node[childrenAttr].length,\r\n    'jstree-last': last\r\n      }\"\r\n    [id]=\"node[idAttr]\"\r\n  >\r\n    <div\r\n      unselectable=\"on\"\r\n      role=\"presentation\"\r\n      class=\"jstree-wholerow\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n      [ngClass]=\"{'jstree-wholerow-clicked': node === selectedNode, 'jstree-wholerow-hovered': node.hover}\"\r\n    >\r\n      &nbsp;\r\n    </div>\r\n\r\n    <i\r\n      class=\"jstree-icon jstree-ocl\"\r\n      role=\"presentation\"\r\n      (click)=\"onCollapseClick(node)\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n    ></i>\r\n\r\n    <a\r\n      class=\"jstree-anchor\"\r\n      (click)=\"onClick(node)\"\r\n      [ngClass]=\"{'jstree-clicked': node === selectedNode, 'jstreehovered': node.hover}\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"treefileicon; context { item: node }\"\r\n        ;\r\n        content\r\n      ></ng-container>\r\n\r\n      {{node[textAttr]}}\r\n    </a>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"template; context { item: node }\"\r\n    ></ng-container>\r\n\r\n    <sac-treeviewchild\r\n      *ngIf=\"node[childrenAttr] && node[childrenAttr].length\"\r\n      [fileicontemplate]=\"fileicontemplate\"\r\n      [template]=\"template\"\r\n      [collapseall]=\"collapseall\"\r\n      [ngClass]=\"(node[collapseAttr]===true)?'collapse':'show'\"\r\n      [data]=\"node[childrenAttr]\"\r\n      [idAttr]=\"idAttr\"\r\n      [parentAttr]=\"parentAttr\"\r\n      [textAttr]=\"textAttr\"\r\n      [prepareData]=\"false\"\r\n      (onselecteditem)=\"sendMsgToParent($event)\"\r\n      [(selectedid)]=\"selectedid\"\r\n    >\r\n    </sac-treeviewchild>\r\n  </li>\r\n</ul>\r\n"
-                },] }
-    ];
-
-    var SacTreeItemActionComponent = /** @class */ (function (_super) {
-        __extends(SacTreeItemActionComponent, _super);
-        function SacTreeItemActionComponent(el) {
-            return _super.call(this, el) || this;
-        }
-        return SacTreeItemActionComponent;
-    }(sacCommon.SacTreeItemActionCommon));
-    SacTreeItemActionComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-treeitemaction',
-                    template: "<i class=\"{{transformClass(iconstyle)}}\" (mouseover)=\"item.hover=true\" (mouseout)=\"item.hover=false\" (click)=\"iconaction()\" ></i>"
+                    template: "<div\r\n    class=\"row mb-3\"\r\n    [class.g-0]=\"disablelabel\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\r\n                <table\r\n                    class=\"table table-hover table-condensed\"\r\n                    id=\"{{ name }}\"\r\n                    style=\"table-layout: fixed\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [class.border]=\"invalid && (dirty || touched)\"\r\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\r\n                    <tbody>\r\n                        <ng-container *ngFor=\"let node of data\">\r\n                            <ng-template\r\n                                [ngTemplateOutlet]=\"treeItem\"\r\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0 }\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"help-block\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n\r\n                <p\r\n                    *ngIf=\"helptextmode === 'text' && helptext\"\r\n                    class=\"help-block\">\r\n                    {{ helptext }}\r\n                </p>\r\n            </div>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template\r\n    #treeItem\r\n    let-node=\"node\"\r\n    let-deep=\"deep\">\r\n    <tr [class.active]=\"isSelectedState(node)\">\r\n        <td>\r\n            <div\r\n                class=\"py-1 px-2 d-flex align-items-center\"\r\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\r\n                (mouseenter)=\"setHoverState(node, true)\"\r\n                (mouseleave)=\"setHoverState(node, false)\">\r\n                <div\r\n                    style=\"margin-right: 15px\"\r\n                    *ngFor=\"let i of count(deep)\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\r\n                    style=\"margin-right: 15px\"\r\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"attricon && getStringField(node, attricon)\"\r\n                    style=\"margin-right: 15px\"\r\n                    [ngClass]=\"getStringField(node, attricon)\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\r\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\r\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\r\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\r\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\r\n                    </ng-template>\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"setSelectedState(node)\"\r\n                    style=\"flex-shrink: 0\"\r\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </tr>\r\n    <ng-container *ngIf=\"isExpandedState(node)\">\r\n        <ng-template\r\n            *ngFor=\"let child of getChildren(node)\"\r\n            [ngTemplateOutlet]=\"treeItem\"\r\n            [ngTemplateOutletContext]=\"{ node: child, deep: deep + 1 }\">\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateLabel\r\n    let-label=\"label\"\r\n    let-node=\"node\">\r\n    <span [title]=\"label\">\r\n        {{ label }}\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateAction\r\n    let-node=\"node\"\r\n    let-actionhandler=\"actionhandler\">\r\n    <a\r\n        class=\"btn btn-link text-secondary\"\r\n        (click)=\"actionhandler({ action: 'default', node: node })\">\r\n        <i [class]=\"iconAction\"></i>\r\n    </a>\r\n</ng-template>\r\n",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacTreeviewComponent,
+                        },
+                        {
+                            provide: forms.NG_VALIDATORS,
+                            useExisting: core.forwardRef(function () { return SacTreeviewComponent; }),
+                            multi: true,
+                        },
+                    ]
                 },] }
     ];
-    SacTreeItemActionComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+    SacTreeviewComponent.ctorParameters = function () { return [
+        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: core.Injector }
     ]; };
 
-    var SACBootstrap3TtreeviewModule = /** @class */ (function () {
-        function SACBootstrap3TtreeviewModule() {
+    var SACBootstrap3TreeviewModule = /** @class */ (function () {
+        function SACBootstrap3TreeviewModule() {
         }
-        return SACBootstrap3TtreeviewModule;
+        return SACBootstrap3TreeviewModule;
     }());
-    SACBootstrap3TtreeviewModule.decorators = [
+    SACBootstrap3TreeviewModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [SacTreeViewComponent, SacTreeViewChildComponent, SacTreeItemActionComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacTreeViewComponent, SacTreeViewChildComponent, SacTreeItemActionComponent]
+                    declarations: [SacTreeviewComponent],
+                    imports: [common.CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACBootstrap3ContextmenuModule],
+                    exports: [SacTreeviewComponent],
                 },] }
     ];
 
@@ -2840,7 +2837,7 @@
     exports.SACBootstrap3TabsModule = SACBootstrap3TabsModule;
     exports.SACBootstrap3TinyMceModule = SACBootstrap3TinyMceModule;
     exports.SACBootstrap3TooltipModule = SACBootstrap3TooltipModule;
-    exports.SACBootstrap3TtreeviewModule = SACBootstrap3TtreeviewModule;
+    exports.SACBootstrap3TreeviewModule = SACBootstrap3TreeviewModule;
     exports.SACBootstrap3UploadModule = SACBootstrap3UploadModule;
     exports.SACBootstrap3ValidationSummaryModule = SACBootstrap3ValidationSummaryModule;
     exports.SACBootstrap3WizardModule = SACBootstrap3WizardModule;
@@ -2891,9 +2888,7 @@
     exports.SacToLabelHeightPipe = SacToLabelHeightPipe;
     exports.SacToLabelWidthCssPipe = SacToLabelWidthCssPipe;
     exports.SacTooltipComponent = SacTooltipComponent;
-    exports.SacTreeItemActionComponent = SacTreeItemActionComponent;
-    exports.SacTreeViewChildComponent = SacTreeViewChildComponent;
-    exports.SacTreeViewComponent = SacTreeViewComponent;
+    exports.SacTreeviewComponent = SacTreeviewComponent;
     exports.SacUploadComponent = SacUploadComponent;
     exports.SacUploadMultipleComponent = SacUploadMultipleComponent;
     exports.SacValidationSummaryComponent = SacValidationSummaryComponent;