oasys-lib 2.14.0 → 2.16.1-rc.1

package/fesm2022/oasys-lib.mjs

@@ -456,6 +456,13 @@ class IconComponent {
         this.document = document;
         this.tokenService = tokenService;
     }
+    getSizeInPixels(size) {
+        const convertedSize = this.tokenService.convertRemToPixels(size);
+        if (isNaN(convertedSize)) {
+            return this.tokenService.convertRemToPixels('2rem');
+        }
+        return convertedSize;
+    }
     ngOnChanges() {
         this.ngOnInit();
     }
@@ -463,13 +470,12 @@ class IconComponent {
         this.tokenService.getBrandName().subscribe((brandName) => {
             this.iconPath = `./${brandName}/assets/icons/icons.svg#icon-${this.icon_name}`;
             this.size =
-                this.icon_size_override || this.tokenService.getTokenValue('--oasys-size-unit-20');
+                this.icon_size_override ?? this.tokenService.getTokenValue('--oasys-size-unit-20');
             this.iconDisplayClasses = [
                 `icon-context-${this.icon_context}`,
                 `icon-size-${this.icon_size}`,
             ];
-            const sizeInPixels = this.tokenService.convertRemToPixels(this.size);
-            this.iconSizeInPixels = sizeInPixels;
+            this.iconSizeInPixels = this.getSizeInPixels(this.size);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconComponent, deps: [{ token: DOCUMENT }, { token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
@@ -533,6 +539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 class OasysButtonComponent {
     elementRef;
     clicked = new EventEmitter();
@@ -592,11 +599,11 @@ class OasysButtonComponent {
         if (this.aria_label) {
             return this.aria_label;
         }
-        else if (this.ngContent?.nativeElement.innerText.length) {
-            return this.ngContent.nativeElement.innerText;
+        else if (this.ngContent?.nativeElement?.innerText?.length) {
+            return this.ngContent?.nativeElement?.innerText;
         }
-        else if (!this.ngContent && this.elementRef?.nativeElement.innerText.length) {
-            return this.elementRef.nativeElement.innerText;
+        else if (!this.ngContent && this.elementRef?.nativeElement?.innerText?.length) {
+            return this.elementRef?.nativeElement?.innerText;
         }
         return '';
     };
@@ -1131,11 +1138,11 @@ class ImageComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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]=\"image().width ?? imageSizes\"\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.src]=\"null\"\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    />\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: "19.2.15", 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]=\"image().width ?? imageSizes\"\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.src]=\"null\"\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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]=\"image().width ?? imageSizes\"\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.src]=\"null\"\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    />\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.sizes]=\"image().width ?? imageSizes\"\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.src]=\"null\"\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"] }]
         }], propDecorators: { image_src: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2440,7 +2447,7 @@ class SectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SectionComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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=\"section_type !== 'spotlight'\"\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: 767px){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: "19.2.15", 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: 767px){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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -2454,7 +2461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         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=\"section_type !== 'spotlight'\"\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: 767px){ui-grid .image-top-mobile{order:0}}\n"] }]
+                    ], 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: 767px){ui-grid .image-top-mobile{order:0}}\n"] }]
         }], ctorParameters: () => [{ type: TokenService }], propDecorators: { brand_background_colour: [{
                 type: Input
             }], non_brand_background_colour: [{
@@ -2893,22 +2900,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class OasysPillComponent {
-    prefix = 'ui-pill';
-    get class() {
-        return `${this.prefix}-${this.tone}`;
-    }
     tone = 'neutral';
+    pill_role = 'none';
+    role = this.pill_role;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OasysPillComponent, isStandalone: true, selector: "ui-pill", inputs: { tone: "tone" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div role=\"status\" class=\"text-body--supporting text-body--emphasis\"><ng-content></ng-content></div>\n", styles: [":host{border-radius:var(--oasys-radius-round);display:inline-flex;padding:var(--oasys-spacing-tiny) var(--oasys-spacing-near);text-align:center;text-wrap:nowrap}:host.ui-pill-positive{background-color:var(--oasys-color-system-background-positive);color:var(--oasys-color-system-foreground-positive)}:host.ui-pill-negative{background-color:var(--oasys-color-system-background-negative);color:var(--oasys-color-system-foreground-negative)}:host.ui-pill-neutral{background-color:var(--oasys-color-system-background-neutral);color:var(--oasys-color-brand-foreground-primary)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OasysPillComponent, isStandalone: true, selector: "ui-pill", inputs: { tone: "tone", pill_role: "pill_role" }, host: { properties: { "class": "\"ui-pill-\" + tone", "attr.role": "this.role" } }, ngImport: i0, template: "<div role=\"status\" class=\"text-body--supporting text-body--emphasis\"><ng-content></ng-content></div>\n", styles: [":host{border-radius:var(--oasys-radius-round);display:inline-flex;padding:var(--oasys-spacing-tiny) var(--oasys-spacing-near);text-align:center;text-wrap:nowrap}:host.ui-pill-positive{background-color:var(--oasys-color-system-background-positive);color:var(--oasys-color-system-foreground-positive)}:host.ui-pill-negative{background-color:var(--oasys-color-system-background-negative);color:var(--oasys-color-system-foreground-negative)}:host.ui-pill-neutral{background-color:var(--oasys-color-system-background-neutral);color:var(--oasys-color-brand-foreground-primary)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysPillComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-pill', standalone: true, template: "<div role=\"status\" class=\"text-body--supporting text-body--emphasis\"><ng-content></ng-content></div>\n", styles: [":host{border-radius:var(--oasys-radius-round);display:inline-flex;padding:var(--oasys-spacing-tiny) var(--oasys-spacing-near);text-align:center;text-wrap:nowrap}:host.ui-pill-positive{background-color:var(--oasys-color-system-background-positive);color:var(--oasys-color-system-foreground-positive)}:host.ui-pill-negative{background-color:var(--oasys-color-system-background-negative);color:var(--oasys-color-system-foreground-negative)}:host.ui-pill-neutral{background-color:var(--oasys-color-system-background-neutral);color:var(--oasys-color-brand-foreground-primary)}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], tone: [{
+            args: [{ selector: 'ui-pill', standalone: true, host: {
+                        '[class]': '"ui-pill-" + tone',
+                    }, template: "<div role=\"status\" class=\"text-body--supporting text-body--emphasis\"><ng-content></ng-content></div>\n", styles: [":host{border-radius:var(--oasys-radius-round);display:inline-flex;padding:var(--oasys-spacing-tiny) var(--oasys-spacing-near);text-align:center;text-wrap:nowrap}:host.ui-pill-positive{background-color:var(--oasys-color-system-background-positive);color:var(--oasys-color-system-foreground-positive)}:host.ui-pill-negative{background-color:var(--oasys-color-system-background-negative);color:var(--oasys-color-system-foreground-negative)}:host.ui-pill-neutral{background-color:var(--oasys-color-system-background-neutral);color:var(--oasys-color-brand-foreground-primary)}\n"] }]
+        }], propDecorators: { tone: [{
+                type: Input
+            }], pill_role: [{
                 type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });
 
 class OasysPillModule {
@@ -2926,13 +2935,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class OasysPillGroupComponent {
     breakpointService;
-    prefix;
     pill_group_align = 'start';
     pill_group_collapse_below = 'tablet';
     constructor(breakpointService) {
         this.breakpointService = breakpointService;
     }
-    ngOnInit() { }
     get shouldCollapse() {
         switch (this.pill_group_collapse_below) {
             case 'tablet':
@@ -2949,11 +2956,11 @@ class OasysPillGroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysPillGroupComponent, deps: [{ token: BreakpointService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OasysPillGroupComponent, isStandalone: true, selector: "ui-pill-group", inputs: { pill_group_align: "pill_group_align", pill_group_collapse_below: "pill_group_collapse_below" }, ngImport: i0, template: "<ui-stack\n  stack_gap=\"near\"\n  stack_direction=\"x\"\n  [stack_collapse_below]=\"pill_group_collapse_below\"\n  [stack_distribute]=\"pill_group_align\"\n  [stack_wrap]=\"true\"\n>\n  <ng-content></ng-content>\n</ui-stack>\n", styles: ["ui-pill-group{display:block}ui-pill-group>ui-stack>*:not(ui-pill){display:none}ui-pill-group>ui-stack.ui-layout-stack-distribute-end{flex-direction:row-reverse;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OasysPillGroupComponent, isStandalone: true, selector: "ui-pill-group", inputs: { pill_group_align: "pill_group_align", pill_group_collapse_below: "pill_group_collapse_below" }, ngImport: i0, template: "<ui-stack\n  stack_gap=\"near\"\n  stack_direction=\"x\"\n  [stack_collapse_below]=\"pill_group_collapse_below\"\n  [stack_distribute]=\"pill_group_align\"\n  [stack_wrap]=\"true\"\n  [stack_as_list]=\"true\"\n>\n  <ng-content></ng-content>\n</ui-stack>\n", styles: ["ui-pill-group{display:block}ui-pill-group>ui-stack>*:not(ui-pill){display:none}ui-pill-group>ui-stack.ui-layout-stack-distribute-end{flex-direction:row-reverse;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysPillGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-pill-group', encapsulation: ViewEncapsulation.None, standalone: true, imports: [LayoutStackComponent], template: "<ui-stack\n  stack_gap=\"near\"\n  stack_direction=\"x\"\n  [stack_collapse_below]=\"pill_group_collapse_below\"\n  [stack_distribute]=\"pill_group_align\"\n  [stack_wrap]=\"true\"\n>\n  <ng-content></ng-content>\n</ui-stack>\n", styles: ["ui-pill-group{display:block}ui-pill-group>ui-stack>*:not(ui-pill){display:none}ui-pill-group>ui-stack.ui-layout-stack-distribute-end{flex-direction:row-reverse;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'ui-pill-group', encapsulation: ViewEncapsulation.None, standalone: true, imports: [LayoutStackComponent], template: "<ui-stack\n  stack_gap=\"near\"\n  stack_direction=\"x\"\n  [stack_collapse_below]=\"pill_group_collapse_below\"\n  [stack_distribute]=\"pill_group_align\"\n  [stack_wrap]=\"true\"\n  [stack_as_list]=\"true\"\n>\n  <ng-content></ng-content>\n</ui-stack>\n", styles: ["ui-pill-group{display:block}ui-pill-group>ui-stack>*:not(ui-pill){display:none}ui-pill-group>ui-stack.ui-layout-stack-distribute-end{flex-direction:row-reverse;justify-content:flex-start}\n"] }]
         }], ctorParameters: () => [{ type: BreakpointService }], propDecorators: { pill_group_align: [{
                 type: Input
             }], pill_group_collapse_below: [{
@@ -3096,7 +3103,7 @@ class SelectCardComponent {
     tokenService;
     // Image
     image;
-    alt_text;
+    alt_text = '';
     image_format;
     // Content
     title;
@@ -3256,21 +3263,23 @@ class ComboboxComponent {
     displayOptions = [];
     _selectedOption;
     _focusedOption;
-    _focusedOptionId;
+    _focusedOptionId = 0;
+    textInputClicked = false;
     id;
     /** Whether or not the overlay panel is open. */
     panelOpen = signal(false);
+    openedViaKeyboard = false;
     /**
      * Selected option
      */
     get selectedOption() {
-        return this._selectedOption || null;
+        return this._selectedOption;
     }
     /**
      * Focused Option
      */
     get focusedOption() {
-        return this._focusedOption || null;
+        return this._focusedOption;
     }
     /**
      * Return the id of the focused option
@@ -3278,14 +3287,17 @@ class ComboboxComponent {
     get focusedId() {
         return this._focusedOptionId;
     }
+    get shouldShowFocus() {
+        return this.openedViaKeyboard && this.panelOpen();
+    }
     get valueOptionKey() {
-        return this.valueKey ? this.valueKey : 'value';
+        return this.valueKey ?? 'value';
     }
     get displayOptionKey() {
-        return this.displayKey ? this.displayKey : 'label';
+        return this.displayKey ?? 'label';
     }
     get subtextOptionKey() {
-        return this.subtextKey ? this.subtextKey : 'subtext';
+        return this.subtextKey ?? 'subtext';
     }
     textInput;
     combobox;
@@ -3293,13 +3305,14 @@ class ComboboxComponent {
     constructor(document) {
         this.document = document;
     }
-    onChange = () => { };
-    onTouched = () => { };
+    onChange = (_) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    onTouched = () => { }; // eslint-disable-line  @typescript-eslint/no-empty-function
     onClick(targetElement) {
-        if (this.panelOpen()) {
+        if (this.panelOpen() && this.combobox?.nativeElement) {
             const clickedInside = this.combobox.nativeElement.contains(targetElement);
             if (!clickedInside) {
                 this.closePanel();
+                this.textInputClicked = false;
             }
         }
     }
@@ -3311,16 +3324,13 @@ class ComboboxComponent {
         // Detects if the autocomplete options list is chnaged after a selection of an option.
         // Example: Address search can have options assigned to a group of options. One postcode to have x number of addreses
         // If Options list is Changed as part of group option we let the options panel open to let user select a single option. This is considered as change input value(similar with type value)
-        if (this.type === 'autocomplete' && changes['options']) {
+        if (this.type === 'autocomplete') {
             const optionchanges = changes['options'];
-            if (!this.options) {
-                this.closePanel();
-            }
-            if (optionchanges['currentValue'] !== optionchanges['previousValue'] &&
-                this.options?.length !== 0 &&
-                !optionchanges['firstChange']) {
+            if (optionchanges.currentValue !== optionchanges.previousValue &&
+                this.options.length !== 0 &&
+                !optionchanges.firstChange) {
                 this.resetOptionsList();
-                this.openPanel();
+                this.openPanelWithoutSelectingOption();
             }
         }
     }
@@ -3328,15 +3338,26 @@ class ComboboxComponent {
      * On Init
      */
     ngOnInit() {
-        this.id = this.label + Math.random();
+        this.id = `${this.label}${Math.random()}`;
         this.resetSelection();
         this.resetOptionsList();
-        if (this.selected) {
-            const selectedIndex = this.options.findIndex((option) => option[this.valueOptionKey] === this.selected[this.valueOptionKey]);
-            this.selectOption(this.options[selectedIndex], selectedIndex);
+        if (this.selected &&
+            typeof this.selected === 'object' &&
+            this.valueOptionKey in this.selected) {
+            const selectedValue = this.selected[this.valueOptionKey];
+            const selectedIndex = this.options.findIndex((option) => {
+                if (option && typeof option === 'object' && this.valueOptionKey in option) {
+                    return (option[this.valueOptionKey] === selectedValue);
+                }
+                return false;
+            });
+            if (selectedIndex >= 0) {
+                this.selectOption(this.options[selectedIndex], selectedIndex);
+                this.closePanel();
+            }
         }
         if (this.showOptions) {
-            this.openPanel();
+            this.openPanelWithoutSelectingOption();
         }
     }
     /**
@@ -3351,60 +3372,130 @@ class ComboboxComponent {
      */
     selectOption(option, index) {
         this._selectedOption = option;
-        this._focusedOptionId = index;
+        this._focusedOptionId = index ?? 0;
         this._focusedOption = option;
-        this.textValue = this._selectedOption[this.displayOptionKey];
+        if (option && typeof option === 'object' && this.displayOptionKey in option) {
+            this.textValue = option[this.displayOptionKey];
+        }
         this.onChange(this.textValue);
         this.didChange.emit(this.selectedOption);
         this.onTouched();
-        this.closePanel();
     }
     /**
      * On Key Navigation
      * @param event
      */
     onKeyDown(event) {
+        // For 'options' type, keyboard navigation is handled by the combobox container
+        // For 'autocomplete' type, keyboard navigation is handled by the input element
+        const isOptionsType = this.type === 'options';
+        const isAutocompleteType = this.type === 'autocomplete';
+        const isFromInput = event.target === this.textInput?.nativeElement;
+        const isFromCombobox = event.target === this.combobox?.nativeElement ||
+            this.combobox?.nativeElement.contains(event.target);
+        // Only handle keyboard navigation from appropriate elements
+        if (isOptionsType && !isFromCombobox) {
+            return;
+        }
+        if (isAutocompleteType && !isFromInput && !isFromCombobox) {
+            return;
+        }
+        const isPanelOpen = this.panelOpen();
+        const hasOptions = this.displayOptions.length > 0;
         switch (event.key) {
-            case 'Enter':
-                if (this.panelOpen()) {
-                    this.pressEnter();
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                if (!isPanelOpen && hasOptions) {
+                    this.openPanelAndSelectOption();
                 }
-                else {
-                    this.openPanel(event);
+                else if (isPanelOpen && hasOptions) {
+                    this.openedViaKeyboard = true;
+                    this.navigateOptions('down');
                 }
                 break;
-            case 'Tab':
-                if (this.panelOpen()) {
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                if (!isPanelOpen && hasOptions) {
+                    this.openPanelAndSelectOption();
+                }
+                else if (isPanelOpen && hasOptions) {
+                    this.openedViaKeyboard = true;
+                    this.navigateOptions('up');
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                event.stopPropagation();
+                if (!isPanelOpen && hasOptions && this.type === 'options') {
+                    this.openPanelAndSelectOption();
+                }
+                else if (!isPanelOpen && hasOptions && this.type === 'autocomplete') {
+                    this.openPanelWithoutSelectingOption();
+                }
+                else if (isPanelOpen) {
+                    this.pressEnter();
                     this.closePanel();
                 }
                 break;
             case 'Escape':
-                if (this.panelOpen()) {
+                if (isPanelOpen) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.closePanel();
+                }
+                else {
+                    this.textValue = '';
+                    this.resetSelection();
+                }
+                break;
+            case 'Tab':
+                if (isPanelOpen) {
+                    this.pressEnter();
                     this.closePanel();
                 }
                 break;
         }
-        // Logic for open panel
-        if (this.panelOpen()) {
-            this.pressArrows(event);
-            this.optionsList.get(this._focusedOptionId)?.nativeElement.focus();
-        }
     }
     /**
      * Toggle Options Panel
      */
     togglePanel() {
+        this.openedViaKeyboard = false;
         this.panelOpen.set(!this.panelOpen());
-        this.initSelectedFocus();
+        if (this.panelOpen()) {
+            this.initSelectedFocus();
+            setTimeout(() => {
+                this.scrollFocusedOptionIntoView();
+            }, 0);
+        }
     }
     /**
-     * Clase Options Panel
+     * Open Options Panel
      */
-    openPanel(event) {
+    openPanelWithoutSelectingOption(event) {
         event?.preventDefault();
         if (!this.panelOpen()) {
+            this.panelOpen.set(true);
+            this._focusedOptionId = -1;
+            setTimeout(() => {
+                this.scrollFocusedOptionIntoView();
+            }, 0);
+        }
+    }
+    openPanelAndSelectOption() {
+        if (!this.panelOpen() && this.displayOptions.length > 0) {
+            this.openedViaKeyboard = true;
             this.panelOpen.set(true);
             this.initSelectedFocus();
+            if (this.combobox?.nativeElement) {
+                this.combobox.nativeElement.focus();
+            }
+            setTimeout(() => {
+                this.scrollFocusedOptionIntoView();
+            }, 0);
         }
     }
     /**
@@ -3412,6 +3503,7 @@ class ComboboxComponent {
      */
     closePanel() {
         this.panelOpen.set(false);
+        this.openedViaKeyboard = false;
         this.initSelectedFocus();
     }
     /**
@@ -3420,7 +3512,11 @@ class ComboboxComponent {
      */
     writeValue(textValue) {
         if ((this.selected && typeof textValue !== 'string') || textValue === '') {
-            this.textValue = this._selectedOption[this.displayOptionKey];
+            if (this._selectedOption &&
+                typeof this._selectedOption === 'object' &&
+                this.displayOptionKey in this._selectedOption) {
+                this.textValue = this._selectedOption[this.displayOptionKey];
+            }
         }
         else {
             this.textValue = textValue;
@@ -3491,7 +3587,26 @@ class ComboboxComponent {
      * On Focus Input
      */
     onFocusInput() {
-        this.textInput.nativeElement.focus();
+        this.textInput?.nativeElement.focus();
+    }
+    onTextInputClick() {
+        if (this.textInputClicked) {
+            this.openPanelWithoutSelectingOption();
+        }
+        else {
+            this.textInputClicked = true;
+        }
+    }
+    onScreenReaderFocus() {
+        const isPanelOpen = this.panelOpen();
+        const hasOptions = this.displayOptions.length > 0;
+        if (!isPanelOpen && hasOptions) {
+            this.openPanelAndSelectOption();
+        }
+        else if (isPanelOpen) {
+            this.pressEnter();
+            this.closePanel();
+        }
     }
     /**
      * Search in Autocomplete
@@ -3503,25 +3618,28 @@ class ComboboxComponent {
             this.resetSelection();
         }
         else {
-            this.openPanel();
+            this.openPanelWithoutSelectingOption();
             this.displayOptions = this.options.filter((option) => {
-                return (this.checkIncludesSubstring(option, this.displayOptionKey) ||
+                return (this.checkIncludesSubstring(option, this.displayOptionKey) ??
                     this.checkIncludesSubstring(option, this.subtextOptionKey));
             });
             if (this.displayOptions.length === 0) {
                 this.closePanel();
             }
         }
-        this.textInput.nativeElement.focus();
+        this.textInput?.nativeElement.focus();
         this.didSearch.emit(this.textValue);
     }
     /**
-     * Check a susbcring is included in option value
+     * Check a susbtring is included in option value
      * @param option
      * @returns
      */
     checkIncludesSubstring(option, key) {
-        return option[key]?.toString().toLowerCase().includes(this.textValue.toLowerCase());
+        return option[key]
+            ?.toString()
+            .toLowerCase()
+            .includes(this.textValue.toLowerCase());
     }
     /**
      * Set Input Validators
@@ -3534,42 +3652,56 @@ class ComboboxComponent {
      * Init focus mode or set the selected option as focused
      */
     initSelectedFocus() {
-        if (this.panelOpen()) {
+        if (this.panelOpen() && this.displayOptions.length > 0) {
             if (this._selectedOption) {
-                this._focusedOption = this._selectedOption;
-            }
-            else {
-                this._focusedOptionId = 0;
-                this._focusedOption = this.options[this._focusedOptionId];
+                const selectedIndex = this.displayOptions.findIndex((option) => option === this._selectedOption);
+                if (selectedIndex >= 0) {
+                    this._focusedOptionId = selectedIndex;
+                    this._focusedOption = this._selectedOption;
+                    return;
+                }
             }
+            this._focusedOptionId = 0;
+            this._focusedOption = this.displayOptions[0];
+            this.autocompleteOptionTextPreview();
         }
     }
-    /**
-     * Arrows Up/Down navigation inside Options Panel
-     */
-    pressArrows(event) {
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                event.stopPropagation();
-                this._focusedOptionId = Math.min(this._focusedOptionId + 1, this.displayOptions.length - 1);
-                this._focusedOption = this.displayOptions[this._focusedOptionId];
-                this.autocompleteOptionTextPreview();
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                event.stopPropagation();
-                this._focusedOptionId = Math.max(this._focusedOptionId - 1, 0);
-                this._focusedOption = this.displayOptions[this._focusedOptionId];
-                this.autocompleteOptionTextPreview();
-                break;
+    navigateOptions(direction) {
+        if (this.displayOptions.length === 0) {
+            return;
+        }
+        if (direction === 'down') {
+            this._focusedOptionId = Math.min(this._focusedOptionId + 1, this.displayOptions.length - 1);
+        }
+        else {
+            this._focusedOptionId = Math.max(this._focusedOptionId - 1, 0);
+        }
+        this._focusedOption = this.displayOptions[this._focusedOptionId];
+        this.pressEnter();
+        this.autocompleteOptionTextPreview();
+        this.scrollFocusedOptionIntoView();
+    }
+    scrollFocusedOptionIntoView() {
+        if (this.optionsList &&
+            this._focusedOptionId >= 0 &&
+            this._focusedOptionId < this.displayOptions.length) {
+            const focusedElement = this.optionsList.get(this._focusedOptionId)?.nativeElement;
+            if (focusedElement) {
+                focusedElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
         }
     }
     /**
      * Change textValue to preview the option in autocomplete
      */
     autocompleteOptionTextPreview() {
-        if (this.type === 'autocomplete') {
+        if (this.type === 'autocomplete' &&
+            this._focusedOption &&
+            typeof this._focusedOption === 'object' &&
+            this.displayOptionKey in this._focusedOption) {
             this.textValue = this._focusedOption[this.displayOptionKey];
         }
     }
@@ -3578,8 +3710,9 @@ class ComboboxComponent {
      */
     pressEnter() {
         if (this.panelOpen() &&
-            this._focusedOptionId < this.displayOptions.length &&
-            this._focusedOptionId >= 0) {
+            this.displayOptions.length > 0 &&
+            this._focusedOptionId >= 0 &&
+            this._focusedOptionId < this.displayOptions.length) {
             this.selectOption(this.displayOptions[this._focusedOptionId], this._focusedOptionId);
         }
     }
@@ -3587,8 +3720,8 @@ class ComboboxComponent {
      * Reset selected option
      */
     resetSelection() {
-        this._selectedOption = null;
-        this._focusedOption = null;
+        this._selectedOption = undefined;
+        this._focusedOption = undefined;
         this._focusedOptionId = 0;
     }
     /**
@@ -3604,7 +3737,7 @@ class ComboboxComponent {
                 useExisting: forwardRef(() => ComboboxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textinput"], descendants: true, read: ElementRef }, { propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true, read: ElementRef }, { propertyName: "optionsList", predicate: ["option"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n  <div class=\"ui-combobox text-body--default text-body--regular\">\n    <!-- Compbobox Options Input -->\n    @if (type === 'options') {\n      <div\n        #combobox\n        name=\"combobox\"\n        tabindex=\"0\"\n        (keydown)=\"onKeyDown($event)\"\n        (mousedown)=\"togglePanel()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onModelChange(textValue)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'on'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"selectedOption\"\n              [placeholder]=\"placeholder || ''\"\n              readonly=\"readonly\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n          <!-- Select Icon Chevron Area -->\n          <div class=\"icon-container\" [ngClass]=\"{ expand: panelOpen() }\">\n            <ui-icon icon_name=\"chevron-down\"></ui-icon>\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Autocomplete Input -->\n    @if (type === 'autocomplete') {\n      <div\n        #combobox\n        name=\"combobox\"\n        tabindex=\"0\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onFocusInput()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'list'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"textValue\"\n              [placeholder]=\"placeholder || ''\"\n              role=\"combobox\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n\n          <!-- Combobox Icon Clear Area -->\n          <div class=\"icon-container\" [attr.aria-label]=\"'clean'\" (click)=\"cleanInput()\">\n            @if (textValue) {\n              <ui-icon icon_name=\"close\"></ui-icon>\n            }\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Options Panel -->\n    @if (panelOpen()) {\n      <div\n        class=\"ui-combobox-options\"\n        [ngClass]=\"{ expand: panelOpen() }\"\n        role=\"listbox\"\n        id=\"activedescendent-list\"\n      >\n        <!-- Autocomplete Options Panel Header  -->\n        @if (header && type === 'autocomplete') {\n          <div class=\"ui-combobox-header text-body--supporting\">\n            <span>{{ header }}</span>\n          </div>\n        }\n\n        <!-- Options list -->\n        @for (option of displayOptions; track option; let i = $index) {\n          <div\n            #option\n            class=\"ui-combobox-option\"\n            [ngClass]=\"{\n              selected: selectedOption === option,\n              focus: focusedOption === option,\n            }\"\n            (click)=\"selectOption(option, i)\"\n            (keydown)=\"onKeyDown($event)\"\n            [id]=\"'activedescendent-opt-' + i\"\n            [attr.aria-label]=\"\n              selectedOption === option\n                ? option[displayOptionKey] + ' is selected'\n                : option[displayOptionKey]\n            \"\n          >\n            <ui-stack\n              stack_direction=\"x\"\n              stack_distribute=\"space-between\"\n              stack_align=\"center\"\n              stack_gap=\"tight\"\n            >\n              <!-- Option display -->\n              <div\n                [attr.value]=\"valueKey ? option[valueKey] : option.value\"\n                [attr.ngValue]=\"displayKey ? option[displayKey] : option.label\"\n              >\n                <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n                  @if (option.icon_name || (iconNameKey && option[iconNameKey])) {\n                    <ui-icon\n                      [icon_name]=\"iconNameKey ? option[iconNameKey] : option.icon_name\"\n                    ></ui-icon>\n                  }\n                  <!-- Display options label -->\n                  @if (type === 'options') {\n                    <span>{{ option[displayOptionKey] }}</span>\n                  }\n\n                  <!-- Display autocomplete option information and emphasis-->\n                  @if (type === 'autocomplete') {\n                    <ui-stack stack_gap=\"tiny\">\n                      <span\n                        ui-emphasis\n                        [searchText]=\"textValue\"\n                        [displayParagraph]=\"option[displayOptionKey]\"\n                      >\n                      </span>\n                      <p class=\"foreground-secondary-text\">\n                        {{ option[subtextOptionKey] }}\n                      </p>\n                    </ui-stack>\n                  }\n                </ui-stack>\n              </div>\n\n              <!-- Selected icon -->\n              @if (selectedOption === option) {\n                <ui-icon icon_name=\"tick\"></ui-icon>\n              }\n            </ui-stack>\n          </div>\n        }\n        <!-- Autocomplete Options Panel Footer -->\n        @if (footer && type === 'autocomplete') {\n          <div class=\"ui-combobox-footer\">\n            <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n              {{ footer }}\n            </ui-button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <ui-stack stack_gap=\"none\">\n    <div class=\"input-errors\">\n      <div class=\"input-errors-content\">\n        <ng-content select=\"ui-form-errors\"></ng-content>\n      </div>\n    </div>\n    @if (hint) {\n      <ui-box\n        class=\"hint-container\"\n        box_background=\"transparent\"\n        box_space=\"none\"\n        box_space_left=\"near\"\n        box_space_right=\"near\"\n        box_space_bottom=\"near\"\n      >\n        <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n          {{ hint }}\n        </div>\n      </ui-box>\n    }\n  </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-combobox input,.ui-combobox .select,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox]:focus,.ui-combobox div[name=combobox]:focus-visible,.ui-combobox div[name=combobox]:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));transition:opacity var(--_ad);will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox{border-radius:var(--oasys-radius-soften);width:100%}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}\n"], dependencies: [{ 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: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }, { kind: "directive", type: EmphasisDirective, selector: "[ui-emphasis]", inputs: ["searchText", "displayParagraph"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href"], outputs: ["clicked"] }] });
+        ], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textinput"], descendants: true, read: ElementRef }, { propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true, read: ElementRef }, { propertyName: "optionsList", predicate: ["option"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n  <div class=\"ui-combobox text-body--default text-body--regular\">\n    <!-- Compbobox Options Input -->\n    @if (type === 'options') {\n      <div\n        #combobox\n        name=\"combobox\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (keydown)=\"onKeyDown($event)\"\n        (mousedown)=\"togglePanel()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        [attr.disabled]=\"disabled || null\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        [class.keyboard-focus]=\"shouldShowFocus\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              (focus)=\"onScreenReaderFocus()\"\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onModelChange(textValue)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'on'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"selectedOption\"\n              [placeholder]=\"placeholder || ''\"\n              readonly=\"readonly\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n          <!-- Select Icon Chevron Area -->\n          <div class=\"icon-container\" [ngClass]=\"{ expand: panelOpen() }\">\n            <ui-icon icon_name=\"chevron-down\"></ui-icon>\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Autocomplete Input -->\n    @if (type === 'autocomplete') {\n      <div\n        #combobox\n        name=\"combobox\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onFocusInput()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n        [class.keyboard-focus]=\"shouldShowFocus\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (click)=\"onTextInputClick()\"\n              (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'list'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"textValue\"\n              [placeholder]=\"placeholder || ''\"\n              role=\"combobox\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n\n          <!-- Combobox Icon Clear Area -->\n          <div class=\"icon-container\" [attr.aria-label]=\"'clean'\" (click)=\"cleanInput()\">\n            @if (textValue) {\n              <ui-icon icon_name=\"close\"></ui-icon>\n            }\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Options Panel -->\n    @if (panelOpen()) {\n      <div\n        class=\"ui-combobox-options\"\n        [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus }\"\n        role=\"listbox\"\n        id=\"activedescendent-list\"\n      >\n        <!-- Autocomplete Options Panel Header  -->\n        @if (header && type === 'autocomplete') {\n          <div class=\"ui-combobox-header text-body--supporting\">\n            <span>{{ header }}</span>\n          </div>\n        }\n\n        <!-- Options list -->\n        @for (option of displayOptions; track option; let i = $index) {\n          <div\n            #option\n            class=\"ui-combobox-option\"\n            [ngClass]=\"{\n              selected: selectedOption === option && (!shouldShowFocus || focusedOption === option),\n              focus: shouldShowFocus && focusedOption === option,\n            }\"\n            (click)=\"selectOption(option, i)\"\n            (keydown)=\"onKeyDown($event)\"\n            [id]=\"'activedescendent-opt-' + i\"\n            [attr.aria-selected]=\"selectedOption === option\"\n            [attr.aria-label]=\"\n              selectedOption === option\n                ? option[displayOptionKey] + ' is selected'\n                : option[displayOptionKey]\n            \"\n          >\n            <ui-stack\n              stack_direction=\"x\"\n              stack_distribute=\"space-between\"\n              stack_align=\"center\"\n              stack_gap=\"tight\"\n            >\n              <!-- Option display -->\n              <div\n                [attr.value]=\"valueKey ? option[valueKey] : option.value\"\n                [attr.ngValue]=\"displayKey ? option[displayKey] : option.label\"\n              >\n                <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n                  @if (option.icon_name || (iconNameKey && option[iconNameKey])) {\n                    <ui-icon\n                      [icon_name]=\"iconNameKey ? option[iconNameKey] : option.icon_name\"\n                    ></ui-icon>\n                  }\n                  <!-- Display options label -->\n                  @if (type === 'options') {\n                    <span>{{ option[displayOptionKey] }}</span>\n                  }\n\n                  <!-- Display autocomplete option information and emphasis-->\n                  @if (type === 'autocomplete') {\n                    <ui-stack stack_gap=\"tiny\">\n                      <span\n                        ui-emphasis\n                        [searchText]=\"textValue\"\n                        [displayParagraph]=\"option[displayOptionKey]\"\n                      >\n                      </span>\n                      <p class=\"foreground-secondary-text\">\n                        {{ option[subtextOptionKey] }}\n                      </p>\n                    </ui-stack>\n                  }\n                </ui-stack>\n              </div>\n\n              <!-- Selected icon -->\n              @if (selectedOption === option) {\n                <ui-icon icon_name=\"tick\"></ui-icon>\n              }\n            </ui-stack>\n          </div>\n        }\n        <!-- Autocomplete Options Panel Footer -->\n        @if (footer && type === 'autocomplete') {\n          <div class=\"ui-combobox-footer\">\n            <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n              {{ footer }}\n            </ui-button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <ui-stack stack_gap=\"none\">\n    <div class=\"input-errors\">\n      <div class=\"input-errors-content\">\n        <ng-content select=\"ui-form-errors\"></ng-content>\n      </div>\n    </div>\n    @if (hint) {\n      <ui-box\n        class=\"hint-container\"\n        box_background=\"transparent\"\n        box_space=\"none\"\n        box_space_left=\"near\"\n        box_space_right=\"near\"\n        box_space_bottom=\"near\"\n      >\n        <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n          {{ hint }}\n        </div>\n      </ui-box>\n    }\n  </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-combobox input,.ui-combobox .select{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox].keyboard-focus:focus,.ui-combobox div[name=combobox].keyboard-focus:focus-visible,.ui-combobox div[name=combobox].keyboard-focus:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;border-radius:var(--oasys-radius-soften);width:100%;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition:opacity var(--_ad) cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften);border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-options.keyboard-open .ui-combobox-option:hover:not(.focus){background-color:transparent;border-radius:0}.ui-combobox-options.keyboard-open .ui-combobox-option.focus:hover{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}\n"], dependencies: [{ 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: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }, { kind: "directive", type: EmphasisDirective, selector: "[ui-emphasis]", inputs: ["searchText", "displayParagraph"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -3624,7 +3757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         IconComponent,
                         EmphasisDirective,
                         OasysButtonComponent,
-                    ], template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n  <div class=\"ui-combobox text-body--default text-body--regular\">\n    <!-- Compbobox Options Input -->\n    @if (type === 'options') {\n      <div\n        #combobox\n        name=\"combobox\"\n        tabindex=\"0\"\n        (keydown)=\"onKeyDown($event)\"\n        (mousedown)=\"togglePanel()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onModelChange(textValue)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'on'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"selectedOption\"\n              [placeholder]=\"placeholder || ''\"\n              readonly=\"readonly\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n          <!-- Select Icon Chevron Area -->\n          <div class=\"icon-container\" [ngClass]=\"{ expand: panelOpen() }\">\n            <ui-icon icon_name=\"chevron-down\"></ui-icon>\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Autocomplete Input -->\n    @if (type === 'autocomplete') {\n      <div\n        #combobox\n        name=\"combobox\"\n        tabindex=\"0\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onFocusInput()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'list'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"textValue\"\n              [placeholder]=\"placeholder || ''\"\n              role=\"combobox\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n\n          <!-- Combobox Icon Clear Area -->\n          <div class=\"icon-container\" [attr.aria-label]=\"'clean'\" (click)=\"cleanInput()\">\n            @if (textValue) {\n              <ui-icon icon_name=\"close\"></ui-icon>\n            }\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Options Panel -->\n    @if (panelOpen()) {\n      <div\n        class=\"ui-combobox-options\"\n        [ngClass]=\"{ expand: panelOpen() }\"\n        role=\"listbox\"\n        id=\"activedescendent-list\"\n      >\n        <!-- Autocomplete Options Panel Header  -->\n        @if (header && type === 'autocomplete') {\n          <div class=\"ui-combobox-header text-body--supporting\">\n            <span>{{ header }}</span>\n          </div>\n        }\n\n        <!-- Options list -->\n        @for (option of displayOptions; track option; let i = $index) {\n          <div\n            #option\n            class=\"ui-combobox-option\"\n            [ngClass]=\"{\n              selected: selectedOption === option,\n              focus: focusedOption === option,\n            }\"\n            (click)=\"selectOption(option, i)\"\n            (keydown)=\"onKeyDown($event)\"\n            [id]=\"'activedescendent-opt-' + i\"\n            [attr.aria-label]=\"\n              selectedOption === option\n                ? option[displayOptionKey] + ' is selected'\n                : option[displayOptionKey]\n            \"\n          >\n            <ui-stack\n              stack_direction=\"x\"\n              stack_distribute=\"space-between\"\n              stack_align=\"center\"\n              stack_gap=\"tight\"\n            >\n              <!-- Option display -->\n              <div\n                [attr.value]=\"valueKey ? option[valueKey] : option.value\"\n                [attr.ngValue]=\"displayKey ? option[displayKey] : option.label\"\n              >\n                <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n                  @if (option.icon_name || (iconNameKey && option[iconNameKey])) {\n                    <ui-icon\n                      [icon_name]=\"iconNameKey ? option[iconNameKey] : option.icon_name\"\n                    ></ui-icon>\n                  }\n                  <!-- Display options label -->\n                  @if (type === 'options') {\n                    <span>{{ option[displayOptionKey] }}</span>\n                  }\n\n                  <!-- Display autocomplete option information and emphasis-->\n                  @if (type === 'autocomplete') {\n                    <ui-stack stack_gap=\"tiny\">\n                      <span\n                        ui-emphasis\n                        [searchText]=\"textValue\"\n                        [displayParagraph]=\"option[displayOptionKey]\"\n                      >\n                      </span>\n                      <p class=\"foreground-secondary-text\">\n                        {{ option[subtextOptionKey] }}\n                      </p>\n                    </ui-stack>\n                  }\n                </ui-stack>\n              </div>\n\n              <!-- Selected icon -->\n              @if (selectedOption === option) {\n                <ui-icon icon_name=\"tick\"></ui-icon>\n              }\n            </ui-stack>\n          </div>\n        }\n        <!-- Autocomplete Options Panel Footer -->\n        @if (footer && type === 'autocomplete') {\n          <div class=\"ui-combobox-footer\">\n            <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n              {{ footer }}\n            </ui-button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <ui-stack stack_gap=\"none\">\n    <div class=\"input-errors\">\n      <div class=\"input-errors-content\">\n        <ng-content select=\"ui-form-errors\"></ng-content>\n      </div>\n    </div>\n    @if (hint) {\n      <ui-box\n        class=\"hint-container\"\n        box_background=\"transparent\"\n        box_space=\"none\"\n        box_space_left=\"near\"\n        box_space_right=\"near\"\n        box_space_bottom=\"near\"\n      >\n        <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n          {{ hint }}\n        </div>\n      </ui-box>\n    }\n  </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-combobox input,.ui-combobox .select,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox]:focus,.ui-combobox div[name=combobox]:focus-visible,.ui-combobox div[name=combobox]:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));transition:opacity var(--_ad);will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox{border-radius:var(--oasys-radius-soften);width:100%}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}\n"] }]
+                    ], template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n  <div class=\"ui-combobox text-body--default text-body--regular\">\n    <!-- Compbobox Options Input -->\n    @if (type === 'options') {\n      <div\n        #combobox\n        name=\"combobox\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (keydown)=\"onKeyDown($event)\"\n        (mousedown)=\"togglePanel()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        [attr.disabled]=\"disabled || null\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        [class.keyboard-focus]=\"shouldShowFocus\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              (focus)=\"onScreenReaderFocus()\"\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onModelChange(textValue)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'on'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"selectedOption\"\n              [placeholder]=\"placeholder || ''\"\n              readonly=\"readonly\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n          <!-- Select Icon Chevron Area -->\n          <div class=\"icon-container\" [ngClass]=\"{ expand: panelOpen() }\">\n            <ui-icon icon_name=\"chevron-down\"></ui-icon>\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Autocomplete Input -->\n    @if (type === 'autocomplete') {\n      <div\n        #combobox\n        name=\"combobox\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onFocusInput()\"\n        role=\"combobox\"\n        id=\"activedescendent-edit\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-activedescendant]=\"panelOpen() ? 'activedescendent-opt-' + focusedId : null\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-controls]=\"'activedescendent-list'\"\n        aria-readonly=\"true\"\n        aria-owns=\"activedescendent-list\"\n        aria-autocomplete=\"list\"\n        [class.keyboard-focus]=\"shouldShowFocus\"\n      >\n        <ui-stack\n          stack_direction=\"x\"\n          stack_distribute=\"space-between\"\n          stack_align=\"center\"\n          stack_gap=\"tight\"\n        >\n          <ui-box box_space=\"none\" box_background=\"transparent\">\n            <!-- Select Label Area -->\n            <div class=\"label-container\" stack_direction=\"x\">\n              <label class=\"text-body--supporting text-body--regular\" [for]=\"id\">{{ label }}</label>\n            </div>\n            <input\n              #textinput\n              [id]=\"id\"\n              [name]=\"id\"\n              [ngModel]=\"textValue\"\n              (click)=\"onTextInputClick()\"\n              (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n              [ngClass]=\"inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n              [attr.autocorrect]=\"'on'\"\n              [attr.disabled]=\"disabled || null\"\n              [autofocus]=\"autofocus\"\n              [autocomplete]=\"'list'\"\n              [required]=\"!optional\"\n              [spellcheck]=\"'on'\"\n              [type]=\"'text'\"\n              [value]=\"textValue\"\n              [placeholder]=\"placeholder || ''\"\n              role=\"combobox\"\n              tabindex=\"-1\"\n              class=\"text-body--default text-body--regular\"\n            />\n          </ui-box>\n\n          <!-- Combobox Icon Clear Area -->\n          <div class=\"icon-container\" [attr.aria-label]=\"'clean'\" (click)=\"cleanInput()\">\n            @if (textValue) {\n              <ui-icon icon_name=\"close\"></ui-icon>\n            }\n          </div>\n        </ui-stack>\n      </div>\n    }\n    <!-- Combobox Options Panel -->\n    @if (panelOpen()) {\n      <div\n        class=\"ui-combobox-options\"\n        [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus }\"\n        role=\"listbox\"\n        id=\"activedescendent-list\"\n      >\n        <!-- Autocomplete Options Panel Header  -->\n        @if (header && type === 'autocomplete') {\n          <div class=\"ui-combobox-header text-body--supporting\">\n            <span>{{ header }}</span>\n          </div>\n        }\n\n        <!-- Options list -->\n        @for (option of displayOptions; track option; let i = $index) {\n          <div\n            #option\n            class=\"ui-combobox-option\"\n            [ngClass]=\"{\n              selected: selectedOption === option && (!shouldShowFocus || focusedOption === option),\n              focus: shouldShowFocus && focusedOption === option,\n            }\"\n            (click)=\"selectOption(option, i)\"\n            (keydown)=\"onKeyDown($event)\"\n            [id]=\"'activedescendent-opt-' + i\"\n            [attr.aria-selected]=\"selectedOption === option\"\n            [attr.aria-label]=\"\n              selectedOption === option\n                ? option[displayOptionKey] + ' is selected'\n                : option[displayOptionKey]\n            \"\n          >\n            <ui-stack\n              stack_direction=\"x\"\n              stack_distribute=\"space-between\"\n              stack_align=\"center\"\n              stack_gap=\"tight\"\n            >\n              <!-- Option display -->\n              <div\n                [attr.value]=\"valueKey ? option[valueKey] : option.value\"\n                [attr.ngValue]=\"displayKey ? option[displayKey] : option.label\"\n              >\n                <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n                  @if (option.icon_name || (iconNameKey && option[iconNameKey])) {\n                    <ui-icon\n                      [icon_name]=\"iconNameKey ? option[iconNameKey] : option.icon_name\"\n                    ></ui-icon>\n                  }\n                  <!-- Display options label -->\n                  @if (type === 'options') {\n                    <span>{{ option[displayOptionKey] }}</span>\n                  }\n\n                  <!-- Display autocomplete option information and emphasis-->\n                  @if (type === 'autocomplete') {\n                    <ui-stack stack_gap=\"tiny\">\n                      <span\n                        ui-emphasis\n                        [searchText]=\"textValue\"\n                        [displayParagraph]=\"option[displayOptionKey]\"\n                      >\n                      </span>\n                      <p class=\"foreground-secondary-text\">\n                        {{ option[subtextOptionKey] }}\n                      </p>\n                    </ui-stack>\n                  }\n                </ui-stack>\n              </div>\n\n              <!-- Selected icon -->\n              @if (selectedOption === option) {\n                <ui-icon icon_name=\"tick\"></ui-icon>\n              }\n            </ui-stack>\n          </div>\n        }\n        <!-- Autocomplete Options Panel Footer -->\n        @if (footer && type === 'autocomplete') {\n          <div class=\"ui-combobox-footer\">\n            <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n              {{ footer }}\n            </ui-button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <ui-stack stack_gap=\"none\">\n    <div class=\"input-errors\">\n      <div class=\"input-errors-content\">\n        <ng-content select=\"ui-form-errors\"></ng-content>\n      </div>\n    </div>\n    @if (hint) {\n      <ui-box\n        class=\"hint-container\"\n        box_background=\"transparent\"\n        box_space=\"none\"\n        box_space_left=\"near\"\n        box_space_right=\"near\"\n        box_space_bottom=\"near\"\n      >\n        <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n          {{ hint }}\n        </div>\n      </ui-box>\n    }\n  </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width: 767px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-combobox input,.ui-combobox .select{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox].keyboard-focus:focus,.ui-combobox div[name=combobox].keyboard-focus:focus-visible,.ui-combobox div[name=combobox].keyboard-focus:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;border-radius:var(--oasys-radius-soften);width:100%;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition:opacity var(--_ad) cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften);border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-options.keyboard-open .ui-combobox-option:hover:not(.focus){background-color:transparent;border-radius:0}.ui-combobox-options.keyboard-open .ui-combobox-option.focus:hover{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]