oasys-lib 1.60.19 → 1.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/form/combobox/combobox.component.mjs +2 -2
- package/esm2022/lib/components/form/text-input/text-input.component.mjs +2 -2
- package/fesm2022/oasys-lib.mjs +4 -4
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/bloomandwild/variables.css +2 -1
- package/src/assets/bloomon/variables.css +2 -1
- package/src/assets/global/forms.scss +1 -1
- package/src/assets/global/scss-breakpoints.scss +1 -1
|
@@ -364,7 +364,7 @@ export class ComboboxComponent {
|
|
|
364
364
|
useExisting: forwardRef(() => ComboboxComponent),
|
|
365
365
|
multi: true,
|
|
366
366
|
},
|
|
367
|
-
], 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 <div\n *ngIf=\"type === 'options'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (mousedown)=\"togglePanel($event)\"\n (focus)=\"openPanel($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 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 <!-- <ui-icon *ngIf=\"panelOpen\" icon_name=\"chevron-up\"></ui-icon> -->\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Autocomplete Input -->\n <div\n *ngIf=\"type === 'autocomplete'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocusInput($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div\n class=\"icon-container\"\n [aria-label]=\"'clean'\"\n (click)=\"cleanInput()\"\n >\n <ui-icon *ngIf=\"textValue\" icon_name=\"close\"></ui-icon>\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Options Panel -->\n <div\n *ngIf=\"panelOpen\"\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen }\"\n [attr.aria-expanded]=\"panelOpen\"\n role=\"listbox\"\n id=\"activedescendent-list\"\n >\n <!-- Autocomplete Options Panel Header -->\n <div\n *ngIf=\"header && type === 'autocomplete'\"\n class=\"ui-combobox-header text-body--supporting\"\n >\n <span>{{ header }}</span>\n </div>\n\n <!-- Options list -->\n <div\n #option\n *ngFor=\"let option of displayOptions; index as i\"\n class=\"ui-combobox-option\"\n [ngClass]=\"{\n selected: selectedOption === option,\n focus: focusedOption === option\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"'activedescendent-opt-' + i\"\n [attr.aria-label]=\"\n selectedOption === option\n ? option[displayOptionKey] + ' is selected'\n : option[displayOptionKey]\n \"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <!-- Option display -->\n <div\n [value]=\"valueKey ? option[valueKey] : option.value\"\n [ngValue]=\"displayKey ? option[displayKey] : option.label\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-icon\n *ngIf=\"option.icon_name || (iconNameKey && option[iconNameKey])\"\n [icon_name]=\"\n iconNameKey ? option[iconNameKey] : option.icon_name\n \"\n ></ui-icon>\n\n <!-- Display options label -->\n <span *ngIf=\"type === 'options'\">{{\n option[displayOptionKey]\n }}</span>\n\n <!-- Display autocomplete option information and emphasis-->\n <ui-stack stack_gap=\"tiny\" *ngIf=\"type === 'autocomplete'\">\n <span\n ui-emphasis\n [searchText]=\"textValue\"\n [displayParagraph]=\"option[displayOptionKey]\"\n >\n {{ displayParagraph }}\n </span>\n <p\n class=\"foreground-secondary-text\"\n *ngIf=\"type === 'autocomplete'\"\n >\n {{ option[subtextOptionKey] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n\n <!-- Selected icon -->\n <ui-icon *ngIf=\"selectedOption === option\" icon_name=\"tick\"></ui-icon>\n </ui-stack>\n </div>\n\n <!-- Autocomplete Options Panel Footer -->\n <div *ngIf=\"footer && type === 'autocomplete'\" class=\"ui-combobox-footer\">\n <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n {{ footer }}\n </ui-button>\n </div>\n </div>\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 <ui-box\n class=\"hint-container\"\n *ngIf=\"hint\"\n box_background=\"none\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n >\n {{ hint }}\n </div>\n </ui-box>\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{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),.text-heading--hero{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),.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,.text-heading--primary{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,.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,.text-heading--secondary{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{-webkit-text-decoration:var(--oasys-typography-body-line-through-body-text-decoration);text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-combobox input,.ui-combobox .select,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-system-foreground-negative)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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-system-foreground-negative)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox]:focus,.ui-combobox div[name=combobox]:focus-visible,.ui-combobox div[name=combobox]:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-system-foreground-negative)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));transition:opacity var(--_ad);will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-system-foreground-negative)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .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)) .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)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox{border-radius:var(--oasys-radius-soften);width:100%}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: i3.LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "icon_class"] }, { kind: "directive", type: i6.OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: i7.EmphasisDirective, selector: "[ui-emphasis]", inputs: ["searchText", "displayParagraph"] }] }); }
|
|
367
|
+
], 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 <div\n *ngIf=\"type === 'options'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (mousedown)=\"togglePanel($event)\"\n (focus)=\"openPanel($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 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 <!-- <ui-icon *ngIf=\"panelOpen\" icon_name=\"chevron-up\"></ui-icon> -->\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Autocomplete Input -->\n <div\n *ngIf=\"type === 'autocomplete'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocusInput($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div\n class=\"icon-container\"\n [aria-label]=\"'clean'\"\n (click)=\"cleanInput()\"\n >\n <ui-icon *ngIf=\"textValue\" icon_name=\"close\"></ui-icon>\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Options Panel -->\n <div\n *ngIf=\"panelOpen\"\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen }\"\n [attr.aria-expanded]=\"panelOpen\"\n role=\"listbox\"\n id=\"activedescendent-list\"\n >\n <!-- Autocomplete Options Panel Header -->\n <div\n *ngIf=\"header && type === 'autocomplete'\"\n class=\"ui-combobox-header text-body--supporting\"\n >\n <span>{{ header }}</span>\n </div>\n\n <!-- Options list -->\n <div\n #option\n *ngFor=\"let option of displayOptions; index as i\"\n class=\"ui-combobox-option\"\n [ngClass]=\"{\n selected: selectedOption === option,\n focus: focusedOption === option\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"'activedescendent-opt-' + i\"\n [attr.aria-label]=\"\n selectedOption === option\n ? option[displayOptionKey] + ' is selected'\n : option[displayOptionKey]\n \"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <!-- Option display -->\n <div\n [value]=\"valueKey ? option[valueKey] : option.value\"\n [ngValue]=\"displayKey ? option[displayKey] : option.label\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-icon\n *ngIf=\"option.icon_name || (iconNameKey && option[iconNameKey])\"\n [icon_name]=\"\n iconNameKey ? option[iconNameKey] : option.icon_name\n \"\n ></ui-icon>\n\n <!-- Display options label -->\n <span *ngIf=\"type === 'options'\">{{\n option[displayOptionKey]\n }}</span>\n\n <!-- Display autocomplete option information and emphasis-->\n <ui-stack stack_gap=\"tiny\" *ngIf=\"type === 'autocomplete'\">\n <span\n ui-emphasis\n [searchText]=\"textValue\"\n [displayParagraph]=\"option[displayOptionKey]\"\n >\n {{ displayParagraph }}\n </span>\n <p\n class=\"foreground-secondary-text\"\n *ngIf=\"type === 'autocomplete'\"\n >\n {{ option[subtextOptionKey] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n\n <!-- Selected icon -->\n <ui-icon *ngIf=\"selectedOption === option\" icon_name=\"tick\"></ui-icon>\n </ui-stack>\n </div>\n\n <!-- Autocomplete Options Panel Footer -->\n <div *ngIf=\"footer && type === 'autocomplete'\" class=\"ui-combobox-footer\">\n <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n {{ footer }}\n </ui-button>\n </div>\n </div>\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 <ui-box\n class=\"hint-container\"\n *ngIf=\"hint\"\n box_background=\"none\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n >\n {{ hint }}\n </div>\n </ui-box>\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{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),.text-heading--hero{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),.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,.text-heading--primary{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,.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,.text-heading--secondary{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{-webkit-text-decoration:var(--oasys-typography-body-line-through-body-text-decoration);text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-combobox input,.ui-combobox .select,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox]:focus,.ui-combobox div[name=combobox]:focus-visible,.ui-combobox div[name=combobox]:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .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) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));transition:opacity var(--_ad);will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus)) .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)) .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)) .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)) .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)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox{border-radius:var(--oasys-radius-soften);width:100%}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: i3.LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "icon_class"] }, { kind: "directive", type: i6.OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: i7.EmphasisDirective, selector: "[ui-emphasis]", inputs: ["searchText", "displayParagraph"] }] }); }
|
|
368
368
|
}
|
|
369
369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
370
370
|
type: Component,
|
|
@@ -374,7 +374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
374
374
|
useExisting: forwardRef(() => ComboboxComponent),
|
|
375
375
|
multi: true,
|
|
376
376
|
},
|
|
377
|
-
], 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 <div\n *ngIf=\"type === 'options'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (mousedown)=\"togglePanel($event)\"\n (focus)=\"openPanel($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 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 <!-- <ui-icon *ngIf=\"panelOpen\" icon_name=\"chevron-up\"></ui-icon> -->\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Autocomplete Input -->\n <div\n *ngIf=\"type === 'autocomplete'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocusInput($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div\n class=\"icon-container\"\n [aria-label]=\"'clean'\"\n (click)=\"cleanInput()\"\n >\n <ui-icon *ngIf=\"textValue\" icon_name=\"close\"></ui-icon>\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Options Panel -->\n <div\n *ngIf=\"panelOpen\"\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen }\"\n [attr.aria-expanded]=\"panelOpen\"\n role=\"listbox\"\n id=\"activedescendent-list\"\n >\n <!-- Autocomplete Options Panel Header -->\n <div\n *ngIf=\"header && type === 'autocomplete'\"\n class=\"ui-combobox-header text-body--supporting\"\n >\n <span>{{ header }}</span>\n </div>\n\n <!-- Options list -->\n <div\n #option\n *ngFor=\"let option of displayOptions; index as i\"\n class=\"ui-combobox-option\"\n [ngClass]=\"{\n selected: selectedOption === option,\n focus: focusedOption === option\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"'activedescendent-opt-' + i\"\n [attr.aria-label]=\"\n selectedOption === option\n ? option[displayOptionKey] + ' is selected'\n : option[displayOptionKey]\n \"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <!-- Option display -->\n <div\n [value]=\"valueKey ? option[valueKey] : option.value\"\n [ngValue]=\"displayKey ? option[displayKey] : option.label\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-icon\n *ngIf=\"option.icon_name || (iconNameKey && option[iconNameKey])\"\n [icon_name]=\"\n iconNameKey ? option[iconNameKey] : option.icon_name\n \"\n ></ui-icon>\n\n <!-- Display options label -->\n <span *ngIf=\"type === 'options'\">{{\n option[displayOptionKey]\n }}</span>\n\n <!-- Display autocomplete option information and emphasis-->\n <ui-stack stack_gap=\"tiny\" *ngIf=\"type === 'autocomplete'\">\n <span\n ui-emphasis\n [searchText]=\"textValue\"\n [displayParagraph]=\"option[displayOptionKey]\"\n >\n {{ displayParagraph }}\n </span>\n <p\n class=\"foreground-secondary-text\"\n *ngIf=\"type === 'autocomplete'\"\n >\n {{ option[subtextOptionKey] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n\n <!-- Selected icon -->\n <ui-icon *ngIf=\"selectedOption === option\" icon_name=\"tick\"></ui-icon>\n </ui-stack>\n </div>\n\n <!-- Autocomplete Options Panel Footer -->\n <div *ngIf=\"footer && type === 'autocomplete'\" class=\"ui-combobox-footer\">\n <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n {{ footer }}\n </ui-button>\n </div>\n </div>\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 <ui-box\n class=\"hint-container\"\n *ngIf=\"hint\"\n box_background=\"none\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n >\n {{ hint }}\n </div>\n </ui-box>\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{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),.text-heading--hero{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),.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,.text-heading--primary{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,.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,.text-heading--secondary{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{-webkit-text-decoration:var(--oasys-typography-body-line-through-body-text-decoration);text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-combobox input,.ui-combobox .select,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-system-foreground-negative)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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-system-foreground-negative)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox]:focus,.ui-combobox div[name=combobox]:focus-visible,.ui-combobox div[name=combobox]:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-system-foreground-negative)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));transition:opacity var(--_ad);will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-system-foreground-negative)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .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)) .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)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox{border-radius:var(--oasys-radius-soften);width:100%}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}\n"] }]
|
|
377
|
+
], 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 <div\n *ngIf=\"type === 'options'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (mousedown)=\"togglePanel($event)\"\n (focus)=\"openPanel($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 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 <!-- <ui-icon *ngIf=\"panelOpen\" icon_name=\"chevron-up\"></ui-icon> -->\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Autocomplete Input -->\n <div\n *ngIf=\"type === 'autocomplete'\"\n #combobox\n name=\"combobox\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocusInput($event)\"\n role=\"combobox\"\n id=\"activedescendent-edit\"\n [attr.aria-label]=\"label\"\n [attr.aria-activedescendant]=\"'activedescendent-opt-' + focusedId\"\n aria-readonly=\"true\"\n aria-owns=\"activedescendent-list\"\n aria-autocomplete=\"list\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label\n class=\"text-body--supporting text-body--regular\"\n role=\"combobox-label\"\n [for]=\"id\"\n >{{ label }}</label\n >\n </div>\n <input\n #textinput\n [id]=\"id\"\n [name]=\"id\"\n [ngModel]=\"textValue\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"\n inputDidChange ? 'ng-input-did-change' : 'ng-input-did-not-change'\n \"\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 class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div\n class=\"icon-container\"\n [aria-label]=\"'clean'\"\n (click)=\"cleanInput()\"\n >\n <ui-icon *ngIf=\"textValue\" icon_name=\"close\"></ui-icon>\n </div>\n </ui-stack>\n </div>\n\n <!-- Combobox Options Panel -->\n <div\n *ngIf=\"panelOpen\"\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen }\"\n [attr.aria-expanded]=\"panelOpen\"\n role=\"listbox\"\n id=\"activedescendent-list\"\n >\n <!-- Autocomplete Options Panel Header -->\n <div\n *ngIf=\"header && type === 'autocomplete'\"\n class=\"ui-combobox-header text-body--supporting\"\n >\n <span>{{ header }}</span>\n </div>\n\n <!-- Options list -->\n <div\n #option\n *ngFor=\"let option of displayOptions; index as i\"\n class=\"ui-combobox-option\"\n [ngClass]=\"{\n selected: selectedOption === option,\n focus: focusedOption === option\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"'activedescendent-opt-' + i\"\n [attr.aria-label]=\"\n selectedOption === option\n ? option[displayOptionKey] + ' is selected'\n : option[displayOptionKey]\n \"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <!-- Option display -->\n <div\n [value]=\"valueKey ? option[valueKey] : option.value\"\n [ngValue]=\"displayKey ? option[displayKey] : option.label\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-icon\n *ngIf=\"option.icon_name || (iconNameKey && option[iconNameKey])\"\n [icon_name]=\"\n iconNameKey ? option[iconNameKey] : option.icon_name\n \"\n ></ui-icon>\n\n <!-- Display options label -->\n <span *ngIf=\"type === 'options'\">{{\n option[displayOptionKey]\n }}</span>\n\n <!-- Display autocomplete option information and emphasis-->\n <ui-stack stack_gap=\"tiny\" *ngIf=\"type === 'autocomplete'\">\n <span\n ui-emphasis\n [searchText]=\"textValue\"\n [displayParagraph]=\"option[displayOptionKey]\"\n >\n {{ displayParagraph }}\n </span>\n <p\n class=\"foreground-secondary-text\"\n *ngIf=\"type === 'autocomplete'\"\n >\n {{ option[subtextOptionKey] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n\n <!-- Selected icon -->\n <ui-icon *ngIf=\"selectedOption === option\" icon_name=\"tick\"></ui-icon>\n </ui-stack>\n </div>\n\n <!-- Autocomplete Options Panel Footer -->\n <div *ngIf=\"footer && type === 'autocomplete'\" class=\"ui-combobox-footer\">\n <ui-button button_type=\"tertiary\" (click)=\"onFooterAction()\">\n {{ footer }}\n </ui-button>\n </div>\n </div>\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 <ui-box\n class=\"hint-container\"\n *ngIf=\"hint\"\n box_background=\"none\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n >\n {{ hint }}\n </div>\n </ui-box>\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{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),.text-heading--hero{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),.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,.text-heading--primary{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,.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,.text-heading--secondary{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{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,.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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,.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3{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{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-body-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{-webkit-text-decoration:var(--oasys-typography-body-line-through-body-text-decoration);text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-combobox input,.ui-combobox .select,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-small-bottom)}}.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-large-bottom)}@media only screen and (max-width: 767px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .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)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox div[name=combobox]:focus,.ui-combobox div[name=combobox]:focus-visible,.ui-combobox div[name=combobox]:focus-within,[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .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) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{background-color:var(--oasys-color-white);--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;overflow:auto;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));transition:opacity var(--_ad);will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus)) .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)) .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)) .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)) .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)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus)) .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)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox{border-radius:var(--oasys-radius-soften);width:100%}.ui-combobox input{border:none;width:100%;background-color:transparent;cursor:pointer}.ui-combobox input:focus{outline:none}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--oasys-spacing-tiny)}.ui-combobox .label-container{padding-top:var(--oasys-spacing-near);padding-left:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}\n"] }]
|
|
378
378
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
379
379
|
type: Inject,
|
|
380
380
|
args: [DOCUMENT]
|