oasys-lib 1.17.0 → 1.18.3

package/bundles/oasys-lib.umd.js

@@ -1215,6 +1215,144 @@
                     }]
             }] });
 
+    var ImageService = /** @class */ (function () {
+        function ImageService() {
+            this.fallbackBreakpoint = 768;
+            this.breakpoints = [
+                320, 360, 375, 414, 640, 750, 768, 1080, 1280, 1366, 1440, 1536, 1600, 1680, 1920, 2560, 3440, 3840
+            ];
+        }
+        ImageService.prototype.getQualityForWidth = function (width) {
+            return width > 1440 ? 50 : 75;
+        };
+        ImageService.prototype.generateUrl = function (baseUrl, format, width, quality, cdnType) {
+            switch (cdnType) {
+                case 'thumbor':
+                    return "https://media.bloomdev.org/v1/" + width + "x0/filters:format(" + format + "):quality(" + quality + ")/" + baseUrl;
+                case 'contentful':
+                    return baseUrl + "?w=" + width + "&fm=" + format + "&q=" + quality;
+                default:
+                    return baseUrl;
+            }
+        };
+        ImageService.prototype.generateUrls = function (baseUrl, format, sizes, isFallback, cdnType) {
+            var _this = this;
+            return sizes.map(function (width) {
+                var quality = isFallback ? 100 : _this.getQualityForWidth(width);
+                var url = _this.generateUrl(baseUrl, format, width, quality, cdnType);
+                return isFallback ? url : url + " " + width + "w";
+            }).join(', ');
+        };
+        ImageService.prototype.detectCdnType = function (baseUrl) {
+            if (baseUrl.includes('assets-0.bloomandwild.com')) {
+                return 'thumbor';
+            }
+            else if (baseUrl.includes('images.ctfassets.net/')) {
+                return 'contentful';
+            }
+        };
+        ImageService.prototype.getImageUrlsFromCDN = function (baseUrl, format, sizes, isFallback) {
+            var cdnType = this.detectCdnType(baseUrl);
+            if (isFallback) {
+                sizes = [this.fallbackBreakpoint];
+            }
+            return this.generateUrls(baseUrl, format, sizes, isFallback, cdnType);
+        };
+        ImageService.prototype.generateImageUrl = function (baseUrl) {
+            return {
+                srcSetUrls: this.getImageUrlsFromCDN(baseUrl, 'webp', this.breakpoints, false),
+                fallbackUrl: this.getImageUrlsFromCDN(baseUrl, 'jpg', this.breakpoints, true)
+            };
+        };
+        return ImageService;
+    }());
+    ImageService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ImageService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
+    var ImageComponent = /** @class */ (function () {
+        function ImageComponent(imageService, el) {
+            this.imageService = imageService;
+            this.el = el;
+            this.image_src = '';
+            this.fetchpriority = 'auto';
+            this.loading = 'lazy';
+            this.preload_aspect_ratio = '1:1';
+        }
+        Object.defineProperty(ImageComponent.prototype, "class", {
+            get: function () {
+                return "" + (this.image_fill ? 'imageFill' : '');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ImageComponent.prototype.setupLazyLoading = function () {
+            var _this = this;
+            var options = {
+                removeAfterObserved: true,
+                root: null,
+                rootMargin: '200px',
+                threshold: 0.01
+            };
+            this.intersectionObserver = new IntersectionObserver(function (entries) {
+                entries.forEach(function (entry) {
+                    if (entry.isIntersecting) {
+                        var imageElement_1 = _this.el.nativeElement.querySelector('img');
+                        var sourceElement = _this.el.nativeElement.querySelector('source');
+                        imageElement_1.setAttribute('src', _this.imageUrlResponse.fallbackUrl);
+                        sourceElement.setAttribute('srcset', _this.imageUrlResponse.srcSetUrls);
+                        _this.intersectionObserver.unobserve(entry.target);
+                    }
+                });
+            }, options);
+            var imageElement = this.el.nativeElement.querySelector('img');
+            this.intersectionObserver.observe(imageElement);
+        };
+        ImageComponent.prototype.ngOnInit = function () {
+            var ratios = this.preload_aspect_ratio.split(':');
+            this.imageRatioWidth = parseInt(ratios[0], 10);
+            this.imageRatioHeight = parseInt(ratios[1], 10);
+            this.imageUrlResponse = this.imageService.generateImageUrl(this.image_src);
+            if (!('loading' in HTMLImageElement.prototype)) {
+                this.setupLazyLoading();
+            }
+            if (!this.image_alt_text) {
+                throw Error("Image is missing an alt tag, image url is " + this.image_src);
+            }
+        };
+        return ImageComponent;
+    }());
+    ImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageComponent, deps: [{ token: ImageService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImageComponent, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio" }, host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<picture>\n  <source\n  srcset=\"{{imageUrlResponse.srcSetUrls}}\"\n  type=\"image/webp\"/>\n\n  <img\n  [ngClass]=\"{'imageFill': image_fill}\"\n  [attr.width]=\"imageRatioWidth\"\n  [attr.height]=\"imageRatioHeight\"\n  [attr.src]=\"imageUrlResponse.fallbackUrl\"\n  [attr.loading]=\"loading\"\n  [attr.fetchpriority]=\"fetchpriority\"\n  />\n</picture>\n", styles: [":host.imageFill,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}img{display:block;width:100%;height:auto}\n"], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-image',
+                        templateUrl: './image.component.html',
+                        styleUrls: ['./image.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: ImageService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { image_src: [{
+                    type: i0.Input
+                }], image_alt_text: [{
+                    type: i0.Input
+                }], image_fill: [{
+                    type: i0.Input
+                }], fetchpriority: [{
+                    type: i0.Input
+                }], loading: [{
+                    type: i0.Input
+                }], preload_aspect_ratio: [{
+                    type: i0.Input
+                }], class: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
     var CardComponent = /** @class */ (function () {
         function CardComponent(tokenService) {
             this.tokenService = tokenService;
@@ -1253,7 +1391,7 @@
         return CardComponent;
     }());
     CardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CardComponent, selector: "ui-card", inputs: { label_text: "label_text", image: "image", alt_text: "alt_text", image_format: "image_format", small_title_left: "small_title_left", small_sub_title_right: "small_sub_title_right", standard_content: "standard_content", bold_content: "bold_content" }, host: { listeners: { "window:resize": "setStackPlacement($event)" } }, viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ui-box class=\"ui-card\" box_background=\"core-primary\" box_space=\"none\">\n    <ui-stack stack_align=\"center\" stack_gap=\"tight\">\n        <ui-box\n            class=\"ui-card__image\"\n            [ngStyle]=\"{'aspect-ratio': aspectRatio}\"\n            box_background=\"transparent\"\n            box_align_x=\"center\"\n            box_space=\"none\">\n                <img [src]=\"image\" [attr.alt]=\"alt_text\">\n        </ui-box>\n        <ui-stack stack_gap=\"tight\" [ngStyle]=\"{'margin-top': stackOffset}\">\n            <ui-box\n                #imagelabel\n                *ngIf=\"label_text\"\n                class=\"card__image-label center-content\"\n                box_background=\"tint-highlight\"\n                box_align_x=\"center\"\n                box_align_y=\"center\"\n                box_space_left=\"near\"\n                box_space_right=\"near\"\n                box_space_bottom=\"tight\"\n                box_space_top=\"tight\">\n                <h5>{{label_text}}</h5>\n            </ui-box>\n            <ui-box *ngIf=\"small_title_left || small_sub_title_right\" [box_space_top]=\"label_text ? 'none' : 'tight'\" box_space=\"none\" box_background=\"transparent\" >\n                <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_title_left}}</span>\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_sub_title_right}}</span>\n                </ui-stack>\n            </ui-box>\n            <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">{{standard_content}}</p>\n            <p *ngIf=\"bold_content\" class=\"text-label--primary text-body--emphasis\">{{bold_content}}</p>\n        </ui-stack>\n    </ui-stack>\n</ui-box>\n", styles: [".ui-card__image{position:relative}.ui-card__image img{position:absolute;height:100%;object-fit:cover;width:100%;left:0}.ui-card .center-content{text-align:center;align-self:center}.ui-card .card__image-label{width:auto;height:auto;border-radius:2px;margin:0 8px;text-align:center;overflow:hidden;z-index:2}\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"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    CardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CardComponent, selector: "ui-card", inputs: { label_text: "label_text", image: "image", alt_text: "alt_text", image_format: "image_format", small_title_left: "small_title_left", small_sub_title_right: "small_sub_title_right", standard_content: "standard_content", bold_content: "bold_content" }, host: { listeners: { "window:resize": "setStackPlacement($event)" } }, viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ui-box class=\"ui-card\" box_background=\"core-primary\" box_space=\"none\">\n    <ui-stack stack_align=\"center\" stack_gap=\"tight\">\n        <ui-box\n            class=\"ui-card__image\"\n            [ngStyle]=\"{'aspect-ratio': aspectRatio}\"\n            box_background=\"transparent\"\n            box_align_x=\"center\"\n            box_space=\"none\">\n                <ui-image [image_src]=\"image\" [image_alt_text]=\"alt_text\" [image_fill]=\"true\"></ui-image>\n        </ui-box>\n        <ui-stack stack_gap=\"tight\" [ngStyle]=\"{'margin-top': stackOffset}\">\n            <ui-box\n                #imagelabel\n                *ngIf=\"label_text\"\n                class=\"card__image-label center-content\"\n                box_background=\"tint-highlight\"\n                box_align_x=\"center\"\n                box_align_y=\"center\"\n                box_space_left=\"near\"\n                box_space_right=\"near\"\n                box_space_bottom=\"tight\"\n                box_space_top=\"tight\">\n                <h5>{{label_text}}</h5>\n            </ui-box>\n            <ui-box *ngIf=\"small_title_left || small_sub_title_right\" [box_space_top]=\"label_text ? 'none' : 'tight'\" box_space=\"none\" box_background=\"transparent\" >\n                <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_title_left}}</span>\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_sub_title_right}}</span>\n                </ui-stack>\n            </ui-box>\n            <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">{{standard_content}}</p>\n            <p *ngIf=\"bold_content\" class=\"text-label--primary text-body--emphasis\">{{bold_content}}</p>\n        </ui-stack>\n    </ui-stack>\n</ui-box>\n", styles: [".ui-card__image{position:relative}.ui-card__image ui-image{position:absolute;height:100%;object-fit:cover;width:100%;left:0}.ui-card .center-content{text-align:center;align-self:center}.ui-card .card__image-label{width:auto;height:auto;border-radius:2px;margin:0 8px;text-align:center;overflow:hidden;z-index:2}\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"] }, { type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1285,19 +1423,37 @@
                     args: ['window:resize', ['$event']]
                 }] } });
 
+    var OasysImageModule = /** @class */ (function () {
+        function OasysImageModule() {
+        }
+        return OasysImageModule;
+    }());
+    OasysImageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OasysImageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, declarations: [ImageComponent], imports: [i6.CommonModule], exports: [ImageComponent] });
+    OasysImageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, providers: [ImageService], imports: [[i6.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [ImageComponent],
+                        imports: [i6.CommonModule],
+                        exports: [ImageComponent],
+                        providers: [ImageService]
+                    }]
+            }] });
+
     var OasysCardModule = /** @class */ (function () {
         function OasysCardModule() {
         }
         return OasysCardModule;
     }());
     OasysCardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, declarations: [CardComponent], imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule], exports: [CardComponent] });
-    OasysCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, providers: [TokenService], imports: [[i6.CommonModule, OasysLayoutModule, router.RouterModule]] });
+    OasysCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, declarations: [CardComponent], imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule], exports: [CardComponent] });
+    OasysCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, providers: [TokenService], imports: [[i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [CardComponent],
-                        imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule],
+                        imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule],
                         exports: [CardComponent],
                         providers: [TokenService],
                     }]
@@ -1461,7 +1617,7 @@
         return HeroComponent;
     }());
     HeroComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HeroComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    HeroComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeroComponent, selector: "ui-hero", inputs: { min_container_height: "min_container_height", image_left_desktop: "image_left_desktop", image_top_mobile: "image_top_mobile", background_colour: "background_colour", heading_title: "heading_title", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", media_type: "media_type", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\">\n    <ui-grid [ngStyle]=\"{'min-height' : min_container_height ? min_container_height + 'px' : 'auto'}\" grid_gap=\"none\" grid_collapse_below=\"tablet\">\n        <ui-column columns=\"5\" [ngClass]=\"{'image-left': image_left_desktop, 'image-top': image_top_mobile}\">\n            <ui-box box_fill_mode=\"fill\" box_align_y=\"center\" box_background=\"transparent\" [box_space]=\"{mobile: heroInsetSpaceSmall, tablet: heroInsetSpaceSmall, laptop: heroInsetSpaceLarge, desktop: heroInsetSpaceLarge}\">\n                <ui-stack stack_direction=\"y\" stack_align=\"center\" stack_distribute=\"center\" stack_gap=\"default\">\n                    <ui-heading\n                        heading_type=\"primary\"\n                        [heading_on_dark]=\"backgroundIsDark  === 'on-dark' ? true : false\"\n                        [heading_title]=\"heading_title\"\n                        [heading_seo_priority]=\"true\"\n                        [heading_subtitle]=\"heading_subtitle\"\n                        [heading_surtitle]=\"heading_surtitle\">\n                    </ui-heading>\n                    <!-- TODO: replace with ui-button-group once built-->\n                    <ui-stack\n                        *ngIf=\"primary_cta_text\"\n                        class=\"cta-container\"\n                        stack_direction=\"x\"\n                        [stack_align]=\"heroCtaAlignment\"\n                        [stack_distribute]=\"heroCtaAlignment\"\n                        stack_wrap=\"true\"\n                        stack_gap=\"near\">\n                        <ui-button\n                            button_size=\"large\"\n                            [button_type]=\"backgroundIsDark  === 'on-dark' ? 'primary-inverse' : 'primary'\"\n                            [href]=\"href_primary_cta\">\n                            <span #buttontext>{{primary_cta_text}}</span>\n                        </ui-button>\n                        <ui-button\n                            *ngIf=\"secondary_cta_text\"\n                            button-size=\"large\"\n                            [button_type]=\"backgroundIsDark === 'on-dark' ? 'secondary-inverse' : 'secondary'\"\n                            [href]=\"href_secondary_cta\">\n                            <span #buttontext>{{secondary_cta_text}}</span>\n                        </ui-button>\n                    </ui-stack>\n                </ui-stack>\n            </ui-box>\n        </ui-column>\n        <ui-column columns=\"7\">\n            <picture  *ngIf=\"media_type === 'image'\">\n                <source [srcset]=\"image + '?w=880&h=880&fm=webp&q=75 1x,' + image + '?w=1760&h=1760&fm=webp&q=40 2x'\" media=\"(min-width: 1440px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=720&h=720&fm=webp&q=75 1x,' + image + '?w=1440&h=1440&fm=webp&q=40 2x'\" media=\"(min-width: 1200px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=580&h=580&fm=webp&q=75 1x,' + image + '?w=1160&h=1160&fm=webp&q=40 2x'\" media=\"(min-width: 992px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=430&h=430&fm=webp&q=75 1x,' + image +  '?w=860&h=860&fm=webp&q=40 2x'\" media=\"(min-width: 768px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=720&h=720&fm=webp&q=40 2x'\" media=\"(min-width: 454px)\" type=\"image/webp\">\n                <img [src]=\"image + '?w=430&h=430&fm=webp&q=75'\" [attr.alt]=\"alt_text\">\n            </picture>\n            <ng-content *ngIf=\"media_type === 'video'\"></ng-content>\n        </ui-column>\n    </ui-grid>\n</ui-box>\n\n", styles: ["ui-grid ui-column{position:relative}ui-grid ui-column img{width:100%}@media only screen and (min-width: 768px){ui-grid ui-column img{position:absolute;height:100%;object-fit:cover}}@media only screen and (max-width: 767px){ui-grid .image-top{order:1}}@media only screen and (min-width: 768px){ui-grid .image-top{order:0}ui-grid .image-left{order:1}}\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: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "href"], outputs: ["clicked"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    HeroComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeroComponent, selector: "ui-hero", inputs: { min_container_height: "min_container_height", image_left_desktop: "image_left_desktop", image_top_mobile: "image_top_mobile", background_colour: "background_colour", heading_title: "heading_title", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", media_type: "media_type", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\">\n    <ui-grid [ngStyle]=\"{'min-height' : min_container_height ? min_container_height + 'px' : 'auto'}\" grid_gap=\"none\" grid_collapse_below=\"tablet\">\n        <ui-column columns=\"5\" [ngClass]=\"{'image-left': image_left_desktop, 'image-top': image_top_mobile}\">\n            <ui-box box_fill_mode=\"fill\" box_align_y=\"center\" box_background=\"transparent\" [box_space]=\"{mobile: heroInsetSpaceSmall, tablet: heroInsetSpaceSmall, laptop: heroInsetSpaceLarge, desktop: heroInsetSpaceLarge}\">\n                <ui-stack stack_direction=\"y\" stack_align=\"center\" stack_distribute=\"center\" stack_gap=\"default\">\n                    <ui-heading\n                        heading_type=\"primary\"\n                        [heading_on_dark]=\"backgroundIsDark  === 'on-dark' ? true : false\"\n                        [heading_title]=\"heading_title\"\n                        [heading_seo_priority]=\"true\"\n                        [heading_subtitle]=\"heading_subtitle\"\n                        [heading_surtitle]=\"heading_surtitle\">\n                    </ui-heading>\n                    <!-- TODO: replace with ui-button-group once built-->\n                    <ui-stack\n                        *ngIf=\"primary_cta_text\"\n                        class=\"cta-container\"\n                        stack_direction=\"x\"\n                        [stack_align]=\"heroCtaAlignment\"\n                        [stack_distribute]=\"heroCtaAlignment\"\n                        stack_wrap=\"true\"\n                        stack_gap=\"near\">\n                        <ui-button\n                            bwtrackas=\"oasys.hero-block.primary-cta\"\n                            button_size=\"large\"\n                            [button_type]=\"backgroundIsDark  === 'on-dark' ? 'primary-inverse' : 'primary'\"\n                            [href]=\"href_primary_cta\">\n                            <span #buttontext>{{primary_cta_text}}</span>\n                        </ui-button>\n                        <ui-button\n                            *ngIf=\"secondary_cta_text\"\n                            bwtrackas=\"oasys.hero-block.secondary-cta\"\n                            button-size=\"large\"\n                            [button_type]=\"backgroundIsDark === 'on-dark' ? 'secondary-inverse' : 'secondary'\"\n                            [href]=\"href_secondary_cta\">\n                            <span #buttontext>{{secondary_cta_text}}</span>\n                        </ui-button>\n                    </ui-stack>\n                </ui-stack>\n            </ui-box>\n        </ui-column>\n        <ui-column columns=\"7\">\n            <ui-image\n                *ngIf=\"media_type === 'image'\"\n                [image_src]=\"image\"\n                [image_alt_text]=\"alt_text\"\n                preload_aspect_ratio=\"5:4\"\n                [image_fill]=\"true\"></ui-image>\n            <ng-content *ngIf=\"media_type === 'video'\"></ng-content>\n        </ui-column>\n    </ui-grid>\n</ui-box>\n\n", styles: ["@media only screen and (max-width: 767px){ui-grid .image-top{order:1}}@media only screen and (min-width: 768px){ui-grid .image-top{order:0}ui-grid .image-left{order:1}}\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: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "href"], outputs: ["clicked"] }, { type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HeroComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1505,13 +1661,13 @@
         return OasysHeroModule;
     }());
     OasysHeroModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysHeroModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, declarations: [HeroComponent], imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule], exports: [HeroComponent] });
-    OasysHeroModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, providers: [TokenService], imports: [[i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule]] });
+    OasysHeroModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, declarations: [HeroComponent], imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule], exports: [HeroComponent] });
+    OasysHeroModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, providers: [TokenService], imports: [[i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [HeroComponent],
-                        imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule],
+                        imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule],
                         exports: [HeroComponent],
                         providers: [TokenService],
                     }]
@@ -1683,6 +1839,7 @@
             this.containerInsetSpaceLarge = this.tokenService.getTokenValue("--component-section-inset-spacing-container-large");
             this.contentInsetSpaceSmall = this.tokenService.getTokenValue("--component-section-inset-spacing-content-small-" + this.section_type);
             this.contentInsetSpaceLarge = this.tokenService.getTokenValue("--component-section-inset-spacing-content-large-" + this.section_type);
+            this.imageAspectRatio = this.tokenService.getTokenValue("--component-section-image-aspect-ratio-" + this.section_type);
             // Setting a unique ID, this is important & needed to apply
             // styles to ui-box
             this.uiBoxId = Date.now() + '-' + Math.random();
@@ -1705,7 +1862,7 @@
         return SectionComponent;
     }());
     SectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SectionComponent, selector: "ui-section", inputs: { brand_background_colour: "brand_background_colour", non_brand_background_colour: "non_brand_background_colour", text_on_dark_override: "text_on_dark_override", image_on_left: "image_on_left", section_type: "section_type", heading_title: "heading_title", heading_subtitle: "heading_subtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box\nid=\"ui-box-{{uiBoxId}}\"\n[box_background]=\"brand_background_colour\"\n[box_space_left]=\"section_type  === 'spotlight' && !image_on_left ? 'none' : ''\"\n[box_space_right]=\"section_type  === 'spotlight' && image_on_left ? 'none' : ''\"\n[box_space]=\"section_type === 'spotlight' ? 'none' : {mobile: containerInsetSpaceSmall, tablet: containerInsetSpaceLarge, laptop: containerInsetSpaceLarge, desktop: containerInsetSpaceLarge}\">\n\n    <ui-grid [grid_gap]=\"section_type === 'spotlight' ? 'none' : 'default'\">\n            <ui-column  columns=\"6\" [ngClass]=\"{'image-left': image_on_left, 'image-top-mobile': image_on_left}\">\n                <ui-box\n                   \n                    box_space=\"none\"\n                    box_background=\"none\"\n                    box_align_y=\"center\"\n                    >\n                    <img [src]=\"image\" [alt]=\"alt_text\" loading=\"lazy\">\n                </ui-box>\n            </ui-column>\n\n            <ui-column columns=\"6\">\n                <ui-box\n                [box_background]=\"brand_background_colour\"\n                box_align_y=\"center\"\n                [box_space]=\"section_type === 'spotlight' ?  {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceLarge, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge} : {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceSmall, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge}\">\n                    <ui-stack\n                        stack_direction=\"y\"\n                        stack_align=\"center\"\n                        stack_distribute=\"center\"\n                        stack_wrap=\"true\"\n                        >\n                        <ui-heading\n                            [heading_type]=\"section_type === 'spotlight' ? 'primary' : 'functional-primary'\"\n                            [heading_title]=\"heading_title\"\n                            [heading_subtitle]=\"heading_subtitle\">\n                        </ui-heading>\n\n                        <ui-stack\n                            stack_direction=\"x\"\n                            stack_align=\"start\"\n                            [stack_distribute]=\"section_type === 'spotlight' ? 'center' : 'start'\"\n                            stack_wrap=\"true\"\n                            stack_gap=\"near\">\n\n                            <a class=\"text-link text-link--standalone\" [href]=\"href_primary_cta\">{{primary_cta_text}}</a>\n                            <a *ngIf=\"section_type !== 'spotlight'\" class=\"text-link text-link--standalone\" [href]=\"href_secondary_cta\">{{secondary_cta_text}}</a>\n\n                        </ui-stack>\n                    </ui-stack>\n                </ui-box>\n            </ui-column>\n    </ui-grid>\n</ui-box>", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width: 767px){ui-grid .image-top-mobile{order:0}}\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: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    SectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SectionComponent, selector: "ui-section", inputs: { brand_background_colour: "brand_background_colour", non_brand_background_colour: "non_brand_background_colour", text_on_dark_override: "text_on_dark_override", image_on_left: "image_on_left", section_type: "section_type", heading_title: "heading_title", heading_subtitle: "heading_subtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box\nid=\"ui-box-{{uiBoxId}}\"\n[box_background]=\"brand_background_colour\"\n[box_space_left]=\"section_type  === 'spotlight' && !image_on_left ? 'none' : ''\"\n[box_space_right]=\"section_type  === 'spotlight' && image_on_left ? 'none' : ''\"\n[box_space]=\"section_type === 'spotlight' ? 'none' : {mobile: containerInsetSpaceSmall, tablet: containerInsetSpaceLarge, laptop: containerInsetSpaceLarge, desktop: containerInsetSpaceLarge}\">\n\n    <ui-grid [grid_gap]=\"section_type === 'spotlight' ? 'none' : 'default'\">\n            <ui-column  columns=\"6\" [ngClass]=\"{'image-left': image_on_left, 'image-top-mobile': image_on_left}\">\n                <ui-box\n                    box_space=\"none\"\n                    box_background=\"none\"\n                    box_align_y=\"center\"\n                    >\n                    <ui-image [image_src]=\"image\" [image_alt_text]=\"alt_text\" [preload_aspect_ratio]=\"imageAspectRatio\"></ui-image>\n                </ui-box>\n            </ui-column>\n\n            <ui-column columns=\"6\">\n                <ui-box\n                [box_background]=\"brand_background_colour\"\n                box_align_y=\"center\"\n                [box_space]=\"section_type === 'spotlight' ?  {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceLarge, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge} : {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceSmall, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge}\">\n                    <ui-stack\n                        stack_direction=\"y\"\n                        stack_align=\"center\"\n                        stack_distribute=\"center\"\n                        stack_wrap=\"true\"\n                        >\n                        <ui-heading\n                            [heading_type]=\"section_type === 'spotlight' ? 'primary' : 'functional-primary'\"\n                            [heading_title]=\"heading_title\"\n                            [heading_subtitle]=\"heading_subtitle\">\n                        </ui-heading>\n\n                        <ui-stack\n                            stack_direction=\"x\"\n                            stack_align=\"start\"\n                            [stack_distribute]=\"section_type === 'spotlight' ? 'center' : 'start'\"\n                            stack_wrap=\"true\"\n                            stack_gap=\"near\">\n\n                            <a class=\"text-link text-link--standalone\" [href]=\"href_primary_cta\" bwtrackas=\"oasys.story-block.primary-cta\">{{primary_cta_text}}</a>\n                            <a *ngIf=\"section_type !== 'spotlight'\" class=\"text-link text-link--standalone\" [href]=\"href_secondary_cta\" bwtrackas=\"oasys.story-block.secondary-cta\">{{secondary_cta_text}}</a>\n\n                        </ui-stack>\n                    </ui-stack>\n                </ui-box>\n            </ui-column>\n    </ui-grid>\n</ui-box>", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width: 767px){ui-grid .image-top-mobile{order:0}}\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: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1747,13 +1904,13 @@
         return SectionModule;
     }());
     SectionModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, declarations: [SectionComponent], imports: [i6.CommonModule, OasysHeadingModule, OasysLayoutModule], exports: [SectionComponent] });
-    SectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, providers: [TokenService], imports: [[i6.CommonModule, OasysHeadingModule, OasysLayoutModule]] });
+    SectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, declarations: [SectionComponent], imports: [i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule], exports: [SectionComponent] });
+    SectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, providers: [TokenService], imports: [[i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SectionComponent],
-                        imports: [i6.CommonModule, OasysHeadingModule, OasysLayoutModule],
+                        imports: [i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule],
                         exports: [SectionComponent],
                         providers: [TokenService]
                     }]
@@ -2013,6 +2170,7 @@
     exports.DividerComponent = DividerComponent;
     exports.HeroComponent = HeroComponent;
     exports.IconComponent = IconComponent;
+    exports.ImageComponent = ImageComponent;
     exports.LayoutBoxComponent = LayoutBoxComponent;
     exports.LayoutContainerComponent = LayoutContainerComponent;
     exports.LayoutGridColumnComponent = LayoutGridColumnComponent;
@@ -2035,6 +2193,7 @@
     exports.OasysHeadingModule = OasysHeadingModule;
     exports.OasysHeroModule = OasysHeroModule;
     exports.OasysIconModule = OasysIconModule;
+    exports.OasysImageModule = OasysImageModule;
     exports.OasysLayoutModule = OasysLayoutModule;
     exports.OasysSeoBlockModule = OasysSeoBlockModule;
     exports.OasysTextModule = OasysTextModule;