@coreui/angular 4.0.0-alpha.1 → 4.0.0-alpha.2

package/bundles/coreui-angular.umd.js

@@ -6065,19 +6065,20 @@
             this.backdropClick$ = this.backdropClick.asObservable();
             this.renderer = rendererFactory.createRenderer(null, null);
         }
-        BackdropService.prototype.setBackdrop = function () {
+        BackdropService.prototype.setBackdrop = function (type) {
             var _this = this;
-            var backdrop = this.renderer.createElement('div');
-            this.renderer.addClass(backdrop, 'modal-backdrop');
-            this.renderer.addClass(backdrop, 'fade');
-            this.renderer.appendChild(this.document.body, backdrop);
-            this.unListen = this.renderer.listen(backdrop, 'click', function (e) {
+            if (type === void 0) { type = 'modal'; }
+            var backdropElement = this.renderer.createElement('div');
+            this.renderer.addClass(backdropElement, type + "-backdrop");
+            this.renderer.addClass(backdropElement, 'fade');
+            this.renderer.appendChild(this.document.body, backdropElement);
+            this.unListen = this.renderer.listen(backdropElement, 'click', function (e) {
                 _this.onClickHandler();
             });
             setTimeout(function () {
-                _this.renderer.addClass(backdrop, 'show');
+                _this.renderer.addClass(backdropElement, 'show');
             });
-            return backdrop;
+            return backdropElement;
         };
         BackdropService.prototype.clearBackdrop = function (backdrop) {
             var _this = this;
@@ -6157,6 +6158,7 @@
              */
             this.visibleChange = new i0.EventEmitter();
             this._show = true;
+            this.mouseDownTarget = null;
         }
         Object.defineProperty(ModalComponent.prototype, "scrollable", {
             get: function () {
@@ -6180,11 +6182,14 @@
              * Toggle the visibility of modal component.
              * @type boolean
              */
-            set: function (visible) {
-                this._visible = visible;
-                this.setBackdrop(this.backdrop !== false && visible);
-                this.setBodyStyles(visible);
-                this.visibleChange.emit(visible);
+            set: function (value) {
+                var newValue = coercion.coerceBooleanProperty(value);
+                if (this._visible !== newValue) {
+                    this._visible = newValue;
+                    this.setBackdrop(this.backdrop !== false && newValue);
+                    this.setBodyStyles(newValue);
+                    this.visibleChange.emit(newValue);
+                }
             },
             enumerable: false,
             configurable: true
@@ -6279,14 +6284,20 @@
                 }
             }
         };
+        ModalComponent.prototype.onMouseDownHandler = function ($event) {
+            this.mouseDownTarget = $event.target;
+        };
         ModalComponent.prototype.onClickHandler = function ($event) {
+            $event.stopPropagation();
+            if (this.mouseDownTarget !== $event.target) {
+                this.mouseDownTarget = null;
+                return;
+            }
             if (this.backdrop === 'static') {
                 this.setStaticBackdrop();
+                return;
             }
-            else {
-                this.modalService.toggle({ show: false, modal: this });
-            }
-            $event.stopPropagation();
+            this.modalService.toggle({ show: false, modal: this });
         };
         ModalComponent.prototype.ngOnInit = function () {
             this.stateToggleSubscribe();
@@ -6318,7 +6329,7 @@
         };
         ModalComponent.prototype.setBackdrop = function (setBackdrop) {
             if (setBackdrop) {
-                this.activeBackdrop = this.backdropService.setBackdrop();
+                this.activeBackdrop = this.backdropService.setBackdrop('modal');
             }
             else {
                 this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
@@ -6353,7 +6364,7 @@
         return ModalComponent;
     }());
     ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ModalComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: ModalService }, { token: BackdropService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ModalComponent, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: "keyboard", id: "id", size: "size", transition: "transition", role: "role", ariaModal: "ariaModal", scrollable: "scrollable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)", "click": "onClickHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: i0.ElementRef }], exportAs: ["cModal"], ngImport: i0__namespace, template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", styles: [""], components: [{ type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { type: ModalContentComponent, selector: "c-modal-content" }], directives: [{ type: i1__namespace$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ModalComponent, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: "keyboard", id: "id", size: "size", transition: "transition", role: "role", ariaModal: "ariaModal", scrollable: "scrollable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: i0.ElementRef }], exportAs: ["cModal"], ngImport: i0__namespace, template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", styles: [""], components: [{ type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { type: ModalContentComponent, selector: "c-modal-content" }], directives: [{ type: i1__namespace$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             i1.trigger('showHide', [
                 i1.state('visible', i1.style({
                     display: 'block'
@@ -6442,6 +6453,9 @@
                 }], onKeyDownHandler: [{
                     type: i0.HostListener,
                     args: ['document:keydown', ['$event']]
+                }], onMouseDownHandler: [{
+                    type: i0.HostListener,
+                    args: ['mousedown', ['$event']]
                 }], onClickHandler: [{
                     type: i0.HostListener,
                     args: ['click', ['$event']]
@@ -6695,7 +6709,7 @@
         };
         OffcanvasComponent.prototype.setBackdrop = function (setBackdrop) {
             if (setBackdrop) {
-                this.activeBackdrop = this.backdropService.setBackdrop();
+                this.activeBackdrop = this.backdropService.setBackdrop('offcanvas');
                 this.backdropClickSubscribe();
             }
             else {