tnx-shared 5.1.352 → 5.1.355

package/bundles/tnx-shared.umd.js

@@ -1977,7 +1977,7 @@
         function TabViewData(init) {
             this.hidden = false;
             this.alwayRender = false;
-            this.useScrollbar = false; // Config để xác định có sử dụng custom-scrollbar không, nếu không thì dùng scrollbar mặc định của trình duyệt
+            this.useScrollbar = true; // Config để xác định có sử dụng custom-scrollbar không, nếu không thì dùng scrollbar mặc định của trình duyệt
             for (var key in init) {
                 this[key] = init[key];
             }
@@ -17663,6 +17663,24 @@
         { type: StorageUpdatedService }
     ]; };
 
+    var ComponentBaseWithButton = /** @class */ (function (_super) {
+        __extends(ComponentBaseWithButton, _super);
+        function ComponentBaseWithButton(_injector) {
+            return _super.call(this, _injector) || this;
+        }
+        return ComponentBaseWithButton;
+    }(ComponentBase));
+    ComponentBaseWithButton.decorators = [
+        { type: i0.Directive }
+    ];
+    ComponentBaseWithButton.ctorParameters = function () { return [
+        { type: i0.Injector }
+    ]; };
+    ComponentBaseWithButton.propDecorators = {
+        buttonTemplate: [{ type: i0.ViewChild, args: ['buttonTemplate', { static: true },] }],
+        tabCode: [{ type: i0.Input }]
+    };
+
     var DataFormBase = /** @class */ (function (_super) {
         __extends(DataFormBase, _super);
         function DataFormBase(_injector) {
@@ -18509,7 +18527,7 @@
             return this._getFormState() == exports.FormState.VIEW;
         };
         return DataFormBase;
-    }(ComponentBase));
+    }(ComponentBaseWithButton));
     DataFormBase.decorators = [
         { type: i0.Directive }
     ];
@@ -18520,7 +18538,6 @@
         crudForm: [{ type: i0.ViewChild, args: [CrudFormComponent, { static: false },] }],
         formElement: [{ type: i0.ViewChild, args: ['formElement', { static: true },] }],
         pUpload: [{ type: i0.ViewChild, args: ['pUpload', { static: true },] }],
-        buttonTemplate: [{ type: i0.ViewChild, args: ['buttonTemplate', { static: true },] }],
         parentSetting: [{ type: i0.Input }],
         model: [{ type: i0.Input }],
         forceOnlyView: [{ type: i0.Input }],
@@ -25461,7 +25478,7 @@
             this.showDetailForm = false;
         };
         return ListBase;
-    }(ComponentBase));
+    }(ComponentBaseWithButton));
     ListBase.decorators = [
         { type: i0.Directive }
     ];
@@ -44995,7 +45012,7 @@
                     selector: 'state',
                     template: "<div [class]=\"'node type-' + machine.type\" [ngStyle]=\"{'cursor': viewOnly ? 'default' : 'move'}\"\r\n    [id]=\"'div-' + machine.id\" [class.current]=\"machine.current\" [class.disabled]=\"machine.disabled\"\r\n    (contextmenu)=\"handleRightClick($event)\">\r\n    <span *ngIf=\"machine.current\" class=\"machine-icon\">\r\n        <i class=\"far fa-pause-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.START\" class=\"machine-icon\">\r\n        <i class=\"far fa-play-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.STOP\" class=\"machine-icon\">\r\n        <i class=\"far fa-stop-circle\"></i>\r\n    </span>\r\n    <div class=\"machine-code\">\r\n        {{viewOnly ? machine.name : machine.code}}</div>\r\n    <p class=\"machine-name\">\r\n        <b *ngIf=\"!viewOnly\">{{machine.name + ': '}}</b>\r\n        {{machine.description}}\r\n    </p>\r\n    <a *ngIf=\"!viewOnly\" class=\"btn-connect\" [pTooltip]=\"'Nh\u1EA5n gi\u1EEF v\u00E0 k\u00E9o \u0111\u1EC3 k\u1EBFt n\u1ED1i tr\u1EA1ng th\u00E1i'\"\r\n        tooltipStyleClass=\"wrap\">\r\n    </a>\r\n    <div *ngIf=\"!viewOnly\" class=\"btn-holder\">\r\n        <a class=\"btn btn-edit\" (click)=\"editNode()\">\r\n            <i class=\"far fa-edit\"></i>\r\n        </a>\r\n        <a class=\"btn btn-delete\" (click)=\"deleteNode()\">\r\n            <i class=\"far fa-trash-alt\"></i>\r\n        </a>\r\n    </div>\r\n</div>",
                     providers: [ComponentContextService],
-                    styles: [".node{-moz-box-shadow:2px 2px 10px 1px #c3c3c3;-o-box-shadow:2px 2px 10px 1px #c3c3c3;-webkit-box-shadow:2px 2px 10px 1px #c3c3c3;border:1px solid green;border-radius:5px;box-shadow:0 5px 10px 0 #b0c1d9;box-shadow:2px 2px 10px 1px #c3c3c3;color:#353535;height:100px;max-height:100px;overflow:hidden;padding:4px 0;position:absolute;text-align:center;width:150px;z-index:1}.node .btn-holder{background:rgba(0,0,0,.23137254901960785);bottom:-35px;display:inline-block;font-size:.8em;left:0;padding:5px;position:absolute;text-align:right;transition:bottom .15s;width:100%}.node .btn-holder .btn{border-radius:5px;color:#fff;cursor:pointer;display:inline-block;height:25px;line-height:20px;margin-right:5px;padding-left:1px;padding-top:2px;text-align:center;width:25px}.node .btn-holder .btn.btn-edit{background-color:#2196f3}.node .btn-holder .btn.btn-edit:hover{background-color:#69b5f3}.node .btn-holder .btn.btn-delete{background-color:#f56060}.node .btn-holder .btn.btn-delete:hover{background-color:#f78d8d}.node .btn-connect{background-color:orange;box-shadow:0 0 2px #000;cursor:pointer;height:16px;position:absolute;right:-20px;top:calc(50% - 9px);transition:right .15s;transition:box-shadow .25s ease-in;width:16px}.node .machine-code{border-bottom:1px solid green}.node.type-1{background-color:#adc58d}.node.type-1,.node.type-1 .machine-code{border-color:#fff}.node.type-4{background-color:#fff}.node.type-4,.node.type-4 .machine-code{border-color:#65aedf}.node.type-5{background-color:#ffc107}.node.type-5,.node.type-5 .machine-code{border-color:#795548}.node.disabled{background-color:#ddd}.node.disabled,.node.disabled .machine-code{border-color:#989898}.node.current{background-color:#94c2ea}.node.current,.node.current .machine-code{border-color:#fff}.node:hover{-moz-box-shadow:2px 2px 19px #909090;-o-box-shadow:2px 2px 19px #909090;-webkit-box-shadow:2px 2px 19px #909090;box-shadow:2px 2px 19px #909090;z-index:5}.node:hover .btn-holder{bottom:0}.node:hover .btn-connect{right:5px}.machine-icon{color:#fff;font-size:18px;position:absolute;right:3px;text-shadow:1px 1px 2px #383838;top:3px}.machine-code{font-weight:700;height:21px;overflow:hidden;padding-left:5px;text-align:left}.machine-name{height:calc(100% - 17px);margin-bottom:25px;overflow-y:auto;padding:5px;text-align:justify}"]
+                    styles: [".node{-moz-box-shadow:2px 2px 10px 1px #c3c3c3;-o-box-shadow:2px 2px 10px 1px #c3c3c3;-webkit-box-shadow:2px 2px 10px 1px #c3c3c3;border:1px solid green;border-radius:5px;box-shadow:0 5px 10px 0 #b0c1d9;box-shadow:2px 2px 10px 1px #c3c3c3;color:#353535;display:flex;flex-direction:column;height:100px;max-height:100px;overflow:hidden;padding:4px 0;position:absolute;text-align:center;width:150px;z-index:1}.node .btn-holder{background:rgba(0,0,0,.23137254901960785);bottom:-35px;display:inline-block;font-size:.8em;left:0;padding:5px;position:absolute;text-align:right;transition:bottom .15s;width:100%}.node .btn-holder .btn{border-radius:5px;color:#fff;cursor:pointer;display:inline-block;height:25px;line-height:20px;margin-right:5px;padding-left:1px;padding-top:2px;text-align:center;width:25px}.node .btn-holder .btn.btn-edit{background-color:#2196f3}.node .btn-holder .btn.btn-edit:hover{background-color:#69b5f3}.node .btn-holder .btn.btn-delete{background-color:#f56060}.node .btn-holder .btn.btn-delete:hover{background-color:#f78d8d}.node .btn-connect{background-color:orange;box-shadow:0 0 2px #000;cursor:pointer;height:16px;position:absolute;right:-20px;top:calc(50% - 9px);transition:right .15s;transition:box-shadow .25s ease-in;width:16px}.node .machine-code{border-bottom:1px solid green}.node.type-1{background-color:#adc58d}.node.type-1,.node.type-1 .machine-code{border-color:#fff}.node.type-4{background-color:#fff}.node.type-4,.node.type-4 .machine-code{border-color:#65aedf}.node.type-5{background-color:#ffc107}.node.type-5,.node.type-5 .machine-code{border-color:#795548}.node.disabled{background-color:#ddd}.node.disabled,.node.disabled .machine-code{border-color:#989898}.node.current{background-color:#94c2ea}.node.current,.node.current .machine-code{border-color:#fff}.node:hover{-moz-box-shadow:2px 2px 19px #909090;-o-box-shadow:2px 2px 19px #909090;-webkit-box-shadow:2px 2px 19px #909090;box-shadow:2px 2px 19px #909090;z-index:5}.node:hover .btn-holder{bottom:0}.node:hover .btn-connect{right:5px}.machine-icon{color:#fff;font-size:18px;position:absolute;right:3px;text-shadow:1px 1px 2px #383838;top:3px}.machine-code{flex:0 0 auto;font-weight:700;min-height:21px;overflow:hidden;padding-left:5px;text-align:left}.machine-name{height:calc(100% - 17px);margin-bottom:25px;overflow-y:auto;padding:5px;text-align:justify}"]
                 },] }
     ];
     StateComponent.ctorParameters = function () { return [
@@ -48490,8 +48507,8 @@
             this.data = [];
             this.allowViewAll = false;
             this.isDynamicHeight = false;
-            this.onTabChange = new i0.EventEmitter();
             this.activeCodeChange = new i0.EventEmitter();
+            this.tabContentChange = new i0.EventEmitter();
             this.template = {};
             this.onlyIcon = false;
             this.styleClass = 'tn-tabview-beauty';
@@ -48513,6 +48530,17 @@
             configurable: true
         });
         ;
+        Object.defineProperty(TnTabViewComponent.prototype, "tabContents", {
+            set: function (value) {
+                this._tabContents = value;
+                if (this.ready) {
+                    this.setActiveTabContent();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
         Object.defineProperty(TnTabViewComponent.prototype, "vertical", {
             set: function (value) {
                 this._vertical = value;
@@ -48571,11 +48599,32 @@
             this.styleClass = result;
         };
         TnTabViewComponent.prototype.handleTabChange = function (evt) {
+            var e_1, _a;
             this.currentTabIndex = evt.index;
-            this.setActiveTabCodeAndFireEvent();
+            var index = 0;
+            try {
+                for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var item = _c.value;
+                    if (!item.hidden && this.template[item.code]) {
+                        if (index == this.currentTabIndex) {
+                            this.currentTabCode = item.code;
+                            break;
+                        }
+                        index++;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            this.activeCodeChange.emit(this.currentTabCode);
         };
         TnTabViewComponent.prototype.setActiveTabCodeAndFireEvent = function () {
-            var e_1, _a;
+            var e_2, _a;
             var index = -1;
             var firsItem = null;
             var lastItem = null;
@@ -48594,12 +48643,12 @@
                     }
                 }
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_2) throw e_2.error; }
             }
             // Nếu có item display thì ms set active
             if (index > -1) {
@@ -48609,11 +48658,15 @@
                     this.currentTabCode = firsItem.code;
                 }
                 this.activeCodeChange.emit(this.currentTabCode);
-                this.onTabChange.emit({
-                    index: this.currentTabIndex,
-                    code: this.currentTabCode
-                });
             }
+            this.setActiveTabContent();
+        };
+        TnTabViewComponent.prototype.setActiveTabContent = function () {
+            var _this = this;
+            if (!this._tabContents)
+                return;
+            var tabContent = this._tabContents.find(function (q) { return q.tabCode == _this.currentTabCode; });
+            this.tabContentChange.emit(tabContent);
         };
         return TnTabViewComponent;
     }());
@@ -48629,13 +48682,14 @@
     ]; };
     TnTabViewComponent.propDecorators = {
         children: [{ type: i0.ContentChildren, args: [i0.TemplateRef,] }],
+        tabContents: [{ type: i0.ContentChildren, args: ['tabContent', { descendants: true },] }],
         vertical: [{ type: i0.Input }],
         data: [{ type: i0.Input }],
         allowViewAll: [{ type: i0.Input }],
         activeCode: [{ type: i0.Input }],
         isDynamicHeight: [{ type: i0.Input }],
-        onTabChange: [{ type: i0.Output }],
-        activeCodeChange: [{ type: i0.Output }]
+        activeCodeChange: [{ type: i0.Output }],
+        tabContentChange: [{ type: i0.Output }]
     };
 
     var TnTemplateComponent = /** @class */ (function (_super) {
@@ -59862,6 +59916,7 @@
     exports.CommonService = CommonService;
     exports.CompareValidator = CompareValidator;
     exports.ComponentBase = ComponentBase;
+    exports.ComponentBaseWithButton = ComponentBaseWithButton;
     exports.ComponentConstants = ComponentConstants;
     exports.ComponentContextService = ComponentContextService;
     exports.ConditionalBuilderService = ConditionalBuilderService;