oasys-lib 2.36.0-rc.0 → 2.36.2
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/fesm2022/oasys-lib.mjs +149 -133
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/index.d.ts +64 -51
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/assets/bloomandwild/variables.css +1 -1
- package/src/assets/bloomon/variables.css +1 -1
- package/src/assets/global/forms.scss +10 -2
- package/src/assets/global/scss-breakpoints.scss +1 -1
package/fesm2022/oasys-lib.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, input, output, viewChild, signal, computed, EventEmitter, ViewChild, ContentChild, Output, NgModule, HostBinding, model, forwardRef, CUSTOM_ELEMENTS_SCHEMA, viewChildren, ContentChildren, contentChildren, effect } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, input, output, viewChild, signal, computed, EventEmitter, ViewChild, ContentChild, Output, NgModule, HostBinding, model, forwardRef, afterRenderEffect, CUSTOM_ELEMENTS_SCHEMA, viewChildren, ContentChildren, contentChildren, effect } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, Subject, Observable } from 'rxjs';
|
|
4
4
|
import { takeUntil, take, map } from 'rxjs/operators';
|
|
5
5
|
import * as i1 from '@angular/cdk/layout';
|
|
@@ -1573,7 +1573,7 @@ class TextInputComponent {
|
|
|
1573
1573
|
useExisting: forwardRef(() => TextInputComponent),
|
|
1574
1574
|
multi: true,
|
|
1575
1575
|
},
|
|
1576
|
-
], viewQueries: [{ propertyName: "prefaceContent", first: true, predicate: ["prefaceContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<ui-stack class=\"ui-text-input-container\" stack_gap=\"tight\">\n <div class=\"ui-text-input\">\n <ui-stack stack_direction=\"x\">\n <div class=\"input-preface\" [attr.id]=\"'preface_' + id()\" #prefaceContent>\n <ng-content select=\"[preface]\"></ng-content>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [class.ng-input-did-change]=\"inputDidChange()\"\n [class.ng-input-did-not-change]=\"!inputDidChange()\"\n [attr.autocorrect]=\"safariAutocorrect()\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength() || null\"\n [maxlength]=\"maxlength()\"\n [pattern]=\"pattern() || null\"\n [required]=\"!optional()\"\n [spellcheck]=\"autocorrect()\"\n [type]=\"textInputType()\"\n [value]=\"textValue()\"\n (keyup.enter)=\"onEnter(textinput)\"\n [attr.inputmode]=\"getInputMode()\"\n [attr.aria-describedby]=\"getAriaDescribedBy()\"\n [attr.aria-label]=\"accessibleAriaLabel()\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-stack>\n <ui-stack\n class=\"label-container\"\n stack_direction=\"x\"\n [stack_distribute]=\"type() === 'password' ? 'space-between' : 'start'\"\n >\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{ label() }}</label>\n @if (type() === 'password') {\n <div class=\"ui-button-password-toggle\">\n <ui-button\n [button_type]=\"'tertiary'\"\n [button_size]=\"'small'\"\n (clicked)=\"toggleShowPassword()\"\n >\n @if (!showPassword()) {\n <span [attr.aria-label]=\"show_password_aria_label()\">\n {{ show_password_string() }}\n </span>\n } @else {\n <span [attr.aria-label]=\"hidePasswordLabel()\">\n {{ hide_password_string() }}\n </span>\n }\n </ui-button>\n </div>\n }\n </ui-stack>\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\" [attr.id]=\"'error_' + id()\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (shouldShowHint()) {\n <ui-box\n class=\"ui-text-input__hint-container\"\n [class.ui-text-input__hint-expanded]=\"shouldShowHint()\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n [attr.id]=\"'hint_' + id()\"\n >\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-text-input-container .ui-text-input input:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-text-input-container .ui-text-input input{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:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}:host{display:block;width:100%}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-text-input,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .hint-container{display:none!important}.ui-text-input-container .ui-text-input{--_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-text-input-container .ui-text-input,.ui-text-input-container .ui-text-input input{border-radius:var(--oasys-radius-soften);width:100%}.ui-text-input-container .ui-text-input input{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-text-input-container .ui-text-input .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input .label-container,.ui-text-input-container .ui-text-input .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-text-input-container .ui-text-input ui-button{pointer-events:all}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) input{padding-left:var(--_left-inset)}.ui-text-input-container .ui-text-input .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-text-input-container .ui-text-input .input-preface:empty{visibility:hidden}.ui-text-input-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-text-input-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-text-input-container .input-errors .hint-container{display:block!important}.ui-text-input-container .ui-text-input__hint-container{overflow:hidden;transition:all calc(var(--oasys-animation-duration-medium) * 1ms) ease-in-out;max-height:0;opacity:0;transform:translateY(-8px)}.ui-text-input-container .ui-text-input__hint-container.ui-text-input__hint-expanded{max-height:fit-content;opacity:1;transform:translateY(0)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-text-input,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors .input-errors-content{visibility:visible!important}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .hint-container{display:none!important}.ui-text-input-container:has(input:disabled) input{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-text-input-container:has(input:disabled) .ui-text-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-text-input-container .ui-button-password-toggle{padding:var(--oasys-spacing-tight) var(--oasys-spacing-tight) var(--oasys-spacing-tight) 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href", "routerLink"], outputs: ["clicked"] }] });
|
|
1576
|
+
], viewQueries: [{ propertyName: "prefaceContent", first: true, predicate: ["prefaceContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<ui-stack class=\"ui-text-input-container\" stack_gap=\"tight\">\n <div class=\"ui-text-input\">\n <ui-stack stack_direction=\"x\">\n <div class=\"input-preface\" [attr.id]=\"'preface_' + id()\" #prefaceContent>\n <ng-content select=\"[preface]\"></ng-content>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [class.ng-input-did-change]=\"inputDidChange()\"\n [class.ng-input-did-not-change]=\"!inputDidChange()\"\n [attr.autocorrect]=\"safariAutocorrect()\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength() || null\"\n [maxlength]=\"maxlength()\"\n [pattern]=\"pattern() || null\"\n [required]=\"!optional()\"\n [spellcheck]=\"autocorrect()\"\n [type]=\"textInputType()\"\n [value]=\"textValue()\"\n (keyup.enter)=\"onEnter(textinput)\"\n [attr.inputmode]=\"getInputMode()\"\n [attr.aria-describedby]=\"getAriaDescribedBy()\"\n [attr.aria-label]=\"accessibleAriaLabel()\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-stack>\n <ui-stack\n class=\"label-container\"\n stack_direction=\"x\"\n [stack_distribute]=\"type() === 'password' ? 'space-between' : 'start'\"\n >\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{ label() }}</label>\n @if (type() === 'password') {\n <div class=\"ui-button-password-toggle\">\n <ui-button\n [button_type]=\"'tertiary'\"\n [button_size]=\"'small'\"\n [aria_label]=\"showPassword() ? hidePasswordLabel() : show_password_aria_label()\"\n (clicked)=\"toggleShowPassword()\"\n >\n @if (!showPassword()) {\n {{ show_password_string() }}\n } @else {\n {{ hide_password_string() }}\n }\n </ui-button>\n </div>\n }\n </ui-stack>\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\" [attr.id]=\"'error_' + id()\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (shouldShowHint()) {\n <ui-box\n class=\"ui-text-input__hint-container\"\n [class.ui-text-input__hint-expanded]=\"shouldShowHint()\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n [attr.id]=\"'hint_' + id()\"\n >\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-text-input-container .ui-text-input input:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-text-input-container .ui-text-input input{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:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__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-textarea,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.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-textarea,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-textarea-container:has(textarea.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-textarea-container:has(textarea.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-text-input-container:has(input.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-textarea__hint-container{display:none!important}.ui-checkbox input,.ui-checkbox textarea,.ui-radio input,.ui-radio textarea,.ui-text-input input,.ui-text-input textarea,.ui-textarea input,.ui-textarea textarea,.ui-combobox input,.ui-combobox textarea{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}:host{display:block;width:100%}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-text-input,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-textarea,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .hint-container,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-textarea__hint-container{display:none!important}.ui-text-input-container .ui-text-input{--_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-text-input-container .ui-text-input,.ui-text-input-container .ui-text-input input{border-radius:var(--oasys-radius-soften);width:100%}.ui-text-input-container .ui-text-input input{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-text-input-container .ui-text-input .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input .label-container,.ui-text-input-container .ui-text-input .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-text-input-container .ui-text-input ui-button{pointer-events:all}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) input{padding-left:var(--_left-inset)}.ui-text-input-container .ui-text-input .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-text-input-container .ui-text-input .input-preface:empty{visibility:hidden}.ui-text-input-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-text-input-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-text-input-container .input-errors .hint-container{display:block!important}.ui-text-input-container .ui-text-input__hint-container{overflow:hidden;transition:all calc(var(--oasys-animation-duration-medium) * 1ms) ease-in-out;max-height:0;opacity:0;transform:translateY(-8px)}.ui-text-input-container .ui-text-input__hint-container.ui-text-input__hint-expanded{max-height:fit-content;opacity:1;transform:translateY(0)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-text-input,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-textarea,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors .input-errors-content{visibility:visible!important}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .hint-container,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-textarea__hint-container{display:none!important}.ui-text-input-container:has(input:disabled) input{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-text-input-container:has(input:disabled) .ui-text-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-text-input-container .ui-button-password-toggle{padding:var(--oasys-spacing-tight) var(--oasys-spacing-tight) var(--oasys-spacing-tight) 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href", "routerLink"], outputs: ["clicked"] }] });
|
|
1577
1577
|
}
|
|
1578
1578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1579
1579
|
type: Component,
|
|
@@ -1591,7 +1591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
1591
1591
|
OasysHrefDirective,
|
|
1592
1592
|
LayoutBoxComponent,
|
|
1593
1593
|
OasysButtonComponent,
|
|
1594
|
-
], template: "<ui-stack class=\"ui-text-input-container\" stack_gap=\"tight\">\n <div class=\"ui-text-input\">\n <ui-stack stack_direction=\"x\">\n <div class=\"input-preface\" [attr.id]=\"'preface_' + id()\" #prefaceContent>\n <ng-content select=\"[preface]\"></ng-content>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [class.ng-input-did-change]=\"inputDidChange()\"\n [class.ng-input-did-not-change]=\"!inputDidChange()\"\n [attr.autocorrect]=\"safariAutocorrect()\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength() || null\"\n [maxlength]=\"maxlength()\"\n [pattern]=\"pattern() || null\"\n [required]=\"!optional()\"\n [spellcheck]=\"autocorrect()\"\n [type]=\"textInputType()\"\n [value]=\"textValue()\"\n (keyup.enter)=\"onEnter(textinput)\"\n [attr.inputmode]=\"getInputMode()\"\n [attr.aria-describedby]=\"getAriaDescribedBy()\"\n [attr.aria-label]=\"accessibleAriaLabel()\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-stack>\n <ui-stack\n class=\"label-container\"\n stack_direction=\"x\"\n [stack_distribute]=\"type() === 'password' ? 'space-between' : 'start'\"\n >\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{ label() }}</label>\n @if (type() === 'password') {\n <div class=\"ui-button-password-toggle\">\n <ui-button\n [button_type]=\"'tertiary'\"\n [button_size]=\"'small'\"\n (clicked)=\"toggleShowPassword()\"\n >\n @if (!showPassword()) {\n <span [attr.aria-label]=\"show_password_aria_label()\">\n {{ show_password_string() }}\n </span>\n } @else {\n <span [attr.aria-label]=\"hidePasswordLabel()\">\n {{ hide_password_string() }}\n </span>\n }\n </ui-button>\n </div>\n }\n </ui-stack>\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\" [attr.id]=\"'error_' + id()\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (shouldShowHint()) {\n <ui-box\n class=\"ui-text-input__hint-container\"\n [class.ui-text-input__hint-expanded]=\"shouldShowHint()\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n [attr.id]=\"'hint_' + id()\"\n >\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-text-input-container .ui-text-input input:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-text-input-container .ui-text-input input{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:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}:host{display:block;width:100%}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-text-input,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .hint-container{display:none!important}.ui-text-input-container .ui-text-input{--_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-text-input-container .ui-text-input,.ui-text-input-container .ui-text-input input{border-radius:var(--oasys-radius-soften);width:100%}.ui-text-input-container .ui-text-input input{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-text-input-container .ui-text-input .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input .label-container,.ui-text-input-container .ui-text-input .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-text-input-container .ui-text-input ui-button{pointer-events:all}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) input{padding-left:var(--_left-inset)}.ui-text-input-container .ui-text-input .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-text-input-container .ui-text-input .input-preface:empty{visibility:hidden}.ui-text-input-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-text-input-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-text-input-container .input-errors .hint-container{display:block!important}.ui-text-input-container .ui-text-input__hint-container{overflow:hidden;transition:all calc(var(--oasys-animation-duration-medium) * 1ms) ease-in-out;max-height:0;opacity:0;transform:translateY(-8px)}.ui-text-input-container .ui-text-input__hint-container.ui-text-input__hint-expanded{max-height:fit-content;opacity:1;transform:translateY(0)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-text-input,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors .input-errors-content{visibility:visible!important}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .hint-container{display:none!important}.ui-text-input-container:has(input:disabled) input{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-text-input-container:has(input:disabled) .ui-text-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-text-input-container .ui-button-password-toggle{padding:var(--oasys-spacing-tight) var(--oasys-spacing-tight) var(--oasys-spacing-tight) 0}\n"] }]
|
|
1594
|
+
], template: "<ui-stack class=\"ui-text-input-container\" stack_gap=\"tight\">\n <div class=\"ui-text-input\">\n <ui-stack stack_direction=\"x\">\n <div class=\"input-preface\" [attr.id]=\"'preface_' + id()\" #prefaceContent>\n <ng-content select=\"[preface]\"></ng-content>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [class.ng-input-did-change]=\"inputDidChange()\"\n [class.ng-input-did-not-change]=\"!inputDidChange()\"\n [attr.autocorrect]=\"safariAutocorrect()\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n [minlength]=\"minlength() || null\"\n [maxlength]=\"maxlength()\"\n [pattern]=\"pattern() || null\"\n [required]=\"!optional()\"\n [spellcheck]=\"autocorrect()\"\n [type]=\"textInputType()\"\n [value]=\"textValue()\"\n (keyup.enter)=\"onEnter(textinput)\"\n [attr.inputmode]=\"getInputMode()\"\n [attr.aria-describedby]=\"getAriaDescribedBy()\"\n [attr.aria-label]=\"accessibleAriaLabel()\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-stack>\n <ui-stack\n class=\"label-container\"\n stack_direction=\"x\"\n [stack_distribute]=\"type() === 'password' ? 'space-between' : 'start'\"\n >\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{ label() }}</label>\n @if (type() === 'password') {\n <div class=\"ui-button-password-toggle\">\n <ui-button\n [button_type]=\"'tertiary'\"\n [button_size]=\"'small'\"\n [aria_label]=\"showPassword() ? hidePasswordLabel() : show_password_aria_label()\"\n (clicked)=\"toggleShowPassword()\"\n >\n @if (!showPassword()) {\n {{ show_password_string() }}\n } @else {\n {{ hide_password_string() }}\n }\n </ui-button>\n </div>\n }\n </ui-stack>\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\" [attr.id]=\"'error_' + id()\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (shouldShowHint()) {\n <ui-box\n class=\"ui-text-input__hint-container\"\n [class.ui-text-input__hint-expanded]=\"shouldShowHint()\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div\n class=\"ui-text-input-hint text-body--supporting text-color--supporting\"\n [attr.id]=\"'hint_' + id()\"\n >\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-text-input-container .ui-text-input input:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-text-input-container .ui-text-input input{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:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__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-textarea,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.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-textarea,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-textarea-container:has(textarea.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-textarea-container:has(textarea.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-text-input-container:has(input.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-textarea__hint-container{display:none!important}.ui-checkbox input,.ui-checkbox textarea,.ui-radio input,.ui-radio textarea,.ui-text-input input,.ui-text-input textarea,.ui-textarea input,.ui-textarea textarea,.ui-combobox input,.ui-combobox textarea{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}:host{display:block;width:100%}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-text-input,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-textarea,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .hint-container,:host.ng-dirty.ng-invalid:has(input.ng-input-did-change) .ui-text-input-container .ui-textarea__hint-container{display:none!important}.ui-text-input-container .ui-text-input{--_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-text-input-container .ui-text-input,.ui-text-input-container .ui-text-input input{border-radius:var(--oasys-radius-soften);width:100%}.ui-text-input-container .ui-text-input input{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-text-input-container .ui-text-input .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input .label-container,.ui-text-input-container .ui-text-input .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-text-input-container .ui-text-input ui-button{pointer-events:all}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-text-input-container .ui-text-input:has(.input-preface:not(:empty)) input{padding-left:var(--_left-inset)}.ui-text-input-container .ui-text-input .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-text-input-container .ui-text-input .input-preface:empty{visibility:hidden}.ui-text-input-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-text-input-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-text-input-container .input-errors .hint-container{display:block!important}.ui-text-input-container .ui-text-input__hint-container{overflow:hidden;transition:all calc(var(--oasys-animation-duration-medium) * 1ms) ease-in-out;max-height:0;opacity:0;transform:translateY(-8px)}.ui-text-input-container .ui-text-input__hint-container.ui-text-input__hint-expanded{max-height:fit-content;opacity:1;transform:translateY(0)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-text-input,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-textarea,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .input-errors .input-errors-content{visibility:visible!important}.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .hint-container,.ui-text-input-container:has(input.ng-invalid.ng-input-did-change) .ui-textarea__hint-container{display:none!important}.ui-text-input-container:has(input:disabled) input{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-text-input-container:has(input:disabled) .ui-text-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-text-input-container .ui-button-password-toggle{padding:var(--oasys-spacing-tight) var(--oasys-spacing-tight) var(--oasys-spacing-tight) 0}\n"] }]
|
|
1595
1595
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], autocorrect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocorrect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], aria_label: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria_label", required: false }] }], show_password_string: [{ type: i0.Input, args: [{ isSignal: true, alias: "show_password_string", required: false }] }], hide_password_string: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide_password_string", required: false }] }], show_password_aria_label: [{ type: i0.Input, args: [{ isSignal: true, alias: "show_password_aria_label", required: false }] }], hide_password_aria_label: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide_password_aria_label", required: false }] }], validation_messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation_messages", required: false }] }], didChange: [{ type: i0.Output, args: ["didChange"] }], prefaceContent: [{ type: i0.ViewChild, args: ['prefaceContent', { isSignal: true }] }] } });
|
|
1596
1596
|
|
|
1597
1597
|
/** @deprecated Import the standalone TextInputComponent directly instead. */
|
|
@@ -1608,6 +1608,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
1608
1608
|
}]
|
|
1609
1609
|
}] });
|
|
1610
1610
|
|
|
1611
|
+
class TextareaComponent {
|
|
1612
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1613
|
+
hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
|
|
1614
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1615
|
+
min_rows = input(3, ...(ngDevMode ? [{ debugName: "min_rows" }] : []));
|
|
1616
|
+
max_rows = input(8, ...(ngDevMode ? [{ debugName: "max_rows" }] : []));
|
|
1617
|
+
char_limit = input(null, ...(ngDevMode ? [{ debugName: "char_limit" }] : []));
|
|
1618
|
+
show_counter = input(false, ...(ngDevMode ? [{ debugName: "show_counter" }] : []));
|
|
1619
|
+
optional = input(true, ...(ngDevMode ? [{ debugName: "optional" }] : []));
|
|
1620
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1621
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1622
|
+
didChange = output();
|
|
1623
|
+
textareaEl = viewChild.required('textareaEl');
|
|
1624
|
+
textValue = signal('', ...(ngDevMode ? [{ debugName: "textValue" }] : []));
|
|
1625
|
+
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
|
|
1626
|
+
inputDidChange = signal(false, ...(ngDevMode ? [{ debugName: "inputDidChange" }] : []));
|
|
1627
|
+
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
1628
|
+
isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
1629
|
+
charCount = computed(() => (this.textValue() || '').length, ...(ngDevMode ? [{ debugName: "charCount" }] : []));
|
|
1630
|
+
isOverLimit = computed(() => {
|
|
1631
|
+
const limit = this.char_limit();
|
|
1632
|
+
return limit !== null && this.charCount() > limit;
|
|
1633
|
+
}, ...(ngDevMode ? [{ debugName: "isOverLimit" }] : []));
|
|
1634
|
+
counterId = computed(() => `textarea-count-${this.id()}`, ...(ngDevMode ? [{ debugName: "counterId" }] : []));
|
|
1635
|
+
constructor() {
|
|
1636
|
+
afterRenderEffect(() => {
|
|
1637
|
+
// Reading these signals makes the effect re-run when they change
|
|
1638
|
+
this.textValue();
|
|
1639
|
+
this.min_rows();
|
|
1640
|
+
this.max_rows();
|
|
1641
|
+
this.autosize(this.textareaEl().nativeElement);
|
|
1642
|
+
});
|
|
1643
|
+
}
|
|
1644
|
+
ngOnInit() {
|
|
1645
|
+
this.id.set(Math.random().toString());
|
|
1646
|
+
}
|
|
1647
|
+
onChange = () => undefined;
|
|
1648
|
+
onTouched = () => undefined;
|
|
1649
|
+
writeValue(value) {
|
|
1650
|
+
this.textValue.set(value);
|
|
1651
|
+
}
|
|
1652
|
+
registerOnChange(fn) {
|
|
1653
|
+
this.onChange = fn;
|
|
1654
|
+
}
|
|
1655
|
+
registerOnTouched(fn) {
|
|
1656
|
+
this.onTouched = fn;
|
|
1657
|
+
}
|
|
1658
|
+
setDisabledState(isDisabled) {
|
|
1659
|
+
this.cvaDisabled.set(isDisabled);
|
|
1660
|
+
}
|
|
1661
|
+
onModelChange(value) {
|
|
1662
|
+
this.textValue.set(value);
|
|
1663
|
+
this.onChange(value);
|
|
1664
|
+
this.didChange.emit(value);
|
|
1665
|
+
// Hide any previous error styling while the user is typing;
|
|
1666
|
+
// re-appear on blur (see onBlur).
|
|
1667
|
+
this.inputDidChange.set(false);
|
|
1668
|
+
}
|
|
1669
|
+
onBlur() {
|
|
1670
|
+
// User left the field — reveal validation errors if still invalid.
|
|
1671
|
+
this.inputDidChange.set(true);
|
|
1672
|
+
// Mark the form control as touched (standard CVA behavior on blur).
|
|
1673
|
+
this.onTouched();
|
|
1674
|
+
}
|
|
1675
|
+
getAriaDescribedBy() {
|
|
1676
|
+
const describedBy = [];
|
|
1677
|
+
if (this.inputDidChange()) {
|
|
1678
|
+
describedBy.push('error_' + this.id());
|
|
1679
|
+
}
|
|
1680
|
+
if (this.hint()) {
|
|
1681
|
+
describedBy.push('hint_' + this.id());
|
|
1682
|
+
}
|
|
1683
|
+
if (this.show_counter() && this.char_limit() !== null) {
|
|
1684
|
+
describedBy.push(this.counterId());
|
|
1685
|
+
}
|
|
1686
|
+
return describedBy.length > 0 ? describedBy.join(' ') : undefined;
|
|
1687
|
+
}
|
|
1688
|
+
autosize(el) {
|
|
1689
|
+
const style = window.getComputedStyle(el);
|
|
1690
|
+
const lineHeight = parseFloat(style.lineHeight);
|
|
1691
|
+
const paddingTop = parseFloat(style.paddingTop);
|
|
1692
|
+
const paddingBottom = parseFloat(style.paddingBottom);
|
|
1693
|
+
const padV = paddingTop + paddingBottom;
|
|
1694
|
+
const minH = this.min_rows() * lineHeight + padV;
|
|
1695
|
+
const maxH = Math.max(this.min_rows(), this.max_rows()) * lineHeight + padV;
|
|
1696
|
+
el.style.height = 'auto';
|
|
1697
|
+
const scrollH = el.scrollHeight;
|
|
1698
|
+
el.style.height = `${Math.max(minH, Math.min(scrollH, maxH))}px`;
|
|
1699
|
+
el.style.overflowY = scrollH > maxH ? 'auto' : 'hidden';
|
|
1700
|
+
}
|
|
1701
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1702
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TextareaComponent, isStandalone: true, selector: "ui-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min_rows: { classPropertyName: "min_rows", publicName: "min_rows", isSignal: true, isRequired: false, transformFunction: null }, max_rows: { classPropertyName: "max_rows", publicName: "max_rows", isSignal: true, isRequired: false, transformFunction: null }, char_limit: { classPropertyName: "char_limit", publicName: "char_limit", isSignal: true, isRequired: false, transformFunction: null }, show_counter: { classPropertyName: "show_counter", publicName: "show_counter", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { didChange: "didChange" }, providers: [
|
|
1703
|
+
{
|
|
1704
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1705
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
1706
|
+
multi: true,
|
|
1707
|
+
},
|
|
1708
|
+
], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ui-stack class=\"ui-textarea-container\" stack_gap=\"tight\">\n <div class=\"ui-textarea\" [class.ui-textarea--over-limit]=\"isOverLimit()\">\n <textarea\n #textareaEl\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur()\"\n [class.ng-input-did-change]=\"inputDidChange()\"\n [class.ng-input-did-not-change]=\"!inputDidChange()\"\n [placeholder]=\"placeholder()\"\n [attr.disabled]=\"isDisabled() || null\"\n [attr.readonly]=\"readonly() || null\"\n [required]=\"!optional()\"\n [attr.aria-describedby]=\"getAriaDescribedBy()\"\n class=\"text-body--default text-body--regular\"\n ></textarea>\n <ui-stack class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{ label() }}</label>\n </ui-stack>\n </div>\n\n @if (hint() || (show_counter() && char_limit() !== null)) {\n <ui-stack\n class=\"ui-textarea__footer\"\n stack_direction=\"x\"\n stack_align=\"start\"\n stack_gap=\"near\"\n >\n @if (hint()) {\n <div\n class=\"ui-textarea__hint-container ui-text-input-hint text-body--supporting text-color--supporting\"\n [attr.id]=\"'hint_' + id()\"\n >\n {{ hint() }}\n </div>\n }\n @if (show_counter() && char_limit() !== null) {\n <span\n [id]=\"counterId()\"\n aria-live=\"polite\"\n class=\"ui-textarea__counter text-body--supporting\"\n [class.ui-textarea__counter--error]=\"isOverLimit()\"\n >{{ charCount() }} / {{ char_limit() }}</span>\n }\n </ui-stack>\n }\n\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\" [attr.id]=\"'error_' + id()\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-textarea-container .ui-textarea textarea{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:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__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-textarea,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.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-textarea,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-textarea-container:has(textarea.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-textarea-container:has(textarea.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-text-input-container:has(input.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-textarea__hint-container{display:none!important}.ui-checkbox input,.ui-checkbox textarea,.ui-radio input,.ui-radio textarea,.ui-text-input input,.ui-text-input textarea,.ui-textarea input,.ui-textarea textarea,.ui-combobox input,.ui-combobox textarea{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}:host{display:block;width:100%}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-text-input,:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-textarea,:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .hint-container,:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-textarea__hint-container{display:none!important}.ui-textarea-container .ui-textarea{--_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) );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-textarea-container .ui-textarea,.ui-textarea-container .ui-textarea textarea{border-radius:var(--oasys-radius-soften);width:100%}.ui-textarea-container .ui-textarea textarea{box-sizing:border-box;display:block;padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top);color:var(--oasys-color-brand-foreground-primary);resize:none;overflow:hidden}.ui-textarea-container .ui-textarea .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-textarea-container .ui-textarea .label-container,.ui-textarea-container .ui-textarea .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-textarea-container .ui-textarea--over-limit{border-color:var(--oasys-color-interaction-border-danger)}.ui-textarea-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-textarea-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-textarea-container .input-errors .hint-container{display:block!important}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-text-input,.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-textarea,.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .input-errors .input-errors-content{visibility:visible!important}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .hint-container,.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-textarea__hint-container{display:none!important}.ui-textarea-container:has(textarea:disabled) textarea{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground);cursor:not-allowed}.ui-textarea-container:has(textarea:disabled) .ui-textarea{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-textarea-container:has(textarea:disabled) .ui-textarea__counter{color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-textarea-container:has(textarea[readonly]) .ui-textarea{background-color:var(--oasys-color-brand-background-secondary)}.ui-textarea-container .ui-textarea__footer .ui-textarea__hint-container{flex:1;min-width:0}.ui-textarea-container .ui-textarea__footer .ui-textarea__counter{flex-shrink:0;white-space:nowrap;margin-left:auto;color:var(--oasys-color-brand-foreground-secondary)}.ui-textarea-container .ui-textarea__footer .ui-textarea__counter--error{color:var(--oasys-color-system-foreground-negative)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }] });
|
|
1709
|
+
}
|
|
1710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
1711
|
+
type: Component,
|
|
1712
|
+
args: [{ selector: 'ui-textarea', providers: [
|
|
1713
|
+
{
|
|
1714
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1715
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
1716
|
+
multi: true,
|
|
1717
|
+
},
|
|
1718
|
+
], standalone: true, imports: [ReactiveFormsModule, FormsModule, LayoutStackComponent], template: "<ui-stack class=\"ui-textarea-container\" stack_gap=\"tight\">\n <div class=\"ui-textarea\" [class.ui-textarea--over-limit]=\"isOverLimit()\">\n <textarea\n #textareaEl\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur()\"\n [class.ng-input-did-change]=\"inputDidChange()\"\n [class.ng-input-did-not-change]=\"!inputDidChange()\"\n [placeholder]=\"placeholder()\"\n [attr.disabled]=\"isDisabled() || null\"\n [attr.readonly]=\"readonly() || null\"\n [required]=\"!optional()\"\n [attr.aria-describedby]=\"getAriaDescribedBy()\"\n class=\"text-body--default text-body--regular\"\n ></textarea>\n <ui-stack class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{ label() }}</label>\n </ui-stack>\n </div>\n\n @if (hint() || (show_counter() && char_limit() !== null)) {\n <ui-stack\n class=\"ui-textarea__footer\"\n stack_direction=\"x\"\n stack_align=\"start\"\n stack_gap=\"near\"\n >\n @if (hint()) {\n <div\n class=\"ui-textarea__hint-container ui-text-input-hint text-body--supporting text-color--supporting\"\n [attr.id]=\"'hint_' + id()\"\n >\n {{ hint() }}\n </div>\n }\n @if (show_counter() && char_limit() !== null) {\n <span\n [id]=\"counterId()\"\n aria-live=\"polite\"\n class=\"ui-textarea__counter text-body--supporting\"\n [class.ui-textarea__counter--error]=\"isOverLimit()\"\n >{{ charCount() }} / {{ char_limit() }}</span>\n }\n </ui-stack>\n }\n\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\" [attr.id]=\"'error_' + id()\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-textarea-container .ui-textarea textarea{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:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__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-textarea,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.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-textarea,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-textarea-container:has(textarea.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-textarea-container:has(textarea.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-text-input-container:has(input.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-textarea__hint-container{display:none!important}.ui-checkbox input,.ui-checkbox textarea,.ui-radio input,.ui-radio textarea,.ui-text-input input,.ui-text-input textarea,.ui-textarea input,.ui-textarea textarea,.ui-combobox input,.ui-combobox textarea{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}:host{display:block;width:100%}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-text-input,:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-textarea,:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .hint-container,:host.ng-dirty.ng-invalid:has(textarea.ng-input-did-change) .ui-textarea-container .ui-textarea__hint-container{display:none!important}.ui-textarea-container .ui-textarea{--_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) );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-textarea-container .ui-textarea,.ui-textarea-container .ui-textarea textarea{border-radius:var(--oasys-radius-soften);width:100%}.ui-textarea-container .ui-textarea textarea{box-sizing:border-box;display:block;padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top);color:var(--oasys-color-brand-foreground-primary);resize:none;overflow:hidden}.ui-textarea-container .ui-textarea .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-textarea-container .ui-textarea .label-container,.ui-textarea-container .ui-textarea .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-textarea-container .ui-textarea--over-limit{border-color:var(--oasys-color-interaction-border-danger)}.ui-textarea-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-textarea-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-textarea-container .input-errors .hint-container{display:block!important}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-text-input,.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-textarea,.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .input-errors .input-errors-content{visibility:visible!important}.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .hint-container,.ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change) .ui-textarea__hint-container{display:none!important}.ui-textarea-container:has(textarea:disabled) textarea{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground);cursor:not-allowed}.ui-textarea-container:has(textarea:disabled) .ui-textarea{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-textarea-container:has(textarea:disabled) .ui-textarea__counter{color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-textarea-container:has(textarea[readonly]) .ui-textarea{background-color:var(--oasys-color-brand-background-secondary)}.ui-textarea-container .ui-textarea__footer .ui-textarea__hint-container{flex:1;min-width:0}.ui-textarea-container .ui-textarea__footer .ui-textarea__counter{flex-shrink:0;white-space:nowrap;margin-left:auto;color:var(--oasys-color-brand-foreground-secondary)}.ui-textarea-container .ui-textarea__footer .ui-textarea__counter--error{color:var(--oasys-color-system-foreground-negative)}\n"] }]
|
|
1719
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min_rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "min_rows", required: false }] }], max_rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "max_rows", required: false }] }], char_limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "char_limit", required: false }] }], show_counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "show_counter", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], didChange: [{ type: i0.Output, args: ["didChange"] }], textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }] } });
|
|
1720
|
+
|
|
1611
1721
|
class ChipComponent {
|
|
1612
1722
|
chip_type = input('radio', ...(ngDevMode ? [{ debugName: "chip_type" }] : []));
|
|
1613
1723
|
icon_name = input(...(ngDevMode ? [undefined, { debugName: "icon_name" }] : []));
|
|
@@ -2252,70 +2362,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2252
2362
|
}] });
|
|
2253
2363
|
|
|
2254
2364
|
class SectionComponent {
|
|
2255
|
-
tokenService;
|
|
2256
2365
|
// Style input variables
|
|
2257
|
-
brand_background_colour;
|
|
2258
|
-
non_brand_background_colour;
|
|
2259
|
-
text_on_dark_override = false; // This is for custom/non-brand BG colours
|
|
2260
|
-
image_on_left = false;
|
|
2261
|
-
section_type = 'inform';
|
|
2366
|
+
brand_background_colour = input(...(ngDevMode ? [undefined, { debugName: "brand_background_colour" }] : []));
|
|
2367
|
+
non_brand_background_colour = input(...(ngDevMode ? [undefined, { debugName: "non_brand_background_colour" }] : []));
|
|
2368
|
+
text_on_dark_override = input(false, ...(ngDevMode ? [{ debugName: "text_on_dark_override" }] : [])); // This is for custom/non-brand BG colours
|
|
2369
|
+
image_on_left = input(false, ...(ngDevMode ? [{ debugName: "image_on_left" }] : []));
|
|
2370
|
+
section_type = input('inform', ...(ngDevMode ? [{ debugName: "section_type" }] : []));
|
|
2262
2371
|
// Content input variables
|
|
2263
|
-
heading_title;
|
|
2264
|
-
heading_subtitle;
|
|
2265
|
-
primary_cta_text;
|
|
2266
|
-
secondary_cta_text;
|
|
2267
|
-
image;
|
|
2268
|
-
alt_text;
|
|
2372
|
+
heading_title = input(...(ngDevMode ? [undefined, { debugName: "heading_title" }] : []));
|
|
2373
|
+
heading_subtitle = input(...(ngDevMode ? [undefined, { debugName: "heading_subtitle" }] : []));
|
|
2374
|
+
primary_cta_text = input(...(ngDevMode ? [undefined, { debugName: "primary_cta_text" }] : []));
|
|
2375
|
+
secondary_cta_text = input(...(ngDevMode ? [undefined, { debugName: "secondary_cta_text" }] : []));
|
|
2376
|
+
image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
|
|
2377
|
+
alt_text = input(...(ngDevMode ? [undefined, { debugName: "alt_text" }] : []));
|
|
2269
2378
|
// Event input variables
|
|
2270
|
-
href_primary_cta = '';
|
|
2271
|
-
href_secondary_cta = '';
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
imageAspectRatio;
|
|
2282
|
-
constructor(tokenService) {
|
|
2283
|
-
this.tokenService = tokenService;
|
|
2284
|
-
}
|
|
2285
|
-
ngAfterViewInit() {
|
|
2286
|
-
if (this.non_brand_background_colour) {
|
|
2287
|
-
this.setNonBrandBackgroundColour();
|
|
2288
|
-
}
|
|
2289
|
-
// This doesn't appear to be used anywhere
|
|
2290
|
-
this.backgroundIsDark = this.tokenService.getTokenValue(`--oasys-component-box-on-dark-${this.brand_background_colour}`);
|
|
2291
|
-
}
|
|
2292
|
-
ngOnInit() {
|
|
2293
|
-
this.containerInsetSpaceSmall = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-small`);
|
|
2294
|
-
this.containerInsetSpaceLarge = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-large`);
|
|
2295
|
-
this.contentInsetSpaceSmall = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-small-${this.section_type}`);
|
|
2296
|
-
this.contentInsetSpaceLarge = this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-large-${this.section_type}`);
|
|
2297
|
-
this.imageAspectRatio = this.tokenService.getTokenValue(`--oasys-component-section-image-aspect-ratio-${this.section_type}`);
|
|
2298
|
-
// Setting a unique ID, this is important & needed to apply
|
|
2299
|
-
// styles to ui-box
|
|
2300
|
-
this.uiBoxId = Date.now() + '-' + Math.random();
|
|
2301
|
-
}
|
|
2302
|
-
/**
|
|
2303
|
-
* Users are able to set custom non brand background colours
|
|
2304
|
-
* If a non brand background colour is provided we ignore branded colours
|
|
2305
|
-
* even if they are provided.
|
|
2306
|
-
*/
|
|
2307
|
-
setNonBrandBackgroundColour() {
|
|
2308
|
-
const box = document.getElementById(`ui-box-${this.uiBoxId}`);
|
|
2309
|
-
if (box) {
|
|
2310
|
-
this.brand_background_colour = undefined;
|
|
2311
|
-
box.style.background = this.non_brand_background_colour;
|
|
2312
|
-
if (this.text_on_dark_override) {
|
|
2313
|
-
box.classList.add('text-color--on-dark');
|
|
2314
|
-
}
|
|
2315
|
-
}
|
|
2316
|
-
}
|
|
2317
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SectionComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2318
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SectionComponent, isStandalone: true, selector: "ui-section", inputs: { brand_background_colour: "brand_background_colour", non_brand_background_colour: "non_brand_background_colour", text_on_dark_override: "text_on_dark_override", image_on_left: "image_on_left", section_type: "section_type", heading_title: "heading_title", heading_subtitle: "heading_subtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, providers: [TokenService], ngImport: i0, template: "<ui-box\n id=\"ui-box-{{ uiBoxId }}\"\n [box_background]=\"brand_background_colour\"\n [box_space_left]=\"section_type === 'spotlight' && !image_on_left ? 'none' : undefined\"\n [box_space_right]=\"section_type === 'spotlight' && image_on_left ? 'none' : undefined\"\n [box_space]=\"\n section_type === 'spotlight'\n ? 'none'\n : {\n mobile: containerInsetSpaceSmall,\n tablet: containerInsetSpaceLarge,\n laptop: containerInsetSpaceLarge,\n desktop: containerInsetSpaceLarge,\n }\n \"\n>\n <ui-grid [grid_gap]=\"section_type === 'spotlight' ? 'none' : 'default'\">\n <ui-column\n [columns]=\"6\"\n [ngClass]=\"{ 'image-left': image_on_left, 'image-top-mobile': image_on_left }\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\" box_align_y=\"center\">\n <ui-image\n [image_src]=\"image\"\n [image_alt_text]=\"alt_text\"\n [preload_aspect_ratio]=\"imageAspectRatio\"\n ></ui-image>\n </ui-box>\n </ui-column>\n\n <ui-column [columns]=\"6\">\n <ui-box\n [box_background]=\"brand_background_colour\"\n box_align_y=\"center\"\n [box_space]=\"\n section_type === 'spotlight'\n ? {\n mobile: contentInsetSpaceSmall,\n tablet: contentInsetSpaceLarge,\n laptop: contentInsetSpaceLarge,\n desktop: contentInsetSpaceLarge,\n }\n : {\n mobile: contentInsetSpaceSmall,\n tablet: contentInsetSpaceSmall,\n laptop: contentInsetSpaceLarge,\n desktop: contentInsetSpaceLarge,\n }\n \"\n >\n <ui-stack\n stack_direction=\"y\"\n stack_align=\"center\"\n stack_distribute=\"center\"\n [stack_wrap]=\"true\"\n >\n <ui-heading\n [heading_type]=\"section_type === 'spotlight' ? 'primary' : 'functional-primary'\"\n [heading_title]=\"heading_title\"\n [heading_subtitle]=\"heading_subtitle\"\n >\n </ui-heading>\n\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"start\"\n [stack_distribute]=\"section_type === 'spotlight' ? 'center' : 'start'\"\n [stack_wrap]=\"true\"\n stack_gap=\"near\"\n >\n <a\n class=\"text-link text-link--standalone\"\n [href]=\"href_primary_cta\"\n bwtrackas=\"oasys.story-block.primary-cta\"\n >{{ primary_cta_text }}</a\n >\n <a\n *ngIf=\"\n section_type !== 'spotlight' &&\n href_secondary_cta.length > 0 &&\n href_secondary_cta.length > 0\n \"\n class=\"text-link text-link--standalone\"\n [href]=\"href_secondary_cta\"\n bwtrackas=\"oasys.story-block.secondary-cta\"\n >{{ secondary_cta_text }}</a\n >\n </ui-stack>\n </ui-stack>\n </ui-box>\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top-mobile{order:0}}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap", "grid_base"] }, { kind: "component", type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_aria_describedby", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio", "image_width", "image_sizes"], outputs: ["image_loaded"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle", "heading_level"] }, { kind: "directive", type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2379
|
+
href_primary_cta = input('', ...(ngDevMode ? [{ debugName: "href_primary_cta" }] : []));
|
|
2380
|
+
href_secondary_cta = input('', ...(ngDevMode ? [{ debugName: "href_secondary_cta" }] : []));
|
|
2381
|
+
tokenService = inject(TokenService);
|
|
2382
|
+
uiBoxId = computed(() => `ui-box-${Date.now()}-${Math.random()}`, ...(ngDevMode ? [{ debugName: "uiBoxId" }] : []));
|
|
2383
|
+
displayBrandBackgroundColour = computed(() => this.non_brand_background_colour() ? undefined : this.brand_background_colour(), ...(ngDevMode ? [{ debugName: "displayBrandBackgroundColour" }] : []));
|
|
2384
|
+
containerInsetSpaceSmall = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-small`), ...(ngDevMode ? [{ debugName: "containerInsetSpaceSmall" }] : []));
|
|
2385
|
+
containerInsetSpaceLarge = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-container-large`), ...(ngDevMode ? [{ debugName: "containerInsetSpaceLarge" }] : []));
|
|
2386
|
+
contentInsetSpaceSmall = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-small-${this.section_type()}`), ...(ngDevMode ? [{ debugName: "contentInsetSpaceSmall" }] : []));
|
|
2387
|
+
contentInsetSpaceLarge = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-inset-spacing-content-large-${this.section_type()}`), ...(ngDevMode ? [{ debugName: "contentInsetSpaceLarge" }] : []));
|
|
2388
|
+
imageAspectRatio = computed(() => this.tokenService.getTokenValue(`--oasys-component-section-image-aspect-ratio-${this.section_type()}`), ...(ngDevMode ? [{ debugName: "imageAspectRatio" }] : []));
|
|
2389
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2390
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SectionComponent, isStandalone: true, selector: "ui-section", inputs: { brand_background_colour: { classPropertyName: "brand_background_colour", publicName: "brand_background_colour", isSignal: true, isRequired: false, transformFunction: null }, non_brand_background_colour: { classPropertyName: "non_brand_background_colour", publicName: "non_brand_background_colour", isSignal: true, isRequired: false, transformFunction: null }, text_on_dark_override: { classPropertyName: "text_on_dark_override", publicName: "text_on_dark_override", isSignal: true, isRequired: false, transformFunction: null }, image_on_left: { classPropertyName: "image_on_left", publicName: "image_on_left", isSignal: true, isRequired: false, transformFunction: null }, section_type: { classPropertyName: "section_type", publicName: "section_type", isSignal: true, isRequired: false, transformFunction: null }, heading_title: { classPropertyName: "heading_title", publicName: "heading_title", isSignal: true, isRequired: false, transformFunction: null }, heading_subtitle: { classPropertyName: "heading_subtitle", publicName: "heading_subtitle", isSignal: true, isRequired: false, transformFunction: null }, primary_cta_text: { classPropertyName: "primary_cta_text", publicName: "primary_cta_text", isSignal: true, isRequired: false, transformFunction: null }, secondary_cta_text: { classPropertyName: "secondary_cta_text", publicName: "secondary_cta_text", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, alt_text: { classPropertyName: "alt_text", publicName: "alt_text", isSignal: true, isRequired: false, transformFunction: null }, href_primary_cta: { classPropertyName: "href_primary_cta", publicName: "href_primary_cta", isSignal: true, isRequired: false, transformFunction: null }, href_secondary_cta: { classPropertyName: "href_secondary_cta", publicName: "href_secondary_cta", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TokenService], ngImport: i0, template: "<ui-box\n [id]=\"uiBoxId()\"\n [box_background]=\"displayBrandBackgroundColour()\"\n [style.background]=\"non_brand_background_colour() ?? null\"\n [class.text-color--on-dark]=\"!!non_brand_background_colour() && text_on_dark_override()\"\n [box_space_left]=\"section_type() === 'spotlight' && !image_on_left() ? 'none' : undefined\"\n [box_space_right]=\"section_type() === 'spotlight' && image_on_left() ? 'none' : undefined\"\n [box_space]=\"\n section_type() === 'spotlight'\n ? 'none'\n : {\n mobile: containerInsetSpaceSmall(),\n tablet: containerInsetSpaceLarge(),\n laptop: containerInsetSpaceLarge(),\n desktop: containerInsetSpaceLarge(),\n }\n \"\n>\n <ui-grid [grid_gap]=\"section_type() === 'spotlight' ? 'none' : 'default'\">\n @if (image(); as resolvedImage) {\n <ui-column\n [columns]=\"6\"\n [ngClass]=\"{ 'image-left': image_on_left(), 'image-top-mobile': image_on_left() }\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\" box_align_y=\"center\">\n <ui-image\n [image_src]=\"resolvedImage\"\n [image_alt_text]=\"alt_text() ?? ''\"\n [preload_aspect_ratio]=\"imageAspectRatio()\"\n ></ui-image>\n </ui-box>\n </ui-column>\n }\n <ui-column [columns]=\"6\">\n <ui-box\n [box_background]=\"displayBrandBackgroundColour()\"\n box_align_y=\"center\"\n [box_space]=\"\n section_type() === 'spotlight'\n ? {\n mobile: contentInsetSpaceSmall(),\n tablet: contentInsetSpaceLarge(),\n laptop: contentInsetSpaceLarge(),\n desktop: contentInsetSpaceLarge(),\n }\n : {\n mobile: contentInsetSpaceSmall(),\n tablet: contentInsetSpaceSmall(),\n laptop: contentInsetSpaceLarge(),\n desktop: contentInsetSpaceLarge(),\n }\n \"\n >\n @if (heading_title() || primary_cta_text() || secondary_cta_text()) {\n <ui-stack\n stack_direction=\"y\"\n stack_align=\"center\"\n stack_distribute=\"center\"\n [stack_wrap]=\"true\"\n >\n @if (heading_title(); as title) {\n <ui-heading\n [heading_type]=\"section_type() === 'spotlight' ? 'primary' : 'functional-primary'\"\n [heading_title]=\"title\"\n [heading_subtitle]=\"heading_subtitle() ?? ''\"\n >\n </ui-heading>\n }\n\n @if (primary_cta_text() || secondary_cta_text()) {\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"start\"\n [stack_distribute]=\"section_type() === 'spotlight' ? 'center' : 'start'\"\n [stack_wrap]=\"true\"\n stack_gap=\"near\"\n >\n @if (primary_cta_text(); as primaryCtaText) {\n @if (href_primary_cta(); as hrefPrimaryCta) {\n <a\n class=\"text-link text-link--standalone\"\n [href]=\"hrefPrimaryCta\"\n bwtrackas=\"oasys.story-block.primary-cta\"\n >{{ primaryCtaText }}</a\n >\n }\n }\n @if (secondary_cta_text(); as secondaryCtaText) {\n @if (href_secondary_cta(); as hrefSecondaryCta) {\n <a\n class=\"text-link text-link--standalone\"\n [href]=\"hrefSecondaryCta\"\n bwtrackas=\"oasys.story-block.secondary-cta\"\n >{{ secondaryCtaText }}</a\n >\n }\n }\n </ui-stack>\n }\n </ui-stack>\n }\n </ui-box>\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top-mobile{order:0}}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap", "grid_base"] }, { kind: "component", type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_aria_describedby", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio", "image_width", "image_sizes"], outputs: ["image_loaded"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle", "heading_level"] }, { kind: "directive", type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }] });
|
|
2319
2391
|
}
|
|
2320
2392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SectionComponent, decorators: [{
|
|
2321
2393
|
type: Component,
|
|
@@ -2328,35 +2400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2328
2400
|
LayoutStackComponent,
|
|
2329
2401
|
OasysHeadingComponent,
|
|
2330
2402
|
OasysHrefDirective,
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
}], ctorParameters: () => [{ type: TokenService }], propDecorators: { brand_background_colour: [{
|
|
2334
|
-
type: Input
|
|
2335
|
-
}], non_brand_background_colour: [{
|
|
2336
|
-
type: Input
|
|
2337
|
-
}], text_on_dark_override: [{
|
|
2338
|
-
type: Input
|
|
2339
|
-
}], image_on_left: [{
|
|
2340
|
-
type: Input
|
|
2341
|
-
}], section_type: [{
|
|
2342
|
-
type: Input
|
|
2343
|
-
}], heading_title: [{
|
|
2344
|
-
type: Input
|
|
2345
|
-
}], heading_subtitle: [{
|
|
2346
|
-
type: Input
|
|
2347
|
-
}], primary_cta_text: [{
|
|
2348
|
-
type: Input
|
|
2349
|
-
}], secondary_cta_text: [{
|
|
2350
|
-
type: Input
|
|
2351
|
-
}], image: [{
|
|
2352
|
-
type: Input
|
|
2353
|
-
}], alt_text: [{
|
|
2354
|
-
type: Input
|
|
2355
|
-
}], href_primary_cta: [{
|
|
2356
|
-
type: Input
|
|
2357
|
-
}], href_secondary_cta: [{
|
|
2358
|
-
type: Input
|
|
2359
|
-
}] } });
|
|
2403
|
+
], providers: [TokenService], template: "<ui-box\n [id]=\"uiBoxId()\"\n [box_background]=\"displayBrandBackgroundColour()\"\n [style.background]=\"non_brand_background_colour() ?? null\"\n [class.text-color--on-dark]=\"!!non_brand_background_colour() && text_on_dark_override()\"\n [box_space_left]=\"section_type() === 'spotlight' && !image_on_left() ? 'none' : undefined\"\n [box_space_right]=\"section_type() === 'spotlight' && image_on_left() ? 'none' : undefined\"\n [box_space]=\"\n section_type() === 'spotlight'\n ? 'none'\n : {\n mobile: containerInsetSpaceSmall(),\n tablet: containerInsetSpaceLarge(),\n laptop: containerInsetSpaceLarge(),\n desktop: containerInsetSpaceLarge(),\n }\n \"\n>\n <ui-grid [grid_gap]=\"section_type() === 'spotlight' ? 'none' : 'default'\">\n @if (image(); as resolvedImage) {\n <ui-column\n [columns]=\"6\"\n [ngClass]=\"{ 'image-left': image_on_left(), 'image-top-mobile': image_on_left() }\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\" box_align_y=\"center\">\n <ui-image\n [image_src]=\"resolvedImage\"\n [image_alt_text]=\"alt_text() ?? ''\"\n [preload_aspect_ratio]=\"imageAspectRatio()\"\n ></ui-image>\n </ui-box>\n </ui-column>\n }\n <ui-column [columns]=\"6\">\n <ui-box\n [box_background]=\"displayBrandBackgroundColour()\"\n box_align_y=\"center\"\n [box_space]=\"\n section_type() === 'spotlight'\n ? {\n mobile: contentInsetSpaceSmall(),\n tablet: contentInsetSpaceLarge(),\n laptop: contentInsetSpaceLarge(),\n desktop: contentInsetSpaceLarge(),\n }\n : {\n mobile: contentInsetSpaceSmall(),\n tablet: contentInsetSpaceSmall(),\n laptop: contentInsetSpaceLarge(),\n desktop: contentInsetSpaceLarge(),\n }\n \"\n >\n @if (heading_title() || primary_cta_text() || secondary_cta_text()) {\n <ui-stack\n stack_direction=\"y\"\n stack_align=\"center\"\n stack_distribute=\"center\"\n [stack_wrap]=\"true\"\n >\n @if (heading_title(); as title) {\n <ui-heading\n [heading_type]=\"section_type() === 'spotlight' ? 'primary' : 'functional-primary'\"\n [heading_title]=\"title\"\n [heading_subtitle]=\"heading_subtitle() ?? ''\"\n >\n </ui-heading>\n }\n\n @if (primary_cta_text() || secondary_cta_text()) {\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"start\"\n [stack_distribute]=\"section_type() === 'spotlight' ? 'center' : 'start'\"\n [stack_wrap]=\"true\"\n stack_gap=\"near\"\n >\n @if (primary_cta_text(); as primaryCtaText) {\n @if (href_primary_cta(); as hrefPrimaryCta) {\n <a\n class=\"text-link text-link--standalone\"\n [href]=\"hrefPrimaryCta\"\n bwtrackas=\"oasys.story-block.primary-cta\"\n >{{ primaryCtaText }}</a\n >\n }\n }\n @if (secondary_cta_text(); as secondaryCtaText) {\n @if (href_secondary_cta(); as hrefSecondaryCta) {\n <a\n class=\"text-link text-link--standalone\"\n [href]=\"hrefSecondaryCta\"\n bwtrackas=\"oasys.story-block.secondary-cta\"\n >{{ secondaryCtaText }}</a\n >\n }\n }\n </ui-stack>\n }\n </ui-stack>\n }\n </ui-box>\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top-mobile{order:0}}\n"] }]
|
|
2404
|
+
}], propDecorators: { brand_background_colour: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand_background_colour", required: false }] }], non_brand_background_colour: [{ type: i0.Input, args: [{ isSignal: true, alias: "non_brand_background_colour", required: false }] }], text_on_dark_override: [{ type: i0.Input, args: [{ isSignal: true, alias: "text_on_dark_override", required: false }] }], image_on_left: [{ type: i0.Input, args: [{ isSignal: true, alias: "image_on_left", required: false }] }], section_type: [{ type: i0.Input, args: [{ isSignal: true, alias: "section_type", required: false }] }], heading_title: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading_title", required: false }] }], heading_subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading_subtitle", required: false }] }], primary_cta_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary_cta_text", required: false }] }], secondary_cta_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary_cta_text", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], alt_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt_text", required: false }] }], href_primary_cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "href_primary_cta", required: false }] }], href_secondary_cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "href_secondary_cta", required: false }] }] } });
|
|
2360
2405
|
|
|
2361
2406
|
/** @deprecated Import the standalone SectionComponent directly instead. */
|
|
2362
2407
|
class SectionModule {
|
|
@@ -2377,7 +2422,6 @@ class CarouselComponent {
|
|
|
2377
2422
|
tokenService;
|
|
2378
2423
|
document;
|
|
2379
2424
|
element;
|
|
2380
|
-
changeDetectorRef;
|
|
2381
2425
|
// The swiper instance
|
|
2382
2426
|
swiper;
|
|
2383
2427
|
carouselscrollbarplaceholder;
|
|
@@ -2400,16 +2444,11 @@ class CarouselComponent {
|
|
|
2400
2444
|
center_active_slide = false; // Centers the active slide
|
|
2401
2445
|
start_slide = 0; // Start slide index
|
|
2402
2446
|
offset_scrollbar_top = false; // Offset the scrollbar to the top of the carousel
|
|
2403
|
-
splash_category_carousel = false;
|
|
2404
2447
|
activeIndexOnSlideChange = new EventEmitter();
|
|
2405
|
-
|
|
2406
|
-
isBeginning = true;
|
|
2407
|
-
isEnd = false;
|
|
2408
|
-
constructor(tokenService, document, element, changeDetectorRef) {
|
|
2448
|
+
constructor(tokenService, document, element) {
|
|
2409
2449
|
this.tokenService = tokenService;
|
|
2410
2450
|
this.document = document;
|
|
2411
2451
|
this.element = element;
|
|
2412
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
2413
2452
|
inject(SWIPER_PROVIDER_TOKEN).ensureSwiperRegistered();
|
|
2414
2453
|
}
|
|
2415
2454
|
ngOnInit() {
|
|
@@ -2471,9 +2510,7 @@ class CarouselComponent {
|
|
|
2471
2510
|
}
|
|
2472
2511
|
if (carouselStack && this.carousel_pagination === 'scroll-bar') {
|
|
2473
2512
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-width', '100%');
|
|
2474
|
-
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-offset-top', this.offset_scrollbar_top
|
|
2475
|
-
? parseInt(this.getStyle(carouselStack, 'gap'), 10) + 'px'
|
|
2476
|
-
: '0px');
|
|
2513
|
+
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-offset-top', `${this.offset_scrollbar_top ? parseInt(this.getStyle(carouselStack, 'gap'), 10) + 'px' : '0px'}`);
|
|
2477
2514
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-height', '4px');
|
|
2478
2515
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-left', '0px');
|
|
2479
2516
|
}
|
|
@@ -2481,6 +2518,7 @@ class CarouselComponent {
|
|
|
2481
2518
|
/**
|
|
2482
2519
|
* Set the dynamic swiper params and initialise the swiper instance
|
|
2483
2520
|
*/
|
|
2521
|
+
// eslint-disable-next-line complexity
|
|
2484
2522
|
initSwiper() {
|
|
2485
2523
|
// Colour overides
|
|
2486
2524
|
const scrollbarBackgroundColour = this.tokenService.getTokenValue('--oasys-color-linen-grey-200');
|
|
@@ -2571,15 +2609,7 @@ class CarouselComponent {
|
|
|
2571
2609
|
},
|
|
2572
2610
|
},
|
|
2573
2611
|
on: {
|
|
2574
|
-
|
|
2575
|
-
slideChange: (swiper) => {
|
|
2576
|
-
this.onSlideChange(swiper);
|
|
2577
|
-
this.updateNavigationState(swiper);
|
|
2578
|
-
},
|
|
2579
|
-
toEdge: this.updateNavigationState.bind(this),
|
|
2580
|
-
fromEdge: this.updateNavigationState.bind(this),
|
|
2581
|
-
reachBeginning: this.updateNavigationState.bind(this),
|
|
2582
|
-
reachEnd: this.updateNavigationState.bind(this),
|
|
2612
|
+
slideChange: this.onSlideChange.bind(this),
|
|
2583
2613
|
},
|
|
2584
2614
|
};
|
|
2585
2615
|
// now we need to assign all parameters to the Swiper element
|
|
@@ -2611,28 +2641,16 @@ class CarouselComponent {
|
|
|
2611
2641
|
onSlideChange(swiper) {
|
|
2612
2642
|
this.activeIndexOnSlideChange.emit(swiper.activeIndex);
|
|
2613
2643
|
}
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
* arrows are only shown when there is a slide to scroll to. Swiper updates
|
|
2617
|
-
* these flags outside of Angular, so we mirror them onto the component and
|
|
2618
|
-
* detect changes manually.
|
|
2619
|
-
* @param swiper
|
|
2620
|
-
*/
|
|
2621
|
-
updateNavigationState(swiper) {
|
|
2622
|
-
this.isBeginning = swiper.isBeginning;
|
|
2623
|
-
this.isEnd = swiper.isEnd;
|
|
2624
|
-
this.changeDetectorRef.detectChanges();
|
|
2625
|
-
}
|
|
2626
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CarouselComponent, deps: [{ token: TokenService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2627
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CarouselComponent, isStandalone: true, selector: "ui-carousel", inputs: { rewind: "rewind", carousel_overflow: "carousel_overflow", carousel_gap: "carousel_gap", carousel_pagination: "carousel_pagination", carousel_slides_per_view_desktop: "carousel_slides_per_view_desktop", carousel_slides_per_view_laptop: "carousel_slides_per_view_laptop", carousel_slides_per_view_tablet: "carousel_slides_per_view_tablet", carousel_slides_per_view_mobile: "carousel_slides_per_view_mobile", text_for_left_arrow: "text_for_left_arrow", text_for_right_arrow: "text_for_right_arrow", carousel_rows_per_row_mobile: "carousel_rows_per_row_mobile", carousel_loading: "carousel_loading", carousel_free_mode: "carousel_free_mode", center_insufficient_slides: "center_insufficient_slides", center_active_slide: "center_active_slide", start_slide: "start_slide", offset_scrollbar_top: "offset_scrollbar_top", splash_category_carousel: "splash_category_carousel" }, outputs: { activeIndexOnSlideChange: "activeIndexOnSlideChange" }, providers: [TokenService], viewQueries: [{ propertyName: "swiper", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "carouselscrollbarplaceholder", first: true, predicate: ["carouselscrollbarplaceholder"], descendants: true, read: ElementRef }, { propertyName: "carouselctastack", first: true, predicate: ["carouselctastack"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ui-box\n class=\"ui-carousel\"\n [ngClass]=\"{ 'ui-carousel-overflow': carousel_overflow }\"\n box_align_y=\"center\"\n box_space=\"none\"\n [box_content_fill_width]=\"true\"\n box_background=\"transparent\"\n>\n <ui-stack #carouselctastack>\n <!-- Custom navigation buttons -->\n <ui-stack\n *ngIf=\"carousel_pagination === 'small-arrows'\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_distribute=\"end\"\n >\n <ui-box\n box_space=\"none\"\n box_fill_mode=\"fit\"\n box_space_bottom=\"none\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <div\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n class=\"ui-carousel__small-arrows\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </div>\n </ui-box>\n </ui-stack>\n\n <!-- Swiper WebComponent-->\n <div class=\"ui-carousel__viewport\">\n <!-- Floating arrow navigation buttons -->\n @if (carousel_pagination === 'floating-arrow') {\n <div\n class=\"ui-carousel__floating-arrows\"\n [ngClass]=\"{\n 'ui-carousel__floating-arrows--splash-categories': splash_category_carousel,\n }\"\n >\n <!-- Previous button - only visible when not scrolled to the start-->\n @if (!isBeginning) {\n <ui-button\n class=\"ui-carousel__floating-arrow ui-carousel__floating-arrow--previous ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Previous slide\n </ui-button>\n }\n <!-- Next button - only visible when not scrolled to the end-->\n @if (!isEnd) {\n <ui-button\n class=\"ui-carousel__floating-arrow ui-carousel__floating-arrow--next ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n }\n </div>\n }\n <swiper-container\n #swiper\n init=\"false\"\n touch-start-prevent-default=\"false\"\n prevent-clicks-propagation=\"true\"\n >\n <ng-content></ng-content>\n </swiper-container>\n </div>\n\n <!-- Custom navigation buttons -->\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n *ngIf=\"carousel_pagination === 'scroll-arrows' || carousel_pagination === 'scroll-bar'\"\n >\n <div class=\"ui-carousel-scrollbar-placeholder\" #carouselscrollbarplaceholder></div>\n <ui-box\n *ngIf=\"carousel_pagination === 'scroll-arrows'\"\n box_space=\"none\"\n box_fill_mode=\"fit\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <ui-stack\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n stack_direction=\"x\"\n stack_gap=\"near\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [":root{--swiper-scrollbar-size: 4px}.ui-carousel{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.ui-carousel swiper-container{width:100%}.ui-carousel .ui-carousel-scrollbar-placeholder{width:100%;display:flex;align-self:stretch}.ui-carousel swiper-slide img{-webkit-user-drag:none}.ui-carousel__small-arrows{align-items:center;display:flex;flex-direction:row;gap:var(--oasys-spacing-near);justify-content:center}@media only screen and (max-width:766px){.ui-carousel__small-arrows{gap:var(--oasys-spacing-tight)}}.ui-carousel__viewport{position:relative;width:100%}.ui-carousel__floating-arrows{align-items:center;display:flex;height:calc(100% - var(--oasys-typography-body-supporting-font-size));inset:0;justify-content:space-between;margin:0 -20px;pointer-events:none;position:absolute;z-index:2}@media only screen and (max-width:766px){.ui-carousel__floating-arrows{margin:0 var(--oasys-spacing-near)}}@media only screen and (max-width:766px){.ui-carousel__floating-arrows--splash-categories{height:74px}}.ui-carousel__floating-arrow button{background:var(--oasys-color-white);border-radius:var(--oasys-radius-round);border-width:0;color:var(--oasys-color-brand-foreground-primary);height:40px;min-width:40px;pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:40px}.ui-carousel__floating-arrow button .button-content{justify-content:center;min-height:unset;width:100%}.ui-carousel__floating-arrow button:focus .button-overlay{opacity:0}.ui-carousel__floating-arrow button:focus .button-overlay,.ui-carousel__floating-arrow button:hover .button-overlay{border-radius:var(--oasys-radius-round)}.ui-carousel__floating-arrow--previous button{background:linear-gradient(to left,rgba(255,255,255,0) 0%,var(--oasys-color-white) 33%);left:0}.ui-carousel__floating-arrow--next button{background:linear-gradient(to right,rgba(255,255,255,0) 0%,var(--oasys-color-white) 33%);right:0}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href", "routerLink"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2644
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CarouselComponent, deps: [{ token: TokenService }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CarouselComponent, isStandalone: true, selector: "ui-carousel", inputs: { rewind: "rewind", carousel_overflow: "carousel_overflow", carousel_gap: "carousel_gap", carousel_pagination: "carousel_pagination", carousel_slides_per_view_desktop: "carousel_slides_per_view_desktop", carousel_slides_per_view_laptop: "carousel_slides_per_view_laptop", carousel_slides_per_view_tablet: "carousel_slides_per_view_tablet", carousel_slides_per_view_mobile: "carousel_slides_per_view_mobile", text_for_left_arrow: "text_for_left_arrow", text_for_right_arrow: "text_for_right_arrow", carousel_rows_per_row_mobile: "carousel_rows_per_row_mobile", carousel_loading: "carousel_loading", carousel_free_mode: "carousel_free_mode", center_insufficient_slides: "center_insufficient_slides", center_active_slide: "center_active_slide", start_slide: "start_slide", offset_scrollbar_top: "offset_scrollbar_top" }, outputs: { activeIndexOnSlideChange: "activeIndexOnSlideChange" }, providers: [TokenService], viewQueries: [{ propertyName: "swiper", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "carouselscrollbarplaceholder", first: true, predicate: ["carouselscrollbarplaceholder"], descendants: true, read: ElementRef }, { propertyName: "carouselctastack", first: true, predicate: ["carouselctastack"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ui-box\n class=\"ui-carousel\"\n [ngClass]=\"{ 'ui-carousel-overflow': carousel_overflow }\"\n box_align_y=\"center\"\n box_space=\"none\"\n [box_content_fill_width]=\"true\"\n box_background=\"transparent\"\n>\n <ui-stack #carouselctastack>\n <!-- Custom navigation buttons -->\n <ui-stack\n *ngIf=\"carousel_pagination === 'small-arrows'\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_distribute=\"end\"\n >\n <ui-box\n box_space=\"none\"\n box_fill_mode=\"fit\"\n box_space_bottom=\"none\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <div\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n class=\"ui-carousel__small-arrows\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </div>\n </ui-box>\n </ui-stack>\n\n <!-- Swiper WebComponent-->\n <swiper-container\n #swiper\n init=\"false\"\n touch-start-prevent-default=\"false\"\n prevent-clicks-propagation=\"true\"\n >\n <ng-content></ng-content>\n </swiper-container>\n\n <!-- Custom navigation buttons -->\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n *ngIf=\"carousel_pagination === 'scroll-arrows' || carousel_pagination === 'scroll-bar'\"\n >\n <div class=\"ui-carousel-scrollbar-placeholder\" #carouselscrollbarplaceholder></div>\n <ui-box\n *ngIf=\"carousel_pagination === 'scroll-arrows'\"\n box_space=\"none\"\n box_fill_mode=\"fit\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <ui-stack\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n stack_direction=\"x\"\n stack_gap=\"near\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [":root{--swiper-scrollbar-size: 4px}.ui-carousel{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.ui-carousel swiper-container{width:100%}.ui-carousel .ui-carousel-scrollbar-placeholder{width:100%;display:flex;align-self:stretch}.ui-carousel swiper-slide img{-webkit-user-drag:none}.ui-carousel__small-arrows{align-items:center;display:flex;flex-direction:row;gap:var(--oasys-spacing-near);justify-content:center}@media only screen and (max-width:766px){.ui-carousel__small-arrows{gap:var(--oasys-spacing-tight)}}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href", "routerLink"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2628
2646
|
}
|
|
2629
2647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
2630
2648
|
type: Component,
|
|
2631
|
-
args: [{ selector: 'ui-carousel', encapsulation: ViewEncapsulation.None, standalone: true, imports: [LayoutBoxComponent, NgClass, LayoutStackComponent, NgIf, OasysButtonComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [TokenService], template: "<ui-box\n class=\"ui-carousel\"\n [ngClass]=\"{ 'ui-carousel-overflow': carousel_overflow }\"\n box_align_y=\"center\"\n box_space=\"none\"\n [box_content_fill_width]=\"true\"\n box_background=\"transparent\"\n>\n <ui-stack #carouselctastack>\n <!-- Custom navigation buttons -->\n <ui-stack\n *ngIf=\"carousel_pagination === 'small-arrows'\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_distribute=\"end\"\n >\n <ui-box\n box_space=\"none\"\n box_fill_mode=\"fit\"\n box_space_bottom=\"none\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <div\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n class=\"ui-carousel__small-arrows\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </div>\n </ui-box>\n </ui-stack>\n\n <!-- Swiper WebComponent-->\n <
|
|
2649
|
+
args: [{ selector: 'ui-carousel', encapsulation: ViewEncapsulation.None, standalone: true, imports: [LayoutBoxComponent, NgClass, LayoutStackComponent, NgIf, OasysButtonComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [TokenService], template: "<ui-box\n class=\"ui-carousel\"\n [ngClass]=\"{ 'ui-carousel-overflow': carousel_overflow }\"\n box_align_y=\"center\"\n box_space=\"none\"\n [box_content_fill_width]=\"true\"\n box_background=\"transparent\"\n>\n <ui-stack #carouselctastack>\n <!-- Custom navigation buttons -->\n <ui-stack\n *ngIf=\"carousel_pagination === 'small-arrows'\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_distribute=\"end\"\n >\n <ui-box\n box_space=\"none\"\n box_fill_mode=\"fit\"\n box_space_bottom=\"none\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <div\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n class=\"ui-carousel__small-arrows\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </div>\n </ui-box>\n </ui-stack>\n\n <!-- Swiper WebComponent-->\n <swiper-container\n #swiper\n init=\"false\"\n touch-start-prevent-default=\"false\"\n prevent-clicks-propagation=\"true\"\n >\n <ng-content></ng-content>\n </swiper-container>\n\n <!-- Custom navigation buttons -->\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n *ngIf=\"carousel_pagination === 'scroll-arrows' || carousel_pagination === 'scroll-bar'\"\n >\n <div class=\"ui-carousel-scrollbar-placeholder\" #carouselscrollbarplaceholder></div>\n <ui-box\n *ngIf=\"carousel_pagination === 'scroll-arrows'\"\n box_space=\"none\"\n box_fill_mode=\"fit\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <ui-stack\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n stack_direction=\"x\"\n stack_gap=\"near\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [":root{--swiper-scrollbar-size: 4px}.ui-carousel{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.ui-carousel swiper-container{width:100%}.ui-carousel .ui-carousel-scrollbar-placeholder{width:100%;display:flex;align-self:stretch}.ui-carousel swiper-slide img{-webkit-user-drag:none}.ui-carousel__small-arrows{align-items:center;display:flex;flex-direction:row;gap:var(--oasys-spacing-near);justify-content:center}@media only screen and (max-width:766px){.ui-carousel__small-arrows{gap:var(--oasys-spacing-tight)}}\n"] }]
|
|
2632
2650
|
}], ctorParameters: () => [{ type: TokenService }, { type: Document, decorators: [{
|
|
2633
2651
|
type: Inject,
|
|
2634
2652
|
args: [DOCUMENT]
|
|
2635
|
-
}] }, { type: i0.ElementRef }
|
|
2653
|
+
}] }, { type: i0.ElementRef }], propDecorators: { swiper: [{
|
|
2636
2654
|
type: ViewChild,
|
|
2637
2655
|
args: ['swiper', { static: true }]
|
|
2638
2656
|
}], carouselscrollbarplaceholder: [{
|
|
@@ -2675,8 +2693,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2675
2693
|
type: Input
|
|
2676
2694
|
}], offset_scrollbar_top: [{
|
|
2677
2695
|
type: Input
|
|
2678
|
-
}], splash_category_carousel: [{
|
|
2679
|
-
type: Input
|
|
2680
2696
|
}], activeIndexOnSlideChange: [{
|
|
2681
2697
|
type: Output
|
|
2682
2698
|
}] } });
|
|
@@ -3799,7 +3815,7 @@ class OasysComboboxComponent {
|
|
|
3799
3815
|
useExisting: forwardRef(() => OasysComboboxComponent),
|
|
3800
3816
|
multi: true,
|
|
3801
3817
|
},
|
|
3802
|
-
], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textinput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "comboboxContainer", first: true, predicate: ["comboboxContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "footerButton", first: true, predicate: ["footerButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsList", predicate: ["option"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n <div\n #comboboxContainer\n class=\"ui-combobox text-body--default text-body--regular\"\n (focusout)=\"onContainerFocusOut($event)\"\n >\n <!-- Compbobox Options Input -->\n @if (type() === 'options') {\n <div #combobox name=\"combobox\" (mousedown)=\"togglePanel()\" [attr.id]=\"id() + '-combobox'\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue())\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'on'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [placeholder]=\"placeholder() || ''\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n role=\"combobox\"\n [attr.aria-label]=\"textValue() || label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.disabled]=\"disabled() || null\"\n [attr.aria-owns]=\"listboxId()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-readonly=\"true\"\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 </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Autocomplete Input -->\n @if (type() === 'autocomplete') {\n <div #combobox name=\"combobox\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (click)=\"onTextInputClick()\"\n (keydown)=\"onKeyDown($event)\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'list'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [value]=\"textValue()\"\n [placeholder]=\"placeholder() || ''\"\n role=\"combobox\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n aria-autocomplete=\"list\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div class=\"icon-container\">\n @if (textValue()) {\n <ui-button\n button_type=\"tertiary\"\n button_size=\"small\"\n button_icon=\"close\"\n button_icon_placement=\"iconOnly\"\n [aria_label]=\"clearLabel()\"\n (clicked)=\"cleanInput()\"\n (keydown)=\"onClearButtonKeyDown($event)\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n >\n {{ clearLabel() }}\n </ui-button>\n }\n </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Options Panel -->\n @if (panelOpen()) {\n @if (type() === 'autocomplete') {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n >\n @if (header()) {\n <div class=\"ui-combobox-header text-body--supporting\">\n <span>{{ header() }}</span>\n </div>\n }\n\n <div class=\"ui-combobox-options-list\" role=\"listbox\" [attr.id]=\"listboxId()\">\n @for (option of displayOptions(); track option; let i = $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n selectedOption() === option &&\n (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"selectedOption() === option ? true : null\"\n [attr.aria-label]=\"autocompleteOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <ui-stack stack_gap=\"tiny\">\n <span\n ui-emphasis\n [searchText]=\"textValue()\"\n [displayParagraph]=\"option[displayOptionKey()]\"\n >\n </span>\n <p class=\"foreground-secondary-text\">\n {{ option[subtextOptionKey()] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n @if (selectedOption() === option) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n\n @if (footer()) {\n <div class=\"ui-combobox-footer\">\n <ui-button\n #footerButton\n button_type=\"tertiary\"\n [aria_label]=\"footer()\"\n (click)=\"onFooterAction()\"\n (keydown)=\"onFooterButtonKeyDown($event)\"\n (keydown.escape)=\"onFooterEscape($event)\"\n >\n {{ footer() }}\n </ui-button>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n role=\"listbox\"\n [attr.id]=\"listboxId()\"\n >\n <div class=\"ui-combobox-options-list\">\n @for (option of displayOptions(); track $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n isOptionSelected(option) && (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, $index)\"\n (keydown)=\"onOptionsListKeyDown($event)\"\n [id]=\"optionId($index)\"\n [attr.aria-selected]=\"isOptionSelected(option) ? true : null\"\n [attr.aria-label]=\"optionsTypeOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <span>{{ option[displayOptionKey()] }}</span>\n </ui-stack>\n </div>\n @if (isOptionSelected(option)) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (hint()) {\n <ui-box\n class=\"hint-container\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-combobox input,.ui-combobox .select{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox:has(div[name=combobox]:focus-within),[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;border-radius:var(--oasys-radius-soften);width:100%;background-color:var(--oasys-color-white)}.ui-combobox{transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center;flex:0 0 auto}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;max-height:40vh;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;display:flex;flex-direction:column;overflow:hidden;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition:opacity var(--_ad) cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-options-list{flex:1 1 auto;min-height:0;overflow-y:auto}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften);border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-options.keyboard-open .ui-combobox-option:hover:not(.focus){background-color:transparent;border-radius:0}.ui-combobox-options.keyboard-open .ui-combobox-option.focus:hover{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-combobox input{border:none;width:100%;background-color:transparent}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}\n"], dependencies: [{ kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }, { kind: "directive", type: EmphasisDirective, selector: "[ui-emphasis]", inputs: ["searchText", "displayParagraph"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href", "routerLink"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3818
|
+
], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textinput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "comboboxContainer", first: true, predicate: ["comboboxContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "footerButton", first: true, predicate: ["footerButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsList", predicate: ["option"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n <div\n #comboboxContainer\n class=\"ui-combobox text-body--default text-body--regular\"\n (focusout)=\"onContainerFocusOut($event)\"\n >\n <!-- Compbobox Options Input -->\n @if (type() === 'options') {\n <div #combobox name=\"combobox\" (mousedown)=\"togglePanel()\" [attr.id]=\"id() + '-combobox'\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue())\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'on'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [placeholder]=\"placeholder() || ''\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n role=\"combobox\"\n [attr.aria-label]=\"textValue() || label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.disabled]=\"disabled() || null\"\n [attr.aria-owns]=\"listboxId()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-readonly=\"true\"\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 </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Autocomplete Input -->\n @if (type() === 'autocomplete') {\n <div #combobox name=\"combobox\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (click)=\"onTextInputClick()\"\n (keydown)=\"onKeyDown($event)\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'list'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [value]=\"textValue()\"\n [placeholder]=\"placeholder() || ''\"\n role=\"combobox\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n aria-autocomplete=\"list\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div class=\"icon-container\">\n @if (textValue()) {\n <ui-button\n button_type=\"tertiary\"\n button_size=\"small\"\n button_icon=\"close\"\n button_icon_placement=\"iconOnly\"\n [aria_label]=\"clearLabel()\"\n (clicked)=\"cleanInput()\"\n (keydown)=\"onClearButtonKeyDown($event)\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n >\n {{ clearLabel() }}\n </ui-button>\n }\n </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Options Panel -->\n @if (panelOpen()) {\n @if (type() === 'autocomplete') {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n >\n @if (header()) {\n <div class=\"ui-combobox-header text-body--supporting\">\n <span>{{ header() }}</span>\n </div>\n }\n\n <div class=\"ui-combobox-options-list\" role=\"listbox\" [attr.id]=\"listboxId()\">\n @for (option of displayOptions(); track option; let i = $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n selectedOption() === option &&\n (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"selectedOption() === option ? true : null\"\n [attr.aria-label]=\"autocompleteOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <ui-stack stack_gap=\"tiny\">\n <span\n ui-emphasis\n [searchText]=\"textValue()\"\n [displayParagraph]=\"option[displayOptionKey()]\"\n >\n </span>\n <p class=\"foreground-secondary-text\">\n {{ option[subtextOptionKey()] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n @if (selectedOption() === option) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n\n @if (footer()) {\n <div class=\"ui-combobox-footer\">\n <ui-button\n #footerButton\n button_type=\"tertiary\"\n [aria_label]=\"footer()\"\n (click)=\"onFooterAction()\"\n (keydown)=\"onFooterButtonKeyDown($event)\"\n (keydown.escape)=\"onFooterEscape($event)\"\n >\n {{ footer() }}\n </ui-button>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n role=\"listbox\"\n [attr.id]=\"listboxId()\"\n >\n <div class=\"ui-combobox-options-list\">\n @for (option of displayOptions(); track $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n isOptionSelected(option) && (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, $index)\"\n (keydown)=\"onOptionsListKeyDown($event)\"\n [id]=\"optionId($index)\"\n [attr.aria-selected]=\"isOptionSelected(option) ? true : null\"\n [attr.aria-label]=\"optionsTypeOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <span>{{ option[displayOptionKey()] }}</span>\n </ui-stack>\n </div>\n @if (isOptionSelected(option)) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (hint()) {\n <ui-box\n class=\"hint-container\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-combobox input,.ui-combobox .select{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__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-textarea,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.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-textarea,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-textarea-container:has(textarea.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-textarea-container:has(textarea.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-text-input-container:has(input.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-textarea__hint-container{display:none!important}.ui-checkbox input,.ui-checkbox textarea,.ui-radio input,.ui-radio textarea,.ui-text-input input,.ui-text-input textarea,.ui-textarea input,.ui-textarea textarea,.ui-combobox input,.ui-combobox textarea{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:has(div[name=combobox]:focus-within),[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-textarea,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-textarea__hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;border-radius:var(--oasys-radius-soften);width:100%;background-color:var(--oasys-color-white)}.ui-combobox{transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center;flex:0 0 auto}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;max-height:40vh;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;display:flex;flex-direction:column;overflow:hidden;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition:opacity var(--_ad) cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-options-list{flex:1 1 auto;min-height:0;overflow-y:auto}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften);border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-options.keyboard-open .ui-combobox-option:hover:not(.focus){background-color:transparent;border-radius:0}.ui-combobox-options.keyboard-open .ui-combobox-option.focus:hover{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-combobox input{border:none;width:100%;background-color:transparent}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-textarea,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-textarea,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-textarea,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-textarea__hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-textarea__hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}\n"], dependencies: [{ kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OasysAutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }, { kind: "directive", type: EmphasisDirective, selector: "[ui-emphasis]", inputs: ["searchText", "displayParagraph"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href", "routerLink"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3803
3819
|
}
|
|
3804
3820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OasysComboboxComponent, decorators: [{
|
|
3805
3821
|
type: Component,
|
|
@@ -3819,7 +3835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3819
3835
|
IconComponent,
|
|
3820
3836
|
EmphasisDirective,
|
|
3821
3837
|
OasysButtonComponent,
|
|
3822
|
-
], template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n <div\n #comboboxContainer\n class=\"ui-combobox text-body--default text-body--regular\"\n (focusout)=\"onContainerFocusOut($event)\"\n >\n <!-- Compbobox Options Input -->\n @if (type() === 'options') {\n <div #combobox name=\"combobox\" (mousedown)=\"togglePanel()\" [attr.id]=\"id() + '-combobox'\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue())\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'on'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [placeholder]=\"placeholder() || ''\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n role=\"combobox\"\n [attr.aria-label]=\"textValue() || label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.disabled]=\"disabled() || null\"\n [attr.aria-owns]=\"listboxId()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-readonly=\"true\"\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 </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Autocomplete Input -->\n @if (type() === 'autocomplete') {\n <div #combobox name=\"combobox\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (click)=\"onTextInputClick()\"\n (keydown)=\"onKeyDown($event)\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'list'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [value]=\"textValue()\"\n [placeholder]=\"placeholder() || ''\"\n role=\"combobox\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n aria-autocomplete=\"list\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div class=\"icon-container\">\n @if (textValue()) {\n <ui-button\n button_type=\"tertiary\"\n button_size=\"small\"\n button_icon=\"close\"\n button_icon_placement=\"iconOnly\"\n [aria_label]=\"clearLabel()\"\n (clicked)=\"cleanInput()\"\n (keydown)=\"onClearButtonKeyDown($event)\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n >\n {{ clearLabel() }}\n </ui-button>\n }\n </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Options Panel -->\n @if (panelOpen()) {\n @if (type() === 'autocomplete') {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n >\n @if (header()) {\n <div class=\"ui-combobox-header text-body--supporting\">\n <span>{{ header() }}</span>\n </div>\n }\n\n <div class=\"ui-combobox-options-list\" role=\"listbox\" [attr.id]=\"listboxId()\">\n @for (option of displayOptions(); track option; let i = $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n selectedOption() === option &&\n (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"selectedOption() === option ? true : null\"\n [attr.aria-label]=\"autocompleteOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <ui-stack stack_gap=\"tiny\">\n <span\n ui-emphasis\n [searchText]=\"textValue()\"\n [displayParagraph]=\"option[displayOptionKey()]\"\n >\n </span>\n <p class=\"foreground-secondary-text\">\n {{ option[subtextOptionKey()] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n @if (selectedOption() === option) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n\n @if (footer()) {\n <div class=\"ui-combobox-footer\">\n <ui-button\n #footerButton\n button_type=\"tertiary\"\n [aria_label]=\"footer()\"\n (click)=\"onFooterAction()\"\n (keydown)=\"onFooterButtonKeyDown($event)\"\n (keydown.escape)=\"onFooterEscape($event)\"\n >\n {{ footer() }}\n </ui-button>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n role=\"listbox\"\n [attr.id]=\"listboxId()\"\n >\n <div class=\"ui-combobox-options-list\">\n @for (option of displayOptions(); track $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n isOptionSelected(option) && (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, $index)\"\n (keydown)=\"onOptionsListKeyDown($event)\"\n [id]=\"optionId($index)\"\n [attr.aria-selected]=\"isOptionSelected(option) ? true : null\"\n [attr.aria-label]=\"optionsTypeOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <span>{{ option[displayOptionKey()] }}</span>\n </ui-stack>\n </div>\n @if (isOptionSelected(option)) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (hint()) {\n <ui-box\n class=\"hint-container\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-combobox input,.ui-combobox .select{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container{display:none!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .input-errors .input-errors-content,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container{display:none!important}.ui-checkbox input,.ui-radio input,.ui-text-input input,.ui-combobox input{appearance:none;margin:0;border:none}.ui-checkbox input,.ui-radio input{cursor:pointer}.ui-checkbox,.ui-radio{--_inset: var(--oasys-spacing-near);--_radius: var(--oasys-radius-soften);--_transition_duration: calc(var(--oasys-animation-duration) * 1ms)}.ui-checkbox input,.ui-radio input{position:absolute;inset:0;border-radius:var(--oasys-radius-soften)}.ui-checkbox input.secondary,.ui-radio input.secondary{inset:unset;top:var(--_inset);--_focusSize: var(--oasys-typography-heading-label-secondary-line-height);width:var(--_focusSize);height:var(--_focusSize)}.ui-checkbox input+label,.ui-radio input+label{width:inherit;display:flex;align-items:center;gap:var(--oasys-spacing-tight)}.ui-checkbox input+label .icon-container,.ui-radio input+label .icon-container{align-self:flex-start;padding:var(--oasys-component-checkbox-icon-inset);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected);border-radius:var(--_radius)}.ui-checkbox input+label .input-hint:empty,.ui-radio input+label .input-hint:empty{display:none}.ui-checkbox input+label.primary,.ui-radio input+label.primary{padding:var(--_inset);border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-checkbox input+label.secondary,.ui-radio input+label.secondary{padding:var(--_inset) 0}.ui-checkbox input+label.secondary .icon-container,.ui-radio input+label.secondary .icon-container{background:transparent;border-radius:var(--_radius);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)}.ui-checkbox input+label,.ui-checkbox input+label .icon-container,.ui-radio input+label,.ui-radio input+label .icon-container{transition:background-color calc(var(--_transition_duration) * 1ms),border-color calc(var(--_transition_duration) * 1ms)}.ui-checkbox input:hover+label.primary,.ui-checkbox input:checked+label.primary,.ui-radio input:hover+label.primary,.ui-radio input:checked+label.primary{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:hover+label.secondary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:hover+label.secondary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-background-selected)}.ui-checkbox input:checked+label.primary .icon-container,.ui-checkbox input:checked+label.secondary .icon-container,.ui-radio input:checked+label.primary .icon-container,.ui-radio input:checked+label.secondary .icon-container{background:var(--oasys-color-interaction-border-selected);border-color:var(--oasys-color-interaction-border-selected);color:var(--oasys-color-brand-foreground-primary-on-dark)}.ui-checkbox input:checked+label.primary,.ui-radio input:checked+label.primary{border-color:var(--oasys-color-interaction-border-selected)!important}.ui-checkbox input.ng-touched.ng-invalid+label,.ui-radio input.ng-touched.ng-invalid+label{color:var(--oasys-color-system-foreground-negative)}.ui-checkbox input.ng-touched.ng-invalid+label .icon-container,.ui-radio input.ng-touched.ng-invalid+label .icon-container{border-color:var(--oasys-color-system-foreground-negative)}.ui-chip .ui-checkbox input+label .icon-container.icon--hidden,.ui-chip .ui-radio input+label .icon-container.icon--hidden{display:none}.ui-chip .ui-checkbox input+label .label--center,.ui-chip .ui-radio input+label .label--center{margin:0 auto}.ui-chip .ui-checkbox input:checked+label.primary,.ui-chip .ui-radio input:checked+label.primary{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selected)!important}.oasys-focus-style,.ui-combobox:has(div[name=combobox]:focus-within),[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;border-radius:var(--oasys-radius-soften);width:100%;background-color:var(--oasys-color-white)}.ui-combobox{transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center;flex:0 0 auto}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;max-height:40vh;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;display:flex;flex-direction:column;overflow:hidden;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition:opacity var(--_ad) cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-options-list{flex:1 1 auto;min-height:0;overflow-y:auto}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften);border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-options.keyboard-open .ui-combobox-option:hover:not(.focus){background-color:transparent;border-radius:0}.ui-combobox-options.keyboard-open .ui-combobox-option.focus:hover{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-combobox input{border:none;width:100%;background-color:transparent}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}\n"] }]
|
|
3838
|
+
], template: "<ui-stack class=\"ui-combobox-container\" stack_gap=\"tight\">\n <div\n #comboboxContainer\n class=\"ui-combobox text-body--default text-body--regular\"\n (focusout)=\"onContainerFocusOut($event)\"\n >\n <!-- Compbobox Options Input -->\n @if (type() === 'options') {\n <div #combobox name=\"combobox\" (mousedown)=\"togglePanel()\" [attr.id]=\"id() + '-combobox'\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onModelChange(textValue())\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'on'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [placeholder]=\"placeholder() || ''\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n role=\"combobox\"\n [attr.aria-label]=\"textValue() || label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.disabled]=\"disabled() || null\"\n [attr.aria-owns]=\"listboxId()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-readonly=\"true\"\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 </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Autocomplete Input -->\n @if (type() === 'autocomplete') {\n <div #combobox name=\"combobox\">\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <ui-box box_space=\"none\" box_background=\"transparent\">\n <!-- Select Label Area -->\n <div class=\"label-container\" stack_direction=\"x\">\n <label class=\"text-body--supporting text-body--regular\" [for]=\"id()\">{{\n label()\n }}</label>\n </div>\n <input\n #textinput\n [id]=\"id()\"\n [name]=\"id()\"\n [ngModel]=\"textValue()\"\n (click)=\"onTextInputClick()\"\n (keydown)=\"onKeyDown($event)\"\n (ngModelChange)=\"onModelChangeAutocomplete($event)\"\n [ngClass]=\"inputDidChange() ? 'ng-input-did-change' : 'ng-input-did-not-change'\"\n [attr.autocorrect]=\"'on'\"\n [attr.disabled]=\"disabled() || null\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"'list'\"\n [required]=\"!optional()\"\n [spellcheck]=\"'on'\"\n [type]=\"'text'\"\n [value]=\"textValue()\"\n [placeholder]=\"placeholder() || ''\"\n role=\"combobox\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-expanded]=\"panelOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n aria-autocomplete=\"list\"\n class=\"text-body--default text-body--regular\"\n />\n </ui-box>\n\n <!-- Combobox Icon Clear Area -->\n <div class=\"icon-container\">\n @if (textValue()) {\n <ui-button\n button_type=\"tertiary\"\n button_size=\"small\"\n button_icon=\"close\"\n button_icon_placement=\"iconOnly\"\n [aria_label]=\"clearLabel()\"\n (clicked)=\"cleanInput()\"\n (keydown)=\"onClearButtonKeyDown($event)\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n >\n {{ clearLabel() }}\n </ui-button>\n }\n </div>\n </ui-stack>\n </div>\n }\n <!-- Combobox Options Panel -->\n @if (panelOpen()) {\n @if (type() === 'autocomplete') {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n >\n @if (header()) {\n <div class=\"ui-combobox-header text-body--supporting\">\n <span>{{ header() }}</span>\n </div>\n }\n\n <div class=\"ui-combobox-options-list\" role=\"listbox\" [attr.id]=\"listboxId()\">\n @for (option of displayOptions(); track option; let i = $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n selectedOption() === option &&\n (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, i)\"\n (keydown)=\"onKeyDown($event)\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"selectedOption() === option ? true : null\"\n [attr.aria-label]=\"autocompleteOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <ui-stack stack_gap=\"tiny\">\n <span\n ui-emphasis\n [searchText]=\"textValue()\"\n [displayParagraph]=\"option[displayOptionKey()]\"\n >\n </span>\n <p class=\"foreground-secondary-text\">\n {{ option[subtextOptionKey()] }}\n </p>\n </ui-stack>\n </ui-stack>\n </div>\n @if (selectedOption() === option) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n\n @if (footer()) {\n <div class=\"ui-combobox-footer\">\n <ui-button\n #footerButton\n button_type=\"tertiary\"\n [aria_label]=\"footer()\"\n (click)=\"onFooterAction()\"\n (keydown)=\"onFooterButtonKeyDown($event)\"\n (keydown.escape)=\"onFooterEscape($event)\"\n >\n {{ footer() }}\n </ui-button>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"ui-combobox-options\"\n [ngClass]=\"{ expand: panelOpen(), 'keyboard-open': shouldShowFocus() }\"\n role=\"listbox\"\n [attr.id]=\"listboxId()\"\n >\n <div class=\"ui-combobox-options-list\">\n @for (option of displayOptions(); track $index) {\n <div\n #option\n class=\"ui-combobox-option\"\n role=\"option\"\n tabindex=\"-1\"\n [ngClass]=\"{\n selected:\n isOptionSelected(option) && (!shouldShowFocus() || focusedOption() === option),\n focus: shouldShowFocus() && focusedOption() === option,\n }\"\n (click)=\"selectOption(option, $index)\"\n (keydown)=\"onOptionsListKeyDown($event)\"\n [id]=\"optionId($index)\"\n [attr.aria-selected]=\"isOptionSelected(option) ? true : null\"\n [attr.aria-label]=\"optionsTypeOptionAriaLabel(option)\"\n >\n <ui-stack\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_align=\"center\"\n stack_gap=\"tight\"\n >\n <div\n [attr.value]=\"valueKey() ? option[valueKey()!] : option.value\"\n [attr.ngValue]=\"displayKey() ? option[displayKey()!] : option.label\"\n >\n <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_gap=\"tight\">\n @if (option.icon_name || (iconNameKey() && option[iconNameKey()!])) {\n <ui-icon\n [icon_name]=\"iconNameKey() ? option[iconNameKey()!] : option.icon_name\"\n ></ui-icon>\n }\n <span>{{ option[displayOptionKey()] }}</span>\n </ui-stack>\n </div>\n @if (isOptionSelected(option)) {\n <ui-icon icon_name=\"tick\"></ui-icon>\n }\n </ui-stack>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n <ui-stack stack_gap=\"none\">\n <div class=\"input-errors\">\n <div class=\"input-errors-content\">\n <ng-content select=\"ui-form-errors\"></ng-content>\n </div>\n </div>\n @if (hint()) {\n <ui-box\n class=\"hint-container\"\n box_background=\"transparent\"\n box_space=\"none\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"near\"\n >\n <div class=\"ui-text-input-hint text-body--supporting text-color--supporting\">\n {{ hint() }}\n </div>\n </ui-box>\n }\n </ui-stack>\n</ui-stack>\n", styles: ["html{font-size:62.5%}html,html body{font-family:var(--oasys-typography-body-body-font-family);font-weight:var(--oasys-typography-body-body-font-weight);font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);color:var(--oasys-color-brand-foreground-primary)}html b,html bold,html strong,html body b,html body bold,html body strong{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}html i,html body i{font-style:normal}h1,h2,h3,.text-heading,.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-family:var(--oasys-typography-heading-hero-desktop-font-family)}h4,h5,h6,.text-heading--functional,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family)}ui-container h1,ui-container h2,ui-container h3,ui-container h4,ui-container h5,ui-container h6,ui-container p,ui-box h1,ui-box h2,ui-box h3,ui-box h4,ui-box h5,ui-box h6,ui-box p,ui-stack h1,ui-stack h2,ui-stack h3,ui-stack h4,ui-stack h5,ui-stack h6,ui-stack p,ui-grid h1,ui-grid h2,ui-grid h3,ui-grid h4,ui-grid h5,ui-grid h6,ui-grid p{margin:0}h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){h1:not(.seo-h1){font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-hero-desktop-font-size);line-height:var(--oasys-typography-heading-hero-desktop-line-height);font-weight:var(--oasys-typography-heading-hero-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--hero,h1.text-heading--hero,h2.text-heading--hero,h3.text-heading--hero,h4.text-heading--hero,h5.text-heading--hero,h6.text-heading--hero{font-size:var(--oasys-typography-heading-hero-mobile-font-size);line-height:var(--oasys-typography-heading-hero-mobile-line-height);font-weight:var(--oasys-typography-heading-hero-mobile-font-weight)}}h2{font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){h2{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-primary-desktop-font-size);line-height:var(--oasys-typography-heading-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--primary,h1.text-heading--primary,h2.text-heading--primary,h3.text-heading--primary,h4.text-heading--primary,h5.text-heading--primary,h6.text-heading--primary{font-size:var(--oasys-typography-heading-primary-mobile-font-size);line-height:var(--oasys-typography-heading-primary-mobile-line-height);font-weight:var(--oasys-typography-heading-primary-mobile-font-weight)}}h3{font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}.text-heading--secondary,h1.text-heading--secondary,h2.text-heading--secondary,h3.text-heading--secondary,h4.text-heading--secondary,h5.text-heading--secondary,h6.text-heading--secondary{font-family:var(--oasys-typography-heading-hero-desktop-font-family);font-size:var(--oasys-typography-heading-secondary-font-size);line-height:var(--oasys-typography-heading-secondary-line-height);font-weight:var(--oasys-typography-heading-secondary-font-weight)}h4{font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){h4{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-primary-desktop-font-size);line-height:var(--oasys-typography-heading-func-primary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-primary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--primary,.ui-rce h2,.ui-prose h2,article h2,h1.text-heading--functional--primary,h2.text-heading--functional--primary,h3.text-heading--functional--primary,h4.text-heading--functional--primary,h5.text-heading--functional--primary,h6.text-heading--functional--primary{font-size:var(--oasys-typography-heading-func-primary-mobile-font-size);line-height:var(--oasys-typography-heading-func-primary-mobile-line-height)}}h5{font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){h5{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-family:var(--oasys-typography-heading-func-primary-desktop-font-family);font-size:var(--oasys-typography-heading-func-secondary-desktop-font-size);line-height:var(--oasys-typography-heading-func-secondary-desktop-line-height);font-weight:var(--oasys-typography-heading-func-secondary-desktop-font-weight)}@media only screen and (max-width:766px){.text-heading--functional--secondary,.ui-rce h3,.ui-prose h3,article h3,h1.text-heading--functional--secondary,h2.text-heading--functional--secondary,h3.text-heading--functional--secondary,h4.text-heading--functional--secondary,h5.text-heading--functional--secondary,h6.text-heading--functional--secondary{font-size:var(--oasys-typography-heading-func-secondary-mobile-font-size);line-height:var(--oasys-typography-heading-func-secondary-mobile-line-height);font-weight:var(--oasys-typography-heading-func-secondary-mobile-font-weight)}}label{-webkit-user-select:none;user-select:none;cursor:pointer}label,.text-label--primary{font-size:var(--oasys-typography-heading-label-primary-font-size);line-height:var(--oasys-typography-heading-label-primary-line-height);font-weight:var(--oasys-typography-heading-label-primary-font-weight)}.text-label--secondary{font-size:var(--oasys-typography-heading-label-secondary-font-size);line-height:var(--oasys-typography-heading-label-secondary-line-height);font-weight:var(--oasys-typography-heading-label-secondary-font-weight)}.text-body--expressive,.ui-rce blockquote,.ui-prose blockquote,article blockquote,.text-heading--body--expressive{font-size:var(--oasys-typography-body-expressive-font-size);line-height:var(--oasys-typography-body-expressive-line-height);font-weight:var(--oasys-typography-body-expressive-font-weight)}.text-body--hero,.ui-rce h6,.ui-prose h6,article h6,.ui-combobox input:-webkit-autofill:first-line,.ui-combobox .select:-webkit-autofill:first-line{font-size:var(--oasys-typography-body-hero-font-size);line-height:var(--oasys-typography-body-hero-line-height);font-weight:var(--oasys-typography-body-hero-font-weight)}.text-body--default,.ui-rce p{font-size:var(--oasys-typography-body-body-font-size);line-height:var(--oasys-typography-body-body-line-height);font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--supporting{font-size:var(--oasys-typography-body-supporting-font-size);line-height:var(--oasys-typography-body-supporting-line-height);font-weight:var(--oasys-typography-body-supporting-font-weight)}.text-body--micro{font-size:var(--oasys-typography-body-micro-font-size);line-height:var(--oasys-typography-body-micro-line-height);font-weight:var(--oasys-typography-body-micro-font-weight)}.text-body--regular,.ui-rce h6,.ui-prose h6,article h6{font-weight:var(--oasys-typography-body-body-font-weight)}.text-body--line-through{text-decoration:var(--oasys-typography-body-line-through-body-text-decoration)}.text-body--emphasis,.ui-rce h3,.ui-prose h3,article h3,.ui-rce h2,.ui-prose h2,article h2,a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover,.ui-combobox input,.ui-combobox .select{font-weight:var(--oasys-typography-body-emphasis-hero-font-weight)}.text-color--on-light{color:var(--oasys-color-brand-foreground-primary)}.text-color--on-light.text-color--supporting,.text-color--on-light .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--on-dark{color:var(--oasys-color-brand-foreground-primary-on-dark)}.text-color--on-dark.text-color--supporting,.text-color--on-dark .text-color--supporting{color:var(--oasys-color-brand-foreground-secondary-on-dark)}.text-color--supporting{color:var(--oasys-color-brand-foreground-secondary)}.text-color--error{color:var(--oasys-color-system-foreground-negative)}.text-color--highlight{color:var(--oasys-color-brand-foreground-highlight)}a{color:inherit;text-decoration:none}.text--readable-width,.ui-rce blockquote,.ui-prose blockquote,article blockquote{max-width:70ch}a,.text-link,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:none;cursor:pointer}a--standalone,.text-link--standalone,.ui-rce .ui-rce-embed a,.ui-rce .ui-rce-embed a:hover,.ui-prose .ui-rce-embed a,.ui-prose .ui-rce-embed a:hover,article .ui-rce-embed a,article .ui-rce-embed a:hover{text-decoration:underline}a--paragraph,.text-link--paragraph,.ui-rce a,.ui-rce a:hover,.ui-prose a,.ui-prose a:hover,article a,article a:hover{text-decoration:underline;font-weight:inherit}.ui-rce h2,.ui-prose h2,article h2{padding-top:var(--oasys-prose-vertical-adjustment-heading-primary-large-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-primary-large-bottom)}@media only screen and (max-width:766px){.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:766px){.ui-rce h3,.ui-prose h3,article h3{padding-top:var(--oasys-prose-vertical-adjustment-heading-secondary-small-top);margin-bottom:var(--oasys-prose-vertical-adjustment-heading-secondary-small-bottom)}}.ui-rce p,.ui-rce ul,.ui-rce ol,.ui-prose p,.ui-prose ul,.ui-prose ol,article p,article ul,article ol{margin-bottom:var(--oasys-prose-vertical-adjustment-paragraph-bottom)}.ui-rce p:empty,.ui-rce ul:empty,.ui-rce ol:empty,.ui-prose p:empty,.ui-prose ul:empty,.ui-prose ol:empty,article p:empty,article ul:empty,article ol:empty{display:none}.ui-rce blockquote,.ui-prose blockquote,article blockquote{padding-top:var(--oasys-prose-vertical-adjustment-blockquote-top);margin-bottom:var(--oasys-prose-vertical-adjustment-blockquote-bottom);text-align:center;margin:0 auto}.ui-rce hr,.ui-prose hr,article hr{display:block;width:100%;border:0;padding:0;margin:0;height:var(--oasys-size-unit-8);background:var(--oasys-color-brand-background-secondary);margin-top:var(--oasys-spacing-expanded);margin-bottom:var(--oasys-spacing-expanded)}.ui-rce ol,.ui-prose ol,article ol{list-style-type:decimal;list-style-position:inside}.ui-rce ul,.ui-prose ul,article ul{list-style:initial;list-style-position:inside}.ui-rce .ui-rce-embed,.ui-prose .ui-rce-embed,article .ui-rce-embed{padding-top:var(--oasys-prose-vertical-adjustment-component-top-bottom);margin-bottom:var(--oasys-prose-vertical-adjustment-component-top-bottom)}.ui-rce .ui-rce-embed ui-button a,.ui-rce .ui-rce-embed ui-button a:hover,.ui-prose .ui-rce-embed ui-button a,.ui-prose .ui-rce-embed ui-button a:hover,article .ui-rce-embed ui-button a,article .ui-rce-embed ui-button a:hover{text-decoration:none}.ui-rce>ui-box .ui-box-content>*:first-child{padding-top:0}.ui-rce>ui-box .ui-box-content>*:last-child{margin-bottom:0}.ui-rce .ui-rce-instance:last-of-type{padding-bottom:var(--oasys-spacing-expanded)}.ui-rce ui-button,.ui-rce img{display:inline-block;margin:0;margin-top:var(--oasys-spacing-near);margin-right:var(--oasys-spacing-near);vertical-align:top}.ui-rce ui-button:last-child,.ui-rce img:last-child{margin-right:0}.ui-rce img{width:100%}.ui-rce ol p,.ui-rce ul p{display:inline;margin:0}form fieldset legend{margin-bottom:var(--oasys-spacing-near)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-text-input,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-text-input-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-textarea-container:has(textarea.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .hint-container,form.ng-dirty .ui-combobox-container:has(input.ng-invalid.ng-input-did-change:not(:focus-within)) .ui-textarea__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-textarea,form.ng-dirty.ng-submitted .ui-text-input-container:has(input.ng-invalid) .ui-combobox,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-text-input,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.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-textarea,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-textarea-container:has(textarea.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-textarea-container:has(textarea.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-text-input-container:has(input.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-textarea-container:has(textarea.ng-invalid) .ui-textarea__hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .hint-container,form.ng-dirty.ng-submitted .ui-combobox-container:has(input.ng-invalid) .ui-textarea__hint-container{display:none!important}.ui-checkbox input,.ui-checkbox textarea,.ui-radio input,.ui-radio textarea,.ui-text-input input,.ui-text-input textarea,.ui-textarea input,.ui-textarea textarea,.ui-combobox input,.ui-combobox textarea{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:has(div[name=combobox]:focus-within),[tabindex]:focus-visible,[tabindex]:focus,select:focus-visible,select:focus,textarea:focus-visible,textarea:focus,input:focus-visible,input:focus,button:focus-visible,button:focus,a:focus-visible,a:focus{outline:var(--oasys-border-width-focus) solid var(--oasys-color-interaction-border-focus);outline-offset:var(--oasys-border-width-focus-offset)}a:focus:not(:focus-visible){outline:none}button:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}textarea:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}[tabindex]:focus:not(:focus-visible){outline:none}:host{display:block;width:100%}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-text-input,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-textarea,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .input-errors .input-errors-content{visibility:visible!important}:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .hint-container,:host.ng-touched.ng-dirty.ng-invalid:not(:focus-within) .ui-combobox-container .ui-textarea__hint-container{display:none!important}.foreground-secondary-text{color:var(--oasys-color-brand-foreground-secondary)}.ui-combobox{--_label-height: var(--oasys-typography-body-supporting-line-height);--_label-input-gap: var(--oasys-spacing-tiny);--_label-top-inset: var(--oasys-spacing-near);--_input-inset-top: calc( var(--_label-height) + var(--_label-input-gap) + var(--_label-top-inset) );--_preface-width: var(--oasys-component-text-input-preface-width);position:relative;border-radius:var(--oasys-radius-soften);width:100%;background-color:var(--oasys-color-white)}.ui-combobox{transition:border calc(var(--oasys-animation-duration-long) * 1ms);border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox div[name=combobox]{cursor:pointer;padding-right:var(--oasys-spacing-near)}.ui-combobox-footer,.ui-combobox-header{padding:var(--oasys-spacing-tight) var(--oasys-spacing-near);text-align:center;flex:0 0 auto}.ui-combobox-footer{cursor:pointer;border-top:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-header{color:var(--oasys-color-brand-foreground-secondary);border-bottom:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox-options{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);background-color:var(--oasys-color-white);box-shadow:0 24px 36px #2626261a;border-radius:var(--oasys-radius-soften);box-sizing:border-box;width:100%;height:auto;max-height:40vh;margin-top:var(--oasys-spacing-near);position:absolute;pointer-events:auto;outline:0;display:flex;flex-direction:column;overflow:hidden;transform-origin:top center;grid-template-rows:0fr;opacity:0;transition:opacity var(--_ad) cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:opacity;z-index:1000}.ui-combobox-options.expand{opacity:1}.ui-combobox-options-list{flex:1 1 auto;min-height:0;overflow-y:auto}.ui-combobox-option{cursor:pointer;border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) transparent;padding:var(--oasys-spacing-near);outline:none;outline-offset:none}.ui-combobox-option:hover,.ui-combobox-option.selected{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox-option.focus{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften);border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-option:focus-visible{border-left:var(--oasys-border-width-focus-offset) var(--oasys-component-box-border-style-solid) var(--oasys-color-interaction-border-focus)}.ui-combobox-options.keyboard-open .ui-combobox-option:hover:not(.focus){background-color:transparent;border-radius:0}.ui-combobox-options.keyboard-open .ui-combobox-option.focus:hover{background-color:var(--oasys-color-interaction-background-selected);border-radius:var(--oasys-radius-soften)}.ui-combobox input,.ui-combobox .select{padding:var(--oasys-spacing-near);padding-top:var(--_input-inset-top)}.ui-combobox input{border:none;width:100%;background-color:transparent}.ui-combobox input:focus{outline:none}.ui-combobox input{cursor:pointer}.ui-combobox-container .input-errors{--_ad: calc(var(--oasys-animation-duration-long) * 1ms);display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-33%);transition:grid-template-rows var(--_ad),opacity var(--_ad),transform var(--_ad);transition-timing-function:cubic-bezier(var(--oasys-animation-timing-function-soft));will-change:grid-template-rows,transform,opacity}.ui-combobox-container .input-errors .input-errors-content{min-height:0;visibility:hidden;transition:visibility var(--_ad)}.ui-combobox-container .input-errors .hint-container{display:block!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-textarea,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-textarea,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-combobox,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-text-input,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-textarea,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-combobox{border:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-danger)}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors{grid-template-rows:1fr;transform:translateY(0);opacity:1}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .input-errors .input-errors-content,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .input-errors .input-errors-content{visibility:visible!important}.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty.ng-input-did-change:not(:focus-within)) .ui-textarea__hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched.ng-dirty:not(:focus)) .ui-textarea__hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .hint-container,.ui-combobox-container:has(.ng-invalid.ng-touched:not(:focus-within)) .ui-textarea__hint-container{display:none!important}.ui-combobox-container:has(input:disabled) input,.ui-combobox-container:has(input:disabled) .select{background-color:none;color:var(--oasys-component-text-input-color-disabled-foreground)}.ui-combobox-container:has(input:disabled) .ui-combobox-input{background-color:var(--oasys-component-text-input-color-disabled-background)}.ui-combobox .label-container{position:absolute;top:var(--oasys-spacing-near);left:var(--oasys-spacing-near);right:var(--oasys-spacing-near);width:calc(100% - var(--oasys-spacing-near) - var(--oasys-spacing-near))}.ui-combobox .label-container,.ui-combobox .label-container label{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-combobox .icon-container:hover{transform:scale(1.1)}.ui-combobox .icon-container{transition:all calc(var(--oasys-animation-duration-long) * 1ms) ease;transform-origin:center}.ui-combobox .icon-container.expand{transform:rotate(-179.999deg)}.ui-combobox:has(.input-preface:not(:empty)){--_left-inset: calc(var(--oasys-spacing-near) + var(--_preface-width))}.ui-combobox:has(.input-preface:not(:empty)) .label-container{left:var(--_left-inset);width:calc(100% - var(--_left-inset) - var(--oasys-spacing-near))}.ui-combobox:has(.input-preface:not(:empty)) input,.ui-combobox:has(.input-preface:not(:empty)) .select{padding-left:var(--_left-inset)}.ui-combobox .input-preface{width:var(--_preface-width);height:100%;position:absolute;display:flex;justify-content:center;align-items:center;pointer-events:none;flex-direction:column;text-align:center;border-right:var(--oasys-border-width-primary) solid var(--oasys-color-interaction-border-selectable)}.ui-combobox .input-preface:empty{visibility:hidden}\n"] }]
|
|
3823
3839
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], displayKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayKey", required: false }] }], iconNameKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconNameKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], subtextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtextKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOptions", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], selectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabel", required: false }] }], didChange: [{ type: i0.Output, args: ["didChange"] }], didSearch: [{ type: i0.Output, args: ["didSearch"] }], didEdit: [{ type: i0.Output, args: ["didEdit"] }], textInput: [{ type: i0.ViewChild, args: ['textinput', { ...{
|
|
3824
3840
|
read: ElementRef,
|
|
3825
3841
|
}, isSignal: true }] }], combobox: [{ type: i0.ViewChild, args: ['combobox', { ...{
|
|
@@ -4166,5 +4182,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4166
4182
|
* Generated bundle index. Do not edit.
|
|
4167
4183
|
*/
|
|
4168
4184
|
|
|
4169
|
-
export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IMAGE_BREAKPOINTS, IMAGE_URL_PROVIDER, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, OasysComboboxComponent, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent };
|
|
4185
|
+
export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IMAGE_BREAKPOINTS, IMAGE_URL_PROVIDER, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, OasysComboboxComponent, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, TextareaComponent as OasysTextareaComponent, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent, TextareaComponent };
|
|
4170
4186
|
//# sourceMappingURL=oasys-lib.mjs.map
|