oasys-lib 2.35.0 → 2.35.1

package/fesm2022/oasys-lib.mjs

@@ -943,19 +943,13 @@ class ImageComponent {
     fetchpriority = 'auto';
     loading = 'lazy';
     preload_aspect_ratio = '1:1';
-    image_width = null; // source when defining sizes either relates on viewport width or a specificed width in pixels
+    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();
     imageUrlProvider = inject(IMAGE_URL_PROVIDER);
-    el = inject((ElementRef));
     image = signal(null, ...(ngDevMode ? [{ debugName: "image" }] : []));
     breakpoints = inject(IMAGE_BREAKPOINTS);
     fallbackBreakpoint = 768;
-    imageSizes = this.breakpoints.map((size) => `(max-width: ${size}px) ${size}px`).join(', ');
-    measuredWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "measuredWidthPx" }] : []));
-    resizeObserver = null;
-    intersectionObserver = null;
-    lazySourcesApplied = false;
-    viewInitialized = false;
     get class() {
         return this.image_fill ? 'imageFill' : '';
     }
@@ -965,203 +959,53 @@ class ImageComponent {
     ngOnInit() {
         this.createImage();
     }
-    ngAfterViewInit() {
-        this.viewInitialized = true;
-        this.setupResizeObserver();
-        void this.setupLazyLoading();
-    }
     /**
      * On changes, handle any changes in input properties.
      */
     ngOnChanges(changes) {
-        if ('image_src' in changes || 'image_width' in changes || 'preload_aspect_ratio' in changes) {
-            if ('image_width' in changes) {
-                this.measuredWidthPx.set(null);
-                if (this.image_width) {
-                    this.cleanupResizeObserver();
-                }
-            }
-            this.lazySourcesApplied = false;
-            this.cleanupObserver();
+        const hasSubsequentChange = Object.values(changes).some((change) => !change.firstChange);
+        if (hasSubsequentChange) {
             this.createImage();
-            if (this.viewInitialized) {
-                this.setupResizeObserver();
-                void this.setupLazyLoading();
-            }
         }
     }
-    /**
-     * Clean up the observer when the component is destroyed.
-     */
-    ngOnDestroy() {
-        this.cleanupObserver();
-        this.cleanupResizeObserver();
-    }
     /**
      * Creates the image object with the provided properties.
      */
     createImage() {
         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),
-            loading: this.loading,
+            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),
             altText: this.image_alt_text,
             ariaDescribedby: this.image_aria_describedby ?? null,
         };
         this.image.set(newImage);
     }
-    resolvedSizes() {
+    resolveLoading() {
+        return this.fetchpriority === 'high' ? 'eager' : this.loading;
+    }
+    resolveSizes(loading) {
         if (this.image_width) {
             return `${this.image_width}px`;
         }
-        const measured = this.measuredWidthPx();
-        if (measured && measured > 0) {
-            return `${measured}px`;
-        }
-        return this.imageSizes;
-    }
-    setupResizeObserver() {
-        if (this.image_width || typeof ResizeObserver === 'undefined' || this.resizeObserver) {
-            return;
-        }
-        const host = this.el.nativeElement;
-        const syncWidth = Math.round(host.getBoundingClientRect().width || host.offsetWidth || 0);
-        if (syncWidth > 0) {
-            this.measuredWidthPx.set(syncWidth);
-            return;
-        }
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const width = entries[0].borderBoxSize[0].inlineSize;
-            const rounded = Math.round(width);
-            if (rounded <= 0 || rounded === this.measuredWidthPx()) {
-                return;
-            }
-            this.measuredWidthPx.set(rounded);
-            this.cleanupResizeObserver();
-        });
-        this.resizeObserver.observe(host);
-    }
-    cleanupResizeObserver() {
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = null;
-    }
-    /**
-     * Sets up lazy loading for the image using IntersectionObserver.
-     * This method observes the image element and loads the image when it comes into view.
-     * It sets the `src` attribute for the image and the `srcset` attribute for the source element.
-     * The observer is configured to remove the image after it has been observed to save memory.
-     */
-    setupLazyLoading() {
-        return Promise.resolve().then(() => {
-            // Defer setup until after the view is initialized to ensure the <img> element exists.
-            if (this.intersectionObserver) {
-                return;
-            }
-            const imageElement = this.el.nativeElement.querySelector('img');
-            if (!imageElement) {
-                return;
-            }
-            if (this.loading === 'eager' || this.fetchpriority === 'high') {
-                this.loadImageSources(imageElement);
-                return;
-            }
-            this.intersectionObserver = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        this.loadImageSources(entry.target);
-                        // Stop observing this image once it's loaded.
-                        this.intersectionObserver?.unobserve(entry.target);
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '100px',
-                threshold: 0.01,
-            });
-            this.intersectionObserver.observe(imageElement);
-        });
-    }
-    loadImageSources(img) {
-        if (this.lazySourcesApplied) {
-            return;
-        }
-        if (!this.image_width) {
-            const host = this.el.nativeElement;
-            const width = Math.round(host.getBoundingClientRect().width || host.offsetWidth || 0);
-            if (width > 0) {
-                this.measuredWidthPx.set(width);
-            }
-        }
-        const source = img.parentElement?.querySelector('source');
-        const dataSrcset = source?.getAttribute('data-srcset');
-        if (source) {
-            source.setAttribute('sizes', this.resolvedSizes());
-            if (dataSrcset) {
-                // Move the URLs from data-srcset to srcset
-                source.setAttribute('srcset', dataSrcset);
-            }
-        }
-        const dataSrc = img.getAttribute('data-src');
-        const slotWidthPx = this.image_width ?? this.measuredWidthPx() ?? 0;
-        let imgSrc = dataSrc;
-        if (dataSrcset && slotWidthPx > 0) {
-            imgSrc = this.pickSrcsetUrlForSlot(dataSrcset, slotWidthPx) ?? dataSrc;
-        }
-        if (imgSrc) {
-            // Move the URL from data-src to src
-            img.setAttribute('src', imgSrc);
-        }
-        this.lazySourcesApplied = true;
-    }
-    pickSrcsetUrlForSlot(srcset, slotWidthPx) {
-        const targetWidth = Math.ceil(slotWidthPx * (window.devicePixelRatio || 1));
-        const candidates = srcset
-            .split(',')
-            .map((candidate) => candidate.trim())
-            .map((candidate) => {
-            const descriptorIndex = candidate.lastIndexOf(' ');
-            if (descriptorIndex === -1) {
-                return null;
-            }
-            const url = candidate.slice(0, descriptorIndex).trim();
-            const width = parseInt(candidate.slice(descriptorIndex + 1), 10);
-            return url && !Number.isNaN(width) ? { url, width } : null;
-        })
-            .filter((candidate) => candidate !== null);
-        if (candidates.length === 0) {
-            return null;
-        }
-        const atOrAbove = candidates
-            .filter(({ width }) => width >= targetWidth)
-            .sort((a, b) => a.width - b.width);
-        if (atOrAbove.length > 0) {
-            return atOrAbove[0].url;
-        }
-        return candidates.sort((a, b) => b.width - a.width)[0].url;
-    }
-    /**
-     * Cleans up the IntersectionObserver to prevent memory leaks.
-     * This method disconnects the observer and sets it to null.
-     */
-    cleanupObserver() {
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-            this.intersectionObserver = null;
-        }
+        const fallback = this.image_sizes ?? '100vw';
+        return loading === 'lazy' ? `auto, ${fallback}` : fallback;
     }
     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" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <picture>\n    <source\n      [attr.sizes]=\"resolvedSizes()\"\n      [attr.srcset]=\"null\"\n      [attr.data-srcset]=\"image().srcSetUrls\"\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.data-src]=\"image().fallbackUrl\"\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,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}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]=\"{ '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.sizes]=\"resolvedSizes()\"\n      [attr.srcset]=\"null\"\n      [attr.data-srcset]=\"image().srcSetUrls\"\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.data-src]=\"image().fallbackUrl\"\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,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}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]=\"{ '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 }]
@@ -1179,6 +1023,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], image_width: [{
                 type: Input
+            }], image_sizes: [{
+                type: Input
             }], image_loaded: [{
                 type: Output
             }], class: [{
@@ -1236,7 +1082,7 @@ class CardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CardComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CardComponent, isStandalone: true, 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)" } }, providers: [TokenService], viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: ElementRef }], ngImport: i0, 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    >\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      >\n        <h5>{{ label_text }}</h5>\n      </ui-box>\n      <ui-box\n        *ngIf=\"small_title_left || small_sub_title_right\"\n        [box_space_top]=\"label_text ? 'none' : 'tight'\"\n        box_space=\"none\"\n        box_background=\"transparent\"\n      >\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\">{{\n            small_sub_title_right\n          }}</span>\n        </ui-stack>\n      </ui-box>\n      <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">\n        {{ standard_content }}\n      </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:var(--oasys-radius-soften);margin:0 var(--oasys-spacing-tight);text-align:center;overflow:hidden;z-index:2}\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: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"], outputs: ["image_loaded"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CardComponent, isStandalone: true, 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)" } }, providers: [TokenService], viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: ElementRef }], ngImport: i0, 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    >\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      >\n        <h5>{{ label_text }}</h5>\n      </ui-box>\n      <ui-box\n        *ngIf=\"small_title_left || small_sub_title_right\"\n        [box_space_top]=\"label_text ? 'none' : 'tight'\"\n        box_space=\"none\"\n        box_background=\"transparent\"\n      >\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\">{{\n            small_sub_title_right\n          }}</span>\n        </ui-stack>\n      </ui-box>\n      <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">\n        {{ standard_content }}\n      </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:var(--oasys-radius-soften);margin:0 var(--oasys-spacing-tight);text-align:center;overflow:hidden;z-index:2}\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: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -2470,7 +2316,7 @@ class SectionComponent {
         }
     }
     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"], 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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -3053,7 +2899,7 @@ class PromoCardComponent {
         this.cta_clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PromoCardComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PromoCardComponent, isStandalone: true, selector: "ui-promo-card", inputs: { image: "image", alt_text: "alt_text", title: "title", subtitle: "subtitle", primary_cta_text: "primary_cta_text", href_primary_cta: "href_primary_cta", background_colour: "background_colour", font_colour: "font_colour", layout: "layout" }, outputs: { cta_clicked: "cta_clicked" }, providers: [TokenService], ngImport: i0, template: "<ui-box box_space=\"none\" [ngStyle]=\"{ 'background-color': background_colour, color: font_colour }\">\n  <ui-stack [stack_gap]=\"layoutConfig.spacing\" stack_align=\"center\">\n    <ui-box box_space=\"none\">\n      <ui-image\n        [image_fill]=\"true\"\n        [image_src]=\"image\"\n        [image_alt_text]=\"alt_text\"\n        [preload_aspect_ratio]=\"aspectRatio\"\n      ></ui-image>\n    </ui-box>\n    <ui-box\n      [box_align_y]=\"alignment\"\n      box_space_top=\"none\"\n      [box_space]=\"layoutConfig.spacing\"\n      [ngStyle]=\"{ 'background-color': background_colour }\"\n    >\n      <ui-stack stack_gap=\"near\" stack_distribute=\"center\" [stack_align]=\"alignment\">\n        <h3\n          [ngClass]=\"{\n            'text-heading--body--expressive': layoutConfig.headingType === 'body-expressive',\n            'text-heading--secondary': layoutConfig.headingType === 'secondary',\n          }\"\n          role=\"heading\"\n          class=\"seo-h2\"\n        >\n          <span class=\"heading-title text-heading\">{{ title }}</span>\n        </h3>\n        <p\n          [ngClass]=\"{\n            'text-body--default': layoutConfig.bodyType === 'body-default',\n            'text-body--supporting': layoutConfig.bodyType === 'body-supporting',\n          }\"\n        >\n          {{ subtitle }}\n        </p>\n        <a\n          class=\"text-link text-link--standalone\"\n          bwtrackas=\"component.modular-content-card.cta\"\n          href=\"{{ href_primary_cta }}\"\n          (click)=\"ctaClicked()\"\n          >{{ primary_cta_text }}</a\n        >\n      </ui-stack>\n    </ui-box>\n  </ui-stack>\n</ui-box>\n", styles: ["ui-image img{object-fit:cover}p,h3{text-align:var(--oasys-component-promo-card-heading-alignment)}\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_aria_describedby", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio", "image_width"], outputs: ["image_loaded"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PromoCardComponent, isStandalone: true, selector: "ui-promo-card", inputs: { image: "image", alt_text: "alt_text", title: "title", subtitle: "subtitle", primary_cta_text: "primary_cta_text", href_primary_cta: "href_primary_cta", background_colour: "background_colour", font_colour: "font_colour", layout: "layout" }, outputs: { cta_clicked: "cta_clicked" }, providers: [TokenService], ngImport: i0, template: "<ui-box box_space=\"none\" [ngStyle]=\"{ 'background-color': background_colour, color: font_colour }\">\n  <ui-stack [stack_gap]=\"layoutConfig.spacing\" stack_align=\"center\">\n    <ui-box box_space=\"none\">\n      <ui-image\n        [image_fill]=\"true\"\n        [image_src]=\"image\"\n        [image_alt_text]=\"alt_text\"\n        [preload_aspect_ratio]=\"aspectRatio\"\n      ></ui-image>\n    </ui-box>\n    <ui-box\n      [box_align_y]=\"alignment\"\n      box_space_top=\"none\"\n      [box_space]=\"layoutConfig.spacing\"\n      [ngStyle]=\"{ 'background-color': background_colour }\"\n    >\n      <ui-stack stack_gap=\"near\" stack_distribute=\"center\" [stack_align]=\"alignment\">\n        <h3\n          [ngClass]=\"{\n            'text-heading--body--expressive': layoutConfig.headingType === 'body-expressive',\n            'text-heading--secondary': layoutConfig.headingType === 'secondary',\n          }\"\n          role=\"heading\"\n          class=\"seo-h2\"\n        >\n          <span class=\"heading-title text-heading\">{{ title }}</span>\n        </h3>\n        <p\n          [ngClass]=\"{\n            'text-body--default': layoutConfig.bodyType === 'body-default',\n            'text-body--supporting': layoutConfig.bodyType === 'body-supporting',\n          }\"\n        >\n          {{ subtitle }}\n        </p>\n        <a\n          class=\"text-link text-link--standalone\"\n          bwtrackas=\"component.modular-content-card.cta\"\n          href=\"{{ href_primary_cta }}\"\n          (click)=\"ctaClicked()\"\n          >{{ primary_cta_text }}</a\n        >\n      </ui-stack>\n    </ui-box>\n  </ui-stack>\n</ui-box>\n", styles: ["ui-image img{object-fit:cover}p,h3{text-align:var(--oasys-component-promo-card-heading-alignment)}\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PromoCardComponent, decorators: [{
             type: Component,
@@ -3174,7 +3020,7 @@ class SelectCardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectCardComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SelectCardComponent, isStandalone: true, selector: "ui-select-card", inputs: { image: "image", alt_text: "alt_text", image_format: "image_format", title: "title", primary_copy: "primary_copy", secondary_copy: "secondary_copy", price: "price", price_before_discount: "price_before_discount", selected: "selected", select_card_type: "select_card_type" }, outputs: { clicked: "clicked" }, providers: [TokenService], ngImport: i0, template: "<button\n  role=\"button\"\n  class=\"ui-select-card--{{ select_card_type }}\"\n  tabindex=\"0\"\n  [ngClass]=\"{ selected: selected }\"\n  [attr.aria-pressed]=\"selected ? 'true' : 'false'\"\n  (click)=\"onClick()\"\n>\n  <ui-box box_space=\"none\" box_background=\"transparent\">\n    <ui-stack stack_gap=\"none\" stack_align=\"center\">\n      <ui-box\n        class=\"ui-select-card__image\"\n        [ngStyle]=\"{ 'aspect-ratio': aspectRatio }\"\n        box_background=\"transparent\"\n        box_align_x=\"center\"\n        box_space=\"none\"\n      >\n        <ui-image\n          *ngIf=\"image\"\n          [image_src]=\"image\"\n          [image_alt_text]=\"alt_text\"\n          [image_fill]=\"true\"\n        ></ui-image>\n        <ng-content></ng-content>\n      </ui-box>\n      <ng-template\n        *ngIf=\"select_card_type === 'gift-card'\"\n        [ngTemplateOutlet]=\"giftcard\"\n      ></ng-template>\n      <ng-template\n        *ngIf=\"select_card_type === 'product-card'\"\n        [ngTemplateOutlet]=\"productcard\"\n      ></ng-template>\n    </ui-stack>\n  </ui-box>\n</button>\n\n<!--- GIFT CARD TEMPLATE -->\n<ng-template #giftcard>\n  <ui-box box_space=\"tight\" box_background=\"transparent\">\n    <ui-stack class=\"ui-select-card__text-stack\" stack_direction=\"y\" stack_gap=\"tight\">\n      <span class=\"ui-select-card__text-body text-label--primary\">{{ title }}</span>\n\n      <ui-price\n        [price]=\"price\"\n        [price_before_discount]=\"price_before_discount\"\n        price_type=\"primary\"\n      ></ui-price>\n    </ui-stack>\n  </ui-box>\n</ng-template>\n\n<!--- PRODUCT CARD TEMPLATE -->\n<ng-template #productcard>\n  <ui-box box_fill_mode=\"fit\" box_space=\"near\" box_background=\"transparent\">\n    <ui-stack stack_direction=\"y\" stack_gap=\"near\">\n      <ui-stack class=\"ui-select-card__text-stack\" stack_direction=\"y\" stack_gap=\"none\">\n        <h5>{{ title }}</h5>\n        <ui-stack stack_direction=\"x\" stack_gap=\"near\" stack_align=\"center\">\n          <ui-price\n            [price]=\"price\"\n            [price_before_discount]=\"price_before_discount\"\n            price_type=\"hero\"\n          ></ui-price>\n          <ui-icon\n            *ngIf=\"price_before_discount\"\n            class=\"ui-select-card--product-card__discount-icon\"\n            icon_name=\"tag\"\n            icon_size_override=\"1.5\"\n          ></ui-icon>\n        </ui-stack>\n      </ui-stack>\n      <ui-stack stack_gap=\"near\">\n        <p class=\"text-body--supporting\">{{ secondary_copy }}</p>\n        <p class=\"text-body--default\">{{ primary_copy }}</p>\n      </ui-stack>\n    </ui-stack>\n  </ui-box>\n</ng-template>\n", styles: [".ui-select-card--gift-card,.ui-select-card--product-card{background-color:transparent;border:1px solid transparent;width:100%;display:block;padding:0;appearance:none;cursor:pointer;overflow:hidden}.ui-select-card--gift-card .ui-select-card__image .ui-box-content,.ui-select-card--product-card .ui-select-card__image .ui-box-content{height:100%}.ui-select-card--gift-card__text-stack,.ui-select-card--product-card__text-stack{width:100%}.ui-select-card--gift-card{border-radius:var(--oasys-radius-soften)}.ui-select-card--gift-card .ui-select-card__text-body{text-align:left;min-height:calc(var(--oasys-typography-heading-label-primary-line-height) * 2)}.ui-select-card--product-card{border-radius:var(--oasys-radius-layout);border:1px solid var(--oasys-color-brand-border-secondary)}.ui-select-card--product-card .text-body--default{text-align:left}.ui-select-card--product-card__discount-icon{border-radius:var(--oasys-radius-round);border:1px solid transparent;padding:var(--oasys-spacing-tiny);background-color:var(--oasys-color-brand-foreground-highlight)}.ui-select-card--gift-card.selected,.ui-select-card--product-card.selected{--_select-border-width: var(--oasys-border-width-primary);--_select-border-color: var(--oasys-color-interaction-border-selected);--_select-background-color: var(--oasys-color-interaction-background-selected);background-color:var(--_select-background-color);border:var(--_select-border-width) solid var(--_select-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"], outputs: ["image_loaded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OasysPriceComponent, selector: "ui-price", inputs: ["price", "price_before_discount", "price_type"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SelectCardComponent, isStandalone: true, selector: "ui-select-card", inputs: { image: "image", alt_text: "alt_text", image_format: "image_format", title: "title", primary_copy: "primary_copy", secondary_copy: "secondary_copy", price: "price", price_before_discount: "price_before_discount", selected: "selected", select_card_type: "select_card_type" }, outputs: { clicked: "clicked" }, providers: [TokenService], ngImport: i0, template: "<button\n  role=\"button\"\n  class=\"ui-select-card--{{ select_card_type }}\"\n  tabindex=\"0\"\n  [ngClass]=\"{ selected: selected }\"\n  [attr.aria-pressed]=\"selected ? 'true' : 'false'\"\n  (click)=\"onClick()\"\n>\n  <ui-box box_space=\"none\" box_background=\"transparent\">\n    <ui-stack stack_gap=\"none\" stack_align=\"center\">\n      <ui-box\n        class=\"ui-select-card__image\"\n        [ngStyle]=\"{ 'aspect-ratio': aspectRatio }\"\n        box_background=\"transparent\"\n        box_align_x=\"center\"\n        box_space=\"none\"\n      >\n        <ui-image\n          *ngIf=\"image\"\n          [image_src]=\"image\"\n          [image_alt_text]=\"alt_text\"\n          [image_fill]=\"true\"\n        ></ui-image>\n        <ng-content></ng-content>\n      </ui-box>\n      <ng-template\n        *ngIf=\"select_card_type === 'gift-card'\"\n        [ngTemplateOutlet]=\"giftcard\"\n      ></ng-template>\n      <ng-template\n        *ngIf=\"select_card_type === 'product-card'\"\n        [ngTemplateOutlet]=\"productcard\"\n      ></ng-template>\n    </ui-stack>\n  </ui-box>\n</button>\n\n<!--- GIFT CARD TEMPLATE -->\n<ng-template #giftcard>\n  <ui-box box_space=\"tight\" box_background=\"transparent\">\n    <ui-stack class=\"ui-select-card__text-stack\" stack_direction=\"y\" stack_gap=\"tight\">\n      <span class=\"ui-select-card__text-body text-label--primary\">{{ title }}</span>\n\n      <ui-price\n        [price]=\"price\"\n        [price_before_discount]=\"price_before_discount\"\n        price_type=\"primary\"\n      ></ui-price>\n    </ui-stack>\n  </ui-box>\n</ng-template>\n\n<!--- PRODUCT CARD TEMPLATE -->\n<ng-template #productcard>\n  <ui-box box_fill_mode=\"fit\" box_space=\"near\" box_background=\"transparent\">\n    <ui-stack stack_direction=\"y\" stack_gap=\"near\">\n      <ui-stack class=\"ui-select-card__text-stack\" stack_direction=\"y\" stack_gap=\"none\">\n        <h5>{{ title }}</h5>\n        <ui-stack stack_direction=\"x\" stack_gap=\"near\" stack_align=\"center\">\n          <ui-price\n            [price]=\"price\"\n            [price_before_discount]=\"price_before_discount\"\n            price_type=\"hero\"\n          ></ui-price>\n          <ui-icon\n            *ngIf=\"price_before_discount\"\n            class=\"ui-select-card--product-card__discount-icon\"\n            icon_name=\"tag\"\n            icon_size_override=\"1.5\"\n          ></ui-icon>\n        </ui-stack>\n      </ui-stack>\n      <ui-stack stack_gap=\"near\">\n        <p class=\"text-body--supporting\">{{ secondary_copy }}</p>\n        <p class=\"text-body--default\">{{ primary_copy }}</p>\n      </ui-stack>\n    </ui-stack>\n  </ui-box>\n</ng-template>\n", styles: [".ui-select-card--gift-card,.ui-select-card--product-card{background-color:transparent;border:1px solid transparent;width:100%;display:block;padding:0;appearance:none;cursor:pointer;overflow:hidden}.ui-select-card--gift-card .ui-select-card__image .ui-box-content,.ui-select-card--product-card .ui-select-card__image .ui-box-content{height:100%}.ui-select-card--gift-card__text-stack,.ui-select-card--product-card__text-stack{width:100%}.ui-select-card--gift-card{border-radius:var(--oasys-radius-soften)}.ui-select-card--gift-card .ui-select-card__text-body{text-align:left;min-height:calc(var(--oasys-typography-heading-label-primary-line-height) * 2)}.ui-select-card--product-card{border-radius:var(--oasys-radius-layout);border:1px solid var(--oasys-color-brand-border-secondary)}.ui-select-card--product-card .text-body--default{text-align:left}.ui-select-card--product-card__discount-icon{border-radius:var(--oasys-radius-round);border:1px solid transparent;padding:var(--oasys-spacing-tiny);background-color:var(--oasys-color-brand-foreground-highlight)}.ui-select-card--gift-card.selected,.ui-select-card--product-card.selected{--_select-border-width: var(--oasys-border-width-primary);--_select-border-color: var(--oasys-color-interaction-border-selected);--_select-background-color: var(--oasys-color-interaction-background-selected);background-color:var(--_select-background-color);border:var(--_select-border-width) solid var(--_select-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OasysPriceComponent, selector: "ui-price", inputs: ["price", "price_before_discount", "price_type"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectCardComponent, decorators: [{
             type: Component,