oasys-lib 2.35.2 → 2.35.4

package/fesm2022/oasys-lib.mjs

@@ -942,7 +942,7 @@ class ImageComponent {
     image_fill = false;
     fetchpriority = 'auto';
     loading = 'lazy';
-    preload_aspect_ratio = '1:1';
+    preload_aspect_ratio = null;
     image_width = null; // explicit rendered width in px, when known by the consumer
     image_sizes = null; // fallback `sizes` value for non-lazy / no-auto-support cases
     image_loaded = new EventEmitter();
@@ -972,19 +972,19 @@ class ImageComponent {
      * Creates the image object with the provided properties.
      */
     createImage() {
-        const ratios = this.preload_aspect_ratio.split(':');
+        const ratios = this.preload_aspect_ratio?.split(':');
         const imageUrlResponse = this.imageUrlProvider.generateImageUrl(this.image_src, this.breakpoints, this.fallbackBreakpoint);
         const loading = this.resolveLoading();
         const newImage = {
             ...imageUrlResponse,
-            ratioWidth: parseInt(ratios[0], 10),
-            ratioHeight: parseInt(ratios[1], 10),
+            ratioWidth: ratios ? parseInt(ratios[0], 10) : undefined,
+            ratioHeight: ratios ? parseInt(ratios[1], 10) : undefined,
             loading,
             fill: this.image_fill,
             fetchpriority: this.fetchpriority,
             preloadAspectRatio: this.preload_aspect_ratio,
             width: this.image_width ? `${this.image_width}px` : null,
-            sizes: this.resolveSizes(loading),
+            sizes: this.resolveSizes(),
             altText: this.image_alt_text,
             ariaDescribedby: this.image_aria_describedby ?? null,
         };
@@ -993,19 +993,18 @@ class ImageComponent {
     resolveLoading() {
         return this.fetchpriority === 'high' ? 'eager' : this.loading;
     }
-    resolveSizes(loading) {
+    resolveSizes() {
         if (this.image_width) {
             return `${this.image_width}px`;
         }
-        const fallback = this.image_sizes ?? '100vw';
-        return loading === 'lazy' ? `auto, ${fallback}` : fallback;
+        return this.image_sizes ?? '100vw';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ImageComponent, isStandalone: true, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_aria_describedby: "image_aria_describedby", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio", image_width: "image_width", image_sizes: "image_sizes" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <picture>\n    <source\n      [attr.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.src]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ImageComponent, isStandalone: true, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_aria_describedby: "image_aria_describedby", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio", image_width: "image_width", image_sizes: "image_sizes" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <picture>\n    <source\n      [attr.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.src]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"image().preloadAspectRatio ? { 'aspect-ratio': image().preloadAspectRatio } : {}\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgStyle], selector: 'ui-image', template: "@if (image()) {\n  <picture>\n    <source\n      [attr.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.src]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"] }]
+            args: [{ standalone: true, imports: [NgStyle], selector: 'ui-image', template: "@if (image()) {\n  <picture>\n    <source\n      [attr.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.src]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"image().preloadAspectRatio ? { 'aspect-ratio': image().preloadAspectRatio } : {}\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"] }]
         }], propDecorators: { image_src: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2253,70 +2252,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 
 class SectionComponent {
-    tokenService;
     // Style input variables
-    brand_background_colour;
-    non_brand_background_colour;
-    text_on_dark_override = false; // This is for custom/non-brand BG colours
-    image_on_left = false;
-    section_type = 'inform';
+    brand_background_colour = input(...(ngDevMode ? [undefined, { debugName: "brand_background_colour" }] : []));
+    non_brand_background_colour = input(...(ngDevMode ? [undefined, { debugName: "non_brand_background_colour" }] : []));
+    text_on_dark_override = input(false, ...(ngDevMode ? [{ debugName: "text_on_dark_override" }] : [])); // This is for custom/non-brand BG colours
+    image_on_left = input(false, ...(ngDevMode ? [{ debugName: "image_on_left" }] : []));
+    section_type = input('inform', ...(ngDevMode ? [{ debugName: "section_type" }] : []));
     // Content input variables
-    heading_title;
-    heading_subtitle;
-    primary_cta_text;
-    secondary_cta_text;
-    image;
-    alt_text;
+    heading_title = input(...(ngDevMode ? [undefined, { debugName: "heading_title" }] : []));
+    heading_subtitle = input(...(ngDevMode ? [undefined, { debugName: "heading_subtitle" }] : []));
+    primary_cta_text = input(...(ngDevMode ? [undefined, { debugName: "primary_cta_text" }] : []));
+    secondary_cta_text = input(...(ngDevMode ? [undefined, { debugName: "secondary_cta_text" }] : []));
+    image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
+    alt_text = input(...(ngDevMode ? [undefined, { debugName: "alt_text" }] : []));
     // Event input variables
-    href_primary_cta = '';
-    href_secondary_cta = '';
-    backgroundIsDark;
-    isSpotLight;
-    uiBoxId; // To randomise the box id
-    outterContainer = {};
-    innerContainer = {};
-    containerInsetSpaceSmall;
-    containerInsetSpaceLarge;
-    contentInsetSpaceSmall;
-    contentInsetSpaceLarge;
-    imageAspectRatio;
-    constructor(tokenService) {
-        this.tokenService = tokenService;
-    }
-    ngAfterViewInit() {
-        if (this.non_brand_background_colour) {
-            this.setNonBrandBackgroundColour();
-        }
-        // This doesn't appear to be used anywhere
-        this.backgroundIsDark = this.tokenService.getTokenValue(`--oasys-component-box-on-dark-${this.brand_background_colour}`);
-    }
-    ngOnInit() {
-        this.containerInsetSpaceSmall = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-small`);
-        this.containerInsetSpaceLarge = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-large`);
-        this.contentInsetSpaceSmall = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-small-${this.section_type}`);
-        this.contentInsetSpaceLarge = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-large-${this.section_type}`);
-        this.imageAspectRatio = this.tokenService.getTokenValue(`--oasys-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();
-    }
-    /**
-     * Users are able to set custom non brand background colours
-     * If a non brand background colour is provided we ignore branded colours
-     * even if they are provided.
-     */
-    setNonBrandBackgroundColour() {
-        const box = document.getElementById(`ui-box-${this.uiBoxId}`);
-        if (box) {
-            this.brand_background_colour = undefined;
-            box.style.background = this.non_brand_background_colour;
-            if (this.text_on_dark_override) {
-                box.classList.add('text-color--on-dark');
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SectionComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SectionComponent, isStandalone: true, 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" }, providers: [TokenService], ngImport: i0, template: "<ui-box\n  id=\"ui-box-{{ uiBoxId }}\"\n  [box_background]=\"brand_background_colour\"\n  [box_space_left]=\"section_type === 'spotlight' && !image_on_left ? 'none' : undefined\"\n  [box_space_right]=\"section_type === 'spotlight' && image_on_left ? 'none' : undefined\"\n  [box_space]=\"\n    section_type === 'spotlight'\n      ? 'none'\n      : {\n          mobile: containerInsetSpaceSmall,\n          tablet: containerInsetSpaceLarge,\n          laptop: containerInsetSpaceLarge,\n          desktop: containerInsetSpaceLarge,\n        }\n  \"\n>\n  <ui-grid [grid_gap]=\"section_type === 'spotlight' ? 'none' : 'default'\">\n    <ui-column\n      [columns]=\"6\"\n      [ngClass]=\"{ 'image-left': image_on_left, 'image-top-mobile': image_on_left }\"\n    >\n      <ui-box box_space=\"none\" box_background=\"transparent\" box_align_y=\"center\">\n        <ui-image\n          [image_src]=\"image\"\n          [image_alt_text]=\"alt_text\"\n          [preload_aspect_ratio]=\"imageAspectRatio\"\n        ></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]=\"\n          section_type === 'spotlight'\n            ? {\n                mobile: contentInsetSpaceSmall,\n                tablet: contentInsetSpaceLarge,\n                laptop: contentInsetSpaceLarge,\n                desktop: contentInsetSpaceLarge,\n              }\n            : {\n                mobile: contentInsetSpaceSmall,\n                tablet: contentInsetSpaceSmall,\n                laptop: contentInsetSpaceLarge,\n                desktop: contentInsetSpaceLarge,\n              }\n        \"\n      >\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          >\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\n              class=\"text-link text-link--standalone\"\n              [href]=\"href_primary_cta\"\n              bwtrackas=\"oasys.story-block.primary-cta\"\n              >{{ primary_cta_text }}</a\n            >\n            <a\n              *ngIf=\"\n                section_type !== 'spotlight' &&\n                href_secondary_cta.length > 0 &&\n                href_secondary_cta.length > 0\n              \"\n              class=\"text-link text-link--standalone\"\n              [href]=\"href_secondary_cta\"\n              bwtrackas=\"oasys.story-block.secondary-cta\"\n              >{{ secondary_cta_text }}</a\n            >\n          </ui-stack>\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n  </ui-grid>\n</ui-box>\n", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top-mobile{order:0}}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "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", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap", "grid_base"] }, { kind: "component", type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_aria_describedby", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio", "image_width", "image_sizes"], outputs: ["image_loaded"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", 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", "heading_level"] }, { kind: "directive", type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    href_primary_cta = input('', ...(ngDevMode ? [{ debugName: "href_primary_cta" }] : []));
+    href_secondary_cta = input('', ...(ngDevMode ? [{ debugName: "href_secondary_cta" }] : []));
+    tokenService = inject(TokenService);
+    uiBoxId = computed(() => `ui-box-${Date.now()}-${Math.random()}`, ...(ngDevMode ? [{ debugName: "uiBoxId" }] : []));
+    displayBrandBackgroundColour = computed(() => this.non_brand_background_colour() ? undefined : this.brand_background_colour(), ...(ngDevMode ? [{ debugName: "displayBrandBackgroundColour" }] : []));
+    containerInsetSpaceSmall = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-small`), ...(ngDevMode ? [{ debugName: "containerInsetSpaceSmall" }] : []));
+    containerInsetSpaceLarge = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-large`), ...(ngDevMode ? [{ debugName: "containerInsetSpaceLarge" }] : []));
+    contentInsetSpaceSmall = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-small-${this.section_type()}`), ...(ngDevMode ? [{ debugName: "contentInsetSpaceSmall" }] : []));
+    contentInsetSpaceLarge = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-large-${this.section_type()}`), ...(ngDevMode ? [{ debugName: "contentInsetSpaceLarge" }] : []));
+    imageAspectRatio = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-image-aspect-ratio-${this.section_type()}`), ...(ngDevMode ? [{ debugName: "imageAspectRatio" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SectionComponent, isStandalone: true, selector: "ui-section", inputs: { brand_background_colour: { classPropertyName: "brand_background_colour", publicName: "brand_background_colour", isSignal: true, isRequired: false, transformFunction: null }, non_brand_background_colour: { classPropertyName: "non_brand_background_colour", publicName: "non_brand_background_colour", isSignal: true, isRequired: false, transformFunction: null }, text_on_dark_override: { classPropertyName: "text_on_dark_override", publicName: "text_on_dark_override", isSignal: true, isRequired: false, transformFunction: null }, image_on_left: { classPropertyName: "image_on_left", publicName: "image_on_left", isSignal: true, isRequired: false, transformFunction: null }, section_type: { classPropertyName: "section_type", publicName: "section_type", isSignal: true, isRequired: false, transformFunction: null }, heading_title: { classPropertyName: "heading_title", publicName: "heading_title", isSignal: true, isRequired: false, transformFunction: null }, heading_subtitle: { classPropertyName: "heading_subtitle", publicName: "heading_subtitle", isSignal: true, isRequired: false, transformFunction: null }, primary_cta_text: { classPropertyName: "primary_cta_text", publicName: "primary_cta_text", isSignal: true, isRequired: false, transformFunction: null }, secondary_cta_text: { classPropertyName: "secondary_cta_text", publicName: "secondary_cta_text", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, alt_text: { classPropertyName: "alt_text", publicName: "alt_text", isSignal: true, isRequired: false, transformFunction: null }, href_primary_cta: { classPropertyName: "href_primary_cta", publicName: "href_primary_cta", isSignal: true, isRequired: false, transformFunction: null }, href_secondary_cta: { classPropertyName: "href_secondary_cta", publicName: "href_secondary_cta", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TokenService], ngImport: i0, template: "<ui-box\n  [id]=\"uiBoxId()\"\n  [box_background]=\"displayBrandBackgroundColour()\"\n  [style.background]=\"non_brand_background_colour() ?? null\"\n  [class.text-color--on-dark]=\"!!non_brand_background_colour() && text_on_dark_override()\"\n  [box_space_left]=\"section_type() === 'spotlight' && !image_on_left() ? 'none' : undefined\"\n  [box_space_right]=\"section_type() === 'spotlight' && image_on_left() ? 'none' : undefined\"\n  [box_space]=\"\n    section_type() === 'spotlight'\n      ? 'none'\n      : {\n          mobile: containerInsetSpaceSmall(),\n          tablet: containerInsetSpaceLarge(),\n          laptop: containerInsetSpaceLarge(),\n          desktop: containerInsetSpaceLarge(),\n        }\n  \"\n>\n  <ui-grid [grid_gap]=\"section_type() === 'spotlight' ? 'none' : 'default'\">\n    @if (image(); as resolvedImage) {\n      <ui-column\n        [columns]=\"6\"\n        [ngClass]=\"{ 'image-left': image_on_left(), 'image-top-mobile': image_on_left() }\"\n      >\n        <ui-box box_space=\"none\" box_background=\"transparent\" box_align_y=\"center\">\n          <ui-image\n            [image_src]=\"resolvedImage\"\n            [image_alt_text]=\"alt_text() ?? ''\"\n            [preload_aspect_ratio]=\"imageAspectRatio()\"\n          ></ui-image>\n        </ui-box>\n      </ui-column>\n    }\n    <ui-column [columns]=\"6\">\n      <ui-box\n        [box_background]=\"displayBrandBackgroundColour()\"\n        box_align_y=\"center\"\n        [box_space]=\"\n          section_type() === 'spotlight'\n            ? {\n                mobile: contentInsetSpaceSmall(),\n                tablet: contentInsetSpaceLarge(),\n                laptop: contentInsetSpaceLarge(),\n                desktop: contentInsetSpaceLarge(),\n              }\n            : {\n                mobile: contentInsetSpaceSmall(),\n                tablet: contentInsetSpaceSmall(),\n                laptop: contentInsetSpaceLarge(),\n                desktop: contentInsetSpaceLarge(),\n              }\n        \"\n      >\n        @if (heading_title() || primary_cta_text() || secondary_cta_text()) {\n          <ui-stack\n            stack_direction=\"y\"\n            stack_align=\"center\"\n            stack_distribute=\"center\"\n            [stack_wrap]=\"true\"\n          >\n            @if (heading_title(); as title) {\n              <ui-heading\n                [heading_type]=\"section_type() === 'spotlight' ? 'primary' : 'functional-primary'\"\n                [heading_title]=\"title\"\n                [heading_subtitle]=\"heading_subtitle() ?? ''\"\n              >\n              </ui-heading>\n            }\n\n            @if (primary_cta_text() || secondary_cta_text()) {\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                @if (primary_cta_text(); as primaryCtaText) {\n                  @if (href_primary_cta(); as hrefPrimaryCta) {\n                    <a\n                      class=\"text-link text-link--standalone\"\n                      [href]=\"hrefPrimaryCta\"\n                      bwtrackas=\"oasys.story-block.primary-cta\"\n                      >{{ primaryCtaText }}</a\n                    >\n                  }\n                }\n                @if (secondary_cta_text(); as secondaryCtaText) {\n                  @if (href_secondary_cta(); as hrefSecondaryCta) {\n                    <a\n                      class=\"text-link text-link--standalone\"\n                      [href]=\"hrefSecondaryCta\"\n                      bwtrackas=\"oasys.story-block.secondary-cta\"\n                      >{{ secondaryCtaText }}</a\n                    >\n                  }\n                }\n              </ui-stack>\n            }\n          </ui-stack>\n        }\n      </ui-box>\n    </ui-column>\n  </ui-grid>\n</ui-box>\n", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top-mobile{order:0}}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "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", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap", "grid_base"] }, { kind: "component", type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_aria_describedby", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio", "image_width", "image_sizes"], outputs: ["image_loaded"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", 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", "heading_level"] }, { kind: "directive", type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -2329,35 +2290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         LayoutStackComponent,
                         OasysHeadingComponent,
                         OasysHrefDirective,
-                        NgIf,
-                    ], providers: [TokenService], template: "<ui-box\n  id=\"ui-box-{{ uiBoxId }}\"\n  [box_background]=\"brand_background_colour\"\n  [box_space_left]=\"section_type === 'spotlight' && !image_on_left ? 'none' : undefined\"\n  [box_space_right]=\"section_type === 'spotlight' && image_on_left ? 'none' : undefined\"\n  [box_space]=\"\n    section_type === 'spotlight'\n      ? 'none'\n      : {\n          mobile: containerInsetSpaceSmall,\n          tablet: containerInsetSpaceLarge,\n          laptop: containerInsetSpaceLarge,\n          desktop: containerInsetSpaceLarge,\n        }\n  \"\n>\n  <ui-grid [grid_gap]=\"section_type === 'spotlight' ? 'none' : 'default'\">\n    <ui-column\n      [columns]=\"6\"\n      [ngClass]=\"{ 'image-left': image_on_left, 'image-top-mobile': image_on_left }\"\n    >\n      <ui-box box_space=\"none\" box_background=\"transparent\" box_align_y=\"center\">\n        <ui-image\n          [image_src]=\"image\"\n          [image_alt_text]=\"alt_text\"\n          [preload_aspect_ratio]=\"imageAspectRatio\"\n        ></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]=\"\n          section_type === 'spotlight'\n            ? {\n                mobile: contentInsetSpaceSmall,\n                tablet: contentInsetSpaceLarge,\n                laptop: contentInsetSpaceLarge,\n                desktop: contentInsetSpaceLarge,\n              }\n            : {\n                mobile: contentInsetSpaceSmall,\n                tablet: contentInsetSpaceSmall,\n                laptop: contentInsetSpaceLarge,\n                desktop: contentInsetSpaceLarge,\n              }\n        \"\n      >\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          >\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\n              class=\"text-link text-link--standalone\"\n              [href]=\"href_primary_cta\"\n              bwtrackas=\"oasys.story-block.primary-cta\"\n              >{{ primary_cta_text }}</a\n            >\n            <a\n              *ngIf=\"\n                section_type !== 'spotlight' &&\n                href_secondary_cta.length > 0 &&\n                href_secondary_cta.length > 0\n              \"\n              class=\"text-link text-link--standalone\"\n              [href]=\"href_secondary_cta\"\n              bwtrackas=\"oasys.story-block.secondary-cta\"\n              >{{ secondary_cta_text }}</a\n            >\n          </ui-stack>\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n  </ui-grid>\n</ui-box>\n", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top-mobile{order:0}}\n"] }]
-        }], ctorParameters: () => [{ type: TokenService }], propDecorators: { brand_background_colour: [{
-                type: Input
-            }], non_brand_background_colour: [{
-                type: Input
-            }], text_on_dark_override: [{
-                type: Input
-            }], image_on_left: [{
-                type: Input
-            }], section_type: [{
-                type: Input
-            }], heading_title: [{
-                type: Input
-            }], heading_subtitle: [{
-                type: Input
-            }], primary_cta_text: [{
-                type: Input
-            }], secondary_cta_text: [{
-                type: Input
-            }], image: [{
-                type: Input
-            }], alt_text: [{
-                type: Input
-            }], href_primary_cta: [{
-                type: Input
-            }], href_secondary_cta: [{
-                type: Input
-            }] } });
+                    ], providers: [TokenService], template: "<ui-box\n  [id]=\"uiBoxId()\"\n  [box_background]=\"displayBrandBackgroundColour()\"\n  [style.background]=\"non_brand_background_colour() ?? null\"\n  [class.text-color--on-dark]=\"!!non_brand_background_colour() && text_on_dark_override()\"\n  [box_space_left]=\"section_type() === 'spotlight' && !image_on_left() ? 'none' : undefined\"\n  [box_space_right]=\"section_type() === 'spotlight' && image_on_left() ? 'none' : undefined\"\n  [box_space]=\"\n    section_type() === 'spotlight'\n      ? 'none'\n      : {\n          mobile: containerInsetSpaceSmall(),\n          tablet: containerInsetSpaceLarge(),\n          laptop: containerInsetSpaceLarge(),\n          desktop: containerInsetSpaceLarge(),\n        }\n  \"\n>\n  <ui-grid [grid_gap]=\"section_type() === 'spotlight' ? 'none' : 'default'\">\n    @if (image(); as resolvedImage) {\n      <ui-column\n        [columns]=\"6\"\n        [ngClass]=\"{ 'image-left': image_on_left(), 'image-top-mobile': image_on_left() }\"\n      >\n        <ui-box box_space=\"none\" box_background=\"transparent\" box_align_y=\"center\">\n          <ui-image\n            [image_src]=\"resolvedImage\"\n            [image_alt_text]=\"alt_text() ?? ''\"\n            [preload_aspect_ratio]=\"imageAspectRatio()\"\n          ></ui-image>\n        </ui-box>\n      </ui-column>\n    }\n    <ui-column [columns]=\"6\">\n      <ui-box\n        [box_background]=\"displayBrandBackgroundColour()\"\n        box_align_y=\"center\"\n        [box_space]=\"\n          section_type() === 'spotlight'\n            ? {\n                mobile: contentInsetSpaceSmall(),\n                tablet: contentInsetSpaceLarge(),\n                laptop: contentInsetSpaceLarge(),\n                desktop: contentInsetSpaceLarge(),\n              }\n            : {\n                mobile: contentInsetSpaceSmall(),\n                tablet: contentInsetSpaceSmall(),\n                laptop: contentInsetSpaceLarge(),\n                desktop: contentInsetSpaceLarge(),\n              }\n        \"\n      >\n        @if (heading_title() || primary_cta_text() || secondary_cta_text()) {\n          <ui-stack\n            stack_direction=\"y\"\n            stack_align=\"center\"\n            stack_distribute=\"center\"\n            [stack_wrap]=\"true\"\n          >\n            @if (heading_title(); as title) {\n              <ui-heading\n                [heading_type]=\"section_type() === 'spotlight' ? 'primary' : 'functional-primary'\"\n                [heading_title]=\"title\"\n                [heading_subtitle]=\"heading_subtitle() ?? ''\"\n              >\n              </ui-heading>\n            }\n\n            @if (primary_cta_text() || secondary_cta_text()) {\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                @if (primary_cta_text(); as primaryCtaText) {\n                  @if (href_primary_cta(); as hrefPrimaryCta) {\n                    <a\n                      class=\"text-link text-link--standalone\"\n                      [href]=\"hrefPrimaryCta\"\n                      bwtrackas=\"oasys.story-block.primary-cta\"\n                      >{{ primaryCtaText }}</a\n                    >\n                  }\n                }\n                @if (secondary_cta_text(); as secondaryCtaText) {\n                  @if (href_secondary_cta(); as hrefSecondaryCta) {\n                    <a\n                      class=\"text-link text-link--standalone\"\n                      [href]=\"hrefSecondaryCta\"\n                      bwtrackas=\"oasys.story-block.secondary-cta\"\n                      >{{ secondaryCtaText }}</a\n                    >\n                  }\n                }\n              </ui-stack>\n            }\n          </ui-stack>\n        }\n      </ui-box>\n    </ui-column>\n  </ui-grid>\n</ui-box>\n", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top-mobile{order:0}}\n"] }]
+        }], propDecorators: { brand_background_colour: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand_background_colour", required: false }] }], non_brand_background_colour: [{ type: i0.Input, args: [{ isSignal: true, alias: "non_brand_background_colour", required: false }] }], text_on_dark_override: [{ type: i0.Input, args: [{ isSignal: true, alias: "text_on_dark_override", required: false }] }], image_on_left: [{ type: i0.Input, args: [{ isSignal: true, alias: "image_on_left", required: false }] }], section_type: [{ type: i0.Input, args: [{ isSignal: true, alias: "section_type", required: false }] }], heading_title: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading_title", required: false }] }], heading_subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading_subtitle", required: false }] }], primary_cta_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary_cta_text", required: false }] }], secondary_cta_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary_cta_text", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], alt_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt_text", required: false }] }], href_primary_cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "href_primary_cta", required: false }] }], href_secondary_cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "href_secondary_cta", required: false }] }] } });
 
 /** @deprecated Import the standalone SectionComponent directly instead. */
 class SectionModule {