oasys-lib 2.26.0 → 2.27.0-rc.1

package/fesm2022/oasys-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, EventEmitter, ViewChild, Output, ContentChild, NgModule, HostBinding, signal, forwardRef, computed, input, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, ContentChildren } from '@angular/core';
+import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, EventEmitter, ViewChild, Output, ContentChild, NgModule, HostBinding, signal, forwardRef, computed, input, CUSTOM_ELEMENTS_SCHEMA, output, viewChild, viewChildren, ContentChildren } from '@angular/core';
 import { BehaviorSubject, Subject, Observable } from 'rxjs';
 import { takeUntil, take, map } from 'rxjs/operators';
 import * as i1 from '@angular/cdk/layout';
@@ -3204,84 +3204,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-class ComboboxComponent {
-    document;
-    label;
-    type = 'options';
-    options = [];
-    optional = true;
-    hint;
-    header;
-    footer;
-    autofocus = false;
-    disabled = false;
-    selected;
+class OasysComboboxComponent {
+    // Required inputs
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    // Optional inputs
+    type = input('options', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    optional = input(true, ...(ngDevMode ? [{ debugName: "optional" }] : []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    header = input(undefined, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    footer = input(undefined, ...(ngDevMode ? [{ debugName: "footer" }] : []));
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
     // Key value from options to be displayed as option label
-    displayKey;
+    displayKey = input(undefined, ...(ngDevMode ? [{ debugName: "displayKey" }] : []));
     // Key value from options to be used as icon in option label
-    iconNameKey;
+    iconNameKey = input(undefined, ...(ngDevMode ? [{ debugName: "iconNameKey" }] : []));
     // Key value from options be be value
-    valueKey;
+    valueKey = input(undefined, ...(ngDevMode ? [{ debugName: "valueKey" }] : []));
     // Available for Autocomplete
-    subtextKey;
-    placeholder;
+    subtextKey = input(undefined, ...(ngDevMode ? [{ debugName: "subtextKey" }] : []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     // Will open the list of options on init
-    showOptions = false;
-    didChange = new EventEmitter();
-    didSearch = new EventEmitter();
-    didEdit = new EventEmitter();
-    textValue = '';
-    inputDidChange = false; // only show valdiation after a change event (ie. blur)
-    displayOptions = [];
-    _selectedOption;
-    _focusedOption;
-    _focusedOptionId = 0;
+    showOptions = input(false, ...(ngDevMode ? [{ debugName: "showOptions" }] : []));
+    // Accessibility labels — pass translated strings here when consuming in a localised app.
+    // Visible (but hidden) text and aria-label of the autocomplete clear button.
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    // Suffix appended to a selected option's aria-label, e.g. "Option 1 is selected".
+    selectedLabel = input('is selected', ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
+    // Outputs
+    didChange = output();
+    didSearch = output();
+    didEdit = output();
+    // View queries
+    textInput = viewChild('textinput', ...(ngDevMode ? [{ debugName: "textInput", read: ElementRef }] : [{
+            read: ElementRef,
+        }]));
+    combobox = viewChild('combobox', ...(ngDevMode ? [{ debugName: "combobox", read: ElementRef }] : [{
+            read: ElementRef,
+        }]));
+    optionsList = viewChildren('option', ...(ngDevMode ? [{ debugName: "optionsList", read: ElementRef }] : [{
+            read: ElementRef,
+        }]));
+    // Internal mutable state as signals
+    textValue = signal('', ...(ngDevMode ? [{ debugName: "textValue" }] : []));
+    // only show validation after a change event (ie. blur)
+    inputDidChange = signal(false, ...(ngDevMode ? [{ debugName: "inputDidChange" }] : []));
+    displayOptions = signal([], ...(ngDevMode ? [{ debugName: "displayOptions" }] : []));
+    _selectedOption = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedOption" }] : []));
+    _focusedOption = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusedOption" }] : []));
+    _focusedOptionId = signal(0, ...(ngDevMode ? [{ debugName: "_focusedOptionId" }] : []));
     textInputClicked = false;
-    id;
+    id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
     /** Whether or not the overlay panel is open. */
     panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : []));
-    openedViaKeyboard = false;
-    /**
-     * Selected option
-     */
-    get selectedOption() {
-        return this._selectedOption;
-    }
-    /**
-     * Focused Option
-     */
-    get focusedOption() {
-        return this._focusedOption;
-    }
+    openedViaKeyboard = signal(false, ...(ngDevMode ? [{ debugName: "openedViaKeyboard" }] : []));
+    /** Selected option */
+    selectedOption = this._selectedOption.asReadonly();
+    /** Focused option */
+    focusedOption = this._focusedOption.asReadonly();
+    /** Id of the focused option */
+    focusedId = this._focusedOptionId.asReadonly();
+    shouldShowFocus = computed(() => this.openedViaKeyboard() && this.panelOpen(), ...(ngDevMode ? [{ debugName: "shouldShowFocus" }] : []));
+    valueOptionKey = computed(() => this.valueKey() ?? 'value', ...(ngDevMode ? [{ debugName: "valueOptionKey" }] : []));
+    displayOptionKey = computed(() => this.displayKey() ?? 'label', ...(ngDevMode ? [{ debugName: "displayOptionKey" }] : []));
+    subtextOptionKey = computed(() => this.subtextKey() ?? 'subtext', ...(ngDevMode ? [{ debugName: "subtextOptionKey" }] : []));
+    document = inject(DOCUMENT);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    onChange = (_) => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
     /**
-     * Return the id of the focused option
+     * Click outside combobox close the panel
      */
-    get focusedId() {
-        return this._focusedOptionId;
-    }
-    get shouldShowFocus() {
-        return this.openedViaKeyboard && this.panelOpen();
-    }
-    get valueOptionKey() {
-        return this.valueKey ?? 'value';
-    }
-    get displayOptionKey() {
-        return this.displayKey ?? 'label';
-    }
-    get subtextOptionKey() {
-        return this.subtextKey ?? 'subtext';
-    }
-    textInput;
-    combobox;
-    optionsList;
-    constructor(document) {
-        this.document = document;
-    }
-    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() && this.combobox?.nativeElement) {
-            const clickedInside = this.combobox.nativeElement.contains(targetElement);
+        const comboboxEl = this.combobox()?.nativeElement;
+        if (this.panelOpen() && comboboxEl) {
+            const clickedInside = comboboxEl.contains(targetElement);
             if (!clickedInside) {
                 this.closePanel();
                 this.textInputClicked = false;
@@ -3293,79 +3293,73 @@ class ComboboxComponent {
      * @param changes
      */
     ngOnChanges(changes) {
-        // 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') {
+        // Detects if the autocomplete options list is changed 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 addresses.
+        // If Options list is Changed as part of group option we let the options panel open to let user select a single option.
+        if (this.type() === 'autocomplete') {
             const optionchanges = changes['options'];
-            if (optionchanges.currentValue !== optionchanges.previousValue &&
-                this.options.length !== 0 &&
+            if (optionchanges &&
+                optionchanges.currentValue !== optionchanges.previousValue &&
+                this.options().length !== 0 &&
                 !optionchanges.firstChange) {
                 this.resetOptionsList();
                 this.openPanelWithoutSelectingOption();
             }
         }
     }
-    /**
-     * On Init
-     */
     ngOnInit() {
-        this.id = `${this.label}${Math.random()}`;
+        this.id.set(`${this.label()}${Math.random()}`);
         this.resetSelection();
         this.resetOptionsList();
-        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);
+        const selected = this.selected();
+        const valueKey = this.valueOptionKey();
+        if (selected && typeof selected === 'object' && valueKey in selected) {
+            const selectedValue = selected[valueKey];
+            const opts = this.options();
+            const selectedIndex = opts.findIndex((option) => {
+                if (option && typeof option === 'object' && valueKey in option) {
+                    return option[valueKey] === selectedValue;
                 }
                 return false;
             });
             if (selectedIndex >= 0) {
-                this.selectOption(this.options[selectedIndex], selectedIndex);
+                this.selectOption(opts[selectedIndex], selectedIndex);
                 this.closePanel();
             }
         }
-        if (this.showOptions) {
+        if (this.showOptions()) {
             this.openPanelWithoutSelectingOption();
         }
     }
-    /**
-     * After View Init
-     */
     ngAfterViewInit() {
         this.setupValidationListener();
     }
     /**
      * Select Option
-     * @param option
      */
     selectOption(option, index) {
-        this._selectedOption = option;
-        this._focusedOptionId = index ?? 0;
-        this._focusedOption = option;
-        if (option && typeof option === 'object' && this.displayOptionKey in option) {
-            this.textValue = option[this.displayOptionKey];
-        }
-        this.onChange(this.textValue);
-        this.didChange.emit(this.selectedOption);
+        this._selectedOption.set(option);
+        this._focusedOptionId.set(index ?? 0);
+        this._focusedOption.set(option);
+        const displayKey = this.displayOptionKey();
+        if (option && typeof option === 'object' && displayKey in option) {
+            this.textValue.set(option[displayKey]);
+        }
+        this.onChange(this.textValue());
+        this.didChange.emit(this.selectedOption());
         this.onTouched();
     }
     /**
      * 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
+        const isOptionsType = this.type() === 'options';
+        const isAutocompleteType = this.type() === 'autocomplete';
+        const isFromInput = event.target === this.textInput()?.nativeElement;
+        const comboboxEl = this.combobox()?.nativeElement;
+        const isFromCombobox = event.target === comboboxEl || (comboboxEl?.contains(event.target) ?? false);
         if (isOptionsType && !isFromCombobox) {
             return;
         }
@@ -3373,7 +3367,7 @@ class ComboboxComponent {
             return;
         }
         const isPanelOpen = this.panelOpen();
-        const hasOptions = this.displayOptions.length > 0;
+        const hasOptions = this.displayOptions().length > 0;
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
@@ -3382,7 +3376,7 @@ class ComboboxComponent {
                     this.openPanelAndSelectOption();
                 }
                 else if (isPanelOpen && hasOptions) {
-                    this.openedViaKeyboard = true;
+                    this.openedViaKeyboard.set(true);
                     this.navigateOptions('down');
                 }
                 break;
@@ -3393,7 +3387,7 @@ class ComboboxComponent {
                     this.openPanelAndSelectOption();
                 }
                 else if (isPanelOpen && hasOptions) {
-                    this.openedViaKeyboard = true;
+                    this.openedViaKeyboard.set(true);
                     this.navigateOptions('up');
                 }
                 break;
@@ -3401,10 +3395,10 @@ class ComboboxComponent {
             case ' ':
                 event.preventDefault();
                 event.stopPropagation();
-                if (!isPanelOpen && hasOptions && this.type === 'options') {
+                if (!isPanelOpen && hasOptions && isOptionsType) {
                     this.openPanelAndSelectOption();
                 }
-                else if (!isPanelOpen && hasOptions && this.type === 'autocomplete') {
+                else if (!isPanelOpen && hasOptions && isAutocompleteType) {
                     this.openPanelWithoutSelectingOption();
                 }
                 else if (isPanelOpen) {
@@ -3419,7 +3413,7 @@ class ComboboxComponent {
                     this.closePanel();
                 }
                 else {
-                    this.textValue = '';
+                    this.textValue.set('');
                     this.resetSelection();
                 }
                 break;
@@ -3435,8 +3429,8 @@ class ComboboxComponent {
      * Toggle Options Panel
      */
     togglePanel() {
-        this.openedViaKeyboard = false;
-        this.panelOpen.set(!this.panelOpen());
+        this.openedViaKeyboard.set(false);
+        this.panelOpen.update((open) => !open);
         if (this.panelOpen()) {
             this.initSelectedFocus();
             setTimeout(() => {
@@ -3451,20 +3445,18 @@ class ComboboxComponent {
         event?.preventDefault();
         if (!this.panelOpen()) {
             this.panelOpen.set(true);
-            this._focusedOptionId = -1;
+            this._focusedOptionId.set(-1);
             setTimeout(() => {
                 this.scrollFocusedOptionIntoView();
             }, 0);
         }
     }
     openPanelAndSelectOption() {
-        if (!this.panelOpen() && this.displayOptions.length > 0) {
-            this.openedViaKeyboard = true;
+        if (!this.panelOpen() && this.displayOptions().length > 0) {
+            this.openedViaKeyboard.set(true);
             this.panelOpen.set(true);
             this.initSelectedFocus();
-            if (this.combobox?.nativeElement) {
-                this.combobox.nativeElement.focus();
-            }
+            this.combobox()?.nativeElement.focus();
             setTimeout(() => {
                 this.scrollFocusedOptionIntoView();
             }, 0);
@@ -3475,91 +3467,80 @@ class ComboboxComponent {
      */
     closePanel() {
         this.panelOpen.set(false);
-        this.openedViaKeyboard = false;
+        this.openedViaKeyboard.set(false);
         this.initSelectedFocus();
     }
     /**
      * Get Input display value
-     * @param textValue
      */
     writeValue(textValue) {
-        if ((this.selected && typeof textValue !== 'string') || textValue === '') {
-            if (this._selectedOption &&
-                typeof this._selectedOption === 'object' &&
-                this.displayOptionKey in this._selectedOption) {
-                this.textValue = this._selectedOption[this.displayOptionKey];
+        const selectedOpt = this._selectedOption();
+        const displayKey = this.displayOptionKey();
+        if ((this.selected() && typeof textValue !== 'string') || textValue === '') {
+            if (selectedOpt && typeof selectedOpt === 'object' && displayKey in selectedOpt) {
+                this.textValue.set(selectedOpt[displayKey]);
             }
         }
         else {
-            this.textValue = textValue;
+            this.textValue.set(textValue);
         }
     }
-    /**
-     * Register Form input chnage
-     * @param fn
-     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
-    /**
-     * Register form input touch
-     * @param fn
-     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
     /**
-     * On Model Change
-     * @param textValue
+     * On Model Change (options type)
      */
     onModelChange(textValue) {
-        this.textValue = textValue;
-        this.inputDidChange = true;
+        this.textValue.set(textValue);
+        this.inputDidChange.set(true);
         this.onChange(textValue);
         this.onTouched();
-        this.didChange.emit(this.selectedOption);
+        this.didChange.emit(this.selectedOption());
     }
     /**
-     * On Model Change
-     * @param textValue
+     * On Model Change (autocomplete type)
      */
     onModelChangeAutocomplete(textValue) {
-        this.textValue = textValue;
-        this.inputDidChange = true;
+        this.textValue.set(textValue);
+        this.inputDidChange.set(true);
         this.onChange(textValue);
         this.onTouched();
-        this.didChange.emit(this.selectedOption);
+        this.didChange.emit(this.selectedOption());
         this.onAutocompleteListSearch(textValue);
     }
     /**
      * Event handling for Input value
      */
     handleEvent() {
-        this.inputDidChange = true;
-        const inputElement = this.document.getElementById(this.id.toString());
+        this.inputDidChange.set(true);
+        const inputElement = this.document.getElementById(this.id());
         inputElement?.removeEventListener('change', this);
     }
     /**
      * Clean Input
      */
     cleanInput() {
-        this.textValue = '';
+        this.textValue.set('');
         this.resetSelection();
         this.resetOptionsList();
         this.closePanel();
-        this.didSearch.emit(this.textValue);
+        this.didSearch.emit(this.textValue());
     }
     /**
      * On footer action
      */
     onFooterAction() {
-        this.didEdit.emit();
+        this.didEdit.emit(undefined);
     }
     /**
      * On Focus Input
      */
     onFocusInput() {
-        this.textInput?.nativeElement.focus();
+        this.textInput()?.nativeElement.focus();
     }
     onTextInputClick() {
         if (this.textInputClicked) {
@@ -3571,7 +3552,7 @@ class ComboboxComponent {
     }
     onScreenReaderFocus() {
         const isPanelOpen = this.panelOpen();
-        const hasOptions = this.displayOptions.length > 0;
+        const hasOptions = this.displayOptions().length > 0;
         if (!isPanelOpen && hasOptions) {
             this.openPanelAndSelectOption();
         }
@@ -3582,7 +3563,6 @@ class ComboboxComponent {
     }
     /**
      * Search in Autocomplete
-     * @param textValue
      */
     onAutocompleteListSearch(textValue) {
         if (!textValue) {
@@ -3591,73 +3571,76 @@ class ComboboxComponent {
         }
         else {
             this.openPanelWithoutSelectingOption();
-            this.displayOptions = this.options.filter((option) => {
-                return (this.checkIncludesSubstring(option, this.displayOptionKey) ??
-                    this.checkIncludesSubstring(option, this.subtextOptionKey));
+            const filtered = this.options().filter((option) => {
+                return (this.checkIncludesSubstring(option, this.displayOptionKey()) ??
+                    this.checkIncludesSubstring(option, this.subtextOptionKey()));
             });
-            if (this.displayOptions.length === 0) {
+            this.displayOptions.set(filtered);
+            if (filtered.length === 0) {
                 this.closePanel();
             }
         }
-        this.textInput?.nativeElement.focus();
-        this.didSearch.emit(this.textValue);
+        this.textInput()?.nativeElement.focus();
+        this.didSearch.emit(this.textValue());
     }
     /**
-     * Check a susbtring is included in option value
-     * @param option
-     * @returns
+     * Check a substring is included in option value
      */
     checkIncludesSubstring(option, key) {
         return option[key]
             ?.toString()
             .toLowerCase()
-            .includes(this.textValue.toLowerCase());
+            .includes(this.textValue().toLowerCase());
     }
     /**
      * Set Input Validators
      */
     setupValidationListener() {
-        const inputElement = this.document.getElementById(this.id.toString());
+        const inputElement = this.document.getElementById(this.id());
         inputElement?.addEventListener('change', this);
     }
     /**
      * Init focus mode or set the selected option as focused
      */
     initSelectedFocus() {
-        if (this.panelOpen() && this.displayOptions.length > 0) {
-            if (this._selectedOption) {
-                const selectedIndex = this.displayOptions.findIndex((option) => option === this._selectedOption);
+        const opts = this.displayOptions();
+        if (this.panelOpen() && opts.length > 0) {
+            const selectedOpt = this._selectedOption();
+            if (selectedOpt) {
+                const selectedIndex = opts.findIndex((option) => option === selectedOpt);
                 if (selectedIndex >= 0) {
-                    this._focusedOptionId = selectedIndex;
-                    this._focusedOption = this._selectedOption;
+                    this._focusedOptionId.set(selectedIndex);
+                    this._focusedOption.set(selectedOpt);
                     return;
                 }
             }
-            this._focusedOptionId = 0;
-            this._focusedOption = this.displayOptions[0];
+            this._focusedOptionId.set(0);
+            this._focusedOption.set(opts[0]);
             this.autocompleteOptionTextPreview();
         }
     }
     navigateOptions(direction) {
-        if (this.displayOptions.length === 0) {
+        const opts = this.displayOptions();
+        if (opts.length === 0) {
             return;
         }
         if (direction === 'down') {
-            this._focusedOptionId = Math.min(this._focusedOptionId + 1, this.displayOptions.length - 1);
+            this._focusedOptionId.update((id) => Math.min(id + 1, opts.length - 1));
         }
         else {
-            this._focusedOptionId = Math.max(this._focusedOptionId - 1, 0);
+            this._focusedOptionId.update((id) => Math.max(id - 1, 0));
         }
-        this._focusedOption = this.displayOptions[this._focusedOptionId];
+        this._focusedOption.set(opts[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;
+        const list = this.optionsList();
+        const id = this._focusedOptionId();
+        const opts = this.displayOptions();
+        if (list.length > 0 && id >= 0 && id < opts.length) {
+            const focusedElement = list[id]?.nativeElement;
             if (focusedElement) {
                 focusedElement.scrollIntoView({
                     behavior: 'smooth',
@@ -3670,56 +3653,57 @@ class ComboboxComponent {
      * Change textValue to preview the option in autocomplete
      */
     autocompleteOptionTextPreview() {
-        if (this.type === 'autocomplete' &&
-            this._focusedOption &&
-            typeof this._focusedOption === 'object' &&
-            this.displayOptionKey in this._focusedOption) {
-            this.textValue = this._focusedOption[this.displayOptionKey];
+        const focused = this._focusedOption();
+        const displayKey = this.displayOptionKey();
+        if (this.type() === 'autocomplete' &&
+            focused &&
+            typeof focused === 'object' &&
+            displayKey in focused) {
+            this.textValue.set(focused[displayKey]);
         }
     }
     /**
      * Press Enter inside Options Panel
      */
     pressEnter() {
-        if (this.panelOpen() &&
-            this.displayOptions.length > 0 &&
-            this._focusedOptionId >= 0 &&
-            this._focusedOptionId < this.displayOptions.length) {
-            this.selectOption(this.displayOptions[this._focusedOptionId], this._focusedOptionId);
+        const opts = this.displayOptions();
+        const id = this._focusedOptionId();
+        if (this.panelOpen() && opts.length > 0 && id >= 0 && id < opts.length) {
+            this.selectOption(opts[id], id);
         }
     }
     /**
      * Reset selected option
      */
     resetSelection() {
-        this._selectedOption = undefined;
-        this._focusedOption = undefined;
-        this._focusedOptionId = 0;
+        this._selectedOption.set(undefined);
+        this._focusedOption.set(undefined);
+        this._focusedOptionId.set(0);
     }
     /**
      * Reset to original or unfiltered option list
      */
     resetOptionsList() {
-        this.displayOptions = this.options;
+        this.displayOptions.set(this.options());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComboboxComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ComboboxComponent, isStandalone: true, selector: "ui-combobox", inputs: { label: "label", type: "type", options: "options", optional: "optional", hint: "hint", header: "header", footer: "footer", autofocus: "autofocus", disabled: "disabled", selected: "selected", displayKey: "displayKey", iconNameKey: "iconNameKey", valueKey: "valueKey", subtextKey: "subtextKey", placeholder: "placeholder", showOptions: "showOptions" }, outputs: { didChange: "didChange", didSearch: "didSearch", didEdit: "didEdit" }, host: { listeners: { "document:click": "onClick($event.target)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OasysComboboxComponent, isStandalone: true, selector: "ui-combobox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, displayKey: { classPropertyName: "displayKey", publicName: "displayKey", isSignal: true, isRequired: false, transformFunction: null }, iconNameKey: { classPropertyName: "iconNameKey", publicName: "iconNameKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, subtextKey: { classPropertyName: "subtextKey", publicName: "subtextKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { didChange: "didChange", didSearch: "didSearch", didEdit: "didEdit" }, host: { listeners: { "document:click": "onClick($event.target)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ComboboxComponent),
+                useExisting: forwardRef(() => OasysComboboxComponent),
                 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]=\"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-font-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-font-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{--_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%;background-color:var(--oasys-color-white)}.ui-combobox{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}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.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:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.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"] }] });
+        ], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textinput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsList", predicate: ["option"], descendants: true, read: ElementRef, isSignal: 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()\">{{\n                label()\n              }}</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()\">{{\n                label()\n              }}</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\">\n            @if (textValue()) {\n              <ui-button\n                button_type=\"tertiary\"\n                button_size=\"small\"\n                button_icon=\"close\"\n                button_icon_placement=\"iconOnly\"\n                [aria_label]=\"clearLabel()\"\n                (clicked)=\"cleanInput()\"\n                (keydown.enter)=\"$event.stopPropagation()\"\n                (keydown.space)=\"$event.stopPropagation()\"\n              >\n                {{ clearLabel() }}\n              </ui-button>\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:\n                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()] + ' ' + selectedLabel()\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-font-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-font-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{--_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%;background-color:var(--oasys-color-white)}.ui-combobox{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;max-height:60vh;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow-y: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}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.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:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComboboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-combobox', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ComboboxComponent),
+                            useExisting: forwardRef(() => OasysComboboxComponent),
                             multi: true,
                         },
-                    ], standalone: true, imports: [
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         LayoutStackComponent,
                         LayoutBoxComponent,
                         ReactiveFormsModule,
@@ -3729,154 +3713,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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]=\"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-font-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-font-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{--_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%;background-color:var(--oasys-color-white)}.ui-combobox{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}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.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:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.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]
-                }] }], propDecorators: { label: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], optional: [{
-                type: Input
-            }], hint: [{
-                type: Input,
-                args: [{ required: false }]
-            }], header: [{
-                type: Input,
-                args: [{ required: false }]
-            }], footer: [{
-                type: Input,
-                args: [{ required: false }]
-            }], autofocus: [{
-                type: Input,
-                args: [{ required: false }]
-            }], disabled: [{
-                type: Input,
-                args: [{ required: false }]
-            }], selected: [{
-                type: Input,
-                args: [{ required: false }]
-            }], displayKey: [{
-                type: Input,
-                args: [{ required: false }]
-            }], iconNameKey: [{
-                type: Input,
-                args: [{ required: false }]
-            }], valueKey: [{
-                type: Input,
-                args: [{ required: false }]
-            }], subtextKey: [{
-                type: Input,
-                args: [{ required: false }]
-            }], placeholder: [{
-                type: Input,
-                args: [{ required: false }]
-            }], showOptions: [{
-                type: Input,
-                args: [{ required: false }]
-            }], didChange: [{
-                type: Output
-            }], didSearch: [{
-                type: Output
-            }], didEdit: [{
-                type: Output
-            }], textInput: [{
-                type: ViewChild,
-                args: ['textinput', { read: ElementRef }]
-            }], combobox: [{
-                type: ViewChild,
-                args: ['combobox', { read: ElementRef }]
-            }], optionsList: [{
-                type: ViewChildren,
-                args: ['option']
-            }], onClick: [{
+                    ], 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()\">{{\n                label()\n              }}</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()\">{{\n                label()\n              }}</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\">\n            @if (textValue()) {\n              <ui-button\n                button_type=\"tertiary\"\n                button_size=\"small\"\n                button_icon=\"close\"\n                button_icon_placement=\"iconOnly\"\n                [aria_label]=\"clearLabel()\"\n                (clicked)=\"cleanInput()\"\n                (keydown.enter)=\"$event.stopPropagation()\"\n                (keydown.space)=\"$event.stopPropagation()\"\n              >\n                {{ clearLabel() }}\n              </ui-button>\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:\n                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()] + ' ' + selectedLabel()\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-font-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-font-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{--_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%;background-color:var(--oasys-color-white)}.ui-combobox{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;max-height:60vh;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow-y: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}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.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:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.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"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], displayKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayKey", required: false }] }], iconNameKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconNameKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], subtextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtextKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOptions", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], selectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabel", required: false }] }], didChange: [{ type: i0.Output, args: ["didChange"] }], didSearch: [{ type: i0.Output, args: ["didSearch"] }], didEdit: [{ type: i0.Output, args: ["didEdit"] }], textInput: [{ type: i0.ViewChild, args: ['textinput', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], combobox: [{ type: i0.ViewChild, args: ['combobox', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], optionsList: [{ type: i0.ViewChildren, args: ['option', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
             }] } });
 
-/** @deprecated Import the standalone ComboboxComponent directly instead. */
-/**
- * @ngModule OasysComboboxModule
- * @description
- *
- * A combo box is a text box with a list box attached.
- * This type of control enables users to select a predefined value in a list or type their own value in the text box portion of the control.
- *
- * @usageNotes
- *
- * @example of a Combobox Options type
- * <ui-combobox
- *    formControlName="select"
- *    label="Label"
- *    [options]="[
- *       {value:'option 1', label: '1 week'},
- *       {value:'option 2', label: '2 weeks' },
- *       {value:'option 3', label: '3 weeks'},
- *       {value:'option 4', label: '4 weeks'} ]"
- *    hint="Hint!! Please select frequency"
- *    [selected]="{value:'option 3', label: '3 weeks' }"
- * ></ui-combobox>
- *
- * Pug:
- * ui-combobox(
- *    formControlName="select"
- *    label="Label"
- *    [options]="[
- *       {value:'option 1', label: '1 week'},
- *       {value:'option 2', label: '2 weeks' },
- *       {value:'option 3', label: '3 weeks'},
- *       {value:'option 4', label: '4 weeks'} ]"
- *    hint="Hint!! Please select frequency"
- *    [selected]="{value:'option 3', label: '3 weeks' }")
- *
- *
- * @example of a Combobox Autocomplete type
- * <ui-combobox
- *    formControlName="select"
- *    type="autocomplete"
- *    footer="Add manual an option"
- *    label="Label"
- *    [options]="[
- *       {value:'option 1', label: '1 week'},
- *       {value:'option 2', label: '2 weeks' },
- *       {value:'option 3', label: '3 weeks'},
- *       {value:'option 4', label: '4 weeks'} ]"
- *    hint="Hint!! Please select frequency"
- *    [selected]="{value:'option 3', label: '3 weeks' }"
- * ></ui-combobox>
- *
- * Pug:
- * ui-combobox(
- *    formControlName="select"
- *    type="autocomplete"
- *    footer="Add manual an option"
- *    label="Label"
- *    [options]="[
- *       {value:'option 1', label: '1 week'},
- *       {value:'option 2', label: '2 weeks' },
- *       {value:'option 3', label: '3 weeks'},
- *       {value:'option 4', label: '4 weeks'} ]"
- *    hint="Hint!! Please select frequency"
- *    [selected]="{value:'option 3', label: '3 weeks' }")
- *
- * @OasysLib
- */
-class OasysComboboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: OasysComboboxModule, imports: [ComboboxComponent], exports: [ComboboxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysComboboxModule, imports: [ComboboxComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysComboboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ComboboxComponent],
-                    exports: [ComboboxComponent],
-                }]
-        }] });
-
 class OasysTabComponent {
     tab_label = undefined;
     tab_active = false;
@@ -4182,5 +4030,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, ComboboxComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IMAGE_BREAKPOINTS, IMAGE_URL_PROVIDER, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, ComboboxComponent as OasysComboboxComponent, OasysComboboxModule, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent };
+export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IMAGE_BREAKPOINTS, IMAGE_URL_PROVIDER, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, OasysComboboxComponent, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent };
 //# sourceMappingURL=oasys-lib.mjs.map