oasys-lib 1.25.4 → 1.26.0

package/bundles/oasys-lib.umd.js

@@ -2175,15 +2175,39 @@
             this.carousel_slides_per_view_laptop = 3;
             this.carousel_slides_per_view_tablet = 2.5;
             this.carousel_slides_per_view_mobile = 1.25;
-            // register swiper custom elements
-            bundle.register();
         }
         CarouselComponent.prototype.ngOnInit = function () {
-            // Initialise swiper
-            this.initSwiper();
+            this.setUpIntersectionObserver();
         };
-        CarouselComponent.prototype.ngAfterViewInit = function () {
-            this.setupScrollbarLayoutProperties();
+        /**
+         * Set up the intersection observer with the relevant options
+         */
+        CarouselComponent.prototype.setUpIntersectionObserver = function () {
+            // Set IntersectionObserver options
+            var options = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.5,
+                once: true
+            };
+            // Set up the IntersectionObserver
+            var observer = new IntersectionObserver(this.onIntersection.bind(this), options);
+            observer.observe(this.element.nativeElement);
+        };
+        /**
+         * This function gets called just before the user scrolls this component into view
+         * @param entries - An array of interswection observer entries
+         * @param observer - Intersection observer
+         */
+        CarouselComponent.prototype.onIntersection = function (entries, observer) {
+            var _this = this;
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    // Initialise swiper
+                    _this.initSwiper();
+                    observer.unobserve(entry.target);
+                }
+            });
         };
         CarouselComponent.prototype.getStyle = function (element, style) {
             return this.document.defaultView.getComputedStyle(element, null).getPropertyValue(style);
@@ -2279,7 +2303,7 @@
         return CarouselComponent;
     }());
     CarouselComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CarouselComponent, deps: [{ token: TokenService }, { token: i6.DOCUMENT }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CarouselComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CarouselComponent, selector: "ui-carousel", inputs: { rewind: "rewind", carousel_overflow: "carousel_overflow", carousel_gap: "carousel_gap", carousel_pagination: "carousel_pagination", carousel_align: "carousel_align", carousel_slides_per_view_desktop: "carousel_slides_per_view_desktop", carousel_slides_per_view_laptop: "carousel_slides_per_view_laptop", carousel_slides_per_view_tablet: "carousel_slides_per_view_tablet", carousel_slides_per_view_mobile: "carousel_slides_per_view_mobile" }, viewQueries: [{ propertyName: "swiper", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "carouselscrollbarplaceholder", first: true, predicate: ["carouselscrollbarplaceholder"], descendants: true, read: i0.ElementRef }, { propertyName: "carouselctastack", first: true, predicate: ["carouselctastack"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ui-box\nclass=\"ui-carousel\"\n[ngClass]=\"{'ui-carousel-overflow': carousel_overflow}\"\nbox_align_y=\"center\"\nbox_space=\"none\"\nbox_content_fill_width=\"true\">\n\n    <ui-stack #carouselctastack>\n        <!-- Swiper WebComponent-->\n        <swiper-container\n        #swiper\n        init=\"false\"\n        center-insufficient-slides=\"true\"\n        prevent-clicks-propagation=\"true\">\n            <ng-content></ng-content>\n        </swiper-container>\n\n        <!-- Custom navigation buttons -->\n        <ui-stack stack_direction=\"x\" stack_align=\"center\" *ngIf=\"carousel_pagination === 'scroll-arrows'\">\n            <div class=\"ui-carousel-scrollbar-placeholder\" #carouselscrollbarplaceholder></div>\n            <ui-box box_space=\"none\" box_fill_mode=\"fit\" [box_space_right]=\"{mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none'}\">\n                <ui-stack\n                *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n                stack_direction=\"x\"\n                stack_gap=\"near\">\n                    <!-- Previous button-->\n                    <ui-button\n                    class=\"ui-carousel__previous\"\n                    button_size=\"large\"\n                    button_icon_placement=\"iconOnly\"\n                    button_icon=\"arrow-left\"\n                    button_type=\"secondary\"\n                    (clicked)=\"previousSlide()\">\n                        <span #buttontext>Prevous slide</span>\n                    </ui-button>\n                    <!-- Next button-->\n                    <ui-button\n                    class=\"ui-carousel__next\"\n                    button_size=\"large\"\n                    button_icon_placement=\"iconOnly\"\n                    button_icon=\"arrow-right\"\n                    button_type=\"secondary\"\n                    (clicked)=\"nextSlide()\">\n                        <span #buttontext>Next slide</span>\n                    </ui-button>\n                </ui-stack>\n            </ui-box>\n        </ui-stack>\n    </ui-stack>\n</ui-box>\n", styles: [":root{--swiper-scrollbar-size: 4px}.ui-carousel swiper-container{width:100%}.ui-carousel.ui-carousel-overflow swiper-container{overflow:visible!important}.ui-carousel .ui-carousel-scrollbar-placeholder{width:100%;display:flex;align-self:stretch}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "button_text_nowrap", "href"], outputs: ["clicked"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    CarouselComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CarouselComponent, selector: "ui-carousel", inputs: { rewind: "rewind", carousel_overflow: "carousel_overflow", carousel_gap: "carousel_gap", carousel_pagination: "carousel_pagination", carousel_align: "carousel_align", carousel_slides_per_view_desktop: "carousel_slides_per_view_desktop", carousel_slides_per_view_laptop: "carousel_slides_per_view_laptop", carousel_slides_per_view_tablet: "carousel_slides_per_view_tablet", carousel_slides_per_view_mobile: "carousel_slides_per_view_mobile" }, viewQueries: [{ propertyName: "swiper", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "carouselscrollbarplaceholder", first: true, predicate: ["carouselscrollbarplaceholder"], descendants: true, read: i0.ElementRef }, { propertyName: "carouselctastack", first: true, predicate: ["carouselctastack"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ui-box\nclass=\"ui-carousel\"\n[ngClass]=\"{'ui-carousel-overflow': carousel_overflow}\"\nbox_align_y=\"center\"\nbox_space=\"none\"\nbox_content_fill_width=\"true\"\nbox_background=\"transparent\">\n\n    <ui-stack #carouselctastack>\n        <!-- Swiper WebComponent-->\n        <swiper-container\n        #swiper\n        init=\"false\"\n        center-insufficient-slides=\"true\"\n        prevent-clicks-propagation=\"true\">\n            <ng-content></ng-content>\n        </swiper-container>\n\n        <!-- Custom navigation buttons -->\n        <ui-stack stack_direction=\"x\" stack_align=\"center\" *ngIf=\"carousel_pagination === 'scroll-arrows'\">\n            <div class=\"ui-carousel-scrollbar-placeholder\" #carouselscrollbarplaceholder></div>\n            <ui-box \n            box_space=\"none\" \n            box_fill_mode=\"fit\" \n            [box_space_right]=\"{mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none'}\"\n            box_background=\"transparent\">\n                <ui-stack\n                *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n                stack_direction=\"x\"\n                stack_gap=\"near\">\n                    <!-- Previous button-->\n                    <ui-button\n                    class=\"ui-carousel__previous\"\n                    button_size=\"large\"\n                    button_icon_placement=\"iconOnly\"\n                    button_icon=\"arrow-left\"\n                    button_type=\"secondary\"\n                    (clicked)=\"previousSlide()\">\n                        <span #buttontext>Prevous slide</span>\n                    </ui-button>\n                    <!-- Next button-->\n                    <ui-button\n                    class=\"ui-carousel__next\"\n                    button_size=\"large\"\n                    button_icon_placement=\"iconOnly\"\n                    button_icon=\"arrow-right\"\n                    button_type=\"secondary\"\n                    (clicked)=\"nextSlide()\">\n                        <span #buttontext>Next slide</span>\n                    </ui-button>\n                </ui-stack>\n            </ui-box>\n        </ui-stack>\n    </ui-stack>\n</ui-box>\n", styles: [":root{--swiper-scrollbar-size: 4px}.ui-carousel swiper-container{width:100%}.ui-carousel.ui-carousel-overflow swiper-container{overflow:visible!important}.ui-carousel .ui-carousel-scrollbar-placeholder{width:100%;display:flex;align-self:stretch}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "button_text_nowrap", "href"], outputs: ["clicked"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CarouselComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2322,6 +2346,7 @@
                     type: i0.Input
                 }] } });
 
+    bundle.register();
     var OasysCarouselModule = /** @class */ (function () {
         function OasysCarouselModule() {
         }