ng-inail-common 2.0.25 → 2.0.28

package/bundles/ng-inail-common.umd.js

@@ -4657,6 +4657,7 @@
 
     var KEYCODE_TAB = 9;
     var FOCUSABLE_SELECTOR = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+    var PREVENT_PADDING_STYLE_CLASS = 'inail-modal-prevent-padding-style';
     var ModalComponent = /** @class */ (function (_super) {
         __extends(ModalComponent, _super);
         function ModalComponent(cdr) {
@@ -4665,6 +4666,7 @@
             _this.closeButtonTitle = 'Chiudi modale';
             _this.close = new core.EventEmitter();
             _this.width = 'M';
+            _this.preventPageScroll = true;
             _this.closeOnClick = function () { return _this.showModal(false); };
             _this.setFocusOnLastPageActiveElement = function () {
                 if (_this.pageActiveElement != undefined) {
@@ -4707,17 +4709,54 @@
         };
         ModalComponent.prototype.showModal = function (show) {
             var _this = this;
+            if (show && !this.preventPageScroll) {
+                this.inserisciPreventBodyPaddingStyle();
+            }
             window['$']("#" + this.id).modal(show ? 'show' : 'hide');
             if (show) {
                 setTimeout(function () { return _this.trapFocus(); }, 500);
-                setPageScroll(false);
+                if (this.preventPageScroll) {
+                    setPageScroll(false);
+                }
             }
             else {
                 this.close.emit();
-                setPageScroll(true);
+                if (this.preventPageScroll) {
+                    this.ripristinaPageScroll();
+                }
+                else {
+                    this.rimuoviPreventBodyPaddingStyle();
+                }
                 setTimeout(function () { return _this.setFocusOnLastPageActiveElement(); }, 500);
             }
         };
+        /**
+         * L'inserimento di questo style ha lo scopo di effettuare l'override
+         * della regola sul padding-right inserita da bootstrap in fase di apertura della modale
+         * la quale causa un restringimento del body se la scrollbar non viene rimossa.
+         */
+        ModalComponent.prototype.inserisciPreventBodyPaddingStyle = function () {
+            if (!window['$']("." + PREVENT_PADDING_STYLE_CLASS).length) {
+                window['$']('<style>', { class: "" + PREVENT_PADDING_STYLE_CLASS }).text('body.modal-open { padding-right: 0!important; }').appendTo('head');
+            }
+        };
+        ModalComponent.prototype.rimuoviPreventBodyPaddingStyle = function () {
+            setTimeout(function () { var _a; return (_a = window['$']("." + PREVENT_PADDING_STYLE_CLASS)) === null || _a === void 0 ? void 0 : _a.remove(); }, 500);
+        };
+        ModalComponent.prototype.ripristinaPageScroll = function () {
+            var counter = 0;
+            // Evita il glitch grafico che fa restringere ed allargare
+            // il body alla chiusura della modale
+            // causato dall'inserimento del paddingRight ad opera
+            // di bootstrap
+            var handle = setInterval(function () {
+                if (document.body.style.paddingRight == "" || counter == 100) {
+                    clearInterval(handle);
+                    setPageScroll(true);
+                }
+                counter++;
+            }, 5);
+        };
         ModalComponent.prototype.trapFocus = function () {
             var thisModal = window['$']("#" + this.id);
             var focusableEls = thisModal.find(".modal-content").find(FOCUSABLE_SELECTOR);
@@ -4774,7 +4813,8 @@
         close: [{ type: core.Output }],
         show: [{ type: core.Input }],
         width: [{ type: core.Input }],
-        setFocusOnError: [{ type: core.Input }]
+        setFocusOnError: [{ type: core.Input }],
+        preventPageScroll: [{ type: core.Input }]
     };
 
     var AlertComponent = /** @class */ (function (_super) {
@@ -4782,7 +4822,11 @@
         function AlertComponent(_cdr) {
             var _this = _super.call(this, _cdr) || this;
             _this._cdr = _cdr;
-            _this.okOnClick = function () { return _this.showModal(false); };
+            _this.closeButtonTitle = 'Chiudi modale';
+            _this.close = new core.EventEmitter();
+            _this.width = 'M';
+            _this.preventPageScroll = true;
+            _this.okOnClick = function () { var _a; return (_a = _this.show) === null || _a === void 0 ? void 0 : _a.emit(false); };
             _this.logPrefix = '[inail-alert]';
             _this.title = 'Messaggio informativo';
             _this.width = 'S';
@@ -4804,11 +4848,11 @@
             _super.prototype.ngOnDestroy.call(this);
         };
         return AlertComponent;
-    }(ModalComponent));
+    }(BasicUxElementComponent));
     AlertComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'inail-alert',
-                    template: "<inail-modal [id]=\"id\"\n             [show]=\"show\"\n             [class]=\"class\"\n             [title]=\"title\"\n             [closeButtonTitle]=\"closeButtonTitle\"\n             [logOnConsole]=\"logOnConsole\"\n             [width]=\"this.width\"\n             (close)=\"close.emit($event)\"\n             (log)=\"log.emit($event)\">\n  <div class=\"row\">\n    <p *ngIf=\"message\" [innerHTML]=\"message\"></p>\n    <p *ngIf=\"!message\">\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <div class=\"row alert-footer\">\n    <button type=\"button\"\n            (click)=\"okOnClick()\"\n            class=\"btn btn-primary pull-right\">Ok\n    </button>\n  </div>\n</inail-modal>\n",
+                    template: "<inail-modal #modalComponent\n             [id]=\"id\"\n             [show]=\"show\"\n             [preventPageScroll]=\"preventPageScroll\"\n             [class]=\"class\"\n             [title]=\"title\"\n             [closeButtonTitle]=\"closeButtonTitle\"\n             [logOnConsole]=\"logOnConsole\"\n             [width]=\"this.width\"\n             (close)=\"close.emit($event)\"\n             (log)=\"log.emit($event)\">\n  <div class=\"row\">\n    <p *ngIf=\"message\" [innerHTML]=\"message\"></p>\n    <p *ngIf=\"!message\">\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <div class=\"row alert-footer\">\n    <button type=\"button\"\n            (click)=\"okOnClick()\"\n            class=\"btn btn-primary pull-right\">Ok\n    </button>\n  </div>\n</inail-modal>\n",
                     changeDetection: CHANGE_DETECTION_STRATEGY,
                     encapsulation: core.ViewEncapsulation.None,
                     styles: [".alert-footer{padding-bottom:20px!important;padding-top:20px!important}.alert-footer button{margin-right:0!important}"]
@@ -4818,7 +4862,15 @@
         { type: core.ChangeDetectorRef }
     ]; };
     AlertComponent.propDecorators = {
-        message: [{ type: core.Input }]
+        title: [{ type: core.Input }],
+        closeButtonTitle: [{ type: core.Input }],
+        close: [{ type: core.Output }],
+        show: [{ type: core.Input }],
+        width: [{ type: core.Input }],
+        setFocusOnError: [{ type: core.Input }],
+        preventPageScroll: [{ type: core.Input }],
+        message: [{ type: core.Input }],
+        modalComponent: [{ type: core.ViewChild, args: ['modalComponent',] }]
     };
 
     var ConfirmComponent = /** @class */ (function (_super) {
@@ -4826,11 +4878,14 @@
         function ConfirmComponent(_cdr) {
             var _this = _super.call(this, _cdr) || this;
             _this._cdr = _cdr;
+            _this.closeButtonTitle = 'Chiudi modale';
+            _this.close = new core.EventEmitter();
+            _this.width = 'M';
+            _this.preventPageScroll = true;
             _this.confirmButtonLabel = 'Si';
             _this.rejectButtonLabel = 'No';
             _this.confirm = new core.EventEmitter();
             _this.reject = new core.EventEmitter();
-            _this.cancel = new core.EventEmitter();
             _this.logPrefix = '[inail-confirm]';
             _this.title = 'Conferma operazione';
             _this.message = 'Confermare l\'operazione richiesta?';
@@ -4853,23 +4908,26 @@
             _super.prototype.ngOnDestroy.call(this);
         };
         ConfirmComponent.prototype.confirmOnClick = function () {
-            this.showModal(false);
+            this.action = 'y';
+            this.show.emit(false);
             this.confirm.emit();
+            this.action = undefined;
         };
         ConfirmComponent.prototype.rejectOnClick = function () {
-            this.showModal(false);
+            this.action = 'n';
+            this.show.emit(false);
             this.reject.emit();
+            this.action = undefined;
         };
-        ConfirmComponent.prototype.cancelOnClick = function () {
-            this.showModal(false);
-            this.cancel.emit();
+        ConfirmComponent.prototype.onClose = function () {
+            this.close.emit(this.action || 'x');
         };
         return ConfirmComponent;
-    }(ModalComponent));
+    }(BasicUxElementComponent));
     ConfirmComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'inail-confirm',
-                    template: "<inail-modal [id]=\"id\"\n             [show]=\"show\"\n             [class]=\"class\"\n             [title]=\"title\"\n             [closeButtonTitle]=\"closeButtonTitle\"\n             [logOnConsole]=\"logOnConsole\"\n             [width]=\"width\"\n             (close)=\"cancelOnClick()\"\n             (log)=\"log.emit($event)\">\n  <div class=\"row\">\n    <p *ngIf=\"message\" [innerHTML]=\"message\"></p>\n    <p *ngIf=\"!message\">\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <div class=\"row confirm-footer\">\n    <inail-button [label]=\"rejectButtonLabel\"\n                  (onclick)=\"rejectOnClick()\">\n    </inail-button>\n    <inail-button [class]=\"'pull-right'\"\n                  [setFocusOnError]=\"setFocusOnError\"\n                  [label]=\"confirmButtonLabel\"\n                  (onclick)=\"confirmOnClick()\">\n    </inail-button>\n  </div>\n</inail-modal>\n",
+                    template: "<inail-modal #modalComponent\n             [id]=\"id\"\n             [show]=\"show\"\n             [preventPageScroll]=\"preventPageScroll\"\n             [class]=\"class\"\n             [title]=\"title\"\n             [closeButtonTitle]=\"closeButtonTitle\"\n             [logOnConsole]=\"logOnConsole\"\n             [width]=\"width\"\n             (close)=\"onClose()\"\n             (log)=\"log.emit($event)\">\n  <div class=\"row\">\n    <p *ngIf=\"message\" [innerHTML]=\"message\"></p>\n    <p *ngIf=\"!message\">\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <div class=\"row confirm-footer\">\n    <inail-button [label]=\"rejectButtonLabel\"\n                  (onclick)=\"rejectOnClick()\">\n    </inail-button>\n    <inail-button [class]=\"'pull-right'\"\n                  [setFocusOnError]=\"setFocusOnError\"\n                  [label]=\"confirmButtonLabel\"\n                  (onclick)=\"confirmOnClick()\">\n    </inail-button>\n  </div>\n</inail-modal>\n",
                     changeDetection: CHANGE_DETECTION_STRATEGY,
                     encapsulation: core.ViewEncapsulation.None,
                     styles: [".confirm-footer{padding-bottom:20px!important;padding-top:20px!important}.confirm-footer button{margin-right:0!important}"]
@@ -4879,12 +4937,19 @@
         { type: core.ChangeDetectorRef }
     ]; };
     ConfirmComponent.propDecorators = {
+        title: [{ type: core.Input }],
+        closeButtonTitle: [{ type: core.Input }],
+        close: [{ type: core.Output }],
+        show: [{ type: core.Input }],
+        width: [{ type: core.Input }],
+        setFocusOnError: [{ type: core.Input }],
+        preventPageScroll: [{ type: core.Input }],
         message: [{ type: core.Input }],
         confirmButtonLabel: [{ type: core.Input }],
         rejectButtonLabel: [{ type: core.Input }],
         confirm: [{ type: core.Output }],
         reject: [{ type: core.Output }],
-        cancel: [{ type: core.Output }]
+        modalComponent: [{ type: core.ViewChild, args: ['modalComponent',] }]
     };
 
     var DEFAULT_TABLE_LENGTH = 10;
@@ -5705,7 +5770,7 @@
     TableComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'inail-table',
-                    template: "<div class=\"tabella table-responsive inail-table {{getResponsiveClass()}} noPaddingLeft {{class}}\">\n\n  <h3 *ngIf=\"title\"\n      class=\"col-xs-9 table-title pull-left noPaddingLeft {{titleClass}}\"\n      [innerHTML]=\"title\">\n  </h3>\n\n  <a *ngIf=\"detailsLink\"\n     href=\"javascript:void(0)\"\n     (click)=\"detailsClick.emit()\"\n     class=\"col-xs-3 col-sm-2 linkDettagli pull-right\"\n     [innerHTML]=\"detailsLink\">\n  </a>\n\n  <div *ngIf=\"description\"\n       class=\"col-xs-12 caption marginBottom noPaddingLeft\"\n       [innerHTML]=\"description\">\n  </div>\n\n  <inail-table-page-length-selector *ngIf=\"visualizzaPaginazione()\"\n                                    [value]=\"getPageSize()\"\n                                    [tableId]=\"id\"\n                                    [options]=\"elementsPerPageOptions\"\n                                    (valueChange)=\"lengthOnChange($event)\"\n                                    [logOnConsole]=\"logOnConsole\"\n                                    (log)=\"log.emit($event)\">\n  </inail-table-page-length-selector>\n\n  <ng-container *ngIf=\"true\">\n\n    <table id=\"{{id}}\"\n           class=\"table display dataTable {{tableClass}}\"\n           [ngClass]=\"{'tabella-base': !tallRows, 'bg-white': bgWhite, 'bg-transparent': !bgWhite}\">\n\n      <caption *ngIf=\"caption\"\n               [ngClass]=\"{'sr-only': captionHidden}\"\n               [innerHTML]=\"caption\">\n      </caption>\n\n      <ng-content select=\"thead\"></ng-content>\n\n      <ng-container *ngIf=\"!noDataFound\">\n        <ng-content select=\"tbody\"></ng-content>\n      </ng-container>\n\n      <tbody *ngIf=\"noDataFound\">\n      <tr role=\"row\">\n        <td class=\"content-text\"\n            style=\"padding: 30px; text-align: center\"\n            [colSpan]=\"numeroColonne\"\n            [innerHTML]=\"noDataFoundText\">\n        </td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div #baseFooter\n         class=\"col-xs-12 baseFooter noPaddingLeft\"\n         *ngIf=\"visualizzaBaseFooter\">\n      <ng-content select=\"[baseFooter]\"></ng-content>\n    </div>\n\n  </ng-container>\n\n  <inail-table-page-selector *ngIf=\"visualizzaPaginazione() && !this.noDataFound\"\n                             [listSize]=\"getListSize()\"\n                             [pageSize]=\"getPageSize()\"\n                             [currentPage]=\"getCurrentPage()\"\n                             [tableId]=\"id\"\n                             (select)=\"pageOnChange($event)\"\n                             [logOnConsole]=\"logOnConsole\"\n                             (log)=\"log.emit($event)\">\n  </inail-table-page-selector>\n\n</div>\n",
+                    template: "<div class=\"tabella table-responsive inail-table {{getResponsiveClass()}} noPaddingLeft {{class}} noPaddingRight\">\n\n  <h3 *ngIf=\"title\"\n      class=\"col-xs-9 table-title pull-left noPaddingLeft {{titleClass}}\"\n      [innerHTML]=\"title\">\n  </h3>\n\n  <a *ngIf=\"detailsLink\"\n     href=\"javascript:void(0)\"\n     (click)=\"detailsClick.emit()\"\n     class=\"col-xs-3 col-sm-2 linkDettagli pull-right\"\n     [innerHTML]=\"detailsLink\">\n  </a>\n\n  <div *ngIf=\"description\"\n       class=\"col-xs-12 caption marginBottom noPaddingLeft\"\n       [innerHTML]=\"description\">\n  </div>\n\n  <inail-table-page-length-selector *ngIf=\"visualizzaPaginazione()\"\n                                    [value]=\"getPageSize()\"\n                                    [tableId]=\"id\"\n                                    [options]=\"elementsPerPageOptions\"\n                                    (valueChange)=\"lengthOnChange($event)\"\n                                    [logOnConsole]=\"logOnConsole\"\n                                    (log)=\"log.emit($event)\">\n  </inail-table-page-length-selector>\n\n  <ng-container *ngIf=\"true\">\n\n    <table id=\"{{id}}\"\n           class=\"table display dataTable {{tableClass}}\"\n           [ngClass]=\"{'tabella-base': !tallRows, 'bg-white': bgWhite, 'bg-transparent': !bgWhite}\">\n\n      <caption *ngIf=\"caption\"\n               [ngClass]=\"{'sr-only': captionHidden}\"\n               [innerHTML]=\"caption\">\n      </caption>\n\n      <ng-content select=\"thead\"></ng-content>\n\n      <ng-container *ngIf=\"!noDataFound\">\n        <ng-content select=\"tbody\"></ng-content>\n      </ng-container>\n\n      <tbody *ngIf=\"noDataFound\">\n      <tr role=\"row\">\n        <td class=\"content-text\"\n            style=\"padding: 30px; text-align: center\"\n            [colSpan]=\"numeroColonne\"\n            [innerHTML]=\"noDataFoundText\">\n        </td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div #baseFooter\n         class=\"col-xs-12 baseFooter noPaddingLeft\"\n         *ngIf=\"visualizzaBaseFooter\">\n      <ng-content select=\"[baseFooter]\"></ng-content>\n    </div>\n\n  </ng-container>\n\n  <inail-table-page-selector *ngIf=\"visualizzaPaginazione() && !this.noDataFound\"\n                             [listSize]=\"getListSize()\"\n                             [pageSize]=\"getPageSize()\"\n                             [currentPage]=\"getCurrentPage()\"\n                             [tableId]=\"id\"\n                             (select)=\"pageOnChange($event)\"\n                             [logOnConsole]=\"logOnConsole\"\n                             (log)=\"log.emit($event)\">\n  </inail-table-page-selector>\n\n</div>\n",
                     changeDetection: CHANGE_DETECTION_STRATEGY,
                     encapsulation: core.ViewEncapsulation.None,
                     styles: [".inail-table a.linkDettagli{color:#106cdb;-webkit-text-decoration-line:none;text-decoration-line:none}.inail-table a.linkDettagli:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.inail-table table.table.dataTable.bg-white>tbody>tr:not(:hover){background-color:#fff}.inail-table table.table.dataTable.bg-transparent>tbody>tr:not(:hover){background-color:initial}"]