@coreui/angular 4.3.9 → 4.3.10

package/fesm2020/coreui-angular.mjs

@@ -5152,6 +5152,12 @@ class BackdropService {
         this.backdropClick$ = this.backdropClick.asObservable();
         this.renderer = rendererFactory.createRenderer(null, null);
     }
+    get scrollbarWidth() {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+        const documentWidth = this.document.documentElement.clientWidth;
+        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
+        return `${scrollbarWidth}px`;
+    }
     setBackdrop(type = 'modal') {
         const backdropElement = this.renderer.createElement('div');
         this.renderer.addClass(backdropElement, `${type}-backdrop`);
@@ -5187,7 +5193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i0.RendererFactory2 }]; } });
@@ -5291,14 +5297,8 @@ class ModalComponent {
     set show(value) {
         this._show = value;
     }
-    get scrollbarWidth() {
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-        const documentWidth = this.document.documentElement.clientWidth;
-        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
-        return `${scrollbarWidth}px`;
-    }
     animateStart(event) {
-        const scrollbarWidth = this.scrollbarWidth;
+        const scrollbarWidth = this.backdropService.scrollbarWidth;
         if (event.toState === 'visible') {
             this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
             this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
@@ -5566,18 +5566,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+var _OffcanvasComponent_scroll, _OffcanvasComponent_visible, _OffcanvasComponent_activeBackdrop, _OffcanvasComponent_scrollbarWidth, _OffcanvasComponent_stateToggleSubscription, _OffcanvasComponent_backdropClickSubscription, _OffcanvasComponent_layoutChangeSubscription, _OffcanvasComponent_show;
 let nextId = 0;
 class OffcanvasComponent {
-    constructor(document, platformId, renderer, hostElement, offcanvasService, backdropService) {
+    constructor(document, platformId, renderer, hostElement, offcanvasService, backdropService, breakpointObserver) {
         this.document = document;
         this.platformId = platformId;
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.offcanvasService = offcanvasService;
         this.backdropService = backdropService;
+        this.breakpointObserver = breakpointObserver;
         /**
          * Apply a backdrop on body while offcanvas is open.
-         * @type boolean
+         * @type boolean | 'static'
          * @default true
          */
         this.backdrop = true;
@@ -5593,7 +5595,14 @@ class OffcanvasComponent {
          * @default 'start'
          */
         this.placement = 'start';
-        this._scroll = false;
+        /**
+         * Responsive offcanvas property hides content outside the viewport from a specified breakpoint and down.
+         * @type boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+         * @default true
+         * @since 4.3.10
+         */
+        this.responsive = true;
+        _OffcanvasComponent_scroll.set(this, false);
         this.id = `offcanvas-${this.placement}-${nextId++}`;
         /**
          * Default role for offcanvas. [docs]
@@ -5607,166 +5616,220 @@ class OffcanvasComponent {
          * @default true
          */
         this.ariaModal = true;
+        _OffcanvasComponent_visible.set(this, false);
         /**
          * Event triggered on visible change.
          */
         this.visibleChange = new EventEmitter();
+        _OffcanvasComponent_activeBackdrop.set(this, void 0);
+        _OffcanvasComponent_scrollbarWidth.set(this, void 0);
+        _OffcanvasComponent_stateToggleSubscription.set(this, void 0);
+        _OffcanvasComponent_backdropClickSubscription.set(this, void 0);
+        _OffcanvasComponent_layoutChangeSubscription.set(this, void 0);
+        _OffcanvasComponent_show.set(this, false);
     }
     /**
      * Allow body scrolling while offcanvas is visible.
      * @type boolean
+     * @default false
      */
     set scroll(value) {
-        this._scroll = coerceBooleanProperty(value);
+        __classPrivateFieldSet(this, _OffcanvasComponent_scroll, coerceBooleanProperty(value), "f");
     }
-    ;
     get scroll() {
-        return this._scroll;
+        return __classPrivateFieldGet(this, _OffcanvasComponent_scroll, "f");
     }
     /**
      * Toggle the visibility of offcanvas component.
      * @type boolean
+     * @default false
      */
     set visible(value) {
-        this._visible = coerceBooleanProperty(value);
-        if (value) {
+        __classPrivateFieldSet(this, _OffcanvasComponent_visible, coerceBooleanProperty(value), "f");
+        if (__classPrivateFieldGet(this, _OffcanvasComponent_visible, "f")) {
             this.setBackdrop(this.backdrop);
             this.setFocus();
         }
         else {
             this.setBackdrop(false);
         }
-        this.setScroll();
+        this.layoutChangeSubscribe(__classPrivateFieldGet(this, _OffcanvasComponent_visible, "f"));
         this.visibleChange.emit(value);
     }
     get visible() {
-        return this._visible;
+        return __classPrivateFieldGet(this, _OffcanvasComponent_visible, "f");
     }
     get hostClasses() {
         return {
-            offcanvas: true,
+            offcanvas: typeof this.responsive === 'boolean',
+            [`offcanvas-${this.responsive}`]: typeof this.responsive !== 'boolean',
             [`offcanvas-${this.placement}`]: !!this.placement,
-            show: this.visible,
+            show: this.show
         };
     }
     get ariaHidden() {
         return this.visible ? null : true;
     }
-    ;
     get tabIndex() {
         return '-1';
     }
-    get animateType() {
-        return this.visible;
+    get animateTrigger() {
+        return this.visible ? 'visible' : 'hidden';
+    }
+    get show() {
+        return this.visible && __classPrivateFieldGet(this, _OffcanvasComponent_show, "f");
+    }
+    set show(value) {
+        __classPrivateFieldSet(this, _OffcanvasComponent_show, value, "f");
+    }
+    animateStart(event) {
+        const scrollbarWidth = __classPrivateFieldGet(this, _OffcanvasComponent_scrollbarWidth, "f");
+        if (event.toState === 'visible') {
+            if (!this.scroll) {
+                this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
+                this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+            }
+            this.renderer.addClass(this.hostElement.nativeElement, 'showing');
+        }
+        else {
+            this.renderer.addClass(this.hostElement.nativeElement, 'hiding');
+        }
+    }
+    animateDone(event) {
+        setTimeout(() => {
+            if (event.toState === 'visible') {
+                this.renderer.removeClass(this.hostElement.nativeElement, 'showing');
+            }
+            if (event.toState === 'hidden') {
+                this.renderer.removeClass(this.hostElement.nativeElement, 'hiding');
+                this.renderer.removeStyle(this.document.body, 'overflow');
+                this.renderer.removeStyle(this.document.body, 'paddingRight');
+            }
+        });
+        this.show = this.visible;
     }
     onKeyDownHandler(event) {
-        if (event.key === 'Escape' && this.keyboard && this.visible) {
+        if (event.key === 'Escape' &&
+            this.keyboard &&
+            this.visible &&
+            this.backdrop !== 'static') {
             this.offcanvasService.toggle({ show: false, id: this.id });
         }
     }
     ngOnInit() {
-        this.setScroll();
+        __classPrivateFieldSet(this, _OffcanvasComponent_scrollbarWidth, this.backdropService.scrollbarWidth, "f");
         this.stateToggleSubscribe();
+        // hotfix to avoid end offcanvas flicker on first render
+        this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'flex');
     }
     ngOnDestroy() {
         this.offcanvasService.toggle({ show: false, id: this.id });
         this.stateToggleSubscribe(false);
     }
-    ngOnChanges(changes) {
-        if (changes['scroll']) {
-            this.setScroll();
-        }
-    }
     stateToggleSubscribe(subscribe = true) {
         if (subscribe) {
-            this.stateToggleSubscription = this.offcanvasService.offcanvasState$.subscribe((action) => {
+            __classPrivateFieldSet(this, _OffcanvasComponent_stateToggleSubscription, this.offcanvasService.offcanvasState$.subscribe((action) => {
                 if (this === action.offcanvas || this.id === action.id) {
                     if ('show' in action) {
-                        this.visible = action?.show === 'toggle' ? !this.visible : action.show;
+                        this.visible =
+                            action?.show === 'toggle' ? !this.visible : action.show;
                     }
                 }
-            });
+            }), "f");
         }
         else {
-            this.stateToggleSubscription.unsubscribe();
+            __classPrivateFieldGet(this, _OffcanvasComponent_stateToggleSubscription, "f").unsubscribe();
         }
     }
     backdropClickSubscribe(subscribe = true) {
         if (subscribe) {
-            this.backdropClickSubscription = this.backdropService.backdropClick$.subscribe((clicked) => {
+            __classPrivateFieldSet(this, _OffcanvasComponent_backdropClickSubscription, this.backdropService.backdropClick$.subscribe((clicked) => {
                 this.offcanvasService.toggle({ show: !clicked, id: this.id });
-            });
+            }), "f");
         }
         else {
-            this.backdropClickSubscription?.unsubscribe();
+            __classPrivateFieldGet(this, _OffcanvasComponent_backdropClickSubscription, "f")?.unsubscribe();
         }
     }
     setBackdrop(setBackdrop) {
-        if (setBackdrop) {
-            this.activeBackdrop = this.backdropService.setBackdrop('offcanvas');
-            this.backdropClickSubscribe();
-        }
-        else {
-            this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
-            this.backdropClickSubscribe(false);
-        }
+        __classPrivateFieldSet(this, _OffcanvasComponent_scrollbarWidth, this.backdropService.scrollbarWidth, "f");
+        __classPrivateFieldSet(this, _OffcanvasComponent_activeBackdrop, !!setBackdrop ? this.backdropService.setBackdrop('offcanvas')
+            : this.backdropService.clearBackdrop(__classPrivateFieldGet(this, _OffcanvasComponent_activeBackdrop, "f")), "f");
+        setBackdrop === true ? this.backdropClickSubscribe()
+            : this.backdropClickSubscribe(false);
     }
     setFocus() {
         if (isPlatformBrowser(this.platformId)) {
             setTimeout(() => this.hostElement.nativeElement.focus());
         }
     }
-    setScroll() {
-        if (this.visible) {
-            if (!this.scroll) {
-                this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-                this.renderer.setStyle(this.document.body, 'paddingRight.px', '0');
+    get responsiveBreakpoint() {
+        if (typeof this.responsive !== 'string') {
+            return false;
+        }
+        const element = this.document.documentElement;
+        const responsiveBreakpoint = this.responsive;
+        const breakpointValue = getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) || false;
+        return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
+    }
+    layoutChangeSubscribe(subscribe = true) {
+        if (subscribe) {
+            if (!this.responsiveBreakpoint) {
+                return;
             }
-            return;
+            const responsiveBreakpoint = `(max-width: ${this.responsiveBreakpoint})`;
+            const layoutChanges = this.breakpointObserver.observe([responsiveBreakpoint]);
+            __classPrivateFieldSet(this, _OffcanvasComponent_layoutChangeSubscription, layoutChanges
+                .pipe(filter(breakpointState => !breakpointState.matches))
+                .subscribe((breakpointState) => {
+                this.visible = breakpointState.matches;
+            }), "f");
         }
-        if (!this.scroll) {
-            this.renderer.removeStyle(this.document.body, 'overflow');
-            this.renderer.removeStyle(this.document.body, 'paddingRight');
+        else {
+            __classPrivateFieldGet(this, _OffcanvasComponent_layoutChangeSubscription, "f")?.unsubscribe();
         }
     }
 }
-OffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }], target: i0.ɵɵFactoryTarget.Component });
-OffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: OffcanvasComponent, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: "keyboard", placement: "placement", scroll: "scroll", id: "id", role: "role", ariaModal: "ariaModal", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown": "onKeyDownHandler($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.animateType" } }, exportAs: ["cOffcanvas"], usesOnChanges: true, ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+_OffcanvasComponent_scroll = new WeakMap(), _OffcanvasComponent_visible = new WeakMap(), _OffcanvasComponent_activeBackdrop = new WeakMap(), _OffcanvasComponent_scrollbarWidth = new WeakMap(), _OffcanvasComponent_stateToggleSubscription = new WeakMap(), _OffcanvasComponent_backdropClickSubscription = new WeakMap(), _OffcanvasComponent_layoutChangeSubscription = new WeakMap(), _OffcanvasComponent_show = new WeakMap();
+OffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+OffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: OffcanvasComponent, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: "keyboard", placement: "placement", responsive: "responsive", scroll: "scroll", id: "id", role: "role", ariaModal: "ariaModal", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($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" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
         trigger('showHide', [
-            state('true', style({
-                visibility: 'visible',
+            state('visible', style({
+            // visibility: 'visible'
             })),
-            state('false', style({
-                visibility: 'hidden',
+            state('hidden', style({
+            // visibility: 'hidden'
             })),
-            transition('true => false', [animate('300ms')]),
-        ]),
+            transition('visible <=> *', [animate('300ms')])
+        ])
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: OffcanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-offcanvas', animations: [
                         trigger('showHide', [
-                            state('true', style({
-                                visibility: 'visible',
+                            state('visible', style({
+                            // visibility: 'visible'
                             })),
-                            state('false', style({
-                                visibility: 'hidden',
+                            state('hidden', style({
+                            // visibility: 'hidden'
                             })),
-                            transition('true => false', [animate('300ms')]),
-                        ]),
-                    ], exportAs: 'cOffcanvas', template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                            transition('visible <=> *', [animate('300ms')])
+                        ])
+                    ], exportAs: 'cOffcanvas', template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OffcanvasService }, { type: BackdropService }]; }, propDecorators: { backdrop: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OffcanvasService }, { type: BackdropService }, { type: i1$2.BreakpointObserver }]; }, propDecorators: { backdrop: [{
                 type: Input
             }], keyboard: [{
                 type: Input
             }], placement: [{
                 type: Input
+            }], responsive: [{
+                type: Input
             }], scroll: [{
                 type: Input
             }], id: [{
@@ -5794,9 +5857,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], animateType: [{
+            }], animateTrigger: [{
                 type: HostBinding,
                 args: ['@showHide']
+            }], animateStart: [{
+                type: HostListener,
+                args: ['@showHide.start', ['$event']]
+            }], animateDone: [{
+                type: HostListener,
+                args: ['@showHide.done', ['$event']]
             }], onKeyDownHandler: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -7028,7 +7097,7 @@ class SidebarComponent {
             }), "f");
         }
         else {
-            __classPrivateFieldGet(this, _SidebarComponent_stateToggleSubscription, "f").unsubscribe();
+            __classPrivateFieldGet(this, _SidebarComponent_stateToggleSubscription, "f")?.unsubscribe();
         }
     }
     layoutChangeSubscribe(subscribe = true) {